/* Layout: one-screen arcade cabinet. Header strip, a rolling 3D cube in the middle, console underneath.
   One fixed light look: white paper, black ink. */
:root{
  --paper:#ffffff;
  --ink:#0b0b0b;
  --grid:#e4e4e4;
  --dim:#6d6d6d;
  --face:#ffffff;
  --display:"Rubik Mono One","Arial Black",Impact,sans-serif;
  --logo:"Monoton","Rubik Mono One","Arial Black",sans-serif;
  --term:"VT323","Courier New",ui-monospace,monospace;
  --cw:min(340px, calc(100vw - 56px));
  --ch:230px;
  --stage-top:16px;    /* space above the card, beyond its 3D spill */
  --stage-bottom:24px; /* space below: more, because the flip swings past the card's resting edge */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--term); font-size:22px; line-height:1.15;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:center top;
}
.app{
  min-height:100%; display:flex; flex-direction:column; align-items:center;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  gap:18px;
}
header{
  width:100%; max-width:560px; display:flex; justify-content:space-between; align-items:center;
  border:3px solid var(--ink); background:var(--paper); padding:6px 12px;
  box-shadow:5px 5px 0 var(--ink);
}
.brand{font-family:var(--display); font-size:15px; letter-spacing:.06em; display:flex; align-items:center; gap:10px}
.brand img{display:block}
.hud{display:flex; gap:16px; font-variant-numeric:tabular-nums; font-size:22px}
.hud b{font-weight:400; background:var(--ink); color:var(--paper); padding:0 6px}

/* pips */
.pips{display:flex; gap:6px; align-items:center}
.pip{width:16px; height:16px; border:2px solid var(--ink); background:var(--paper)}
.pip.on{outline:2px solid var(--ink); outline-offset:2px}
.pip.ok{background:var(--ink)}
.pip.no{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,var(--paper) 2px 5px)}
.pip.gap{width:6px; border:none}
.pip.final{width:28px}

/* stage: .actor carries the brief right/wrong feedback, .cube flips between cards.
   Perspective is tied to the card height so the front face always renders 10/9 of its box: it spills
   ch/18 past the box at top and bottom, and the stage padding reserves that plus real breathing room. */
.stage{padding-top:calc(var(--ch) / 18 + var(--stage-top)); padding-bottom:calc(var(--ch) / 18 + var(--stage-bottom)); display:flex; justify-content:center; width:100%}
/* The console paints above the stage, so even a flip that reaches it passes behind the answer box, never over it. */
.console{position:relative; z-index:1}
.actor{perspective:calc(var(--ch) * 5)}

/* cube */
.cube{
  position:relative; width:var(--cw); height:var(--ch);
  transform-style:preserve-3d; transition:transform .7s cubic-bezier(.7,0,.2,1);
}
.face{
  position:absolute; inset:0; background:var(--face); border:5px solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:16px 18px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 5px var(--face), inset 0 0 0 7px var(--ink);
}
.face:nth-child(1){transform:rotateX(0deg) translateZ(calc(var(--ch) / 2))}
.face:nth-child(2){transform:rotateX(90deg) translateZ(calc(var(--ch) / 2))}
.face:nth-child(3){transform:rotateX(180deg) translateZ(calc(var(--ch) / 2))}
.face:nth-child(4){transform:rotateX(270deg) translateZ(calc(var(--ch) / 2))}
.f-cat{font-family:var(--display); font-size:clamp(20px, 6.4vw, 30px); line-height:1.12; text-wrap:balance; letter-spacing:.02em}
.f-kicker{font-family:var(--term); font-size:20px; letter-spacing:.18em; color:var(--dim); margin-bottom:10px}
.f-kicker--below{margin:12px 0 0}
.f-val{font-family:var(--display); font-size:86px; line-height:1; letter-spacing:-.02em}
.f-val--lg{font-size:72px}
.f-val small{display:block; font-size:14px; letter-spacing:.3em; margin-top:10px}
.f-q{font-family:var(--term); font-size:clamp(20px, 5.6vw, 25px); line-height:1.12; text-transform:uppercase; text-wrap:balance}
.f-qhead{position:absolute; top:14px; left:18px; right:18px; display:flex; justify-content:space-between; gap:12px; font-size:17px; letter-spacing:.12em; color:var(--dim)}
/* clue card: header row on top, timer fuse along the bottom, clue centered between */
.face.is-q{padding:40px 20px 40px}
.fuse{position:absolute; left:18px; right:18px; bottom:16px; display:flex; align-items:center; gap:10px}
.fuse-bar{flex:1; height:6px; background:var(--grid); position:relative; overflow:hidden}
.fuse-bar i{position:absolute; inset:0; background:var(--ink); transform-origin:left; display:block}
.fuse-secs{font-size:18px; line-height:1; letter-spacing:.06em; color:var(--dim); min-width:2ch; text-align:right; font-variant-numeric:tabular-nums}
.fuse.low .fuse-secs{color:var(--ink); animation:blink 1s steps(1) infinite}
.f-logo{font-family:var(--logo); font-size:clamp(30px, 10vw, 44px); line-height:1.05; font-weight:400}

