/* Layout: masthead with deck switch, tabs (Play / The Deck / How to play), card arena centred, each deck carries its own world */
:root{
  --f-display:"Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Comp deck: ledger paper, navy ink, mustard gold */
  --bg:#E8ECE5; --bg-line:rgba(31,47,74,.07); --fg:#1F2F4A; --muted:#55657E;
  --ink:#1F2F4A; --card:#FBFAF4; --accent:#D99A1A; --accent-soft:#F6E5B3;
  --art-fill:#FBF3DA; --art-acc:#E8B33C; --rare:#3D78A8; --stripe:rgba(31,47,74,.12);
  --win:#5E9B6B; --chip:#FFFFFF; --title-font:var(--f-display);
  color-scheme:light;
}
body.hw{
  /* Halloween deck: night navy, pumpkin, bone */
  --bg:#13223B; --bg-line:rgba(241,230,210,.05); --fg:#F1E6D2; --muted:#A9B4C8;
  --ink:#22304D; --card:#F3E9D6; --accent:#F07F1E; --accent-soft:#FBD3A6;
  --art-fill:#FBEBD2; --art-acc:#F39A3E; --rare:#2F8A93; --stripe:rgba(34,48,77,.13);
  --win:#8BC48F; --chip:#1D3051; --title-font:"Creepster", var(--f-display);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:15px; line-height:1.5;
  background-image:linear-gradient(var(--bg-line) 1px, transparent 1px);
  background-size:100% 28px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:max(20px, env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-bottom, 0px)); min-height:100vh;
}
body.hw{background-image:radial-gradient(rgba(241,230,210,.5) 1px, transparent 1.4px), radial-gradient(rgba(241,230,210,.25) 1px, transparent 1.2px);background-size:140px 120px, 90px 70px;background-position:10px 20px, 50px 60px}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.mast{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.mast h1{font-family:var(--title-font);font-weight:400;font-size:clamp(34px,7vw,58px);line-height:1;margin:0;letter-spacing:.01em;text-wrap:balance}
body.hw .mast h1{color:var(--accent);letter-spacing:.04em}
.mast p{margin:6px 0 0;color:var(--muted);max-width:52ch}
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deckswitch{display:flex;gap:6px;background:var(--chip);border:2px solid var(--fg);border-radius:999px;padding:4px}
.deckswitch button{font:600 14px var(--f-body);border:0;background:transparent;color:var(--fg);padding:8px 14px;border-radius:999px;cursor:pointer}
.deckswitch button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--fg);flex-wrap:wrap}
.tabs button{font:600 14px var(--f-body);background:none;border:0;color:var(--muted);padding:10px 14px;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- card ---------- */
.card{container-type:inline-size;background:var(--card);color:var(--ink);border-radius:10px;padding:5px;position:relative;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 8px 22px rgba(10,20,40,.14);width:100%}
.card-in{border:2px solid var(--ink);border-radius:7px;padding:5cqw 5cqw 4cqw;display:flex;flex-direction:column;gap:3cqw;height:100%;
  background-image:repeating-linear-gradient(90deg,transparent 0 6px,var(--stripe) 6px 7px);background-size:100% 100%}
.card-in::before{content:"";position:absolute;inset:9px;border:1px dashed var(--ink);border-radius:5px;opacity:.35;pointer-events:none}
.c-name{font-family:var(--f-display);text-transform:uppercase;line-height:1.02;text-align:center;min-height:2.1em;display:flex;align-items:center;justify-content:center;text-wrap:balance;letter-spacing:.01em}
body.hw .c-name{font-family:"Creepster",var(--f-display);letter-spacing:.05em}
.c-arch{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:50cqw 50cqw 4px 4px;aspect-ratio:1/0.86;overflow:hidden;max-width:100%}
.c-arch svg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink)}
.c-rarity{align-self:center;margin-top:-6cqw;position:relative;z-index:1;font:600 4.6cqw var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:.4cqw 3.5cqw}
.r-rare .c-rarity{background:var(--rare);color:#fff}
.r-legendary .c-rarity{background:var(--accent);color:var(--ink)}
.c-stats{background:var(--accent-soft);border:2px solid var(--ink);border-radius:4px;padding:2.4cqw 3cqw;display:flex;flex-direction:column;gap:1.4cqw}
.stat{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2.5cqw;font:800 4.4cqw var(--f-body);text-transform:uppercase;letter-spacing:.02em;
  border:0;background:transparent;color:var(--ink);padding:.8cqw 1.2cqw;border-radius:4px;text-align:left;width:100%}
.pips{display:flex;gap:.8cqw}
.pips i{width:2.4cqw;height:3.6cqw;border:1.5px solid var(--ink);border-radius:1px}
.pips i.on{background:var(--ink)}
.r-legendary .pips i.on{background:var(--accent);border-color:var(--ink)}
.stat b{font:600 4.6cqw var(--f-mono);min-width:5cqw;text-align:right;font-variant-numeric:tabular-nums}
.c-line{font-size:4.3cqw;line-height:1.35;text-align:center;min-height:4.1em;margin:0;color:var(--ink);opacity:.86}
button.stat{cursor:pointer;outline:2px dashed transparent}
button.stat:hover{background:rgba(255,255,255,.7);outline-color:var(--ink)}
.stat.chosen{background:var(--ink);color:var(--card)}
.stat.chosen .pips i{border-color:var(--card)}
.stat.chosen .pips i.on{background:var(--card)}
.card.back{display:flex;align-items:center;justify-content:center}
.back-in{width:100%;aspect-ratio:5/7;border:2px solid var(--ink);border-radius:7px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,var(--accent-soft) 0 8px,var(--card) 8px 16px)}
.back-in span{font-family:var(--title-font);font-size:13cqw;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:2cqw 4cqw;text-align:center;line-height:1}

