:root{
--bg:#060607;
--surface:#0D0D11;
--surface-2:#121217;
--line:rgba(255,255,255,.08);
--line-2:rgba(255,255,255,.14);
--text:#FAFAF7;
--muted:#8B8B95;
--muted-2:#54545E;
--volt:#C8FF1C;
--volt-soft:rgba(200,255,28,.12);
--volt-line:rgba(200,255,28,.35);
--danger:#FF4D5E;
--t-bronze:#E2A36B;
--t-silver:#C9CDD6;
--t-gold:#FFD34D;
--t-platinum:#9FF0E4;
--t-diamond:#7DD3FF;
--t-legendary:#C77DFF;
--tabh:calc(72px + env(safe-area-inset-bottom));
--radius:22px;
--spring:cubic-bezier(.22,1.1,.32,1);
/* design-system additions (PushClub DS tokens) */
--surface-3:#0B0B0E;
--volt-glow:rgba(200,255,28,.35);
--volt-ink:#0A0A0A;
--danger-soft:rgba(255,77,94,.12);
--danger-line:rgba(255,77,94,.45);
--streak-fill:rgba(255,120,20,.10);
--streak-line:rgba(255,140,40,.5);
--streak-hot:#FF7814;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,sans-serif;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
-webkit-user-select:none;user-select:none;position:fixed;inset:0;width:100%;
}
input,textarea{-webkit-user-select:text;user-select:text}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
::-webkit-scrollbar{display:none}
/* ---------- shared atoms ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eyebrow.volt{color:var(--volt)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.btn{
display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
min-height:56px;border-radius:18px;background:var(--volt);color:#0A0A0A;
font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
transition:transform .15s var(--spring),filter .15s;
}
.btn:active{transform:scale(.965);filter:brightness(.92)}
.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2)}
/* auth mode-toggle ("Already have an account? Sign in") reads as body text on the dark bg — give it a
clearer outline so it registers as a tappable button without competing with the volt primary CTA */
#auth-toggle,#auth-back{border-color:rgba(255,255,255,.32);background:var(--surface)}
.btn.small{min-height:44px;width:auto;padding:0 20px;font-size:12px;border-radius:14px}
.btn[disabled]{opacity:.35;pointer-events:none}
/* Sign in with Apple — white variant per Apple's guidelines (dark UI → white button), title-case label */
/* Apple HIG: official mark (not a redraw) + title ~43% of button height (50px×22px ≈ 233%) */
.btn-apple{background:#fff;color:#0A0A0A;text-transform:none;letter-spacing:0;font-size:22px;font-weight:600;min-height:50px}
.btn-apple svg{margin-top:-1px}
/* boot resume state ("Signing you in.") — quiet breath while the session/OAuth exchange resolves */
.resume-pulse{animation:resumePulse 1.6s ease-in-out infinite}
@keyframes resumePulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.resume-pulse{animation:none}}
/* auth: "or" divider between Apple and email (eyebrow type ladder: 11/700/.18em) */
.auth-or{align-items:center;gap:12px;color:var(--muted-2);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:16px 0 2px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line-2)}
/* auth: password field with a Show/Hide toggle (>=44px target + spring press-shrink) */
.pass-wrap{position:relative}
.pass-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:0;color:var(--muted-2);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .15s var(--spring)}
.pass-eye:active{transform:translateY(-50%) scale(.9);color:var(--text)}
/* auth: quiet inline link (forgot-code, resend) — >=44px target + spring press-shrink */
.small-link{display:inline-flex;align-items:center;min-height:44px;width:auto;background:transparent;border:0;color:var(--muted-2);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer;transition:transform .15s var(--spring)}
.small-link:active{transform:scale(.96);color:var(--text)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.hair{height:1px;background:var(--line);border:0}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 0 rgba(200,255,28,.5);animation:pulse 2s infinite}
/* --pulse lets a surface pulse in its own light (default volt) — vacant belt slots breathe white, not volt (Law 6: volt is earned) */
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse,rgba(200,255,28,.45))}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* ---------- onboarding ---------- */
#ob{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;flex-direction:column}
.ob-screen{flex:1;display:none;flex-direction:column;padding:calc(28px + env(safe-area-inset-top)) 26px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.ob-screen.on{display:flex;animation:rise .5s var(--spring)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ob-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
background:
radial-gradient(70% 42% at 50% 0%, rgba(200,255,28,.10), transparent 70%),
repeating-linear-gradient(to bottom, transparent 0 79px, rgba(255,255,255,.035) 79px 80px),
repeating-linear-gradient(to right, transparent 0 79px, rgba(255,255,255,.035) 79px 80px);
}
.logo-mark{width:64px;height:64px;border-radius:18px;background:var(--volt);display:flex;align-items:center;justify-content:center;box-shadow:0 0 60px rgba(200,255,28,.35)}
.logo-mark svg{width:34px;height:34px}
.wordmark{font-size:46px;font-weight:900;letter-spacing:-.04em;line-height:1}
.wordmark span{color:var(--volt)}
.ob-h{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1.08}
.ob-sub{font-size:15px;color:var(--muted);line-height:1.55;margin-top:10px}
.field{margin-top:26px}
.field label{display:block;margin-bottom:10px}
.field input[type=text]{
width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
padding:17px 18px;font-size:18px;font-weight:700;color:var(--text);outline:none;
}
.field input[type=text]:focus{border-color:var(--volt-line)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px}
.emoji-grid button{aspect-ratio:1;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:22px;transition:transform .12s var(--spring)}
.emoji-grid button.sel{border-color:var(--volt);background:var(--volt-soft);transform:scale(1.06)}
.color-row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.color-row button{width:42px;height:42px;border-radius:50%;border:2px solid transparent;transition:transform .12s var(--spring)}
.color-row button.sel{border-color:#fff;transform:scale(1.12)}
/* emblem picker buttons — show the avatar SVG itself */
.emoji-grid .emb-btn{padding:4px;background:var(--surface);overflow:hidden}
.emb-btn img{width:100%;height:100%;display:block;border-radius:11px;pointer-events:none}
/* emblem avatar mode — the SVG is a complete disc; keep the colored ring, drop the tint fill */
.ava.emb,.pava.emb,.bigava.emb{background:none;overflow:hidden;padding:0}
.emb img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
.goal-big{display:flex;align-items:center;justify-content:center;gap:26px;margin:26px 0 8px}
.goal-big .v{font-size:96px;font-weight:900;letter-spacing:-.05em}
/* 320px: a 3-digit goal (legal max 500) at 96px pushed both steppers off-screen — scale, don't clip. */
@media (max-width:339px){ .goal-big{gap:14px} .goal-big .v{font-size:72px} }
.stepbtn{width:58px;height:58px;flex-shrink:0;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform .12s var(--spring)}
.stepbtn:active{transform:scale(.92)}
.goal-presets{display:flex;gap:8px;justify-content:center;margin-top:14px}
.goal-presets button{padding:9px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.goal-presets button.sel{background:var(--volt-soft);border-color:var(--volt-line);color:var(--volt)}
.install-steps{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.install-steps .st{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.install-steps .n{width:26px;height:26px;border-radius:50%;background:var(--volt);color:#000;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.install-steps p{font-size:14.5px;line-height:1.5;color:#D8D8DD}
.install-steps b{color:var(--text)}
.ios-share{display:inline-block;vertical-align:-3px;width:16px;height:16px}
/* ---------- app shell ---------- */
#app{position:fixed;inset:0;display:none}
#app.on{display:block}
.view{position:absolute;inset:0;bottom:var(--tabh);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:none;padding:calc(18px + env(safe-area-inset-top)) 20px 40px}
.view.on{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.vhead h1{font-size:30px;font-weight:900;letter-spacing:-.03em}
/* Scott: streak + coins share ONE row as a MATCHED PAIR — identical height/padding/type-size, differing
only in their glyph and the streak's "hot" tint. Kept compact so both sit beside the wordmark cleanly
across the modern device range (≥360px); at 320px (2016 iPhone SE) the 158px "PUSHCLUB" leaves no room
for two chips on a line — an inherent cost of one row vs the old stack, accepted for that legacy sliver. */
.vhead-r{display:flex;align-items:center;gap:7px}
.streak-pill,.coin-chip-mini{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 10px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;font-weight:800;color:var(--text)}
/* 320px: big values (streak 100 · 12.3K coins) clipped the tappable coin chip — tighten, never clip. */
@media (max-width:339px){ .streak-pill,.coin-chip-mini{padding:0 7px;gap:4px;font-size:12px} }
.streak-pill.hot{border-color:rgba(255,140,40,.5);background:rgba(255,120,20,.10)}
.coin-chip-mini{transition:transform .12s var(--spring)}
.coin-chip-mini:active{transform:scale(.92)}
.coin-chip-mini svg{width:14px;height:14px;display:block}
/* v20 Wave 0: the Daily Rumble dice chip sits beside the streak pill, near the ring below it */
.rumble-chip{position:absolute;top:2px;right:2px;z-index:3;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .12s var(--spring)}
.rumble-chip:active{transform:scale(.9)}
.rumble-chip .rc-dot{position:absolute;top:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--volt);border:2px solid var(--bg);animation:pulse 2s infinite}
/* ---------- home hero ---------- */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 0 6px}
.hero-glow{position:absolute;inset:-30px -60px;background:radial-gradient(50% 50% at 50% 42%, rgba(200,255,28,.10), transparent 70%);pointer-events:none}
.ringwrap{position:relative;width:268px;height:268px}
.ringwrap svg{transform:rotate(-90deg)}
.ring-bg{stroke:rgba(255,255,255,.07)}
.ring-fg{stroke:var(--volt);stroke-linecap:round;transition:stroke-dashoffset 1s var(--spring);filter:drop-shadow(0 0 10px rgba(200,255,28,.45))}
.ring-fg2{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset 1s var(--spring)}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring-center .big{font-size:84px;font-weight:900;letter-spacing:-.05em;line-height:1}
.ring-center .of{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.ring-center .pct{margin-top:6px;font-size:12px;font-weight:800;color:var(--volt);letter-spacing:.08em}
/* ring-close "snap shut" celebration — pure CSS, anchored to the ring itself */
.ring-shock{position:absolute;inset:5px;border-radius:50%;border:3px solid var(--volt);opacity:0;pointer-events:none}
.ringwrap.snap{animation:ringSnap .55s var(--spring)}
.ringwrap.snap .ring-fg{animation:ringFlash .6s ease-out}
.ringwrap.snap .ring-shock{animation:ringShock .62s ease-out}
@keyframes ringSnap{0%{transform:scale(1)}26%{transform:scale(.93)}60%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes ringFlash{0%{stroke:var(--volt);filter:drop-shadow(0 0 10px rgba(200,255,28,.45))}26%{stroke:#fff;filter:drop-shadow(0 0 30px rgba(255,255,255,.95))}100%{stroke:var(--volt);filter:drop-shadow(0 0 10px rgba(200,255,28,.45))}}
@keyframes ringShock{0%{transform:scale(.8);opacity:.85;border-width:7px}100%{transform:scale(1.32);opacity:0;border-width:1px}}
/* anticipation — the ring "charges" (pulls in + brightens) just before it snaps */
.ringwrap.charge{animation:ringCharge .26s ease-in}
.ringwrap.charge .ring-fg{animation:ringChargeGlow .26s ease-in}
@keyframes ringCharge{from{transform:scale(1)}to{transform:scale(.955)}}
@keyframes ringChargeGlow{from{filter:drop-shadow(0 0 10px rgba(200,255,28,.45))}to{filter:drop-shadow(0 0 28px rgba(200,255,28,.95))}}
/* number slam — overshoot + blur-in on a figure that just changed */
.numslam{display:inline-block;animation:numSlam .5s var(--spring)}
@keyframes numSlam{0%{transform:scale(1.5);filter:blur(6px);opacity:.35}55%{transform:scale(.93);filter:blur(0)}100%{transform:scale(1);opacity:1}}
/* hero shine — a specular band sweeps across the medallion/belt at the impact frame */
.tm-ic.shine::after,.cm-belt.shine::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);background-size:260% 100%;animation:shineSweep .9s ease-out}
@keyframes shineSweep{from{background-position:130% 0}to{background-position:-40% 0}}
/* legendary godrays — reuse the conic chrome ring, now slowly rotating behind the medal */
.tm-ic.rays::before{animation:spin 6s linear infinite}
.logbtn{margin-top:22px;width:100%;min-height:62px;border-radius:20px;background:var(--volt);color:#070707;font-size:16px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 32px rgba(200,255,28,.22);transition:transform .15s var(--spring)}
.logbtn:active{transform:scale(.97)}
.quickstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.qs{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 12px;text-align:center}
.qs .v{font-size:24px;font-weight:900;letter-spacing:-.02em}
.qs .l{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.section-h{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.section-h .more{font-size:12px;font-weight:800;color:var(--volt);letter-spacing:.08em}
.pr-banner{display:none;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(200,255,28,.16),rgba(200,255,28,.04));border:1px solid var(--volt-line);border-radius:16px;padding:12px 16px;margin-top:14px;font-size:13.5px;font-weight:800;letter-spacing:.04em}
.pr-banner.on{display:flex;animation:rise .5s var(--spring)}
/* ---------- board rows ---------- */
.rowlist{display:flex;flex-direction:column;gap:8px}
.brow{position:relative;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 16px;overflow:hidden}
.brow.me{border-color:var(--volt-line);background:linear-gradient(90deg,rgba(200,255,28,.07),var(--surface) 60%)}
.brow.ghost{border-style:dashed;opacity:.65}
.brow .rk{width:24px;font-size:14px;font-weight:900;color:var(--muted);text-align:center;flex-shrink:0}
.brow.r1 .rk{color:var(--t-gold)}
.brow .ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;border:2px solid transparent}
.brow .who{flex:1;min-width:0;text-align:left;padding:0;background:none;border:0;color:inherit;font:inherit}
.brow button.who{cursor:pointer}
.brow .nm{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;letter-spacing:.04em}
.brow .ct{font-size:24px;font-weight:900;letter-spacing:-.02em;flex-shrink:0}
.brow .bar{position:absolute;left:0;bottom:0;height:2.5px;background:var(--volt);opacity:.85;transition:width .8s var(--spring)}
.brow.ghost .bar{background:var(--muted)}
.crown{font-size:13px;margin-left:4px}
/* crown steal — the row that just took rank 1 flashes volt and the crown pops in */
.brow.crownsteal{animation:crownSteal .96s var(--spring)}
@keyframes crownSteal{0%{background:var(--volt-soft);box-shadow:0 0 0 2px var(--volt-line) inset}100%{}}
.brow.crownsteal .crown{display:inline-block;animation:crownPop .6s var(--spring)}
@keyframes crownPop{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
/* ---------- arena ---------- */
.seg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px;margin-bottom:16px}
.seg button{position:relative;z-index:1;padding:11px 0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .25s;display:flex;align-items:center;justify-content:center;gap:5px}
.seg button.sel{color:#0A0A0A}
/* Wave A: the 3 Store-tab glyphs (currentColor — tint follows the rule above for free) */
.seg button svg{flex-shrink:0}
.seg .pill{position:absolute;top:4px;bottom:4px;width:calc(25% - 2px);background:var(--volt);border-radius:12px;transition:transform .3s var(--spring)}
/* 3-column variant (Store hub tabs, v20 Wave 0) — same mechanism, one fewer, wider-label column.
"⚔️ Arsenal" is the longest label and sat edge-to-edge at the 4-column button's type scale — smaller
type + tighter tracking + a hair of horizontal padding gives it real breathing room. */
.seg.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.seg3 .pill{width:calc(33.333% - 2.67px)}
.seg.seg3 button{padding:11px 3px;font-size:10.5px;letter-spacing:.02em}
.reset-chip{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:16px}
.reset-chip .t{font-size:25px;font-weight:900;letter-spacing:.02em}
.reset-chip .lhs{display:flex;align-items:center;gap:10px}
/* W3 "Bounty" banner — a DISTINCT arena surface (never a row / champ-strip card). A coin-SPEND surface, so
it whispers (Law 4): quiet gold TARGET tag (ties to the weekly belt's --t-gold), the pot number stays
text-colored (volt is reserved for the coin glyph + the confirm CTA). The "on YOUR head" heads-up borrows
the restrained danger palette — being targeted stings, never celebrates. 320px-safe (wraps + shrinks). */
.bounty{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:13px 15px;margin-bottom:16px}
.bounty-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;font-weight:800;letter-spacing:.01em;line-height:1.35}
.bounty-h svg{width:16px;height:16px;flex-shrink:0;vertical-align:-3px}
.bounty-h .num{color:var(--text)} /* the pot is a SPEND price, not a win — never volt */
.bounty-tag{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--t-gold);border:1px solid var(--line-2);border-radius:8px;padding:3px 7px}
.bounty-tag.me{color:var(--danger)}
.bounty-tiers{display:flex;gap:9px;margin-top:11px}
.bounty-tier{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-size:15px;font-weight:900;transition:transform .15s var(--spring),border-color .2s,background .2s}
.bounty-tier svg{width:17px;height:17px}
.bounty-tier:active{transform:scale(.95)}
.bounty-tier.off{opacity:.4;pointer-events:none}
.bounty.on-me{border-color:var(--danger-line);background:linear-gradient(90deg,var(--danger-soft),var(--surface) 62%)}
.bounty-pot{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:13px;font-weight:800;color:var(--muted)}
.bounty-pot svg{width:16px;height:16px;flex-shrink:0}
.bounty-pot .num{color:var(--text)}
.podium{display:flex;align-items:flex-end;gap:10px;margin:6px 0 18px;min-height:150px}
.pcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.pcol .pava{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid transparent}
.pcol .pnm{font-size:12px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcol .pct2{font-size:15px;font-weight:900;color:var(--volt)}
.pcol .block{width:100%;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-size:13px;font-weight:900;color:var(--muted)}
.pcol.p1 .block{height:86px;border-color:var(--volt-line);background:linear-gradient(180deg,rgba(200,255,28,.16),rgba(200,255,28,.03));color:var(--volt)}
.pcol.p2 .block{height:62px}
.pcol.p3 .block{height:46px}
.pcol .crown2{font-size:18px;height:20px}
.empty{padding:34px 22px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--radius);margin-top:8px}
.empty h3{font-size:18px;font-weight:900;letter-spacing:-.01em}
.empty p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:8px 0 16px}
/* ---------- trophies ---------- */
.troph-progress{margin-bottom:18px}
.troph-progress .nums{display:flex;align-items:baseline;gap:8px}
.troph-progress .nums .a{font-size:44px;font-weight:900;letter-spacing:-.03em}
.troph-progress .nums .b{font-size:16px;font-weight:800;color:var(--muted)}
.pbar{height:5px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:10px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--volt);border-radius:99px;transition:width .8s var(--spring)}
.tcat{margin:24px 0 10px}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ttile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;overflow:hidden}
.ttile .tic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;background:var(--surface-2);border:1.5px solid var(--line-2)}
.ttile .tnm{font-size:11px;font-weight:800;line-height:1.25;letter-spacing:.01em}
.ttile .ttr{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.ttile.un{border-color:var(--tc)}
.ttile.un .tic{background:color-mix(in srgb,var(--tc) 16%, transparent);border-color:var(--tc);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 35%, transparent)}
.ttile.un .ttr{color:var(--tc)}
.ttile.lk .tic{filter:grayscale(1);opacity:.42}
.ttile.lk .tnm{color:var(--muted)}
/* medallion mode — each DS medallion carries its own metal ring + glow, so drop the emoji-circle chrome */
.ttile .tic.med,.ttile.un .tic.med{width:54px;height:54px;background:none;border:none;box-shadow:none}
.tic.med img{width:100%;height:100%;object-fit:contain;display:block}
.ttile .tpb{width:80%;height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:2px}
.ttile .tpb i{display:block;height:100%;background:var(--muted);border-radius:99px}
.tfilter{display:flex;gap:8px;margin-bottom:4px}
.tfilter button{padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.tfilter button.sel{background:var(--volt-soft);border-color:var(--volt-line);color:var(--volt)}
/* ---------- you ---------- */
.youtop{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.bigava{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;border:2.5px solid transparent;flex-shrink:0}
.youtop .yn{font-size:24px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.youtop .yl{font-size:12px;font-weight:800;color:var(--volt);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.xpcard{margin-bottom:14px}
.xpcard .row1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.xpcard .lv{font-size:15px;font-weight:900;display:flex;align-items:center;gap:6px}
.xpcard .lv svg{flex-shrink:0}
.xpcard .xr{font-size:12px;font-weight:700;color:var(--muted)}
/* W4 status ladder — the cosmetic prestige badge (You XP card + rival modal). Metal via --sc (a DS
tier var, never a hardcoded hex); same chip language as the belt chips (.bch). */
.strow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* rhymes with the belt chip (.bch): 2px 7px / 9px / radius 7px, so the two prestige chips match side-by-side */
.stbadge{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:7px;font-size:9px;font-weight:900;letter-spacing:.06em;color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent);border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);white-space:nowrap}
.stdot{width:7px;height:7px;border-radius:50%;background:var(--sc);box-shadow:0 0 6px color-mix(in srgb,var(--sc) 70%,transparent);flex-shrink:0}
.stbadge.floor .stdot{box-shadow:none;opacity:.9} /* bronze floor: no glow — the light is earned upward */
.sthint{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted-2)}
.um-lv .stbadge{margin-left:8px;vertical-align:1px}
.statwall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sw{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.sw .v{font-size:27px;font-weight:900;letter-spacing:-.02em}
.sw .l{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.settings-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.setrow{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.setrow .sl{font-size:14.5px;font-weight:700}
.setrow .sv{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:900;color:var(--volt)}
.mini-step{width:36px;height:36px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center}
.foot{margin-top:30px;text-align:center;font-size:11px;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
/* ---------- titles: belt chips / champions strip / lineage / ceremony / vault ---------- */
.bch{display:inline-flex;align-items:center;margin-left:6px;padding:2px 6px;border-radius:7px;font-size:9px;font-weight:900;letter-spacing:.05em;color:var(--bc);background:color-mix(in srgb,var(--bc) 12%,transparent);border:1px solid color-mix(in srgb,var(--bc) 45%,transparent);vertical-align:1px;white-space:nowrap}
/* "you've been taunted" — single inbox shown at app open (all arenas), one tap clears all */
#tauntbox{position:fixed;inset:0;background:rgba(3,3,4,.97);z-index:71;display:none;flex-direction:column;padding:calc(36px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom))}
#tauntbox.on{display:flex;animation:fadein .3s ease}
.tb-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--muted);background:none;border:none;cursor:pointer;line-height:1}
.tb-head{text-align:center;margin-bottom:4px}
.tb-sub{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px}
.tb-list{flex:1;overflow-y:auto;margin:14px 0 16px;-webkit-overflow-scrolling:touch}
.tb-item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.tb-item:last-child{border-bottom:0}
.tb-item img{width:50px;height:50px;border-radius:14px;flex-shrink:0}
.tb-msg{font-size:15px;font-weight:800;line-height:1.3}
.tb-from{font-size:12px;color:var(--muted);font-weight:600;margin-top:3px}
/* ---------- THE BRIEFING (W0.5) — the app-open notification hub, promoted from the old daily recap.
A quiet digest, not a party (ART bar: the ceremony roars, the Briefing whispers) — plain rows, no
confetti-grade color, no big numbers. */
#nmodal{position:fixed;inset:0;background:rgba(3,3,4,.97);z-index:75;display:none;align-items:center;justify-content:center;padding:calc(30px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom))}
#nmodal.on{display:flex;animation:fadein .3s ease}
.nm-body{width:min(420px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.nm-kicker{color:var(--volt);letter-spacing:.18em}
.nm-title{font-size:14px;font-weight:900;letter-spacing:.14em}
.nm-title.rv{margin-top:14px}
.nm-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:26px;flex-shrink:0}
.nm-rows{width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.br-row{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;text-align:left;font:inherit;color:inherit;animation:popIn .45s var(--spring) both;animation-delay:calc(var(--i,0)*60ms);transition:transform .12s var(--spring)}
.br-row:active{transform:scale(.97)}
.br-ic{font-size:20px;flex-shrink:0;width:26px;text-align:center}
.br-ic svg{width:21px;height:21px;vertical-align:middle} /* brand coin/bell glyphs sit at the emoji size */
.br-t{flex:1;min-width:0;font-size:13.5px;font-weight:800;line-height:1.35}
.br-go{color:var(--muted);font-size:18px;flex-shrink:0}
.tk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:2px}
.tcell{background:none;border:1px solid var(--line);border-radius:16px;padding:8px;cursor:pointer;transition:transform .12s var(--spring),border-color .12s;display:flex;flex-direction:column;align-items:center;gap:5px}
.tcell:active{transform:scale(.92)}
.tcell:hover{border-color:var(--volt-line)}
.tcell img{width:100%;aspect-ratio:1;border-radius:11px;display:block}
.tcell span{font-size:8px;font-weight:800;letter-spacing:.03em;color:var(--muted);text-align:center;line-height:1.2;height:2.4em;overflow:hidden}
.tk-grid.leg .tcell{border-color:color-mix(in srgb,#FFD34D 32%,transparent)}
.tk-grid.leg .tcell:hover{border-color:#FFD34D}
.tk-grid.shaded .tcell{cursor:not-allowed}
.tk-grid.shaded .tcell img{filter:grayscale(.85) brightness(.55)}
.tk-grid.shaded .tcell span{color:var(--muted-2)}
.tcell.locked{position:relative}
.tcell.locked::after{content:"🔒";position:absolute;top:50%;left:50%;transform:translate(-50%,-90%);font-size:18px;filter:none}
.leg-note{font-size:11px;color:var(--muted);margin:0 2px 8px;text-align:center}
.chstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.chcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .12s var(--spring);overflow:hidden}
.chcard:active{transform:scale(.95)}
.chcard.held{border-color:color-mix(in srgb,var(--bc) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 9%,transparent),var(--surface))}
.chcard .cl{font-size:8.5px;font-weight:900;letter-spacing:.14em;color:var(--bc)}
.chava{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;border:2px solid transparent}
.chcard .vac{background:var(--surface-2);border:1.5px dashed var(--line-2);color:var(--muted-2);font-weight:900;font-size:15px;animation:pulse 2.4s infinite}
.chcard .cn{font-size:10px;font-weight:800;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chcard .cn.vacant{color:var(--muted-2);font-size:8px;letter-spacing:.1em}
.chcard .cr{font-size:8.5px;font-weight:900;letter-spacing:.07em;color:var(--muted);text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lsheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:41;max-height:72vh;display:flex;flex-direction:column}
#lsheet.on{transform:none}
/* trophy info sheet — tap any medallion to learn what it celebrates */
.ttile{cursor:pointer;transition:transform .12s var(--spring)}
.ttile:active{transform:scale(.95)}
#tsheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 24px calc(28px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .4s var(--spring);z-index:72;max-height:86vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
#tsheet.on{transform:none}
.ts-body{display:flex;flex-direction:column;align-items:center;text-align:center}
.ts-status{font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-top:4px}
.ts-status.un{color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);border:1px solid color-mix(in srgb,var(--tc) 50%,transparent)}
.ts-status.lk{color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2)}
.ts-status.sec{color:#C9A6FF;background:rgba(150,110,255,.12);border:1px solid rgba(150,110,255,.4)}
.ts-ic{width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:56px;margin-top:18px;position:relative;background:color-mix(in srgb,var(--tc) 14%,transparent);border:2px solid var(--tc);box-shadow:0 0 60px color-mix(in srgb,var(--tc) 42%,transparent);animation:popIn .5s var(--spring)}
.ts-ic.med{background:none;border:none;box-shadow:none}
.ts-ic.med img{width:84%;height:84%;object-fit:contain;display:block}
.ts-ic.lk{filter:grayscale(1);opacity:.5;box-shadow:none;background:var(--surface-2);border-color:var(--line-2)}
.ts-ic.lk.med{filter:grayscale(1);opacity:.45}
.ts-ic.sec{background:var(--surface-2);border:2px dashed rgba(150,110,255,.45);box-shadow:0 0 50px rgba(150,110,255,.22);color:#C9A6FF;font-size:62px;font-weight:900}
.ts-meta{margin-top:20px;font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--tc)}
.ts-name{margin-top:8px;font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.ts-card{margin-top:20px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;text-align:left}
.ts-label{font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.ts-desc{margin-top:7px;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--text)}
.ts-prog{margin-top:14px;width:100%}
.ts-prog .ts-pnums{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:7px}
.ts-prog .ts-pnums b{color:var(--tc);font-size:15px}
.ts-prog .pbar i{background:var(--tc)}
.ts-prog.done{text-align:center;font-size:14px;font-weight:800;color:var(--tc)}
.ts-hype{margin-top:16px;font-size:13.5px;font-weight:700;line-height:1.5;color:var(--muted);max-width:300px}
/* belt case (You tab) — a 4-slot display case; the metals are earned light */
.beltcase{margin-bottom:14px}
.bc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bc-arena{font-size:10px;font-weight:800;color:var(--muted-2);letter-spacing:.12em;text-transform:uppercase;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Scott: belt-case league dropdown — reads like the .bc-arena label it replaces, with a caret to say "tap me". */
.bc-arena-sel{-webkit-appearance:none;appearance:none;max-width:60%;min-height:36px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;padding:6px 24px 6px 12px;cursor:pointer;text-overflow:ellipsis;transition:transform .12s var(--spring);background-image:linear-gradient(45deg,transparent 50%,var(--muted-2) 50%),linear-gradient(135deg,var(--muted-2) 50%,transparent 50%);background-position:calc(100% - 13px) 52%,calc(100% - 9px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.bc-arena-sel:active{transform:scale(.96)}
.bc-arena-sel:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
.bc-arena-sel option{color:#111;background:#fff}
.bc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bc-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px 8px 12px;color:inherit;font:inherit;cursor:pointer;transition:transform .12s var(--spring);overflow:hidden}
.bc-slot:active{transform:scale(.96)}
.bc-slot.mine{border-color:color-mix(in srgb,var(--bc) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 11%,transparent),var(--surface-2))}
.bc-medal{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--bc);background:color-mix(in srgb,var(--bc) 13%,transparent);border:2px solid var(--bc);box-shadow:0 0 22px color-mix(in srgb,var(--bc) 40%,transparent)}
.bc-slot:not(.mine) .bc-medal{border:1.5px dashed var(--line-2);background:none;color:var(--muted-2);box-shadow:none}
.bc-slot.vacant .bc-medal{animation:pulse 2.4s infinite;--pulse:rgba(255,255,255,.14)}
.bc-per{font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--muted)}
.bc-slot.mine .bc-per{color:var(--bc)}
.bc-own{font-size:12px;font-weight:900;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-own .vac{color:var(--muted-2);font-size:10px;letter-spacing:.1em}
.bc-tag{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.bc-slot.theirs .bc-tag{color:var(--danger)}
.bc-hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px;text-align:center;font-weight:600}
/* personal progress chart (You tab) */
.trendcard{margin-bottom:14px}
.trend-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.trend-seg{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:3px}
.trend-seg button{padding:5px 12px;border-radius:8px;font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
/* quiet "lit chip" selection (matches .vis-toggle) so the chart stays the one volt floodlight on the card (Law 1) */
.trend-seg button.sel{background:var(--volt-soft);color:var(--volt);box-shadow:inset 0 0 0 1px var(--volt-line)}
/* metric lens (Battle ⇄ True effort) — a full-width segmented row under the zoom control */
.trend-seg.metric{display:flex}
.trend-seg.metric button{flex:1;padding:8px 10px;font-size:11.5px;text-align:center}
/* per-exercise on/off chips (effort lens only) */
.trend-ex{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.trend-ex .exchip{padding:7px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);font-size:12.5px;font-weight:800;color:var(--muted);transition:background .15s,color .15s,border-color .15s,opacity .15s;opacity:.5}
.trend-ex .exchip.on{background:var(--volt-soft);border-color:var(--volt-line);color:var(--text);opacity:1}
.trend-note{font-size:11px;font-weight:700;color:var(--muted-2);letter-spacing:.02em;margin-bottom:14px}
.trend-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.trend-big{font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:.9}
.trend-sub{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.trend-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:900;padding:3px 8px;border-radius:99px;white-space:nowrap}
.trend-chip.up{color:var(--volt);background:var(--volt-soft)}
.trend-chip.down{color:#FF8A4D;background:rgba(255,138,77,.12)}
.trend-chip.flat{color:var(--muted);background:var(--surface-2)}
.trend-chip .vs{color:var(--muted-2);font-weight:700}
/* Scott #8: bars (.trend-chart) + x-labels (.trend-x) share ONE overflow-x:auto ancestor so they
scroll together and stay aligned. Each bar/label gets a FIXED flex-basis (not flex:1, which used to
stretch a fixed 12-14 item window to fill the card) — with flex-shrink:0 they refuse to compress, so
a long all-time history overflows into a real horizontal scroll instead of squishing illegibly.
render.progressChartHTML sets #trendScroll's scrollLeft to max after paint (land on "now"). */
.trend-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin-bottom:12px}
.trend-chart{display:flex;align-items:flex-end;height:108px;margin-bottom:8px}
.trend-chart .trb{flex:0 0 22px;display:flex;align-items:flex-end;height:100%;cursor:default}
.trend-chart .trb>i{width:100%;background:linear-gradient(180deg,var(--volt),color-mix(in srgb,var(--volt) 65%,#202800));border-radius:5px 5px 2px 2px;min-height:3px;transition:height .6s var(--spring)}
.trend-chart .trb.now>i{background:var(--volt);box-shadow:0 0 14px var(--volt-glow)}
.trend-chart .trb.zero>i{background:var(--line-2);min-height:3px;border-radius:99px}
.trend-x{display:flex}
.trend-x span{flex:0 0 22px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.02em;color:var(--muted-2);white-space:nowrap;overflow:hidden}
.trend-foot{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.trend-empty{font-size:13.5px;font-weight:700;color:var(--muted);line-height:1.6;padding:16px 0 6px;text-align:center}
/* arena switcher */
#asheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:41;max-height:78vh;display:flex;flex-direction:column}
#asheet.on{transform:none}
#arena-list{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.arena-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 6px 4px 4px;flex-shrink:0}
.arena-row.act{border-color:var(--volt-line);background:var(--volt-soft)}
.ar-main{flex:1;text-align:left;padding:12px 12px;background:none;border:0}
.ar-nm{font-weight:800;font-size:16px}
.ar-sub{font-size:11px;color:var(--muted-2);margin-top:2px;letter-spacing:.03em}
.ar-leave{width:38px;height:38px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);font-size:15px}
.arena-add{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.arena-add input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:12px 16px;font-size:15px;font-weight:700;color:var(--text);outline:none}
.arena-add .row{display:flex;gap:8px}.arena-add .row input{flex:1}
/* Arena title-as-changer (Scott: "feel really good"): the arena name IS the h1, and the whole thing is
one tap target that opens the switcher. The chevron rides in a circular chip that lifts + spins a touch
on press; the title springs down. Big, satisfying, obviously-tappable. */
/* .ah-l shrinks (min-width:0/flex:1) so the title ellipsizes instead of shoving .ah-r off the page;
.ah-r is fixed-width and never yields. Tested: an 18-char all-caps "WWW…" name truncates and the
Invite/refresh buttons stay put at every width. */
.vhead .ah-l{flex:1;min-width:0}
.vhead .ah-r{flex:none;display:flex;gap:8px}
.arena-title{display:flex;align-items:center;gap:9px;width:100%;padding:2px 0;transition:transform .12s var(--spring)}
.arena-title:active{transform:scale(.97)}
.arena-title .at-nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:27px;font-weight:900;letter-spacing:-.03em;color:var(--text);line-height:1.05}
.arena-title .at-chev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--volt);transition:transform .18s var(--spring),background .15s,border-color .15s}
.arena-title .at-chev svg{width:16px;height:16px;display:block}
.arena-title:active .at-chev{background:rgba(200,255,28,.14);border-color:rgba(200,255,28,.35);transform:rotate(-180deg)}
.arena-tlist{display:flex;flex-direction:column;gap:8px}
.arena-row-t{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.arena-row-t.act{border-color:var(--volt-line);background:var(--volt-soft)}
.arena-row-t .art-main{flex:1;min-width:0}
.arena-row-t .art-nm{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-row-t .art-sub{font-size:11px;color:var(--muted-2);margin-top:2px;letter-spacing:.03em}
.arena-row-t .art-go{font-size:24px;color:var(--volt);font-weight:800;line-height:1}
/* per-arena daily standing pill — leading (volt) / behind (red) / not started (muted) */
.arena-row-t .art-stand{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:900;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.art-stand.lead{color:var(--volt);background:var(--volt-soft);border:1px solid var(--volt-line)}
.art-stand.behind{color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-line)}
.art-stand.idle{color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
.rename-line{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.rename-mini{flex:none;width:30px;height:30px;border-radius:9px;background:var(--volt-soft);border:1px solid var(--volt-line);color:var(--volt);font-size:14px}
.rename-hint{font-size:11px;font-weight:800;color:var(--volt);line-height:1.25}
.rename-row{display:flex;gap:8px;margin:4px 0 4px}
.rename-row input{flex:1;background:var(--surface);border:1px solid var(--volt-line);border-radius:14px;padding:12px 14px;font-size:15px;font-weight:700;color:var(--text);outline:none}
.addarena{width:100%;margin-top:12px}
.lrow{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 16px;flex-shrink:0}
.lrow.cur{border-color:var(--volt-line)}
.lrow .li{flex:1;min-width:0}
.lrow .ln{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .ln .rn{color:var(--volt);font-size:10.5px;letter-spacing:.06em;font-weight:900}
.lrow .ld{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600}
.lrow .lr{font-size:13px;font-weight:900;color:var(--muted);flex-shrink:0}
#cmodal{position:fixed;inset:0;background:rgba(3,3,4,.97);z-index:71;display:none;align-items:center;justify-content:center;flex-direction:column;padding:calc(30px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom));text-align:center}
#cmodal.on{display:flex;animation:fadein .3s ease}
.cm-belt{width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:54px;background:color-mix(in srgb,var(--tc) 14%,transparent);border:2px solid var(--tc);box-shadow:0 0 70px color-mix(in srgb,var(--tc) 45%,transparent);animation:popIn .6s var(--spring);position:relative}
#cmodal.loss{background:rgba(10,3,5,.98)}
#cmodal.loss .cm-belt{filter:grayscale(.75) brightness(.8);box-shadow:none;border-color:var(--line-2);animation:none}
.cm-belt.emb{background:none;overflow:hidden;padding:0}
.cm-belt.emb img{width:100%;height:100%;display:block;border-radius:50%}
#cmodal.loss .tm-name{color:#E8E3E4}
.cm-reignin{margin-top:22px;display:none;width:min(280px,80vw)}
.cm-reignin input{width:100%;background:var(--surface);border:1px solid var(--tc);border-radius:14px;padding:14px;font-size:15px;font-weight:900;letter-spacing:.1em;text-align:center;color:var(--text);outline:none;text-transform:uppercase}
.cm-reignin .hint{font-size:10px;color:var(--muted-2);letter-spacing:.12em;font-weight:800;margin-top:8px;text-transform:uppercase}
.reset-chip.atrisk{border-color:rgba(255,77,94,.55);background:rgba(255,77,94,.07)}
.reset-chip.atrisk .t{color:var(--danger)}
.reset-chip .risk{display:none;font-size:9.5px;font-weight:900;letter-spacing:.1em;color:var(--danger);margin-top:3px;text-transform:uppercase}
.reset-chip.atrisk .risk{display:block}
/* trophy medallions — custom tier frames */
.ttile.un .tic{position:relative;background:radial-gradient(58% 58% at 50% 30%,color-mix(in srgb,var(--tc) 32%,transparent),color-mix(in srgb,var(--tc) 8%,transparent) 75%)}
.ttile.un .tic::before{content:'';position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
background:conic-gradient(from 210deg,var(--tc),transparent 40%,color-mix(in srgb,var(--tc) 55%,transparent) 62%,var(--tc));
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
/* DS medallion mode brings its own metal ring + glow → suppress the emoji-frame conic chrome */
.ttile.un .tic.med{background:none}
.ttile .tic.med::before,.tm-ic.med::before{display:none}
.tm-ic.med{background:none;border:none;box-shadow:none}
.tm-ic.med img{width:84%;height:84%;object-fit:contain;display:block}
.tm-ic{position:relative}
.tm-ic::before{content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
background:conic-gradient(from 210deg,var(--tc),transparent 40%,color-mix(in srgb,var(--tc) 55%,transparent) 62%,var(--tc));
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.ttile.mys .tic{background:var(--surface-2);border:1.5px dashed var(--line-2);color:var(--muted-2)}
.ttile.mys .tnm{color:var(--muted-2)}
.vault-h{display:flex;align-items:center;gap:8px}
.vault-h .vh-line{flex:1;height:1px;background:linear-gradient(90deg,var(--volt-line),transparent)}
/* ---------- tab bar ---------- */
#tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tabh);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(8,8,9,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:30}
#tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted-2);transition:color .2s}
#tabbar button svg{width:23px;height:23px}
#tabbar button .tl{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#tabbar button.sel{color:var(--volt)}
#tabbar button .badge{position:absolute;display:none}
/* ---------- bottom sheet (log) ---------- */
#shade{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
#shade.on{opacity:1;pointer-events:auto}
#sheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:41}
#sheet.on{transform:none}
/* drag handle: thin bar, but a tall invisible hit-area (content-box padding) so it's easy to grab.
touch-action:none lets the swipe own the gesture instead of the browser starting a scroll. */
.grab{width:40px;height:4.5px;border-radius:99px;background:var(--line-2);margin:4px auto 9px;padding:9px 22px;box-sizing:content-box;background-clip:content-box;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.grab:active{cursor:grabbing}
.sheet-num{display:flex;align-items:center;justify-content:center;gap:24px;margin:8px 0 4px}
.sheet-num .v{font-size:92px;font-weight:900;letter-spacing:-.05em;flex:1;min-width:0;text-align:center}
/* hold-and-drag rep entry: the number itself is a vertical slider (drag up=more, down=fewer) */
.drag-rep{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;transition:color .12s,transform .12s}
.sheet-num .v.drag-rep{position:relative}
.sheet-num .v.drag-rep::after{content:"";position:absolute;left:50%;bottom:6px;width:34px;height:3px;border-radius:3px;transform:translateX(-50%);background:var(--line-2)}
.drag-rep.dragging{color:var(--volt)}
.sheet-num .v.drag-rep.dragging{transform:scale(1.04)}
.sheet-num .v.drag-rep.dragging::after{background:var(--volt-line)}
.drag-rep:focus-visible{color:var(--volt)}
.drag-hint{opacity:.85}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 20px}
.chips button{padding:11px 16px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);font-size:14px;font-weight:800}
.chips button:active{background:var(--volt-soft);border-color:var(--volt-line)}
/* scoring: secondary exercises + live stack meter */
.more-row{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-weight:800;font-size:14px}
.more-arrow{transition:transform .2s}
.ministep{display:flex;justify-content:space-between;align-items:center;margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 14px}
.ms-lbl{font-weight:800;font-size:15px}
.ms-w{color:var(--muted-2);font-size:10px;font-weight:700;margin-left:5px;letter-spacing:.04em;text-transform:uppercase}
.ms-ctrl{display:flex;align-items:center;gap:14px}
.ms-ctrl .num{min-width:32px;text-align:center;font-size:18px;font-weight:800}
.stepbtn.sm{width:36px;height:36px;font-size:20px}
.stack{margin:16px 0 6px}
.stack-bar{height:12px;border-radius:7px;overflow:hidden;display:flex;background:var(--surface-2);border:1px solid var(--line-2)}
.stack-bar i{height:100%;display:block;transition:width .25s var(--spring)}
.seg-pu{background:var(--volt)} .seg-pl{background:#4DA3FF} .seg-si{background:#FF9F1C}
.stack-read{text-align:center;margin-top:9px;font-weight:800;font-size:14px;color:var(--muted)}
.stack-read .sc{color:var(--volt);font-size:16px}
.todaybreak{text-align:center;font-size:12px;color:var(--muted);font-weight:700;margin:6px 0 2px;letter-spacing:.03em}
/* ---------- trophy unlock modal ---------- */
#tmodal{position:fixed;inset:0;background:rgba(3,3,4,.96);z-index:70;display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}
#tmodal.on{display:flex;animation:fadein .3s ease}
.tm-ic{width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:56px;background:color-mix(in srgb,var(--tc) 14%, transparent);border:2px solid var(--tc);box-shadow:0 0 70px color-mix(in srgb,var(--tc) 45%, transparent);animation:popIn .6s var(--spring)}
@keyframes popIn{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.tm-tier{margin-top:24px;font-size:11px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--tc)}
.tm-name{margin-top:10px;font-size:34px;font-weight:900;letter-spacing:-.03em}
.tm-desc{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.5;max-width:280px}
.tm-claim{margin-top:34px;min-width:220px}
.tm-count{position:absolute;top:calc(24px + env(safe-area-inset-top));font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--muted)}
/* Legendary taunt reveal — trophy-style scale-up, then confirm to throw */
#legmodal{position:fixed;inset:0;background:rgba(3,3,4,.96);z-index:72;display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}
#legmodal.on{display:flex;animation:fadein .3s ease}
#legmodal{--lc:#FFD34D}
#legmodal .tm-count{color:var(--lc)}
.leg-ic{width:142px;height:142px;border-radius:30px;overflow:hidden;border:2px solid var(--lc);box-shadow:0 0 72px color-mix(in srgb,var(--lc) 42%,transparent);animation:popIn .6s var(--spring)}
.leg-ic img{width:100%;height:100%;display:block}
.leg-tier{margin-top:24px;font-size:11px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--lc)}
.leg-line{margin-top:10px;font-size:23px;font-weight:900;letter-spacing:-.02em;line-height:1.28;max-width:320px;color:var(--text)}
.leg-to{margin-top:12px;font-size:13.5px;color:var(--muted);font-weight:600}
.leg-throw-btn{margin-top:30px;min-width:240px;background:var(--lc);color:#0e0b02}
/* auto-generated share card — brag button on win/trophy modals */
.share-btn{margin-top:14px;display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-size:13px;font-weight:800;letter-spacing:.05em;transition:transform .12s var(--spring)}
.share-btn:active{transform:scale(.95)}
.share-btn svg{width:17px;height:17px}
/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 16px);transform:translate(-50%,30px);background:#16161B;border:1px solid var(--line-2);border-radius:16px;padding:12px 18px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:14px;opacity:0;pointer-events:none;transition:all .3s var(--spring);z-index:50;max-width:calc(100vw - 28px);white-space:normal;overflow-wrap:anywhere;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast-msg{min-width:0}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast .undo{color:var(--volt);letter-spacing:.1em;font-size:12px;text-transform:uppercase}
#fx{position:fixed;inset:0;pointer-events:none;z-index:80}
.spin{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.ring-shock{display:none}}
@media (min-width:520px){ #ob,#app,#sheet,#lsheet,#tsheet,#toast{max-width:430px;left:50%;transform:translateX(-50%)} #sheet,#lsheet,#tsheet{transform:translate(-50%,110%)} #sheet.on,#lsheet.on,#tsheet.on{transform:translate(-50%,0)} #toast{transform:translate(-50%,30px)} #toast.on{transform:translate(-50%,0)} body{background:#000} }
/* ===== v11: public/private arenas + one-time invites ===== */
.vis-toggle{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:4px}
.vis-toggle button{flex:1;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:800;padding:9px 6px;border-radius:11px;transition:.2s}
.vis-toggle button.sel{background:var(--volt-soft);color:var(--volt);box-shadow:inset 0 0 0 1px var(--volt-line)}
.vis-help{font-size:11.5px;color:var(--muted-2);text-align:center;font-weight:700}
.arena-vis-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px}
.vis-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.02em}
.vis-chip.pub{background:var(--volt-soft);color:var(--volt);box-shadow:inset 0 0 0 1px var(--volt-line)}
.vis-chip.priv{background:rgba(255,159,28,.12);color:#FF9F1C;box-shadow:inset 0 0 0 1px rgba(255,159,28,.35)}
.vis-flip{background:transparent;border:0;color:var(--muted);font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.arena-invite-foot{display:flex;justify-content:center;margin-top:10px}
.vis-locked{font-size:12px;font-weight:800;color:var(--muted-2)}
/* invite sheet */
#isheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 24px calc(26px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:73;display:flex;flex-direction:column}
#isheet.on{transform:none}
.iv-code{text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:30px;font-weight:900;letter-spacing:.1em;color:var(--volt);background:var(--volt-soft);border:1px dashed var(--volt-line);border-radius:18px;padding:18px 10px;margin:2px 0 10px;user-select:all;-webkit-user-select:all}
.iv-note{text-align:center;font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.iv-actions{display:flex;gap:10px}
.iv-actions .btn{flex:1}
@media (min-width:520px){ #isheet{max-width:430px;left:50%;transform:translate(-50%,110%)} #isheet.on{transform:translate(-50%,0)} }
/* ===== v12: wumps ===== */
/* one slot per name: greyed = available to wump (tap to drop) · lit = carrying one */
.wump-slot{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:none;border:1px solid var(--line-2);padding:0;display:flex;align-items:center;justify-content:center;opacity:.42;cursor:pointer;transition:opacity .15s,border-color .15s,background .2s,box-shadow .25s;margin-left:4px}
.wump-slot:hover,.wump-slot:active{opacity:1;border-color:rgba(201,163,107,.6)}
.wump-slot.lit{opacity:1;border-color:rgba(201,163,107,.7);background:radial-gradient(circle at 50% 38%,rgba(201,163,107,.3),rgba(201,163,107,.07));box-shadow:0 0 10px rgba(201,163,107,.32);animation:wmPulse 2.2s ease-in-out infinite}
.wump-slot.lit .wmico{filter:drop-shadow(0 0 3px rgba(201,163,107,.85))}
.wump-slot.ro{cursor:default}
@keyframes wmPulse{0%,100%{box-shadow:0 0 8px rgba(201,163,107,.26)}50%{box-shadow:0 0 14px rgba(201,163,107,.5)}}
/* store card (every tab) */
.wm-store{margin-top:16px;background:linear-gradient(180deg,rgba(201,163,107,.07),rgba(201,163,107,.02));border:1px solid rgba(201,163,107,.28);border-radius:18px;padding:14px 15px}
.wm-store-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wm-store-t{font-weight:900;font-size:15px;letter-spacing:.01em}
.wm-bal-chip{font-size:12px;color:var(--muted);font-weight:700}.wm-bal-chip b{color:#E8D6B8}
.wm-debuff{background:rgba(255,159,28,.12);color:#FF9F1C;border:1px solid rgba(255,159,28,.35);border-radius:12px;padding:8px 10px;font-size:12px;font-weight:800;text-align:center;margin-bottom:10px}
.wm-bundles{display:flex;gap:9px;margin-top:10px}
.wm-bundle{flex:1;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:11px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.65;cursor:not-allowed}
.wmb-n{font-weight:900;font-size:13px;color:var(--text)}
.wmb-p{font-size:12px;color:#E8D6B8;font-weight:800}
.wmb-soon{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-weight:800;margin-top:2px}
.wm-hint{margin-top:11px;font-size:11px;color:var(--muted-2);line-height:1.5;text-align:center}
.wm-pen{color:#FF9F1C;font-weight:900;font-size:12px;margin-left:6px}
/* the takeover */
#wmmodal{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 30%,rgba(40,28,12,.98),rgba(4,3,2,.99));z-index:74;display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}
#wmmodal.on{display:flex;animation:fadein .25s ease}
.wm-bag{font-size:96px;line-height:1;animation:sbDrop .6s cubic-bezier(.5,1.6,.5,1);filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
@keyframes sbDrop{0%{transform:translateY(-120vh) rotate(-12deg)}70%{transform:translateY(8px) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}
.wm-kicker{margin-top:14px;font-size:13px;font-weight:900;letter-spacing:.34em;color:#C9A36B;text-transform:uppercase}
.wm-bigt{margin-top:6px;font-size:clamp(34px,11vw,52px);font-weight:900;line-height:.98;letter-spacing:-.01em;color:#F4E4C6;text-shadow:0 4px 26px rgba(201,163,107,.45)}
.wm-by{margin-top:14px;font-size:18px;font-weight:800;color:var(--text)}
.wm-modal-sub{margin-top:8px;font-size:13px;font-weight:800;color:#FF9F1C;letter-spacing:.01em}
.wm-ok{margin-top:30px;background:#C9A36B;color:#1A1206;border:0;min-width:200px}
/* wump SVG icon sizing */
.wmico{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.wm-store-t .wmico{width:18px;height:18px;vertical-align:-4px}
.wump-slot .wmico{width:18px;height:18px;vertical-align:0}
.wm-bag img,.wm-bag svg{width:104px;height:104px;display:block}
/* ---- shield + rest-day items: cool / warm variants of the tan wump card ---- */
.wm-store.shield{background:linear-gradient(180deg,rgba(125,211,255,.07),rgba(125,211,255,.02));border-color:rgba(125,211,255,.28)}
.wm-store.shield .wm-bal-chip b{color:#BFEAFF}
.wm-store.rest{background:linear-gradient(180deg,rgba(255,211,77,.07),rgba(255,211,77,.02));border-color:rgba(255,211,77,.26)}
.wm-store.rest .wm-bal-chip b{color:#FFE08A}
.wm-debuff.shld{background:rgba(125,211,255,.12);color:#7DD3FF;border-color:rgba(125,211,255,.4)}
.wm-shield-go{margin-top:2px;background:#7DD3FF;color:#06222E;border:0}
.wm-shield-go[disabled]{opacity:.5;cursor:default}
.wump-slot.shld{opacity:1;border-color:rgba(125,211,255,.7);background:radial-gradient(circle at 50% 38%,rgba(125,211,255,.3),rgba(125,211,255,.07));box-shadow:0 0 10px rgba(125,211,255,.32);animation:wmPulse 2.2s ease-in-out infinite}
.wump-slot.shld .wmico{filter:drop-shadow(0 0 3px rgba(125,211,255,.85))}
.um-wstat.shld{color:#9FE3FF}
.shico,.rdico{vertical-align:-3px}
/* branded exercise / effort icons (replace 💪🆙🪑📊) */
.exico{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.exchip .exico{width:15px;height:15px;vertical-align:-2px;margin-right:1px}
.trend-seg.metric .exico{width:14px;height:14px;vertical-align:-2px}
.todaybreak .exico{width:14px;height:14px;vertical-align:-2px}
.ms-lbl .exico{width:18px;height:18px;vertical-align:-4px;margin-right:2px}
/* ---- Store hub: now its own nav TAB (view-store). A standard .vhead header (title + coin balance chip)
above the seg3 tab bar + tab body. Arsenal's tab body is the unchanged .wm-store cards; Style/Coins new. ---- */
.coin-chip{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px 8px 10px;font-size:15px;font-weight:900}
.store-soon{margin-top:8px}
/* Scott: the Store's short sub-tabs (coins/style) crammed their content at the top with a big empty gap
below ("footer sits too high"). Pin the header + seg at top, let the tab body FILL the rest and
vertically center SHORT content; long content (arsenal) safe-starts + scrolls (safe = no clipped top). */
/* display is set ONLY on .on — the base #view-store must NOT set display, or its ID specificity (1,0,0)
beats .view{display:none} and the store view renders stacked over every other tab (prod incident). */
#view-store{flex-direction:column}
#view-store.on{display:flex}
/* No internal scroller here: the .view is the ONE scroller (ends at the tabbar like every other view).
TOP-ALIGNED (Scott: "remove the dead space in the style area, load with all accordions closed"). The
old vertical-centering floated a short/collapsed stack in the middle of the page — dead space above and
below. flex-start pins content to the top: collapsed Style = a tight stack of headers, Coins = a list
from the top, Arsenal grows + scrolls (the .view is the scroller). */
.store-tabbody{flex:1;display:flex;flex-direction:column;justify-content:flex-start}
/* Coins tab (Scott #7 redo — the old 3-across mini-cards left a huge dead gap). Now a titled, top-aligned
VERTICAL LIST: one generous full-width row per tier (pack art · amount fills the middle · $ price pill).
The hero art stays gone (assets/coins/coin-hero.svg unused, left in place). */
.coin-tab{margin-top:16px}
.coin-tab-h{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.coin-tiers{display:flex;flex-direction:column;gap:10px}
.coin-tier{width:100%;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;transition:transform .12s var(--spring),border-color .15s}
.coin-tier:active{transform:scale(.985)}
.coin-tier .ct-pack{width:46px;height:46px;flex:none}
.coin-tier .ct-amt{flex:1;display:flex;align-items:center;gap:7px;font-size:19px;font-weight:900;color:var(--text)}
.coin-tier .ct-amt svg{width:19px;height:19px}
.coin-tier .ct-price{flex:none;font-size:14px;font-weight:900;color:var(--text);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px}
.coin-restore{margin-top:16px}
/* ---- Purchase-confirm sheet (Scott #4): a small slide-up over #shade for EVERY coin spend. Same shell
as #yousheet; #shade tap or Cancel dismisses. 320px-safe (two flex buttons, wrap-safe question). ---- */
#buymodal{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:76;display:flex;flex-direction:column;text-align:center}
#buymodal.on{transform:none}
@media (min-width:520px){ #buymodal{max-width:430px;left:50%;transform:translate(-50%,110%)} #buymodal.on{transform:translate(-50%,0)} }
#buymodal .grab{width:38px;height:5px;border-radius:3px;background:var(--line-2);margin:2px auto 12px}
.bm-ic{display:flex;align-items:center;justify-content:center;margin-bottom:4px;min-height:0}
.bm-ic .bm-ic-img{width:52px;height:52px;display:block}
.bm-q{font-size:20px;font-weight:900;letter-spacing:-.01em;line-height:1.25;margin:8px 0 6px}
.bm-q .num{color:var(--text)} /* a spend-price is NOT a win — volt is reserved for the coin glyph + the Confirm CTA */
.bm-sub{display:block;font-size:11.5px;font-weight:700;color:var(--muted-2);letter-spacing:.01em;line-height:1.45;margin-top:9px} /* the bounty "no refunds, rolls over" commitment note */
.bm-bal{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:18px}
.bm-bal .num{color:var(--text)}
.bm-actions{display:flex;gap:10px}
.bm-actions .btn{flex:1;margin:0}
/* ---- "You" chooser sheet: slide-up with two big option cards (Profile / Trophy Room), each opening
its full tab page. Same bottom-sheet shell as #asheet; option cards echo the store-btn affordance. ---- */
#yousheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:73;display:flex;flex-direction:column}
#yousheet.on{transform:none}
@media (min-width:520px){ #yousheet{max-width:430px;left:50%;transform:translate(-50%,110%)} #yousheet.on{transform:translate(-50%,0)} }
.you-menu{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.you-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:15px 16px;transition:transform .12s var(--spring),border-color .15s,background .2s}
.you-opt:active{transform:scale(.98)}
.you-opt:hover{border-color:rgba(255,255,255,.2)}
.you-opt .yo-ic{flex:none;width:44px;height:44px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--line-2);color:var(--volt)}
.you-opt .yo-ic svg{width:23px;height:23px;display:block}
.you-opt .yo-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.you-opt .yo-t{font-size:16px;font-weight:900;letter-spacing:-.01em;color:var(--text)}
/* one line each (nowrap+ellipsis) so both cards are always the same height, even at 320px */
.you-opt .yo-s{font-size:12px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-opt .yo-go{flex:none;font-size:22px;font-weight:400;color:var(--muted-2);line-height:1}
/* ---- Daily Rumble sheet (v20 Wave 0): free daily roll for coins + rare drops ---- */
#rumblesheet{position:fixed;left:0;right:0;bottom:0;background:#0B0B0E;border:1px solid var(--line-2);border-bottom:0;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s var(--spring);z-index:73;max-height:80vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#rumblesheet.on{transform:none}
@media (min-width:520px){ #rumblesheet{max-width:430px;left:50%;transform:translate(-50%,110%)} #rumblesheet.on{transform:translate(-50%,0)} }
.rumble-dice{font-size:44px;line-height:82px;width:96px;height:96px;margin:16px auto 20px;text-align:center;border-radius:50%;background:radial-gradient(60% 60% at 50% 40%,var(--surface-2),var(--surface));border:1px solid var(--line-2);box-shadow:0 0 0 6px rgba(200,255,28,.05),0 8px 26px rgba(0,0,0,.5);position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
/* Scott #3: retuned to match actions.doRumbleRoll's decelerating tumble (data.RUMBLE_FRAME_DELAYS +
RUMBLE_SETTLE_MS ≈ 1.14s, frame-swap start to reveal) instead of the old flat .65s — the wobble
amplitude now tapers keyframe-to-keyframe (transform/scale only, no opacity) so the container visibly
"settles" right as the reveal pops in, instead of the old animation stopping cold mid-roll. */
.rumble-dice.rolling{animation:diceTumble 1.15s ease-out}
@keyframes diceTumble{0%{transform:rotate(0) scale(1)}10%{transform:rotate(-22deg) scale(1.1)}22%{transform:rotate(18deg) scale(.92)}36%{transform:rotate(-14deg) scale(1.06)}52%{transform:rotate(9deg) scale(.97)}70%{transform:rotate(-5deg) scale(1.03)}86%{transform:rotate(2deg) scale(.99)}100%{transform:rotate(0) scale(1)}}
/* Wave A: whatever's currently inside the die slot — a tumble-frame ![]()
or a landed outcome