:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090c;
  --bg-soft: #0d0f14;
  --surface: rgba(18, 20, 28, .78);
  --surface-2: rgba(28, 31, 42, .88);
  --surface-3: #151822;
  --surface-solid: #12151d;
  --surface-elevated: #191d28;
  --input: rgba(0, 0, 0, .22);
  --glass: rgba(10, 12, 18, .74);
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.14);
  --text: #f7f8fb;
  --muted: #a4a9b8;
  --soft: #73798a;
  --track: rgba(255,255,255,.06);
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --accent-3: #ec4899;
  --accent-soft: rgba(139,92,246,.14);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --gold: #f5c451;
  --danger-text: #fecdd3;
  --warning-text: #fde68a;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 20px 70px rgba(0,0,0,.42);
  --shadow-soft: 0 12px 36px rgba(0,0,0,.22);
  --theme-color: #08090c;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5fb;
  --bg-soft: #ebeef7;
  --surface: rgba(255,255,255,.76);
  --surface-2: rgba(255,255,255,.92);
  --surface-3: #f1f3f9;
  --surface-solid: #ffffff;
  --surface-elevated: #ffffff;
  --input: rgba(30, 24, 52, .045);
  --glass: rgba(246,247,252,.78);
  --line: rgba(53, 44, 84, .10);
  --line-strong: rgba(53, 44, 84, .17);
  --text: #17151f;
  --muted: #616678;
  --soft: #858a99;
  --track: rgba(53, 44, 84, .08);
  --accent: #7c3aed;
  --accent-2: #0891b2;
  --accent-3: #db2777;
  --accent-soft: rgba(124,58,237,.10);
  --success: #059669;
  --warning: #d97706;
  --danger: #e11d48;
  --gold: #b7791f;
  --danger-text: #9f1239;
  --warning-text: #92400e;
  --shadow: 0 22px 70px rgba(51, 38, 83, .14);
  --shadow-soft: 0 12px 36px rgba(51, 38, 83, .09);
  --theme-color: #f4f5fb;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
html { transition: background-color .22s ease, color .22s ease; }
body { min-height: 100dvh; overflow-x: hidden; position: relative; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

.ambient-waves { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; opacity: .9; }
.ambient-wave { position: absolute; left: -28vw; width: 156vw; height: 22vh; min-height: 150px; border-radius: 50%; filter: blur(64px); transform-origin: center; mix-blend-mode: screen; }
html[data-theme="light"] .ambient-wave { mix-blend-mode: multiply; opacity: .34; }
.ambient-wave-a { top: 4vh; background: linear-gradient(90deg, transparent 4%, rgba(139,92,246,.30) 30%, rgba(34,211,238,.26) 58%, rgba(236,72,153,.20) 78%, transparent 96%); animation: waveFloatA 17s ease-in-out infinite alternate; }
.ambient-wave-b { top: 39vh; background: linear-gradient(90deg, transparent 6%, rgba(34,211,238,.14) 27%, rgba(236,72,153,.20) 55%, rgba(139,92,246,.21) 76%, transparent 95%); animation: waveFloatB 21s ease-in-out infinite alternate; }
.ambient-wave-c { bottom: -3vh; background: linear-gradient(90deg, transparent 5%, rgba(236,72,153,.14) 29%, rgba(139,92,246,.22) 52%, rgba(34,211,238,.17) 77%, transparent 96%); animation: waveFloatC 24s ease-in-out infinite alternate; }

.app-shell { min-height: 100dvh; position: relative; z-index: 1; }
.boot-screen { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--muted); }
.brand-mark { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(145deg, var(--accent), var(--accent-2) 58%, var(--accent-3)); padding: 2px; box-shadow: 0 12px 40px rgba(124,58,237,.25); }
.brand-mark span { width: 100%; height: 100%; border-radius: 16px; display: block; background: var(--surface-solid); position: relative; }
.brand-mark span::before { content:""; position:absolute; width:22px; height:22px; border:3px solid var(--text); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.96; }
.brand-mark span::after { content:""; position:absolute; width:7px; height:7px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2), transparent 20%); }