/* verdict cards: correct is the one inverted card in the game, so it reads at a glance */
.face.is-right{background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 5px var(--ink), inset 0 0 0 7px var(--paper)}
.face.is-right .f-kicker{color:var(--paper); opacity:.75}
.v-mark{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:17px; letter-spacing:.1em; margin-bottom:14px}
.v-mark svg{width:22px; height:22px; flex:none}
.v-pts{font-family:var(--display); font-size:54px; line-height:1; letter-spacing:-.01em}
.v-ans{font-family:var(--display); font-size:clamp(18px, 5.4vw, 26px); line-height:1.15; text-wrap:balance}
.v-sub{margin-top:12px; font-size:20px; letter-spacing:.1em; color:var(--dim)}
.face.is-right .v-sub{color:var(--paper); opacity:.75}
.v-sub s{text-decoration-thickness:2px}

/* console */
.console{width:100%; max-width:560px; display:flex; flex-direction:column; gap:14px; min-height:150px}
.status{text-align:center; font-size:24px; letter-spacing:.06em; min-height:28px; text-transform:uppercase}
/* answer bar and wager row: input and button share one height and one hard shadow */
.answer,.row{display:flex; gap:12px; align-items:stretch}
.answer.is-idle input::placeholder{color:var(--ink); letter-spacing:.06em}
.answer.is-idle button{opacity:.3; pointer-events:none}
input[type=text],input[type=number]{
  flex:1; min-width:0; height:56px; font-family:var(--term); font-size:28px; padding:0 14px;
  border:3px solid var(--ink); background:var(--paper); color:var(--ink); border-radius:0; text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink); -webkit-appearance:none; appearance:none;
}
input::placeholder{color:var(--dim); opacity:1}
input:focus{outline:none}
.answer button,.row button{min-width:84px; padding:0 18px}
button{
  font-family:var(--display); font-size:15px; letter-spacing:.06em; padding:12px 16px; cursor:pointer;
  border:3px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:0;
  box-shadow:4px 4px 0 var(--dim); transition:transform .08s, box-shadow .08s;
}
button.ghost{background:var(--paper); color:var(--ink); box-shadow:4px 4px 0 var(--ink)}
button:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
button:focus-visible{outline:3px dashed var(--ink); outline-offset:4px}
button,input{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
.chips{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
.chips button{font-size:12px; padding:12px 8px}
.chips button[aria-pressed=true]{background:var(--ink); color:var(--paper); box-shadow:2px 2px 0 var(--ink); transform:translate(2px,2px)}
.help{font-size:20px; color:var(--dim); text-align:center}

/* intro + results panels */
.panel{border:3px solid var(--ink); background:var(--paper); padding:14px 16px; box-shadow:6px 6px 0 var(--ink); display:flex; flex-direction:column; gap:10px}
.rules{margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:21px; text-wrap:pretty}
.rules li{display:grid; grid-template-columns:1.1em 1fr}
.rules li::before{content:"▸"}
.start{font-size:22px; padding:16px; align-self:center; min-width:220px}
.tally{text-align:center; font-size:22px; letter-spacing:.06em}
.share{width:100%; font-size:17px; padding:16px}
.res{list-style:none; margin:4px 0 0; padding:0; border-top:3px solid var(--ink)}
.res li{border-bottom:1px solid var(--grid)}
.res li:last-child{border-bottom:3px solid var(--ink)}
.res summary{display:grid; grid-template-columns:24px 1fr auto 14px; gap:12px; align-items:center; padding:10px 2px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
.res summary::-webkit-details-marker{display:none}
.res summary::after{content:"+"; font-size:24px; line-height:1; text-align:center; color:var(--dim)}
.res details[open] summary::after{content:"−"; color:var(--ink)}
.res summary:focus-visible{outline:3px dashed var(--ink); outline-offset:2px}
.res .clue{margin:0 0 12px 36px; padding:10px 12px; border-left:3px solid var(--ink); background:#f6f6f6; font-size:20px; line-height:1.2; text-transform:uppercase; text-wrap:pretty}
.res .badge{width:24px; height:24px; border:2px solid var(--ink); display:grid; place-items:center}
.res .badge svg{width:14px; height:14px}
.res .ok .badge{background:var(--ink); color:var(--paper)}
.res .cat{display:block; font-size:16px; letter-spacing:.12em; color:var(--dim)}
.res .ans{display:block; font-size:22px; line-height:1.1}
.res .you{font-size:18px; color:var(--dim)}
.res .pts{font-size:22px; font-variant-numeric:tabular-nums; text-align:right}
.res .no .pts{color:var(--dim)}
.next{text-align:center; color:var(--dim); font-variant-numeric:tabular-nums}
.copybox{width:100%; font-family:var(--term); font-size:18px; border:2px solid var(--ink); height:110px}
.noscript{max-width:560px; text-align:center}

/* 80s overlay */
.scan{pointer-events:none; position:fixed; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); z-index:20}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.shake{animation:shake .4s}
.hud b.bump{animation:bump .45s ease-out}
@keyframes bump{40%{transform:scale(1.18)}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
/* phones */
@media (max-width:420px){
  .app{gap:14px}
  header{padding:6px 10px}
  .brand{font-size:12px; gap:8px; white-space:nowrap}
  .brand img{width:18px; height:18px}
  .hud{gap:10px; font-size:20px; white-space:nowrap}
  .rules{font-size:19px; gap:6px}
  .panel{padding:12px 14px}
  .status{font-size:22px}
  .help{font-size:18px}
}
@media (max-width:359px){
  .hud .lbl{display:none}
}
/* Phones: compact enough that the header, card and answer bar sit above the keyboard on most phones.
   While a round is on, the page itself is locked so it can't be dragged around under the keyboard. */
@media (pointer: coarse) and (max-width:600px){
  :root{--ch:200px; --stage-top:6px; --stage-bottom:18px}
  .app{gap:12px; padding-top:calc(12px + env(safe-area-inset-top, 0px))}
  .face{padding:14px 16px}
  .face.is-q{padding:36px 16px 34px}
  .f-qhead{top:12px; left:16px; right:16px; font-size:16px}
  .fuse{left:16px; right:16px; bottom:14px}
  .f-q{font-size:clamp(16px, calc(var(--cw) / 16), 22px); line-height:1.1} /* scale with the card, not the screen */
  .console{min-height:0}
  .answer + .help{display:none} /* the phone keyboard has its own Go key */
  html.playing, html.playing body{overflow:hidden; overscroll-behavior:none}
}

@media (prefers-reduced-motion: reduce){
  .cube{transition-duration:.01s}
  .blink,.shake,.hud b.bump{animation:none}
}