:root{--bg:#0b0c10;--panel:#14161c;--line:#262a33;--mute:#8b9098;--yl:#ffd400;--red:#e8331c;--mono:ui-monospace,Menlo,Consolas,monospace;--sans:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
 --carpet:#4a0f17;--carpet2:#3a0b12;--wood:#5a3416;--wood2:#3e2210;--brass:#c9a24a}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;color:#e8eaee;font-family:var(--sans);min-height:100%}
body{background:
 repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),
 repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 2px,transparent 2px 14px),
 radial-gradient(ellipse at 50% 40%,#6a1622 0,var(--carpet) 45%,var(--carpet2) 100%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(11,12,16,.92);border-bottom:2px solid var(--brass);flex-wrap:wrap}
#top .back{color:var(--yl);text-decoration:none;font:700 12px/1 var(--mono);letter-spacing:.12em}
#top .brand{font:800 14px/1 var(--mono);letter-spacing:.16em}
#top .mode{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--mute)}
#top .hud{display:inline-flex;align-items:baseline;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--mute);margin-left:6px}
#top .hud b{font:800 15px/1 var(--mono);color:#fff;margin-right:8px}
#top .sp{flex:1}
.ctl{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:700 11px/1 var(--mono);letter-spacing:.1em;color:#c4c8ce;background:rgba(11,12,16,.6)}.ctl:hover{border-color:var(--yl);color:var(--yl)}
#main{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px 20px}
#table{--s:min(96vw,calc(100vh - 150px),760px);position:relative;width:var(--s);height:var(--s);border-radius:50%}
/* the wood */
.wood{position:absolute;border-radius:50%;box-shadow:inset 0 0 0 3px var(--brass),0 18px 40px rgba(0,0,0,.6)}
.wood.outer{inset:0;background:
 repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.18) 0 2px,transparent 2px 9px),
 repeating-linear-gradient(97deg,rgba(255,255,255,.05) 0 3px,transparent 3px 11px),
 radial-gradient(circle at 40% 35%,#7a4a22 0,var(--wood) 50%,var(--wood2) 100%)}
.wood.inner{inset:27%;box-shadow:inset 0 0 0 3px var(--brass),0 10px 24px rgba(0,0,0,.55);background:
 repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.16) 0 2px,transparent 2px 8px),
 repeating-linear-gradient(13deg,rgba(255,255,255,.05) 0 3px,transparent 3px 10px),
 radial-gradient(circle at 45% 40%,#8a5a2c 0,#6a4020 55%,#4a2a14 100%)}
.wood.centre{inset:37%;background:radial-gradient(circle at 50% 45%,#1f4d2e 0,#133820 70%,#0d2a17 100%);box-shadow:inset 0 0 0 3px var(--brass),inset 0 0 30px rgba(0,0,0,.6)}
.ring{position:absolute;inset:0;pointer-events:none;transition:transform .75s cubic-bezier(.4,.1,.2,1)}
.seat{pointer-events:auto;position:absolute;width:15%;height:15%;margin:-7.5% 0 0 -7.5%;left:50%;top:50%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a6a9a 0,#1d4f78 60%,#143a58 100%);border:3px solid var(--brass);box-shadow:0 6px 14px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transition:transform .75s cubic-bezier(.4,.1,.2,1),background .3s,border-color .3s,box-shadow .3s}
.seat canvas{width:78%;height:78%;image-rendering:pixelated;border-radius:50%;display:block;transform-origin:50% 90%}
.seat .nm{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font:700 10px/1 var(--mono);letter-spacing:.1em;color:#f3e6c8;white-space:nowrap;background:rgba(20,10,4,.85);padding:3px 6px;border-radius:5px;border:1px solid rgba(201,162,74,.5)}
/* idle animations, one per leader */
.idle-bob canvas{animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6%)}}
.idle-tilt canvas{animation:tilt 3.2s ease-in-out infinite}@keyframes tilt{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.idle-sway canvas{animation:sway 2.8s ease-in-out infinite}@keyframes sway{50%{transform:translateX(6%) rotate(3deg)}}
.idle-nod canvas{animation:nod 1.6s ease-in-out infinite}@keyframes nod{50%{transform:translateY(5%) scaleY(.94)}}
.idle-breathe canvas{animation:breathe 3s ease-in-out infinite}@keyframes breathe{50%{transform:scale(1.08)}}
.idle-shake canvas{animation:shakeh 2.2s ease-in-out infinite}@keyframes shakeh{20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-3%)}80%{transform:translateX(0)}}
.idle-lean canvas{animation:lean 3.6s ease-in-out infinite}@keyframes lean{50%{transform:rotate(-8deg) translateY(-3%)}}
.idle-float canvas{animation:floaty 2.6s ease-in-out infinite}@keyframes floaty{50%{transform:translateY(-8%) scale(1.03)}}
.seat.rogue{background:radial-gradient(circle at 50% 35%,#ff8a1f 0,#e8331c 55%,#7a1a0e 100%);border-color:#ffb347;box-shadow:0 0 18px 4px rgba(232,51,28,.55);animation:burn 1.1s ease-in-out infinite alternate}
.seat.rogue canvas{animation:rage .35s ease-in-out infinite alternate}@keyframes rage{from{transform:translate(-2%,0) rotate(-3deg)}to{transform:translate(2%,-3%) rotate(3deg)}}
@keyframes burn{from{box-shadow:0 0 14px 2px rgba(232,51,28,.5)}to{box-shadow:0 0 28px 8px rgba(255,138,31,.75)}}
.seat.rogue .nm{color:#ffb347}
.seat.can{cursor:pointer}.seat.can:hover{transform:var(--up) scale(1.12)}
.seat.can::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px dashed var(--yl);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seat.ignite{animation:ignite .6s ease-out 1,burn 1.1s ease-in-out .6s infinite alternate}
@keyframes ignite{0%{transform:var(--up) scale(1)}40%{transform:var(--up) scale(1.35)}100%{transform:var(--up) scale(1)}}
.seat.swap{animation:swap .4s ease-in-out 1}
@keyframes swap{50%{transform:var(--up) scale(.6);opacity:.4}}
#centre{pointer-events:none;position:absolute;left:50%;top:50%;width:22%;height:22%;margin:-11% 0 0 -11%;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font:800 clamp(11px,2.2vw,15px)/1.2 var(--mono);letter-spacing:.14em;color:#c8d8c8}
#centre.clock{font:900 clamp(30px,7vw,54px)/1 var(--mono);color:var(--yl);letter-spacing:0;text-shadow:0 2px 8px rgba(0,0,0,.7)}
#centre.hot{color:#fff;background:radial-gradient(circle,var(--red) 0,rgba(232,51,28,.2) 70%,transparent 72%);animation:hot .25s ease-in-out infinite alternate}
@keyframes hot{to{transform:scale(1.08)}}
#countdown{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(11,12,16,.55);border-radius:50%;z-index:5}
#countdown b{font:900 clamp(70px,20vw,150px)/1 var(--mono);color:var(--yl);animation:pop .9s ease-out infinite;text-shadow:0 0 30px rgba(255,212,0,.6)}
#countdown span{margin-top:14px;font:900 clamp(18px,4.5vw,34px)/1 var(--mono);letter-spacing:.28em;color:#fff;text-shadow:0 0 14px var(--red),0 0 30px var(--red);animation:throb 1s ease-in-out infinite}
@keyframes throb{50%{color:#ffb347;transform:scale(1.06)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}30%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
#banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;pointer-events:none;animation:bannerIn 1.4s ease-out 1 forwards}
#banner b{font:900 clamp(26px,7vw,64px)/1 var(--mono);letter-spacing:.2em;color:#fff;text-shadow:0 0 18px var(--red),0 0 44px var(--red),0 4px 0 #000;background:rgba(11,12,16,.75);padding:14px 22px;border:3px solid var(--red);border-radius:10px;text-align:center}
#banner span{margin-top:10px;font:800 clamp(11px,2.4vw,16px)/1.3 var(--mono);letter-spacing:.18em;color:var(--yl);background:rgba(11,12,16,.8);padding:6px 10px;border-radius:6px;text-align:center}
#banner span:empty{display:none}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.6)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
#nuke{position:absolute;inset:-6%;z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}
#nuke .nk-text{pointer-events:auto}
#nuke .flash{position:fixed;inset:0;background:#fff;animation:flash 1.4s ease-out 1 forwards;pointer-events:none}
@keyframes flash{0%{opacity:1}30%{opacity:.9;background:#ffb347}100%{opacity:0}}
#nuke .cloud{width:70%;height:70%;animation:grow 1.6s cubic-bezier(.2,.8,.2,1) 1 forwards;transform-origin:50% 100%;filter:drop-shadow(0 0 30px rgba(255,138,31,.8));pointer-events:none}
#nuke .cloud canvas{width:100%;height:100%;image-rendering:pixelated}
@keyframes grow{0%{transform:scale(.1);opacity:0}20%{opacity:1}100%{transform:scale(1);opacity:1}}
#nuke .nk-text{position:absolute;bottom:2%;text-align:center;animation:fade 1s ease-out 1.2s both;background:rgba(11,12,16,.8);padding:12px 16px;border-radius:12px;max-width:94%}
#nuke .nk-text b{display:block;font:900 clamp(22px,6vw,42px)/1 var(--mono);letter-spacing:.14em;color:#fff;text-shadow:0 0 18px var(--red)}
#nuke .nk-text span{display:block;margin-top:8px;font:700 12px/1.6 var(--mono);letter-spacing:.12em;color:#ffb347}
#nuke .nk-text canvas{width:28px;height:28px;image-rendering:pixelated;vertical-align:middle;border-radius:50%;background:#1d4f78;border:2px solid var(--brass);margin:0 4px 0 2px}
#nuke .nk-text .nk-row{display:flex;gap:8px;justify-content:center;margin-top:10px}
@keyframes fade{from{opacity:0}to{opacity:1}}
#table.shake{animation:shake .5s linear 1}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(3px,-2px)}30%,50%,70%{transform:translate(-5px,3px)}40%,60%{transform:translate(5px,-3px)}}
#status{min-height:22px;font:700 12px/1.5 var(--mono);letter-spacing:.1em;color:#f3e6c8;text-align:center;padding:0 10px;text-shadow:0 1px 2px #000}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.go{background:var(--yl);color:#111;font:800 12px/1 var(--mono);letter-spacing:.12em;padding:11px 16px;border-radius:9px}
.ghost{border:1px solid var(--yl);color:var(--yl);font:700 12px/1 var(--mono);letter-spacing:.12em;padding:10px 14px;border-radius:9px}
.foot{margin:10px 0 0;font-size:12px;color:var(--mute);line-height:1.5}
#log{margin:0;background:#0b0c10;border:1px solid var(--line);border-radius:10px;padding:10px;font:12px/1.6 var(--mono);color:#c4c8ce;min-height:120px;max-height:50vh;overflow:auto;white-space:pre-wrap;margin-bottom:10px}
#log .war{color:#ff8a1f;font-weight:800}
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:20}
.sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;z-index:21;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.sheet h1{margin:6px 0 8px;font-size:28px;letter-spacing:-.01em}.sheet h2{margin:6px 0 8px;font-size:20px}
.sheet p,.sheet li{color:#c4c8ce;font-size:14px;line-height:1.55}.sheet ul{padding-left:18px;margin:0 0 8px}
.sheet .x{position:absolute;right:10px;top:8px;font-size:22px;color:var(--mute)}
.kicker{margin:4px 0 0;font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--mute)}
.sheet .credit{margin:14px 0 0;font:600 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--mute);text-align:center}.sheet .credit a{color:var(--yl);text-decoration:none}
@media(max-width:640px){#top .mode{display:none}#top{gap:8px}}