/* Streak modal (component.StreakModal): a bottom sheet on phones, a
   floating rounded panel on larger screens. The body is htmx-filled with
   StreaksContent (page/streaks.templ), whose page-sized hero is compacted
   here so the modal reads as a card, not as the /streak page in a box. */

.streak-modal {
	--ss-radius: 30px;
	--ss-bg: var(--streak-slate-50, #f8fafc);
	--ss-chrome: rgba(15, 23, 42, 0.06);
	--ss-chrome-ink: var(--streak-slate-600, #475569);
	background: rgba(7, 11, 24, 0.12);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	padding: 0 !important;
}

html[data-theme="dark"] .streak-modal {
	--ss-bg: linear-gradient(180deg, #16213a 0%, var(--tt-surface, #111a2e) 38%);
	--ss-chrome: rgba(255, 255, 255, 0.08);
	--ss-chrome-ink: #cbd5e1;
	background: rgba(2, 6, 16, 0.2);
}


/* Sheet geometry: pinned to the bottom edge, never taller than the
   viewport minus a peek of the page behind it. */
.modal.streak-modal .modal-dialog {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 28px));
	display: flex;
	align-items: flex-end;
	transform: translateY(100%);
	transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.streak-modal.show .modal-dialog { transform: translateY(0); }

.modal.streak-modal .modal-content.streak-sheet {
	background: var(--ss-bg);
	border: 0;
	border-radius: var(--ss-radius) var(--ss-radius) 0 0;
	box-shadow: 0 -24px 60px -20px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
	max-height: inherit;
	height: auto;
	overflow: hidden;
	position: relative;
}

.streak-sheet-grip {
	position: absolute;
	top: 10px;
	left: 50%;
	width: 42px;
	height: 5px;
	border-radius: 999px;
	background: var(--ss-chrome);
	transform: translateX(-50%);
	z-index: 5;
}

.streak-sheet-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: var(--ss-chrome);
	color: var(--ss-chrome-ink);
	font-size: 0.95rem;
	display: grid;
	place-items: center;
	z-index: 6;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform 0.18s ease, background 0.18s ease;
}

.streak-sheet-close:hover { transform: scale(1.06); }
.streak-sheet-close:active { transform: scale(0.94); }

.streak-sheet-body {
	padding: 2.4rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.streak-sheet-body .container { padding-left: 0; padding-right: 0; }

.streak-sheet-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3.5rem 0 3rem;
	color: var(--streak-slate-400, #94a3b8);
	font-weight: 700;
	font-size: 0.9rem;
}

.streak-sheet-loading i {
	font-size: 2.6rem;
	color: #f59e0b;
	animation: streak-sheet-breathe 1.2s ease-in-out infinite;
}

@keyframes streak-sheet-breathe {
	0%, 100% { transform: scale(1); opacity: 0.55; }
	50% { transform: scale(1.12); opacity: 1; }
}

/* ---- Compact the page content inside the sheet ---------------------- */

/* The sheet is the hero: drop the page heading and the card chrome. */
.streak-sheet-body .streak-page-header { display: none; }

.streak-sheet-body .streak-card {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0 0 1.25rem;
	margin-bottom: 1rem;
	overflow: visible;
}

.streak-sheet-body .streak-card::before { display: none; }

.streak-sheet-body .streak-card-ambient {
	inset: -2.4rem -1rem auto;
	height: 420px;
	background:
		radial-gradient(260px 200px at 50% 28%, rgba(251, 191, 36, 0.22), transparent 70%),
		radial-gradient(420px 260px at 50% 0%, rgba(239, 68, 68, 0.1), transparent 75%);
}

.streak-sheet-body .streak-fire-container { width: 150px; height: 150px; }
.streak-sheet-body .streak-fire-icon { font-size: 96px; }
.streak-sheet-body .streak-fire-icon.streak-fire-cold { font-size: 80px; }
.streak-sheet-body .streak-fire-ring { width: 124px; height: 124px; }
.streak-sheet-body .streak-fire-glow { width: 150px; height: 150px; }
.streak-sheet-body .streak-spark { bottom: 28px; }

/* Number and label share one line ("3 DAY STREAK"); a forced break after
   the label drops the status chip and perk chips beneath. */
.streak-sheet-body .streak-stats-main { margin-top: -0.75rem; }

.streak-sheet-body .streak-count {
	display: inline-block;
	font-size: 3.6rem;
	margin: 0 0.3rem 0 0;
	vertical-align: baseline;
}

.streak-sheet-body .streak-label {
	display: inline;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	margin: 0;
	vertical-align: baseline;
}

.streak-sheet-body .streak-label::after {
	content: "\A";
	white-space: pre;
	letter-spacing: 0;
}

.streak-sheet-body .streak-status-chip { margin-top: 0.9rem; }
.streak-sheet-body .streak-perk-chips { margin-top: 0.5rem; }

/* Section headers: tighter, and no wrapping title on narrow screens. */
.streak-sheet-body .section-header { margin-bottom: 1.25rem; gap: 0.75rem; }
.streak-sheet-body .section-title { font-size: 1.15rem; gap: 0.6rem; white-space: nowrap; }
.streak-sheet-body .section-title i { width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; }
.streak-sheet-body .rewards-unlocked-pill { font-size: 0.72rem; padding: 0.35rem 0.75rem; white-space: nowrap; }

.streak-sheet-body .streak-status-chip { font-size: 0.8rem; padding: 0.45rem 1rem; }

/* Week strip as a single tidy row with no wrap. */
.streak-sheet-body .streak-week {
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin-top: 1.1rem;
	padding: 0.65rem 0.5rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] .streak-sheet-body .streak-week {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.06);
}

.streak-sheet-body .streak-week-day { width: auto; flex: 1 1 0; gap: 0.3rem; }
.streak-sheet-body .streak-week-dot { width: 36px; height: 36px; border-radius: 12px; font-size: 0.85rem; }
.streak-sheet-body .streak-week-label { font-size: 0.62rem; }

.streak-sheet-body .next-reward-banner { margin-top: 1rem; }

.streak-sheet-body .rewards-map-card,
.streak-sheet-body .heatmap-card,
.streak-sheet-body .badge-case-card,
.streak-sheet-body .flame-colour-card,
.streak-sheet-body .hall-of-fame-card,
.streak-sheet-body .legendary-theme-card {
	margin-bottom: 1rem;
	border-radius: 22px;
}

/* ---- Larger screens: a floating panel instead of a sheet ------------ */
@media (min-width: 768px) {
	.modal.streak-modal .modal-dialog {
		position: relative;
		inset: auto;
		margin: 4vh auto;
		max-width: 720px;
		max-height: 92vh;
		align-items: center;
		transform: translateY(24px) scale(0.98);
		opacity: 0;
		transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
	}

	.modal.streak-modal.show .modal-dialog { transform: none; opacity: 1; }

	.modal.streak-modal .modal-content.streak-sheet {
		border-radius: var(--ss-radius);
		box-shadow: 0 40px 90px -30px rgba(2, 6, 23, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	}

	.streak-sheet-grip { display: none; }
	.streak-sheet-body { padding: 2.25rem 2rem 2rem; }
	.streak-sheet-body .streak-fire-container { width: 170px; height: 170px; }
	.streak-sheet-body .streak-fire-icon { font-size: 110px; }
	.streak-sheet-body .streak-count { font-size: 4.2rem; }
	.streak-sheet-body .streak-week { width: fit-content; margin-inline: auto; padding: 0.75rem 1.25rem; }
	.streak-sheet-body .streak-week-day { flex: 0 0 auto; width: 52px; }
	.streak-sheet-body .streak-week-dot { width: 42px; height: 42px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.modal.streak-modal .modal-dialog { transition: none; }
	.streak-sheet-loading i { animation: none; }
}