/* Word Cop. Dark-first "mid-century game show poster": flat chunky shapes,
   3px offset hard shadows, Archivo Black headlines, Inter for everything else.
   Buzzer Red is reserved for the buzzer and penalty states. */

@font-face{font-family:"Archivo Black";src:url(../fonts/archivo-black.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format("woff2");font-weight:700 900;font-display:swap}

:root{
  --ink:#14110F; --yel:#FFD400; --red:#FF3B30; --cream:#FFF8E7; --teal:#2EC4B6; --grape:#9B5DE5; --green:#43AA8B;
  --bg:#14110F; --bg2:#1C1815; --card:#221D19; --fg:#FFF8E7; --dim:#BDB3A0; --line:#3B342D; --edge:#000;
  --shadow:3px 3px 0 var(--edge);
  --head:"Archivo Black", Impact, "Arial Black", sans-serif;
  --body:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --scale:1; --r:14px;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#FFF8E7; --bg2:#F5EAD2; --card:#FFFFFF; --fg:#14110F; --dim:#5C5248; --line:#14110F; --edge:#14110F;
  color-scheme:light;
}
.hc{ --dim:var(--fg); --line:var(--fg); }

*{box-sizing:border-box}
html{font-size:calc(16px * var(--scale));-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:500 1rem/1.45 var(--body);min-height:100dvh;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
svg{width:1.25em;height:1.25em;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.boot{display:grid;place-items:center;min-height:100dvh;font:2.5rem var(--head);color:var(--yel)}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
[data-theme="light"] :focus-visible{outline-color:var(--ink)}

.screen{position:relative;min-height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.page{max-width:560px;margin:0 auto;padding:12px 16px 40px;display:flex;flex-direction:column;gap:12px}
.h1{font:normal 2rem/1.05 var(--head);text-transform:uppercase;letter-spacing:-.01em;margin:0}
.h2{font:normal 1.35rem/1.1 var(--head);text-transform:uppercase;letter-spacing:-.01em;margin:0}
.h3{font:700 1.05rem/1.2 var(--body);margin:10px 0 0}
.eyebrow{font:700 .75rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dim{color:var(--dim)} .small{font-size:.875rem} .center{text-align:center}
p{margin:0}
.warn{background:var(--yel);color:var(--ink);border:3px solid var(--edge);border-radius:10px;padding:10px 12px;font-weight:700}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:10px 18px;width:100%;
  border:3px solid var(--edge);border-radius:var(--r);background:var(--card);color:var(--fg);box-shadow:var(--shadow);
  font:normal 1.05rem/1.1 var(--head);text-transform:uppercase;letter-spacing:.01em;text-decoration:none;text-align:center;
  transition:transform .06s, box-shadow .06s;touch-action:manipulation}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--edge)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--yel);color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none;font:700 1rem/1.2 var(--body);text-transform:none}
[data-theme="dark"] .btn.ghost{border-color:#4A4239}
.btn.big{min-height:72px;font-size:1.25rem}
.btn.small{min-height:48px;padding:6px 14px;width:auto;font-size:.9rem}
.btn.got{background:var(--green);color:var(--ink);min-height:76px;font-size:1.6rem}
.btn.got svg{width:1.4em;height:1.4em}
.icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;border:2px solid transparent;background:transparent;flex:none}
.icon:disabled{opacity:.3}
.icon:active{background:var(--bg2)}
.icon-spacer{width:48px}
.link{background:none;border:0;padding:6px 0;color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.card{background:var(--card);border:3px solid var(--edge);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
[data-theme="dark"] .card{border-color:#000}
.card.note{box-shadow:none;border-color:var(--line)}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 8px;background:var(--bg);
  max-width:560px;margin:0 auto}
.top .h2{flex:1;text-align:center}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{flex:1 1 auto;min-height:52px;padding:8px 12px;border-radius:12px;border:3px solid var(--line);background:transparent;font-weight:700}
.seg button.on{background:var(--yel);color:var(--ink);border-color:var(--edge);box-shadow:var(--shadow)}

.switch{width:64px;height:40px;border-radius:20px;border:3px solid var(--edge);background:var(--bg2);position:relative;flex:none;padding:0}
.switch i{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--dim);transition:left .15s}
.switch[aria-checked="true"]{background:var(--yel)}
.switch[aria-checked="true"] i{left:28px;background:var(--ink)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.set-row>div,.set-col{display:flex;flex-direction:column;gap:6px}

/* Mascot and brand */
.mascot{display:block;width:120px;height:auto}
.mascot.mini{width:64px}
.wordmark{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--head);color:var(--yel);line-height:.86;
  text-shadow:4px 4px 0 var(--edge);letter-spacing:-.01em}
.wordmark.big{font-size:4.2rem}
[data-theme="light"] .wordmark{color:var(--ink);text-shadow:4px 4px 0 var(--yel)}
.tag{margin-top:6px;font-weight:700;color:var(--dim)}

/* Home */
.s-home{overflow:hidden}
.marquee{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.marquee span{position:absolute;left:0;top:var(--y);font:calc(1.6rem * var(--z))/1 var(--head);color:var(--fg);opacity:.06;white-space:nowrap;
  animation:drift 400s linear infinite;animation-delay:var(--d)}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(1400px)}}  /* 1600px / 400s = 4px/s */
.home{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:24px 16px 32px;display:flex;flex-direction:column;gap:14px;min-height:100dvh;justify-content:center}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:6px}
.home-mascot{width:108px;margin-bottom:-4px}
.btn.play{min-height:88px;font-size:2rem}
.daily-card{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
.dc-text{display:flex;flex-direction:column;gap:3px}
.daily-card .week{grid-column:1/2;display:flex;gap:6px}
.daily-card .btn{grid-row:1/3;grid-column:2}
.week i{width:18px;height:18px;border-radius:5px;border:2px solid var(--line)}
.week i.on{background:var(--yel);border-color:var(--edge)}
.week i.today{outline:2px solid var(--fg);outline-offset:1px}
.home-nav{display:grid;grid-template-columns:1fr;gap:10px}

/* Onboarding */
.ob{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:16px 16px 24px;gap:14px}
.ob .skip{align-self:flex-end}
.ob-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ob-track::-webkit-scrollbar{display:none}
.ob-card{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:0 8px}
.ob-card p{font-size:1.15rem;max-width:26ch}
.ob-art{height:200px;display:grid;place-items:center}
.ob-art .mascot{width:160px}
.bubbles{display:flex;flex-direction:column;gap:10px;align-items:center}
.bubbles span{font:2rem var(--head);background:var(--cream);color:var(--ink);border:3px solid var(--edge);box-shadow:var(--shadow);border-radius:18px;padding:6px 18px}
.bubbles span:nth-child(2){transform:rotate(-4deg)} .bubbles span:nth-child(3){transform:rotate(3deg)}
.mini-buzzer span{display:block;width:170px;height:170px;border-radius:50%;background:var(--red);border:4px solid var(--edge);box-shadow:6px 6px 0 var(--edge)}
.dots{display:flex;justify-content:center;gap:8px;margin-bottom:10px}
.dots span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dots span.on{background:var(--yel);width:26px;border-radius:6px}

/* How to play */
.show{font-weight:700}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rules li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:3px solid var(--edge);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}
.rules .num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--yel);color:var(--ink);display:grid;place-items:center;font:1.1rem var(--head);border:3px solid var(--edge)}
.rules p{font-size:1.05rem}
.practice{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center}
.practice .btn{grid-column:1/-1}
.notes{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* Players */
.teams{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){ .page.players{max-width:860px} .teams{grid-template-columns:1fr 1fr} }
.team-col{border:3px solid var(--line);border-radius:var(--r);padding:10px;border-left-width:10px;transition:background .1s}
.team-col.team-a{border-left-color:var(--teal)} .team-col.team-b{border-left-color:var(--grape)}
.team-col.drop{background:var(--bg2)}
.team-col h2{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:2px solid var(--edge)}
.team-a .swatch,.swatch.team-a{background:var(--teal)} .team-b .swatch,.swatch.team-b{background:var(--grape)}
.plist-edit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:40px}
.prow{display:flex;align-items:center;gap:4px;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:4px}
.prow.dragging{opacity:.35}
.drag-ghost{position:fixed;z-index:50;pointer-events:none;box-shadow:6px 6px 0 var(--edge);transform:rotate(-2deg)}
.grip{display:grid;place-items:center;width:40px;height:52px;touch-action:none;cursor:grab;color:var(--dim)}
.grip .fat path{stroke-width:4}
.name{flex:1;min-width:0;height:52px;border:0;background:transparent;padding:0 6px;font-weight:700;font-size:1.1rem}
.name::placeholder{color:var(--dim);font-weight:500}
.name:focus{outline:none}
.prow:focus-within{border-color:var(--yel)}
.h2h-banner{box-shadow:none}

