@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;600;700;800&display=swap');

:root { --background:#171717; --panel:#1a1a1a; --panel-light:#242424; --line:#333; --mint:#21f1a8; --muted:#9ba8ba; --soft:#666; --danger:#fa6672; --app-viewport-height:100dvh; --app-viewport-top:0px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { min-height:100%; }
body { background:#0c0c0c; color:#f3f5f9; font-family:Inter,Arial,sans-serif; margin:0; }
button { font:inherit; }

.phone { background:var(--background); margin:0 auto; max-width:390px; min-height:100dvh; overflow:hidden; padding-bottom:82px; position:relative; }

.progress-hero { background:var(--panel); display:flex; flex-direction:column; gap:16px; padding:16px; }
.hero-top-row { align-items:center; display:flex; gap:10px; justify-content:space-between; min-width:0; }
.ladder-title-group { flex:1 1 0; min-width:0; }
.challenge-date { color:var(--mint); font:600 11px 'Barlow Condensed',sans-serif; margin:0 0 4px; }
h1,h2,p { margin-top:0; }
h1 { color:#fff; font:700 27px/1 'Barlow Condensed',sans-serif; letter-spacing:-.3px; margin-bottom:5px; }
.challenge-subtitle { color:var(--soft); font-size:9px; margin:0; }
.bank-card { background:linear-gradient(90deg,rgba(33,241,168,.055),transparent); border:0; border-left:1px solid rgba(33,241,168,.3); border-radius:0; flex:0 0 168px; margin-top:0; padding:4px 0 4px 11px; }
.bank-summary { align-items:flex-start; display:flex; gap:6px; justify-content:space-between; }
.bank-value { display:flex; flex:1 1 0; flex-direction:column; gap:4px; min-width:0; }
.bank-current { align-items:flex-end; text-align:right; }
.bank-card .bank-value>span { color:var(--muted); font-size:7px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.bank-card strong { color:#fff; font:700 24px/1 'Barlow Condensed',sans-serif; white-space:nowrap; }
.bank-amount-line { align-items:center; display:flex; gap:2px; min-width:0; }
.bank-arrow { align-self:flex-start; color:var(--mint); flex:none; font:800 16px/1 Inter,sans-serif; margin-top:-1px; }
.bank-settings-button { align-items:center; background:transparent; border:0; border-radius:50%; color:var(--mint); cursor:pointer; display:inline-flex; flex:none; font-size:14px; height:20px; justify-content:center; line-height:1; padding:0; width:20px; }
.bank-settings-button:hover { background:rgba(33,241,168,.12); }
.bank-settings-button:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.date-calendar { margin:-10px -16px -13px; overflow:hidden; position:relative; }
.date-calendar::before,.date-calendar::after { content:''; inset-block:0; pointer-events:none; position:absolute; width:28px; z-index:2; }
.date-calendar::before { background:linear-gradient(90deg,var(--panel),rgba(26,26,26,0)); left:0; }
.date-calendar::after { background:linear-gradient(270deg,var(--panel),rgba(26,26,26,0)); right:0; }
.date-calendar-scroll { display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; padding:8px 26px 10px; scrollbar-width:none; scroll-snap-type:x proximity; }
.date-calendar-scroll::-webkit-scrollbar { display:none; }
.calendar-date { background:#202020; border:1px solid #303030; border-radius:9px; color:var(--muted); cursor:pointer; display:flex; flex:0 0 43px; flex-direction:column; gap:1px; min-height:48px; padding:6px 3px; scroll-snap-align:center; text-align:center; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
.calendar-date:hover { background:#292929; color:#fff; transform:translateY(-1px); }
.calendar-date:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.calendar-date .calendar-weekday,.calendar-date .calendar-caption { font-size:7px; font-weight:400; line-height:1; text-transform:uppercase; }
.calendar-date .calendar-number { color:#e8edf4; font:400 20px/18px 'Barlow Condensed',sans-serif; }
.calendar-date.is-today:not(.is-selected) .calendar-weekday { color:var(--mint); }
.calendar-date.is-tomorrow { border-color:rgba(33,241,168,.25); }
.calendar-date.is-selected { background:rgba(33,241,168,.13); border-color:var(--mint); box-shadow:0 0 14px rgba(33,241,168,.16); color:var(--mint); }
.calendar-date.is-selected .calendar-number,.calendar-date.is-selected .calendar-caption { color:var(--mint); }
.empty-date-message { color:var(--muted); font-size:14px; font-weight:400; line-height:1.45; margin:0; padding:6px 0 2px; }
.phone.is-empty .progress-hero { min-height:100dvh; }
.phone.is-empty .empty-date-message { align-items:center; display:flex; flex:1; justify-content:center; padding:32px 24px 96px; text-align:center; }
.steps-row[hidden],.next-target-banner[hidden],.challenge-experience[hidden],.bank-card[hidden] { display:none!important; }

.steps-row { display:grid; grid-template-columns:repeat(var(--step-count,5),minmax(0,1fr)); min-height:84px; position:relative; }
.step { align-items:center; display:flex; flex-direction:column; min-width:0; position:relative; z-index:1; }
button.step { background:none; border:0; color:inherit; cursor:pointer; font:inherit; padding:0; }
button.step:hover .step-icon { filter:brightness(1.12); transform:translateY(-1px); }
button.step:focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
.step.focus { z-index:4; }
.step:not(:last-child)::after { background:var(--line); content:''; height:2px; left:calc(50% + 22px); position:absolute; top:31px; width:calc(100% - 44px); z-index:0; }
.step.done:has(+ .step.done)::after { background:var(--mint); }
.step.done:has(+ .step.active)::after { background:linear-gradient(90deg, var(--mint), rgba(33,241,168,.25)); }
.step.done.focus:not(:last-child)::after { left:calc(50% + 32px); width:calc(100% - 54px); }
.step.done:has(+ .step.active.focus)::after { width:calc(100% - 54px); }
.step.active.focus:not(:last-child)::after { left:calc(50% + 32px); width:calc(100% - 54px); }
.step-icon { align-items:center; background:var(--panel); display:flex; height:44px; justify-content:center; margin-top:10px; width:44px; }
.step-icon img { display:block; height:44px; width:44px; }
.step-icon,.step-value { position:relative; z-index:1; }
.step.done .step-icon { background:transparent; border:2px solid var(--mint); border-radius:50%; color:var(--mint); font:700 29px/1 Inter,sans-serif; }
.step.done .step-icon img { display:none; }
.step.done .step-icon::after { content:'✓'; transform:translateY(-1px); }
.step.focus .step-icon { background:var(--panel); border:3px solid var(--mint); border-radius:50%; box-shadow:0 0 18px rgba(33,241,168,.38),0 0 34px rgba(33,241,168,.18); color:var(--mint); font:700 28px/1 'Barlow Condensed',sans-serif; height:64px; isolation:isolate; margin-top:0; overflow:visible; width:64px; }
.step.focus .step-icon img { height:64px; width:64px; }
.step.done.focus .step-icon::after { font:700 40px/1 Inter,sans-serif; }
.step.focus .step-icon::before { animation:active-nebula 10s linear infinite; background:conic-gradient(from 0deg, transparent 0deg 24deg, rgba(91,194,255,.26) 46deg, rgba(33,241,168,.92) 82deg, rgba(155,112,255,.36) 118deg, transparent 148deg 198deg, rgba(124,103,255,.62) 232deg, rgba(33,241,168,.14) 274deg, transparent 308deg 360deg); border-radius:50%; content:''; filter:blur(8px); inset:-20px; -webkit-mask:radial-gradient(circle, transparent 0 32px, #000 40px); mask:radial-gradient(circle, transparent 0 32px, #000 40px); pointer-events:none; position:absolute; z-index:-1; }
.step.active:not(.focus) .step-icon { border:2px solid rgba(33,241,168,.45); border-radius:50%; color:var(--mint); font:700 19px/1 'Barlow Condensed',sans-serif; }
@keyframes active-nebula { to { transform:rotate(1turn); } }
.step-value { color:#555; font:600 13px/1 'Barlow Condensed',sans-serif; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step.done .step-value,.step.active .step-value { color:var(--mint); font-weight:700; }
.step.failed .step-icon { border:2px solid var(--danger); border-radius:50%; color:var(--danger); font:700 26px/1 Inter,sans-serif; }
.step.failed .step-value { color:var(--danger); }

.next-target-banner { align-items:center; background:var(--panel-light); border:1px solid rgba(33,241,168,.19); border-radius:14px; display:flex; justify-content:space-between; min-height:50px; padding:10px 20px; }
.next-target-banner span { color:var(--muted); font:600 13px/1 'Barlow Condensed',sans-serif; }
.next-target-banner strong { color:var(--mint); font:700 22px/1 'Barlow Condensed',sans-serif; }

.challenge-experience { padding:12px 16px 0; }
.ladder-header-strip { background:var(--line); border-radius:999px; height:4px; overflow:hidden; }
.ladder-header-strip i { background:var(--mint); display:block; height:100%; opacity:.4; transition:width .25s ease; width:60%; }
.pick-card { background:var(--panel); border:1px solid rgba(33,241,168,.13); border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,.25); margin-top:10px; padding:16px; }
.pick-card.is-won { background:linear-gradient(145deg, rgba(33,241,168,.07), var(--panel) 34%); border-color:rgba(33,241,168,.42); }
.pick-heading { align-items:center; display:flex; gap:10px; justify-content:space-between; }
.pick-meta { align-items:center; display:flex; flex:none; gap:6px; }
h2 { color:#fff; font-size:10px; font-weight:700; margin-bottom:0; }
.pick-result-label { background:rgba(33,241,168,.14); border:1px solid rgba(33,241,168,.38); border-radius:20px; color:var(--mint); font-size:8px; font-weight:800; padding:4px 8px; }
.countdown { background:rgba(33,241,168,.07); border:1px solid rgba(33,241,168,.19); border-radius:20px; color:var(--mint); font-size:8px; font-weight:600; padding:4px 9px; text-decoration:none; white-space:nowrap; }
.countdown.is-finished { border-color:rgba(155,168,186,.16); color:var(--muted); }
.fixture-label { color:var(--soft); font-size:9px; margin:14px 0 6px; text-transform:uppercase; }
.fixture { align-items:center; display:grid; gap:8px; grid-template-columns:28px minmax(0,1fr) 20px minmax(0,1fr) 28px; }
.team-logo,.team-fallback { align-items:center; display:flex; height:28px; justify-content:center; object-fit:contain; width:28px; }
.team-fallback { background:#2a2a2a; border:1px solid #3a3a3a; border-radius:50%; color:var(--muted); font-size:9px; font-weight:800; }
.team-name { color:#fff; font-size:14px; font-weight:700; line-height:1.08; min-width:0; overflow-wrap:break-word; white-space:normal; }
.team-name.away { text-align:right; }
.versus { color:#444; font-size:10px; text-align:center; }
.prediction-details { align-items:center; background:var(--panel-light); border:1px solid #2f2f2f; border-radius:12px; display:flex; justify-content:space-between; margin-top:14px; min-height:64px; overflow:hidden; padding:10px 14px; position:relative; }
.pick-card.is-won .prediction-details { background:rgba(33,241,168,.06); border-color:rgba(33,241,168,.25); }
.prediction-details>div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.prediction-details .selection-detail { align-self:stretch; flex:1 1 0; min-width:0; position:relative; }
.selection-copy { display:flex; flex-direction:column; gap:3px; min-height:42px; justify-content:center; }
.prediction-details .odds-detail,.prediction-details .stake { align-items:flex-end; flex:none; margin-left:10px; }
.prediction-details span { color:var(--soft); font-size:9px; text-transform:uppercase; }
.prediction-details strong { color:#fff; font:700 18px/1 'Barlow Condensed',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prediction-details #selection-name { overflow:visible; text-overflow:clip; overflow-wrap:anywhere; white-space:normal; }
.prediction-details .odds-detail strong { color:var(--mint); }
.prediction-details.is-locked .selection-copy { filter:blur(7px); opacity:.28; pointer-events:none; user-select:none; }
.prediction-lock { align-items:center; background:linear-gradient(90deg,rgba(36,36,36,.84),rgba(36,36,36,.72)); display:flex; gap:8px; inset:0; padding-right:5px; position:absolute; text-align:left; }
.prediction-lock[hidden] { display:none; }
.prediction-lock-icon { align-items:center; background:rgba(33,241,168,.07); border:1px solid rgba(33,241,168,.28); border-radius:50%; display:flex; flex:none; height:32px; justify-content:center; width:32px; }
.lock-icon { color:#9aaba4; display:block; height:20px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:20px; }
.lock-icon-large { color:var(--mint); filter:drop-shadow(0 0 8px rgba(33,241,168,.28)); height:32px; stroke-width:1.6; width:32px; }
.prediction-lock strong { color:#dce5e1; font:700 12px/1 'Barlow Condensed',sans-serif; letter-spacing:.04em; white-space:nowrap; }
.pick-action { align-items:center; background:var(--mint); border:0; border-radius:14px; color:#0d1a15; cursor:pointer; display:flex; font-size:15px; font-weight:800; height:50px; justify-content:space-between; margin-top:12px; overflow:hidden; padding:0 20px; position:relative; transition:filter .16s ease,transform .16s ease; width:100%; }
.pick-action:not(:disabled)::before { animation:unlock-shimmer 2.8s ease-in-out infinite; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.58) 49%,transparent 78%); content:''; inset:-20% auto -20% -55%; position:absolute; transform:skewX(-18deg); width:42%; }
.pick-action>* { position:relative; z-index:1; }
@keyframes unlock-shimmer { 0%,48% { left:-55%; } 78%,100% { left:125%; } }
.pick-action:hover { filter:brightness(1.05); }
.pick-action:active { transform:scale(.985); }
.pick-action:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.pick-action:disabled { background:#333; color:#777; cursor:not-allowed; }
.pick-action:disabled img { opacity:.35; }
.pick-action.is-won:disabled { background:rgba(33,241,168,.11); border:1px solid rgba(33,241,168,.32); color:var(--mint); }
.pick-action.is-won:disabled img { display:none; }
.pick-action img { display:block; }
.api-message { color:var(--muted); font-size:9px; line-height:1.4; margin:10px 0 0; min-height:0; }
.api-message:empty { display:none; }
.tab-panel[hidden] { display:none!important; }
.app-tabs { -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); background:rgba(20,20,20,.93); border-top:1px solid rgba(255,255,255,.07); bottom:0; box-shadow:0 -10px 30px rgba(0,0,0,.28); display:flex; left:50%; max-width:390px; padding:7px 12px calc(8px + env(safe-area-inset-bottom)); position:fixed; transform:translateX(-50%); width:100%; z-index:15; }
.app-tab { align-items:center; background:transparent; border:0; border-radius:12px; color:#68736e; cursor:pointer; display:flex; flex:1; flex-direction:column; gap:3px; justify-content:center; min-height:52px; padding:5px 4px; position:relative; transition:background .18s ease,color .18s ease,transform .18s ease; }
.app-tab::before { background:var(--mint); border-radius:999px; content:''; height:2px; left:50%; opacity:0; position:absolute; top:-7px; transform:translateX(-50%) scaleX(.35); transition:opacity .18s ease,transform .18s ease; width:30px; }
.app-tab svg { height:21px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:21px; }
.app-tab span { font-size:9px; font-weight:700; letter-spacing:.01em; }
.app-tab-icon-wrap { display:flex; position:relative; }
.app-tab-icon-wrap b { align-items:center; background:var(--danger); border:2px solid #171717; border-radius:999px; color:#fff; display:flex; font-size:6px; height:15px; justify-content:center; min-width:15px; padding:0 3px; position:absolute; right:-9px; top:-6px; }
.app-tab-icon-wrap b[hidden] { display:none; }
.app-tab:hover { background:rgba(255,255,255,.035); color:#b7c0bc; }
.app-tab:active { transform:scale(.96); }
.app-tab.is-active { color:var(--mint); }
.app-tab.is-active::before { opacity:1; transform:translateX(-50%) scaleX(1); }
.app-tab:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
.secondary-tab-view { align-items:center; display:flex; justify-content:center; min-height:calc(100dvh - 82px); padding:28px 22px 64px; }
.secondary-tab-view:focus { outline:none; }
.secondary-tab-view:focus-visible .secondary-tab-card { box-shadow:0 0 0 2px #fff,0 18px 45px rgba(0,0,0,.25); }
.secondary-tab-card { align-items:center; background:linear-gradient(155deg,rgba(33,241,168,.07),rgba(255,255,255,.025)); border:1px solid rgba(33,241,168,.16); border-radius:22px; display:flex; flex-direction:column; padding:34px 24px; text-align:center; width:100%; }
.secondary-tab-icon { align-items:center; background:rgba(33,241,168,.08); border:1px solid rgba(33,241,168,.28); border-radius:50%; color:var(--mint); display:flex; font:700 26px/1 'Barlow Condensed',sans-serif; height:62px; justify-content:center; margin-bottom:18px; width:62px; }
.secondary-tab-kicker { color:var(--mint); font-size:8px; font-weight:800; letter-spacing:.16em; margin:0 0 7px; }
.secondary-tab-card h2 { font:700 30px/1 'Barlow Condensed',sans-serif; margin:0; }
.secondary-tab-card>p:last-child { color:var(--muted); font-size:12px; line-height:1.55; margin:12px 0 0; max-width:260px; }
.sr-only { height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; clip:rect(0,0,0,0); white-space:nowrap; }

.community-view { background:#111513; bottom:69px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; left:50%; max-width:390px; overflow:hidden; position:fixed; top:0; transform:translateX(-50%); width:100%; z-index:10; }
.community-view:focus { outline:none; }
.community-header { align-items:center; background:rgba(24,29,27,.97); border-bottom:1px solid rgba(255,255,255,.06); display:grid; gap:10px; grid-template-columns:auto minmax(0,1fr) auto; min-height:72px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; }
.community-header h2 { font-size:14px; margin:0 0 4px; }
.community-header p { color:#82908a; font-size:7px; line-height:1.35; margin:0; }
.community-mark { height:40px; position:relative; width:46px; }
.community-mark span { align-items:center; background:linear-gradient(145deg,hsl(var(--avatar-hue,154) 45% 28%),hsl(var(--avatar-hue,154) 45% 17%)); border:1px solid rgba(33,241,168,.28); border-radius:50%; display:flex; height:30px; position:absolute; top:5px; width:30px; }
.community-mark span:nth-child(1) { left:0; --avatar-hue:191; }
.community-mark span:nth-child(2) { left:9px; --avatar-hue:264; z-index:2; }
.community-mark span:nth-child(3) { left:18px; --avatar-hue:28; z-index:3; }
.community-members { background:rgba(33,241,168,.075); border:1px solid rgba(33,241,168,.16); border-radius:999px; color:#9fb0a8; font-size:7px; font-weight:700; padding:5px 7px; white-space:nowrap; }
.community-messages { display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 14px 24px; scrollbar-width:none; }
.community-messages::-webkit-scrollbar { display:none; }
.community-empty { align-items:center; align-self:center; color:#69756f; display:flex; flex:1; flex-direction:column; font-size:10px; gap:6px; justify-content:center; min-height:180px; text-align:center; }
.community-empty strong { color:#aeb9b4; font-size:12px; }
.community-message { align-items:flex-end; animation:chat-message-in .22s ease-out both; display:flex; gap:7px; max-width:90%; }
.community-message.member { align-self:flex-start; }
.community-message.own { align-self:flex-end; }
.community-message.admin { align-self:flex-start; }
.community-avatar { align-items:center; background:hsl(var(--avatar-hue) 42% 22%); border:1px solid hsl(var(--avatar-hue) 62% 44% / .55); border-radius:50%; color:hsl(var(--avatar-hue) 85% 76%); display:flex; flex:0 0 27px; font-size:8px; font-weight:800; height:27px; justify-content:center; width:27px; }
.community-message-content { min-width:0; }
.community-bubble { background:hsl(var(--avatar-hue) 28% 20%); border:1px solid hsl(var(--avatar-hue) 42% 38% / .25); border-radius:15px 15px 15px 4px; color:#eef3f0; overflow:hidden; padding:8px 12px 10px; }
.community-author { color:hsl(var(--avatar-hue) 72% 72%); display:block; font-size:7px; font-weight:750; line-height:1.2; margin:0 0 4px; }
.community-message.own .community-author,.community-message.own time { text-align:right; }
.community-message-content p { font-size:12px; line-height:1.42; margin:0; overflow-wrap:anywhere; }
.community-message.own .community-bubble { background:var(--mint); border:0; border-radius:15px 15px 4px 15px; color:#0c1c15; }
.community-message.own .community-author { color:#126d50; }
.community-message.admin .community-bubble { background:linear-gradient(135deg,rgba(33,241,168,.2),#21302a); border-color:rgba(33,241,168,.35); }
.community-message-content p a { color:inherit; font-weight:750; text-decoration:underline; text-underline-offset:2px; }
.community-message-content .community-photo { background:#1c2421; border:1px solid hsl(var(--avatar-hue) 42% 38% / .3); border-radius:9px; display:block; max-height:240px; max-width:250px; object-fit:cover; overflow:hidden; width:100%; }
.community-message.own .community-message-content .community-photo { border-color:rgba(12,28,21,.2); }
.community-message-content p+.community-photo { margin-top:7px; }
.community-message-content time { color:#68736e; display:block; font-size:7px; margin-top:3px; padding:0 4px; }
.community-gate,.community-closed { background:#161b19; border-top:1px solid rgba(255,255,255,.06); display:grid; gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
.community-gate div,.community-closed { text-align:center; }
.community-gate strong,.community-closed strong { color:#eef3f0; display:block; font-size:11px; }
.community-gate span,.community-closed span { color:#7f8c86; display:block; font-size:8px; line-height:1.4; margin-top:3px; }
.community-gate button { background:var(--mint); border:0; border-radius:13px; color:#092016; cursor:pointer; font-size:13px; font-weight:800; min-height:46px; }
.community-gate button:focus-visible,.community-composer button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.community-compose-shell { background:#111513; border-top:1px solid rgba(255,255,255,.06); }
.community-compose-shell[hidden] { display:none; }
.community-photo-preview { align-items:center; background:#1a211e; border-bottom:1px solid rgba(255,255,255,.05); display:flex; gap:9px; padding:7px 12px; }
.community-photo-preview[hidden] { display:none; }
.community-photo-preview img { border-radius:7px; height:38px; object-fit:cover; width:38px; }
.community-photo-preview span { color:#b5c0bb; flex:1; font-size:9px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.community-photo-preview button { align-items:center; background:#2c3330; border:0; border-radius:50%; color:#aeb9b4; cursor:pointer; display:flex; font-size:17px; height:28px; justify-content:center; padding:0 0 2px; width:28px; }
.community-composer { align-items:flex-end; background:#111513; display:flex; gap:7px; min-height:60px; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); }
.community-composer textarea { background:#252b28; border:1px solid #343d39; border-radius:19px; color:#f3f5f9; font:16px/1.35 Inter,sans-serif; max-height:130px; min-height:44px; outline:none; overflow-y:hidden; padding:11px 14px; resize:none; width:100%; }
.community-composer textarea:focus { border-color:rgba(33,241,168,.55); box-shadow:0 0 0 3px rgba(33,241,168,.07); }
.community-composer textarea::placeholder { color:#6d7772; }
.community-composer button { align-items:center; background:var(--mint); border:0; border-radius:50%; color:#0b1c14; cursor:pointer; display:flex; flex:0 0 42px; height:42px; justify-content:center; padding:0; }
.community-composer .community-attach { background:#252b28; border:1px solid #343d39; color:#93a19a; flex-basis:38px; height:38px; margin-bottom:2px; }
.community-composer .community-attach:hover { border-color:rgba(33,241,168,.4); color:var(--mint); }
.community-composer button:disabled { cursor:wait; opacity:.45; }
.community-composer button svg { height:20px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:20px; }
.community-error { align-self:center; color:var(--danger); font-size:9px; line-height:1.4; margin:8px 20px; text-align:center; }

.notifications-view { background:#111513; bottom:69px; display:flex; flex-direction:column; left:50%; max-width:390px; overflow:hidden; position:fixed; top:0; transform:translateX(-50%); width:100%; z-index:10; }
.notifications-view:focus { outline:none; }
.notifications-header { align-items:center; background:#181d1b; border-bottom:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; min-height:78px; padding:calc(13px + env(safe-area-inset-top)) 16px 12px; }
.notifications-header p { color:var(--mint); font-size:7px; font-weight:800; letter-spacing:.15em; margin:0 0 4px; }
.notifications-header h2 { font-size:17px; margin:0; }
.notifications-header button { background:#222925; border:1px solid #313a36; border-radius:50%; color:#9aa7a1; cursor:pointer; font-size:18px; height:36px; width:36px; }
.notifications-list { display:flex; flex:1; flex-direction:column; gap:8px; overflow-y:auto; padding:14px; scrollbar-width:none; }
.notifications-list::-webkit-scrollbar { display:none; }
.notification-row { align-items:center; background:#1b211f; border:1px solid rgba(255,255,255,.055); border-radius:15px; color:inherit; cursor:pointer; display:grid; gap:10px; grid-template-columns:42px minmax(0,1fr) auto; min-height:76px; padding:11px; text-align:left; width:100%; }
.notification-row.unread { background:linear-gradient(135deg,rgba(33,241,168,.085),#1b211f 58%); border-color:rgba(33,241,168,.2); }
.notification-icon { align-items:center; background:#26312d; border:1px solid rgba(33,241,168,.19); border-radius:13px; color:var(--mint); display:flex; font-size:18px; font-weight:800; height:42px; justify-content:center; width:42px; }
.notification-copy { min-width:0; }
.notification-copy strong { color:#edf3f0; display:block; font-size:11px; margin-bottom:4px; }
.notification-copy span { -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#89968f; display:-webkit-box; font-size:8px; line-height:1.4; overflow:hidden; }
.notification-meta { align-items:flex-end; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
.notification-meta time { color:#66716c; font-size:6px; white-space:nowrap; }
.notification-meta b { align-items:center; background:var(--mint); border-radius:999px; color:#0b1b14; display:flex; font-size:7px; height:17px; justify-content:center; min-width:17px; padding:0 4px; }
.notifications-empty { align-items:center; color:#6f7b75; display:flex; flex:1; flex-direction:column; font-size:9px; gap:6px; justify-content:center; text-align:center; }
.notifications-empty strong { color:#aeb9b4; font-size:12px; }
.notifications-error { color:var(--danger); font-size:9px; margin:auto; }

.nickname-overlay { align-items:flex-end; display:flex; inset:0; justify-content:center; position:fixed; z-index:48; }
.nickname-overlay[hidden] { display:none; }
.nickname-scrim { animation:unlock-scrim-in .2s ease-out both; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); background:rgba(5,8,7,.76); border:0; inset:0; position:absolute; width:100%; }
.nickname-dialog { animation:nickname-dialog-in .26s cubic-bezier(.2,.8,.25,1) both; background:#1c2320; border:1px solid rgba(33,241,168,.27); border-radius:22px 22px 0 0; box-shadow:0 -20px 50px rgba(0,0,0,.5); max-width:390px; padding:22px 18px calc(18px + env(safe-area-inset-bottom)); position:relative; width:100%; }
@keyframes nickname-dialog-in { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
.nickname-symbol { align-items:center; background:rgba(33,241,168,.1); border:1px solid rgba(33,241,168,.32); border-radius:50%; color:var(--mint); display:flex; font-size:20px; font-weight:800; height:42px; justify-content:center; margin-bottom:13px; width:42px; }
.nickname-dialog>p:first-of-type { color:var(--mint); font-size:7px; font-weight:800; letter-spacing:.16em; margin:0 0 5px; }
.nickname-dialog h2 { font-size:19px; margin:0 0 7px; }
.nickname-dialog>span:not(.nickname-symbol) { color:#95a29c; display:block; font-size:10px; line-height:1.45; }
.nickname-dialog label { color:#aeb9b4; display:block; font-size:8px; font-weight:700; margin:18px 0 6px; }
.nickname-dialog input { background:#111513; border:1px solid #39433f; border-radius:12px; color:#fff; font-size:13px; height:46px; outline:none; padding:0 13px; width:100%; }
.nickname-dialog input:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(33,241,168,.08); }
.nickname-dialog .nickname-error { color:var(--danger); font-size:9px; margin:7px 0 0; }
.nickname-dialog>div { display:grid; gap:8px; grid-template-columns:1fr 1.35fr; margin-top:16px; }
.nickname-dialog>div button { border-radius:12px; cursor:pointer; font-size:11px; font-weight:800; height:44px; }
#nickname-cancel { background:transparent; border:1px solid #414a46; color:#aab5b0; }
.nickname-dialog>div button[type=submit] { background:var(--mint); border:1px solid var(--mint); color:#0b1b14; }

.support-chat { background:#111513; bottom:0; display:grid; grid-template-areas:'header' 'banner' 'messages' 'composer'; grid-template-rows:auto auto minmax(0,1fr) auto; height:100dvh; left:50%; max-width:390px; overflow:hidden; position:fixed; top:0; transform:translateX(-50%); width:100%; z-index:35; }
.support-chat[hidden] { display:none!important; }
.chat-header { align-items:center; background:rgba(24,29,27,.96); border-bottom:1px solid rgba(255,255,255,.06); display:flex; gap:11px; grid-area:header; min-height:68px; padding:calc(9px + env(safe-area-inset-top)) 14px 9px; }
.chat-back { align-items:center; background:transparent; border:0; border-radius:50%; color:#dce5e1; cursor:pointer; display:flex; flex:none; height:44px; justify-content:center; padding:0; width:38px; }
.chat-back svg { height:25px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:25px; }
.chat-back:hover { background:rgba(255,255,255,.05); }
.chat-back:focus-visible,.chat-composer button:focus-visible,.chat-access-banner button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.support-avatar { align-items:center; background:linear-gradient(145deg,#2c5243,#183127); border:1px solid rgba(33,241,168,.32); border-radius:50%; color:var(--mint); display:flex; flex:none; font:700 18px/1 'Barlow Condensed',sans-serif; height:42px; justify-content:center; position:relative; width:42px; }
.support-avatar span { background:var(--mint); border:2px solid #181d1b; border-radius:50%; bottom:0; height:11px; position:absolute; right:0; width:11px; }
.chat-identity { min-width:0; }
.chat-identity h2 { font-size:14px; margin:0 0 4px; }
.chat-identity p { align-items:center; color:#92a09a; display:flex; font-size:9px; gap:5px; margin:0; }
.chat-identity p i { background:var(--mint); border-radius:50%; box-shadow:0 0 7px rgba(33,241,168,.5); height:6px; width:6px; }
.chat-access-banner { align-items:center; background:rgba(33,241,168,.09); border-bottom:1px solid rgba(33,241,168,.19); display:flex; grid-area:banner; justify-content:space-between; padding:10px 14px; }
.chat-access-banner[hidden] { display:none; }
.chat-access-banner div { display:flex; flex-direction:column; gap:2px; }
.chat-access-banner strong { color:var(--mint); font-size:11px; }
.chat-access-banner span { color:#aeb9b4; font-size:9px; }
.chat-access-banner button { background:var(--mint); border:0; border-radius:9px; color:#0d1a15; cursor:pointer; font-size:10px; font-weight:800; min-height:34px; padding:0 12px; }
.chat-messages { background:#111513; display:flex; flex-direction:column; gap:8px; grid-area:messages; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 14px 24px; scroll-padding-bottom:24px; scrollbar-width:none; }
.chat-messages::-webkit-scrollbar { display:none; }
.chat-day-label { align-self:center; background:#222825; border-radius:999px; color:#75817c; font-size:7px; font-weight:800; letter-spacing:.08em; margin:0 0 8px; padding:5px 9px; }
.chat-message { align-items:flex-end; animation:chat-message-in .25s cubic-bezier(.2,.78,.26,1) both; display:flex; gap:7px; max-width:87%; }
.chat-message.user { align-self:flex-end; justify-content:flex-end; }
.chat-message.support { align-self:flex-start; }
.message-avatar { align-items:center; background:#25332e; border:1px solid rgba(33,241,168,.2); border-radius:50%; color:var(--mint); display:flex; flex:none; font-size:9px; font-weight:800; height:25px; justify-content:center; width:25px; }
.message-content { min-width:0; }
.message-content p { font-size:12px; line-height:1.42; margin:0; overflow-wrap:anywhere; padding:10px 12px; }
.message-content p a { color:inherit; font-weight:750; text-decoration:underline; text-underline-offset:2px; }
.chat-message.user .message-content p { background:var(--mint); border-radius:15px 15px 4px 15px; color:#0c1c15; }
.chat-message.support .message-content p { background:#252b28; border:1px solid rgba(255,255,255,.055); border-radius:15px 15px 15px 4px; color:#eef3f0; }
.message-content time { color:#68736e; display:block; font-size:7px; margin-top:3px; padding:0 3px; }
.chat-message.user .message-content time { text-align:right; }
.chat-message.user .message-content time span { color:var(--mint); }
@keyframes chat-message-in { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.typing-row { align-items:flex-end; align-self:flex-start; animation:chat-message-in .2s ease-out both; display:flex; flex:none; gap:7px; }
.typing-bubble { align-items:center; background:#252b28; border:1px solid rgba(255,255,255,.055); border-radius:13px 13px 13px 4px; display:flex; gap:3px; height:32px; padding:0 11px; }
.typing-bubble i { animation:typing-dot 1s ease-in-out infinite; background:#8b9791; border-radius:50%; height:4px; width:4px; }
.typing-bubble i:nth-child(2) { animation-delay:.15s; }
.typing-bubble i:nth-child(3) { animation-delay:.3s; }
@keyframes typing-dot { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
.chat-error { align-self:center; color:var(--danger); font-size:9px; line-height:1.4; margin:4px 20px; text-align:center; }
.chat-composer { align-items:flex-end; background:#111513; border-top:1px solid rgba(255,255,255,.06); display:flex; gap:9px; grid-area:composer; min-height:60px; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); }
.chat-composer textarea { background:#252b28; border:1px solid #343d39; border-radius:19px; color:#f3f5f9; font:16px/1.35 Inter,sans-serif; max-height:130px; min-height:44px; outline:none; overflow-y:hidden; padding:11px 14px; resize:none; width:100%; }
.chat-composer textarea:focus { border-color:rgba(33,241,168,.55); box-shadow:0 0 0 3px rgba(33,241,168,.07); }
.chat-composer textarea::placeholder { color:#6d7772; }
.chat-composer button { align-items:center; background:var(--mint); border:0; border-radius:50%; color:#0b1c14; cursor:pointer; display:flex; flex:0 0 42px; height:42px; justify-content:center; padding:0; }
.chat-composer button:disabled { cursor:wait; opacity:.45; }
.chat-composer button svg { height:20px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:20px; }

/* Keep chat composers inside the iOS visual viewport when the software keyboard opens. */
body.composer-keyboard-open .support-chat { bottom:auto; height:var(--app-viewport-height); top:var(--app-viewport-top); }
body.composer-keyboard-open .community-view { bottom:auto; height:var(--app-viewport-height); top:var(--app-viewport-top); }
body.composer-keyboard-open .app-tabs { display:none; }

.unlock-overlay { inset:0; overflow:auto; position:absolute; z-index:40; }
.unlock-overlay[hidden] { display:none; }
.unlock-scrim { animation:unlock-scrim-in .22s ease-out both; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); background:rgba(4,7,8,.74); border:0; inset:0; padding:0; position:fixed; width:100%; }
.unlock-shell { align-items:center; display:flex; min-height:100%; padding:24px 18px calc(24px + env(safe-area-inset-bottom)); pointer-events:none; position:relative; }
.unlock-dialog { animation:unlock-dialog-in .28s cubic-bezier(.2,.82,.25,1) both; background:linear-gradient(160deg,#232b29 0%,#191d1c 44%,#121514 100%); border:1px solid rgba(33,241,168,.3); border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 32px rgba(33,241,168,.08); margin:auto; max-width:354px; outline:none; padding:26px 20px 20px; pointer-events:auto; position:relative; text-align:center; transform-origin:50% 58%; width:100%; }
@keyframes unlock-scrim-in { from { -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); opacity:0; } to { -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); opacity:1; } }
@keyframes unlock-dialog-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.unlock-dialog:focus-visible { box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 2px #fff; }
.unlock-close { align-items:center; background:#2b302e; border:1px solid #3c4441; border-radius:50%; color:#dce5e1; cursor:pointer; display:flex; font-size:22px; height:32px; justify-content:center; line-height:1; padding:0 0 2px; position:absolute; right:14px; top:14px; width:32px; }
.unlock-emblem { align-items:center; background:radial-gradient(circle,rgba(33,241,168,.22),rgba(33,241,168,.03) 60%,transparent 72%); display:flex; height:94px; justify-content:center; margin:-6px auto 2px; width:94px; }
.unlock-emblem span { align-items:center; background:#202d28; border:1px solid rgba(33,241,168,.42); border-radius:50%; box-shadow:0 0 28px rgba(33,241,168,.15); display:flex; height:66px; justify-content:center; width:66px; }
.unlock-kicker { color:var(--mint); font-size:8px; font-weight:800; letter-spacing:.16em; margin:0 0 7px; }
.unlock-dialog h2 { color:#fff; font:700 29px/31px 'Barlow Condensed',sans-serif; margin:0 auto; max-width:275px; }
.unlock-dialog>p#unlock-copy { color:#aeb9b4; font-size:12px; line-height:1.5; margin:12px auto 0; max-width:295px; }
.unlock-benefits { display:grid; gap:8px; list-style:none; margin:18px 0; padding:0; text-align:left; }
.unlock-benefits li { align-items:center; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.05); border-radius:10px; color:#dde5e1; display:flex; font-size:11px; min-height:36px; padding:7px 10px; }
.unlock-benefits li::before { color:var(--mint); content:'✓'; font-weight:800; margin-right:9px; }
.unlock-request { align-items:center; background:var(--mint); border:0; border-radius:14px; color:#092016; cursor:pointer; display:flex; font-size:14px; font-weight:800; height:52px; justify-content:space-between; padding:0 18px; width:100%; }
.unlock-request:hover { filter:brightness(1.05); }
.unlock-request:disabled { cursor:default; opacity:.66; }
.unlock-close:focus-visible,.unlock-request:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.unlock-feedback { color:var(--mint); font-size:10px; line-height:1.4; margin:10px 2px 0; min-height:0; }
.unlock-feedback:empty { display:none; }

.bank-settings-overlay { bottom:0; inset:0; position:absolute; top:0; z-index:30; }
.bank-settings-overlay[hidden] { display:none; }
.bank-settings-scrim { background:rgba(5,7,9,.72); border:0; inset:0; padding:0; position:absolute; width:100%; }
.bank-settings-dialog { background:#202020; border:1px solid rgba(33,241,168,.3); border-radius:20px 20px 0 0; bottom:0; box-shadow:0 -16px 42px rgba(0,0,0,.42); color:#f3f5f9; left:0; margin:0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); position:absolute; width:100%; }
.bank-settings-heading { align-items:flex-start; display:flex; gap:16px; justify-content:space-between; }
.bank-settings-heading h2 { color:#fff; font-size:16px; }
.bank-settings-heading p { color:var(--muted); font-size:11px; line-height:1.4; margin:5px 0 0; max-width:270px; }
.bank-settings-close { align-items:center; background:#2b2b2b; border:1px solid #3a3a3a; border-radius:50%; color:#fff; cursor:pointer; display:flex; flex:none; font-size:21px; height:30px; justify-content:center; line-height:1; padding:0 0 2px; width:30px; }
.bank-settings-field { display:flex; flex-direction:column; gap:7px; margin-top:20px; }
.bank-settings-field>span { color:var(--soft); font-size:9px; font-weight:700; }
.bank-settings-field input { background:#171717; border:1px solid #474747; border-radius:11px; color:#fff; font:700 28px/1 'Barlow Condensed',sans-serif; height:50px; outline:none; padding:0 13px; width:100%; }
.bank-settings-field input:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(33,241,168,.12); }
.bank-settings-error { color:var(--danger); font-size:11px; margin:8px 0 0; }
.bank-settings-actions { display:flex; gap:9px; margin-top:18px; }
.bank-settings-actions button { border-radius:11px; cursor:pointer; font-size:12px; font-weight:800; height:44px; padding:0 13px; }
.bank-settings-reset { background:transparent; border:1px solid #464646; color:#c4ccd8; flex:1; }
.bank-settings-save { background:var(--mint); border:1px solid var(--mint); color:#112118; flex:1; }
.bank-settings-close:focus-visible,.bank-settings-actions button:focus-visible { outline:2px solid #fff; outline-offset:3px; }

@media (min-width:431px) { body { padding:20px; } .phone { border-radius:28px; box-shadow:0 18px 60px #000; min-height:844px; } }
@media (max-width:350px) { h1 { font-size:24px; } .bank-card { flex-basis:148px; padding-left:8px; } .bank-card strong { font-size:21px; } .bank-summary { gap:4px; } .bank-card .bank-value>span { font-size:6px; } .bank-settings-button { height:18px; width:18px; } .step-value { font-size:11px; } .fixture { gap:5px; } .team-name { font-size:12px; } }
@media (max-height:660px) { .unlock-shell { align-items:flex-start; padding-top:14px; } .unlock-emblem { height:66px; } .unlock-emblem span { height:54px; width:54px; } .unlock-dialog h2 { font-size:25px; line-height:27px; } .unlock-benefits { margin:13px 0; } }
@media (prefers-reduced-motion:reduce) { .step.focus .step-icon::before,.pick-action::before,.unlock-scrim,.unlock-dialog,.chat-message,.community-message,.typing-bubble i { animation:none; } .app-tab { transition:none; } }

/* Figma: Live ladder · Step 2 victory / Streak overlay (17:337). */
.streak-overlay { bottom:0; display:block; inset:0; overflow:auto; position:absolute; top:0; z-index:20; }
.streak-overlay[hidden] { display:none; }
.streak-overlay-scrim { background:rgba(8,12,22,.79); inset:0; position:absolute; }
.streak-overlay-shell { min-height:100%; padding:clamp(28px,14.7dvh,124px) 20px 24px; position:relative; }
.streak-card { background:linear-gradient(180deg,rgba(38,40,59,.94) 0%,rgba(24,33,47,.97) 34%,#111925 100%); border:1px solid rgba(174,158,220,.44); border-radius:28px; box-shadow:0 20px 48px rgba(0,0,0,.5); color:#f3f5f9; margin:0 auto; max-width:350px; overflow:hidden; padding:24px; position:relative; width:100%; }
.streak-close { background:transparent; border:0; cursor:pointer; height:32px; padding:0; position:absolute; right:11px; top:11px; width:32px; z-index:2; }
.streak-close:focus-visible,.streak-continue:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.streak-close img { display:block; }
.success-emblem { height:110px; position:relative; width:302px; }
.success-emblem>img,.celebration-particle { position:absolute; }
.celebration-sparkle { left:217px; top:41px; }
.celebration-particle { border-radius:1px; display:block; opacity:0; }
.particle-one { background:#b5f36b; height:3px; left:209.38px; opacity:.8; top:98px; width:3px; }
.particle-two { background:#b5f36b; height:3px; left:99.73px; opacity:.8; top:-2px; width:3px; }
.particle-three { background:#b5f36b; height:9px; left:245px; opacity:.8; top:65.88px; width:4px; }
.particle-four { background:#ae9edc; height:3px; left:67.88px; opacity:.6; top:78px; width:3px; }
.particle-five { background:#ae9edc; height:9px; left:225.77px; opacity:.6; top:12px; width:4px; }
.particle-six { background:#b5f36b; height:9px; left:54px; opacity:.8; top:28.37px; width:4px; }
.emblem-rim { left:83px; top:-16px; }
.emblem-face { left:113px; top:14px; }
.completed-step-seal { align-items:center; background:#b5f36b; border:1px solid #d8fba8; border-radius:6px; color:#142018; display:flex; font:700 12px/1 'Barlow Condensed',sans-serif; height:20px; justify-content:center; left:127px; position:absolute; top:79px; width:48px; }
.success-check { left:134px; top:35px; }
.victory-laurels { left:89px; top:11px; }
.atmospheric-ring-inner { left:94px; top:-2px; }
.atmospheric-ring-outer { left:83px; top:-13px; }
.streak-title { color:#f3f5f9; font:700 32px/36px 'Barlow Condensed',sans-serif; margin:0; text-align:center; width:100%; }
.gain-celebration { align-items:center; display:flex; flex-direction:column; overflow:hidden; padding:8px 0 18px; text-align:center; width:100%; }
.gain-celebration strong { color:#b5f36b; font:700 64px/64px 'Barlow Condensed',sans-serif; }
.gain-celebration span { color:#9ba8ba; font-size:12px; line-height:18px; }
.bankroll-update { align-items:center; background:rgba(11,17,27,.5); border:1px solid rgba(255,255,255,.03); border-radius:14px; display:flex; height:52px; justify-content:space-between; overflow:hidden; padding:0 14px; }
.bankroll-update>span { color:#9ba8ba; font-size:10px; font-weight:500; }
.bankroll-update>div { align-items:center; display:flex; gap:9px; }
.bankroll-update>div>span { color:#9ba8ba; font-size:14px; font-weight:500; }
.bankroll-update>div>img { display:block; }
.bankroll-update strong { color:#f3f5f9; font:700 18px/1 Inter,sans-serif; }
.streak-celebration { padding:16px 0; }
.streak-badge { background:rgba(181,243,107,.03); border:1px solid rgba(181,243,107,.15); border-radius:14px; height:88px; overflow:hidden; padding:12px; }
.streak-heading { align-items:center; display:flex; justify-content:space-between; }
.streak-identity { align-items:center; display:flex; gap:8px; }
.streak-identity>div { display:flex; flex-direction:column; gap:2px; }
.streak-identity strong { color:#b5f36b; font-size:10px; }
.streak-identity span { color:#9ba8ba; font-size:10px; }
.streak-count-transition { align-items:center; display:flex; gap:10px; }
.streak-count-transition>span { color:#6d7b91; font:600 22px/1 'Barlow Condensed',sans-serif; }
.streak-count-transition>img { display:block; }
.streak-count-transition strong { color:#b5f36b; font:700 36px/36px 'Barlow Condensed',sans-serif; }
.streak-progress { display:flex; gap:5px; height:7px; margin-top:9px; }
.streak-segment { background:#293344; border-radius:100px; flex:1; min-width:0; }
.streak-segment.is-complete { background:rgba(181,243,107,.5); }
.streak-segment.is-new { background:#b5f36b; box-shadow:0 0 8px rgba(181,243,107,.14); transform-origin:left center; }
.unlocked-next-step { align-items:center; display:flex; gap:10px; height:52px; }
.unlocked-step-icon { align-items:center; background:#29263d; border:1px solid rgba(174,158,220,.19); border-radius:10px; display:flex; flex:none; height:38px; justify-content:center; width:38px; }
.unlocked-step-icon img { display:block; }
.unlocked-next-step>div { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.unlocked-next-step>div strong { color:#f3f5f9; font:600 20px/1 'Barlow Condensed',sans-serif; }
.unlocked-next-step>div span { color:#9ba8ba; font-size:11px; }
.unlocked-next-step>strong { color:#f3f5f9; font:600 28px/1 'Barlow Condensed',sans-serif; white-space:nowrap; }
.streak-continue-area { padding-top:18px; }
.streak-continue { align-items:center; background:#b5f36b; border:0; border-radius:12px; color:#142018; cursor:pointer; display:flex; font-size:14px; font-weight:700; height:52px; justify-content:space-between; overflow:hidden; padding:0 16px; width:100%; }
.streak-continue img { display:block; }

/* The Figma timeline is 2.8 s. In the product it plays once, then keeps the final state. */
.streak-overlay.is-visible :is(.streak-overlay-scrim,.streak-card,.success-emblem,.celebration-sparkle,.celebration-particle,.success-check,.atmospheric-ring-inner,.atmospheric-ring-outer,.streak-title,.gain-celebration,#streak-bankroll-after,.streak-badge,.streak-flame,#streak-after,.streak-segment.is-new,.unlocked-next-step,.streak-continue) { will-change:opacity,translate,scale,rotate; }
.streak-overlay.is-visible .streak-overlay-scrim { animation:figma-scrim-opacity 2.8s linear forwards; }
.streak-overlay.is-visible .streak-card { animation:figma-card-opacity 2.8s linear forwards,figma-card-translate 2.8s linear forwards,figma-card-scale 2.8s linear forwards; }
.streak-overlay.is-visible .success-emblem { animation:figma-emblem-opacity 2.8s linear forwards,figma-emblem-translate 2.8s linear forwards,figma-emblem-scale 2.8s linear forwards; }
.streak-overlay.is-visible .celebration-sparkle { animation:figma-sparkle 2.8s linear forwards; }
.streak-overlay.is-visible .particle-one { animation:figma-particle-one 2.8s linear forwards; }
.streak-overlay.is-visible .particle-two { animation:figma-particle-two 2.8s linear forwards; }
.streak-overlay.is-visible .particle-three { animation:figma-particle-three 2.8s linear forwards; }
.streak-overlay.is-visible .particle-four { animation:figma-particle-four 2.8s linear forwards; }
.streak-overlay.is-visible .particle-five { animation:figma-particle-five 2.8s linear forwards; }
.streak-overlay.is-visible .particle-six { animation:figma-particle-six 2.8s linear forwards; }
.streak-overlay.is-visible .success-check { animation:figma-check-opacity 2.8s linear forwards,figma-check-translate 2.8s linear forwards,figma-check-scale 2.8s linear forwards; }
.streak-overlay.is-visible .atmospheric-ring-inner { animation:figma-inner-ring-opacity 2.8s linear forwards,figma-inner-ring-translate 2.8s linear forwards,figma-inner-ring-scale 2.8s linear forwards; }
.streak-overlay.is-visible .atmospheric-ring-outer { animation:figma-outer-ring-opacity 2.8s linear forwards,figma-outer-ring-translate 2.8s linear forwards,figma-outer-ring-scale 2.8s linear forwards; }
.streak-overlay.is-visible .streak-title { animation:figma-title-opacity 2.8s linear forwards,figma-title-translate 2.8s linear forwards,figma-title-scale 2.8s linear forwards; }
.streak-overlay.is-visible .gain-celebration { animation:figma-gain-opacity 2.8s linear forwards,figma-gain-translate 2.8s linear forwards,figma-gain-scale 2.8s linear forwards; }
.streak-overlay.is-visible #streak-bankroll-after { animation:figma-bank-opacity 2.8s linear forwards,figma-bank-translate 2.8s linear forwards,figma-bank-scale 2.8s linear forwards; }
.streak-overlay.is-visible .streak-badge { animation:figma-badge-opacity 2.8s linear forwards,figma-badge-translate 2.8s linear forwards,figma-badge-scale 2.8s linear forwards; }
.streak-overlay.is-visible .streak-flame { animation:figma-flame-rotate 2.8s linear forwards,figma-flame-scale 2.8s linear forwards; transform-origin:50% 100%; }
.streak-overlay.is-visible #streak-after { animation:figma-count-opacity 2.8s linear forwards,figma-count-translate 2.8s linear forwards,figma-count-scale 2.8s linear forwards; }
.streak-overlay.is-visible .streak-segment.is-new { animation:figma-new-segment-opacity 2.8s linear forwards,figma-new-segment-scale 2.8s linear forwards; }
.streak-overlay.is-visible .unlocked-next-step { animation:figma-unlock-opacity 2.8s linear forwards,figma-unlock-translate 2.8s linear forwards,figma-unlock-scale 2.8s linear forwards; }
.streak-overlay.is-visible .streak-continue { animation:figma-cta-opacity 2.8s linear forwards,figma-cta-translate 2.8s linear forwards,figma-cta-scale 2.8s linear forwards; }

@keyframes figma-scrim-opacity { 0% { animation-timing-function:ease-out; opacity:0; } 8.571%,100% { opacity:1; } }
@keyframes figma-card-opacity { 0%,3.571% { opacity:0; } 3.571% { animation-timing-function:ease-out; } 20%,100% { opacity:1; } }
@keyframes figma-card-translate { 0%,3.571% { translate:21px 63.76px; } 3.571% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 20%,100% { translate:0 0; } }
@keyframes figma-card-scale { 0%,3.571% { scale:.88; } 3.571% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 20%,100% { scale:1; } }
@keyframes figma-emblem-opacity { 0%,9.643% { opacity:0; } 9.643% { animation-timing-function:ease-out; } 27.143%,100% { opacity:1; } }
@keyframes figma-emblem-translate { 0%,9.643% { translate:33.22px 20.1px; } 9.643% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 27.143%,100% { translate:0 0; } }
@keyframes figma-emblem-scale { 0%,9.643% { scale:.78; } 9.643% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 27.143%,100% { scale:1; } }
@keyframes figma-sparkle { 0%,21.429% { opacity:0; rotate:0deg; translate:-53.25px 6.75px; } 21.429% { animation-timing-function:ease-out; } 24.286% { opacity:1; } 38.571% { translate:0 -8px; } 44.643% { opacity:.9; } 55.357%,100% { opacity:0; rotate:85deg; translate:8.52px 12px; } }
@keyframes figma-particle-one { 0%,20.536% { opacity:0; rotate:12deg; translate:-45.375px -33.375px; } 23.393% { opacity:1; } 37.679% { translate:0 -8px; } 43.75% { opacity:.9; } 54.464%,100% { opacity:0; rotate:-73deg; translate:7.26px 12px; } }
@keyframes figma-particle-two { 0%,19.643% { opacity:0; rotate:25deg; translate:36.375px 41.625px; } 22.5% { opacity:1; } 36.786% { translate:0 -8px; } 42.857% { opacity:.9; } 53.571%,100% { opacity:0; rotate:110deg; translate:-5.82px 12px; } }
@keyframes figma-particle-three { 0%,18.75% { opacity:0; rotate:-32deg; translate:-72px -13.125px; } 21.607% { opacity:1; } 35.893% { translate:0 -8px; } 41.964% { opacity:.9; } 52.679%,100% { opacity:0; rotate:-117deg; translate:11.52px 12px; } }
@keyframes figma-particle-four { 0%,17.857% { opacity:0; rotate:22deg; translate:60.375px -18.375px; } 20.714% { opacity:1; } 35% { translate:0 -8px; } 41.071% { opacity:.9; } 51.786%,100% { opacity:0; rotate:107deg; translate:-9.66px 12px; } }
@keyframes figma-particle-five { 0%,16.964% { opacity:0; rotate:28deg; translate:-60.75px 28.875px; } 19.821% { opacity:1; } 34.107% { translate:0 -8px; } 40.179% { opacity:.9; } 50.893%,100% { opacity:0; rotate:-57deg; translate:9.72px 12px; } }
@keyframes figma-particle-six { 0%,16.071% { opacity:0; rotate:-24deg; translate:71.25px 15.375px; } 18.929% { opacity:1; } 33.214% { translate:0 -8px; } 39.286% { opacity:.9; } 50%,100% { opacity:0; rotate:61deg; translate:-11.4px 12px; } }
@keyframes figma-check-opacity { 0%,17.143% { opacity:0; } 17.143% { animation-timing-function:ease-out; } 23.571%,100% { opacity:1; } }
@keyframes figma-check-translate { 0%,17.143% { translate:8.5px 6.75px; } 17.143% { animation-timing-function:ease-out; } 26.071% { translate:-2.04px -1.62px; } 31.429%,100% { translate:0 0; } }
@keyframes figma-check-scale { 0%,17.143% { scale:.5; } 17.143% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 26.071% { animation-timing-function:ease-out; scale:1.12; } 31.429%,100% { scale:1; } }
@keyframes figma-inner-ring-opacity { 0%,18.929% { opacity:0; } 18.929% { animation-timing-function:ease-out; } 27.857% { opacity:.8; } 49.286% { opacity:.2; } 54.643%,100% { opacity:.4; } }
@keyframes figma-inner-ring-translate { 0%,18.929% { translate:21.66px 21.66px; } 18.929% { animation-timing-function:ease-out; } 42.143% { translate:-10.26px -10.26px; } 54.643%,100% { translate:0 0; } }
@keyframes figma-inner-ring-scale { 0%,18.929% { scale:.62; } 18.929% { animation-timing-function:ease-out; } 42.143% { scale:1.18; } 54.643%,100% { scale:1; } }
@keyframes figma-outer-ring-opacity { 0%,14.286% { opacity:0; } 14.286% { animation-timing-function:ease-out; } 23.214% { opacity:.8; } 44.643% { opacity:.2; } 50%,100% { opacity:.4; } }
@keyframes figma-outer-ring-translate { 0%,14.286% { translate:25.84px 25.84px; } 14.286% { animation-timing-function:ease-out; } 37.5% { translate:-12.24px -12.24px; } 50%,100% { translate:0 0; } }
@keyframes figma-outer-ring-scale { 0%,14.286% { scale:.62; } 14.286% { animation-timing-function:ease-out; } 37.5% { scale:1.18; } 50%,100% { scale:1; } }
@keyframes figma-title-opacity { 0%,16.786% { opacity:0; } 16.786% { animation-timing-function:ease-out; } 30%,100% { opacity:1; } }
@keyframes figma-title-translate { 0%,16.786% { translate:6.04px 10.72px; } 16.786% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 30%,100% { translate:0 0; } }
@keyframes figma-title-scale { 0%,16.786% { scale:.96; } 16.786% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 30%,100% { scale:1; } }
@keyframes figma-gain-opacity { 0%,22.5% { opacity:0; } 22.5% { animation-timing-function:ease-out; } 37.5%,100% { opacity:1; } }
@keyframes figma-gain-translate { 0%,22.5% { translate:27.18px 21.72px; } 22.5% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 37.5%,100% { translate:0 0; } }
@keyframes figma-gain-scale { 0%,22.5% { scale:.82; } 22.5% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 37.5%,100% { scale:1; } }
@keyframes figma-bank-opacity { 0%,35% { opacity:0; } 35% { animation-timing-function:ease-out; } 45.714%,100% { opacity:1; } }
@keyframes figma-bank-translate { 0%,35% { translate:3.05px 9.1px; } 35% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 45.714%,100% { translate:0 0; } }
@keyframes figma-bank-scale { 0%,35% { scale:.9; } 35% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 45.714%,100% { scale:1; } }
@keyframes figma-badge-opacity { 0%,36.786% { opacity:0; } 36.786% { animation-timing-function:ease-out; } 48.214%,100% { opacity:1; } }
@keyframes figma-badge-translate { 0%,36.786% { translate:6.04px 11.76px; } 36.786% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 48.214%,100% { translate:0 0; } }
@keyframes figma-badge-scale { 0%,36.786% { scale:.96; } 36.786% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 48.214%,100% { scale:1; } }
@keyframes figma-flame-rotate { 0%,45.714% { rotate:0deg; } 50% { rotate:12deg; } 55.357% { rotate:-9deg; } 61.429%,100% { rotate:0deg; } }
@keyframes figma-flame-scale { 0%,45.714% { scale:1; } 52.857% { scale:1.18; } 61.429%,100% { scale:1; } }
@keyframes figma-count-opacity { 0%,45.714% { opacity:0; } 45.714% { animation-timing-function:ease-out; } 58.214%,100% { opacity:1; } }
@keyframes figma-count-translate { 0%,45.714% { translate:4px 23px; } 45.714% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 58.214%,100% { translate:0 0; } }
@keyframes figma-count-scale { 0%,45.714% { scale:.5; } 45.714% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 58.214%,100% { scale:1; } }
@keyframes figma-new-segment-opacity { 0%,45.714% { opacity:.12; } 45.714% { animation-timing-function:ease-out; } 58.929%,100% { opacity:1; } }
@keyframes figma-new-segment-scale { 0%,45.714% { scale:.02 1; } 45.714% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 60.714%,100% { scale:1; } }
@keyframes figma-unlock-opacity { 0%,57.143% { opacity:0; } 57.143% { animation-timing-function:ease-out; } 70%,100% { opacity:1; } }
@keyframes figma-unlock-translate { 0%,57.143% { translate:6.04px 13.04px; } 57.143% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 70%,100% { translate:0 0; } }
@keyframes figma-unlock-scale { 0%,57.143% { scale:.96; } 57.143% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 70%,100% { scale:1; } }
@keyframes figma-cta-opacity { 0%,63.571% { opacity:0; } 63.571% { animation-timing-function:ease-out; } 76.786%,100% { opacity:1; } }
@keyframes figma-cta-translate { 0%,63.571% { translate:4.53px 10.78px; } 63.571% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 76.786%,100% { translate:0 0; } }
@keyframes figma-cta-scale { 0%,63.571% { scale:.97; } 63.571% { animation-timing-function:cubic-bezier(.45,1.45,.8,1); } 76.786%,100% { scale:1; } }

@media (max-width:350px) { .streak-card { padding:20px; } .success-emblem { margin-left:calc((100% - 302px) / 2); } .gain-celebration strong { font-size:56px; } .unlocked-next-step>div strong { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { .streak-overlay.is-visible * { animation:none!important; translate:0!important; } .streak-overlay.is-visible :is(.celebration-sparkle,.celebration-particle) { display:none; } .streak-overlay.is-visible :is(.streak-card,.success-emblem,.success-check,.atmospheric-ring-inner,.atmospheric-ring-outer,.streak-title,.gain-celebration,#streak-bankroll-after,.streak-badge,#streak-after,.unlocked-next-step,.streak-continue) { opacity:1!important; scale:1!important; } }