body.sz{background:#07080c;overflow-x:hidden}
body.sz::before{display:none}
.sz-stage{position:relative;width:100%;height:calc(100vh - 110px);min-height:420px;border-radius:16px;overflow:hidden;background:#0b0d12;box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 1px #2a2f3a}
#cv{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sz-hud{position:absolute;inset:12px;pointer-events:none;display:grid;grid-template-columns:auto auto auto 1fr;gap:10px;align-items:start}
.sz-hud>div{padding:8px 14px;border-radius:12px;background:rgba(10,12,18,.7);backdrop-filter:blur(4px);display:grid;gap:3px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.sz-hud span{font:600 10px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#8fa3c0}
.sz-hud b{font:700 20px/1 var(--f-mark);color:#e6f4ff}
.sz-zone b{color:#ff7a8a}
.sz-board{justify-self:end;margin:0;padding:10px 14px;list-style:none;border-radius:12px;background:rgba(10,12,18,.7);min-width:170px;font:600 14px/1.6 var(--f-ui);color:#cfe3ff;counter-reset:r}
.sz-board li{display:flex;gap:8px;justify-content:space-between}
.sz-board li.me{color:#ffe082}.sz-board li.dead{opacity:.4;text-decoration:line-through}
.sz-menu,.sz-over{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));padding:28px;border-radius:20px;display:grid;gap:12px;
  background:rgba(12,14,22,.88);backdrop-filter:blur(8px);box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(120,200,255,.25),0 0 40px rgba(64,196,255,.15)}
.sz-menu h2,.sz-over h2{margin:0;font:800 clamp(34px,6vw,52px)/1 var(--f-mark);letter-spacing:.04em;background:linear-gradient(90deg,#69f0ae,#40c4ff,#e040fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.sz-sub,.sz-help{margin:0;color:#a9b8cc;font-size:15px}
.sz-help{font-size:13px;color:#7b8aa0}
.sz-btns{display:flex;gap:10px;flex-wrap:wrap}
.sz-join{display:flex;gap:10px}
.sz-lobby{display:grid;gap:8px;padding:12px;border-radius:12px;background:rgba(255,255,255,.04)}
.sz-lobby .code{font:700 40px/1 var(--f-mark);letter-spacing:.2em;color:#e6f4ff;text-align:center}
.sz-lobby ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;color:#cfe3ff}
.sz-over p{margin:0;color:#cfe3ff;font-size:17px}
@media (max-width:640px){.sz-stage{height:calc(100vh - 90px)}.sz-hud{grid-template-columns:auto auto auto}.sz-board{display:none}}

/* ---------- menu: two columns, skins, top list ---------- */
.sz-menu{width:min(820px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto}
.sz-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sz-col{display:grid;gap:10px;align-content:start}
.sz-skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sz-skin{display:grid;gap:4px;justify-items:center;padding:6px 4px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#cfe3ff;font:600 12px/1.2 var(--f-ui);cursor:pointer}
.sz-skin canvas{width:100%;max-width:120px;height:auto}
.sz-skin[aria-checked=true]{border-color:#69f0ae;box-shadow:0 0 0 2px rgba(105,240,174,.35),0 0 18px rgba(105,240,174,.25)}
.sz-skin.locked{opacity:.75}
.sz-skin.locked span::before{content:'🔒 ';filter:grayscale(1)}
.sz-skin:focus-visible{outline:2px solid #40c4ff;outline-offset:2px}
.sz-top{margin:0;padding:10px 14px;list-style:none;border-radius:12px;background:rgba(255,255,255,.04);display:grid;gap:4px;font:600 14px/1.5 var(--f-ui);color:#cfe3ff;counter-reset:t}
.sz-top li{display:flex;justify-content:space-between;gap:8px}
.sz-top li:not(.sz-help)::before{counter-increment:t;content:counter(t) '.';color:#7b8aa0;width:1.6em}
.sz-top li span{flex:1}
.sz-lb-link{float:right;font-size:11px;color:#40c4ff;letter-spacing:.08em}
.sz-score{font-weight:700;color:#ffe082!important}

/* ---------- touch controls ---------- */
.sz-touch{position:absolute;inset:0;pointer-events:none}
.sz-stick{position:absolute;left:22%;top:72%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,.02) 70%);box-shadow:0 0 0 2px rgba(255,255,255,.12);opacity:.45;transition:opacity .15s}
.sz-stick.on{opacity:1}
.sz-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9be7ff,#2a86c9);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sz-boost{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;border:0;pointer-events:auto;touch-action:none;
  font:800 15px/1 var(--f-mark);letter-spacing:.08em;color:#1a0c00;background:radial-gradient(circle at 35% 30%,#ffe7a3,#ffb02e 60%,#c86a00);box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 -4px 0 rgba(0,0,0,.25);user-select:none;-webkit-user-select:none}
.sz-boost.on{transform:scale(.94);filter:brightness(1.2);box-shadow:0 0 26px rgba(255,176,46,.8)}

/* ---------- playing on a phone: the arena takes the whole screen ---------- */
@media (pointer:coarse){
  body.sz-playing .g-head{display:none}
  body.sz-playing main#app{padding:0;margin:0;width:100%;max-width:none}
  body.sz-playing .sz-stage{position:fixed;inset:0;height:auto;min-height:0;border-radius:0;z-index:20}
  body.sz{overscroll-behavior:none}
  .sz-stage{touch-action:none;-webkit-user-select:none;user-select:none}
  .sz-hud{inset:max(8px,env(safe-area-inset-top)) 8px auto 8px;grid-template-columns:repeat(3,auto) 1fr;gap:6px}
  .sz-hud>div{padding:6px 10px}
  .sz-hud b{font-size:16px}
  .sz-board{display:block;min-width:120px;font-size:12px;padding:6px 10px;line-height:1.45}
  .sz-over{width:min(420px,calc(100% - 24px))}
}
@media (max-width:720px){
  .sz-menu-grid{grid-template-columns:1fr}
  .sz-menu{padding:20px;top:12px;transform:translateX(-50%);max-height:calc(100% - 24px)}
  .sz-skins{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sz-skin{font-size:11px}
}
@media (max-width:420px){.sz-skins{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (pointer:coarse) and (orientation:portrait){.sz-board{display:none}}