.center-page { min-height: 100dvh; display: grid; align-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(30px, env(safe-area-inset-bottom)); }
.auth-card, .panel { width: min(100%, 500px); margin: auto; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2), transparent 5%), color-mix(in srgb, var(--surface-solid), transparent 4%)); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); backdrop-filter: blur(24px); }
.auth-card { padding: 30px; position: relative; overflow: hidden; }
.auth-card::before { content:""; position:absolute; width:240px; height:240px; border-radius:50%; right:-120px; top:-130px; background:radial-gradient(circle, rgba(139,92,246,.18), transparent 68%); pointer-events:none; }
.auth-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; position:relative; z-index:1; }
.eyebrow { color: color-mix(in srgb, var(--accent), var(--text) 28%); text-transform: uppercase; font-weight: 850; letter-spacing: .14em; font-size: .71rem; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(2.25rem, 8vw, 3.55rem); line-height: .95; letter-spacing: -.057em; margin-bottom: 14px; }
h2 { font-size: 1.45rem; letter-spacing: -.03em; }
.lede { color: var(--muted); line-height:1.58; font-size: .98rem; }
.feature-row { display:flex; flex-wrap:wrap; gap:8px; margin:19px 0 3px; }
.feature-chip { display:inline-flex; align-items:center; gap:7px; min-height:31px; padding:0 10px; border-radius:999px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent), transparent 82%); color:color-mix(in srgb, var(--accent), var(--text) 30%); font-size:.73rem; font-weight:800; }
.auth-actions { display:grid; gap:12px; margin-top: 25px; }
.divider { display:flex; align-items:center; gap:12px; color:var(--soft); font-size:.8rem; margin:8px 0; }
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}

.btn { border:0; border-radius: 15px; min-height: 50px; padding: 0 18px; font-weight: 820; cursor:pointer; transition: transform .16s ease, opacity .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background: linear-gradient(125deg, var(--accent), #5b5ee8 45%, var(--accent-2) 80%, var(--accent-3)); color:white; box-shadow: 0 12px 34px rgba(79,70,229,.23); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 16px 38px rgba(79,70,229,.30); }
.btn-secondary { background: color-mix(in srgb, var(--surface-2), transparent 12%); border:1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-danger { background: color-mix(in srgb, var(--danger), transparent 86%); border: 1px solid color-mix(in srgb, var(--danger), transparent 74%); color:var(--danger-text); }
.btn-small { min-height: 38px; border-radius: 12px; padding: 0 13px; font-size:.86rem; }
.google-icon { width:20px;height:20px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-weight:900;font-size:.75rem;box-shadow:0 1px 5px rgba(0,0,0,.15); }
.theme-toggle { width:42px; height:42px; flex:0 0 auto; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--surface-2), transparent 12%); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .16s ease, background .16s ease; }
.theme-toggle:hover { transform:translateY(-1px); }
.theme-toggle .sun { display:none; }
html[data-theme="light"] .theme-toggle .sun { display:inline; }
html[data-theme="light"] .theme-toggle .moon { display:none; }
.field { display:grid; gap:7px; }
.field label { color:color-mix(in srgb, var(--text), var(--muted) 25%); font-size:.84rem; font-weight:750; }
.field input { width:100%; border-radius: 14px; border:1px solid var(--line); background: var(--input); color:var(--text); min-height:49px; padding:0 14px; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.field input:focus { border-color:color-mix(in srgb, var(--accent), transparent 42%); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent), transparent 90%); }
.field input::placeholder { color:var(--soft); }
.inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.helper { color:var(--soft);font-size:.77rem;line-height:1.48 }
.error-box { border:1px solid color-mix(in srgb, var(--danger), transparent 72%); background:color-mix(in srgb, var(--danger), transparent 92%); color:var(--danger-text); padding:12px 14px; border-radius:14px; font-size:.86rem; line-height:1.45; }

