:root{
  --void:#0a0a0a; --surface:#121212; --surface2:#181818; --line:#232323;
  --ink:#f2f2f2; --muted:#9ca3af; --dim:#6b7280;
  --gold:#f5c518; --gold-ink:#141000;
  --good:#4ade80; --bad:#f87171; --warn:#fbbf24;
  --sans:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Space Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--void);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100dvh}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--gold)}
#app{max-width:560px;margin:0 auto;padding:0 16px;min-height:100dvh;position:relative}

.screen{display:none;min-height:100dvh;padding:28px 0 32px;flex-direction:column}
.screen.on{display:flex}

/* ── intro ── */
.brandline{font-family:var(--mono);font-weight:700;letter-spacing:.18em;font-size:13px;color:var(--gold);display:flex;align-items:center;gap:8px}
.stamp-mini{display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid var(--gold);border-radius:5px;font-size:13px;transform:rotate(-8deg)}
h1{font-size:clamp(38px,11vw,56px);line-height:1.02;font-weight:900;letter-spacing:-.03em;margin:22px 0 12px}
.hl{color:var(--gold)}
.lede{font-size:18px;color:var(--muted);margin-bottom:22px}
.setup{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:22px}
.setup p{font-size:15px;line-height:1.5;color:#d4d4d8}
.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.crew .who{display:flex;align-items:center;gap:8px;font-size:13px}
.crew .who small{display:block;color:var(--dim);font-size:11px}
.av{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#0a0a0a}
.fine{color:var(--dim);font-size:13px;text-align:center;margin-top:12px}
.best{margin-top:18px;text-align:center;font-size:14px;color:var(--muted)}
.best b{color:var(--gold)}
.made{margin-top:auto;padding-top:28px;text-align:center;color:var(--dim);font-size:12px}

/* ── buttons ── */
.btn{display:block;width:100%;border-radius:12px;padding:14px 18px;font-weight:700;font-size:16px;text-align:center;transition:transform .08s,filter .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--gold);color:var(--gold-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.big{padding:18px;font-size:18px}
.btn.ghost{border:1px solid var(--line);color:var(--muted);margin-top:10px}

/* ── hud ── */
#play{padding-top:14px}
.hud{position:sticky;top:0;background:var(--void);padding:6px 0 10px;z-index:3}
.hud-row{display:flex;align-items:center;gap:10px;font-size:13px}
.shiftlbl{font-family:var(--mono);font-weight:700;color:var(--gold)}
.left{color:var(--muted);flex:1}
.rulesbtn{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--ink)}
.clock{height:6px;background:var(--surface2);border-radius:6px;margin-top:10px;overflow:hidden}
.clockfill{height:100%;width:100%;background:var(--gold);border-radius:6px;transition:width .25s linear}
.clockfill.low{background:var(--bad)}

/* ── the card ── */
.desk{position:relative;flex:1;padding-top:6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;position:relative;overflow:hidden;animation:dealIn .28s ease-out}
@keyframes dealIn{from{opacity:0;transform:translateY(18px) rotate(1deg)}to{opacity:1;transform:none}}
.card.out{animation:dealOut .32s ease-in forwards}
@keyframes dealOut{to{opacity:0;transform:translateX(-40px) rotate(-3deg)}}
.agent{display:flex;align-items:center;gap:10px}
.agent .av{width:38px;height:38px;font-size:17px;border-radius:11px}
.agent b{font-size:16px}
.agent .role{color:var(--dim);font-size:13px}
.agent .rule{margin-left:auto;font-size:11px;color:var(--muted);text-align:right;max-width:52%;line-height:1.35}
.ask{margin:14px 0 12px;padding:10px 12px;border-left:3px solid var(--gold);background:#17150a;border-radius:0 8px 8px 0;font-size:14px}
.ask span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold);margin-bottom:3px}
.lines{list-style:none;display:flex;flex-direction:column;gap:6px}
.ln{display:flex;gap:10px;padding:11px 12px;border-radius:10px;border:1px solid transparent;background:var(--surface2);cursor:pointer;font-size:14.5px;line-height:1.45;text-align:left;width:100%;transition:border-color .12s,background .12s}
.ln:hover{border-color:#333}
.ln .k{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);padding-top:3px;width:34px}
.ln.log{color:#b8bcc6}
.ln.log .t{font-family:var(--mono);font-size:13px}
.ln.out{color:var(--ink)}
.ln.picked{border-color:var(--gold);background:#1f1b08}
.stamp{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-12deg) scale(1.6);opacity:0;font-family:var(--mono);font-weight:700;font-size:28px;letter-spacing:.12em;padding:8px 16px;border:4px solid;border-radius:10px;pointer-events:none;background:rgba(10,10,10,.6)}
.stamp.go{animation:stampIn .22s ease-out forwards}
@keyframes stampIn{to{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
.stamp.ok{color:var(--good);border-color:var(--good)}
.stamp.back{color:var(--gold);border-color:var(--gold)}

.actions{position:sticky;bottom:0;background:linear-gradient(transparent,var(--void) 22%);padding:22px 0 max(12px,env(safe-area-inset-bottom))}
.howto{text-align:center;color:var(--dim);font-size:13px;margin-bottom:10px}

.toast{position:fixed;left:50%;top:78px;transform:translate(-50%,-10px);opacity:0;background:#1b1b1b;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;max-width:min(92vw,520px);text-align:center;transition:opacity .15s,transform .15s;z-index:10;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.good{border-color:var(--good)} .toast.bad{border-color:var(--bad)} .toast.meh{border-color:var(--warn)}
.toast b{font-family:var(--mono)}
.toast.good b{color:var(--good)} .toast.bad b{color:var(--bad)} .toast.meh b{color:var(--warn)}

/* ── sheets ── */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;z-index:20}
.sheet.on{opacity:1;pointer-events:auto}
.sheet-card{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom));transform:translateY(24px);transition:transform .18s;max-height:88dvh;overflow:auto}
.sheet.on .sheet-card{transform:none}
.sheet-q{font-weight:800;font-size:18px}
.sheet-line{margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:#1f1b08;border:1px solid var(--gold);font-size:14px;color:#e5e5e5}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reason{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:11px 12px;text-align:left}
.reason:hover{border-color:var(--gold)}
.reason b{display:block;font-size:14.5px}
.reason small{display:block;color:var(--dim);font-size:12px;margin-top:2px;line-height:1.3}
.paused{color:var(--dim);font-size:12px;margin:2px 0 12px}
.rules{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rules li{font-size:14px;line-height:1.45;padding:10px 12px;background:var(--surface2);border-radius:10px}
.rules li b{color:var(--gold)}

/* ── shift end / final ── */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
h2{font-size:30px;font-weight:900;letter-spacing:-.02em;margin:8px 0 16px;line-height:1.1}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.tally div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.tally b{display:block;font-size:24px;font-weight:900}
.tally small{color:var(--dim);font-size:12px}
.review{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.rv{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45}
.rv .h{display:flex;gap:8px;align-items:baseline;font-weight:700}
.rv .h .pts{margin-left:auto;font-family:var(--mono);font-size:13px}
.rv.good .pts{color:var(--good)} .rv.bad .pts{color:var(--bad)} .rv.meh .pts{color:var(--warn)}
.rv.bad{border-color:#4a2020} .rv.meh{border-color:#4a3a14}
.rv q{display:block;margin-top:8px;padding:8px 10px;background:var(--surface2);border-radius:8px;quotes:none;font-size:13px;color:#d4d4d8}
.rv .why{color:var(--muted);margin-top:6px}
.rv .cost{color:var(--bad);margin-top:4px;font-size:13px}

.bigscore{font-size:96px;font-weight:900;letter-spacing:-.04em;line-height:1;margin-top:10px;color:var(--gold)}
.bigscore small{font-size:28px;color:var(--dim);font-weight:700;margin-left:4px}
.rank{margin-bottom:4px}
.ranknote{color:var(--muted);margin-bottom:22px}
.skills{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.sk{font-size:13px}
.sk .row{display:flex;justify-content:space-between;margin-bottom:5px}
.sk .row span:last-child{font-family:var(--mono);color:var(--muted)}
.bar{height:7px;background:var(--surface2);border-radius:7px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:7px}
.bar i.weak{background:var(--bad)}

@media (min-width:640px){
  .screen{padding-top:48px}
  .reasons{grid-template-columns:1fr 1fr}
}
@media (max-width:360px){
  .crew{grid-template-columns:repeat(2,1fr)}
  .reasons{grid-template-columns:1fr}
}