/* Layout: bomb-squad console. Detonator box and cleared numbers on top, teammates (character + wire stands) in the middle, your own bench docked below with the action panel, log at the side on wide screens. One dark look on purpose. */
:root{
  --bg:#0e1317; --panel:#151c22; --panel-2:#1b242b; --line:#28333c; --fg:#e7ecef; --muted:#8d9ba6;
  --blue:#2f86e0; --yellow:#f2c230; --red:#e23b30; --sheath:#4b5662; --copper:#e08a3c; --metal:#a7b1ba; --metal-dark:#6c7680;
  --accent:#ff8a3d; --ok:#4cc38a; --lcd:#ff4b3e; --token:#f3efe4; --tag:#f6f2e6;
  --f-display:"Saira Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{font:15px/1.45 var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 40px;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:8px 14px;font-weight:600}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:#1d0f04}
button.ghost{background:transparent}
input,select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
h1,h2,h3{font-family:var(--f-display);letter-spacing:.02em;margin:0;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;display:grid;gap:16px}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand h1{font-size:34px;font-weight:800;text-transform:uppercase}
.brand h1 span{color:var(--accent)}
.eyebrow{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.muted{color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px;min-width:0;align-content:start}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.code{font:700 18px var(--f-mono);letter-spacing:.18em}
.pill{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.pill.live{color:var(--accent);border-color:var(--accent)}
.pill.cap{color:var(--yellow);border-color:var(--yellow)}
.list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.list li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;background:var(--panel-2);border-radius:8px}
label.field{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.note{font-size:13px;color:var(--muted);max-width:65ch;margin:0}

/* ---------- characters ---------- */
.av{flex:none;width:58px;height:58px;display:block}
.av svg{width:100%;height:100%;overflow:visible;display:block}
.av.big{width:92px;height:92px}
.av.sm{width:36px;height:36px}
.av .body{transform-box:fill-box;transform-origin:50% 100%}
.av .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.mood-idle .body{animation:bob 3.2s ease-in-out infinite}
.mood-think .body{animation:think 1.6s ease-in-out infinite}
.mood-happy .body,.mood-cheer .body{animation:hop .7s ease-out 2}
.mood-cheer .body{animation:hop .6s ease-out infinite}
.mood-oops .body{animation:shiver .5s ease-in-out 2}
.mood-soot .body{animation:wobble 2.4s ease-in-out infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes think{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-12px) scale(1.04,.97)}70%{transform:translateY(0) scale(1.05,.94)}}
@keyframes shiver{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.lineup{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.lineup figure{margin:0;display:grid;justify-items:center;gap:2px;font:600 13px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bubble{position:relative;background:var(--tag);color:#16191c;font:600 13px var(--f-body);padding:4px 10px;border-radius:12px;max-width:220px}
.bubble::before{content:"";position:absolute;left:-6px;top:50%;margin-top:-5px;border:5px solid transparent;border-right-color:var(--tag);border-left:0}
.bubble.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.picker button{display:grid;justify-items:center;gap:2px;padding:8px 4px;font:600 13px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.picker button.on{border-color:var(--accent);background:rgba(255,138,61,.12)}
.picker small{font:500 11px var(--f-body);text-transform:none;letter-spacing:0;color:var(--muted)}
.avbtn{background:none;border:0;padding:0}

/* ---------- detonator ---------- */
.rail{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.bomb{display:flex;gap:14px;align-items:center;background:#0a0d10;border:2px solid #2b343c;border-radius:10px;padding:8px 12px;box-shadow:inset 0 0 0 3px #12181d}
.lcd{font:700 30px var(--f-mono);color:var(--lcd);text-shadow:0 0 10px rgba(255,75,62,.7);background:#1a0807;border-radius:6px;padding:0 10px;line-height:44px;min-width:76px;text-align:center;letter-spacing:.06em}
.lcd .colon{animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:.15}}
.lcd-label{font:600 10px var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.fuses{display:flex;gap:6px;align-items:center}
.bulb{width:16px;height:16px;border-radius:50%;background:#2a1513;border:2px solid #4a2522}
.bulb.hit{background:var(--lcd);border-color:#ff9d94;box-shadow:0 0 10px var(--lcd)}
.skull{width:28px;height:28px;color:var(--red)}
.bomb.alarm{animation:alarm .9s ease-out}
.bomb.alarm .lcd{animation:lcdflash .3s steps(1) 3}
@keyframes alarm{0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-5px)}30%,60%,90%{transform:translateX(5px)}}
@keyframes lcdflash{50%{background:var(--lcd);color:#1a0807}}
.cleared{display:flex;gap:4px;flex-wrap:wrap}
.cleared span{font:700 12px var(--f-mono);width:24px;height:24px;display:grid;place-items:center;border-radius:5px;background:var(--panel-2);color:var(--muted)}
.cleared span.done{background:var(--ok);color:#06210f}
.cleared span.done.new{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.turn{font:700 20px var(--f-display);text-transform:uppercase;letter-spacing:.04em;margin:0}
.turn b{color:var(--accent)}

/* ---------- table ---------- */
.table{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}
@media (max-width:900px){.table{grid-template-columns:minmax(0,1fr)}}
.seats{display:grid;gap:12px;min-width:0}
.seat{display:grid;gap:8px;min-width:0}
.seat-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seat-head .who{display:grid;gap:2px}
.seat-head h3{font-size:20px;line-height:1}
.seat.active .seat-head h3{color:var(--accent)}
.stands{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.stand{display:flex;gap:3px;padding:16px 10px 6px;background:linear-gradient(#1f2931,#141a1f);border-radius:10px;border-bottom:5px solid #080b0e;overflow-x:auto;max-width:100%;position:relative}
.stand::before{content:"";position:absolute;left:8px;right:8px;top:21px;height:4px;border-radius:2px;background:#0b0f12}
.stand::after{content:"";position:absolute;left:8px;right:8px;bottom:12px;height:4px;border-radius:2px;background:#0b0f12}

/* ---------- wires ---------- */
.wire{flex:none;width:40px;height:74px;position:relative;padding:0;border:0;background:none;border-radius:6px;z-index:1}
.wire svg{width:100%;height:100%;display:block;overflow:visible}
button.wire{cursor:pointer;transition:transform .15s}
button.wire:hover{transform:translateY(-4px)}
button.wire:hover .cable{animation:sway .6s ease-in-out}
button.wire:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wire.sel{transform:translateY(-6px);filter:drop-shadow(0 0 6px var(--accent))}
.wire.sel .cable{animation:sway 1s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateX(0)}30%{transform:translateX(-1.5px)}70%{transform:translateX(1.5px)}}
.wire .cable{transform-box:view-box}
.wire.cut{opacity:.9}
.snap-up{animation:snapup .5s cubic-bezier(.2,1.8,.4,1)}
.snap-down{animation:snapdown .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes snapup{0%{transform:translateY(4px)}100%{transform:translateY(0)}}
@keyframes snapdown{0%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.wire.jolt{animation:jolt .5s ease-in-out}
@keyframes jolt{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-3deg)}75%{transform:translateX(3px) rotate(3deg)}}
.sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe27a;box-shadow:0 0 6px #ffb640;animation:spark .6s ease-out forwards}
@keyframes spark{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.info{position:absolute;top:-12px;left:50%;transform:translateX(-50%);min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:var(--token);color:#141414;font:700 12px var(--f-mono);display:grid;place-items:center;border:2px solid var(--bg);z-index:2}
.info.y{background:var(--yellow)}
.info.drop{animation:drop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{0%{transform:translate(-50%,-24px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
.mine{border:1px solid var(--accent);background:linear-gradient(180deg,rgba(255,138,61,.07),transparent 60%),var(--panel)}
.actions{display:grid;gap:10px}
.guesses{display:flex;gap:6px;flex-wrap:wrap}
.guesses button{font:700 16px var(--f-mono);min-width:44px;padding:8px}
.guesses button.y{background:var(--yellow);color:#2a2104;border-color:var(--yellow);font:700 13px var(--f-body)}
.log{font-size:13px;display:grid;gap:6px;max-height:520px;overflow:auto;margin:0;padding:0;list-style:none}
.log li{padding:6px 8px;border-left:2px solid var(--line)}
.log li:first-child{border-color:var(--accent)}
.info.r{background:var(--red);color:#fff}
.online{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);margin-right:6px;vertical-align:middle;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}

/* ---------- equipment ---------- */
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.card{position:relative;display:grid;gap:4px;align-content:start;text-align:left;padding:10px 10px 10px 44px;min-height:84px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(160deg,#1f2a33,#151c22);font-weight:400}
.card .num{position:absolute;left:8px;top:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--f-mono);background:var(--blue);color:#fff;border:2px solid #0b0f12}
.card b{font:700 15px var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.card small{font-size:12px;color:var(--muted);line-height:1.3}
.card .state{font:600 10px var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.card.locked{opacity:.5}
.card.locked .num{background:var(--panel-2);color:var(--muted)}
.card.ready{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 0 18px rgba(76,195,138,.25)}
.card.ready .state{color:var(--ok)}
.card.ready.can{animation:glow 1.8s ease-in-out infinite}
.card.ready.can:hover{transform:translateY(-2px)}
.card.armed{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.card.used{opacity:.35;filter:grayscale(1)}
.card.used b{text-decoration:line-through}
.card.justready{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px var(--ok),0 0 10px rgba(76,195,138,.2)}50%{box-shadow:0 0 0 1px var(--ok),0 0 26px rgba(76,195,138,.55)}}
.armedbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 10px;border-radius:8px;background:rgba(255,138,61,.12);border:1px dashed var(--accent);font-weight:600}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.checks label{display:flex;gap:6px;align-items:center;font-size:13px}

/* ---------- effects ---------- */
.shake{animation:shake .6s ease-out}
@keyframes shake{0%,100%{transform:translate(0,0)}10%{transform:translate(-10px,6px)}25%{transform:translate(9px,-7px)}40%{transform:translate(-7px,-4px)}55%{transform:translate(6px,5px)}70%{transform:translate(-3px,2px)}}
.boomfx{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.boomfx .flash{position:absolute;left:50%;top:45%;width:60vmax;height:60vmax;margin:-30vmax;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffe08a 18%,#ff8a3d 38%,#e23b30 55%,transparent 70%);animation:blast 1.1s ease-out forwards}
.boomfx .smoke{position:absolute;bottom:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(120,128,136,.7),rgba(60,66,72,0) 70%);animation:smoke 2.6s ease-out forwards}
@keyframes blast{0%{transform:scale(.05);opacity:1}60%{opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes smoke{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-70vh) scale(2.4);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall 2.8s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
.overlay{position:fixed;inset:0;background:rgba(5,8,10,.82);display:grid;place-items:center;z-index:20;padding:max(16px,env(safe-area-inset-left,0px))}
.overlay .panel{max-width:460px;width:100%;text-align:center;justify-items:center;animation:pop .4s cubic-bezier(.3,1.4,.5,1)}
.overlay h2{font-size:44px;text-transform:uppercase}
.won h2{color:var(--ok)} .lost h2{color:var(--red)}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line);padding:10px 16px;border-radius:8px;z-index:30;max-width:calc(100% - 32px)}
@media (max-width:520px){.equip{grid-template-columns:1fr 1fr}.card{min-height:0;padding:8px 8px 8px 40px}.card small{display:none}.card.ready.can small,.card.armed small{display:block}.wire{width:31px;height:60px}.brand h1{font-size:28px}.stand{padding:14px 6px 4px}.av{width:46px;height:46px}.lcd{font-size:24px;line-height:36px;min-width:60px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- self-hosted additions ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(40px,env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
img{max-width:100%}
.lbl{flex:none;align-self:flex-end;z-index:3;width:20px;height:20px;margin:0 -11px 2px;border-radius:5px;background:var(--token);color:#111;font:700 13px var(--f-mono);display:grid;place-items:center;border:2px solid var(--bg)}
.chip{font:600 12px var(--f-body);padding:2px 8px;border-radius:99px;border:1px solid var(--line)}
.chip.red{color:#ff8a82;border-color:var(--red)}
.chip.yellow{color:var(--yellow);border-color:var(--yellow)}
.tabs{display:flex;gap:6px}
.tabs button[aria-selected="true"]{border-color:var(--accent);background:rgba(255,138,61,.12)}
.auth{display:grid;gap:10px;max-width:360px}
.err{color:#ff8a82;margin:0;font-size:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tiles div{background:var(--panel-2);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.tiles b{font:800 30px var(--f-display);line-height:1;font-variant-numeric:tabular-nums}
.tiles span{font-size:12px;color:var(--muted)}
.missions,.history{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.missions li,.history li{display:flex;gap:10px;align-items:center;padding:8px 10px;background:var(--panel-2);border-radius:8px}
.missions li span:last-child,.history li span:last-child{display:grid;gap:1px;min-width:0}
.missions small,.history small{color:var(--muted);font-size:12px}
.achs{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ach{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;opacity:.55}
.ach.got{opacity:1;border-color:var(--accent)}
.ach>span:last-child{display:grid;gap:2px;min-width:0}
.ach small{color:var(--muted);font-size:12px}
.ach .when{color:var(--ok)}
.achicon{font-size:22px;line-height:1;filter:grayscale(1)}
.ach.got .achicon{filter:none}
.achbar{display:block;height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:2px}
.achbar i{display:block;height:100%;background:var(--accent)}
.check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:#06210f}
.missions li.done .check{background:var(--ok);border-color:var(--ok)}
.pill.win{color:var(--ok);border-color:var(--ok)}
.pill.loss{color:#ff8a82;border-color:var(--red)}
.scroll{overflow-x:auto}
.lb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lb th{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.lb td{padding:6px 8px;border-bottom:1px solid var(--line)}
.lb tr.you td{background:rgba(255,138,61,.08)}
button.row.on{border-color:var(--accent);background:rgba(255,138,61,.12)}

/* ---------- missions 9-19 ---------- */
.info.f{background:#2a2f35;color:#ffb3ad;border-color:#ff8a82;text-decoration:line-through}
.pill.role{color:#ffb3ad;border-color:var(--red)}
.mission .mrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.mission .mrow>div{display:grid;gap:6px;min-width:0}
.mission audio{max-width:100%;width:320px}
.numcard{display:grid;place-items:center;width:44px;height:58px;border-radius:7px;background:linear-gradient(160deg,#2c8a86,#1d5f5c);color:#fff;font:800 22px var(--f-mono);border:2px solid #0b0f12;line-height:1}
.numcard small{font:600 10px var(--f-body);opacity:.85}
.numcard.done{opacity:.35;text-decoration:line-through}
.numcard.now{box-shadow:0 0 0 2px var(--accent),0 0 14px rgba(255,138,61,.4)}
.numcard.deadly{background:linear-gradient(160deg,#8a2c2c,#5f1d1d);box-shadow:0 0 0 2px var(--red)}
.arrow{color:var(--muted);font-size:20px}
.timer{font:800 34px var(--f-mono);color:var(--lcd);text-shadow:0 0 10px rgba(255,75,62,.5);letter-spacing:.04em}
.timer.low{animation:lcdflash .5s steps(1) infinite}
.timer.paused{color:var(--muted);text-shadow:none}
.card .tape{position:absolute;right:8px;top:8px;min-width:24px;height:30px;padding:0 4px;border-radius:4px;display:grid;place-items:center;font:700 13px var(--f-mono);background:linear-gradient(160deg,#2c8a86,#1d5f5c);color:#fff;transform:rotate(6deg)}
.card.yellowcard .num{background:var(--yellow);color:#2a2104}
.card.facedown{background:repeating-linear-gradient(135deg,#222b33 0 8px,#1b232a 8px 16px)}

/* ---------- full-body characters ---------- */
.av{width:58px;height:68px}
.av.big{width:96px;height:112px}
.av.sm{width:34px;height:40px}
.av svg{overflow:visible}
.av .arm{transform-box:view-box}
.mood-cheer .arm-l{transform-origin:40px 82px;animation:waveL .45s ease-in-out infinite alternate}
.mood-cheer .arm-r{transform-origin:80px 82px;animation:waveR .45s ease-in-out infinite alternate}
.mood-think .arm-r{transform-origin:80px 82px;animation:chin 2.4s ease-in-out infinite}
.mood-idle .arm-r{transform-origin:80px 82px;animation:fidget 3.2s ease-in-out infinite}
.mood-oops .arm{animation:none}
.av .smoke-puff{animation:puff 2.4s ease-out infinite}
@keyframes waveL{from{transform:rotate(8deg)}to{transform:rotate(-10deg)}}
@keyframes waveR{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes chin{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes fidget{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-12deg)}}
@keyframes puff{0%{transform:translateY(6px);opacity:0}30%{opacity:.6}100%{transform:translateY(-10px);opacity:0}}
.lineup figure{gap:4px}
@media (max-width:520px){.av{width:46px;height:54px}.av.big{width:72px;height:84px}}

/* ---------- metal-finish tokens ---------- */
.info{background:radial-gradient(circle at 35% 30%,#ffffff 0,#e9e4d6 45%,#b7b09f 100%);box-shadow:0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(0,0,0,.2)}
.info.y{background:radial-gradient(circle at 35% 30%,#fff3b8 0,#f2c230 50%,#b88d12 100%)}
.info.r{background:radial-gradient(circle at 35% 30%,#ff9d94 0,#e23b30 50%,#9c1d14 100%)}
.info.f{background:radial-gradient(circle at 35% 30%,#4a525b 0,#2a2f35 60%,#16191c 100%)}

/* ---------- game table: rail + mission ---------- */
.clearedbox{min-width:0;display:grid;gap:6px}
.rail .mission{display:grid;gap:6px;min-width:0;flex:1 1 280px}
.rail .mission .note{margin:0}

/* ---------- one-screen game table on laptops and desktops ---------- */
@media (min-width:760px) and (min-height:440px){
  body:has(.game){padding-block:8px}
  .wrap:has(.game){max-width:1600px}
  .game{height:calc((100dvh - 16px) / var(--z, 1));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px}
  .game .brand h1{font-size:22px}
  .game .brand{gap:8px}
  .game .brand > .muted{display:none}
  .game .panel{padding:8px 12px;gap:6px;border-radius:10px}
  .game .rail{flex-wrap:nowrap;gap:16px;align-items:center}
  .game .lcd{font-size:22px;line-height:32px;min-width:62px}
  .game .bomb{padding:6px 10px;gap:10px}
  .game .bulb{width:13px;height:13px}
  .game .skull{width:22px;height:22px}
  .game .cleared span{width:21px;height:21px;font-size:11px}
  .game .turn{font-size:18px;white-space:nowrap}
  .game .rail .mission .note{font-size:12px}
  .game .numcard{width:34px;height:44px;font-size:17px}
  .game .timer{font-size:26px}
  .game .mid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:8px;min-height:0}
  .game .others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:8px 16px;align-content:start;overflow:auto;min-height:0}
  .game .logp{min-height:0;grid-template-rows:auto minmax(0,1fr)}
  .game .log{max-height:none;overflow:auto;min-height:0}
  .game .dock{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:8px;min-height:0}
  .game .seat{gap:4px}
  .game .seat-head{gap:8px}
  .game .seat-head h3{font-size:17px}
  .game .stands{gap:6px}
  .game .stand{padding:12px 6px 4px;gap:2px}
  .game .stand::before{top:16px}
  .game .stand::after{bottom:9px}
  .game .others .wire{width:26px;height:48px}
  .game .others .av{width:40px;height:47px}
  .game .mine .wire{width:31px;height:57px}
  .game .mine .av{width:46px;height:54px}
  .game .info{top:-10px;min-width:18px;height:18px;font-size:10px;padding:0 3px}
  .game .actions{gap:6px}
  .game .actions .turn{font-size:16px;white-space:normal}
  .game .equip{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;overflow:auto;align-content:start}
  .game .equip .card{min-height:0;padding:6px 6px 6px 32px;gap:2px}
  .game .equip .card small{display:none}
  .game .equip .card.can small,.game .equip .card.armed small{display:none}
  .game .equip .card b{font-size:13px;line-height:1.1}
  .game .equip .card .state{font-size:9px;letter-spacing:.06em}
  .game .equip .card .num{width:22px;height:22px;font-size:11px;left:6px;top:7px}
  .game .equip .card .tape{width:20px;height:24px;min-width:0;font-size:11px;right:4px;top:4px}
  .game .bubble{font-size:12px;padding:3px 8px}
}
/* fewer players = more room: bigger wires */
@media (min-width:760px) and (min-height:440px){
  .game.p4 .others .wire,.game.p5 .others .wire{width:30px;height:55px}
  .game.p2 .others .wire,.game.p3 .others .wire{width:34px;height:62px}
  .game.p4 .mine .wire,.game.p5 .mine .wire{width:36px;height:66px}
}
@media (min-width:900px) and (min-height:860px){
  .game .others .wire{width:36px!important;height:66px!important}
  .game .mine .wire{width:40px!important;height:73px!important}
}

/* ---------- compact home dashboard ---------- */
.homegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
@media (max-width:760px){.homegrid{grid-template-columns:minmax(0,1fr)}}
.mtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.mtile{position:relative;height:40px;border-radius:8px;display:grid;place-items:center;font:700 15px var(--f-mono);background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.mtile.tried{color:var(--fg);border-color:var(--muted)}
.mtile.done{background:var(--ok);color:#06210f;border-color:var(--ok)}
.mtile i{position:absolute;top:1px;right:4px;font-style:normal;font-size:10px}
.lbwrap{overflow-x:auto}
.picker{grid-template-columns:repeat(5,minmax(0,1fr))}
.picker button{padding:6px 2px}

/* ---------- mission cards, briefing, box 20+ panels ---------- */
.mcard{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);text-align:left}
.mhead{display:flex;gap:10px;align-items:center}
.mhead b{display:block;font:700 18px var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.mhead small{color:var(--muted);font-size:12px}
.mnum{flex:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 6px;border-radius:8px;background:var(--accent);color:#141414;font:800 18px var(--f-mono)}
.mcard .story{margin:0;font-style:italic;color:var(--muted)}
.mrules{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px;line-height:1.35}
.mrules.small{font-size:13px;color:var(--muted)}
.mrules.roles{padding:10px 10px 10px 28px;border:1px dashed var(--accent);border-radius:8px;text-align:left}
.overlay.brief .panel{max-width:560px;text-align:left;justify-items:stretch;max-height:calc(100dvh - 32px);overflow:auto}
.overlay.brief .row{justify-content:flex-end}
.linkish{padding:0 6px;font-size:12px}
.wrapopts{flex-wrap:wrap}
.wbadge{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);min-width:18px;height:18px;padding:0 3px;border-radius:5px;background:#111;color:var(--yellow);font:800 11px var(--f-mono);display:grid;place-items:center;border:1px solid var(--yellow);z-index:3}
.wbadge.flip{color:#9fd3ff;border-color:#9fd3ff;bottom:auto;top:-10px}
.wire.flipw{outline:1px dashed #9fd3ff;outline-offset:2px}
.info.memo{background:#2a2f35;color:var(--muted)}
.numcard.mini{width:26px;height:34px;font-size:13px;border-radius:5px}
.pill.cons{color:#9fd3ff;border-color:#9fd3ff}
.pill.oxy{color:#8fe3c4;border-color:var(--ok)}
.nanorow{gap:4px;flex-wrap:wrap}
.chal{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bunker{display:flex;gap:10px;align-items:flex-start}
.bmap{display:grid;gap:2px}
.bmap small{color:var(--muted);font-size:11px}
.brow{display:flex;gap:2px}
.bsq{width:26px;height:26px;display:grid;place-items:center;border-radius:4px;background:var(--panel-2);border:1px solid var(--line);font-size:14px}
.bsq.pawn{background:var(--accent);color:#141414;font-weight:800}
.bwall{font:600 10px var(--f-body);color:#ff8a82;text-align:center;border-top:2px solid var(--red);margin:2px 0}
.bsides{display:grid;gap:2px;font:600 12px var(--f-mono);color:var(--muted)}
.bsides b{color:var(--ok)}
.gridb{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:420px}
.grow{display:inline-flex;gap:2px;align-items:center;padding:2px;border:1px solid var(--line);border-radius:5px}
.grow.fired{border-color:var(--accent)}
.grow small{font:600 10px var(--f-mono);color:var(--muted);padding:0 2px}
.gcell{min-width:20px;height:20px;display:grid;place-items:center;border-radius:3px;background:var(--panel-2);font:700 11px var(--f-mono)}
.gcell.done{background:var(--ok);color:#111}
.overlay.solid{background:var(--bg)}
.cleared .pegs{display:flex;flex-direction:column;gap:2px;justify-content:center;margin:0 -2px}
.peg{display:grid;place-items:center;width:10px;height:10px;border-radius:50%;font:800 8px var(--f-mono);font-style:normal;color:#141414;border:1px solid var(--bg)}
.peg.red{background:var(--red);color:#fff}
.peg.yellow{background:var(--yellow)}
.peg.unsure{opacity:.85;outline:1px dashed currentColor;outline-offset:1px}
.peg.gone{opacity:.3}