/* It's Not Food — designed on a fixed 1920×1080 stage that is scaled to fit
   any screen, so it looks the same on a TV, a laptop or a projector. */
:root{
  --bg:#16211C;          /* deep emerald, from the main site's footer tone */
  --bg-2:#1F2E27;
  --ink:#F4F3EE;
  --ink-soft:#C9CDC6;
  --muted:#8E978F;
  --label:#F4F3EE;       /* the "product label" card */
  --label-ink:#1A1C1E;
  --pop:#E07A55;         /* terracotta */
  --gold:#F2C46B;        /* focus ring */
  --good:#5FBF8A;
  --bad:#E06A5F;
  --a1:#B5654A; --a2:#3A5A80; --a3:#6A5482; --a4:#3F6B57;
  --team1:#E07A55; --team2:#6FA3D9; --team3:#B392D6; --team4:#6CC596;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;}
button{font:inherit;color:inherit;cursor:pointer;}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  visibility:hidden;
  transform-origin:center center;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(224,122,85,.18), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(111,163,217,.12), transparent 60%),
    var(--bg);
  overflow:hidden;}

/* TV-safe area: keep content ~5% in from every edge */
.screen{position:absolute;inset:0;padding:64px 112px;display:none;flex-direction:column;}
.screen.active{display:flex;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.row{display:flex;gap:28px;align-items:center;flex-wrap:wrap;}
.h2{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:84px;margin:24px 0 40px;letter-spacing:-.01em;}
.kicker{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:44px;color:var(--pop);margin:0 0 8px;}

/* ---------- buttons & focus ---------- */
.btn{border:0;border-radius:999px;padding:26px 56px;font-size:40px;font-weight:800;
  background:var(--bg-2);color:var(--ink);box-shadow:inset 0 0 0 3px rgba(244,243,238,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.btn.primary{background:var(--pop);color:#1A1C1E;box-shadow:none;}
.btn.small{font-size:30px;padding:18px 36px;}
.btn kbd{font:inherit;font-size:.7em;opacity:.6;margin-left:10px;border:2px solid currentColor;border-radius:8px;padding:0 8px;}
.btn[disabled]{opacity:.35;}
.chip{border:0;border-radius:24px;min-width:150px;padding:26px 40px;font-size:44px;font-weight:800;
  background:var(--bg-2);box-shadow:inset 0 0 0 3px rgba(244,243,238,.18);transition:transform .15s ease;}
.chip.selected{background:var(--ink);color:#1A1C1E;}
.focusable:focus{outline:none;}
.focusable.focus{transform:scale(1.07);box-shadow:0 0 0 8px var(--gold), 0 20px 50px -10px rgba(0,0,0,.6) !important;
  position:relative;z-index:2;}

/* ---------- title ---------- */
#s-title{justify-content:center;padding-bottom:110px;}
.title-wrap{max-width:1500px;}
.logo{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:230px;line-height:.9;margin:0 0 36px;letter-spacing:-.02em;}
.logo span{color:var(--pop);font-style:italic;}
.tag{font-size:48px;line-height:1.35;color:var(--ink-soft);margin:0 0 64px;}
.credit{position:absolute;left:112px;bottom:56px;margin:0;font-size:30px;color:var(--muted);}
.credit b{color:var(--ink-soft);}

/* ---------- how to / setup ---------- */
.howto{font-size:46px;line-height:1.45;margin:0 0 36px;padding-left:60px;max-width:1500px;}
.howto li{margin-bottom:14px;}
.howto b{color:var(--gold);}
.hint{font-size:32px;color:var(--muted);margin:0 0 48px;}
.setup{display:grid;grid-template-columns:auto auto;justify-content:start;gap:34px 120px;margin-bottom:40px;}
.setup .total{grid-column:1 / -1;}
.setting .label{display:block;font-size:34px;color:var(--ink-soft);margin-bottom:16px;font-weight:700;}

/* ---------- round ---------- */
.hud{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:40px;}
.turn{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:58px;white-space:nowrap;}
.scores{display:flex;gap:20px;}
.score{display:flex;align-items:center;gap:14px;font-size:34px;font-weight:800;background:var(--bg-2);
  padding:12px 26px;border-radius:999px;border:3px solid transparent;}
.score.on{border-color:currentColor;}
.score i{width:20px;height:20px;border-radius:50%;background:currentColor;display:inline-block;}
.score span{color:var(--ink);}
.progress{font-size:30px;color:var(--muted);font-weight:700;text-align:right;line-height:1.5;}
.round-body{flex:1;display:grid;grid-template-columns:1.12fr 1fr;gap:64px;min-height:0;}

.label-card{background:var(--label);color:var(--label-ink);border-radius:20px;padding:40px 48px;
  display:flex;flex-direction:column;box-shadow:0 30px 60px -25px rgba(0,0,0,.7);min-height:0;}
.label-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:8px solid var(--label-ink);
  padding-bottom:12px;margin-bottom:18px;font-weight:800;font-size:40px;letter-spacing:.04em;}
.worth{font-size:30px;letter-spacing:0;background:var(--label-ink);color:var(--label);padding:6px 18px;border-radius:999px;}
.ingredients{list-style:none;margin:0 0 24px;padding:0;flex:1;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px 14px;font-size:38px;font-weight:700;line-height:1.2;}
.ingredients li{padding:8px 0;}
.ingredients li:not(:last-child)::after{content:",";}
.ingredients li.new{animation:pop .45s ease;}
.ingredients li.hidden{color:transparent;background:repeating-linear-gradient(90deg,#D6D4CC 0 18px,#E3E1DA 18px 36px);
  border-radius:8px;padding:8px 0;user-select:none;}
.ingredients li.hidden::after{content:"";}
@keyframes pop{from{background:var(--gold);}to{background:transparent;}}
.label-card .btn{align-self:flex-start;background:var(--label-ink);color:var(--label);box-shadow:none;}

.answers{display:grid;grid-template-rows:repeat(4,1fr);gap:24px;}
.answer{display:flex;align-items:center;gap:30px;text-align:left;border:0;border-radius:24px;
  padding:20px 36px;font-size:44px;font-weight:800;line-height:1.15;color:#fff;transition:transform .15s ease;}
.answer .n{flex:none;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.25);display:grid;place-items:center;font-size:38px;}
.answer:nth-child(1){background:var(--a1);} .answer:nth-child(2){background:var(--a2);}
.answer:nth-child(3){background:var(--a3);} .answer:nth-child(4){background:var(--a4);}

/* ---------- result ---------- */
#s-result{justify-content:center;}
.verdict{font-size:56px;font-weight:800;margin:0 0 6px;}
.verdict.good{color:var(--good);} .verdict.bad{color:var(--bad);}
.r-answer{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:120px;line-height:1;margin:0 0 18px;}
.r-kind{display:inline-block;font-size:34px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 26px;border-radius:999px;margin:0 0 40px;}
.r-kind.food{background:var(--good);color:#10241A;} .r-kind.not{background:var(--bad);color:#2A0E0B;}
.spot{background:var(--bg-2);border-left:10px solid var(--gold);border-radius:16px;padding:32px 44px;margin-bottom:32px;}
.spot-tag{font-size:26px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.spot h3{font-family:"Fraunces",Georgia,serif;font-size:56px;margin:8px 0 10px;}
.spot p{font-size:40px;line-height:1.4;margin:0;color:var(--ink-soft);}

/* ---------- final ---------- */
#s-final{justify-content:center;}
.final{display:grid;grid-template-columns:1fr 520px;gap:80px;align-items:center;}
.winner{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:104px;line-height:1;margin:0 0 30px;}
.final-scores{list-style:none;padding:0;margin:0 0 56px;font-size:48px;font-weight:800;}
.final-scores li{display:flex;gap:24px;align-items:center;margin-bottom:12px;}
.final-scores i{width:28px;height:28px;border-radius:50%;background:currentColor;}
.final-scores span{color:var(--ink);}

/* ---------- modal ---------- */
.modal{position:absolute;inset:0;background:rgba(10,15,12,.8);display:grid;place-items:center;z-index:10;}
.modal[hidden]{display:none;}
.modal-box{background:var(--bg-2);padding:64px 80px;border-radius:28px;text-align:center;}
.modal-box h3{font-family:"Fraunces",Georgia,serif;font-size:72px;margin:0 0 44px;}

/* ---------- series label + book picker ---------- */
.series{font-size:40px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;}
.series.small{font-size:28px;margin:0;}
.h2.tight{margin-top:4px;}
.tag b{color:var(--ink);}
.books{display:grid;grid-template-columns:repeat(7,1fr);gap:24px;margin-bottom:40px;}
.book{border:0;background:transparent;padding:14px;border-radius:20px;display:flex;flex-direction:column;
  align-items:center;gap:18px;text-align:center;transition:transform .15s ease;}
.book img,.book .mix{width:100%;aspect-ratio:563/900;object-fit:cover;border-radius:6px 12px 12px 6px;
  box-shadow:0 24px 40px -20px rgba(0,0,0,.8);background:#fff;}
.book .mix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;padding:10px;background:var(--bg-2);overflow:hidden;}
.book .mix img{aspect-ratio:auto;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:3px;box-shadow:none;}
.book .mix span{display:grid;place-items:center;font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:40px;color:var(--gold);}
.book b{font-size:28px;line-height:1.2;font-weight:800;}
.book small{font-size:24px;color:var(--muted);font-weight:700;margin-top:-10px;}
.book.focus{background:var(--bg-2);}
.round-book{font-size:26px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}

/* ---------- result + final book links ---------- */
.result{display:grid;grid-template-columns:1fr 380px;gap:72px;align-items:center;max-width:none;}
.r-book{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;text-decoration:none;
  color:var(--muted);font-size:30px;line-height:1.35;margin:0;}
.r-book img{width:300px;aspect-ratio:563/900;object-fit:cover;background:#fff;border-radius:6px 12px 12px 6px;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.8);}
.r-book b{color:var(--ink);}

/* ---------- setup total ---------- */
.total{font-size:34px;font-weight:700;color:var(--gold);margin:0;}

/* ---------- final: dare + book promo ---------- */
.final{grid-template-columns:1fr 600px;gap:72px;}
.winner{animation:win 0.9s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes win{0%{transform:scale(.4);opacity:0;}100%{transform:none;opacity:1;}}
.final-scores{margin-bottom:32px;}
.dare{background:var(--bg-2);border:4px dashed var(--pop);border-radius:20px;padding:24px 36px;margin:0 0 40px;max-width:1000px;}
.dare[hidden]{display:none;}
.dare-tag{font-size:26px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pop);}
.dare p{font-size:40px;line-height:1.35;margin:8px 0 0;font-weight:700;}
.promo{background:var(--label);color:var(--label-ink);border-radius:28px;padding:40px 44px;text-align:center;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7);}
.promo-kicker{font-size:30px;font-weight:800;margin:0 0 20px;}
.qr-wrap{position:relative;width:400px;height:400px;margin:0 auto 22px;}
.f-qr{width:100%;height:100%;display:block;}
.qr-cover{position:absolute;left:50%;top:50%;width:78px;height:124px;transform:translate(-50%,-50%);
  object-fit:cover;border:6px solid var(--label);border-radius:6px;background:var(--label);box-sizing:content-box;}
.qr-cover.logo{width:110px;height:110px;}
.promo-title{font-size:32px;line-height:1.3;margin:0 0 22px;}
.get-book{display:inline-block;background:#3F5D4F;color:#fff;text-decoration:none;font-weight:800;font-size:30px;
  padding:16px 34px;border-radius:999px;}

/* ---------- confetti ---------- */
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20;}

/* ---------- explanation + watch list ---------- */
.r-answer{font-size:104px;margin-bottom:14px;}
.r-kind{margin-bottom:28px;}
.r-kind[hidden]{display:none;}
.watch[hidden],.statement[hidden],.help[hidden]{display:none;}
.spot{margin-bottom:24px;}
.watch{margin-bottom:28px;}
.watch ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;}
.watch li{display:flex;align-items:baseline;gap:12px;background:rgba(224,106,95,.14);border:2px solid rgba(224,106,95,.55);
  border-radius:999px;padding:8px 22px;font-size:28px;font-weight:800;}
.watch li small{font-size:22px;font-weight:700;color:#F3B3AB;letter-spacing:.02em;}
.watch li.unknown{background:rgba(242,196,107,.12);border-color:rgba(242,196,107,.55);}
.watch li.unknown small{color:var(--gold);}

/* ---------- true / false round ---------- */
.statement{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:64px;line-height:1.2;margin:0;flex:1;
  display:flex;align-items:center;}
.label-card.tf .ingredients,.label-card.tf #reveal{display:none;}
.answers.tf{grid-template-rows:repeat(2,1fr);}
.answers.tf .answer{font-size:72px;justify-content:center;}

/* tighter answer screen so the spotlight and watch list fit a TV */
#s-result .verdict{font-size:48px;}
#s-result .r-answer{font-size:92px;}
#s-result .spot{padding:26px 40px;}
#s-result .spot h3{font-size:48px;margin:6px 0 6px;}
#s-result .spot p{font-size:36px;}

/* ---------- tappable ingredients + help box ---------- */
:root{--warn-ink:#B42318;--unknown-ink:#8A5A00;--help-bg:#E6E3DA;}
.ingredients{font-size:34px;gap:8px 6px;}
.ingredients li{padding:0;}
.ing{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:6px 10px;border-radius:10px;
  text-align:left;transition:transform .15s ease, background .15s ease;}
.ing.warn{color:var(--warn-ink);text-decoration:underline 3px;text-underline-offset:7px;}
.ing.unknown{color:var(--unknown-ink);text-decoration:underline dashed 3px;text-underline-offset:7px;}
.ing.warn::after,.ing.unknown::after,.key{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-size:20px;font-weight:900;color:#fff;margin-left:8px;vertical-align:4px;text-decoration:none;}
.ing.warn::after{content:"!";background:var(--warn-ink);}
.ing.unknown::after{content:"?";background:var(--unknown-ink);}
.ing.looked{background:var(--help-bg);}
.ing.focus{background:var(--help-bg);box-shadow:0 0 0 6px var(--gold) !important;}
.help{background:var(--help-bg);border-radius:14px;padding:16px 22px;margin-bottom:20px;}
.legend{margin:0 0 8px;font-size:24px;font-weight:700;color:#4E5154;display:flex;align-items:center;gap:8px;}
.key{margin:0 2px 0 16px;vertical-align:0;}
.key:first-child{margin-left:0;}
.key.warn{background:var(--warn-ink);} .key.unknown{background:var(--unknown-ink);}
.help-text{margin:0;font-size:28px;line-height:1.35;color:#4E5154;min-height:76px;}
.help-text span{color:#82817B;}
.help-text.on{color:var(--label-ink);}
.help-text.on b{font-weight:800;}
.help-text.on .what{color:var(--label-ink);}
.help-text em{font-style:normal;font-weight:800;margin-left:6px;}
.help-text.warn em{color:var(--warn-ink);} .help-text.unknown em{color:var(--unknown-ink);}
.hl-warn{color:#F08A80;} .hl-unknown{color:var(--gold);}
.ingredients li:not(:last-child)::after{margin-left:-8px;}

/* ---------- rising stakes ---------- */
.turn-wrap{display:flex;align-items:center;gap:22px;min-width:0;}
.hud .scores,.hud .progress{flex:none;white-space:nowrap;}
.stakes{flex:none;white-space:nowrap;width:max-content;font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);background:rgba(242,196,107,.12);border:2px solid rgba(242,196,107,.5);border-radius:999px;padding:4px 18px;}
.stakes[hidden]{display:none;}
.stakes.is-final{color:#1A1C1E;background:var(--gold);border-color:var(--gold);animation:pulse 1.2s ease-in-out infinite;}
@keyframes pulse{50%{transform:scale(1.06);}}
@media (prefers-reduced-motion: reduce){.stakes.is-final{animation:none;}}
.chip small{font-size:.6em;font-weight:800;color:var(--gold);margin-left:6px;}
.chip.selected small{color:#8A5A00;}

/* 3-4 teams: tighten the header so scores, banner and book name all fit */
.hud.crowded{gap:20px;}
.hud.crowded .turn{font-size:50px;}
.hud.crowded .scores{gap:10px;}
.hud.crowded .score{padding:8px 16px;font-size:30px;gap:10px;}
.hud.crowded .round-book{font-size:22px;}
.hud.crowded .progress{font-size:26px;}

/* ---------- title hook line ---------- */
.hook{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;font-size:72px;line-height:1.1;
  color:var(--gold);margin:0 0 18px;}
.hook + .tag{margin-top:0;}

/* ---------- answer screen: roomier two-column layout ---------- */
#s-result .result{grid-template-columns:minmax(0,1fr) 600px;gap:88px;align-items:center;}
#s-result .verdict{margin:0 0 14px;}
#s-result .r-answer{margin:0 0 26px;}
#s-result .r-kind{margin:0 0 40px;}
#s-result .spot{margin:0 0 52px;padding:34px 44px;}
#s-result .spot h3{margin:10px 0 14px;}
#s-result .spot p{line-height:1.45;}
.r-side{display:flex;flex-direction:column;gap:36px;}
.r-side .watch{background:var(--bg-2);border-radius:20px;padding:30px 34px;margin:0;}
.r-side .watch ul{flex-direction:column;flex-wrap:nowrap;gap:14px;margin-top:18px;}
.r-side .watch li{display:block;background:none;border:0;border-left:6px solid rgba(224,106,95,.85);
  border-radius:0;padding:4px 0 4px 18px;font-size:30px;line-height:1.25;}
.r-side .watch li small{display:block;font-size:24px;margin-top:2px;}
.r-side .watch li.unknown{background:none;border-left-color:var(--gold);}
.r-side .r-book{flex-direction:row;align-items:center;text-align:left;gap:32px;font-size:30px;}
.r-side .r-book img{width:230px;flex:none;}
.r-side.solo .r-book{flex-direction:column;text-align:center;font-size:30px;}
.r-side.solo .r-book img{width:300px;}
/* Small QR on the answer screen's book card (same codes as the final screen). */
.r-book-text{display:flex;flex-direction:column;align-items:flex-start;}
.r-side.solo .r-book-text{align-items:center;}
.r-book .r-qr{display:block;width:150px;height:150px;margin-top:20px;padding:8px;background:var(--label);
  border-radius:14px;box-sizing:border-box;}
.r-side .r-book .r-qr img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:none;
  border-radius:0;box-shadow:none;}
.r-qr-cap{display:block;margin-top:10px;font-size:22px;font-weight:700;line-height:1.3;color:var(--muted);}
/* Book link can't open here (TV without a browser, blocked pop-up): point at the QR instead. */
.qr-hint[hidden]{display:none;}
.f-qr-hint{margin:18px 0 0;font-size:28px;font-weight:800;color:#3F5D4F;}
.qr-hint.nudge{color:var(--gold);}
.f-qr-hint.nudge{color:#B5654A;}
.qr-box.nudge{animation:qr-nudge 0.7s ease-in-out 3;box-shadow:0 0 0 6px var(--gold);border-radius:14px;}
@keyframes qr-nudge{50%{transform:scale(1.08);box-shadow:0 0 0 14px var(--gold);}}
#s-title .logo{font-size:206px;margin-bottom:56px;}
#s-title .logo span{margin-right:.1em;}
.dare-head{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.dare-head .btn.small{font-size:26px;padding:12px 28px;}
#s-final .row .btn{font-size:34px;padding:22px 40px;}
#s-final .row{gap:22px;flex-wrap:nowrap;}
.get-book{font-size:26px;white-space:nowrap;}

/* ---------- menu button + pause menu ---------- */
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:auto;}
.label-card .btn.ghost{background:transparent;color:var(--label-ink);box-shadow:inset 0 0 0 3px rgba(26,28,30,.35);}
.label-card.tf .card-foot{justify-content:flex-end;}
.btn.ghost-dark{font-size:34px;padding:22px 44px;background:transparent;box-shadow:inset 0 0 0 3px rgba(244,243,238,.25);}
.menu-list{display:flex;flex-direction:column;gap:22px;min-width:640px;}
.menu-list .btn{width:100%;}

/* ---------- answer timer ---------- */
.label-head{position:relative;align-items:center;}
.clock-ring[hidden],.timer-bar[hidden]{display:none;}
.timer-bar{position:absolute;left:0;bottom:-11px;height:14px;border-radius:7px;width:100%;background:#3F8F62;transition:width .1s linear;}
.timer-bar.urgent{background:var(--warn-ink);animation:blink .5s steps(2) infinite;}
@keyframes blink{50%{opacity:.4;}}
@media (prefers-reduced-motion: reduce){.timer-bar.urgent{animation:none;}}
#s-setup .h2{margin-bottom:26px;}
#s-setup .setup{grid-template-columns:auto auto auto;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:22px 100px;margin-bottom:30px;}
#s-setup .setup .total{grid-row:4;}
#s-setup .setup .row{flex-wrap:nowrap;gap:20px;}
#s-setup .chip{min-width:124px;padding:22px 32px;font-size:40px;}

/* ---------- how to play: six short cards ---------- */
.howto-title{margin:0 0 24px;}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px;}
.rule{background:var(--bg-2);border-radius:20px;padding:26px 30px;border-top:6px solid var(--pop);}
.rule b{display:block;font-family:"Fraunces",Georgia,serif;font-size:40px;line-height:1.1;margin-bottom:10px;color:var(--gold);}
.rule p{margin:0;font-size:29px;line-height:1.4;color:var(--ink-soft);}
.rule em{font-style:italic;color:var(--ink);}
#s-howto .hint{font-size:28px;margin:0 0 30px;}

/* ---------- how to play: bullet list ---------- */
.steps{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;}
.steps li{position:relative;padding-left:52px;font-size:36px;line-height:1.35;color:var(--ink-soft);white-space:nowrap;}
.steps li::before{content:"";position:absolute;left:8px;top:.5em;width:18px;height:18px;border-radius:50%;background:var(--pop);}
.steps b{color:var(--ink);}
.steps i{color:var(--gold);font-style:italic;}

/* ---------- steals ---------- */
.stakes.is-steal{color:#1A1C1E;background:var(--pop);border-color:var(--pop);}
.answer.struck{opacity:.35;text-decoration:line-through 5px;}

/* ---------- big countdown circle (top-right corner of the label) ---------- */
.label-card{position:relative;}
.clock-ring{position:absolute;top:-46px;right:-52px;width:150px;height:150px;border-radius:50%;background:var(--label);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);display:grid;place-items:center;z-index:3;}
.clock-ring svg{position:absolute;inset:8px;width:134px;height:134px;transform:rotate(-90deg);}
.clock-ring circle{fill:none;stroke-width:12;}
.clock-ring .track{stroke:#DCD9CF;}
.clock-ring .prog{stroke:#3F8F62;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear,stroke .2s;}
#clock-num{position:relative;font-size:60px;font-weight:800;color:var(--label-ink);font-variant-numeric:tabular-nums;}
.clock-ring.urgent .prog{stroke:var(--warn-ink);}
.clock-ring.urgent #clock-num{color:var(--warn-ink);}
.clock-ring.urgent{animation:throb 1s ease-in-out infinite;}
@keyframes throb{50%{transform:scale(1.12);}}
@media (prefers-reduced-motion: reduce){.clock-ring.urgent{animation:none;}}

/* ---------- WRONG! pop-up ---------- */
.wrong-pop{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(60,8,6,.55);pointer-events:none;}
.wrong-pop[hidden]{display:none;}
.wrong-pop b{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:300px;line-height:1;color:#fff;
  background:var(--bad);padding:20px 90px 40px;border-radius:40px;transform:rotate(-6deg);
  box-shadow:0 0 0 16px rgba(255,255,255,.9),0 40px 80px -20px rgba(0,0,0,.7);}
.wrong-pop span{margin-top:56px;font-size:52px;font-weight:800;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.6);}
.wrong-pop.go b{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes stamp{0%{transform:scale(2.4) rotate(-6deg);opacity:0;}100%{transform:scale(1) rotate(-6deg);opacity:1;}}
@media (prefers-reduced-motion: reduce){.wrong-pop.go b{animation:none;}}

/* ---------- Steal it? ---------- */
.steal-box{min-width:900px;}
.steal-kicker{font-size:32px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pop);margin:0;}
.steal-box h3{font-size:110px;margin:6px 0 10px;}
.steal-sub{font-size:34px;color:var(--ink-soft);margin:0 0 36px;}
.btn.steal-team{background:var(--team);color:#1A1C1E;box-shadow:none;font-size:44px;}
.label-card.timed .label-head{padding-right:96px;}
/* team colors + turn order */
.order-list{margin:30px 0 34px;display:flex;gap:28px;}
.order-card{flex:1;max-width:380px;min-height:210px;background:var(--team);color:#16181A;border:0;border-radius:24px;padding:30px 32px 34px;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;font:inherit;box-shadow:0 10px 30px rgba(0,0,0,.35);}
div.order-card:first-child{transform:scale(1.06);}
button.order-card{cursor:pointer;background:transparent;color:var(--team);box-shadow:inset 0 0 0 6px var(--team);transition:transform .15s;}
button.order-card.picked{background:var(--team);color:#16181A;box-shadow:0 10px 30px rgba(0,0,0,.35);}
button.order-card:not(.picked) .order-n{opacity:1;}
button.order-card.focus{outline:none;box-shadow:0 0 0 8px var(--gold),0 10px 30px rgba(0,0,0,.35) !important;transform:scale(1.04);}
button.order-card.focus:not(.picked){box-shadow:inset 0 0 0 6px var(--team),0 0 0 8px var(--gold) !important;}
.order-n{font-size:34px;font-weight:800;opacity:.75;}
.order-card b{font-family:"Fraunces",serif;font-weight:900;font-size:56px;line-height:1.05;}
.order-tip{font-size:34px;max-width:1400px;margin:0 0 40px;color:var(--muted);}
.next-dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin:0 .3em 0 .25em;vertical-align:-.05em;box-shadow:0 0 0 3px rgba(0,0,0,.35);}
.card-foot .btn.small{white-space:nowrap;font-size:26px;padding:12px 24px;}

/* ---------- ingredient chips ---------- */
.ingredients{gap:12px;}
.ingredients li:not(:last-child)::after{content:none;}
.ingredients li{display:flex;border-radius:12px;}
.ing{background:#FFFFFF;box-shadow:inset 0 0 0 2px #D9D6CC;padding:8px 18px;border-radius:12px;line-height:1.2;}
.ing.warn,.ing.unknown{text-decoration:none;}
.ing.warn{box-shadow:inset 0 0 0 3px rgba(180,35,24,.45);}
.ing.unknown{box-shadow:inset 0 0 0 3px rgba(138,90,0,.45);}
.ing.looked{background:#FFFFFF;box-shadow:inset 0 0 0 3px var(--label-ink);}
.ing.focus{background:#FFFFFF;}
.ingredients li.hidden{padding:8px 18px;border-radius:12px;color:transparent;cursor:pointer;line-height:1.2;user-select:none;}
.ingredients li.hidden.focus{box-shadow:0 0 0 6px var(--gold) !important;transform:scale(1.05);}
.card-foot{justify-content:flex-start;gap:24px;}
.card-foot [data-action="menu"]{margin-left:auto;}

/* pause menu toggles + CORRECT! stamp */
.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.toggle-grid .btn{width:100%;}
.wrong-pop.good{background:rgba(6,50,28,.55);}
.wrong-pop.good b{background:#2F8F5B;font-size:210px;padding:24px 80px 40px;}