/* ============================================================
   NEON ARMOR — UI chrome
   ============================================================ */
:root{
  --bg:#04060c;
  --bg2:#080d18;
  --panel:rgba(10,18,34,.82);
  --line:#172c4d;
  --cyan:#3ef0ff;
  --teal:#28f0c0;
  --amber:#ffc247;
  --pink:#ff3ea5;
  --red:#ff4d5e;
  --violet:#a86bff;
  --dim:#6d8bb5;
  --txt:#d7ecff;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --btnw:300px;      /* єдина ширина кнопки на всю гру */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #0d1830 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #14103a 0%, transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
  /* iOS pops a copy/lookup bubble on a long press otherwise */
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
input{-webkit-user-select:text;user-select:text}   /* except the nickname field */
body::before{ /* ambient scanlines over whole page */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  opacity:.5;
}

#app{
  display:flex;gap:14px;align-items:stretch;
  padding:14px;
  /* The canvas gets its pixel size from JS (fitCanvas). Painting the page
     before that ran showed the arena at its intrinsic 672×512 and then it
     snapped to the fitted size — a visible jump on every load. Stay hidden
     for that one frame; main.js adds .ready, and the inline loader adds it
     anyway after a moment so a script error can never leave a blank page. */
  visibility:hidden;
}
body.ready #app{visibility:visible}

/* ---------------- stage / canvas ---------------- */
#stage{
  position:relative;
  border-radius:10px;
  padding:8px;
  background:linear-gradient(180deg,#0a1120,#060a13);
  border:1px solid var(--line);
  box-shadow:
    0 0 0 1px rgba(62,240,255,.08),
    0 0 34px rgba(62,240,255,.10),
    0 24px 70px rgba(0,0,0,.75),
    inset 0 0 40px rgba(0,0,0,.6);
}
#game{
  display:block;
  touch-action:none;
  -webkit-touch-callout:none;
  border-radius:4px;
  background:#04070e;
  box-shadow:0 0 0 1px #12253f, inset 0 0 60px #000;
  /* Розмір задає JS (mountCanvasFit) — тут лише розумний запас на той кадр,
     поки він не виміряв вікно. Стеля 100% лишається, щоб на вузькому екрані
     полотно не вилазило за край до першого виміру. */
  width:min(100%, 100vw);
  height:auto;
  max-width:100%;
  aspect-ratio:21 / 16;
}

