:root{
  --bg:#0a0c10; --bg-2:#11151c; --line:#232a35;
  --ink:#e8edf5; --ink-dim:#8e9aad;
  --accent:#31e0a8; --accent-dim:#1b7d60; --hot:#ff5d5d;
  --r:14px;
  --pad: clamp(16px, 4vw, 40px);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(120% 80% at 50% -10%, #17202c 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font:16px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#app{height:100%;position:relative}

.screen{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  padding:var(--pad); padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom));
  display:none; opacity:0; transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease;
}
.screen.is-active{display:block}
.screen.is-shown{opacity:1;transform:none}
.screen--game{padding:0}

.stack{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:22px;min-height:100%;justify-content:center}
.stack--wide{max-width:820px;justify-content:flex-start;padding-top:8px}

/* --- type --- */
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
.brand{text-align:center}
.brand__title{font-size:clamp(38px,10vw,68px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em}
.brand__title span{display:block;color:var(--accent);text-shadow:0 0 28px rgba(49,224,168,.35)}
.brand__sub{color:var(--ink-dim);margin:.6rem 0 0;font-size:15px}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.muted{color:var(--ink-dim);font-size:14px;margin:0}

.pagehead{padding-right:200px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.pagehead h2{font-size:clamp(22px,5vw,30px)}

/* --- buttons --- */
.btn{
  appearance:none;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
  font:inherit;font-weight:600;padding:14px 20px;border-radius:var(--r);cursor:pointer;
  min-height:48px; transition:transform .12s ease, border-color .2s, background .2s, box-shadow .2s;
}
.btn:hover{border-color:var(--accent-dim);background:#161c25}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn--primary{background:var(--accent);color:#04140e;border-color:transparent;box-shadow:0 8px 30px -12px rgba(49,224,168,.8)}
.btn--primary:hover{background:#4bf0bd;border-color:transparent}
.btn--ghost{background:transparent}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;filter:grayscale(.7)}
.btn:disabled:hover{border-color:var(--line);background:var(--bg-2);transform:none}
.btn--sm{padding:8px 14px;min-height:40px;font-size:14px}
.btn--back{padding:8px 14px;min-height:40px}
.menu{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .btn{flex:1 1 180px}

/* --- facts on the menu --- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:0}
.facts div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.facts dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.facts dd{margin:2px 0 0;font-size:20px;font-weight:700}

/* --- cards --- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{
  text-align:left;display:flex;flex-direction:column;gap:8px;padding:18px;
  background:linear-gradient(160deg,#141a23,#0f141b);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;color:inherit;font:inherit;
  transition:transform .15s ease, border-color .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent-dim);box-shadow:0 16px 40px -24px rgba(49,224,168,.7)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card h4{margin:0;font-size:18px}
.card__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent-dim);border-radius:999px;padding:3px 9px}
.card--live{border-style:dashed}
.empty{color:var(--ink-dim);grid-column:1/-1;padding:22px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);margin:0}

.pill{font-size:12px;color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.pill--live{color:var(--accent);border-color:var(--accent-dim)}

.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.roster{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.roster li{background:#0d1219;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px}

/* --- settings --- */
.field{display:flex;flex-direction:column;gap:10px}
.segmented{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}
.segmented button{min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:inherit;cursor:pointer}
.segmented button[aria-checked="true"]{background:var(--accent);color:#04140e;border-color:transparent;font-weight:700}
.slider{display:flex;align-items:center;gap:14px}
.slider input{flex:1;accent-color:var(--accent);height:44px}
.slider output{min-width:2.5ch;text-align:center;font-weight:700;font-size:20px}
.ticks{display:flex;justify-content:space-between;color:var(--ink-dim);font-size:12px}
.saved{color:var(--accent);font-size:14px;margin:0}
.owner{margin-top:8px;border-style:dashed}
.owner .facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pill--locked{color:#f0b46b;border-color:#6b4a24}

/* --- game --- */
#arena-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));gap:10px}
.hud__top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hud__vitals{display:flex;gap:18px;background:rgba(8,11,16,.66);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.vital{display:flex;align-items:center;gap:8px}
.vital__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.vital__num{font-weight:700;font-variant-numeric:tabular-nums}
.vital__num--big{font-size:22px}
.bar{width:90px;height:8px;border-radius:99px;background:#222a35;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#8affd8);transition:width .25s ease}
.hud__top .btn{pointer-events:auto;margin-right:200px}
.clickplay{z-index:1;position:absolute;inset:0;margin:0;border:0;background:rgba(6,9,13,.62);backdrop-filter:blur(3px);
  color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;pointer-events:none;font:inherit;text-align:center;padding:24px}
.clickplay strong{font-size:clamp(24px,5vw,34px);letter-spacing:-.02em}
.clickplay span{color:var(--ink-dim);font-size:14px;max-width:34ch;line-height:1.7}
.hud__hint{margin:0;text-align:center;color:var(--ink-dim);font-size:13px}
.crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);
  background:
    linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat;
  opacity:.75;border-radius:2px}
.pickup{pointer-events:auto;cursor:pointer;position:absolute;left:50%;top:58%;transform:translateX(-50%);margin:0;
  background:rgba(8,11,16,.8);border:1px solid var(--accent-dim);color:var(--accent);
  padding:8px 14px;border-radius:999px;font-size:14px}
.hud__bottom{position:relative;z-index:3;margin-top:auto;display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.hud__gun,.hud__players{background:rgba(8,11,16,.66);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;max-width:48%}
.hud__gunlabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
#players-online{list-style:none;margin:0;padding:0;font-size:14px}

.touch{position:absolute;inset:auto 0 0 0;height:190px;pointer-events:none;z-index:4}
body.is-touch .hud__bottom{margin-bottom:186px}
.touch__stick{position:absolute;left:22px;bottom:78px;width:118px;height:118px;border-radius:50%;
  border:1px solid var(--line);background:rgba(12,16,22,.55);pointer-events:auto;touch-action:none}
.touch__stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:rgba(49,224,168,.35);border:1px solid var(--accent-dim)}
.touch__fire{position:absolute;right:22px;bottom:88px;width:96px;height:96px;border-radius:50%;
  border:1px solid var(--accent-dim);background:rgba(49,224,168,.18);color:var(--accent);
  font:700 15px/1 inherit;letter-spacing:.1em;pointer-events:auto}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#151b24;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14px;z-index:50;
  box-shadow:0 20px 40px -20px #000}

@media (max-width:520px){
  .hud__top{flex-wrap:wrap}
  .hud__vitals{flex:1 1 100%;justify-content:space-between}
  .hud__top .btn{margin-left:auto}
  .pagehead{padding-right:0;margin-top:44px}
  .hud__top .btn{margin-right:0}
  .hud__top{padding-top:40px}
  .brand{margin-top:20px}
  .hud__gun,.hud__players{max-width:100%;flex:1 1 100%}
  .hud__bottom{flex-direction:column;align-items:stretch}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}