.lobby-shell { min-height:100dvh; padding: max(20px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom)); }
.lobby-wrap { width:min(100%,1020px);margin:0 auto; }
.topbar { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:28px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.brand-inline { display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.02em; }
.brand-inline .brand-mark { width:38px;height:38px;border-radius:13px; }
.brand-inline .brand-mark span { border-radius:11px; }
.profile-chip { min-height:42px; display:flex;align-items:center;gap:9px;background:color-mix(in srgb, var(--surface-2), transparent 14%);border:1px solid var(--line);border-radius:999px;padding:4px 9px 4px 4px;cursor:pointer;box-shadow:var(--shadow-soft); }
.avatar { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font-weight:900;overflow:hidden;flex:0 0 auto;color:white; }
.avatar img { width:100%;height:100%;object-fit:cover; }
.lobby-hero { display:grid;grid-template-columns:1.32fr .68fr;gap:18px;align-items:stretch; }
.hero-card { background:linear-gradient(145deg,color-mix(in srgb, var(--surface-2), transparent 8%),color-mix(in srgb, var(--surface-solid), transparent 6%));border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden;box-shadow:var(--shadow-soft); }
.hero-card::before { content:""; position:absolute; inset:auto -8% -35% 22%; height:58%; background:linear-gradient(105deg,transparent,rgba(139,92,246,.18),rgba(34,211,238,.16),rgba(236,72,153,.13),transparent);filter:blur(36px);transform:rotate(-8deg);animation:heroWave 9s ease-in-out infinite alternate; }
.hero-card::after { content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-110px;top:-150px;background:radial-gradient(circle,rgba(139,92,246,.17),transparent 68%); }
.hero-card > * { position:relative; z-index:1; }
.hero-card h1 { max-width:620px; }
.hero-card .lede { max-width:620px; }
.hero-stat-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.hero-stat { min-width:120px; padding:12px 14px; border-radius:16px; background:color-mix(in srgb, var(--surface-2), transparent 22%); border:1px solid var(--line); }
.hero-stat strong { display:block; font-size:.97rem; }
.hero-stat span { display:block; color:var(--muted); font-size:.72rem; margin-top:3px; }
.action-grid { display:grid;gap:18px; }
.action-card { background:color-mix(in srgb, var(--surface), transparent 4%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:grid;gap:14px;box-shadow:var(--shadow-soft);backdrop-filter:blur(18px); }
.action-card h3 { margin-bottom:0; }
.join-line { display:flex;gap:8px; }
.join-line input { min-width:0;flex:1;text-transform:uppercase;letter-spacing:.16em;font-weight:900;text-align:center; }

.modal-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.67);backdrop-filter:blur(11px);z-index:50;display:grid;place-items:end center;padding:20px 14px max(14px,env(safe-area-inset-bottom));animation:fade .18s ease; }
html[data-theme="light"] .modal-backdrop { background:rgba(31,25,47,.40); }
.modal { width:min(100%,560px);max-height:min(90dvh,780px);overflow:auto;background:var(--surface-solid);border:1px solid var(--line-strong);border-radius:28px;padding:22px;box-shadow:var(--shadow);animation:sheet .22s cubic-bezier(.2,.8,.2,1); }
.modal-head { display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px; }
.icon-btn { width:40px;height:40px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb, var(--surface-2), transparent 8%);display:grid;place-items:center;cursor:pointer;flex:0 0 auto; }
.game-top .icon-btn { box-shadow:none; }
.mode-toggle { display:grid;grid-template-columns:1fr 1fr;background:var(--track);border:1px solid var(--line);border-radius:16px;padding:4px;gap:4px; }
.mode-toggle button { min-height:46px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-weight:850;cursor:pointer; }
.mode-toggle button.active { background:var(--surface-elevated);color:var(--text);box-shadow:var(--shadow-soft); }
.wager-box { background:linear-gradient(145deg,color-mix(in srgb,var(--gold),transparent 91%),color-mix(in srgb,var(--accent),transparent 94%));border:1px solid color-mix(in srgb,var(--gold),transparent 78%);border-radius:18px;padding:16px;display:grid;gap:12px; }
.quote-row { display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.89rem; }
.quote-row strong { color:var(--text); }
.quote-row.total { border-top:1px solid var(--line);padding-top:12px;color:var(--text);font-weight:850; }
.policy-note { color:var(--warning-text);font-size:.76rem;line-height:1.45;background:color-mix(in srgb,var(--warning),transparent 92%);border-radius:12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--warning),transparent 84%); }

