/* Base rules the hosted version got from its page wrapper. */
[hidden]{display:none!important}

/* Layout: one fixed column like a TV frame. The host speaks at the top, one task
   sits flush left in the middle, one input sits at the bottom. The page stays quiet
   so the explosions (primary-colour geometry) are the only loud thing on it. */
:root{
  --ground:#F2EEE3;
  --ink:#121210;
  --mute:#6F6A5D;
  --line:#D8D2C2;
  --signal:#CF2B1D;
  --signal-text:#CF2B1D;
  --pop:#EFB000;
  --cool:#1E4FD6;
  --font-display:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --key:clamp(46px,7.4vh,62px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ground:#121210;--ink:#F2EEE3;--mute:#9C9687;--line:#33312B;--signal:#FF5B49;--signal-text:#FF5B49;--pop:#FFC83A;--cool:#6A96FF;color-scheme:dark}
}
:root[data-theme="dark"]{--ground:#121210;--ink:#F2EEE3;--mute:#9C9687;--line:#33312B;--signal:#FF5B49;--signal-text:#FF5B49;--pop:#FFC83A;--cool:#6A96FF;color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

.app{width:100%;max-width:560px;height:100%;min-height:0;max-height:860px;padding-inline:20px;padding-block:14px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:14px}
.app.boom{animation:boom .36s linear}

.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:12px;row-gap:2px}
.brand{font-weight:800;font-size:18px;letter-spacing:-0.02em}
.bar-right{display:flex;gap:12px;align-items:baseline;margin-left:auto}
.mono{font-family:var(--font-data);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.textbtn{padding:6px 0}
.textbtn:hover{color:var(--ink)}
.money{font-family:var(--font-data);font-size:15px;font-variant-numeric:tabular-nums;min-width:6ch;text-align:right}
.money.bump{animation:bump .22s ease-out}
.money.pen{color:var(--signal-text)}

.progress{display:flex;gap:3px;height:6px}
.progress span{flex:1;background:var(--line)}
.progress .ok{background:var(--ink)}
.progress .no{background:var(--signal)}
.progress .now{background:var(--mute)}

.hostwrap{display:grid;gap:4px}
.host{margin:0;min-height:2.7em;font-size:18px;font-weight:700;letter-spacing:-0.01em;line-height:1.35;text-wrap:balance}
.host.in{animation:rise .16s ease-out}

.screen{min-height:0;display:flex;flex-direction:column;gap:16px}

/* Lobby */
#lobby{overflow-y:auto}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
@media (min-width:520px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:10px 10px 8px;text-align:left;display:grid;gap:6px;align-content:start;min-width:0}
.tnum{font-weight:800;font-size:28px;line-height:1;letter-spacing:-0.03em}
.tbar{height:3px;background:var(--line);display:block}
.tbar i{display:block;height:100%;background:var(--ink)}
.tbest{font-family:var(--font-data);font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.tile[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.tile[aria-pressed="true"] .tbar{background:var(--mute)}
.tile[aria-pressed="true"] .tbar i{background:var(--ground)}
.tile[aria-pressed="true"] .tbest{color:var(--ground)}
.tile.legend{font-family:var(--font-data);font-size:10px;line-height:1.3;color:var(--mute);cursor:default}
.name{display:flex;align-items:baseline;gap:12px}
.name input{flex:1;min-width:0;font:inherit;font-weight:700;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:6px 0}
.name input::placeholder{color:var(--mute);font-weight:500}
.fine{margin:0;font-size:14px;color:var(--mute)}
.spacer{flex:1;min-height:0}

.primary{background:var(--ink);color:var(--ground);font-weight:800;font-size:20px;letter-spacing:-0.01em;padding:18px 20px;text-align:left;display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%}
.primary small{font-family:var(--font-data);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.secondary{border:1px solid var(--ink);padding:14px 20px;font-weight:700;text-align:left;width:100%}

/* Round card */
#card{justify-content:flex-end;cursor:pointer}
.card-title{margin:0;font-weight:800;font-size:clamp(44px,13vw,84px);line-height:.95;letter-spacing:-0.04em;text-wrap:balance}
.card-rule{margin:0;font-size:18px;max-width:32ch}
.drain{height:6px;background:var(--line);overflow:hidden}
.drain i{display:block;height:100%;background:var(--ink);transform-origin:left}

/* Play */
#play{justify-content:flex-end}
.stage{display:flex;flex-direction:column;gap:4px;min-width:0}
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.value{font-family:var(--font-data);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.line{font-weight:800;font-size:clamp(52px,17vw,104px);line-height:1;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;align-self:flex-start;max-width:100%;padding:0 .08em 0 0;transform-origin:left bottom}
.line s{text-decoration-thickness:.07em}
.slot{color:var(--mute);margin-right:.05em}
.stage.right #l2{background:var(--ink);color:var(--ground);padding-inline:.1em;animation:punch .3s cubic-bezier(.2,1.7,.4,1)}
.stage.wrong #l2{color:var(--signal-text);animation:droop .55s ease-in forwards}
.stage.wrong .hit{color:var(--signal-text)}
.stage.wrong .value{color:var(--signal-text)}
.stage.shake{animation:shake .24s linear}
.stage.blown .line{visibility:hidden}
#l2.bad{color:var(--signal-text)}
#l2.swap{animation:rise .12s ease-out}

.clock{height:6px;background:var(--line);overflow:hidden}
.clock i{display:block;height:100%;background:var(--ink);transform-origin:left}
.clock.late i{background:var(--signal)}

.controls{height:calc(var(--key)*4 + 1px)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:var(--key);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.pad button{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.pad .wide{grid-column:span 2}
.binary{display:grid;grid-template-columns:1fr 1fr;height:100%;border:1px solid var(--ink)}
.binary button + button{border-left:1px solid var(--ink)}
.big{font-weight:800;font-size:32px;letter-spacing:-0.02em;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:16px;text-align:left}
.big small{font-family:var(--font-data);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.rushbtn{width:100%;height:100%;border:1px solid var(--ink)}
.pad button:active,.big:active{background:var(--ink);color:var(--ground)}
.big:active small{color:var(--ground)}
@media (hover:hover){
  .pad button:hover,.big:hover,.secondary:hover,.tile:not(.legend):not([aria-pressed="true"]):hover{background:var(--line)}
}
@media (hover:none){.big small,.primary small,.skip{display:none}}

/* Wrap */
#wrap{overflow-y:auto}
.total{margin:0;font-weight:800;font-size:clamp(56px,17vw,104px);line-height:1;letter-spacing:-0.045em;font-variant-numeric:tabular-nums}
.verdict{margin:0;font-weight:700;font-size:18px;text-wrap:balance}
.board{margin-top:14px}
.board ol{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.board li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-family:var(--font-data);font-size:13px}
.board li.me{color:var(--signal-text);font-weight:700}
.chart{display:grid;gap:6px;--mark:75%}
.row{display:grid;grid-template-columns:7ch minmax(0,1fr) 7ch;gap:10px;align-items:center;font-family:var(--font-data);font-size:13px;font-variant-numeric:tabular-nums}
.track{position:relative;height:12px}
.track::after{content:"";position:absolute;left:var(--mark);top:-3px;bottom:-3px;width:1px;background:var(--mute)}
.fill{display:block;height:100%;background:var(--ink)}
.val{text-align:right}
.row.miss .fill{background:none;border:1px solid var(--signal)}
.row.miss .val{color:var(--signal-text)}
.actions{display:grid;gap:8px}
.actions,#startBtn{position:sticky;bottom:0}
.actions{background:var(--ground);padding-top:8px}

@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes bump{50%{transform:translateY(-3px)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes punch{0%{transform:scale(.88)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes droop{30%{transform:rotate(-1deg)}100%{transform:rotate(3deg) translateY(5px)}}
@keyframes boom{10%{transform:translate(-6px,3px)}30%{transform:translate(6px,-4px)}50%{transform:translate(-4px,-2px)}70%{transform:translate(3px,3px)}90%{transform:translate(-1px,1px)}}
@media (prefers-reduced-motion:reduce){.host.in,.money.bump,.stage.shake,#l2.swap,.app.boom,.stage.right #l2,.stage.wrong #l2{animation:none}}
.app.has-dot .host{padding-right:96px}
/* Where the mascot rests beside the host line, keep the block tall enough to hold it. */
.app.has-dot[data-screen="lobby"] .hostwrap,.app.has-dot[data-screen="wrap"] .hostwrap{min-height:104px;align-content:start}
/* A character's colours sweep in from the tapped tile. */
.wipe{position:fixed;inset:0;z-index:3;pointer-events:none;clip-path:circle(0 at var(--wx) var(--wy));transition:clip-path .45s cubic-bezier(.3,.7,.2,1)}
.wipe.go{clip-path:circle(150vmax at var(--wx) var(--wy))}
@media (prefers-reduced-motion:reduce){.wipe{clip-path:none;opacity:0;transition:opacity .2s}.wipe.go{opacity:1}}

/* Zoomed on big screens (see fit() in game.js): fixed design size, the zoom does the rest. */
.app.scaled{width:560px;max-width:none;height:860px;max-height:none;--key:62px}
/* On a phone the bar is full once a game starts, so the full-screen button waits in the lobby. */
@media (max-width:520px){.app:not([data-screen="lobby"]) #fullBtn{display:none}}