/* ---------------- boss bar ---------------- */
#bossbar{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  width:64%;z-index:6;text-align:center;pointer-events:none;
  transition:opacity .3s;
}
#bossbar.hidden{opacity:0}
.bb-name{
  font-size:11px;letter-spacing:.34em;color:var(--red);
  text-shadow:0 0 12px rgba(255,77,94,.9);margin-bottom:4px;
}
.bb-track{
  height:9px;background:rgba(0,0,0,.65);border:1px solid #52243a;
  border-radius:5px;overflow:hidden;position:relative;
  box-shadow:0 0 18px rgba(255,62,120,.35), inset 0 0 10px #000;
}
.bb-fill,.bb-fill2{position:absolute;inset:0;transform-origin:left center;border-radius:4px}
.bb-fill2{background:rgba(255,255,255,.5);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bb-fill{background:linear-gradient(90deg,#ff2d6f,#ff8a3d);transition:transform .12s linear;z-index:2}

/* ---------------- floating toasts ---------------- */
#toasts{position:absolute;left:0;right:0;bottom:26px;text-align:center;z-index:7;pointer-events:none}
.toast{
  display:inline-block;margin:3px;padding:5px 12px;font-size:11px;letter-spacing:.18em;
  background:rgba(4,10,20,.86);border:1px solid var(--cyan);color:var(--cyan);
  border-radius:3px;box-shadow:0 0 20px rgba(62,240,255,.35);
  animation:toastIn .25s ease-out, toastOut .4s ease-in 1.5s forwards;
}
.toast.warn{border-color:var(--amber);color:var(--amber);box-shadow:0 0 20px rgba(255,194,71,.35)}
.toast.bad{border-color:var(--red);color:var(--red);box-shadow:0 0 20px rgba(255,77,94,.4)}
.toast.good{border-color:var(--teal);color:var(--teal);box-shadow:0 0 20px rgba(40,240,192,.35)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* ---------------- overlay screens ---------------- */
#overlay{
  position:absolute;inset:8px;z-index:10;
  display:none;align-items:center;justify-content:center;
  background:radial-gradient(700px 500px at 50% 45%,rgba(6,12,24,.86),rgba(2,4,9,.96));
  backdrop-filter:blur(3px);
  border-radius:4px;
}
#overlay.show{display:flex}
.scr{display:none;text-align:center;padding:18px 26px;max-width:100%;max-height:100%;overflow:auto}
.scr.show{display:block;animation:pop .28s cubic-bezier(.2,.9,.25,1)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}

.logo{
  font-size:52px;letter-spacing:.06em;line-height:.95;
  color:#eafcff;
  text-shadow:0 0 6px #fff,0 0 22px var(--cyan),0 0 52px rgba(62,240,255,.6),0 6px 0 #061426;
}
.logo span{color:var(--cyan);text-shadow:0 0 8px var(--cyan),0 0 40px var(--cyan)}
h1{font-size:34px;letter-spacing:.1em;text-shadow:0 0 18px rgba(62,240,255,.5)}
h2{font-size:19px;letter-spacing:.28em;color:var(--cyan);margin:6px 0;text-shadow:0 0 14px rgba(62,240,255,.55)}
h3{font-size:11px;letter-spacing:.24em;color:var(--dim);margin-bottom:8px}
.sub{font-size:11px;letter-spacing:.3em;color:var(--dim);margin-bottom:14px}
.win{color:var(--teal);text-shadow:0 0 24px rgba(40,240,192,.7)}
.lose{color:var(--red);text-shadow:0 0 24px rgba(255,77,94,.7)}
.bignum{font-size:76px;color:#fff;text-shadow:0 0 30px var(--cyan);line-height:1}
.stage-tag{font-size:10px;letter-spacing:.5em;color:var(--dim)}
.hint{margin-top:14px;font-size:10px;letter-spacing:.22em;color:#4d688c;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.final{margin:10px 0;font-size:16px;letter-spacing:.2em;color:var(--amber);text-shadow:0 0 16px rgba(255,194,71,.6)}
.best{font-size:10px;letter-spacing:.2em;color:var(--dim);margin-top:10px}

.menu{display:flex;flex-direction:column;gap:8px;align-items:center;margin:18px 0 6px}
/* One button size everywhere: same width, same height, whatever the variant
   or the container. A two-line button (with its «онлайн» tag) must not grow
   taller than a one-line one, so the box is fixed and the content centres. */
.btn{
  width:var(--btnw);max-width:100%;min-width:0;min-height:48px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:6px 18px;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;line-height:1.2;
  color:var(--cyan);background:rgba(10,22,42,.7);
  border:1px solid var(--cyan);border-radius:3px;
  box-shadow:0 0 18px rgba(62,240,255,.2) inset;
  transition:.15s;
}
.btn:hover,.btn.sel{
  color:#04121c;background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 24px rgba(62,240,255,.6);transform:translateY(-1px);
}
/* One button, one look: every button wears the same cyan neon as ОДИНОЧНА
   ГРА. The violet variant used to mark "everything else", but two competing
   glows made the menu read as two unrelated groups of controls. The neon
   lives on .btn itself so no variant class can drift away from it. */
.btn.ghost{color:#7fd7e4}
.btn.net i{color:#57b9cf}
.btn:hover i,.btn.sel i{color:#04121c}

.cols{display:flex;gap:14px;justify-content:center;margin-bottom:14px}
.card{
  padding:12px 16px;border:1px solid var(--line);border-radius:4px;
  background:rgba(8,16,30,.7);text-align:left;font-size:11px;line-height:2;
}
.card.p1{border-color:rgba(62,240,255,.5);box-shadow:0 0 20px rgba(62,240,255,.12)}
.card.p2{border-color:rgba(255,194,71,.5);box-shadow:0 0 20px rgba(255,194,71,.12)}
.card.duel{border-color:rgba(255,63,140,.5);box-shadow:0 0 20px rgba(255,63,140,.12)}
.card.duel h3{color:var(--pink)}
/* a module the kernel did not boot leaves no trace in the UI */
.mod-off{display:none !important}

kbd{
  display:inline-block;min-width:20px;padding:1px 5px;margin-right:3px;
  background:#0d1a2e;border:1px solid #23405f;border-bottom-width:2px;border-radius:3px;
  font-size:10px;color:var(--cyan);
}
.legend{margin:6px auto 12px;max-width:520px;text-align:left}
.legend:has(.helpgrid){max-width:640px}
.legend ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.legend li{font-size:10px;letter-spacing:.06em;color:#9fbbd8;display:flex;align-items:center;gap:8px}
/* the colour chip belongs to the terrain list only — the help rows use <i>
   for their copy, and this rule used to squash it into a 14px square */
.legend ul li i{width:14px;height:14px;border-radius:2px;flex:0 0 14px;box-shadow:0 0 8px currentColor}

.lvl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.lvl{
  padding:9px 4px;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  background:rgba(10,20,38,.7);font-size:13px;color:var(--txt);font-family:var(--mono);
  transition:.14s;position:relative;
}
.lvl small{display:block;font-size:7px;letter-spacing:.1em;color:var(--dim);margin-top:2px}
.lvl:hover:not(.lock){background:var(--cyan);color:#04121c;box-shadow:0 0 20px rgba(62,240,255,.5)}
.lvl:hover:not(.lock) small{color:#04121c}
.lvl.lock{opacity:.3;cursor:not-allowed}
.lvl.boss{border-color:rgba(255,77,94,.6);color:#ffb0b8}
.lvl.boss:hover{background:var(--red);color:#180307;box-shadow:0 0 20px rgba(255,77,94,.5)}

.tally{margin:14px auto;font-size:12px;border-collapse:collapse}
.tally td{padding:4px 12px;text-align:left;letter-spacing:.12em}
.tally td:last-child{text-align:right;color:var(--amber)}
.tally tr.total td{border-top:1px solid var(--line);padding-top:8px;color:#fff;font-size:14px}
.tally tr.total td:last-child{color:var(--teal)}

.roster{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.rost{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;
  padding:4px 9px;border:1px solid var(--line);border-radius:20px;background:rgba(8,16,30,.7)}
.rost canvas{display:block}

.tog{display:block;font-size:10px;letter-spacing:.16em;color:var(--dim);margin:5px 0}
.tog input{accent-color:var(--cyan);margin-right:6px}

/* ---------------- HUD ---------------- */
#hud{
  width:198px;flex:0 0 198px;
  display:flex;flex-direction:column;gap:8px;
  padding:12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 0 30px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.4);
}
.hud-block{
  padding:8px 10px;border-radius:5px;
  background:linear-gradient(180deg,rgba(15,28,50,.6),rgba(8,14,26,.6));
  border:1px solid rgba(23,44,77,.9);
}
.hud-block.grow{flex:1 1 auto;min-height:56px}
.hud-label{font-size:8px;letter-spacing:.34em;color:#4f7099;margin-bottom:3px}
.hud-big{font-size:26px;line-height:1;color:#fff;text-shadow:0 0 16px var(--cyan)}
.hud-sub{font-size:8px;letter-spacing:.16em;color:var(--dim);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-score{font-size:21px;color:var(--amber);text-shadow:0 0 14px rgba(255,194,71,.6);
  font-variant-numeric:tabular-nums}
.combo{margin-top:4px;font-size:9px;letter-spacing:.2em;color:var(--pink);
  text-shadow:0 0 12px var(--pink);animation:blink .7s infinite}
.hidden{display:none !important}

.enemy-dots{display:flex;flex-wrap:wrap;gap:3px;min-height:14px}
.edot{width:8px;height:8px;border-radius:2px;background:var(--red);box-shadow:0 0 7px var(--red)}
.edot.t1{background:#ff9c3d;box-shadow:0 0 7px #ff9c3d}
.edot.t2{background:var(--red);box-shadow:0 0 7px var(--red)}
.edot.t3{background:var(--violet);box-shadow:0 0 7px var(--violet)}
.edot.t4{background:#4d9cff;box-shadow:0 0 7px #4d9cff}
.edot.t5{background:#cfd8e6;box-shadow:0 0 7px #cfd8e6}
.edot.t6{background:#7effa8;box-shadow:0 0 7px #7effa8}
.edot.boss{width:100%;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--amber))}

.pl{padding:7px 9px;border-radius:5px;margin-bottom:6px;
  border:1px solid rgba(23,44,77,.9);background:rgba(8,14,26,.6)}
.pl:last-child{margin-bottom:0}
.pl.p1{border-color:rgba(62,240,255,.45)}
.pl.p2{border-color:rgba(255,194,71,.45)}
.pl.dead{opacity:.4}
.pl-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.2em}
.pl-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}
.pl-who.bot{color:#8ba6c8 !important;letter-spacing:.24em}
.pl.p1 .pl-top{color:var(--cyan)}
.pl.p2 .pl-top{color:var(--amber)}
.pl-lives{display:flex;gap:2px}
.lifepip{width:6px;height:9px;border-radius:1px;background:currentColor;box-shadow:0 0 6px currentColor}
.stars{display:flex;gap:2px;margin-top:5px}
.star{width:9px;height:9px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:#2a3d55}
.star.on{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.pl-hp{height:3px;margin-top:5px;background:#152238;border-radius:2px;overflow:hidden}
.pl-hp i{display:block;height:100%;background:var(--teal);box-shadow:0 0 8px var(--teal);transition:width .18s}

.core-bar{height:7px;background:#152238;border-radius:4px;overflow:hidden;
  box-shadow:inset 0 0 8px #000}
.core-fill{height:100%;width:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  box-shadow:0 0 14px var(--teal);transition:width .25s}
.core-fill.foe{background:linear-gradient(90deg,#ff2d6f,#ff8a3d);box-shadow:0 0 14px var(--pink)}
.core-fill.warn{background:linear-gradient(90deg,#ff9c3d,var(--amber));box-shadow:0 0 14px var(--amber)}
.core-fill.crit{background:linear-gradient(90deg,#ff2d4f,var(--pink));box-shadow:0 0 16px var(--red);
  animation:blink .5s infinite}

.buffs{display:flex;flex-direction:column;gap:4px}
.buff{font-size:8px;letter-spacing:.14em;padding:3px 6px;border-radius:3px;
  border:1px solid currentColor;color:var(--cyan);position:relative;overflow:hidden}
.buff b{position:relative;z-index:2}
.buff i{position:absolute;left:0;top:0;bottom:0;background:currentColor;opacity:.18;z-index:1}

.hud-foot{display:flex;gap:6px}
.mini{flex:1;padding:6px 0;cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:.14em;
  color:var(--dim);background:rgba(10,20,38,.8);border:1px solid var(--line);border-radius:3px}
.mini:hover{color:var(--cyan);border-color:var(--cyan)}

/* ---------------- touch controls ---------------- */
#touch{
  position:fixed;left:0;right:0;bottom:0;z-index:8;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;touch-action:none;
}
#touch.hidden{display:none}
#touch .tpad,#touch .tfire{pointer-events:auto;touch-action:none}
.tpad{
  position:relative;width:132px;height:132px;opacity:.85;
  touch-action:none;-webkit-touch-callout:none;
  border-radius:50%;
}
.tpad-hub{
  position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);
  border:1px solid rgba(62,240,255,.35);border-radius:50%;
}
.tbtn{
  position:absolute;width:46px;height:46px;padding:0;cursor:pointer;
  pointer-events:none;              /* the pad itself handles the touch */
  background:rgba(8,18,34,.72);border:1px solid rgba(62,240,255,.45);border-radius:9px;
  box-shadow:0 0 14px rgba(62,240,255,.18), inset 0 0 12px rgba(0,0,0,.5);
}
.tbtn::after{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);
  border:7px solid transparent;
}
.tbtn.up{left:43px;top:0}      .tbtn.up::after{border-bottom-color:var(--cyan);margin-top:-4px}
.tbtn.down{left:43px;bottom:0} .tbtn.down::after{border-top-color:var(--cyan);margin-top:4px}
.tbtn.left{left:0;top:43px}    .tbtn.left::after{border-right-color:var(--cyan);margin-left:-4px}
.tbtn.right{right:0;top:43px}  .tbtn.right::after{border-left-color:var(--cyan);margin-left:4px}
.tbtn.on{background:var(--cyan);box-shadow:0 0 22px rgba(62,240,255,.7)}
/* keep the arrow a triangle when lit: only its own edge changes colour */
.tbtn.on.up::after{border-bottom-color:#04121c}
.tbtn.on.down::after{border-top-color:#04121c}
.tbtn.on.left::after{border-right-color:#04121c}
.tbtn.on.right::after{border-left-color:#04121c}
.tfire{
  width:96px;height:96px;border-radius:50%;cursor:pointer;
  touch-action:none;-webkit-touch-callout:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--amber);background:radial-gradient(circle at 35% 30%,rgba(255,194,71,.22),rgba(8,18,34,.8));
  border:1px solid rgba(255,194,71,.6);
  box-shadow:0 0 22px rgba(255,194,71,.25), inset 0 0 18px rgba(0,0,0,.5);
  opacity:.9;
}
.tfire.on{background:var(--amber);color:#180f02;box-shadow:0 0 30px rgba(255,194,71,.8)}

.dimline{color:#54739b;font-size:10px}

/* ---------------- online screen ---------------- */

.net-status{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:10px;letter-spacing:.16em;color:var(--dim);margin-bottom:10px}
.dot{width:7px;height:7px;border-radius:50%;background:#3c4c63;box-shadow:0 0 8px currentColor}
.dot.online{background:var(--teal);color:var(--teal)}
.dot.connecting{background:var(--amber);color:var(--amber);animation:blink .8s infinite}
.dot.error{background:var(--red);color:var(--red)}

.net-name{display:block;font-size:9px;letter-spacing:.24em;color:var(--dim);margin-bottom:12px}
.net-name input,.net-code input{
  display:inline-block;margin-left:8px;padding:6px 9px;width:130px;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);background:rgba(6,14,26,.9);border:1px solid var(--line);border-radius:3px;
}
.net-name input:focus,.net-code input:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 14px rgba(62,240,255,.3)}

.net-cols{display:flex;gap:12px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.net-card{
  flex:1 1 260px;max-width:320px;padding:12px 14px;text-align:center;
  border:1px solid var(--line);border-radius:5px;background:rgba(8,16,30,.72);
}
.net-card h3{margin-bottom:6px}
.net-card .btn{margin:8px auto 0;display:flex}
.net-note{font-size:9px;line-height:1.7;color:#7f9dbe;margin-bottom:8px}
.net-code{display:flex;gap:6px;align-items:center;margin-top:8px}
.net-code input{width:78px;margin:0;text-align:center}
.net-code .btn{width:auto;min-width:0;flex:1;margin:0;padding:6px 12px}

.net-card.duel{border-color:rgba(255,62,165,.45);box-shadow:0 0 22px rgba(255,62,165,.10)}
.net-card.duel h3{color:var(--pink)}
.net-maps{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:8px}
.dmap{
  padding:4px 8px;cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  color:var(--dim);background:rgba(10,20,38,.8);border:1px solid var(--line);border-radius:3px;
}
.dmap.on{color:#180307;background:var(--pink);border-color:var(--pink);
  box-shadow:0 0 14px rgba(255,62,165,.5)}
.rost.ready{border-color:var(--teal);box-shadow:0 0 14px rgba(40,240,192,.3)}
.rost.ready b{color:var(--teal)}

.net-kinds{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:8px}
.kind{
  padding:4px 7px;cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  color:var(--dim);background:rgba(10,20,38,.8);border:1px solid var(--line);border-radius:3px;
}
.kind.on{color:#180307;background:var(--pink);border-color:var(--pink);
  box-shadow:0 0 14px rgba(255,62,165,.5)}

.net-rooms{margin:4px auto 12px;max-width:520px}
.net-rooms h3{display:flex;align-items:center;justify-content:center;gap:10px}
.net-rooms .mini{padding:3px 8px}
.net-list{display:flex;flex-direction:column;gap:4px;max-height:132px;overflow:auto}
.net-list>i{font-size:9px;color:#4d688c;letter-spacing:.16em}
.net-row{
  display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px;
  font-family:var(--mono);text-align:left;
  background:rgba(10,20,38,.75);border:1px solid var(--line);border-radius:3px;
}
.net-row b{font-size:13px;color:var(--cyan);letter-spacing:.2em}
.net-row span{font-size:10px;color:var(--txt);flex:1}
.net-row i{font-size:8px;color:var(--dim);letter-spacing:.1em}
.net-row:hover,.net-row:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(62,240,255,.25);outline:none}
.net-row b em{font-style:normal;font-size:10px}
.net-row.duel{border-color:rgba(255,63,140,.4)}
.net-row.duel b{color:var(--pink)}
.net-row.duel:hover{border-color:var(--pink);box-shadow:0 0 16px rgba(255,63,140,.25)}
.net-row.full{opacity:.4;cursor:not-allowed}
.net-row.full:hover{border-color:var(--line);box-shadow:none}
.rowpass{
  width:104px;padding:3px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--cyan);background:rgba(4,10,22,.9);border:1px solid var(--cyan);border-radius:2px;
}
.rowpass.hidden{display:none}

/* ---------------- responsive: tablet / narrow desktop ---------------- */
@media (max-width:1040px){
  #app{flex-direction:column;align-items:center;gap:10px;padding:8px}
  #hud{width:min(688px,96vw);flex:0 0 auto;flex-direction:row;flex-wrap:wrap}
  #hud .hud-block{flex:1 1 120px}
  .hud-foot{flex:1 1 100%}
}
@media (max-height:620px){
  .logo{font-size:38px}.bignum{font-size:54px}h1{font-size:26px}
  .menu{margin:12px 0 2px}.btn{padding:9px 16px}
}

/* ---------------- phones ----------------
   The arena is 21:16, so on a phone it sits at the top, a compact HUD
   above it, and the pad takes the space underneath. Sideways there is no
   room underneath, so the pad floats over the playfield edges.
   Keyed on height as well: a phone in landscape is ~844x390, which is
   wider than any width-only breakpoint would catch. */
@media (max-width:820px), (max-height:520px){
  :root{--btnw:320px}
  .net-card{padding:12px 6px}
  body{display:block;overflow:hidden}
  body::before{opacity:.35}
  #app{
    flex-direction:column;gap:0;padding:0;
    width:100%;height:100vh;height:100dvh;
  }
  #hud{
    order:-1;width:100%;flex:0 0 auto;
    flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:4px;
    border-radius:0;border-width:0 0 1px;padding:calc(4px + env(safe-area-inset-top)) 6px 4px;
  }
  #hud .hud-block{flex:0 0 auto;padding:3px 6px;border-radius:4px;min-width:0}
  #hud #h-enemies{max-width:none}
  #hud .hud-block:nth-child(3){flex:1 1 60px}      /* enemy dots take the slack */
  #hud #h-players{flex:1 1 130px;display:flex;gap:4px}
  #hud #h-players .pl{flex:1 1 0;margin:0}
  #hud .hud-block.grow{flex:1 1 100%;min-height:0;padding:2px 6px}
  .hud-label{font-size:7px;letter-spacing:.2em;margin:0}
  .hud-big{font-size:15px}.hud-score{font-size:14px}
  .hud-sub{font-size:7px;max-width:64px}
  .core-bar{height:5px;min-width:52px}
  .enemy-dots{max-height:16px;overflow:hidden;max-width:78px}
  .edot{width:6px;height:6px}
  .pl{padding:3px 5px;margin:0 0 3px}
  .pl-top{font-size:7px;gap:4px}
  .lifepip{width:4px;height:7px}
  .star{width:7px;height:7px}
  .buffs{flex-direction:row;flex-wrap:wrap;gap:3px}
  .buff{font-size:7px;padding:2px 4px}
  .hud-foot{flex:0 0 auto;gap:4px}
  .mini{padding:5px 6px;font-size:7px}

  #stage{
    flex:1 1 0;min-height:0;width:100%;
    border-radius:0;border-width:0;padding:4px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:none;background:transparent;
  }
  #game{border-radius:2px}
  #overlay{inset:0;border-radius:0;backdrop-filter:blur(2px)}
  .scr{padding:10px 14px}
  .logo{font-size:34px}.bignum{font-size:48px}
  h1{font-size:22px}h2{font-size:15px;letter-spacing:.18em}
  .btn{min-height:52px;padding:6px 16px;font-size:11px}
  .cols{flex-direction:column;gap:8px}
  .legend ul{grid-template-columns:1fr}
  .lvl-grid{grid-template-columns:repeat(4,1fr)}
  #bossbar{width:80%;top:8px}
  #toasts{bottom:12px}
  .toast{font-size:9px;padding:4px 9px}

  /* pad flows under the playfield */
  #touch{position:static;flex:0 0 auto;padding:6px 16px calc(10px + env(safe-area-inset-bottom))}
  .tpad{width:166px;height:166px;opacity:1}
  .tbtn{width:58px;height:58px;border-radius:12px}
  .tbtn.up,.tbtn.down{left:54px}
  .tbtn.left,.tbtn.right{top:54px}
  .tpad-hub{width:44px;height:44px}
  .tfire{width:112px;height:112px;font-size:11px;opacity:1}
}

/* phone held sideways: no vertical room, so float the pad over the arena */
@media (orientation:landscape) and (max-height:520px){
  #hud{padding:2px 6px;gap:4px}
  .hud-big{font-size:13px}.hud-score{font-size:12px}
  #hud .hud-block.grow,#hud .hud-foot{display:none}
  #touch{
    position:fixed;left:0;right:0;bottom:0;
    padding:4px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .tpad{width:132px;height:132px;opacity:.72}
  .tbtn{width:46px;height:46px}
  .tbtn.up,.tbtn.down{left:43px}
  .tbtn.left,.tbtn.right{top:43px}
  .tpad-hub{width:34px;height:34px}
  .tfire{width:88px;height:88px;opacity:.78;font-size:10px}
}

/* ---------------- меню без бокової панелі ----------------
   Панель із рахунком/ядром — атрибут бою: в меню її нема, арена-фон
   займає все вікно, а повертається вона разом зі стартом гри. */
body.menus #hud{display:none}
body.menus #app{justify-content:center}
body.menus #stage{max-width:1100px}

/* підпис "онлайн" всередині пункту меню — не збільшує кнопку */
.btn i{
  font-style:normal;font-size:8px;letter-spacing:.26em;color:var(--dim);line-height:1;
}
.btn:hover i{color:#04121c}

/* рядок позивного під онлайн-екранами */
.nickrow{
  margin:10px 0 4px;font-size:9px;color:var(--dim);letter-spacing:.14em;
  display:flex;gap:8px;align-items:center;justify-content:center;
}
.nickrow b{color:var(--cyan);letter-spacing:.2em}

/* одна колонка-картка по центру (нові екрани режимів) */
.solo-card{max-width:460px;margin:0 auto 12px}

/* рядок battleground у списку */
.net-row.bbrow{border-color:rgba(124,92,255,.45)}
.net-row.bbrow b{color:var(--violet)}
.net-row.bbrow:hover{border-color:var(--violet);box-shadow:0 0 16px rgba(124,92,255,.25)}

/* ---------------- підказка повернути телефон ----------------
   Не блокує гру: хто хоче грати стоячи — тисне «ГРАТИ ТАК», і підказка
   більше не зʼявляється до кінця сесії. Примус тут був би зухвальством:
   поле в портреті менше, але цілком грабельне. */
#rotate{
  position:fixed;inset:0;z-index:45;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,14,.9);backdrop-filter:blur(3px);
  padding:24px;
}
#rotate.hidden{display:none}
.rot-box{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;max-width:320px;
}
.rot-box b{font-size:15px;letter-spacing:.24em;color:var(--cyan);text-shadow:0 0 18px rgba(62,240,255,.6)}
.rot-box p{font-size:10px;letter-spacing:.14em;color:var(--dim);line-height:1.7}
/* телефон, що повертається: сам значок і є пояснення */
.rot-phone{
  width:54px;height:88px;border-radius:9px;
  border:2px solid var(--cyan);box-shadow:0 0 22px rgba(62,240,255,.45);
  animation:rot-turn 2.4s ease-in-out infinite;
}
@keyframes rot-turn{
  0%,30%{transform:rotate(0deg)}
  55%,85%{transform:rotate(-90deg)}
  100%{transform:rotate(0deg)}
}

/* battleground у бою: панель перехоплення */
#bb-take{
  position:absolute;left:50%;bottom:70px;transform:translateX(-50%);
  z-index:9;text-align:center;
}
#bb-take.hidden{display:none}
#bb-take .btn{box-shadow:0 0 30px rgba(62,240,255,.35)}
#bb-take p{font-size:10px;color:var(--txt);margin-bottom:8px;letter-spacing:.14em}

/* мобільні меню: великі цілі, повний екран */
@media (max-width:820px), (max-height:520px){
  .menu{gap:9px;display:flex;flex-direction:column;align-items:center}
  .net-maps .dmap{padding:10px 14px;font-size:11px}
  .net-list{max-height:34vh}
  .net-row{padding:10px 10px}
  .solo-card{max-width:none;width:100%}
  .nickrow{font-size:10px}
  #bb-take{bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* ---------------- settings: one tidy grid ----------------
   Label column right-aligned, control column left-aligned, so the eye has
   two clean edges instead of five ragged ones. */
.setgrid{display:grid;gap:2px;text-align:left;padding:14px 16px}
.setrow{
  display:grid;grid-template-columns:1fr 132px;gap:14px;align-items:center;
  padding:9px 4px;border-bottom:1px solid rgba(23,44,77,.6);
}
.setrow:last-child{border-bottom:0}
.setlabel{
  display:inline-flex;align-items:center;gap:7px;justify-content:flex-end;
  font-size:10px;letter-spacing:.18em;color:var(--dim);text-align:right;
}
.setgrid input[type=text],.setgrid #net-nick{
  width:100%;margin:0;padding:9px 10px;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--cyan);background:rgba(4,10,22,.9);
  border:1px solid var(--line);border-radius:3px;
}
.setgrid #net-nick:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 16px rgba(62,240,255,.3)}

/* neon switch instead of a native checkbox */
.switch{position:relative;display:inline-block;width:52px;height:26px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:rgba(4,10,22,.9);border:1px solid var(--line);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.switch i::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#2b4467;
  transition:transform .18s cubic-bezier(.3,.8,.3,1), background .18s, box-shadow .18s;
}
.switch input:checked + i{border-color:var(--cyan);box-shadow:0 0 16px rgba(62,240,255,.25) inset}
.switch input:checked + i::after{
  transform:translateX(26px);background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}
.switch input:focus-visible + i{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(62,240,255,.35)}

/* ---------------- hover explanation ("?") ----------------
   Every setting and every mode choice can say what it is for, without a wall
   of text sitting on the screen all the time. */
.tip{
  width:16px;height:16px;flex:0 0 16px;padding:0;cursor:help;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;line-height:1;
  color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:50%;
  transition:color .16s, border-color .16s, box-shadow .16s, transform .16s;
}
.tip:hover,.tip:focus-visible,.tip.on{
  color:#04121c;background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 14px rgba(62,240,255,.55);transform:translateY(-1px);outline:none;
}
.tip::after{                            /* the bubble */
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 10px);left:50%;
  width:max-content;max-width:min(280px,72vw);
  padding:9px 11px;
  font-size:9.5px;line-height:1.65;letter-spacing:.06em;text-align:left;
  text-transform:none;white-space:normal;
  color:var(--txt);background:rgba(6,13,26,.97);
  border:1px solid rgba(62,240,255,.55);border-radius:4px;
  box-shadow:0 0 24px rgba(62,240,255,.18), 0 10px 30px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;
  transform:translate(-50%,6px) scale(.97);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.25,1), visibility .18s;
  pointer-events:none;z-index:40;
}
.tip::before{                           /* the little arrow */
  content:"";position:absolute;bottom:calc(100% + 5px);left:50%;
  width:8px;height:8px;background:rgba(6,13,26,.97);
  border-right:1px solid rgba(62,240,255,.55);border-bottom:1px solid rgba(62,240,255,.55);
  opacity:0;visibility:hidden;
  transform:translate(-50%,4px) rotate(45deg);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.25,1), visibility .18s;
  pointer-events:none;z-index:41;
}
.tip{position:relative}
.tip:hover::after,.tip:focus-visible::after,.tip.on::after{
  opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);
}
.tip:hover::before,.tip:focus-visible::before,.tip.on::before{
  opacity:1;visibility:visible;transform:translate(-50%,0) rotate(45deg);
}
/* near the right edge the bubble would clip: anchor it to the icon's right */
.tip.left::after{left:auto;right:-6px;transform:translate(0,6px) scale(.97)}
.tip.left:hover::after,.tip.left.on::after{transform:translate(0,0) scale(1)}
.tip.left::before{left:auto;right:2px;transform:translate(0,4px) rotate(45deg)}
.tip.left:hover::before,.tip.left.on::before{transform:translate(0,0) rotate(45deg)}

@media (max-width:820px), (max-height:520px){
  .setrow{grid-template-columns:1fr 118px;gap:10px;padding:11px 2px}
  .setlabel{font-size:9px}
  .tip{width:20px;height:20px;flex-basis:20px;font-size:10px}
  .tip::after{font-size:10px;max-width:78vw}
}

/* too close to the top of the screen: the bubble flips below the icon */
.tip.down::after{
  top:calc(100% + 10px);bottom:auto;
  transform:translate(-50%,-6px) scale(.97);
}
.tip.down:hover::after,.tip.down:focus-visible::after,.tip.down.on::after{
  transform:translate(-50%,0) scale(1);
}
.tip.down::before{
  top:calc(100% + 5px);bottom:auto;
  border:0;border-left:1px solid rgba(62,240,255,.55);border-top:1px solid rgba(62,240,255,.55);
  transform:translate(-50%,-4px) rotate(45deg);
}
.tip.down:hover::before,.tip.down:focus-visible::before,.tip.down.on::before{
  transform:translate(-50%,0) rotate(45deg);
}
.tip.down.left::after{left:auto;right:-6px;transform:translate(0,-6px) scale(.97)}
.tip.down.left:hover::after,.tip.down.left.on::after{transform:translate(0,0) scale(1)}
.tip.down.left::before{left:auto;right:2px}

/* the touch pad is a combat control: menus have no use for it */
body.menus #touch{display:none}

/* ---------------- help: generated reference cards ----------------
   Icon, name, then the copy — three columns so every row lines up whatever
   the length of the text, and the numbers sit on their own line. */
.helpgrid{display:flex;flex-direction:column;gap:5px}
.hrow{
  display:grid;grid-template-columns:36px 132px minmax(0,1fr);gap:10px;align-items:start;
  padding:7px 9px;text-align:left;
  background:rgba(9,17,32,.72);border:1px solid var(--line);border-radius:4px;
}
.hrow .hico{display:flex;align-items:center;justify-content:center;height:100%;min-height:30px}
.hrow .hico canvas{display:block;max-width:100%;height:auto}
.hrow b{font-size:9.5px;letter-spacing:.16em;color:var(--cyan);line-height:1.5;padding-top:2px}
.hrow i{font-size:9.5px;line-height:1.65;color:#9fbbd8;font-style:normal}
.hrow .hstat{
  display:block;margin-top:3px;font-size:8px;letter-spacing:.08em;color:#5f7fa6;
}
.hrow.mine{border-color:rgba(62,240,255,.4)}
/* the boss portrait carries rings and nodes around the hull, so it needs a
   wider gutter than a pickup icon or a chassis */
.hrow.boss{border-color:rgba(255,77,94,.32);grid-template-columns:48px 132px minmax(0,1fr)}

@media (max-width:820px), (max-height:520px){
  .hrow,.hrow.boss{grid-template-columns:30px 1fr;gap:8px;padding:8px}
  .hrow b{grid-column:2}
  .hrow i{grid-column:2}
  .hrow .hico{min-height:26px;align-items:flex-start}
}

/* ---------------- map cards with previews ----------------
   A name alone tells you nothing about a map; the layout does. Same card in
   the campaign grid, the duel picker and the co-op picker. */
.lvl{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px}
.lvl .thumb{display:block;line-height:0}
.lvl .thumb canvas{display:block;width:100%;height:auto;border-radius:2px;opacity:.9}
.lvl em{font-style:normal;font-size:12px;letter-spacing:.06em}
.lvl:hover:not(.lock) .thumb canvas{opacity:1}

.mapsrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;max-height:216px;overflow:auto}
.mapcard{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:5px 4px;cursor:pointer;font-family:var(--mono);
  background:rgba(10,20,38,.7);border:1px solid var(--line);border-radius:3px;
  transition:.14s;
}
.mapcard .thumb{display:block;line-height:0;width:100%}
.mapcard .thumb canvas{display:block;width:100%;height:auto;border-radius:2px;opacity:.85}
.mapcard small{font-size:7px;letter-spacing:.08em;color:var(--dim);line-height:1.3;text-align:center}
.mapcard:hover{border-color:var(--cyan)}
.mapcard:hover .thumb canvas{opacity:1}
.mapcard.on{border-color:var(--cyan);box-shadow:0 0 16px rgba(62,240,255,.3)}
.mapcard.on small{color:var(--cyan)}
.mapcard .randico{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:21/16;font-size:18px;color:var(--dim);
  background:rgba(4,9,18,.9);border-radius:2px;
}
#duel-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}

@media (max-width:820px), (max-height:520px){
  .mapsrow{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:33vh}
  .lvl-grid{grid-template-columns:repeat(3,1fr)}
}

/* Підзаголовок логотипа: друга частина назви живе окремим рядком, щоб
   «NEON ARMOR» лишався читабельним, а «TAN4IKI» не ламав його ритм. */
.logo .logo-sub{
  display:block;font-style:normal;font-size:.34em;letter-spacing:.5em;
  color:var(--teal);text-shadow:0 0 14px var(--teal);margin-top:2px;
}

/* ---------------- повзунок кількості танків ----------------
   Число велике й окремо: під час перетягування дивишся на нього, а не на
   позицію ручки. Підпис під числом називає рівень тісноти словами. */
.countpick{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.countpick input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));outline:none;cursor:pointer;
}
.countpick input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--void1);border:2px solid var(--cyan);cursor:grab;
  box-shadow:0 0 12px rgba(62,240,255,.7);
}
.countpick input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--void1);
  border:2px solid var(--cyan);cursor:grab;box-shadow:0 0 12px rgba(62,240,255,.7);
}
.countpick output{display:flex;align-items:baseline;justify-content:center;gap:10px}
.countpick output b{
  font-family:var(--mono);font-size:26px;color:var(--cyan);
  text-shadow:0 0 14px rgba(62,240,255,.6);line-height:1;
}
.countpick output small{font-size:9px;letter-spacing:.24em;color:var(--dim)}
.countmarks{display:flex;justify-content:space-between;font-size:7px;
  letter-spacing:.1em;color:#4a648a}
.countmarks span{white-space:nowrap}

/* ---------------- кнопки зворотного звʼязку ----------------
   Яскраві навмисно: їх мають помічати, але вони не мають конкурувати з
   головним меню, тому живуть у Допомозі й ідуть парою. */
.feedback-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.feedback-row.hidden{display:none}
.btn.feedback{
  width:auto;min-width:210px;text-decoration:none;gap:2px;
  border-color:var(--amber);color:var(--amber);
  box-shadow:0 0 18px rgba(255,194,71,.22) inset;
}
.btn.feedback:hover{
  background:var(--amber);border-color:var(--amber);color:#180f02;
  box-shadow:0 0 26px rgba(255,194,71,.6);
}
.btn.feedback .fb-icon{font-size:15px;line-height:1}
.btn.feedback .fb-label{font-size:11px;letter-spacing:.2em}
.btn.feedback .fb-hint{
  font-style:normal;font-size:7.5px;letter-spacing:.08em;opacity:.75;
  text-transform:none;
}

/* ---------------- довідка: розділи бонусів ----------------
   Двадцять бонусів суцільним списком неможливо охопити оком. Заголовок
   розділу дає паузу й підказує, чого саме шукати. */
.helpcat{
  display:flex;align-items:baseline;gap:10px;margin:14px 0 6px;
  font-size:10px;letter-spacing:.28em;color:var(--cyan);
  text-shadow:0 0 12px rgba(62,240,255,.4);
}
.helpcat:first-child{margin-top:0}
.helpcat em{font-style:normal;font-size:8px;letter-spacing:.12em;color:var(--dim)}

/* Бейдж рідкісності — колір несе значення, тому підпис дублює його словом:
   для тих, хто не розрізняє відтінки, самого кольору замало. */
.hrow .rar{font-style:normal;letter-spacing:.14em}

/* Позначка нового бонуса. */
.hrow b .fresh{
  display:inline-block;margin-left:6px;padding:1px 4px;
  font-style:normal;font-size:6.5px;letter-spacing:.14em;
  color:#180307;background:var(--pink);border-radius:2px;vertical-align:middle;
}