.game-shell { min-height:100dvh;padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
.game-top { position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:blur(22px);border-bottom:1px solid var(--line);padding:max(12px,env(safe-area-inset-top)) 16px 11px; }
.game-top-inner { width:min(100%,920px);margin:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px; }
.game-top-actions { display:flex; align-items:center; gap:8px; }
.game-title { min-width:0; }
.game-title h2 { margin:0;font-size:1.04rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.game-title small { color:var(--muted); }
.pill { display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 10px;background:color-mix(in srgb,var(--surface-2),transparent 15%);border:1px solid var(--line);font-size:.72rem;font-weight:850;color:color-mix(in srgb,var(--text),var(--muted) 25%);white-space:nowrap; }
.pill.live::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px color-mix(in srgb,var(--success),transparent 91%); }
.pill.wager { color:var(--warning-text);border-color:color-mix(in srgb,var(--gold),transparent 78%); }
.main { width:min(100%,920px);margin:0 auto;padding:18px 16px 28px; }
.summary-card { border-radius:var(--radius-xl);border:1px solid var(--line);background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2),transparent 7%),color-mix(in srgb,var(--surface-solid),transparent 5%));padding:21px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-bottom:18px;overflow:hidden;position:relative;box-shadow:var(--shadow-soft); }
.summary-card::before { content:"";position:absolute;inset:0;background:linear-gradient(118deg,transparent 30%,rgba(139,92,246,.08),rgba(34,211,238,.07),transparent 72%);transform:translateX(-40%);animation:summarySheen 10s ease-in-out infinite alternate; }
.summary-card::after{content:"";position:absolute;inset:auto -80px -130px auto;width:230px;height:230px;border-radius:50%;background:color-mix(in srgb,var(--accent-2),transparent 91%)}
.summary-card > * { position:relative; z-index:1; }
.summary-score { font-size:2.1rem;font-weight:950;letter-spacing:-.05em; }
.summary-meta { color:var(--muted);font-size:.83rem;margin-top:4px; }
.progress-ring { --p:0; width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent-2) calc(var(--p)*1%), var(--track) 0);position:relative; }
.progress-ring::after { content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface-solid); }
.progress-ring strong { position:relative;z-index:1;font-size:.83rem; }
.section-kicker { display:flex;justify-content:space-between;align-items:end;gap:12px;margin:22px 2px 10px; }
.section-kicker h3 { margin:0;font-size:1rem; }
.section-kicker span { color:var(--muted);font-size:.78rem; }
.category { border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface),transparent 7%);overflow:hidden;margin-bottom:10px;box-shadow:0 8px 24px color-mix(in srgb,var(--bg),transparent 64%); }
.category-head { width:100%;border:0;background:transparent;padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left; }
.category-head:hover { background:color-mix(in srgb,var(--accent),transparent 96%); }
.category-dot { width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px color-mix(in srgb, var(--accent), transparent 35%); }
.category[data-cat="common"] .category-dot { background:var(--success); }
.category[data-cat="uncommon"] .category-dot { background:var(--warning); }
.category[data-cat="rare"] .category-dot { background:var(--danger); }
.category[data-cat="jackpot"] .category-dot { background:var(--accent); }
.category-title { flex:1;min-width:0; }
.category-title strong { display:block;font-size:.93rem; }
.category-title small { color:var(--muted); }
.chev { color:var(--soft);transition:transform .18s ease; }
.category.open .chev { transform:rotate(180deg); }
.challenge-list { display:none;border-top:1px solid var(--line); }
.category.open .challenge-list { display:block; }
.challenge-row { min-height:70px;display:flex;align-items:center;gap:13px;padding:12px 14px;border-bottom:1px solid var(--line);transition:background .15s ease,opacity .15s ease; }
.challenge-row:last-child { border-bottom:0; }
.challenge-row:hover { background:color-mix(in srgb,var(--surface-2),transparent 55%); }
.challenge-row.complete { opacity:.74; }
.challenge-row.pending { background:color-mix(in srgb,var(--accent-2),transparent 96%); }
.challenge-row.rejected { background:color-mix(in srgb,var(--danger),transparent 96%); }
.check-btn { width:40px;height:40px;border-radius:13px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface-2),transparent 28%);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;font-weight:900;transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.check-btn:hover:not(:disabled) { transform:scale(1.04); border-color:color-mix(in srgb,var(--accent),transparent 55%); }
.check-btn:disabled { cursor:not-allowed; opacity:.58; }
.challenge-row.complete .check-btn { background:color-mix(in srgb,var(--success),transparent 88%);border-color:color-mix(in srgb,var(--success),transparent 68%);color:var(--success); }
.challenge-row.pending .check-btn { color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2),transparent 70%); }
.challenge-row.rejected .check-btn { color:var(--danger);border-color:color-mix(in srgb,var(--danger),transparent 65%); }
.pending-spinner { width:14px;height:14px;border:2px solid color-mix(in srgb,var(--accent-2),transparent 70%);border-top-color:var(--accent-2);border-radius:50%;animation:spin .8s linear infinite; }
.challenge-copy { flex:1;min-width:0; }
.challenge-copy strong { display:block;font-size:.91rem;line-height:1.3; }
.challenge-copy small { color:var(--muted);font-size:.75rem; }
.challenge-row.rejected .challenge-copy small { color:var(--danger);font-weight:760; }
.points { font-size:.77rem;font-weight:900;color:color-mix(in srgb,var(--text),var(--muted) 20%);background:var(--track);border-radius:999px;padding:6px 9px;white-space:nowrap; }
.evidence-thumb { width:40px;height:40px;border-radius:11px;overflow:hidden;background:var(--surface-3);border:1px solid var(--line);cursor:pointer;flex:0 0 auto;display:grid;place-items:center; }
.evidence-thumb img { width:100%;height:100%;object-fit:cover; }