/* Setup */
.packs{display:grid;grid-template-columns:1fr;gap:10px}
.pack{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;text-align:left;align-items:center;
  min-height:64px;padding:10px 14px;background:var(--card);border:3px solid var(--line);border-radius:var(--r)}
.pack.on{border-color:var(--edge);box-shadow:var(--shadow);outline:3px solid var(--yel);outline-offset:-6px}
.pack-name{font:700 1.1rem var(--body)}
.pack .tick,.pack .lock{grid-row:1/3;grid-column:2;display:flex;align-items:center;gap:4px;font-weight:700}
.pack .tick svg{width:1.6em;height:1.6em}
.tag18{font-style:normal;font-size:.72rem;font-weight:800;border:2px solid currentColor;border-radius:6px;padding:0 5px;vertical-align:middle}

/* Match bar and score strip (team colors live here and on handoff cards only) */
.mbar{display:flex;align-items:center;gap:6px;padding:8px 10px 0;max-width:560px;margin:0 auto}
.mbar .strip{flex:1}
.strip{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:stretch;min-width:0}
.tscore{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;border-radius:12px;border:3px solid var(--edge);min-width:0;color:var(--ink)}
.tscore span{font-weight:700;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tscore b{font:1.5rem var(--head)}
.tscore.team-a{background:var(--teal)} .tscore.team-b{background:var(--grape)}
.tscore.active{box-shadow:var(--shadow)}
.tscore:not(.active){opacity:.8}
.goal{display:grid;place-items:center;font-weight:700;font-size:.8rem;color:var(--dim);padding:0 2px;white-space:nowrap}

/* Handoff */
.handoff{justify-content:center;min-height:calc(100dvh - 70px);text-align:center}
.pass-card{border:4px solid var(--edge);border-radius:20px;padding:22px 16px;box-shadow:6px 6px 0 var(--edge);color:var(--ink);display:flex;flex-direction:column;gap:6px}
.pass-card.team-a{background:var(--teal)} .pass-card.team-b{background:var(--grape)}
.pass-card .eyebrow{color:var(--ink)}
.who{font:3rem/1 var(--head);text-transform:uppercase;overflow-wrap:anywhere}
.role{font-weight:700}
.clue-line{font-size:1.1rem}
.sd-banner{background:var(--yel);color:var(--ink);border:3px solid var(--edge);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.sd-banner b{font:1.3rem var(--head)}
.countdown{display:grid;place-items:center;height:140px}
.countdown span{font:7rem/1 var(--head);color:var(--yel);text-shadow:6px 6px 0 var(--edge);animation:pop .5s ease-out}
[data-theme="light"] .countdown span{color:var(--ink);text-shadow:6px 6px 0 var(--yel)}
@keyframes pop{0%{transform:scale(.8);opacity:.4}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}

/* Word Cop screen: upper half scrolls if needed, buzzer is always at least 45% of the screen */
.s-cop{padding:0}
.cop{display:flex;flex-direction:column;height:100dvh;max-width:600px;margin:0 auto;overflow:hidden;position:relative}
.cop-upper{flex:1 1 auto;min-height:0;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 8px) 12px 6px;display:flex;flex-direction:column;gap:8px}
.cop-top{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}
.cop-top .strip{grid-template-columns:1fr 1fr}
.cop-top .strip .goal{display:none}
.mini-title{font-size:.9rem}
.ring{position:relative;width:64px;height:64px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .track{stroke:var(--line)}
.ring .fill{stroke:var(--yel);stroke-linecap:round}
[data-theme="light"] .ring .fill{stroke:var(--ink)}
.ring b{font:1.35rem var(--head);font-variant-numeric:tabular-nums}
.ring.hurry b{color:var(--yel);animation:throb 1s steps(1) infinite}
[data-theme="light"] .ring.hurry b{color:var(--ink)}
@keyframes throb{50%{transform:scale(1.18)}}
.mclock{text-align:center;font-weight:700;font-size:.85rem;color:var(--dim)}
.turn-meta{display:flex;justify-content:space-between;gap:10px;font-size:.95rem}
.tpts b{font-family:var(--head)}
.phrase-wrap{display:flex;flex-direction:column;gap:4px}
.phrase{background:var(--cream);color:var(--ink);border:3px solid var(--edge);border-radius:18px;box-shadow:4px 4px 0 var(--edge);
  padding:14px 16px;font:700 2.75rem/1.08 var(--body);letter-spacing:-.015em;text-align:center;overflow-wrap:anywhere;min-height:3.4em;display:grid;place-items:center}
.phrase.lg{font-size:2.375rem} .phrase.md{font-size:2.125rem}
.hc .phrase{background:#fff;color:#000;border-width:4px}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:4px;border-radius:12px;border:2px solid var(--line);background:transparent;font-size:.72rem;font-weight:700;line-height:1.1;text-align:center}
.tool:disabled{opacity:.35}
.tool:active:not(:disabled){background:var(--bg2)}
.actions{display:flex;flex-direction:column;gap:8px}
.after-buzz{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.after-buzz .btn{flex:1}
.house{font-size:.78rem;color:var(--dim);text-align:center}

.buzzer{flex:0 0 max(45dvh, 260px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:0;border-top:3px solid var(--line);background:var(--bg2);padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dome{width:min(78vw, 36dvh, 340px);aspect-ratio:1;border-radius:50%;background:var(--red);border:5px solid var(--edge);
  box-shadow:8px 8px 0 var(--edge), inset -14px -18px 0 rgba(0,0,0,.18), inset 14px 14px 0 rgba(255,255,255,.18);
  display:grid;place-items:center;transition:transform .04s, box-shadow .04s}
.buzzer.live-pulse .dome,.cop.live .dome{animation:idle 1.6s ease-in-out infinite}
@keyframes idle{50%{transform:scale(1.02)}}
.buzzer:active .dome{transform:translate(6px,6px) scale(.98);box-shadow:2px 2px 0 var(--edge), inset -10px -12px 0 rgba(0,0,0,.25);animation:none}
.buzz-label{display:flex;align-items:center;gap:6px;font:clamp(2rem, 9vw, 3.2rem)/1 var(--head);color:#fff;text-shadow:3px 3px 0 var(--edge);letter-spacing:.02em}
.buzz-label svg{width:.9em;height:.9em;stroke-width:3}
.buzz-sub{font-weight:700;font-size:.9rem;color:var(--dim)}
.buzzer.off .dome{opacity:.4;animation:none}

/* Penalty interstitial: stamp slam 150ms, 6px shake 300ms, syllable-chunk confetti 900ms */
.penalty{position:absolute;inset:0;z-index:30;background:rgba(20,17,15,.94);border:8px solid var(--red);display:grid;place-items:center;padding:16px;overflow:hidden;animation:flash .25s ease-out}
@keyframes flash{from{background:rgba(255,59,48,.85)}}
.pen-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--cream);max-width:420px;width:100%}
.pen-label{display:flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:3px solid #000;border-radius:10px;padding:6px 12px;font:1.2rem var(--head);box-shadow:3px 3px 0 #000}
.pen-phrase{position:relative;background:var(--cream);color:var(--ink);border:3px solid #000;border-radius:16px;padding:22px 14px;font:700 1.7rem/1.15 var(--body);width:100%;box-shadow:4px 4px 0 #000}
.stamp{position:absolute;left:50%;top:50%;font:3.4rem/1 var(--head);color:var(--red);border:6px solid var(--red);border-radius:12px;padding:4px 14px;
  transform:translate(-50%,-50%) rotate(-14deg);background:rgba(255,248,231,.55);animation:slam .15s ease-in both}
@keyframes slam{from{transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);opacity:0}to{transform:translate(-50%,-50%) rotate(-14deg) scale(1);opacity:1}}
.taunt{font:1.5rem/1.1 var(--head);color:var(--red);text-shadow:2px 2px 0 #000}
.pen-pts{font-weight:700}
.pen-mascot{width:96px;position:absolute;right:-6px;bottom:-18px;transform:rotate(8deg)}
.penalty .btn.ghost{color:var(--cream);border-color:var(--cream)}
.chunks i{position:absolute;top:-40px;left:var(--x);font:normal 1.1rem var(--head);background:var(--yel);color:var(--ink);border:2px solid #000;border-radius:5px;padding:1px 5px;
  animation:fall .9s cubic-bezier(.3,.2,.6,1) var(--dl) both}
@keyframes fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(calc(var(--sx) * 20px),110dvh) rotate(var(--r))}}
.shake{animation:shake .3s linear}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.penalty.static{animation:none}
.penalty.static .stamp{animation:none}

.timesup{position:absolute;inset:0;z-index:25;background:rgba(20,17,15,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--cream);text-align:center;padding:16px}
.timesup b{font:3.4rem/1 var(--head);color:var(--yel);text-shadow:5px 5px 0 #000;animation:pop .45s ease-out}
.slept{position:absolute;inset:0;z-index:28;border:0;background:rgba(20,17,15,.95);color:var(--cream);display:grid;place-items:center;padding:16px}
.slept-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.slept-card svg{width:56px;height:56px;color:var(--yel)}

.poll{position:absolute;inset:0;z-index:26;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:20px;text-align:center}
.votes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vote{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:160px;border:3px solid var(--edge);border-radius:18px;background:var(--card);box-shadow:var(--shadow);font-weight:700;justify-content:center}
.vote svg{width:52px;height:52px}
.vote b{font:2.2rem var(--head)}
.vote:active{transform:translate(3px,3px);box-shadow:none}

/* Summary */
.turn-total{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:3px solid var(--edge);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow)}
.turn-total b{font:2.4rem var(--head)}
.counts{display:flex;flex-wrap:wrap;gap:8px}
.counts span{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700}
.counts .bz{border-color:var(--red)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--card);border:2px solid var(--line)}
.plist.got svg{color:var(--green)}
.plist.buzzed li{border-color:var(--red)}
.plist.buzzed svg{color:var(--red)}
.next-line{font-size:1.1rem;text-align:center;margin-top:8px}

/* Results */
.win-card{position:relative;text-align:center;border:4px solid var(--edge);border-radius:22px;padding:18px 16px 16px;box-shadow:6px 6px 0 var(--edge);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:6px;animation:flip .5s ease-out both;transform-origin:center}
.win-card.team-a{background:var(--teal)} .win-card.team-b{background:var(--grape)} .win-card.draw{background:var(--yel)}
.win-card .eyebrow{color:var(--ink)}
.win-card .h1{font-size:2.4rem;overflow-wrap:anywhere}
@keyframes flip{from{transform:perspective(900px) rotateY(90deg)}to{transform:perspective(900px) rotateY(0)}}
.res-mascot{width:96px}
.final{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.final span{display:flex;align-items:center;gap:8px;background:var(--cream);border:3px solid var(--edge);border-radius:12px;padding:4px 12px;font-weight:700}
.final b{font:1.6rem var(--head)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{display:flex;flex-direction:column;gap:2px;background:var(--card);border:3px solid var(--edge);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}
.stat b{font:1.15rem var(--head);text-transform:uppercase;overflow-wrap:anywhere}
.stat em{font-style:normal;color:var(--dim);font-weight:700}
.teaser{display:flex;flex-direction:column;gap:8px}
.teaser .pack{grid-template-columns:1fr auto}

/* Store */
.pack-row{display:flex;flex-direction:column;gap:4px}
.pr-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pr-head .h3{margin:0}
.badge{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);border-radius:999px;padding:4px 10px;font-weight:700;white-space:nowrap}
.samples{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.complete{background:var(--yel);color:var(--ink)}
.complete .dim{color:var(--ink)}
.complete .btn.primary{background:var(--ink);color:var(--yel)}

/* Daily */
.result-card{display:flex;gap:12px;align-items:center}
.result-card.win{background:var(--yel);color:var(--ink)}
.daily .card>.btn{margin-top:10px}
.daily .card{display:flex;flex-direction:column;gap:6px}
.daily .result-card{flex-direction:row}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal i{font-style:normal;aspect-ratio:1;display:grid;place-items:center;border-radius:10px;border:2px solid var(--line);font-weight:700;font-size:.85rem;color:var(--dim)}
.cal i.on{background:var(--yel);color:var(--ink);border-color:var(--edge)}
.cal i.today{outline:3px solid var(--fg);outline-offset:1px}

.prose p{font-size:1.02rem}

/* Sheets and toasts */
.backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6)}
.sheet{position:fixed;z-index:41;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);max-height:88dvh;overflow:auto;
  background:var(--bg);border:3px solid var(--edge);border-bottom:0;border-radius:22px 22px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;animation:up .18s ease-out}
@keyframes up{from{transform:translate(-50%,40px);opacity:0}}
.remove-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.remove-list li{display:flex;align-items:center;gap:10px;padding:4px 0}
.remove-list li span:nth-child(2){flex:1;font-weight:700}
.share-img{display:block;width:min(260px,70%);aspect-ratio:9/16;margin:0 auto;border:3px solid var(--edge);border-radius:12px;background:var(--card)}
.share-img.loading{display:grid;place-items:center;color:var(--dim)}
#toast{position:fixed;z-index:60;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 32px));
  background:var(--yel);color:var(--ink);border:3px solid var(--edge);border-radius:12px;padding:12px 14px;font-weight:700;box-shadow:var(--shadow);text-align:center}
#update{position:fixed;z-index:55;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);width:min(520px,calc(100% - 32px));
  display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--card);border:3px solid var(--edge);border-radius:12px;padding:8px 8px 8px 14px;font-weight:700}

/* Reduce motion: no drifting, no slams, no shakes, no confetti, no flips */
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion: reduce){ .marquee span{animation:none} }

/* Tip jar (DEV/tip-jar.md): small and quiet, never a big button. */
.tiplink{justify-self:center;align-self:center;margin:2px auto 0;display:block;color:var(--dim);font-size:.875rem;font-weight:700;text-decoration-color:var(--line)}
.tip-support p{margin:0 0 12px}
.tipline{display:flex;align-items:center;justify-content:center;gap:4px;margin:4px 0 0;color:var(--dim)}
.tipline .link{color:var(--dim);font-size:.8125rem;font-weight:500;text-decoration-color:var(--line)}
.tipx{background:none;border:0;color:var(--dim);font:700 1.125rem/1 var(--body);min-width:44px;min-height:44px;border-radius:10px}
.tipx:active{background:var(--bg2);color:var(--fg)}
.tip-support .btn{text-transform:none}