/* ===== gameseveryday · Sticker Bomb design system ===== */
:root{
  --bg-page:#101015; --bg-screen:#15151B; --panel:#1D1D26; --panel-2:#1A1A22;
  --border:#2C2C38; --ink:#F2F0EA; --muted:#9A9A93; --muted-2:#8A8A93;
  --lime:#C8FF3D; --magenta:#FF3D7F; --cyan:#3DC8FF; --yellow:#FFD23D; --sign-red:#D8001F;
  --on-cyan:#06222E; --on-lime:#16210A; --on-yellow:#2A2300;
  --display:'Arial Black','Helvetica Neue',Impact,system-ui,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--ink);font-family:var(--body);line-height:1.45;min-height:100vh}
a{color:inherit}
button{font-family:var(--body)}

/* ---- outdoor / high-contrast theme ---- */
body.outdoor{
  --bg-page:#F4F2EC; --bg-screen:#FFFFFF; --panel:#F0EEE6; --panel-2:#E9E7DE;
  --border:#B9B7AE; --ink:#141414; --muted:#4A4A44; --muted-2:#5A5A54;
  --lime:#4A7A00; --magenta:#C40053; --cyan:#005E8A; --yellow:#8A6D00;
  --on-cyan:#fff; --on-lime:#fff; --on-yellow:#fff;
}
body.outdoor .stk{border-color:#141414;box-shadow:4px 5px 0 rgba(0,0,0,.25)}
body.outdoor .stk.pink{background:#C40053}
body.outdoor .stk.cyan{background:#005E8A;color:#fff}
body.outdoor .stk.lime{background:#4A7A00;color:#fff}
body.outdoor .stk.yellow{background:#8A6D00;color:#fff}

.shell{max-width:520px;margin:0 auto;padding:20px 18px 60px;min-height:100vh;background:var(--bg-screen)}
@media(min-width:560px){.shell{border-left:1px solid var(--border);border-right:1px solid var(--border)}}

/* ---- top bar ---- */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bar .home{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;letter-spacing:.06em}
.bar .home:hover{color:var(--ink)}
.bar .spacer{flex:1}
.outdoor-toggle{font-family:var(--mono);font-size:11px;letter-spacing:.04em;background:var(--panel);
  color:var(--ink);border:2px solid var(--border);border-radius:99px;padding:6px 12px;cursor:pointer}
.outdoor-toggle[aria-pressed="true"]{background:var(--ink);color:var(--bg-screen);border-color:var(--ink)}

/* ---- wordmark ---- */
.mark{font-family:var(--display);font-size:38px;line-height:.86;letter-spacing:-.03em;margin:6px 0 22px}
.mark .e{color:var(--lime)}
.mark a{text-decoration:none}

/* ---- sticker grid ---- */
.grid-stk{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-stk .span2{grid-column:1/-1}
.stk{border:3px solid var(--ink);border-radius:18px;position:relative;box-shadow:4px 5px 0 rgba(0,0,0,.55);
  padding:15px;display:flex;flex-direction:column;justify-content:flex-end;min-height:104px;
  text-decoration:none;cursor:pointer;transition:transform .08s}
.stk:hover{transform:scale(1.02) rotate(0deg)!important}
.stk .ico{font-size:24px;line-height:1}
.stk .gt{font-family:var(--display);font-size:17px;letter-spacing:-.01em;line-height:.98;margin-top:7px}
.stk .gs{font-size:11px;margin-top:4px;opacity:.9;line-height:1.2}
.stk .tag{position:absolute;top:-10px;right:12px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  background:var(--bg-screen);color:var(--lime);padding:3px 8px;border-radius:99px;border:2px solid var(--ink)}
.stk.pink{background:var(--magenta);color:#fff;transform:rotate(-2deg)}
.stk.cyan{background:var(--cyan);color:var(--on-cyan);transform:rotate(1.5deg)}
.stk.lime{background:var(--lime);color:var(--on-lime);transform:rotate(-1.5deg)}
.stk.yellow{background:var(--yellow);color:var(--on-yellow);transform:rotate(2deg)}
.stk.flag{min-height:126px}
.stk.flag .gt{font-size:24px}
.stk.flag .gs{font-size:12.5px}
.stk.add{background:transparent;border:3px dashed var(--border);color:var(--muted);align-items:center;
  justify-content:center;transform:rotate(.5deg);box-shadow:none;text-align:center;cursor:default}
.stk.add .plus{font-family:var(--display);font-size:26px;line-height:1}
.stk.add .t{font-size:10.5px;margin-top:4px}
.footline{margin-top:26px;font-family:var(--mono);font-size:11px;color:var(--lime);letter-spacing:.04em;text-align:center}

/* ---- shared components ---- */
.h1{font-family:var(--display);font-size:24px;letter-spacing:-.02em;line-height:1;margin:0 0 4px}
.sub{font-size:13px;color:var(--muted);margin:0 0 18px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 6px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:2px solid var(--border);
  border-radius:14px;padding:15px;font-weight:800;font-size:16px;background:var(--panel);color:var(--ink);
  cursor:pointer;margin-top:10px;min-height:52px}
.btn.primary{background:var(--ink);color:var(--bg-screen);border-color:var(--ink)}
.btn.magenta{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.btn.lime{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.btn.cyan{background:var(--cyan);color:var(--on-cyan);border-color:var(--cyan)}
.btn.yellow{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btnrow{display:flex;gap:10px}
.btnrow .btn{margin-top:10px}
.panel{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:16px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{border:2px solid var(--border);border-radius:99px;padding:9px 15px;font-size:13.5px;font-weight:700;
  background:var(--panel);color:var(--ink);cursor:pointer;min-height:44px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg-screen);border-color:var(--ink)}
.counter{display:flex;align-items:center;justify-content:space-between;background:var(--panel);
  border:2px solid var(--border);border-radius:16px;padding:10px 16px;margin:10px 0}
.counter button{width:52px;height:52px;border-radius:50%;font-size:26px;font-weight:900;border:2px solid var(--border);
  background:var(--panel-2);color:var(--ink);cursor:pointer}
.counter .num{font-family:var(--mono);font-weight:900;font-size:36px;line-height:1;text-align:center}
.counter .lab{font-size:11px;color:var(--muted);text-align:center}
.mono{font-family:var(--mono)}
.stamp{display:inline-block;font-family:var(--display);font-size:24px;border:3px solid var(--lime);color:var(--lime);
  border-radius:10px;padding:4px 14px;transform:rotate(-6deg);letter-spacing:.02em}
.stamp.bad{border-color:var(--magenta);color:var(--magenta)}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:10px}
.notice{font-size:12px;color:var(--muted);background:var(--panel-2);border-left:3px solid var(--border);
  border-radius:0 10px 10px 0;padding:10px 13px;margin:14px 0}

/* reveal cards (Pants on Fire) */
.rcard{width:100%;border:3px solid var(--ink);border-radius:22px;padding:30px 18px;text-align:center;
  box-shadow:6px 6px 0 rgba(0,0,0,.55);margin:8px 0}
.rcard .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.rcard .big{font-family:var(--display);font-size:32px;line-height:.98;margin:8px 0 0}
.rcard.word{background:var(--panel);transform:rotate(1deg)}
.rcard.word .k{color:var(--muted)}
.rcard.liar{background:var(--magenta);color:#fff;transform:rotate(-1.5deg)}
.rcard.liar .big{text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.rcard.liar .k{color:var(--bg-screen)}
.rcard .sub2{font-size:13px;margin-top:10px;font-weight:700}

/* timer ring */
.ringwrap{display:flex;justify-content:center;margin:10px 0}

/* vote grid */
.vote{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}
.vote .v{border:2px solid var(--border);border-radius:12px;background:var(--panel);color:var(--ink);
  padding:14px 10px;font-weight:800;font-size:14.5px;cursor:pointer;min-height:52px}
.vote .v[aria-pressed="true"]{background:var(--magenta);color:#fff;border-color:var(--magenta)}

/* score list */
.score{background:var(--panel);border:2px solid var(--border);border-radius:14px;overflow:hidden;margin:10px 0}
.score .r{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;font-size:14.5px}
.score .r+.r{border-top:1px solid var(--border)}
.score .who{font-weight:700}
.score .pts{font-family:var(--mono);font-weight:800}

/* bingo */
.bingo{display:grid;gap:9px;margin:12px 0}
.bingo.g3{grid-template-columns:repeat(3,1fr)}
.bingo.g4{grid-template-columns:repeat(4,1fr)}
.cell{background:var(--panel);border:2px solid var(--border);border-radius:12px;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;
  padding:5px;cursor:pointer}
.cell svg,.cell img{width:60%;height:auto;max-height:60%;object-fit:contain}
.bingo.g4 .cell .lbl{font-size:7.5px}
.cell .lbl{font-size:9px;font-weight:700;color:var(--muted);text-align:center;line-height:1.05}
.cell.spot{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 12%,var(--panel))}
.cell.spot::after{content:"✓";position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--lime);color:var(--on-lime);font-weight:900;font-size:13px;display:flex;align-items:center;
  justify-content:center;border:2px solid var(--bg-screen)}

/* quiz */
.qsign{display:flex;justify-content:center;padding:8px 0 12px}
.qsign svg,.qsign img{width:110px;height:110px;object-fit:contain}
.q{font-family:var(--display);font-size:18px;letter-spacing:-.01em;margin:0 0 10px;line-height:1.08}
.ans{display:flex;flex-direction:column;gap:9px}
.ans .a{border:2px solid var(--border);border-radius:12px;padding:13px 15px;font-weight:700;font-size:14px;
  background:var(--panel);color:var(--ink);cursor:pointer;text-align:left;min-height:48px}
.ans .a.right{background:color-mix(in srgb,var(--lime) 15%,var(--panel));border-color:var(--lime);color:var(--lime)}
.ans .a.wrong{background:color-mix(in srgb,var(--magenta) 15%,var(--panel));border-color:var(--magenta);color:var(--magenta)}
.ans .a:disabled{cursor:default}
.explain{font-size:13px;color:var(--muted);background:var(--panel-2);border-radius:10px;padding:11px 13px;margin-top:10px}
.explain b{color:var(--ink)}
.streak{font-family:var(--mono);font-size:12px;color:var(--yellow)}
.lplate{font-family:var(--display);background:#F2F0EA;color:var(--sign-red);border:2px solid #000;border-radius:7px;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:26px}
body.outdoor .lplate{border-color:#555}

/* plate letters */
.platebox{display:flex;justify-content:center;gap:10px;margin:14px 0}
.platebox .L{font-family:var(--mono);font-weight:900;font-size:36px;background:var(--yellow);color:#111;
  border:3px solid #000;border-radius:10px;width:60px;height:72px;display:flex;align-items:center;justify-content:center}
body.outdoor .platebox .L{background:#F6CE00}
input.txt{width:100%;background:var(--panel);border:2px solid var(--border);border-radius:12px;color:var(--ink);
  font-size:16px;padding:13px 14px;font-family:var(--body)}
input.txt:focus{outline:3px solid var(--cyan);outline-offset:2px;border-color:var(--cyan)}

/* SEO content block */
.seo{margin-top:44px;border-top:2px solid var(--border);padding-top:22px;font-size:14px;color:var(--muted)}
.seo h2{font-family:var(--display);font-size:17px;color:var(--ink);letter-spacing:-.01em}
.seo p{max-width:62ch}
.seo .disclaimer{font-family:var(--mono);font-size:11px;letter-spacing:.03em}

/* glossary */
.gloss{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.gloss .g{display:flex;gap:14px;align-items:center;background:var(--panel);border:2px solid var(--border);
  border-radius:14px;padding:12px 14px}
.gloss .g svg,.gloss .g img{width:56px;height:56px;flex:none;object-fit:contain}
.gloss .g .n{font-weight:800;font-size:14.5px}
.gloss .g .m{font-size:12.5px;color:var(--muted)}

/* a11y */
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}