.bottom-nav { position:fixed;z-index:30;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),560px);display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--surface-2),transparent 7%);border:1px solid var(--line-strong);border-radius:22px;padding:6px;backdrop-filter:blur(26px);box-shadow:var(--shadow); }
.bottom-nav button { border:0;background:transparent;border-radius:16px;min-height:55px;color:var(--soft);font-weight:800;font-size:.7rem;display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease; }
.bottom-nav button:active { transform:scale(.97); }
.bottom-nav button span { font-size:1.05rem; }
.bottom-nav button.active { background:var(--accent-soft);color:color-mix(in srgb,var(--accent),var(--text) 35%); }

.leaderboard { display:grid;gap:9px; }
.leader-row { background:color-mix(in srgb,var(--surface),transparent 4%);border:1px solid var(--line);border-radius:17px;padding:13px;display:grid;grid-template-columns:32px 1fr auto;gap:11px;align-items:center;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .2s ease,background .2s ease;box-shadow:0 7px 22px color-mix(in srgb,var(--bg),transparent 72%); }
.leader-row.is-me { border-color:color-mix(in srgb,var(--accent),transparent 67%);background:color-mix(in srgb,var(--accent),transparent 95%); }
.rank { color:var(--muted);font-weight:950;text-align:center; }
.leader-row:nth-child(1) .rank { color:var(--gold); }
.leader-main { min-width:0; }
.leader-name { display:flex;justify-content:space-between;gap:10px;font-size:.87rem;font-weight:850;margin-bottom:7px; }
.leader-name span:first-child { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bar-track { height:8px;background:var(--track);border-radius:99px;overflow:hidden; }
.bar { height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2) 66%,var(--accent-3));transition:width .5s cubic-bezier(.2,.8,.2,1); }
.leader-score { font-size:.86rem;font-weight:950;white-space:nowrap; }
.activity-feed { display:grid;gap:8px; }
.activity-item { border:1px solid var(--line);background:color-mix(in srgb,var(--surface),transparent 15%);border-radius:16px;padding:12px 14px;font-size:.84rem;line-height:1.45;color:var(--muted); }
.activity-item strong { color:var(--text); }

.album-lock { min-height:45dvh;display:grid;place-items:center;text-align:center;padding:40px 16px;color:var(--muted); }
.lock-orb { width:82px;height:82px;border-radius:27px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent),transparent 80%);display:grid;place-items:center;margin:0 auto 16px;font-size:1.65rem;box-shadow:0 18px 45px color-mix(in srgb,var(--accent),transparent 90%); }
.album-grid { columns:2;column-gap:10px; }
.album-item { break-inside:avoid;margin:0 0 10px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-solid);position:relative;cursor:pointer;box-shadow:var(--shadow-soft); }
.album-item img { width:100%;height:auto; }
.album-caption { padding:10px;font-size:.75rem;color:var(--muted); }
.album-caption strong { color:var(--text);display:block;margin-bottom:2px; }

.host-grid { display:grid;gap:12px; }
.host-card { border:1px solid var(--line);background:color-mix(in srgb,var(--surface),transparent 5%);border-radius:18px;padding:16px;box-shadow:0 8px 24px color-mix(in srgb,var(--bg),transparent 75%); }
.host-card h3 { font-size:.97rem;margin-bottom:8px; }
.invite-code { font-size:1.68rem;letter-spacing:.18em;font-weight:950;margin:12px 0;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%; }
.submission-review { display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line); }
.submission-review:last-child { border:0; }
.review-copy { flex:1;min-width:0;font-size:.82rem; }
.review-copy strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.review-copy small { color:var(--muted); }