/* ---------- play ---------- */
.panel{background:var(--chip);border:2px solid var(--fg);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px}
body.hw .panel{border-color:rgba(241,230,210,.5)}
.setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:end}
.field label{display:block;font:600 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font:600 14px var(--f-body);border:2px solid var(--fg);background:transparent;color:var(--fg);border-radius:8px;padding:8px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.btn{font:800 15px var(--f-body);background:var(--accent);color:#1b2337;border:2px solid var(--fg);border-radius:10px;padding:12px 20px;cursor:pointer;box-shadow:3px 3px 0 var(--fg)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--fg)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:none}
.table{display:flex;flex-direction:column;gap:16px}
.seats{display:flex;flex-wrap:wrap;gap:8px}
.seat{display:flex;align-items:center;gap:10px;background:var(--chip);border:2px solid var(--fg);border-radius:10px;padding:7px 12px;min-width:0}
body.hw .seat{border-color:rgba(241,230,210,.45)}
.seat.turn{box-shadow:0 0 0 3px var(--accent)}
.seat.out{opacity:.45;text-decoration:line-through}
.seat .nm{font-weight:800;white-space:nowrap}
.seat .ct{font:600 13px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mini{width:16px;height:22px;border:2px solid var(--fg);border-radius:3px;background:repeating-linear-gradient(45deg,var(--accent) 0 3px,transparent 3px 6px)}
.status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.msg{font-family:var(--f-display);font-size:clamp(18px,3.4vw,26px);line-height:1.15;margin:0;text-wrap:balance}
body.hw .msg{font-family:var(--f-body);font-weight:800}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.tag{font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--fg);border-radius:999px;padding:4px 10px;white-space:nowrap}
.arena{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,220px));justify-content:center;gap:18px}
.slot{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:0}
.slot .who{display:flex;justify-content:space-between;align-items:center;font-weight:800;gap:6px}
.badge{font:600 11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:3px 8px;border:2px solid var(--fg)}
.badge.w{background:var(--win);color:#13223b;border-color:var(--win)}
.badge.t{background:var(--accent-soft);color:#13223b;border-color:var(--accent-soft)}
.slot.lost .card{opacity:.62;filter:grayscale(.5)}
.slot.won .card{box-shadow:0 0 0 4px var(--win),0 10px 26px rgba(10,20,40,.2)}
.yourturn{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr);gap:24px;align-items:center}
.yourturn .hint{display:flex;flex-direction:column;gap:10px;min-width:0}
.yourturn .hint p{margin:0;max-width:44ch;color:var(--muted)}
@media (max-width:560px){.yourturn{grid-template-columns:1fr;justify-items:center;text-align:center}.yourturn .card{max-width:250px}.yourturn .hint{align-items:center}}
.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.stand{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.stand th,.stand td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bg-line)}
.stand th{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stand tr.top td{font-weight:800}
.log{font:500 12.5px var(--f-mono);color:var(--muted);max-height:120px;overflow:auto;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}

/* ---------- deck / rules ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.rules ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:8px;max-width:62ch}
.rules h3{font-family:var(--title-font);font-weight:400;font-size:22px;margin:0 0 8px}
body.hw .rules h3{color:var(--accent);letter-spacing:.04em}
.statdef{display:flex;flex-direction:column;gap:10px}
.statdef div{border-left:4px solid var(--accent);padding-left:12px}
.statdef b{display:block}
.statdef span{color:var(--muted)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);border-top:2px solid var(--fg);padding-top:14px}
footer a{color:var(--fg);font-weight:600}
@keyframes flip{from{transform:rotateY(80deg) translateY(8px);opacity:.2}to{transform:none;opacity:1}}
.flip{animation:flip .45s cubic-bezier(.2,.8,.3,1.2) both}
@media (prefers-reduced-motion:reduce){.flip{animation:none}}

/* ---------- game room ---------- */
.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.pgroup{display:flex;flex-direction:column;gap:8px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{text-align:left;font-family:var(--f-body);background:var(--chip);color:var(--fg);border:2px solid var(--fg);border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
body.hw .tile{border-color:rgba(241,230,210,.45)}
.tile b{font-size:14.5px;line-height:1.2}
.tile span{font-size:12.5px;color:var(--muted);line-height:1.3}
.tile em{font:600 10.5px var(--f-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tile[aria-pressed="true"]{background:var(--accent);color:#1b2337;border-color:var(--fg)}
.tile[aria-pressed="true"] span,.tile[aria-pressed="true"] em{color:#1b2337}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;border-top:2px solid var(--fg);padding-top:16px}
.ghead h2{font-family:var(--title-font);font-weight:400;font-size:clamp(26px,5vw,38px);line-height:1;margin:0}
body.hw .ghead h2{color:var(--accent);letter-spacing:.04em}
.ghead p{margin:0;color:var(--muted);max-width:60ch}
.gbody{display:flex;flex-direction:column;gap:18px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.opt{font-family:var(--f-body);text-align:left;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:3px 3px 0 var(--fg);min-width:0}
.opt:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--fg)}
.opt b{font-family:var(--f-display);font-weight:400;font-size:18px;line-height:1.15}
body.hw .opt b{font-family:var(--f-body);font-weight:800}
.opt span{font-size:14px;opacity:.85}
.opt.sel{background:var(--accent-soft)}
.opt[disabled]{cursor:default;transform:none}
.paper{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 22px rgba(10,20,40,.14)}
.paper h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,3.6vw,26px);line-height:1.15;text-wrap:balance}
body.hw .paper h3{font-family:var(--f-body);font-weight:800}
.paper p{margin:0}
.paper .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.eyebrow{color:#55657E}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 13px var(--f-body);border:2px solid var(--fg);border-radius:999px;padding:5px 12px}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.meter{display:flex;flex-direction:column;gap:6px}
.meter .bar{height:12px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.meter .bar i{display:block;height:100%;background:var(--accent)}
.meter div:first-child{display:flex;justify-content:space-between;font-weight:800}
.meter b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.feed{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.seats4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stake{background:var(--chip);border:2px solid var(--fg);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
body.hw .stake{border-color:rgba(241,230,210,.45)}
.stake b{display:flex;justify-content:space-between;gap:6px}
.stake span{font-size:13px;color:var(--muted)}
.stake.yes{background:var(--win);color:#13223b;border-color:var(--win)}
.stake.yes span{color:#13223b}
.stake.no{background:#8C97A8;color:#13223b;border-color:#8C97A8}
.stake.no span{color:#13223b}
.timer{height:14px;border:2px solid var(--fg);border-radius:999px;overflow:hidden}
.timer i{display:block;height:100%;background:var(--accent);transition:width .1s linear}
.big{font:600 clamp(28px,6vw,44px) var(--f-mono);font-variant-numeric:tabular-nums;line-height:1}
.fb{border-left:4px solid var(--accent);padding:4px 12px;margin:0}
.fb.good{border-color:var(--win)}
.res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qtrack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.qbox{border:2px solid var(--fg);border-radius:8px;padding:8px;text-align:center;font:600 13px var(--f-mono);font-variant-numeric:tabular-nums}
.qbox.cur{box-shadow:0 0 0 3px var(--accent)}
.drawn{display:flex;flex-wrap:wrap;gap:8px}
.tcard{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:118px;max-width:160px}
.tcard b{font-size:13px;line-height:1.2}
.tcard span{font:600 13px var(--f-mono);font-variant-numeric:tabular-nums}
.tcard.trick{background:#D9DCE3}
.tcard.new{animation:flip .4s cubic-bezier(.2,.8,.3,1.2) both}
.candles{display:flex;gap:6px;align-items:flex-end}
.candle{width:14px;height:30px;background:var(--card);border:2px solid var(--fg);border-radius:3px;position:relative}
.candle::before{content:"";position:absolute;left:50%;top:-14px;width:10px;height:12px;margin-left:-5px;background:var(--accent);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.candle.off{opacity:.3}.candle.off::before{display:none}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:640px;width:100%;margin:0 auto}
.mcell{aspect-ratio:3/4;border:2px solid var(--fg);border-radius:8px;cursor:pointer;padding:0;background:repeating-linear-gradient(45deg,var(--accent) 0 6px,var(--chip) 6px 12px);color:var(--ink);font-family:var(--f-body);overflow:hidden;max-width:100%}
.mcell.up,.mcell.done{background:var(--card);cursor:default}
.mcell.done{box-shadow:0 0 0 3px var(--win)}
.mface{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:6px;gap:4px;text-align:center}
.mface svg{width:100%;max-height:62%;color:var(--ink)}
.mface b{font-size:clamp(9px,2.2vw,13px);line-height:1.15}
.mface span{font-size:clamp(10px,2.4vw,14px);line-height:1.25;font-weight:600}

/* ---------- single-game pages ---------- */
a.tile{text-decoration:none}
.tiles.all{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.tiles.all{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile.hub{background:var(--fg);color:var(--bg)}
.tile.hub span,.tile.hub em{color:var(--bg);opacity:.85}
.ownlink{font:600 13px var(--f-body);color:var(--fg);white-space:nowrap}
body.single .picker{border-top:2px solid var(--fg);padding-top:18px}

/* ---------- hub, style C: game boxes on a shelf (26 Oct 2026) ---------- */
.mast.hub{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:20px}
@media (max-width:720px){.mast.hub{grid-template-columns:1fr}.mast.hub .fan{order:-1;height:150px}}
.mast.hub h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 .05em}
body.hw .mast.hub h1 em{background:linear-gradient(transparent 62%,rgba(240,127,30,.45) 62%)}
.hubstats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hubstats span{border:2px solid var(--fg);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--fg)}
.hubstats b{font-family:var(--f-mono);font-weight:600}
.fan{position:relative;height:200px}
.fan .pc{position:absolute;left:50%;bottom:4px;width:104px;height:146px;margin-left:-52px;border-radius:12px;background:#FBF3DA;border:3px solid #14213D;box-shadow:4px 6px 0 rgba(20,33,61,.25);transform-origin:50% 115%;display:flex;align-items:flex-end;justify-content:center;padding:10px 8px;text-align:center;font-family:var(--f-display);font-size:12px;line-height:1.05;color:#14213D;transition:transform .35s;background-image:linear-gradient(#E8B33C 0 38%,transparent 38%)}
.fan .pc.hwc{background-color:#22304D;color:#F39A3E;background-image:linear-gradient(#F39A3E 0 38%,transparent 38%)}
.fan .pc:nth-child(1){transform:rotate(-20deg)}.fan .pc:nth-child(2){transform:rotate(-7deg)}.fan .pc:nth-child(3){transform:rotate(7deg)}.fan .pc:nth-child(4){transform:rotate(20deg)}
.fan:hover .pc:nth-child(1){transform:rotate(-28deg) translateX(-14px)}.fan:hover .pc:nth-child(4){transform:rotate(28deg) translateX(14px)}
@media (prefers-reduced-motion:reduce){.fan .pc{transition:none}}
.picker.hubpicker{display:flex;flex-direction:column;gap:26px}
.shelf{position:relative;padding:0 4px 24px}
.shelf:after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;border-radius:6px;background:linear-gradient(#C9A46A,#A9844C);box-shadow:0 8px 14px rgba(80,55,20,.22)}
.slabel{display:inline-block;background:var(--fg);color:var(--bg);border-radius:999px;padding:5px 14px;font:700 12.5px var(--f-body);margin-bottom:12px}
.shelf.hw .slabel{background:#F39A3E;color:#14213D}
.srow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
@media (max-width:820px){.srow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gbox{font-family:var(--f-body);text-align:left;padding:0;cursor:pointer;background:#fff;color:#14213D;border:2px solid #14213D;border-radius:10px 10px 4px 4px;overflow:hidden;box-shadow:5px 5px 0 rgba(20,33,61,.18);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;min-width:0}
.gbox:hover{transform:translateY(-8px);box-shadow:5px 12px 0 rgba(20,33,61,.16)}
.gbox[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.gbox{transition:none}.gbox:hover{transform:none}}
.gbox .lid{position:relative;height:104px;display:grid;place-items:center}
.gbox.tall .lid{height:128px}
.gbox .lid i{width:66px;height:66px;display:block}.gbox .lid svg{width:100%;height:100%;display:block}
.lid-1{background:#F2C14E}.lid-2{background:#9CC9E8}.lid-3{background:#F5D9A8}.lid-4{background:#BFD7C9}.lid-hw{background:#22304D}
.gbox .mins{position:absolute;left:8px;top:8px;font:600 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#14213D;border-radius:999px;padding:2px 8px}
.gbox .gb{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.gbox .gb b{font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.08}
.shelf.hw .gbox .gb b{font-family:"Creepster",var(--f-display);font-size:20px;letter-spacing:.04em;color:#B85F0E}
.gbox .gb>span:not(.foot){font-size:12.5px;color:#55657E;line-height:1.3}
.gbox .foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gbox .foot em{font:600 10px var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid #14213D;border-radius:6px;padding:2px 6px;color:#14213D}
body.hw .gbox{border-color:#0E1A30}