.payment-gate { border:1px solid color-mix(in srgb,var(--gold),transparent 80%);background:linear-gradient(145deg,color-mix(in srgb,var(--gold),transparent 92%),color-mix(in srgb,var(--surface),transparent 2%));border-radius:24px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow-soft); }
.payment-gate .price { font-size:2rem;font-weight:950;letter-spacing:-.04em; }
.payment-gate .price small { color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:0; }

.photo-picker { display:grid;gap:14px; }
.photo-preview { aspect-ratio:4/3;border-radius:20px;background:var(--bg-soft);border:1px dashed var(--line-strong);overflow:hidden;display:grid;place-items:center;color:var(--muted); }
.photo-preview img { width:100%;height:100%;object-fit:cover; }
.file-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.file-label { min-height:49px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2),transparent 8%);display:flex;align-items:center;justify-content:center;font-weight:850;cursor:pointer; }
.file-label input { display:none; }
.upload-progress { height:7px;border-radius:99px;background:var(--track);overflow:hidden; }
.upload-progress span { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));transition:width .2s ease; }

.toast-stack { position:fixed;z-index:100;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 28px),450px);display:grid;gap:8px;pointer-events:none; }
.toast { background:color-mix(in srgb,var(--surface-elevated),transparent 3%);border:1px solid var(--line-strong);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);font-size:.84rem;animation:toastIn .22s ease; }
.toast.error { border-color:color-mix(in srgb,var(--danger),transparent 70%);color:var(--danger-text); }
.toast.success { border-color:color-mix(in srgb,var(--success),transparent 72%); }
.confetti { position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden; }
.confetti i { position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;background:var(--accent);animation:fall 2.3s linear forwards; }

@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes sheet { from{opacity:0;transform:translateY(24px) scale(.98)} to{opacity:1;transform:none} }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes fall { to{transform:translateY(110vh) rotate(720deg);opacity:.9} }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes waveFloatA { 0%{transform:translate3d(-5vw,-1vh,0) rotate(-7deg) scaleY(.86)} 50%{transform:translate3d(3vw,5vh,0) rotate(-3deg) scaleY(1.18)} 100%{transform:translate3d(9vw,1vh,0) rotate(-9deg) scaleY(.95)} }
@keyframes waveFloatB { 0%{transform:translate3d(8vw,2vh,0) rotate(8deg) scaleY(.9)} 50%{transform:translate3d(-4vw,-4vh,0) rotate(3deg) scaleY(1.15)} 100%{transform:translate3d(-10vw,3vh,0) rotate(10deg) scaleY(.86)} }
@keyframes waveFloatC { 0%{transform:translate3d(-8vw,3vh,0) rotate(-4deg) scaleY(.92)} 100%{transform:translate3d(8vw,-3vh,0) rotate(5deg) scaleY(1.2)} }
@keyframes heroWave { 0%{transform:translateX(-12%) rotate(-9deg) scaleY(.8)} 100%{transform:translateX(18%) rotate(-3deg) scaleY(1.2)} }
@keyframes summarySheen { 0%{transform:translateX(-48%)} 100%{transform:translateX(42%)} }

@media (max-width:760px) {
  .lobby-hero { grid-template-columns:1fr; }
  .hero-card { min-height:310px;display:flex;flex-direction:column;justify-content:flex-end; }
  .profile-chip .profile-name { display:none; }
  .hero-stat-row { gap:8px; }
  .hero-stat { min-width:100px; flex:1; }
}
@media (max-width:520px) {
  .pill { padding:6px 8px; font-size:.68rem; }
  .game-top-inner { gap:8px; }
  .game-top .theme-toggle { width:38px;height:38px;border-radius:12px; }
  .challenge-row { gap:10px; padding:11px 12px; }
}
@media (max-width:430px) {
  .auth-card { padding:23px 20px; }
  .inline-fields { grid-template-columns:1fr; }
  .summary-card { padding:17px; }
  .modal { padding:19px; }
  .file-actions { grid-template-columns:1fr; }
  .theme-toggle { width:40px;height:40px; }
  .game-title small { font-size:.74rem; }
}
@media (min-width:760px) {
  .album-grid { columns:3; }
  .modal-backdrop { place-items:center; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ambient-waves { opacity:.55; }
}