:root {
  --bg: #0b1020;
  --panel: rgba(12, 18, 34, 0.72);
  --panel-solid: #121a2e;
  --line: rgba(140, 200, 255, 0.18);
  --text: #eef3ff;
  --muted: #9fb0cf;
  --cyan: #40e0ff;
  --pink: #ff4d6d;
  --green: #5cff8a;
  --gold: #ffe14d;
  --font: 'Chakra Petch', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
kbd { font-family: var(--font); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: 12px; }

/* ---------- screens ---------- */
/* the MENU SCREEN SCALES WITH THE SCREEN: --ui (main.js) is 1 for a page ~1040 px high (a 1080p screen, laid out as
   it always was), bigger on bigger screens (1440p ~1.4, 4K ~2.1), down to 0.8 on laptops so it all fits;
   1 on phones and tablets (their own layout). CSS zoom lays it out at that size - sharp, not a stretched picture.
   Inside a zoomed box vh/vw are zoomed too: every such limit below is divided by --ui. */
:root { --ui: 1; }
#menu > .menu-wrap, #menu > #boot, #menu > .platforms, #snd-btn, .modal > .menu-card, #pause > .menu-card { zoom: var(--ui); }
.screen, .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 20; padding: 16px; }
#menu { background: radial-gradient(ellipse at 50% 30%, rgba(10,16,32,0.1), rgba(6,10,22,0.65)); }
#pause, .modal { background: rgba(5, 8, 18, 0.55); backdrop-filter: blur(6px); }
.modal { z-index: 30; }
.menu-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 10px; }
.menu-card.small { width: min(380px, 100%); }
.menu-card h2 { font-family: var(--font); margin: 0 0 6px; letter-spacing: 0.08em; }
.logo { font-family: var(--font); font-weight: 700; font-size: 58px; line-height: 1; margin: 0; letter-spacing: 0.04em;
  background: linear-gradient(100deg, #fff 10%, var(--cyan) 50%, #b49cff 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(64,224,255,0.35)); }
.logo span { background: linear-gradient(100deg, var(--pink), #ffb040); -webkit-background-clip: text; background-clip: text; }
.tag { color: var(--muted); margin: 0 0 8px; font-size: 14px; }
.online { display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 14px; color: var(--muted); padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 10px; }
.online i { width: 9px; height: 9px; border-radius: 50%; background: #666; flex: none; }
.online.live i { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.6s infinite; }
.online.off i { background: #ff9f43; }
@keyframes pulse { 50% { opacity: 0.4; } }
.lbl { font-family: var(--font); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-top: 6px; }
input#name { font: 600 18px var(--font); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,0.3); color: var(--text); outline: none; }
input#name:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(64,224,255,0.15); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform .12s; }
.swatches button:hover { transform: scale(1.1); }
.swatches button.sel { border-color: #fff; box-shadow: 0 0 14px currentColor; }
.btn { font: 700 16px var(--font); letter-spacing: 0.1em; padding: 12px 16px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.06); color: var(--text); cursor: pointer; transition: transform .1s, background .15s, box-shadow .15s; }
.btn:hover { background: rgba(255,255,255,0.12); }
.btn:active { transform: translateY(1px); }
.btn.primary { margin-top: 10px; font-size: 20px; padding: 14px; border: none; color: #061018; background: linear-gradient(100deg, var(--cyan), #7df3c0); box-shadow: 0 8px 30px rgba(64,224,255,0.35); }
.btn.primary:hover { box-shadow: 0 10px 40px rgba(64,224,255,0.55); }
.btn.primary:disabled { opacity: 0.5; cursor: wait; }
.btn.danger { color: #ff8da1; }
.row-btns { display: flex; gap: 8px; }
.row-btns .btn { flex: 1; font-size: 13px; }
.note { color: var(--muted); font-size: 12px; margin: 4px 0 0; text-align: center; }
#mobile-note { color: #ffb040; font-size: 14px; }
.controls-strip { position: fixed; bottom: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13px; color: var(--muted); }
.set { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.set output { color: var(--text); font-family: var(--font); float: right; }
.set.inline { flex-direction: row; align-items: center; gap: 10px; justify-content: space-between; }
.set input[type=range] { width: 100%; accent-color: var(--cyan); }
.set select { font: 14px Inter, sans-serif; padding: 6px; border-radius: 8px; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); }
.howto ul { margin: 0; padding-left: 18px; line-height: 1.5; font-size: 14px; color: #d6def0; display: flex; flex-direction: column; gap: 6px; }
.spinner { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading p { font-family: var(--font); letter-spacing: 0.1em; color: var(--muted); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--font); user-select: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px #000, 0 0 1px #000; }
#crosshair b { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; background: #fff; border-radius: 50%; box-shadow: 0 0 2px #000; }
#crosshair.w0 i:nth-child(1) { width: 2px; height: 8px; left: -1px; top: -14px; }
#crosshair.w0 i:nth-child(2) { width: 2px; height: 8px; left: -1px; top: 6px; }
#crosshair.w0 i:nth-child(3) { width: 8px; height: 2px; left: -14px; top: -1px; }
#crosshair.w0 i:nth-child(4) { width: 8px; height: 2px; left: 6px; top: -1px; }
#crosshair.w1 i { width: 10px; height: 2px; }
#crosshair.w1 i:nth-child(1) { left: -30px; top: -14px; transform: rotate(-60deg); }
#crosshair.w1 i:nth-child(2) { left: 20px; top: -14px; transform: rotate(60deg); }
#crosshair.w1 i:nth-child(3) { left: -30px; top: 12px; transform: rotate(60deg); }
#crosshair.w1 i:nth-child(4) { left: 20px; top: 12px; transform: rotate(-60deg); }
#crosshair.w2 i:nth-child(1) { width: 2px; height: 6px; left: -1px; top: 8px; }
#crosshair.w2 i:nth-child(2) { width: 2px; height: 6px; left: -1px; top: 18px; opacity: 0.7; }
#crosshair.w2 i:nth-child(3) { width: 10px; height: 2px; left: -18px; top: -1px; }
#crosshair.w2 i:nth-child(4) { width: 10px; height: 2px; left: 8px; top: -1px; }
#crosshair.w2 b { width: 8px; height: 8px; left: -4px; top: -4px; background: none; border: 2px solid #fff; }
#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; }
#hitmarker i { position: absolute; width: 11px; height: 2.5px; background: #fff; left: -5.5px; top: -1.25px; }
#hitmarker i:nth-child(1) { transform: rotate(45deg) translateX(-12px); }
#hitmarker i:nth-child(2) { transform: rotate(135deg) translateX(-12px); }
#hitmarker i:nth-child(3) { transform: rotate(225deg) translateX(-12px); }
#hitmarker i:nth-child(4) { transform: rotate(315deg) translateX(-12px); }
#hitmarker.on { animation: hitm .25s ease-out; }
#hitmarker.head i { background: var(--gold); }
#hitmarker.kill i { background: var(--pink); height: 3.5px; }
#hitmarker.kill.on { animation: hitm .45s ease-out; }
@keyframes hitm { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }
#reload-ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; opacity: 0;
  background: conic-gradient(rgba(255,255,255,0.85) calc(var(--p, 0) * 360deg), rgba(255,255,255,0.12) 0);
  -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px); }
#reload-ring.on { opacity: 1; }
#damage-vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 30, 60, 0.55) 100%); }
#dmg-dirs { position: absolute; left: 50%; top: 50%; }
.dmg-dir { position: absolute; left: -60px; top: -150px; width: 120px; height: 150px; transform-origin: 60px 150px; animation: dmgdir .9s ease-out forwards; }
.dmg-dir::before { content: ''; position: absolute; left: 20px; top: 0; width: 80px; height: 26px; border-top: 5px solid rgba(255, 60, 80, 0.95); border-radius: 50% 50% 0 0; filter: drop-shadow(0 0 6px #ff2040); }
@keyframes dmgdir { from { opacity: 1; } to { opacity: 0; } }

#top-bar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
#timer { font-size: 30px; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.6); letter-spacing: 0.05em; }
#timer.low { color: var(--pink); }
/* (a dark pill behind it: grey on a bright sky was unreadable) */
#score-line { display: inline-block; margin-top: 2px; padding: 3px 13px 4px; border-radius: 999px; background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 16px; color: #eef3ff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
#score-line:empty { display: none; }
#score-line span { color: var(--cyan); font-weight: 700; }
#score-line small { color: #b9c5de; }
#score-line em { font-style: normal; color: #cfd8ec; font-size: 13px; margin-left: 8px; }

#killfeed { position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.feed-item { background: rgba(8, 12, 24, 0.6); padding: 5px 11px; border-radius: 7px; font-size: 14px; transition: opacity .5s; display: flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,0.06); }
.feed-item.fade { opacity: 0; }
.feed-item b.me { text-decoration: underline; text-underline-offset: 3px; }
.wtag { font-size: 11px; letter-spacing: 0.08em; color: #cfd8ea; background: rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 4px; }
.wtag.void { color: #c9a8ff; background: rgba(160, 100, 255, 0.18); }

#center-msg, #sub-msg { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; font-weight: 700; text-shadow: 0 3px 16px rgba(0,0,0,0.6); white-space: nowrap; }
#center-msg { top: 24%; font-size: 40px; letter-spacing: 0.08em; }
#sub-msg { top: 58%; font-size: 18px; letter-spacing: 0.1em; }
#center-msg.pop, #sub-msg.pop { animation: pop 2.2s ease-out forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(1.5); } 10% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
#over-timer { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); font-size: 15px; color: #d7a6ff; letter-spacing: 0.1em; opacity: 0; text-shadow: 0 0 12px #8a2be2; }
#over-timer.on { opacity: 1; }
#prot-msg { position: absolute; bottom: 132px; left: 24px; font-size: 11px; letter-spacing: 0.2em; color: #bfe9ff; opacity: 0; text-shadow: 0 1px 4px #000; }
#notes { position: absolute; top: 232px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; max-width: 42vw; }
#notes .note { background: rgba(8, 12, 24, 0.62); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 5px 11px; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 1px 3px #000; animation: notein .25s ease-out; transition: opacity .5s; }
#notes .note.sub { font-size: 12px; font-weight: 700; opacity: 0.9; }
#notes .note.fade { opacity: 0; }
@keyframes notein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
body.touch #notes { top: 12px; left: calc(172px + env(safe-area-inset-left)); right: auto; align-items: flex-start; max-width: calc((50vw - 250px) * 1.25); transform: scale(0.8); transform-origin: top left; }   /* (phones: the top band between the health box and the timer - never over the aim or the thumb buttons) */
body.touch #notes .note:nth-child(n+3) { display: none; }
#prot-msg.on { opacity: 0.85; }

#hp-box, #ammo-box { position: absolute; bottom: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; backdrop-filter: blur(8px); }
#hp-box { left: 22px; width: 280px; }
.hp-label { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.hp-row { display: flex; align-items: center; gap: 12px; }
#hp-num { font-size: 40px; font-weight: 700; min-width: 72px; }
.hp-bar { flex: 1; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.1); overflow: hidden; }
#hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), #b3ff6b); transition: width .15s; }
#hp-box.low #hp-fill { background: linear-gradient(90deg, var(--pink), #ff9f43); }
#hp-box.low #hp-num { color: var(--pink); }
.dash-row { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.2em; color: var(--muted); margin-top: 6px; }
.dash-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
#dash-fill { height: 100%; background: #9fb0cf; }
.dash-bar.ready #dash-fill { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#ammo-box { right: 22px; text-align: right; min-width: 230px; }
#weapon-name { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
.ammo-row { font-weight: 700; }
#ammo { font-size: 44px; }
#ammo.empty { color: var(--pink); }
#ammo-max { font-size: 18px; color: var(--muted); }
#weapons { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.slot { font-size: 11px; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--muted); border-bottom: 2px solid transparent; }
.slot .k { opacity: 0.6; margin-right: 4px; }
.slot.active { color: #fff; background: rgba(255,255,255,0.14); border-bottom-color: var(--wc); }

#chat-log { position: absolute; left: 22px; bottom: 150px; width: min(440px, 60vw); display: flex; flex-direction: column; gap: 3px; font-family: Inter, sans-serif; font-size: 14px; }
.chat-line { text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,0.7); transition: opacity 1s; }
.chat-line i { color: #b8c6e3; }
.chat-line.old { opacity: 0; }
#chat-log.open .chat-line { opacity: 1; }
#chat-box { position: absolute; left: 22px; bottom: 116px; width: min(440px, 60vw); display: none; pointer-events: auto; }
#chat-box.open { display: block; }
#chat-input { width: 100%; font: 14px Inter, sans-serif; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cyan); background: rgba(5,10,20,0.8); color: #fff; outline: none; }
#net-info { position: absolute; left: 22px; top: 14px; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-shadow: 0 1px 4px #000; }

#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); background: rgba(10, 15, 30, 0.88); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; display: none; }
#scoreboard.on { display: block; }
#scoreboard h3 { margin: 0 0 10px; letter-spacing: 0.2em; font-size: 16px; color: var(--muted); text-align: center; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); font-weight: 600; padding: 4px 8px; }
td { padding: 7px 8px; border-top: 1px solid rgba(255,255,255,0.06); }
td i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
tr.me td { background: rgba(64, 224, 255, 0.1); }
td.lk { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
#death-screen { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); text-align: center; display: none; }
#death-screen.on { display: block; }
#death-by { font-size: 28px; font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
#death-by small { display: block; font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 6px; letter-spacing: 0.06em; }   /* (the killer's health at that moment) */
#death-count { font-size: 16px; color: var(--muted); margin-top: 8px; letter-spacing: 0.1em; }

/* ---------- flags, country, leaderboard ---------- */
img.flag { width: 20px; height: 15px; border-radius: 2px; vertical-align: -2px; margin-right: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
img.flag.big { width: 36px; height: 27px; margin: 0; }
.country-row { display: flex; gap: 10px; align-items: center; }
.country-row select { flex: 1; font: 15px Inter, sans-serif; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); outline: none; }
.menu-wrap { display: flex; gap: 18px; align-items: stretch; justify-content: center; max-width: 100%; max-height: calc((100vh - 70px) / var(--ui)); }
.board-card { width: min(380px, 100%); }
.board-card h2 { font-size: 16px; letter-spacing: 0.14em; color: var(--muted); }
.lb-scroll { overflow-y: auto; flex: 1; min-height: 0; max-height: 470px; }
.board-card table { font-size: 14px; }
.board-card td { padding: 6px 6px; }
.board-card tr:nth-child(1) td:first-child { color: var(--gold); }
#scoreboard .sub { margin: 16px 0 6px; }
/* the scoreboard always fits: it starts under the top bar (hud.js sets --sb-top), rows move closer when it is long,
   and it is scaled down (--sb-k) rather than cut - the first places are the ones everybody wants to see.
   Wide screens: the all-time top 10 stands beside the game's board. */
#scoreboard { top: var(--sb-top, 90px); transform: translateX(-50%) scale(var(--sb-k, 1)); transform-origin: 50% 0; overflow-y: auto; max-height: calc((100vh - var(--sb-top, 90px) - 8px) / var(--sb-k, 1)); }
#scoreboard.two { width: min(1040px, 96vw); }
#scoreboard.two.on { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
#scoreboard.two .sub { margin-top: 0; }
#scoreboard.dense td, #round-end.dense td { padding-top: 3px; padding-bottom: 3px; }
#scoreboard.dense h3 { margin-bottom: 4px; }
#scoreboard.noall .sb-col + .sb-col { display: none; }
/* while the round's end (and the map vote) is up, nothing else is on the screen - no timer, notices, health, weapons, bars,
   touch buttons - so nothing can cover it on any screen */
body.re-on #hud > :not(#round-end):not(#chat-box), body.re-on #touch-layer, body.re-on #fr-notes { visibility: hidden !important; }
#round-end { z-index: 40; }
@media (max-width: 860px) { .menu-wrap { flex-direction: column; overflow-y: auto; } .board-card { width: min(420px, 100%); } .board-card .lb-scroll { max-height: 260px; } }   /* (phones: the friends tab needs it) */

@media (max-height: 760px) {
  .controls-strip { display: none; }
  .menu-card { padding: 20px; gap: 8px; }
  .logo { font-size: 46px; }
}
@media (max-width: 700px) {
  .logo { font-size: 44px; }
  #hp-box { width: 200px; left: 10px; bottom: 10px; }
  #ammo-box { min-width: 160px; right: 10px; bottom: 10px; }
  .controls-strip { display: none; }
}

#offline-banner { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); background: rgba(200, 30, 50, 0.85); color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 13px; letter-spacing: 0.06em; display: none; }
#offline-banner.on { display: block; }

.dmgnum { position: absolute; left: 0; top: 0; font: 700 18px var(--font); color: #fff; text-shadow: 0 2px 4px #000, 0 0 8px rgba(0,0,0,0.6); pointer-events: none; will-change: transform; }
.dmgnum.head { color: var(--gold); font-size: 22px; }
.dmgnum.kill { color: var(--pink); font-size: 24px; }

#strike-msg { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); font-size: 15px; letter-spacing: 0.1em; color: #ffb27a; text-shadow: 0 0 12px #ff5a1d; opacity: 0; transition: opacity .3s; }
#strike-msg.on { opacity: 1; animation: strikePulse 1.2s infinite; }
#nuke-msg { position: absolute; top: 136px; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 700; letter-spacing: 0.12em; color: #aaff7a; text-shadow: 0 0 14px #3dff1d; opacity: 0; transition: opacity .3s; pointer-events: none; }
#nuke-msg.on { opacity: 1; animation: strikePulse 0.9s infinite; }
.tnuke { left: calc(18px + env(safe-area-inset-left)); top: 240px; width: 54px; height: 54px; font-size: 28px; display: none; background: rgba(60,255,40,0.35); border-color: #7dff4d; }
.tnuke.ready { display: block; animation: strikePulse 0.9s infinite; }
.tbuy, .tuse, .tscope, .tview { display: none; }
body.canuse .tuse { display: block; right: calc(290px + env(safe-area-inset-right)); bottom: 30px; width: 64px; height: 64px; font-size: 22px; font-weight: 800; background: rgba(255,200,90,0.35); border-color: #ffc85a; }
body.driving .tview { display: block; right: calc(290px + env(safe-area-inset-right)); bottom: 104px; width: 52px; height: 52px; font-size: 22px; }
body.comp .tbuy { display: block; left: calc(18px + env(safe-area-inset-left)); top: 240px; width: 58px; height: 44px; font-size: 15px; font-weight: 800; background: rgba(255,179,71,0.4); border-color: #ffb347; }
body.comp .tuse { display: block; right: calc(290px + env(safe-area-inset-right)); bottom: 30px; width: 64px; height: 64px; font-size: 22px; font-weight: 800; background: rgba(255,90,74,0.35); border-color: #ff5a4a; }
body.rail .tscope { display: block; right: calc(210px + env(safe-area-inset-right)); bottom: 110px; width: 54px; height: 54px; font-size: 24px; }
@keyframes strikePulse { 50% { opacity: 0.55; } }

#voice-ind { position: absolute; left: 22px; bottom: 132px; font-size: 13px; letter-spacing: 0.12em; color: #7dff9a; background: rgba(10,30,18,0.6); padding: 4px 10px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
#voice-ind.on { opacity: 1; }
#speakers { position: absolute; left: 22px; top: 40px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; text-shadow: 0 1px 4px #000; }

/* ---------- touch / mobile ---------- */
body.touch, body.touch canvas#c { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch-layer { position: fixed; inset: 0; z-index: 12; display: none; touch-action: none; }
#touch-layer.on { display: block; }
.tstick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); display: none; pointer-events: none; }
.tstick.on { display: block; }
.tknob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.45); transform: translate(-50%, -50%); }
.tbtn { position: absolute; border: 2px solid rgba(255,255,255,0.35); background: rgba(10,16,30,0.45); color: #fff; font: 700 13px var(--font); letter-spacing: 0.08em; border-radius: 50%; width: 58px; height: 58px; touch-action: none; padding: 0; backdrop-filter: blur(4px); }
.tbtn.down { background: rgba(64,224,255,0.45); border-color: var(--cyan); }
.tfire { right: calc(26px + env(safe-area-inset-right)); bottom: 34px; width: 96px; height: 96px; font-size: 16px; background: rgba(255,77,109,0.35); border-color: rgba(255,120,140,0.7); }
.tjump { right: calc(136px + env(safe-area-inset-right)); bottom: 26px; width: 66px; height: 66px; }
.tdash { right: calc(40px + env(safe-area-inset-right)); bottom: 146px; }
.treload { right: calc(122px + env(safe-area-inset-right)); bottom: 112px; font-size: 22px; }
.tswitch { right: calc(190px + env(safe-area-inset-right)); bottom: 104px; font-size: 22px; }
.tstrike { right: calc(210px + env(safe-area-inset-right)); bottom: 30px; font-size: 22px; opacity: 0.25; }
.tstrike.ready { opacity: 1; background: rgba(255,138,61,0.45); border-color: #ff8a3d; }
.tvoice { left: calc(18px + env(safe-area-inset-left)); top: 180px; width: 50px; height: 50px; font-size: 20px; }
.tchat { left: calc(18px + env(safe-area-inset-left)); top: 126px; width: 44px; height: 44px; font-size: 18px; }
.tboard { right: calc(14px + env(safe-area-inset-right)); top: 62px; width: 44px; height: 44px; font-size: 18px; }   /* (under the menu button - the middle belongs to the event bars) */
.tmenu { right: calc(14px + env(safe-area-inset-right)); top: 12px; width: 44px; height: 44px; font-size: 20px; border-radius: 10px; }
body.touch #hp-box { left: calc(10px + env(safe-area-inset-left)); top: 26px; bottom: auto; width: 170px; padding: 6px 10px; transform: scale(0.85); transform-origin: top left; }
body.touch #ammo-box { right: calc(64px + env(safe-area-inset-right)); top: 10px; bottom: auto; min-width: 0; padding: 6px 10px; transform: scale(0.8); transform-origin: top right; }
body.touch #killfeed { top: 110px; right: calc(12px + env(safe-area-inset-right)); transform: scale(0.8); transform-origin: top right; }
body.touch #chat-log { left: calc(74px + env(safe-area-inset-left)); top: 138px; bottom: auto; width: 45vw; font-size: 12px; }
body.touch #chat-box { left: 70px; top: 50px; bottom: auto; width: 60vw; }
body.touch #net-info, body.touch .controls-strip { display: none; }
body.touch #voice-ind { left: 76px; top: 190px; bottom: auto; }
body.touch .dmgnum { font-size: 15px; }
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(5,8,18,0.92); color: #fff; font: 700 22px var(--font); align-items: center; justify-content: center; text-align: center; padding: 24px; }
@media (orientation: portrait) { body.touch.playing #rotate-hint { display: flex; } }

/* ---------- loading strip ---------- */
#boot { width: min(818px, 100%); margin-top: 16px; padding: 12px 16px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(14px); transition: opacity 0.8s 1.2s; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 8px; }
.boot-top b { font: 700 16px 'Chakra Petch', sans-serif; color: var(--text); }
.boot-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
#boot-bar { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), #7df3c0, var(--cyan)); background-size: 200% 100%; animation: bootshine 2s linear infinite; box-shadow: 0 0 14px rgba(64,224,255,0.6); }
@keyframes bootshine { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* ---------- leaderboard: fit the card, themed scrollbar ---------- */
.lb-scroll { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.45) transparent; padding-right: 4px; }
.lb-scroll::-webkit-scrollbar { width: 6px; }
.lb-scroll::-webkit-scrollbar-track { background: transparent; }
.lb-scroll::-webkit-scrollbar-thumb { background: rgba(64,224,255,0.4); border-radius: 3px; }
.lb-scroll::-webkit-scrollbar-thumb:hover { background: rgba(64,224,255,0.7); }
.lb-scroll::-webkit-scrollbar-button { display: none; height: 0; }
.board-card table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.board-card th:nth-child(1), .board-card td:nth-child(1) { width: 26px; }
.board-card th:nth-child(3), .board-card td:nth-child(3) { width: 46px; }
.board-card th:nth-child(4), .board-card td:nth-child(4) { width: 56px; }
.board-card th:nth-child(5), .board-card td:nth-child(5) { width: 44px; }
.board-card td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-card th, .board-card td { padding-left: 4px; padding-right: 4px; }

.pg-ok { color: #6be38f; } .pg-mid { color: #ffd166; } .pg-bad { color: #ff5c7a; }
td.lk { white-space: nowrap; }

/* ---------- dynamite fuse countdown ---------- */
#fuse-ind { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); font: 700 20px 'Chakra Petch', sans-serif; color: #ffb35c; text-shadow: 0 0 10px rgba(255,120,40,0.8), 0 2px 4px #000; display: none; pointer-events: none; }
#fuse-ind.on { display: block; }
#fuse-ind.hot { color: #ff4d4d; animation: fusepulse 0.25s infinite alternate; }
@keyframes fusepulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.18); } }
#crosshair.w3 i { display: none; }
#crosshair.w3 i:nth-child(1) { display: block; width: 18px; height: 18px; left: -11px; top: -11px; background: none; border: 2px solid rgba(255,170,90,0.9); border-radius: 50%; box-shadow: 0 0 3px #000; }

#test-badge { position: fixed; bottom: 6px; left: 8px; z-index: 70; background: #ff8a3d; color: #140800; font: 700 12px 'Chakra Petch', sans-serif; letter-spacing: 0.2em; padding: 4px 12px; border-radius: 6px; pointer-events: none; opacity: 0.85; }

/* ---------- spectator ---------- */
.btn.spec-btn { margin-top: 2px; font-size: 13px; letter-spacing: 0.06em; }
body.spectating #hp-box, body.spectating #ammo-box, body.spectating #crosshair, body.spectating #reload-ring,
body.spectating .tjump, body.spectating .treload, body.spectating .tswitch, body.spectating .tstrike, body.spectating .tnuke, body.spectating .tvoice { display: none !important; }
#spec-bar { display: none; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); text-align: center; background: rgba(8,12,24,0.72); border: 1px solid var(--line); border-radius: 14px; padding: 8px 20px 10px; backdrop-filter: blur(8px); pointer-events: none; min-width: 240px; }
body.spectating #spec-bar { display: block; }
#spec-bar small { display: block; font: 700 11px 'Chakra Petch', sans-serif; letter-spacing: 0.3em; color: #ff8a3d; }
#spec-bar b { display: block; font: 700 22px 'Chakra Petch', sans-serif; color: var(--text); margin: 2px 0; }
#spec-bar span { font-size: 12px; color: var(--muted); }

#spec-bar em { display: block; font-style: normal; font-size: 11px; color: var(--muted); opacity: 0.8; margin-top: 3px; }
body.spectating .pause-note { display: none; }
body.touch #spec-bar em { display: none; }

body.touch #spec-bar { bottom: 6px; padding: 4px 12px 5px; min-width: 0; }
body.touch #spec-bar b { font-size: 16px; }
body.touch #spec-bar span { font-size: 11px; }

/* ---------- how to play ---------- */
.menu-card.howto { width: min(940px, 100%); max-height: calc((100vh - 32px) / var(--ui)); padding: 22px 26px 18px; gap: 0; }
.ht-head h2 { margin: 0 0 4px; }
.ht-head p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.ht-head p b { color: var(--text); }
.ht-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.45) transparent; }
.ht-body::-webkit-scrollbar { width: 6px; }
.ht-body::-webkit-scrollbar-thumb { background: rgba(64,224,255,0.4); border-radius: 3px; }
.ht-body section { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.ht-body section:first-child { border-top: none; padding-top: 4px; }
.ht-body h3 { margin: 0 0 10px; font: 700 13px 'Chakra Petch', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
.ht-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.ht-keys > div { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: #d6def0; }
.ht-keys span { margin-left: 6px; }
.howto kbd { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); border-bottom-width: 2px; background: rgba(255,255,255,0.07); font: 600 12px 'Chakra Petch', sans-serif; color: #fff; text-align: center; line-height: 1.5; }
.ht-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ht-card { background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ht-card.hot { border-color: rgba(255,138,61,0.55); background: rgba(255,138,61,0.07); grid-column: span 2; }
.ht-card b { display: block; font: 700 14px 'Chakra Petch', sans-serif; margin-bottom: 4px; color: var(--text); }
.ht-card p { margin: 0; font-size: 13px; line-height: 1.45; color: #c3cce0; }
.ht-card ul { display: block; margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.5; color: #c3cce0; }
.ht-card ul b { display: inline; font: inherit; font-weight: 700; margin: 0; }
.ht-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ht-note b { color: var(--text); }
.ht-ok { margin-top: 12px; }
@media (max-width: 640px) { .ht-card.hot { grid-column: auto; } .menu-card.howto { padding: 16px 14px 12px; } .ht-keys { grid-template-columns: 1fr 1fr; } }
/* how to play: wider, larger text */
.menu-card.howto { width: min(1120px, 100%); }
.ht-head h2 { font-size: 28px; }
.ht-head p { font-size: 15.5px; }
.ht-body h3 { font-size: 14px; }
.ht-keys { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.ht-keys > div { font-size: 15px; }
.howto kbd { font-size: 13.5px; padding: 3px 8px; }
.ht-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ht-card { padding: 12px 14px; }
.ht-card.hot { grid-column: auto; }
.ht-card b { font-size: 16px; }
.ht-card p, .ht-card ul { font-size: 14.5px; line-height: 1.5; }
.ht-note { font-size: 14.5px; }
@media (max-width: 640px) {
  .ht-keys { grid-template-columns: 1fr 1fr; }
  .ht-keys > div { font-size: 14px; }
  .ht-cards { grid-template-columns: 1fr; }
  .ht-head h2 { font-size: 22px; }
  .ht-head p { font-size: 14px; }
}
@media (max-height: 500px) { .menu-card.howto { max-height: calc((100vh - 12px) / var(--ui)); padding-top: 12px; } .ht-head p { margin-bottom: 6px; } }
/* how to play: touch controls on phones, keyboard on PC */
.ht-touch { display: none; }
body.touch .ht-touch { display: grid; }
body.touch p.ht-touch { display: block; }
body.touch .ht-keys.kb, body.touch .ht-note.kb { display: none; }
@media (max-width: 640px) { .ht-keys { grid-template-columns: 1fr; gap: 8px; } }
@media (max-height: 500px) {
  .ht-head h2 { font-size: 18px; margin-bottom: 2px; }
  .ht-head p { font-size: 12.5px; }
  .ht-ok { margin-top: 6px; padding: 7px; font-size: 15px; }
  .ht-body section { padding: 8px 0 10px; }
  .ht-keys > div { font-size: 13.5px; }
}
@media (max-height: 500px) { .btn.primary.ht-ok { margin-top: 6px; padding: 6px; font-size: 15px; } }
#boot-retry { margin: 0 12px 0 auto; padding: 5px 14px; font-size: 13px; width: auto; border-color: #ff8a3d; color: #ffb35c; }
.boot-top { gap: 8px; }

/* ---------- pause: why + click anywhere ---------- */
#pause { cursor: pointer; }
#pause .menu-card { cursor: default; }
.pause-why { margin: -4px 0 4px; text-align: center; font-size: 14px; color: var(--muted); }
.pause-why.alert { color: #ffb35c; font-weight: 600; }
.btn.primary.pulse { animation: resumepulse 0.9s ease-in-out infinite; }
@keyframes resumepulse { 0%, 100% { box-shadow: 0 8px 30px rgba(64,224,255,0.35); } 50% { box-shadow: 0 8px 44px rgba(255,170,90,0.85); } }
body.touch .pause-why { display: none; }

/* ---------- phones: keep every menu inside the safe area (iPhone notch / rounded corners), scroll if needed ---------- */
.screen, .modal {
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  justify-content: safe center;
}
#pause .menu-card { max-height: 100%; overflow-y: auto; }
@media (max-height: 500px) {
  .menu-card { padding: 14px 18px; gap: 6px; }
  .menu-card h2 { font-size: 18px; margin: 0 0 2px; }
  .menu-card .btn { padding: 8px 10px; font-size: 13px; }
  .menu-card .btn.primary { padding: 10px; font-size: 16px; margin-top: 2px; }
  .menu-card .btn.off-btn { padding: 10px; font-size: 16px; margin-top: 6px; }
  .pause-note, .note { margin-top: 2px; }
  .menu-wrap { max-height: none; }
  .logo { font-size: 34px; }
}
.ios-tip { margin: 6px 0 0; font-size: 12px; color: #ffb35c; text-align: center; }

/* the railgun's scope */
/* the railgun scope: the whole view, zoomed - no mask, just a slim reticle whose centre stays open (the target is never covered) */
#scope-ov { position: fixed; inset: 0; display: none; pointer-events: none; }
#scope-ov i { position: absolute; background: #ff3df0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 61, 240, 0.55); }
#scope-ov .t, #scope-ov .b { left: 50%; width: 2px; margin-left: -1px; height: 8vmin; }
#scope-ov .t { top: calc(50% - 10vmin); }
#scope-ov .b { top: calc(50% + 2vmin); }
#scope-ov .l, #scope-ov .r { top: 50%; height: 2px; margin-top: -1px; width: 8vmin; }
#scope-ov .l { left: calc(50% - 10vmin); }
#scope-ov .r { left: calc(50% + 2vmin); }
#scope-ov b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 6px #ff3df0; }
#scope-ov em { position: absolute; left: calc(50% + 11vmin); top: calc(50% + 1.2vmin); font: 700 13px var(--font); font-style: normal; letter-spacing: 0.08em; color: #ffb3f6; text-shadow: 0 1px 2px #000; }
#scope-ov em::after { content: '3×'; }
body.zoom5 #scope-ov em::after { content: '5×'; }
body.scoped #scope-ov { display: block; }
#scope-ov i, #scope-ov b { display: none; }
/* railgun zoom: the player's own crosshair stays (the user's call); the scope only shows 3x / 5x */
#crosshair.w4 i { width: 3px; height: 3px; border-radius: 50%; background: #ff3df0; box-shadow: 0 0 6px #ff3df0; }
#crosshair.w4 i:nth-child(1) { left: -1.5px; top: -12px; } #crosshair.w4 i:nth-child(2) { left: -1.5px; top: 9px; }
#crosshair.w4 i:nth-child(3) { left: -12px; top: -1.5px; } #crosshair.w4 i:nth-child(4) { left: 9px; top: -1.5px; }
#crosshair.w5 i:nth-child(1) { width: 2px; height: 6px; left: -1px; top: -10px; }
#crosshair.w5 i:nth-child(2) { width: 2px; height: 6px; left: -1px; top: 4px; }
#crosshair.w5 i:nth-child(3) { width: 6px; height: 2px; left: -10px; top: -1px; }
#crosshair.w5 i:nth-child(4) { width: 6px; height: 2px; left: 4px; top: -1px; }

/* COMPETITIVE 5v5: score bar, money, plant/defuse bar, buy menu */
body.comp #timer, body.comp #score-line, body.comp #lead { display: none !important; }
#comp-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 14px; padding: 6px 16px; border-radius: 12px; background: rgba(10, 14, 24, 0.62); font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 3px #000; }
body.comp #comp-bar { display: flex; }
#comp-bar .ct { color: #6fb7ff; font-size: 18px; } #comp-bar .t { color: #ffb347; font-size: 18px; }
#comp-bar .ct b, #comp-bar .t b { font-size: 26px; margin: 0 4px; color: #fff; }
#comp-bar small { font-size: 11px; letter-spacing: 2px; opacity: 0.9; }
#comp-bar .mid { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
#comp-bar .clock { font-size: 26px; color: #fff; }
#comp-bar .rn { font-size: 10px; color: #cfd6e6; letter-spacing: 2px; }
#comp-bar.planted .clock { color: #ff5a4a; animation: comp-pulse 0.6s infinite alternate; }
@keyframes comp-pulse { to { transform: scale(1.18); } }
#comp-money { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); font-size: 17px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; text-shadow: 0 2px 3px #000; }
#comp-info { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 700; color: #ffd0c0; text-shadow: 0 2px 3px #000; }
#comp-act { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); display: none; text-align: center; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 3px #000; }
#comp-act.on { display: block; }
#comp-act i { display: block; width: 260px; height: 12px; margin-top: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5); }
#comp-act b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb347, #ff5a4a); }
#comp-buy { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(4, 8, 16, 0.55); z-index: 40; font-family: var(--font); }
#comp-buy.open { display: flex; }
#comp-buy h3 { color: #fff; letter-spacing: 4px; margin: 0 0 12px; font-size: 26px; cursor: pointer; }
#comp-buy h3 small { font-size: 12px; opacity: 0.7; letter-spacing: 1px; margin-left: 10px; }
#comp-buy .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; width: min(640px, 92vw); }
#comp-buy button { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-radius: 12px; border: 2px solid var(--c); background: rgba(16, 22, 36, 0.92); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
#comp-buy button:hover { background: rgba(40, 52, 80, 0.95); }
#comp-buy button kbd { background: rgba(255, 255, 255, 0.15); border-radius: 5px; padding: 1px 6px; font-size: 12px; }
#comp-buy button b { flex: 1; color: var(--c); }
#comp-buy button span { color: #9dffb0; }
#comp-buy button.poor { opacity: 0.45; } #comp-buy button.poor span { color: #ff8a80; }
#comp-buy button.owned { border-style: dashed; opacity: 0.7; } #comp-buy button.owned span { color: #ccc; }

/* the competitive menu: the button, the party lobby */
.btn.comp-btn { background: linear-gradient(90deg, #ffb347, #ff6a3d); color: #1a0d05; font-weight: 800; letter-spacing: 1px; }
.btn.comp-btn:disabled { opacity: 0.5; }
#party-box { margin: 10px 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 179, 71, 0.5); background: rgba(40, 24, 8, 0.45); }
#party-box.hidden { display: none; }
#party-box .party-head { color: #ffcf8a; font-weight: 800; letter-spacing: 1px; margin-bottom: 8px; }
#party-box .party-head small { color: #cfb08a; font-weight: 600; margin-left: 6px; }
#party-box .party-link { display: flex; gap: 6px; margin-bottom: 8px; }
#party-box .party-link input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.35); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; }
#party-list { list-style: none; margin: 0 0 8px; padding: 0; }
#party-list li { padding: 3px 0; color: #fff; }
#party-list li.ready::before { content: '✔ '; color: #7dff9a; } #party-list li:not(.ready)::before { content: '… '; color: #ccc; }
#party-ready.on { background: #7dff9a; }
#party-note { font-size: 12px; color: #d8c6a8; margin-top: 6px; }
/* the main menu card: never spill out of its panel (it scrolls instead), and tighten up on shorter screens */
.menu-wrap > .menu-card:first-child { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.45) transparent; }
@media (max-height: 860px) and (min-height: 501px) {
  .menu-wrap > .menu-card:first-child { padding: 20px 24px; gap: 7px; }
  .menu-wrap > .menu-card:first-child .logo { font-size: 44px; }
  .menu-wrap > .menu-card:first-child .tag { margin: 0; }
  .menu-wrap > .menu-card:first-child .btn { padding-top: 9px; padding-bottom: 9px; }
  .menu-wrap > .menu-card:first-child .row-btns .btn { padding-left: 4px; padding-right: 4px; }
  #party-make { font-size: 13px; }
}
/* in a party: the only thing to press is READY (PLAY / competitive solo are hidden until you leave the party) */
#menu.partying #play, #menu.partying #play-comp { display: none; }
#party-box .party-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
#party-leave { margin-left: auto; background: none; border: 1px solid rgba(255, 255, 255, 0.25); color: #d8c6a8; border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; }
#party-leave:hover { color: #fff; border-color: #fff; }
#party-ready { width: 100%; font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
/* mouse + keyboard without a captured mouse (Samsung DeX, some tablets): hide the cursor over the game */
body.softlock, body.softlock canvas#c { cursor: none; }
/* inside a smoke cloud: the screen goes grey (smoke.js sets the opacity and the shade) */
#smoke-ov { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 4; background: rgb(190, 190, 186); }
#flash-ov { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 30; background: #fff; }
/* competitive vote kick: the running vote (top left), and the pause menu's chooser */
body:not(.comp) #pause-votekick { display: none; }
#comp-vote { position: fixed; left: 14px; top: 132px; z-index: 40; display: none; flex-direction: column; gap: 5px; padding: 10px 12px; min-width: 210px; border-radius: 12px; background: rgba(12, 16, 26, 0.86); border: 1px solid rgba(255, 210, 77, 0.55); color: #fff; font: 600 13px var(--font); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
#comp-vote.on { display: flex; }
#comp-vote b { color: #ffd34d; letter-spacing: 0.04em; }
#comp-vote small { color: var(--muted); font-size: 11px; }
#comp-vote em { font-style: normal; color: #ff8a7a; }
#comp-vote span { display: flex; gap: 6px; }
#comp-vote button { flex: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.07); color: #fff; font: 700 12px var(--font); cursor: pointer; }
#comp-vote button.on { background: rgba(255, 211, 77, 0.3); border-color: #ffd34d; }
#comp-kick { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 90; width: min(360px, 92vw); display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: #fff; font: 600 13px var(--font); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
#comp-kick h3 { margin: 0; letter-spacing: 0.12em; }
#comp-kick p { margin: 0; color: var(--muted); font-size: 12px; }
#comp-kick button { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: #fff; font: 700 13px var(--font); cursor: pointer; text-align: left; }
#comp-kick button:hover { border-color: #ffd34d; }
#comp-kick button.x { text-align: center; color: var(--muted); }

/* ================= FRIENDS ================= */
.bc-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.bc-tabs button { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 8px 6px; font: 700 13px var(--font); letter-spacing: 0.08em; cursor: pointer; }
.bc-tabs button.on { background: rgba(64, 224, 255, 0.14); color: #fff; border-color: rgba(64, 224, 255, 0.55); }
#fr-count { color: #7dff9a; }
#fr-panel { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
#fr-panel h4 { margin: 12px 0 6px; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.fr-code { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fr-code b { color: #fff; font-family: var(--font); letter-spacing: 0.08em; font-size: 15px; }
.fr-add { display: flex; gap: 6px; margin-top: 8px; }
.fr-add input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 8px; color: #fff; padding: 7px 9px; font: inherit; font-size: 13px; }
.fr-list { list-style: none; margin: 0; padding: 0; }
.fr-list li { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
.fr-list li.on .fr-dot { background: #4dff88; box-shadow: 0 0 8px #4dff88; }
.fr-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.fr-n small { display: block; color: var(--muted); font-size: 11px; }
.fr-list li:not(.on) .fr-n { color: #aab; }
.fr-b { display: flex; gap: 4px; flex: none; }
.fr-btn { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: #dde; border-radius: 7px; padding: 4px 8px; font: 700 12px var(--font); cursor: pointer; }
.fr-btn:hover { border-color: #fff; color: #fff; }
.fr-btn.ok { background: rgba(77, 255, 136, 0.16); border-color: rgba(77, 255, 136, 0.5); color: #bfffd3; }
.fr-btn.x { color: #ff9a9a; }
.fr-empty { color: var(--muted); font-size: 13px; margin: 6px 0; }
.fr-req .fr-n { color: #ffe08a; }
/* notices (top right, under the kill feed) */
#fr-notes { position: fixed; right: 14px; top: 110px; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(320px, 80vw); pointer-events: none; }
.fr-note { pointer-events: auto; background: rgba(12, 18, 34, 0.94); border: 1px solid rgba(64, 224, 255, 0.45); border-radius: 12px; padding: 10px 12px; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: frIn 0.25s ease-out; }
.fr-note b { color: #7ee7ff; }
.fr-nb { display: flex; gap: 6px; margin-top: 8px; }
.fr-hint { display: none; color: var(--muted); font-size: 11px; margin-top: 4px; }
body.mlock .fr-hint { display: block; }
@keyframes frIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the scoreboard's player menu */
#scoreboard.sticky { pointer-events: auto; box-shadow: 0 0 0 2px rgba(64, 224, 255, 0.5); }
#scoreboard.sticky tr[data-id] { cursor: context-menu; }
#scoreboard.sticky tr[data-id]:hover td { background: rgba(64, 224, 255, 0.1); }
#board-body tr.friend td:nth-child(2)::after { content: ' 👥'; }
#fr-menu { position: fixed; z-index: 40; min-width: 220px; background: rgba(12, 18, 34, 0.97); border: 1px solid rgba(64, 224, 255, 0.55); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
#fr-menu.hidden { display: none; }
#fr-menu .fr-mh { color: var(--muted); font-size: 12px; padding: 4px 8px 6px; letter-spacing: 0.08em; }
#fr-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff; padding: 8px 10px; border-radius: 7px; font: 600 14px var(--font); cursor: pointer; }
#fr-menu button:hover:not([disabled]) { background: rgba(64, 224, 255, 0.15); }
#fr-menu button[disabled] { color: var(--muted); cursor: default; }
/* a message to a friend */
#fr-chat { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 41; display: flex; align-items: center; gap: 6px; width: min(520px, 92vw); background: rgba(12, 18, 34, 0.96); border: 1px solid rgba(64, 224, 255, 0.55); border-radius: 12px; padding: 8px; }
#fr-chat.hidden { display: none; }
#fr-chat .fr-chat-to { color: #7ee7ff; font-size: 12px; white-space: nowrap; }
#fr-chat input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 8px; color: #fff; padding: 8px; font: inherit; }
#fr-chat .btn { padding: 8px 12px; }
.fr-modal-card { width: min(460px, calc(94vw / var(--ui))); max-height: calc(90vh / var(--ui)); display: flex; flex-direction: column; }
.fr-modal-card #fr-panel { max-height: calc(60vh / var(--ui)); }
/* the scoreboard: humans first, then a divider, then the bots */
tr.bots-sep td { padding: 8px 0 4px !important; font-size: 11px; letter-spacing: 0.3em; color: var(--muted); text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.12); }
tr.bots-more td { border-top: none; padding: 6px 0 2px !important; letter-spacing: 0.12em; }
/* controllers: the highlighted button in menus; no touch buttons while a controller plays */
.pad-focus { outline: 3px solid #40e0ff !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(64, 224, 255, 0.25) !important; }
body.padplay #touch-layer { display: none !important; }
/* the main menu: where BIONEURAL runs (under the cards, centred) */
.platforms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 14px; width: min(818px, 100%); }
.platforms .pf-t { width: 100%; text-align: center; font: 700 11px var(--font); letter-spacing: 0.35em; color: var(--muted); }
.platforms .pf { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; color: #9fe9ff; cursor: default; transition: transform 0.15s, color 0.15s; }
.platforms .pf:hover { transform: translateY(-2px); color: #fff; }
.platforms svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(64, 224, 255, 0.45)); }
.platforms .pf b { font: 600 11px var(--font); letter-spacing: 0.06em; color: var(--muted); }
.platforms .pf:hover b { color: #fff; }
body.playing .platforms { display: none; }
@media (max-height: 760px) and (min-width: 861px) { .platforms { margin-top: 8px; } .platforms svg { width: 28px; height: 28px; } .platforms .pf-t { display: none; } }
/* phones and short screens: the whole menu scrolls as one page (no card scrolls inside itself, no card gets squashed);
   a phone held sideways (700-860 px wide) keeps the two cards side by side */
@media (max-width: 860px), (max-height: 600px) {
  .menu-wrap { max-height: none; overflow: visible; }
  .menu-wrap > .menu-card { flex-shrink: 0; }
  .menu-wrap > .menu-card:first-child { overflow: visible; }
}
@media (min-width: 700px) and (max-width: 860px) {
  .menu-wrap { flex-direction: row; align-items: flex-start; }
  .menu-wrap > .menu-card { width: min(410px, 49%); }
  .board-card { display: flex; flex-direction: column; }
}

/* phones: a smaller weapon row, so the round line in the middle stays clear */
body.touch .slot { font-size: 9px; padding: 3px 5px; letter-spacing: 0.02em; }
body.touch #weapons { gap: 3px; }
/* while buying, the touch buttons step aside (they only showed through the menu) */
body.buying #touch-layer { visibility: hidden; }
/* the credits line under the platform icons (main menu only) */
.credits { width: min(818px, 100%); margin: 10px auto 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.credits b { color: #d8e6ff; font-weight: 700; }
.credits a { color: #7ee7ff; text-decoration: none; border-bottom: 1px dashed rgba(126, 231, 255, 0.5); }
.credits a:hover { color: #fff; border-bottom-color: #fff; }
/* laptops ~700 px tall: menu, icons and credits all fit without scrolling */
@media (max-height: 760px) and (min-width: 861px) {
  .menu-wrap > .menu-card:first-child { gap: 5px; padding-top: 16px; padding-bottom: 16px; }
  .menu-wrap > .menu-card:first-child .logo { font-size: 40px; }
  .platforms { gap: 2px 12px; margin-top: 6px; }
  .platforms .pf b { font-size: 10px; }
  .credits { margin-top: 2px; font-size: 11.5px; line-height: 1.35; }
}

/* the main menu's sound button (the browser keeps a page quiet until its first click) */
#snd-btn { position: fixed; top: 14px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(8px); color: #fff; font: 700 13px var(--font); letter-spacing: 0.04em; cursor: pointer; }
#snd-btn .ic { font-size: 17px; }
#snd-btn:not(.on) { animation: sndPulse 1.8s ease-in-out infinite; }
#snd-btn.on { padding: 8px 11px; }
#snd-btn.on .tx { display: none; }
/* phones and short screens: the menu scrolls as one page - the music button gets a row of its own above the cards
   (fixed, it sat on the leaderboard's FRIENDS tab) and scrolls away with the page */
@media (max-width: 860px), (max-height: 600px) {
  #menu { padding-top: max(50px, calc(env(safe-area-inset-top) + 42px)); }
  #snd-btn { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 6px 12px; font-size: 12px; }
}
@keyframes sndPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(64, 224, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(64, 224, 255, 0.25); } }

/* the map vote at the end of a round */

.controls-strip.crowded { display: none; }
/* ---------- THE STAKES (js/director.js): the final minute (double points) and the bounty ---------- */
body.final-min #timer { color: #ffd34d; animation: finalBeat 1s ease-in-out infinite; }
@keyframes finalBeat { 50% { transform: scale(1.08); text-shadow: 0 0 18px rgba(255, 211, 77, 0.8), 0 2px 10px rgba(0,0,0,0.6); } }
#score-line b.x2 { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: #ffd34d; color: #1a1206; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 2px; }
#score-line em.bty { color: #ffd34d; font-weight: 700; }
#bounty-arrow { position: absolute; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; z-index: 6; filter: drop-shadow(0 0 6px rgba(255, 211, 77, 0.8)); }
#bounty-arrow i { font-style: normal; font-size: 24px; line-height: 1; }
#bounty-arrow b { font: 700 11px var(--font); color: #ffd34d; text-shadow: 0 1px 3px #000; }
#bounty-arrow s { position: absolute; left: 50%; top: 7px; width: 0; height: 0; text-decoration: none; border-left: 8px solid #ffd34d; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform-origin: 0 50%; }
/* ---------- PROGRESSION (js/progress.js): the XP pill, XP pops, medal toasts, the round's XP ---------- */
#xp-pill { position: absolute; right: 12px; top: 9px; display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 211, 77, 0.08); font: 700 11px var(--font); color: #ffd34d; letter-spacing: 0.08em; }
#xp-pill span { width: 58px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#xp-pill span i { display: block; height: 100%; background: linear-gradient(90deg, #ffb040, #ffd34d); transition: width 0.4s; }
#xp-pill small { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }
body.touch #xp-pill { display: none; }                      /* (phones: the toasts and the round's end show the XP) */
.xp-pop { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font: 800 15px var(--font); color: #ffd34d; text-shadow: 0 1px 4px #000; pointer-events: none; animation: xpPop 1.6s ease-out forwards; white-space: nowrap; }
.xp-pop small { font-size: 11px; color: #fff; opacity: 0.85; margin-left: 4px; font-weight: 600; }
@keyframes xpPop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
#medal-box { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.medal-toast { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 9px; border-radius: 12px; background: linear-gradient(100deg, rgba(40, 28, 6, 0.9), rgba(16, 20, 32, 0.9)); border: 1px solid rgba(255, 211, 77, 0.55); box-shadow: 0 0 22px rgba(255, 211, 77, 0.25); animation: medalIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); transition: opacity 0.45s, transform 0.45s; }
.medal-toast.out { opacity: 0; transform: translateY(-10px); }
.medal-toast i { font-style: normal; font-size: 26px; }
.medal-toast b { display: block; font: 800 14px var(--font); color: #ffd34d; letter-spacing: 0.06em; }
.medal-toast small { font: 600 11px var(--font); color: #e8dcc0; }
@keyframes medalIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
#round-xp { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 9px 12px; border-radius: 12px; background: rgba(92, 255, 138, 0.06); border: 1px solid rgba(92, 255, 138, 0.2); font: 700 13px var(--font); }
#round-xp b { order: 1; font: 700 17px var(--font); color: var(--green); white-space: nowrap; }
#round-xp s { order: 2; flex: 1; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; text-decoration: none; }
#round-xp s u { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green), #b6ff7a); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
#round-xp em { order: 3; font-style: normal; color: var(--text); white-space: nowrap; }
#round-xp span { order: 4; white-space: nowrap; }
#round-xp span i { font-style: normal; font-size: 18px; margin: 0 1px; }
/* the profile code (the Locker): the game key, to carry a profile to another device */
#lk-code-box { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
#lk-code-box .lkc-head b { display: block; font: 800 13px var(--font); letter-spacing: 0.06em; }
#lk-code-box .lkc-head small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
#lk-code-box .lkc-row { display: flex; gap: 6px; align-items: center; }
#lk-code-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); font: 600 12px ui-monospace, Consolas, monospace; letter-spacing: 0.04em; color: #cfe7ff; }
#lk-code-box input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: #fff; font: 600 12px ui-monospace, Consolas, monospace; }
#lk-code-box button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.08); color: #fff; font: 700 12px var(--font); cursor: pointer; white-space: nowrap; }
#lk-code-box button:hover { border-color: #40e0ff; }
#lk-msg:empty { display: none; }
/* ---------- RECOGNITION (js/recog.js): the MVP card and the awards ---------- */
#round-mvp:empty { display: none; }
#round-mvp { display: flex; gap: 10px; align-items: stretch; }
#round-mvp .mvp { flex: 1.2; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; background: linear-gradient(120deg, rgba(255, 225, 77, 0.16), rgba(255, 176, 64, 0.05)); border: 1px solid rgba(255, 225, 77, 0.38); min-width: 0; }
#round-mvp .mvp > i { font-style: normal; font-size: 26px; }
#round-mvp .mvp small { display: block; font: 700 10px var(--font); letter-spacing: 0.24em; color: var(--gold); }
#round-mvp .mvp b { font: 700 17px var(--font); }
#round-mvp .mvp em { font-style: normal; font: 700 11px var(--font); color: var(--gold); margin-left: 4px; }
#round-mvp .mvp span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
#round-mvp .awards { flex: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
#round-mvp .award { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; min-width: 0; }
#round-mvp .award i { font-style: normal; }
#round-mvp .award small { font: 700 9.5px var(--font); letter-spacing: 0.14em; color: var(--muted); }
#round-mvp .award b { font: 600 12.5px var(--font); }
#round-mvp .award span { color: var(--muted); font-size: 11px; margin-left: auto; }
.lvt { color: #ffd34d; font: 700 0.85em var(--font); margin-right: 4px; letter-spacing: 0.02em; }
/* ---------- the world's numbers (under the menu's leaderboard): one compact block of chips ---------- */
#world-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 5px; margin-top: 8px; padding: 7px 8px; border-radius: 11px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); font: 600 10.5px var(--font); color: var(--muted); }
#world-stats > b { width: 100%; text-align: center; font: 800 9px var(--font); letter-spacing: 0.3em; color: var(--muted); margin-bottom: 1px; }
#world-stats span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.2); white-space: nowrap; }
#world-stats i { font-style: normal; font-size: 12px; }
#world-stats em { font-style: normal; font-weight: 800; color: #fff; }
/* ---------- PROGRESSION: the menu's profile card and the locker ---------- */
#prof-card { display: flex; align-items: center; gap: 8px; width: 100%; margin: -2px 0 2px; padding: 7px 11px; border-radius: 11px; border: 1px solid rgba(255, 211, 77, 0.35); background: linear-gradient(100deg, rgba(255, 211, 77, 0.12), rgba(255, 211, 77, 0.02)); color: #fff; cursor: pointer; font: inherit; text-align: left; transition: background 0.15s, box-shadow 0.15s; }
#prof-card:hover, #prof-card:focus-visible { outline: none; background: linear-gradient(100deg, rgba(255, 211, 77, 0.2), rgba(255, 211, 77, 0.05)); box-shadow: 0 0 18px rgba(255, 211, 77, 0.2); }
#prof-card b { font: 800 14px var(--font); color: #ffd34d; letter-spacing: 0.06em; white-space: nowrap; }
#prof-card span { font: 700 11px var(--font); letter-spacing: 0.14em; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; }
#prof-card s { flex: 1; min-width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; text-decoration: none; }
#prof-card u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb040, #ffd34d); }
#prof-card em { font: 700 10px var(--font); font-style: normal; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.locker-card { width: min(640px, 100%) !important; max-height: 100%; overflow-y: auto; }
#locker-head { display: flex; flex-direction: column; gap: 6px; }
.lk-lv { display: flex; align-items: baseline; gap: 10px; }
.lk-lv b { font: 800 26px var(--font); color: #ffd34d; }
.lk-lv span { font: 700 13px var(--font); letter-spacing: 0.16em; color: #e8dcc0; text-transform: uppercase; }
.lk-xp s { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; text-decoration: none; }
.lk-xp u { display: block; height: 100%; background: linear-gradient(90deg, #ffb040, #ffd34d); }
.lk-xp small { font: 600 11px var(--font); color: var(--muted); }
.lk-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.lk-tabs button { flex: 1; min-width: 88px; padding: 7px 6px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); font: 700 11px var(--font); letter-spacing: 0.06em; cursor: pointer; }
.lk-tabs button.on { color: #061018; background: linear-gradient(100deg, #ffd34d, #ffb040); border-color: transparent; }
#shop .lk-tabs button { flex: 1 1 auto; white-space: nowrap; }      /* (SKINS' seven tabs: one line, each as wide as its name) */
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 7px; max-height: min(calc(46vh / var(--ui)), 380px); overflow-y: auto; padding: 2px; }
.lk-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 7px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: #fff; font: inherit; text-align: center; cursor: pointer; }
button.lk-item:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); }
.lk-item.eq { border-color: #ffd34d; box-shadow: 0 0 14px rgba(255, 211, 77, 0.3); }
.lk-item.locked { opacity: 0.45; cursor: default; }
.lk-item i { font-style: normal; font-size: 22px; }
.lk-item i.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); }
.lk-item img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.2); }
/* THE SHOP: the wallet line, the packs of credits, what is still to come */
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 4px; }
.sh-top p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.sh-top p b { color: #7df3c0; }
.sh-wallet { display: flex; align-items: center; gap: 10px; flex: none; }
#shop-bal { font: 700 12px var(--font); letter-spacing: 0.08em; color: #ffd34d; text-transform: uppercase; }
#shop-bal b { font-size: 19px; margin-right: 3px; }
.sh-wallet .btn { padding: 8px 12px; font-size: 12px; }
.sh-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.sh-pack { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 20px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); }
.sh-pack:hover { border-color: #ffd34d; background: rgba(255, 211, 77, 0.08); }
.sh-pack b { font: 800 32px var(--font); color: #ffd34d; line-height: 1; }
.sh-pack span { font: 700 11px var(--font); letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.sh-pack em { margin-top: 8px; font: 800 17px var(--font); font-style: normal; color: #fff; }
.sh-soon { height: min(calc(54vh / var(--ui)), 300px); display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; font-size: 14px; }
.sh-soon b { font: 800 20px var(--font); letter-spacing: 0.06em; color: #fff; }
.lk-cap .btn.primary { margin-top: 0; font-size: 15px; }
@media (max-height: 520px) { .shop-card .sh-top p { display: none; } }
/* GUN SKINS: a wide stage of its own (the gun side-on, the skin's colour glowing behind it), the skins in a row under it */
.gs-stage { --c: #40e0ff; --g1: rgba(64, 224, 255, 0.34); --g2: rgba(64, 224, 255, 0.14); position: relative; height: clamp(200px, calc(46vh / var(--ui)), 360px);
  border-radius: 14px; border: 1px solid var(--line); overflow: hidden; transition: background 0.3s;
  background: radial-gradient(ellipse 46% 52% at 50% 40%, var(--g1), transparent 72%), radial-gradient(ellipse 70% 30% at 50% 102%, var(--g2), transparent 70%),
    linear-gradient(180deg, #182131 0%, #0d121c 62%, #080b12 100%); }
.gs-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000, transparent 75%); }
.gs-stage .lk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-stage.loading .lk-wait { display: flex; }
.gs-guns { position: absolute; top: 10px; left: 10px; right: 120px; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.gs-guns button { appearance: none; cursor: pointer; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(6, 10, 18, 0.55); color: #aab4c4; font: 700 10.5px var(--font); letter-spacing: 0.1em; text-transform: uppercase; }
.gs-guns button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.gs-guns button.on { color: #061018; background: var(--c); border-color: transparent; }
.gs-guns .s { display: none; }
.gs-hint { position: absolute; top: 16px; right: 14px; z-index: 1; font: 700 9.5px var(--font); letter-spacing: 0.18em; color: rgba(200, 210, 225, 0.45); text-transform: uppercase; pointer-events: none; }
.gs-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(5, 8, 14, 0.88) 62%); pointer-events: none; }
.gs-name { min-width: 0; }
.gs-name b { display: block; font: 800 27px var(--font); letter-spacing: 0.07em; line-height: 1.05; color: #fff; text-transform: uppercase; text-shadow: 0 0 22px var(--g1); }
.gs-name small { display: block; margin-top: 4px; font-size: 13px; color: #c5ceda; }
.gs-name i { display: inline-block; margin-top: 7px; font: 700 10px var(--font); font-style: normal; letter-spacing: 0.17em; color: var(--c); text-transform: uppercase; }
.gs-buy { display: flex; align-items: center; gap: 14px; flex: none; pointer-events: auto; }
.gs-price { display: grid; justify-items: end; line-height: 1.1; }
.gs-price b { font: 800 26px var(--font); color: #ffd34d; }
.gs-price span { font: 700 10px var(--font); letter-spacing: 0.16em; color: #ffd34d; text-transform: uppercase; }
.gs-price small { margin-top: 2px; font-size: 11px; color: var(--muted); }
.gs-price.own b { font-size: 15px; letter-spacing: 0.14em; color: #7df3c0; text-transform: uppercase; }
.gs-buy .btn.primary { margin: 0; padding: 12px 26px; font-size: 16px; }
.gs-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 8px; margin-top: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.gs-card { --c: #40e0ff; appearance: none; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 8px 12px; border-radius: 11px;
  border: 1px solid var(--line); overflow: hidden; color: var(--text); background: radial-gradient(ellipse 80% 60% at 50% 35%, var(--g2), transparent 75%), rgba(255, 255, 255, 0.035); }
.gs-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); opacity: 0.75; }
.gs-card img { flex: none; width: 100%; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
.gs-card b { font: 700 12.5px var(--font); letter-spacing: 0.03em; white-space: nowrap; }
.gs-card small { font: 700 10px var(--font); letter-spacing: 0.1em; color: #ffd34d; text-transform: uppercase; }
.gs-card.own small { color: #7df3c0; }
.gs-card:hover { border-color: rgba(255, 255, 255, 0.28); }
.gs-card.pick { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 18px var(--g1); }
.gs-card.pick::after { opacity: 1; }
/* HATS: the same stage and row as the gun skins - you close up on it, each card the hat itself */
.hs-card img { height: 64px; }
img.hs-thumb { width: 64px !important; height: 56px !important; }
@media (max-height: 520px) { .hs-card img { height: 40px; } }
img.gs-thumb { width: 96px !important; height: 48px !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
@media (max-width: 760px) { .gs-guns .l { display: none; } .gs-guns .s { display: inline; } }
@media (max-width: 620px) { .gs-hint { display: none; } .gs-guns { right: 10px; } .gs-name b { font-size: 21px; } .gs-name small { display: none; } .gs-buy { gap: 10px; } .gs-price b { font-size: 21px; } }
/* (a phone on its side: the skins in two columns beside the stage, everything in one screen) */
@media (max-height: 520px) {
  .gs { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 8px; align-items: start; }
  .gs-stage, .gs-row { height: max(150px, calc(100vh / var(--ui) - 202px)); }
  .gs-row { grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: max-content; grid-template-columns: 1fr 1fr; align-content: start; margin-top: 0; overflow-x: hidden; overflow-y: auto; }
  .gs-card { padding: 6px 6px 10px; } .gs-card img { height: 38px; } .gs-card b { font-size: 11.5px; }
  .gs-guns .l { display: none; } .gs-guns .s { display: inline; } .gs-guns button { padding: 4px 8px; font-size: 9.5px; } .gs-hint { display: none; }
  .gs-cap { padding: 26px 10px 8px; } .gs-name b { font-size: 19px; } .gs-name small { display: none; }
  .gs-price b { font-size: 19px; } .gs-price small { display: none; } .gs-buy { gap: 9px; } .gs-buy .btn.primary { padding: 9px 16px; font-size: 14px; }
}
/* THE CHARACTERS: the 3D stage (js/showcase.js) beside the list */
.locker-card.lk-wide { width: min(900px, 100%) !important; }
.lk-show { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.lk-stage { position: relative; height: min(calc(54vh / var(--ui)), 440px); min-height: 190px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(ellipse at 50% 108%, rgba(64, 224, 255, 0.22), transparent 55%), linear-gradient(180deg, #1b2434, #0b0f18); }
.lk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.lk-canvas:active { cursor: grabbing; }
.lk-wait { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font: 700 12px var(--font); letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; pointer-events: none; }
.lk-stage.loading .lk-wait { display: flex; }
.lk-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(6, 10, 18, 0.9)); pointer-events: none; }
.lk-cap b { display: block; font: 800 20px var(--font); letter-spacing: 0.04em; color: #fff; }
.lk-cap small { font: 600 10px var(--font); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.lk-cap .btn { pointer-events: auto; flex: none; padding: 9px 20px; }
.lk-show .lk-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: min(calc(54vh / var(--ui)), 440px); align-content: start; }
.lk-item.pick { border-color: #40e0ff; box-shadow: 0 0 14px rgba(64, 224, 255, 0.35); }
@media (max-width: 620px) { .lk-show { grid-template-columns: 1fr; } .lk-stage { height: 46vh; } }
/* (a phone on its side: the stage gets the window - the level bar and the title make room) */
@media (max-height: 520px) {
  .locker-card.lk-wide > h2, .locker-card.lk-wide #locker-head { display: none; }
  .lk-stage { height: min(calc(74vh / var(--ui)), 440px); }
  .lk-show .lk-grid { max-height: min(calc(74vh / var(--ui)), 440px); }
}
.lk-item b { font: 700 12.5px var(--font); letter-spacing: 0.03em; }
.lk-item small { font: 600 10px var(--font); color: var(--muted); line-height: 1.3; }
.lk-item.eq small { color: #ffd34d; }
.lk-item em { font: 800 11px var(--font); font-style: normal; color: #ffd34d; }
/* the menu's leaderboards FILL their card, whatever the screen: as many pilots on show as fit, the rest a scroll away
   (flex-basis 0: the list never makes the card taller - the card is as tall as the menu card beside it) */
#top-panel, #cmp-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
#top-panel .lb-scroll, #cmp-panel .lb-scroll { flex: 1 1 0; min-height: 90px; max-height: none !important; }
@media (max-width: 860px) {   /* (phones / narrow: the cards stack, nothing to fill - a fixed box) */
  #top-panel, #cmp-panel { flex: none; }
  #top-panel .lb-scroll, #cmp-panel .lb-scroll { flex: none; height: 340px; }
}
/* desktops up to ~860 px tall: the first card a little tighter (the profile card made it taller) */
@media (max-height: 860px) and (min-width: 861px) {
  .menu-wrap > .menu-card:first-child { gap: 6px; padding-top: 18px; padding-bottom: 18px; }
  .menu-wrap > .menu-card:first-child .logo { font-size: 48px; }
  .menu-wrap > .menu-card:first-child .tag { margin-bottom: 2px; }
}

/* ---------- settings: a wide panel, two columns of sections (one column on phones); the title and Done always in view ---------- */
#settings .menu-card.settings-card { width: min(900px, 100%); max-height: calc((100vh - 32px) / var(--ui)); max-height: calc((100dvh - 32px) / var(--ui)); padding: 20px 24px 16px; gap: 0; overflow: hidden; }
.st-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.st-head h2 { margin: 0; font-size: 26px; }
.st-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--muted); font-size: 16px; cursor: pointer; }
.st-x:hover { color: var(--text); border-color: rgba(64,224,255,0.6); }
.st-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.45) transparent; }
.st-body::-webkit-scrollbar { width: 6px; }
.st-body::-webkit-scrollbar-thumb { background: rgba(64,224,255,0.4); border-radius: 3px; }
.st-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-sec { background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-sec h3 { margin: 0; font: 700 12.5px var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
.st-sec .set { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; }   /* (the label and its value on one line, the control below) */
.st-sec .set output { float: none; justify-self: end; }
.st-sec .set input, .st-sec .set select { grid-column: 1 / -1; }
.st-sec .set select { width: 100%; }
.st-h3row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-mini { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--muted); font: 600 12px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.st-mini:hover { color: var(--text); border-color: rgba(64,224,255,0.6); }
.st-mini.done { color: #0b1020; background: var(--green); border-color: var(--green); }
.st-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.st-hint b { color: var(--text); font-weight: 600; }
.st-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; width: fit-content; }
.st-check input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--cyan); flex-shrink: 0; }
.st-foot { display: flex; justify-content: flex-end; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--line); }
.st-foot .btn { width: 180px; margin: 0; }
/* the exact sensitivity: four numbers in a 2 x 2 grid */
.sens-exact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; color: var(--muted); }
.sens-exact label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.sens-exact input { width: 84px; padding: 5px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.35); color: var(--text); font: 13px Inter, sans-serif; }
.sens-exact input:focus { outline: none; border-color: var(--cyan); }
/* the crosshair: a big preview beside the style, then the sliders */
.xh-top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.xh-box { position: relative; display: inline-block; width: 64px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, #5a6a78, #2a3440 60%, #8a9aa8); vertical-align: middle; }
.xh-top .xh-box { width: 96px; height: 64px; display: block; }
.xh-box svg { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.xh-box .xh-def { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-style: normal; opacity: 0.8; color: #fff; }
.xh-opts { display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.xh-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.xh-col { gap: 10px; }
.xh-opts input[type=color] { width: 46px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; background: none; cursor: pointer; }
.xh-opts.off { opacity: 0.35; pointer-events: none; }
@media (max-width: 760px) {
  .st-body { grid-template-columns: 1fr; }
  #settings .menu-card.settings-card { padding: 16px 14px 12px; }
  .st-foot .btn { width: 100%; }
}
@media (max-width: 440px) { .sens-exact { gap: 8px 10px; font-size: 12px; } .sens-exact label { white-space: nowrap; } .sens-exact input { width: 64px; } }
@media (max-height: 820px) {
  .st-head { margin-bottom: 8px; } .st-sec { padding: 10px 13px 12px; gap: 8px; } .st-body, .st-col { gap: 10px; }
  .st-foot { padding-top: 10px; margin-top: 8px; } .st-foot .btn { padding: 10px; font-size: 16px; }
}
@media (max-height: 560px) {
  .st-head { margin-bottom: 8px; } .st-head h2 { font-size: 20px; }
  .st-sec { padding: 9px 12px 11px; gap: 7px; }
  .st-foot { padding-top: 8px; margin-top: 8px; }
}
#crosshair.custom svg { pointer-events: none; }
/* LEFT-HANDED on phones / tablets: the thumb controls mirror (the move stick on the right, FIRE / JUMP / DASH... on the
   left); the menu button and the scoreboard button stay where they are, and the text that sat under the moved buttons
   (the kill feed and notes step aside, the spawn-shield label moves to the other side) */
body.lefty #touch-layer { transform: scaleX(-1); }
body.lefty #touch-layer .tbtn { transform: scaleX(-1); }
body.lefty #touch-layer .tmenu { right: auto; left: calc(14px + env(safe-area-inset-right)); }              /* (mirrored: shows top right) */
body.lefty #touch-layer .tboard { right: auto; left: calc(14px + env(safe-area-inset-right)); }                                       /* (mirrored with the menu button: shows top right) */
body.touch.lefty #killfeed { right: calc(76px + env(safe-area-inset-right)); }   /* (beside the chat / voice buttons, now on the right edge) */
body.touch #prot-msg { left: calc(18px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom)); }   /* (phones: the bottom corner - clear of the chat / voice buttons and the chat lines) */
body.touch.lefty #prot-msg { left: auto; right: calc(18px + env(safe-area-inset-right)); }
body.lefty #test-badge { left: auto; right: 8px; }

/* ---------- HOW TO PLAY: a manual with tabs (left on a PC, a scrolling bar on phones), a map gallery with a page per map ---------- */
.menu-card.howto.hx { width: min(1180px, 100%); max-height: calc((100vh - 32px) / var(--ui)); max-height: calc((100dvh - 32px) / var(--ui)); padding: 20px 24px 18px; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
.hx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hx-head h2 { margin: 0 0 4px; font-size: 28px; }
.hx-head p { margin: 0; color: var(--muted); font-size: 15px; }
.hx-head p b { color: var(--text); }
.hx-main { display: grid; grid-template-columns: 210px 1fr; gap: 18px; min-height: 0; flex: 1; }
.hx-nav { display: flex; flex-direction: column; gap: 6px; }
.hx-nav button { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 11px; border: 1px solid transparent; background: rgba(255,255,255,0.03); color: var(--muted); font: 700 14.5px var(--font); letter-spacing: 0.04em; text-align: left; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.hx-nav button i { font-style: normal; font-size: 18px; width: 24px; text-align: center; }
.hx-nav button:hover { background: rgba(64,224,255,0.08); color: var(--text); }
.hx-nav button.on { background: linear-gradient(90deg, rgba(64,224,255,0.22), rgba(64,224,255,0.06)); border-color: rgba(64,224,255,0.5); color: #fff; box-shadow: inset 3px 0 0 var(--cyan); }
.hx-nav .hx-ok { margin-top: auto; justify-content: center; text-align: center; box-shadow: none; }
.hx-body { overflow-y: auto; min-height: 0; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.45) transparent; }
.hx-body::-webkit-scrollbar { width: 6px; }
.hx-body::-webkit-scrollbar-thumb { background: rgba(64,224,255,0.4); border-radius: 3px; }
.hx-pane { display: none; }
.hx-pane.on { display: block; animation: hxin .22s ease-out; }
@keyframes hxin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hx-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.hx-note b { color: var(--text); }
.hx-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #c9d3e8; }
.hx-lead b { color: var(--text); }
/* basics: the numbers, then cards */
.hx-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.hx-stat { background: linear-gradient(160deg, rgba(64,224,255,0.14), rgba(64,224,255,0.03)); border: 1px solid rgba(64,224,255,0.3); border-radius: 12px; padding: 12px 14px; }
.hx-stat b { display: block; font: 800 30px var(--font); color: #fff; line-height: 1.1; }
.hx-stat span { font-size: 12.5px; color: var(--muted); }
.hx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hx-grid.two { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.hx-card { background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.hx-card.hot { border-color: rgba(255,138,61,0.5); background: rgba(255,138,61,0.06); }
.hx-card > i { font-style: normal; font-size: 22px; display: block; margin-bottom: 4px; }
.hx-card > b { display: inline-block; font: 700 16px var(--font); color: var(--text); margin-bottom: 4px; }
.hx-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #c3cce0; }
.hx-card ul { margin: 4px 0 0; padding-left: 17px; font-size: 13.5px; line-height: 1.55; color: #c3cce0; }
.hx-card ul b, .hx-card p b { color: var(--text); }
.hx kbd { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); border-bottom-width: 2px; background: rgba(255,255,255,0.07); font: 600 12.5px var(--font); color: #fff; text-align: center; line-height: 1.5; }
/* controls: the device switch, then the keys */
.hx-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.hx-seg button { padding: 8px 14px; border: none; border-radius: 9px; background: none; color: var(--muted); font: 700 13.5px var(--font); cursor: pointer; }
.hx-seg button.on { background: var(--cyan); color: #06121c; }
.hx-dev { display: none; }
.hx-dev.on { display: block; }
.hx-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 7px 14px; }
.hx-keys > div { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.03); font-size: 14.5px; color: #d6def0; }
.hx-keys .k { display: inline-flex; gap: 3px; min-width: 104px; flex-shrink: 0; }
.hx-keys.mini { grid-template-columns: 1fr 1fr; margin-top: 10px; }
.hx-keys.mini > div { font-size: 13px; padding: 5px 8px; }
.hx-keys.mini .k { min-width: 70px; }
/* weapons */
.hx-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.hx-w { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--wc) 14%, transparent), rgba(255,255,255,0.02) 60%); border: 1px solid color-mix(in srgb, var(--wc) 45%, transparent); border-radius: 12px; padding: 12px 14px 12px 18px; overflow: hidden; }
.hx-w::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--wc); box-shadow: 0 0 12px var(--wc); }
.hx-w .wn { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.hx-w .wn b { font: 700 17px var(--font); color: #fff; }
.hx-w .wn kbd { border-color: var(--wc); color: var(--wc); }
.hx-w p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #c3cce0; }
.hx-w p b { color: var(--text); }
.hx-w .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hx-w .chips span { font: 600 11.5px var(--font); letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,0.35); border: 1px solid color-mix(in srgb, var(--wc) 40%, transparent); color: #e6ecf8; }
/* maps: the gallery */
.hx-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hx-map { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); padding: 0; cursor: pointer; background: #0d1426; text-align: left; color: #fff; transition: transform .18s, border-color .18s, box-shadow .18s; }
.hx-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hx-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,18,0) 35%, rgba(4,8,18,0.92) 100%); }
.hx-map b, .hx-map small { position: absolute; left: 12px; right: 12px; z-index: 1; }
.hx-map b { bottom: 26px; font: 800 18px var(--font); letter-spacing: 0.06em; text-shadow: 0 2px 6px #000; }
.hx-map small { bottom: 9px; font-size: 12px; color: #c9d4ea; text-shadow: 0 1px 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-map b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-map:hover, .hx-map:focus-visible { transform: translateY(-3px); border-color: rgba(64,224,255,0.75); box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(64,224,255,0.35); outline: none; }
.hx-map:hover img { transform: scale(1.06); }
.hx-map .tag { position: absolute; top: 9px; left: 9px; z-index: 1; font: 800 11px var(--font); letter-spacing: 0.12em; padding: 3px 8px; border-radius: 6px; background: rgba(4,8,18,0.75); border: 1px solid rgba(255,255,255,0.3); }
.hx-map .tag.new { background: #ff8a3d; color: #140800; border-color: #ffb07a; }
.hx-map .tag.comp { background: #3f82ea; border-color: #8fb8ff; }
/* maps: a map's own page */
.hx-back { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 9px; padding: 7px 12px; font: 700 13px var(--font); cursor: pointer; margin-bottom: 10px; }
.hx-back:hover { color: #fff; border-color: rgba(64,224,255,0.6); }
.hx-mv-hero { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 6; border: 1px solid var(--line); }
.hx-mv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-mv-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,18,0) 40%, rgba(4,8,18,0.9)); }
.hx-mv-title { position: absolute; left: 18px; bottom: 14px; z-index: 1; }
.hx-mv-title b { display: block; font: 800 34px var(--font); letter-spacing: 0.06em; color: #fff; text-shadow: 0 2px 10px #000; }
.hx-mv-title span { font-size: 14px; color: #d4ddf0; text-shadow: 0 1px 4px #000; }
.hx-mv-body .lead { margin: 14px 0 12px; font-size: 15.5px; line-height: 1.55; color: #d0d9ec; }
.hx-mv-body .lead b { color: #fff; }
.hx-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hx-feat > div { background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.hx-feat i { font-style: normal; font-size: 20px; margin-right: 6px; }
.hx-feat b { font: 700 15px var(--font); color: #fff; }
.hx-feat p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: #c3cce0; }
.hx-credit { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.hx-credit a, .hx-credit a:visited { color: #9fd8ff; }
/* phones and small windows: the tabs become a bar across the top */
@media (max-width: 820px) {
  .menu-card.howto.hx { padding: 14px 12px 12px; }
  .hx-head h2 { font-size: 22px; } .hx-head p { font-size: 13.5px; }
  .hx-main { grid-template-columns: 1fr; gap: 10px; }
  .hx-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .hx-nav::-webkit-scrollbar { display: none; }
  .hx-nav button { flex-shrink: 0; padding: 8px 12px; font-size: 13px; }
  .hx-nav button.on { box-shadow: inset 0 -3px 0 var(--cyan); }
  .hx-nav .hx-ok { display: none; }
  .hx-hero { grid-template-columns: 1fr 1fr; }
  .hx-grid.two, .hx-weapons { grid-template-columns: 1fr; }
  .hx-maps { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .hx-map b { font-size: 15px; bottom: 22px; } .hx-map small { font-size: 11px; }
  .hx-mv-hero { aspect-ratio: 16 / 8; } .hx-mv-title b { font-size: 24px; }
  .hx-keys.mini { grid-template-columns: 1fr; }
}
@media (max-height: 520px) { .hx-head { margin-bottom: 8px; } .hx-head p { display: none; } }

/* ---------- PLAY OFFLINE: the setup (map + bot difficulty), the map choice after every round ---------- */
/* PLAY OFFLINE: a real button beside PLAY ONLINE - the same size, the offline green */
.btn.off-btn { margin-top: 8px; font-size: 20px; padding: 14px; border: none; color: #04140a; background: linear-gradient(100deg, #7dff9a, #c4ff5c); box-shadow: 0 8px 30px rgba(125,255,154,0.28); }
.btn.off-btn:hover:not(:disabled) { background: linear-gradient(100deg, #8dffa8, #d0ff72); box-shadow: 0 10px 40px rgba(125,255,154,0.5); }
.btn.off-btn:disabled { opacity: 0.5; cursor: wait; }
#offline .menu-card.off-card { width: min(880px, 100%); max-height: calc((100vh - 32px) / var(--ui)); max-height: calc((100dvh - 32px) / var(--ui)); padding: 20px 24px 16px; gap: 0; overflow-y: auto; }
.off-sub { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.off-h { font: 700 12.5px var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); margin: 4px 0 8px; }
.off-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.off-maps .hx-map b { bottom: 8px; font-size: 14px; }
.off-maps .hx-map.on { border-color: #7dff9a; box-shadow: 0 0 0 2px #7dff9a, 0 8px 22px rgba(0,0,0,0.4); }
.off-maps .hx-map.on::before { content: '✔'; position: absolute; top: 7px; right: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #7dff9a; color: #06121c; font: 800 13px/22px var(--font); text-align: center; }
.off-rand { display: grid; place-items: center; background: linear-gradient(135deg, #1b2440, #0d1426); }
.off-rand i { font-style: normal; font-size: 30px; position: relative; z-index: 1; margin-bottom: 14px; }
.off-diff { margin-bottom: 6px; }
.off-note { margin: 0 0 4px; font-size: 13px; color: var(--muted); min-height: 18px; }
body.practice #switch-mode { display: none; }

/* NAME BEAUTIFIED (main.js glowUpCard): a friendly glowing card, over everything but the modals, never in the way */
#glowup { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 26; pointer-events: none; zoom: var(--ui);
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, calc((100vw - 32px) / var(--ui))); padding: 18px 26px 16px;
  text-align: center; border-radius: 18px; color: #fff; font-family: var(--font);
  background: linear-gradient(135deg, rgba(255, 110, 199, 0.92), rgba(140, 110, 255, 0.92) 55%, rgba(64, 224, 255, 0.92));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 10px 50px rgba(255, 110, 199, 0.55), 0 0 90px rgba(140, 110, 255, 0.45);
  animation: glowIn 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both, glowPulse 2.2s ease-in-out 0.7s infinite; transition: opacity 0.9s, transform 0.9s; }
#glowup b { font-size: 26px; letter-spacing: 0.12em; text-shadow: 0 2px 12px rgba(80, 0, 90, 0.5); }
#glowup span { font: 600 16px/1.45 Inter, system-ui, sans-serif; }
#glowup em { font-style: normal; font-weight: 800; padding: 1px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.22); }
#glowup small { font: 500 12.5px Inter, system-ui, sans-serif; opacity: 0.85; }
#glowup.out { opacity: 0; transform: translateX(-50%) translateY(-14px); }
#glowup.high { top: 1%; }
@keyframes glowIn { from { opacity: 0; transform: translateX(-50%) scale(0.6) rotate(-3deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 10px 50px rgba(255, 110, 199, 0.55), 0 0 90px rgba(140, 110, 255, 0.45); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 10px 70px rgba(255, 110, 199, 0.8), 0 0 130px rgba(64, 224, 255, 0.55); } }

/* ---------- THE BREAK BETWEEN ROUNDS (hud.js roundEnd): the result, the board, the chat, the map vote ----------
   One screen, three places: the result on the left, the chat on the right, the vote below (the map vote online: three
   maps, the rotation's next marked; offline: every map, a click starts it). Big screens: as big as the menu (--ui);
   too low a screen: scaled down to fit (--ix-k); phones: one column that scrolls, the vote first. */
#round-end { position: absolute; inset: 0; display: none; justify-content: center; align-items: flex-start; padding: 0 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(5, 8, 18, 0.38), rgba(5, 8, 18, 0.84)); }
#round-end.on { display: flex; pointer-events: auto; }            /* (#hud lets clicks through to the game: the break takes them - the vote, the chat) */
.ix-shell { width: min(1180px, 100%); display: grid; gap: 14px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "head head" "res chat" "vote vote"; zoom: var(--ui, 1);
  margin-top: var(--ix-top, 24px); transform: scale(var(--ix-k, 1)); transform-origin: 50% 0; }
.ix-shell.nochat { grid-template-areas: "head head" "res res" "vote vote"; }
.ix-shell.nochat .ix-chat { display: none; }
.ix-shell.novote .ix-vote { display: none; }
.ix-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); min-width: 0; }
#round-end.on .ix-panel { animation: ixUp .45s cubic-bezier(.2, .8, .2, 1) both; }
#round-end.on .ix-res { animation-delay: .06s; } #round-end.on .ix-chat { animation-delay: .12s; } #round-end.on .ix-vote { animation-delay: .18s; }
@keyframes ixUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ix-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.ix-h { font: 700 12px var(--font); letter-spacing: 0.22em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.ix-h em { font-style: normal; margin-left: auto; letter-spacing: 0.06em; font-weight: 600; }

/* the header: the result, the clock */
.ix-head { grid-area: head; display: flex; align-items: center; gap: 18px; padding: 14px 22px; }
.ix-titles { min-width: 0; }
.ix-kicker { font: 700 13px var(--font); letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase; }
.ix-title { font: 700 34px/1.08 var(--font); letter-spacing: 0.03em; margin: 2px 0 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-title b { color: var(--gold); }
.ix-title.win { background: linear-gradient(100deg, #fff 5%, var(--gold) 55%, #ffb040); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ix-title.win b { color: inherit; }
.ix-clock { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 600 13px var(--font); letter-spacing: 0.14em; color: var(--muted); text-align: right; white-space: nowrap; }
.ix-clock small { display: block; color: var(--text); font-size: 15px; letter-spacing: 0.06em; margin-top: 2px; }
.ix-ring { --p: 1; --c: var(--cyan); position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.1) 0); }
.ix-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #0e1628; }
.ix-ring span { position: relative; font: 700 22px var(--font); color: #fff; letter-spacing: 0; }
.ix-ring.last span { color: var(--gold); animation: ixTick 1s ease-out infinite; }
@keyframes ixTick { from { transform: scale(1.25); } to { transform: scale(1); } }

/* the result: MVP, the board, my XP */
.ix-res { grid-area: res; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ix-board-wrap { min-height: 0; overflow: hidden; }
table.ix-board { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ix-board th { font: 600 11px var(--font); letter-spacing: 0.14em; color: var(--muted); text-align: right; padding: 0 8px 5px; font-weight: 600; }
.ix-board th:nth-child(2) { text-align: left; }
.ix-board td { padding: 5px 8px; text-align: right; border-top: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; }
.ix-board td:first-child { color: var(--muted); width: 30px; }
.ix-board td:nth-child(2) { text-align: left; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 55%; }
.ix-board td:nth-child(2) i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.ix-board td:nth-child(3) { font: 700 15px var(--font); }
.ix-board tbody tr:first-child td:nth-child(3) { color: var(--gold); }
.ix-board tr.me td { background: rgba(64, 224, 255, 0.1); }
.ix-board tr.me td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.ix-board tr.bots-sep td { padding: 7px 0 3px !important; font: 600 10px var(--font); letter-spacing: 0.3em; text-align: center !important; background: none; }

/* the chat: everyone in the match, the round's lines, quick words, Enter to type */
.ix-chat { grid-area: chat; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.ix-lines { flex: 1; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ix-lines div { animation: ixIn .25s ease-out both; }
.ix-lines b { font-weight: 700; }
.ix-lines .sys { color: var(--muted); font-style: italic; font-size: 13px; }
.ix-lines .empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto 0; animation: none; }
@keyframes ixIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ix-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-quick button { font: 600 12.5px var(--font); letter-spacing: 0.04em; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; }
.ix-quick button:hover, .ix-quick button.pad-focus { border-color: var(--cyan); background: rgba(64, 224, 255, 0.12); }
.ix-quick button:active { transform: scale(0.95); }
.ix-quick button:disabled { opacity: 0.45; cursor: default; }
.ix-say { min-height: 40px; }
.ix-hint { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(64, 224, 255, 0.35); background: rgba(5, 10, 20, 0.7); color: var(--muted); font: 14px Inter, sans-serif; cursor: text; text-align: left; }
.ix-hint:hover { border-color: var(--cyan); }
.ix-hint kbd { color: var(--text); }
#ix-say #chat-box { position: static; width: auto; display: none; }
#round-end.typing #ix-say #chat-box { display: block; }
#round-end.typing .ix-hint { display: none; }
#ix-say #chat-input { box-shadow: 0 0 0 3px rgba(64, 224, 255, 0.15); }

/* the vote: its maps as cards - click, keys 1-3, a tap, the D-pad and A */
.ix-vote { grid-area: vote; padding: 13px 16px 16px; }
.ix-vote .ix-h { margin-bottom: 10px; }
.ix-vote .ix-h #ix-vote-t { color: var(--text); }
.ix-timer { flex: 0 0 190px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ix-timer u { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), #8ab4ff); transform-origin: 0 50%; transform: scaleX(var(--t, 1)); }
.ix-vote.closed .ix-timer { visibility: hidden; }
.ix-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ix-cards.many { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.ix-card { position: relative; aspect-ratio: 16 / 7.4; border-radius: 14px; overflow: hidden; padding: 0; color: #fff; font: inherit; text-align: left; cursor: pointer; background: #0d1426;
  border: 2px solid rgba(255, 255, 255, 0.14); transition: transform .15s, border-color .15s, box-shadow .2s, opacity .35s, filter .35s; }
.ix-cards.many .ix-card { aspect-ratio: 16 / 9; border-radius: 10px; }
.ix-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ix-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 8, 18, 0.05) 25%, rgba(4, 8, 18, 0.92)); pointer-events: none; }
.ix-card:hover:not(:disabled), .ix-card.pad-focus { transform: translateY(-3px); border-color: rgba(64, 224, 255, 0.75); }
.ix-card:hover:not(:disabled) img { transform: scale(1.04); }
.ix-card:disabled { cursor: default; }
.ix-card .k { position: absolute; top: 9px; left: 10px; z-index: 1; font: 700 13px var(--font); background: rgba(4, 8, 18, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; padding: 2px 9px; }
.ix-card .badge { position: absolute; top: 9px; right: 10px; z-index: 1; font: 700 10.5px var(--font); letter-spacing: 0.14em; color: #101522; background: var(--green); border-radius: 6px; padding: 3px 8px; }
.ix-card .badge.dim { color: var(--text); background: rgba(4, 8, 18, 0.8); }
.ix-card .nm { position: absolute; left: 14px; right: 56px; bottom: 12px; z-index: 1; }
.ix-card .nm b { display: block; font: 700 21px var(--font); letter-spacing: 0.05em; text-shadow: 0 2px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-card .nm span { display: block; font-size: 12px; color: #cfd9ee; text-shadow: 0 1px 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-cards.many .ix-card .k { top: 5px; left: 6px; font-size: 11px; padding: 1px 6px; }
.ix-cards.many .ix-card .badge { top: 5px; right: 6px; font-size: 8.5px; padding: 2px 5px; }
.ix-cards.many .ix-card .nm { left: 8px; right: 8px; bottom: 6px; }
.ix-cards.many .ix-card .nm b { font-size: 13px; }
.ix-cards.many .ix-card .nm span { display: none; }
.ix-card .votes { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 5px; font: 700 22px var(--font); }
.ix-card .votes i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); animation: ixPop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ixPop { from { transform: scale(0); } to { transform: scale(1); } }
.ix-card .you { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); z-index: 1; font: 700 11px var(--font); letter-spacing: 0.16em; color: #0b1020; background: var(--cyan); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.ix-card .badge ~ .you { left: auto; right: 10px; top: 34px; transform: none; }   /* (my vote on the rotation's next: under its badge) */
.ix-card .votes i:nth-of-type(n+6) { display: none; }                            /* (a crowd on one map: five dots, the number says how many) */
.ix-card.mine { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(64, 224, 255, 0.25), 0 12px 30px rgba(64, 224, 255, 0.18); }
.ix-card.mine .k { background: var(--cyan); color: #0b1020; border-color: var(--cyan); }
.ix-card.cur { opacity: 0.55; }
.ix-card.won { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 225, 77, 0.3), 0 16px 40px rgba(255, 200, 64, 0.25); transform: scale(1.03); z-index: 1; }
.ix-card.won img { transform: scale(1.06); }
.ix-card.lost { opacity: 0.28; filter: grayscale(0.7); }
.ix-card .next { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); z-index: 1; font: 700 13px var(--font); letter-spacing: 0.3em; color: var(--gold); text-shadow: 0 2px 8px #000; white-space: nowrap; animation: ixIn .4s ease-out both; }

@media (prefers-reduced-motion: reduce) { #round-end .ix-panel, .ix-lines div, .ix-card .votes i, .ix-ring.last span { animation: none !important; } .ix-card, .ix-card img { transition: none; } }

/* phones and narrow windows: one column that scrolls - the vote first (it runs out), the chat, the result */
@media (max-width: 760px) {
  #round-end { padding: 10px; overflow-y: auto; }
  .ix-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vote" "chat" "res"; gap: 10px; margin: 0; transform: none; zoom: 1; }
  .ix-shell.nochat { grid-template-areas: "head" "vote" "res"; }
  .ix-head { padding: 12px 14px; gap: 10px; }
  .ix-kicker { font-size: 11px; letter-spacing: 0.2em; }
  .ix-title { font-size: 22px; white-space: normal; }
  .ix-clock { gap: 8px; font-size: 11px; letter-spacing: 0.1em; }
  .ix-clock small { font-size: 12px; }
  .ix-ring { width: 44px; height: 44px; } .ix-ring span { font-size: 18px; }
  .ix-vote .ix-h { flex-wrap: wrap; row-gap: 6px; }
  .ix-timer { flex: 1 1 100%; }
  .ix-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ix-cards.many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-card { aspect-ratio: auto; height: 92px; }
  .ix-cards.many .ix-card { height: auto; aspect-ratio: 16 / 10; }
  .ix-card .nm b { font-size: 18px; }
  .ix-lines { min-height: 0; flex: none; }
  #round-mvp { flex-wrap: wrap; } #round-mvp .mvp { flex: 1 1 100%; } #round-mvp .awards { flex: 1 1 100%; }
  .ix-board { font-size: 13px; } .ix-board th:nth-child(5), .ix-board td:nth-child(5) { display: none; }
}
/* a phone on its side (the way it plays): the vote's three maps side by side - all three on the screen, no scrolling */
@media (max-width: 760px) and (orientation: landscape) {
  .ix-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-card { height: 84px; }
  .ix-card .nm { left: 10px; right: 40px; bottom: 8px; }
  .ix-card .nm b { font-size: 15px; }
  .ix-card .nm span { display: none; }
  .ix-card .votes { right: 9px; bottom: 7px; font-size: 18px; }
  .ix-card .votes i:nth-of-type(n+4) { display: none; }
}

/* =====================================================================================================================
   THE MAIN MENU (2026-10, the user: "something epic - BIONEURAL's DNA: a fast, blasting multiplayer shooter"; no match
   behind the menu, the leaderboard in a window of its own). js/menustage.js draws the stage behind it: a burning night
   city, your pilot on a platform. On the left a black banner with the logo and the menu (bars torn like brush strokes),
   on the right your pilot's plate. The windows (settings, offline, profile, leaderboard, how to play) and the pause
   menu wear the same look; the in-game HUD is untouched.
   ===================================================================================================================== */
:root { --nm-red: #ff2e4d; --nm-paper: #ece5d3; --nm-ink: #05060a; --nm-dim: #7f8aa3; }
#menu.nm { display: block; padding: 0; background: none; overflow: hidden; }
#menu.nm > .nm-rail, #menu.nm > .nm-side, #menu.nm > .nm-foot { zoom: var(--ui); }
#menu.nm .nm-fx, #menu.nm .nm-fx i { position: absolute; inset: 0; pointer-events: none; }
#menu.nm .nm-vig { background:
  linear-gradient(90deg, rgba(3,4,7,0.9) 0, rgba(3,4,7,0.55) 26%, rgba(3,4,7,0) 46%),
  linear-gradient(270deg, rgba(3,4,7,0.78) 0, rgba(3,4,7,0.45) 22%, rgba(3,4,7,0) 36%),
  radial-gradient(ellipse 80% 90% at 58% 46%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.72) 100%); }
#menu.nm .nm-scan { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, rgba(0,0,0,0) 1px 3px); mix-blend-mode: overlay; animation: nmFlick 7s steps(1) infinite; }
@keyframes nmFlick { 0%, 100% { opacity: 0.55; } 91% { opacity: 0.55; } 92% { opacity: 0.9; } 93% { opacity: 0.4; } }

/* ---- the banner */
#menu.nm .nm-rail { position: absolute; left: 0; top: 0; height: calc(100vh / var(--ui)); width: 430px; display: flex; flex-direction: column;
  padding: 46px 78px 24px 44px; background: linear-gradient(180deg, rgba(4,5,9,0.95), rgba(6,7,12,0.88) 55%, rgba(4,5,9,0.96));
  clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 100%, 0 100%); }
#menu.nm .nm-rail::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--nm-red), rgba(255,46,77,0.15) 45%, rgba(64,224,255,0.6));
  clip-path: polygon(calc(100% - 2px) 0, 100% 0, calc(100% - 52px) 100%, calc(100% - 54px) 100%); }
#menu.nm .nm-kicker { font: 600 11.5px var(--font); letter-spacing: 0.34em; color: var(--nm-red); display: flex; align-items: center; }
#menu.nm .nm-kicker i { display: inline-block; width: 26px; height: 2px; background: var(--nm-red); margin-right: 10px; box-shadow: 0 0 10px var(--nm-red); }
#menu.nm .nm-logo { position: relative; font-size: 60px; letter-spacing: 0.02em; margin: 8px 0 6px; filter: drop-shadow(0 0 18px rgba(64,224,255,0.18)); }
#menu.nm .nm-logo::before, #menu.nm .nm-logo::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
#menu.nm .nm-logo::before { color: var(--cyan); animation: nmGlitchA 5.5s infinite steps(1); }
#menu.nm .nm-logo::after { color: var(--nm-red); animation: nmGlitchB 5.5s infinite steps(1); }
@keyframes nmGlitchA { 0%, 88%, 100% { opacity: 0; } 89% { opacity: 0.85; transform: translate(-3px, -1px); clip-path: inset(10% 0 62% 0); } 90% { opacity: 0.85; transform: translate(4px, 0); clip-path: inset(55% 0 12% 0); } 91% { opacity: 0; } 95% { opacity: 0.7; transform: translate(-2px, 1px); clip-path: inset(30% 0 40% 0); } 96% { opacity: 0; } }
@keyframes nmGlitchB { 0%, 88%, 100% { opacity: 0; } 89% { opacity: 0.85; transform: translate(3px, 1px); clip-path: inset(48% 0 20% 0); } 90% { opacity: 0.85; transform: translate(-4px, 0); clip-path: inset(8% 0 70% 0); } 91% { opacity: 0; } 95% { opacity: 0.7; transform: translate(2px, -1px); clip-path: inset(62% 0 8% 0); } 96% { opacity: 0; } }
#menu.nm .tag { color: #8b96ad; font-size: 13px; line-height: 1.45; max-width: 290px; margin: 0; }

/* ---- the menu: big uppercase bars; under the pointer (or keys, or a controller) a torn paper-white brush stroke */
#menu.nm .nm-nav { margin: 30px -14px 0 -14px; display: flex; flex-direction: column; gap: 1px; flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
#menu.nm .nm-nav::-webkit-scrollbar { display: none; }
#menu.nm .nm-item { appearance: none; position: relative; display: block; width: 100%; margin: 0; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer;
  font: 700 25px/1.05 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: #dde3ef; padding: 9px 26px 9px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M22 12 L60 8 L110 11 L170 7 L240 10 L300 6 L380 9 L450 5 L520 8 L575 4 L598 7 L590 16 L597 25 L589 34 L595 44 L584 52 L560 55 L480 52 L400 57 L320 53 L240 58 L160 54 L90 58 L30 55 L2 59 L9 47 L5 38 L13 27 L10 19 Z M590 1 L599 2 L594 6 Z M598 55 L592 62 L589 57 Z' fill='%23ece5d3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 50%; background-size: 0% 100%;
  transition: background-size 0.22s cubic-bezier(.2,.8,.2,1), color 0.12s, transform 0.18s cubic-bezier(.2,.8,.2,1); }
#menu.nm .nm-item::before { content: attr(data-k); position: absolute; left: 14px; top: 14px; font: 600 11px var(--font); letter-spacing: 0.1em; color: rgba(64,224,255,0.55); transition: color 0.12s; }
#menu.nm .nm-item[data-sub]::after { content: attr(data-sub); display: block; margin-top: 4px; font: 500 11.5px Inter, sans-serif; letter-spacing: 0.01em; text-transform: none; color: var(--nm-dim); transition: color 0.12s; }
#menu.nm .nm-item:hover:not(:disabled), #menu.nm .nm-item:focus-visible, #menu.nm .nm-item.pad-focus { outline: none; box-shadow: none !important; background-size: 100% 100%; color: #0a0b10; transform: translateX(8px); }
#menu.nm .nm-item:hover:not(:disabled)::before, #menu.nm .nm-item:focus-visible::before, #menu.nm .nm-item.pad-focus::before { color: #b0122c; }
#menu.nm .nm-item:hover:not(:disabled)::after, #menu.nm .nm-item:focus-visible::after, #menu.nm .nm-item.pad-focus::after { color: #4a443a; }
#menu.nm .nm-item:disabled { opacity: 0.42; cursor: wait; }
#menu.nm .nm-item:active:not(:disabled) { transform: translateX(8px) scale(0.985); }
/* PLAY ONLINE: always lit - a slanted bar of the game's cyan */
#menu.nm .nm-main { font-size: 34px; padding: 14px 30px 13px 48px; margin-bottom: 10px; color: #03151c; background-size: 100% 100%;
  background-image: linear-gradient(100deg, #40e0ff 0%, #5cf0d6 55%, #a6ff8f 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
#menu.nm .nm-main::before { color: rgba(3,21,28,0.55); top: 19px; }
#menu.nm .nm-main::after { color: rgba(3,40,48,0.8); font-weight: 600; }
#menu.nm .nm-main:not(:disabled) { animation: nmPulse 2.8s ease-in-out infinite; }
#menu.nm .nm-main:hover:not(:disabled), #menu.nm .nm-main:focus-visible, #menu.nm .nm-main.pad-focus { color: #03151c; filter: brightness(1.12) saturate(1.1); }
#menu.nm .nm-main:hover:not(:disabled)::before, #menu.nm .nm-main:focus-visible::before { color: rgba(3,21,28,0.7); }
#menu.nm .nm-main:disabled { background-image: linear-gradient(100deg, #3a4456, #283040); color: #9aa6bd; opacity: 0.8; }
@keyframes nmPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
#menu.nm .nm-comp::before { color: #ffa640; }
#menu.nm .nm-sm { font-size: 17px; letter-spacing: 0.1em; color: #aab4c8; padding: 7px 26px 7px 48px; }
#menu.nm .nm-sm::before { top: 10px; }
#menu.nm .nm-sep { display: block; height: 1px; margin: 12px 40px 10px 48px; background: linear-gradient(90deg, rgba(255,46,77,0.65), rgba(255,46,77,0)); }
#nm-fr-badge { display: inline-block; margin-left: 9px; padding: 1px 7px; vertical-align: 3px; background: var(--nm-red); color: #fff; font: 700 11px var(--font); letter-spacing: 0; border-radius: 9px; }
#nm-fr-badge:empty { display: none; }
/* the loading bar, at the foot of the banner */
#menu.nm .nm-rail #boot { width: auto; margin: 14px 0 0; padding: 9px 12px 11px; border-radius: 0; border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--cyan); background: rgba(255,255,255,0.025); backdrop-filter: none; }
#menu.nm .nm-rail #boot-bar { border-radius: 0; }

/* ---- your pilot's plate, on the right */
#menu.nm .nm-side { position: absolute; right: 0; top: 0; width: 392px; padding: 74px 40px 0 0; display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh / var(--ui) - 96px); overflow-y: auto; scrollbar-width: none; }
#menu.nm .nm-side::-webkit-scrollbar { display: none; }
#menu.nm .nm-side-h { font: 600 11.5px var(--font); letter-spacing: 0.34em; color: var(--nm-dim); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#menu.nm .nm-side-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0)); }
#menu.nm #prof-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto; column-gap: 16px; row-gap: 6px; align-items: center; width: 100%; margin: 0 0 8px; padding: 14px 18px 14px 16px; text-align: left;
  border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--nm-red); border-radius: 0; background: linear-gradient(120deg, rgba(10,12,19,0.88), rgba(6,7,12,0.7)); backdrop-filter: blur(8px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); transition: background 0.15s; cursor: pointer; }
#menu.nm #prof-card:hover, #menu.nm #prof-card:focus-visible { background: linear-gradient(120deg, rgba(24,28,40,0.92), rgba(10,12,19,0.75)); box-shadow: none; }
#menu.nm #prof-lv { grid-row: 1 / 4; display: flex; flex-direction: column; align-items: center; font: 700 52px/0.9 var(--font); color: #fff; letter-spacing: 0; }
#menu.nm #prof-lv i { font-style: normal; text-shadow: 0 0 24px rgba(64,224,255,0.35); }
#menu.nm #prof-lv small { margin-top: 6px; padding: 2px 8px; background: #e9eef8; color: #0a0b10; font: 700 10.5px var(--font); letter-spacing: 0.32em; }
#menu.nm #prof-title { max-width: none; font: 700 17px var(--font); letter-spacing: 0.14em; color: #fff; align-self: end; }
#menu.nm #prof-card s { display: block; width: 100%; height: 5px; border-radius: 0; background: rgba(255,255,255,0.1); }
#menu.nm #prof-card u { background: linear-gradient(90deg, var(--nm-red), #ffb040); box-shadow: 0 0 10px rgba(255,46,77,0.6); }
#menu.nm #prof-card em { font: 600 10.5px var(--font); letter-spacing: 0.22em; color: var(--nm-dim); }
#menu.nm .nm-side .lbl { margin-top: 8px; font: 600 11px var(--font); letter-spacing: 0.26em; color: var(--nm-dim); }
#menu.nm #name { font: 700 20px var(--font); letter-spacing: 0.04em; padding: 10px 14px; border: 0; border-bottom: 2px solid rgba(255,255,255,0.16); border-radius: 0; background: rgba(6,8,13,0.72); color: #fff; }
#menu.nm #name:focus { border-bottom-color: var(--cyan); box-shadow: none; background: rgba(10,14,22,0.85); }
#menu.nm .swatches { gap: 12px; padding: 6px 4px 2px; }
#menu.nm .swatches button { width: 26px; height: 26px; border-radius: 2px; border: 2px solid rgba(0,0,0,0.35); transform: rotate(45deg) scale(0.86); transition: transform 0.15s, box-shadow 0.15s; }
#menu.nm .swatches button:hover { transform: rotate(45deg) scale(1); }
#menu.nm .swatches button.sel { border-color: #fff; transform: rotate(45deg) scale(1.08); box-shadow: 0 0 16px currentColor, 0 0 2px #fff; }
#menu.nm .country-row select { border-radius: 0; border: 0; border-bottom: 2px solid rgba(255,255,255,0.16); background: rgba(6,8,13,0.72); }
#menu.nm #online { border-radius: 0; }
#menu.nm #party-box { border-radius: 0; border-width: 0 0 0 3px; background: rgba(14,10,6,0.85); }

/* ---- the foot: where it plays, and who made it */
#menu.nm .nm-foot { position: absolute; right: 0; bottom: 0; padding: 0 34px 12px 0; pointer-events: none; }
#menu.nm .nm-foot .credits { width: auto; margin: 0; text-align: right; font-size: 11.5px; pointer-events: auto; }


/* ---- the windows and the pause menu: the same look */
.modal { background: rgba(2,3,6,0.62); }
.modal > .menu-card, #pause > .menu-card { position: relative; border-radius: 0; border: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, rgba(10,12,19,0.97), rgba(5,6,10,0.97)); box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.modal > .menu-card::before, #pause > .menu-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--nm-red), rgba(255,46,77,0) 40%, rgba(64,224,255,0) 60%, var(--cyan)); pointer-events: none; }
.modal .menu-card h2, #pause .menu-card h2 { font-family: var(--font); text-transform: uppercase; letter-spacing: 0.16em; }
.modal .btn, #pause .btn { border-radius: 0; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.modal .st-x { border-radius: 0; }
#pause { background: radial-gradient(ellipse at 50% 50%, rgba(3,4,8,0.35), rgba(3,4,8,0.8)); }
#pause .menu-card h2 { font-size: 30px; letter-spacing: 0.3em; }
/* the leaderboard window */
.nm-board { width: min(640px, 100%) !important; }
.nm-board .lb-scroll { max-height: min(520px, calc(70vh / var(--ui))); }
.nm-board table { font-size: 15px !important; }
.nm-board .bc-tabs button { border-radius: 0 !important; }


#menu.nm #mobile-note { margin: 6px 0 0; text-align: left; font-size: 11.5px; line-height: 1.4; color: var(--nm-dim); }

/* ---- top right: the official Discord, the music button */
#menu.nm .nm-top { position: absolute; top: 14px; right: 14px; zoom: var(--ui); display: flex; align-items: center; gap: 10px; z-index: 6; }
#menu.nm .nm-top #snd-btn { position: static; zoom: 1; border-radius: 0; background: rgba(6,8,13,0.75); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 8px 18px; }
#menu.nm .nm-discord { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 20px 0 18px; text-decoration: none; color: #fff; background: #5865f2;
  font: 600 12px var(--font); letter-spacing: 0.16em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: filter 0.15s, transform 0.15s; }
#menu.nm .nm-discord b { font-weight: 700; }
#menu.nm .nm-discord svg { width: 20px; height: 20px; fill: #fff; }
#menu.nm .nm-discord:hover, #menu.nm .nm-discord:focus-visible, #menu.nm .nm-discord.pad-focus { outline: none; box-shadow: none !important; filter: brightness(1.15) drop-shadow(0 0 12px rgba(88,101,242,0.8)); transform: translateY(-1px); }

/* ---- PLAY ON: the eight devices in one row across the foot of the banner */
#menu.nm .nm-rail .platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; width: auto; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,0.08); }
#menu.nm .nm-rail .platforms .pf-t { grid-column: 1 / -1; width: auto; margin: 0 0 2px; display: flex; align-items: center; text-align: left; font: 600 10.5px var(--font); letter-spacing: 0.34em; color: var(--nm-dim); }
#menu.nm .nm-rail .platforms .pf-t::before { content: ""; width: 18px; height: 2px; margin-right: 9px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#menu.nm .nm-rail .platforms .pf { width: auto; min-width: 0; gap: 4px; color: #9fe9ff; }
#menu.nm .nm-rail .platforms svg { width: 30px; height: 30px; stroke-width: 2; }
#menu.nm .nm-rail .platforms .pf b { font: 600 10.5px var(--font); letter-spacing: 0.06em; white-space: nowrap; }

/* ---- PLAY -> SELECT MODE: the plate slides away, the stage dims, four cards slide in one after another */
#menu.nm .nm-side { transition: opacity 0.3s, transform 0.4s cubic-bezier(.2,.8,.2,1); }
#menu.nm.modes .nm-side { opacity: 0; transform: translateX(60px); pointer-events: none; }
#menu.nm .nm-dim { background: linear-gradient(90deg, rgba(3,4,8,0) 18%, rgba(3,4,8,0.62) 36%, rgba(3,4,8,0.74)); opacity: 0; transition: opacity 0.4s; }
#menu.nm.modes .nm-dim { opacity: 1; }
#menu.nm.modes-out .nm-dim { opacity: 0; }
#menu.nm.modes #nm-play { translate: 10px 0; filter: brightness(1.15); }
#menu.nm .nm-modes { position: absolute; left: 418px; right: 34px; top: 0; height: calc(100vh / var(--ui)); zoom: var(--ui); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 0 60px; }
#menu.nm .nm-modes-h { display: flex; align-items: center; justify-content: space-between; font: 600 12px var(--font); letter-spacing: 0.34em; color: #c9d1e2; opacity: 0; transition: opacity 0.3s 0.1s; }
#menu.nm.modes .nm-modes-h { opacity: 1; }
#menu.nm.modes-out .nm-modes-h { opacity: 0; transition-delay: 0s; }
#menu.nm .nm-modes-h span { display: flex; align-items: center; }
#menu.nm .nm-modes-h span i { width: 26px; height: 2px; margin-right: 10px; background: var(--nm-red); box-shadow: 0 0 10px var(--nm-red); }
#menu.nm .nm-modes-x { background: none; border: 0; color: var(--nm-dim); font: 600 12px var(--font); letter-spacing: 0.24em; cursor: pointer; padding: 6px 4px; }
#menu.nm .nm-modes-x:hover, #menu.nm .nm-modes-x.pad-focus { color: #fff; outline: none; box-shadow: none !important; }
#menu.nm .nm-modes-x kbd { margin-left: 6px; font-size: 10px; }
#menu.nm .nm-cards { display: flex; gap: 14px; height: min(540px, calc(64vh / var(--ui))); }
#menu.nm .nm-mode { appearance: none; flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; margin: 0; border: 0; border-radius: 0; padding: 0 30px 26px 34px; text-align: left; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; background: #07080d; clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  opacity: 0; transition: flex-grow 0.4s cubic-bezier(.2,.8,.2,1), translate 0.25s cubic-bezier(.2,.8,.2,1), filter 0.2s; }
#menu.nm.modes .nm-mode { animation: nmCardIn 0.6s cubic-bezier(.16,.84,.3,1) both; animation-delay: calc(var(--i) * 75ms + 60ms); }
#menu.nm.modes-out .nm-mode { animation: nmCardOut 0.24s ease-in both; animation-delay: calc((3 - var(--i)) * 25ms); }
@keyframes nmCardIn { from { opacity: 0; transform: translateX(130px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes nmCardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-50px) skewX(4deg); } }
#menu.nm .nm-mode > * { position: relative; z-index: 2; }
#menu.nm .nm-mode .m-art { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; filter: grayscale(0.85) brightness(0.48) contrast(1.1); transform: scale(1.06); transition: filter 0.35s, transform 1.4s cubic-bezier(.2,.8,.2,1); }
#menu.nm .nm-mode::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,6,10,0.25) 0%, rgba(5,6,10,0) 30%, rgba(5,6,10,0.86) 66%, rgba(5,6,10,0.97) 100%); }
#menu.nm .nm-mode::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: var(--acc); box-shadow: 0 0 20px var(--acc); transform: scaleX(0.22); transform-origin: left; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
#menu.nm .nm-mode .m-k { position: absolute; top: 20px; left: 40px; font: 600 12px var(--font); letter-spacing: 0.12em; color: var(--acc); }
#menu.nm .nm-mode .m-tag { position: absolute; top: 17px; right: 38px; padding: 3px 9px; font: 700 10px var(--font); letter-spacing: 0.2em; color: var(--acc); background: rgba(5,6,10,0.72); border: 1px solid var(--acc); white-space: nowrap; }
#menu.nm .nm-mode .m-t { font: 700 34px/1 var(--font); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 10px; text-shadow: 0 2px 18px rgba(0,0,0,0.8); }
#menu.nm .nm-mode .m-s { font: 500 12.5px/1.45 Inter, sans-serif; color: #aeb8cc; max-width: 28ch; }
#menu.nm .nm-mode .m-go { position: absolute; right: 36px; bottom: 26px; font-style: normal; font-size: 18px; color: var(--acc); transition: transform 0.25s; }
#menu.nm .nm-mode:hover:not(:disabled), #menu.nm .nm-cards:not(:hover) .nm-mode.pad-focus, #menu.nm .nm-cards:not(:hover) .nm-mode:focus { flex-grow: 1.45; translate: 0 -8px; outline: none; box-shadow: none !important; }
#menu.nm .nm-mode:hover:not(:disabled) .m-art, #menu.nm .nm-cards:not(:hover) .nm-mode.pad-focus .m-art, #menu.nm .nm-cards:not(:hover) .nm-mode:focus .m-art { filter: grayscale(0) brightness(0.9) saturate(1.2); transform: scale(1.16); }
#menu.nm .nm-mode:hover:not(:disabled)::after, #menu.nm .nm-cards:not(:hover) .nm-mode.pad-focus::after, #menu.nm .nm-cards:not(:hover) .nm-mode:focus::after { transform: scaleX(1); }
#menu.nm .nm-mode:hover:not(:disabled) .m-go, #menu.nm .nm-cards:not(:hover) .nm-mode.pad-focus .m-go, #menu.nm .nm-cards:not(:hover) .nm-mode:focus .m-go { transform: translateX(6px); }
#menu.nm .nm-mode:active:not(:disabled) { filter: brightness(1.2); }
#menu.nm .nm-mode:disabled { cursor: wait; filter: grayscale(1) brightness(0.6); }
#menu.nm .nm-mode.hidden { display: none !important; }
#menu.nm .nm-spec { align-self: flex-start; margin-left: 22px; background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--nm-dim); font: 600 12px var(--font); letter-spacing: 0.16em; opacity: 0; transition: opacity 0.3s 0.35s, color 0.15s; }
#menu.nm.modes .nm-spec { opacity: 1; }
#menu.nm.modes-out .nm-spec { opacity: 0; transition-delay: 0s; }
#menu.nm .nm-spec b { color: #dde3ef; }
#menu.nm .nm-spec:hover:not(:disabled), #menu.nm .nm-spec:focus-visible, #menu.nm .nm-spec.pad-focus { color: #fff; outline: none; box-shadow: none !important; }
#menu.nm .nm-spec:disabled { cursor: wait; opacity: 0.4; }


body.touch #menu.nm .nm-modes-x kbd { display: none; }

/* ---- FRIENDS: its own window - the list on the left, your code / add / how it works on the right */
#menu.nm .nm-badge { display: inline-block; margin-left: 10px; padding: 1px 7px; vertical-align: 3px; font: 700 11px var(--font); letter-spacing: 0.06em; color: #bfffd3; background: rgba(77,255,136,0.14); border: 1px solid rgba(77,255,136,0.45); }
#menu.nm .nm-badge.new { color: #fff; background: var(--nm-red); border-color: var(--nm-red); box-shadow: 0 0 12px rgba(255,46,77,0.6); animation: nmBadge 1.6s ease-in-out infinite; }
#menu.nm .nm-badge:empty { display: none; }
@keyframes nmBadge { 50% { box-shadow: 0 0 2px rgba(255,46,77,0.3); } }
#menu.nm .nm-item:hover .nm-badge, #menu.nm .nm-item:focus-visible .nm-badge { color: #0a0b10; border-color: #0a0b10; background: transparent; }
.fr-modal-card { width: min(880px, calc(94vw / var(--ui))) !important; max-height: calc(88vh / var(--ui)) !important; padding: 28px 30px 26px !important; }
.fr-modal-card .st-head { margin-bottom: 18px; }
.fr-modal-card .st-head h2 { display: flex; align-items: baseline; gap: 16px; }
.fr-modal-card #fr-sum { font: 600 12px var(--font); letter-spacing: 0.22em; color: var(--nm-dim); text-transform: uppercase; }
.fr-modal-card #fr-panel { max-height: none; overflow: visible; }
.fr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 26px; }
.fr-main { min-height: 320px; max-height: calc(62vh / var(--ui)); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.4) transparent; }
.fr-modal-card #fr-panel h4 { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; font: 600 11.5px var(--font); letter-spacing: 0.3em; color: var(--nm-dim); }
.fr-modal-card #fr-panel h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0)); }
.fr-modal-card #fr-panel .fr-list + h4 { margin-top: 20px; }
.fr-modal-card .fr-list li { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 10px 12px; border: 0; border-left: 3px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); transition: background 0.15s; }
.fr-modal-card .fr-list li:hover { background: rgba(255,255,255,0.06); }
.fr-modal-card .fr-list li.on { border-left-color: #4dff88; }
.fr-modal-card .fr-list li.fr-req { border-left-color: #ffd34d; background: rgba(255,211,77,0.06); }
.fr-modal-card .fr-dot { width: 8px; height: 8px; }
.fr-modal-card .fr-list li.on .fr-dot { animation: frPulse 2s ease-in-out infinite; }
@keyframes frPulse { 50% { box-shadow: 0 0 2px #4dff88; } }
.fr-modal-card .fr-av { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font: 700 17px var(--font); color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 70% 48%), hsl(var(--h) 70% 30%)); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.fr-modal-card .fr-list li:not(.on) .fr-av { filter: grayscale(0.8) brightness(0.6); }
.fr-modal-card .fr-n { font: 700 16px var(--font); letter-spacing: 0.03em; color: #fff; }
.fr-modal-card .fr-n small { margin-top: 2px; font: 500 12px Inter, sans-serif; letter-spacing: 0; color: var(--nm-dim); }
.fr-modal-card .fr-list li.on .fr-n small { color: #8fe9b0; }
.fr-modal-card .fr-list li:not(.on) .fr-n { color: #9aa3b6; }
.fr-modal-card .fr-req .fr-n { color: #ffe08a; }
.fr-modal-card .fr-b { gap: 6px; }
.fr-modal-card .fr-btn { border-radius: 0; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: #dde3ef; padding: 7px 13px; font: 700 11px var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.fr-modal-card .fr-btn:hover, .fr-modal-card .fr-btn.pad-focus { background: rgba(255,255,255,0.14); color: #fff; border-color: #fff; outline: none; box-shadow: none !important; }
.fr-modal-card .fr-btn.ok { background: rgba(77,255,136,0.16); border-color: rgba(77,255,136,0.55); color: #c8ffd9; }
.fr-modal-card .fr-btn.ok:hover { background: #4dff88; color: #04140a; }
.fr-modal-card .fr-btn.go { background: rgba(64,224,255,0.14); border-color: rgba(64,224,255,0.55); color: #c6f4ff; }
.fr-modal-card .fr-btn.go:hover { background: var(--cyan); color: #03151c; }
.fr-modal-card .fr-btn.x { color: #ff9aa8; padding: 7px 10px; }
.fr-modal-card .fr-btn.x:hover { background: var(--nm-red); border-color: var(--nm-red); color: #fff; }
.fr-modal-card .fr-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 260px; padding: 24px; text-align: center; border: 1px dashed rgba(255,255,255,0.1); background: rgba(255,255,255,0.015); }
.fr-modal-card .fr-none svg { width: 64px; height: 64px; fill: none; stroke: rgba(64,224,255,0.7); stroke-width: 2; stroke-linecap: round; margin-bottom: 4px; filter: drop-shadow(0 0 10px rgba(64,224,255,0.4)); }
.fr-modal-card .fr-none b { font: 700 18px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.fr-modal-card .fr-none span { max-width: 340px; font-size: 13px; line-height: 1.5; color: var(--nm-dim); }
.fr-side { display: flex; flex-direction: column; gap: 14px; }
.fr-modal-card .fr-lbl { display: block; margin-bottom: 8px; font: 600 11px var(--font); letter-spacing: 0.28em; color: var(--nm-dim); text-transform: uppercase; }
.fr-modal-card .fr-code { display: block; padding: 14px 16px 16px; font-size: inherit; color: inherit; background: rgba(64,224,255,0.05); border-left: 3px solid var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.fr-modal-card .fr-code b { display: block; margin-bottom: 12px; font: 700 27px var(--font); letter-spacing: 0.1em; color: #fff; text-shadow: 0 0 18px rgba(64,224,255,0.35); white-space: nowrap; }
.fr-modal-card .fr-code .fr-btn { width: 100%; padding: 9px; }
.fr-modal-card .fr-add { display: block; margin: 0; }
.fr-modal-card .fr-add-row { display: flex; gap: 6px; }
.fr-modal-card .fr-add input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; border-bottom: 2px solid rgba(255,255,255,0.16); border-radius: 0; background: rgba(6,8,13,0.8); color: #fff; font: 700 16px var(--font); letter-spacing: 0.08em; outline: none; }
.fr-modal-card .fr-add input:focus { border-bottom-color: #4dff88; }
.fr-modal-card .fr-add .fr-btn { padding: 0 18px; }
.fr-modal-card .fr-side .fr-empty { margin: 0; font-size: 12px; line-height: 1.5; color: var(--nm-dim); }
.fr-modal-card .fr-how { list-style: none; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 8px; }
.fr-modal-card .fr-how li { font-size: 12px; line-height: 1.45; color: #9aa3b6; padding-left: 12px; position: relative; }
.fr-modal-card .fr-how li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; background: var(--cyan); }
.fr-modal-card .fr-how b { color: #fff; font-family: var(--font); letter-spacing: 0.08em; }
@media (max-height: 560px), (max-width: 860px) {
  .fr-modal-card { padding: 14px 16px 14px !important; }
  .fr-modal-card .st-head { margin-bottom: 8px; }
  .fr-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; }
  .fr-main { min-height: 0; max-height: calc(100vh - 110px); }
  .fr-modal-card .fr-code b { font-size: 18px; margin-bottom: 8px; }
  .fr-modal-card .fr-how { display: none; }
  .fr-modal-card .fr-none { min-height: 150px; padding: 12px; }
  .fr-modal-card .fr-none svg { width: 40px; height: 40px; }
}
/* the leaderboard: the top three in gold, silver, bronze; your row stands out */
.nm-board tbody tr td:first-child { font-family: var(--font); font-weight: 700; }
.nm-board tbody tr:nth-child(1) td:first-child { color: #ffd34d; }
.nm-board tbody tr:nth-child(2) td:first-child { color: #d6dde8; }
.nm-board tbody tr:nth-child(3) td:first-child { color: #e0955a; }
.nm-board tbody tr:nth-child(-n+3) td:nth-child(2) { font-weight: 700; color: #fff; }
.nm-board tbody tr:hover td { background: rgba(255,255,255,0.04); }
.nm-board thead th { font: 600 11px var(--font); letter-spacing: 0.2em; color: var(--nm-dim); text-transform: uppercase; }
.nm-board .bc-tabs button { font-family: var(--font); letter-spacing: 0.14em; }

/* (the leaderboard's window has no fixed height: its tables take the room their rows need, scrolling past ~60% of the screen) */
.nm-board #top-panel, .nm-board #cmp-panel { flex: none; display: block; }
.nm-board #top-panel .lb-scroll, .nm-board #cmp-panel .lb-scroll { flex: none !important; height: auto !important; min-height: 120px; max-height: min(520px, calc(60vh / var(--ui))) !important; }
.nm-board .note { text-align: left; margin-top: 10px; }
/* (the friends window on a phone: its list scrolls inside the screen) */
@media (max-height: 560px), (max-width: 860px) {
  .fr-modal-card .st-head h2 { font-size: 18px; }
  .fr-main { max-height: calc(88vh - 76px); }
  .fr-side { max-height: calc(88vh - 76px); overflow-y: auto; scrollbar-width: none; }
  .fr-modal-card .fr-list li { padding: 7px 8px; gap: 8px; }
  .fr-modal-card .fr-av { width: 28px; height: 28px; font-size: 14px; }
  .fr-modal-card .fr-n { font-size: 14px; }
  .fr-modal-card .fr-btn { padding: 6px 9px; font-size: 10px; letter-spacing: 0.08em; }
}
.nm-board th:nth-child(1), .nm-board td:nth-child(1) { width: 40px !important; }
.nm-board th:nth-child(3), .nm-board td:nth-child(3), .nm-board th:nth-child(4), .nm-board td:nth-child(4), .nm-board th:nth-child(5), .nm-board td:nth-child(5) { width: 78px !important; text-align: right; }

/* ---- THE MENU'S FILM (js/menureel.js): real moments of the game, full screen behind everything; its caption */
#menu.nm .nm-reel { position: absolute; inset: 0; overflow: hidden; background: #05060a; }
#menu.nm .nm-reel video, #menu.nm .nm-reel .nm-r-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease;
  filter: contrast(1.08) saturate(1.15) brightness(0.92); }
#menu.nm .nm-reel .on { opacity: 1; }
#menu.nm .nm-reel .nm-r-still.kb { animation: nmKenBurns 7s linear both; }
@keyframes nmKenBurns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
#menu.nm .nm-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(3,4,8,0.78) 0%, rgba(3,4,8,0) 32%), linear-gradient(180deg, rgba(3,4,8,0.5) 0%, rgba(3,4,8,0) 18%); }
#menu.nm .nm-cap { position: absolute; left: 468px; bottom: 54px; zoom: var(--ui); max-width: 560px; z-index: 2; pointer-events: none; transition: opacity 0.3s; }
#menu.nm .nm-cap::before { content: ""; position: absolute; left: -60px; right: -80px; top: -40px; bottom: -36px; z-index: -1; background: radial-gradient(ellipse at 35% 55%, rgba(3,4,8,0.62), rgba(3,4,8,0) 70%); }
#menu.nm.modes .nm-cap { opacity: 0; }
#menu.nm .nm-cap-map { display: inline-block; margin-bottom: 10px; padding: 3px 10px; font: 700 11px var(--font); letter-spacing: 0.3em; color: #0a0b10; background: var(--nm-paper); }
#menu.nm .nm-cap-t { display: block; font: 700 52px/0.95 var(--font); letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6); }
#menu.nm .nm-cap-t::after { content: ""; display: block; width: 90px; height: 4px; margin: 14px 0 12px; background: linear-gradient(90deg, var(--nm-red), #ffb040); box-shadow: 0 0 14px rgba(255,46,77,0.7); }
#menu.nm .nm-cap-s { display: block; font: 500 15px/1.45 Inter, sans-serif; color: #dfe5f1; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
#menu.nm .nm-cap-dots { display: flex; gap: 6px; margin-top: 16px; }
#menu.nm .nm-cap-dots i { width: 22px; height: 3px; background: rgba(255,255,255,0.25); transition: background 0.3s, width 0.3s; }
#menu.nm .nm-cap-dots i.on { width: 40px; background: #fff; }
#menu.nm .nm-cap.in .nm-cap-map { animation: nmCapIn 0.6s cubic-bezier(.16,.84,.3,1) both; }
#menu.nm .nm-cap.in .nm-cap-t { animation: nmCapIn 0.7s cubic-bezier(.16,.84,.3,1) 0.08s both; }
#menu.nm .nm-cap.in .nm-cap-s { animation: nmCapIn 0.7s cubic-bezier(.16,.84,.3,1) 0.2s both; }
@keyframes nmCapIn { from { opacity: 0; transform: translateX(-40px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* (captions only - the live menu match behind them: no black backdrop, the canvas shows through) */
#menu.nm .nm-reel.caps-only { background: none; pointer-events: none; }
#menu.nm .nm-reel.caps-only video, #menu.nm .nm-reel.caps-only .nm-r-still { display: none; }

#menu.nm .nm-side .lbl, #menu.nm .nm-side-h { color: #b9c3d6; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }

/* THE WORLD SO FAR (the game server's all-time counts) under each film's caption - the ones that go with it, counting up */
#menu.nm .nm-cap-w { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-top: 14px; }
#menu.nm .nm-cap-w:empty { display: none; }
#menu.nm .nm-cap-w em { flex-basis: 100%; font: 600 10px var(--font); font-style: normal; letter-spacing: 0.32em; color: #b9c3d6; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
#menu.nm .nm-cap-w span { display: inline-flex; align-items: baseline; gap: 7px; font: 500 13px Inter, sans-serif; color: #cfd6e4; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }
#menu.nm .nm-cap-w i { font-style: normal; font-size: 17px; }
#menu.nm .nm-cap-w b { font: 700 26px var(--font); letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255,190,90,0.35), 0 2px 12px rgba(0,0,0,0.9); }
#menu.nm .nm-cap.in .nm-cap-w { animation: nmCapIn 0.7s cubic-bezier(.16,.84,.3,1) 0.3s both; }

/* =====================================================================================================================
   THE MAIN MENU ON EVERY SCREEN (2026-10-01, the user: "fully responsive on every kind of device and screen - test
   everything"). main.js picks one of four layouts by what fits: #menu.lay-wide (the full menu), .lay-mid (a tablet on its
   side, a small window), .lay-short (a phone on its side, a short window; .lay-tiny: the smallest - the pilot's plate
   folds into a button) and .lay-stack (held upright: one column that scrolls). Text never under ~10 px on screen,
   anything to tap at least ~40 px on a touch screen.
   ===================================================================================================================== */
/* ---- every layout: small labels a little bigger (a laptop shows the menu at 85 %) */
#menu.nm .nm-kicker, #menu.nm .nm-side-h { font-size: 12.5px; }
#menu.nm .nm-item::before { font-size: 12px; }
#menu.nm .nm-item[data-sub]::after { font-size: 12.5px; }
#menu.nm #prof-lv small { font-size: 11.5px; }
#menu.nm #prof-card em, #menu.nm .nm-side .lbl { font-size: 12px; }
#menu.nm .nm-rail .platforms .pf-t, #menu.nm .nm-rail .platforms .pf b { font-size: 12px; }
#menu.nm .nm-cap-map { font-size: 12.5px; }
#menu.nm .nm-cap-w em { font-size: 12px; }
#menu.nm .nm-cap-w span { font-size: 14px; }
#menu.nm .nm-modes-h, #menu.nm .nm-modes-x, #menu.nm .nm-spec { font-size: 13px; }
#menu.nm .nm-mode .m-k { font-size: 13px; }
#menu.nm .nm-mode .m-tag { font-size: 12px; }
#menu.nm .nm-foot .credits { font-size: 12.5px; }
#menu.nm .nm-badge { font-size: 12px; }
#menu.nm .nm-discord { font-size: 13px; }
/* ---- the film's caption never runs under the plate: it stays between the banner and the plate */
#menu.nm .nm-cap { right: 432px; max-width: 620px; }
/* ---- the pilot button: only on the smallest phones on their side */
#menu.nm .nm-pilot { display: none; }
/* ---- a touch screen: every menu bar tall enough for a thumb */
body.touch #menu.nm .nm-sm { padding-top: 11px; padding-bottom: 11px; }
body.touch #menu.nm .nm-sm::before { top: 14px; }
body.touch #menu.nm .nm-modes-x { padding: 11px 10px; }
body.touch #menu.nm .nm-spec { padding: 11px 8px; }

/* ---- MID: a tablet on its side, a small laptop window */
#menu.nm.lay-mid .nm-rail { width: 372px; padding: 36px 64px 20px 34px; }
#menu.nm.lay-mid .nm-logo { font-size: 50px; }
#menu.nm.lay-mid .tag { font-size: 13px; max-width: 250px; }
#menu.nm.lay-mid .nm-nav { margin-top: 22px; }
#menu.nm.lay-mid .nm-main { font-size: 30px; }
#menu.nm.lay-mid .nm-sm { font-size: 16px; }
#menu.nm.lay-mid .nm-side { width: 330px; padding-right: 24px; }
#menu.nm.lay-mid .nm-cap { left: 396px; right: 352px; bottom: 40px; }
#menu.nm.lay-mid .nm-cap-t { font-size: 36px; }
#menu.nm.lay-mid .nm-cap-t::after { margin: 10px 0 9px; }
#menu.nm.lay-mid .nm-cap-s { font-size: 14px; }
#menu.nm.lay-mid .nm-cap-w b { font-size: 21px; }
#menu.nm.lay-mid .nm-modes { left: 360px; right: 24px; }
#menu.nm.lay-mid .nm-cards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; height: min(620px, calc(76vh / var(--ui))); }
#menu.nm.lay-mid .nm-mode .m-t { font-size: 28px; }
#menu.nm.lay-mid .nm-mode .m-s { max-width: 34ch; }

/* ---- SHORT: a phone on its side, a short or small window */
#menu.nm.lay-short .nm-rail { width: 304px; padding: 10px 40px 8px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
#menu.nm.lay-short .nm-rail::after { clip-path: polygon(calc(100% - 2px) 0, 100% 0, calc(100% - 28px) 100%, calc(100% - 30px) 100%); }
#menu.nm.lay-short .nm-kicker { font-size: 11px; letter-spacing: 0.24em; }
#menu.nm.lay-short .nm-kicker i { width: 16px; margin-right: 7px; }
#menu.nm.lay-short .nm-logo { font-size: 32px; margin: 2px 0 0; }
#menu.nm.lay-short .tag { display: none; }
#menu.nm.lay-short .nm-nav { margin: 8px -4px 0 -6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; align-content: start; }
#menu.nm.lay-short .nm-item { display: flex; align-items: center; min-height: 38px; padding: 0 4px 0 22px; font-size: 13px; letter-spacing: 0.04em; line-height: 1.05; }
#menu.nm.lay-short .nm-item::before { left: 5px; top: 50%; transform: translateY(-50%); font-size: 11px; }
#menu.nm.lay-short .nm-item[data-sub]::after { display: none; }
#menu.nm.lay-short .nm-main { grid-column: 1 / -1; min-height: 46px; padding: 0 20px 0 28px; margin-bottom: 2px; font-size: 21px; }
#menu.nm.lay-short .nm-sep { grid-column: 1 / -1; margin: 2px 20px 2px 22px; }
#menu.nm.lay-short .nm-item:hover:not(:disabled), #menu.nm.lay-short .nm-item:focus-visible, #menu.nm.lay-short .nm-item.pad-focus { transform: translateX(3px); }
#menu.nm.lay-short.modes #nm-play { translate: 4px 0; }
#menu.nm.lay-short .nm-rail .platforms { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 2px; padding-top: 6px; }
#menu.nm.lay-short .nm-rail .platforms .pf-t { font-size: 11px; margin: 0 0 3px; }
#menu.nm.lay-short .nm-rail .platforms svg { width: 22px; height: 22px; }
#menu.nm.lay-short .nm-rail .platforms .pf b { display: none; }
#menu.nm.lay-short .nm-rail #boot { margin-top: 6px; padding: 6px 10px 8px; }
#menu.nm.lay-short .nm-side { width: 276px; padding: 48px 12px 6px 0; max-height: calc(100vh / var(--ui) - 30px); gap: 3px; scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.4) transparent; }
#menu.nm.lay-short .nm-side::-webkit-scrollbar { display: block; width: 4px; }
#menu.nm.lay-short .nm-side::-webkit-scrollbar-thumb { background: rgba(64,224,255,0.4); }
#menu.nm.lay-short .nm-side-h { font-size: 11px; margin-bottom: 2px; }
#menu.nm.lay-short #prof-card { padding: 8px 10px; column-gap: 10px; row-gap: 4px; margin-bottom: 2px; }
#menu.nm.lay-short #prof-lv { font-size: 30px; }
#menu.nm.lay-short #prof-lv small { font-size: 10.5px; padding: 1px 5px; margin-top: 3px; letter-spacing: 0.2em; }
#menu.nm.lay-short #prof-title { font-size: 13px; }
#menu.nm.lay-short #prof-card em { font-size: 11px; }
#menu.nm.lay-short .nm-side .lbl { margin-top: 3px; font-size: 11px; }
#menu.nm.lay-short #name { font-size: 15px; padding: 0 10px; height: 38px; }
#menu.nm.lay-short .swatches { gap: 7px; padding: 8px 3px 4px; }
#menu.nm.lay-short .swatches button { width: 24px; height: 24px; }
#menu.nm.lay-short .country-row select { height: 38px; font-size: 14px; }
#menu.nm.lay-short #mobile-note, #menu.nm.lay-short .ios-tip { display: none; }
#menu.nm.lay-short .nm-top { top: 6px; right: 8px; gap: 6px; }
#menu.nm.lay-short .nm-discord { height: 34px; padding: 0 12px 0 11px; font-size: 11px; letter-spacing: 0.1em; gap: 6px; }
#menu.nm.lay-short .nm-discord svg { width: 17px; height: 17px; }
#menu.nm.lay-short .nm-top #snd-btn { height: 34px; padding: 0 12px; font-size: 12px; }
#menu.nm.lay-short .nm-foot { padding: 0 10px 5px 0; }
#menu.nm.lay-short .nm-foot .credits { font-size: 11px; line-height: 1.35; max-width: calc(100vw / var(--ui) - 330px); margin-left: auto; }
#menu.nm.lay-short.modes .nm-foot { opacity: 0; }
#menu.nm.lay-short .nm-cap { left: 320px; right: 300px; bottom: 34px; max-width: 440px; }
#menu.nm.lay-short .nm-cap-map { font-size: 11px; padding: 2px 7px; margin-bottom: 5px; letter-spacing: 0.24em; }
#menu.nm.lay-short .nm-cap-t { font-size: 24px; }
#menu.nm.lay-short .nm-cap-t::after { width: 50px; height: 3px; margin: 7px 0 6px; }
#menu.nm.lay-short .nm-cap-s { font-size: 12px; line-height: 1.35; }
#menu.nm.lay-short .nm-cap-dots { display: none; }
#menu.nm.lay-short .nm-cap-w { margin-top: 7px; gap: 2px 14px; }
#menu.nm.lay-short .nm-cap-w em { font-size: 11px; letter-spacing: 0.24em; }
#menu.nm.lay-short .nm-cap-w span { font-size: 12px; gap: 5px; }
#menu.nm.lay-short .nm-cap-w i { font-size: 13px; }
#menu.nm.lay-short .nm-cap-w b { font-size: 17px; }
#menu.nm.lay-short .nm-modes { left: 296px; right: 10px; padding: 46px 0 6px; gap: 6px; justify-content: flex-start; }
#menu.nm.lay-short .nm-modes-h { font-size: 11px; letter-spacing: 0.24em; }
#menu.nm.lay-short .nm-cards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; height: calc(100vh / var(--ui) - 128px); }
#menu.nm.lay-short .nm-mode { padding: 0 12px 10px 18px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
#menu.nm.lay-short .nm-mode .m-k { top: 8px; left: 18px; font-size: 11px; }
#menu.nm.lay-short .nm-mode .m-tag { top: 7px; right: 16px; padding: 1px 6px; font-size: 10.5px; letter-spacing: 0.14em; }
#menu.nm.lay-short .nm-mode .m-t { font-size: 18px; margin: 0 0 3px; }
#menu.nm.lay-short .nm-mode .m-s { font-size: 11px; line-height: 1.3; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#menu.nm.lay-short .nm-mode .m-go { display: none; }
#menu.nm.lay-short .nm-mode:hover:not(:disabled), #menu.nm.lay-short .nm-cards:not(:hover) .nm-mode.pad-focus, #menu.nm.lay-short .nm-cards:not(:hover) .nm-mode:focus { translate: 0 -3px; }
#menu.nm.lay-short .nm-spec { margin-left: 8px; font-size: 11.5px; }
/* ---- TINY: the smallest phones on their side - the plate folds into the pilot button, the caption takes its place */
#menu.nm.lay-tiny .nm-pilot { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border: 0; cursor: pointer; color: #fff; background: rgba(6,8,13,0.85);
  font: 700 12px var(--font); letter-spacing: 0.08em; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
#menu.nm.lay-tiny .nm-pilot b { padding: 1px 6px; background: #e9eef8; color: #0a0b10; font-size: 12px; letter-spacing: 0; }
#menu.nm.lay-tiny .nm-pilot span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu.nm.lay-tiny .nm-pilot i { font-style: normal; transition: transform 0.2s; }
#menu.nm.lay-tiny.pilot-open .nm-pilot { background: #e9eef8; color: #0a0b10; }
#menu.nm.lay-tiny.pilot-open .nm-pilot b { background: #0a0b10; color: #fff; }
#menu.nm.lay-tiny.pilot-open .nm-pilot i { transform: rotate(180deg); }
#menu.nm.lay-tiny .nm-side { display: none; }
#menu.nm.lay-tiny.pilot-open .nm-side, #menu.nm.lay-tiny.partying .nm-side { display: flex; z-index: 5; top: 0; bottom: 0; max-height: none; width: min(300px, 50vw); padding: 50px 14px 10px 16px; overflow-y: auto;
  background: linear-gradient(270deg, rgba(4,5,9,0.97), rgba(6,7,12,0.93)); box-shadow: -24px 0 40px rgba(0,0,0,0.55); }
#menu.nm.lay-tiny .nm-cap { left: 316px; right: 14px; }
#menu.nm.lay-tiny.pilot-open .nm-cap, #menu.nm.lay-tiny.partying .nm-cap { opacity: 0; }
#menu.nm.lay-tiny .nm-foot .credits { max-width: calc(100vw / var(--ui) - 330px); }

/* ---- STACK: held upright (a phone, a tablet) - one column that scrolls; the film stays behind it */
#menu.nm.lay-stack { zoom: var(--mz); display: flex; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
#menu.nm.lay-stack > .nm-rail, #menu.nm.lay-stack > .nm-side, #menu.nm.lay-stack > .nm-foot, #menu.nm.lay-stack .nm-top, #menu.nm.lay-stack .nm-cap, #menu.nm.lay-stack > .nm-modes { zoom: 1; }
#menu.nm.lay-stack > .nm-reel, #menu.nm.lay-stack > .nm-fx { position: fixed; }
#menu.nm.lay-stack .nm-vig { background: linear-gradient(180deg, rgba(3,4,8,0.78) 0%, rgba(3,4,8,0.38) 34%, rgba(3,4,8,0.62) 62%, rgba(3,4,8,0.92) 100%); }
#menu.nm.lay-stack > .nm-rail { display: contents; }
#menu.nm.lay-stack > .nm-rail::after { display: none; }
#menu.nm.lay-stack > :not(.nm-reel):not(.nm-fx):not(.nm-modes), #menu.nm.lay-stack > .nm-rail > * { position: relative; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; flex: none; }
#menu.nm.lay-stack .nm-top { order: 0; top: auto; right: auto; justify-content: flex-end; z-index: 6; }
#menu.nm.lay-stack .nm-discord { height: 38px; font-size: 12px; }
#menu.nm.lay-stack .nm-top #snd-btn { height: 38px; padding: 0 14px; font-size: 13px; }
#menu.nm.lay-stack .nm-brand { order: 1; margin-top: 4px; }
#menu.nm.lay-stack .nm-logo { font-size: 42px; margin: 4px 0 4px; }
#menu.nm.lay-stack .tag { font-size: 13.5px; max-width: none; color: #b3bdd0; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
#menu.nm.lay-stack .nm-nav { order: 2; margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
#menu.nm.lay-stack .nm-item { display: flex; align-items: center; min-height: 48px; padding: 0 8px 0 30px; font-size: 14.5px; letter-spacing: 0.06em; line-height: 1.1;
  background-color: rgba(6,8,13,0.74); box-shadow: inset 2px 0 0 rgba(255,46,77,0.7); }
#menu.nm.lay-stack .nm-item::before { left: 9px; top: 50%; transform: translateY(-50%); font-size: 11.5px; }
#menu.nm.lay-stack .nm-item[data-sub]::after { display: none; }
#menu.nm.lay-stack .nm-main { grid-column: 1 / -1; min-height: 66px; padding: 0 26px 0 36px; margin: 0; font-size: 28px; flex-direction: column; align-items: flex-start; justify-content: center; box-shadow: none; background-color: transparent; }
#menu.nm.lay-stack .nm-main[data-sub]::after { display: block; margin-top: 3px; font-size: 13px; }
#menu.nm.lay-stack .nm-sep { display: none; }
#menu.nm.lay-stack .nm-item:hover:not(:disabled), #menu.nm.lay-stack .nm-item:focus-visible, #menu.nm.lay-stack .nm-item.pad-focus { transform: none; }
#menu.nm.lay-stack.modes #nm-play { translate: none; }
#menu.nm.lay-stack #boot { order: 3; margin-top: 10px; }
#menu.nm.lay-stack > .nm-cap { order: 4; left: auto; right: auto; bottom: auto; margin-top: 26px; margin-bottom: 8px; pointer-events: none; }
#menu.nm.lay-stack .nm-cap-t { font-size: 32px; }
#menu.nm.lay-stack .nm-cap-t::after { margin: 10px 0 9px; }
#menu.nm.lay-stack .nm-cap-s { font-size: 14px; }
#menu.nm.lay-stack .nm-cap-w b { font-size: 21px; }
#menu.nm.lay-stack > .nm-side { order: 5; top: auto; right: auto; max-height: none; overflow: visible; margin-top: 14px; padding: 14px 14px 16px; gap: 5px;
  background: rgba(4,5,9,0.84); box-shadow: inset 0 2px 0 rgba(255,46,77,0.75); }
#menu.nm.lay-stack.modes .nm-side { transform: none; }
#menu.nm.lay-stack #name, #menu.nm.lay-stack .country-row select { min-height: 44px; }
#menu.nm.lay-stack .swatches { gap: 14px; padding: 10px 6px 6px; }
#menu.nm.lay-stack .swatches button { width: 28px; height: 28px; }
#menu.nm.lay-stack #mobile-note { font-size: 12.5px; }
#menu.nm.lay-stack .nm-rail .platforms { order: 6; margin-top: 18px; padding: 14px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
#menu.nm.lay-stack .nm-rail .platforms .pf b { font-size: 12px; }
#menu.nm.lay-stack > .nm-foot { order: 7; right: auto; bottom: auto; padding: 16px 0 6px; pointer-events: auto; }
#menu.nm.lay-stack .nm-foot .credits { text-align: center; font-size: 12.5px; }
/* (upright: SELECT MODE is a full screen of its own - the four cards one under another, BACK at the top) */
#menu.nm.lay-stack > .nm-modes { position: fixed; inset: 0; left: 0; right: 0; height: auto; z-index: 8; justify-content: flex-start; gap: 10px; overflow-y: auto;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: rgba(3,4,8,0.94); }
#menu.nm.lay-stack .nm-modes-h, #menu.nm.lay-stack .nm-cards, #menu.nm.lay-stack .nm-spec { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
#menu.nm.lay-stack .nm-modes-h { position: sticky; top: 0; z-index: 3; min-height: 46px; background: rgba(3,4,8,0.94); }
#menu.nm.lay-stack .nm-modes-x { font-size: 14px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.18); color: #dde3ef; }
#menu.nm.lay-stack .nm-cards { flex-direction: column; height: auto; gap: 10px; }
#menu.nm.lay-stack .nm-mode { flex: none; min-height: 122px; padding: 0 20px 14px 24px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#menu.nm.lay-stack .nm-mode .m-k { top: 12px; left: 26px; }
#menu.nm.lay-stack .nm-mode .m-tag { top: 10px; right: 26px; }
#menu.nm.lay-stack .nm-mode .m-t { font-size: 25px; margin-bottom: 5px; }
#menu.nm.lay-stack .nm-mode .m-s { font-size: 13px; max-width: none; padding-right: 26px; }
#menu.nm.lay-stack .nm-mode .m-go { right: 24px; bottom: 16px; }
#menu.nm.lay-stack .nm-mode:hover:not(:disabled), #menu.nm.lay-stack .nm-cards:not(:hover) .nm-mode.pad-focus, #menu.nm.lay-stack .nm-cards:not(:hover) .nm-mode:focus { translate: none; }
#menu.nm.lay-stack .nm-spec { align-self: center; margin: 4px auto 0; text-align: center; }
/* (the credits stay right of the banner; SELECT MODE's header under the top bar; nothing tiny to tap on a touch screen) */
#menu.nm .nm-foot .credits { max-width: calc(100vw / var(--ui) - 480px); margin-left: auto; }
#menu.nm.lay-mid .nm-foot .credits { max-width: calc(100vw / var(--ui) - 420px); }
#menu.nm.lay-mid .nm-modes { padding-top: 70px; padding-bottom: 40px; }
#menu.nm.lay-mid .nm-cards { height: min(600px, calc(100vh / var(--ui) - 200px)); }
#menu.nm.lay-mid.modes .nm-foot, #menu.nm.lay-short.modes .nm-foot { visibility: hidden; }
#menu.nm .nm-modes-x kbd { font-size: 12px; }
body.touch #menu.nm .credits a { display: inline-block; padding: 9px 2px; margin: -9px 0; }
#menu.nm.lay-short .swatches { gap: 6px; }
#menu.nm.lay-short .swatches button { width: 26px; height: 26px; }
#menu.nm.lay-stack .nm-logo { margin-top: 8px; }

/* =====================================================================================================================
   THE WINDOWS ON EVERY SCREEN (2026-10-01): leaderboard, friends, profile, settings, how to play, offline, the party.
   Labels never under ~10 px on a laptop (the windows are drawn at 85 % there), everything to tap ~38 px+ on a touch
   screen, nothing squeezed on a phone.
   ===================================================================================================================== */
/* ---- the credits and the plate: fixes for the menu's layouts */
#menu.nm.lay-stack .nm-foot .credits { max-width: none; margin: 0 auto; }
body.touch #menu.nm .nm-foot { padding-bottom: 12px; }
#menu.nm.lay-short .nm-cap { bottom: 60px; }
#menu.nm.lay-tiny.pilot-open .nm-foot, #menu.nm.lay-tiny.partying .nm-foot { visibility: hidden; }
#menu.nm .nm-side > * { flex-shrink: 0; }
body.touch #menu.nm .swatches button { width: 28px; height: 28px; }
body.touch #menu.nm.lay-short .swatches { gap: 5px; }
body.touch #menu.nm.lay-short .swatches button { width: 27px; height: 27px; }
#party-leave { font-size: 12px; padding: 4px 10px; }
body.touch #party-leave { min-height: 34px; padding: 0 12px; }
body.touch #party-copy, body.touch #party-url { min-height: 38px; }

/* ---- close buttons: a thumb's size on a touch screen */
body.touch .st-x { width: 42px; height: 42px; }

/* ---- the leaderboard: readable headers and world numbers; on a phone the number columns give the names room */
.nm-board thead th { font-size: 12px; }
#world-stats { font-size: 12px; }
#world-stats > b { font-size: 11px; }
#world-stats i { font-size: 13px; }
@media (max-width: 560px) {
  .nm-board table { font-size: 13.5px !important; }
  .nm-board th:nth-child(1), .nm-board td:nth-child(1) { width: 28px !important; }
  .nm-board th:nth-child(3), .nm-board td:nth-child(3), .nm-board th:nth-child(4), .nm-board td:nth-child(4), .nm-board th:nth-child(5), .nm-board td:nth-child(5) { width: 52px !important; }
  .nm-board thead th { font-size: 11px; letter-spacing: 0.08em; }
  #world-stats span { padding: 2px 6px; }
}
body.touch .nm-board .bc-tabs button { min-height: 40px; }

/* ---- friends: bigger buttons and labels; on a phone one column (the list, then your code and the add box) and each
   friend's buttons on a row of their own */
.fr-modal-card .fr-btn { font-size: 12.5px; }
.fr-modal-card .fr-lbl { font-size: 12px; }
.fr-modal-card #fr-panel h4 { font-size: 12.5px; }
body.touch .fr-modal-card .fr-btn { min-height: 38px; min-width: 40px; padding-top: 0; padding-bottom: 0; }
body.touch .fr-modal-card .fr-add input { min-height: 42px; }
@media (max-width: 700px) {
  .fr-modal-card { max-height: none !important; }
  .fr-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fr-main, .fr-side { max-height: none !important; min-height: 0; overflow: visible !important; padding-right: 0; }
  .fr-modal-card .fr-how { display: none; }
}
@media (max-width: 560px) {
  .fr-modal-card .fr-list li { flex-wrap: wrap; row-gap: 8px; }
  .fr-modal-card .fr-list li .fr-n { flex: 1 1 0; min-width: 0; }
  .fr-modal-card .fr-list li .fr-b { flex-basis: 100%; justify-content: flex-end; }
  .fr-modal-card .st-head h2 { flex-wrap: wrap; row-gap: 2px; }
}

/* ---- profile (the locker): readable tabs, medals and the code box; touch-size controls */
.lk-tabs button { font-size: 12px; }
.lk-item small { font-size: 11.5px; }
.lk-item em { font-size: 12px; }
.lk-xp small { font-size: 12px; }
body.touch .lk-tabs button { min-height: 40px; }
body.touch #lk-code-box button, body.touch #lk-code-box input, body.touch #lk-code-box code { min-height: 40px; }
body.touch #lk-code-box code { display: flex; align-items: center; }

/* ---- settings: touch-size number boxes and the small buttons */
body.touch .sens-exact input { min-height: 40px; }
body.touch .st-mini { min-height: 36px; padding: 0 12px; }
.xh-box .xh-def { font-size: 12px; }

/* ---- how to play: a short screen (a phone on its side) gets the tab bar across the top too; readable tags */
.hx-map .tag { font-size: 12px; }
@media (max-height: 500px) {
  .menu-card.howto.hx { padding: 12px 14px 10px; }
  .hx-main { grid-template-columns: 1fr; gap: 8px; }
  .hx-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .hx-nav::-webkit-scrollbar { display: none; }
  .hx-nav button { flex-shrink: 0; padding: 8px 12px; font-size: 13px; }
  .hx-nav button.on { box-shadow: inset 0 -3px 0 var(--cyan); }
  .hx-nav .hx-ok { display: none; }
}
body.touch .hx-nav button { min-height: 40px; }

/* ---- IN THE GAME on every screen (2026-10-01): the pause menu and the windows always above the "turn your phone"
   banner (a phone held upright can still resume or leave); typing in the chat on a touch screen - the input on top, the
   thumb buttons out of the way; the scoreboard above the thumb buttons; the clock clear of the ammo box on small phones */
body.touch.playing #pause { z-index: 61; }
body.touch.playing .modal { z-index: 62; }
body.touch:has(#chat-box.open) #touch-layer { visibility: hidden; }
#hud > #chat-box.open { z-index: 5; }
body.touch #hud > #chat-box.open { left: 50%; top: 8px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); }
body.touch:has(#scoreboard.on) #touch-layer > :not(.tboard) { opacity: 0.1; pointer-events: none; }
@media (max-width: 1000px) and (orientation: landscape) { body.touch #top-bar { left: calc(50% - 86px + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); } }
@media (max-width: 600px) and (orientation: landscape) { body.touch #ammo-box { transform: scale(0.68); transform-origin: top right; } body.touch #top-bar { left: calc(50% - 66px + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); transform: translateX(-50%) scale(0.8); transform-origin: 50% 0; } }
body.touch .slot { font-size: 9.5px; }
.ix-title { line-height: 1.25; }
.ix-board th { font-size: 12px; }
.ix-card .badge { font-size: 11px; }
.ix-cards.many .ix-card .badge { font-size: 10px; }
.ix-cards.many .ix-card .k { font-size: 12px; }
.ix-board td.lk, .ix-board td .pg-ok, .ix-board td .pg-mid, .ix-board td .pg-bad { font-size: 12px; }
.ix-board tr.bots-sep td { font-size: 11.5px !important; }
.ix-cards.many .ix-card .badge { font-size: 11.5px; }
#chat-box { bottom: 128px; }
#chat-log { bottom: 170px; }
/* (phones on their side up to 1000 px: the clock sits between the health and the ammo boxes, so the kill notes go just
   under it - each never wider than the gap; a long leader's name is cut, never pushed over the ammo box) */
@media (max-width: 1000px) and (orientation: landscape) {
  body.touch #top-bar { max-width: calc(100vw - 486px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  body.touch #score-line { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
  body.touch #notes { top: 92px; left: calc(158px + env(safe-area-inset-left)); max-width: calc((50vw - 186px) * 1.25); }   /* (under the clock, ending left of the scoreboard button) */
}
@media (max-width: 600px) and (orientation: landscape) {
  body.touch #top-bar { max-width: calc((100vw - 452px - env(safe-area-inset-left) - env(safe-area-inset-right)) * 1.25); }
  body.touch #notes { top: 74px; }
}
/* (last round of checks: a close button is never squeezed by its title; the world numbers' heading readable on a laptop;
   a phone on its side in a party: the plate leaves room for the credits, which step aside while the party is open) */
.st-x { flex-shrink: 0; }
#world-stats > b { font-size: 12px; }
#menu.nm .nm-logo { margin-bottom: 10px; }
#menu.nm.lay-short .nm-side { max-height: calc(100vh / var(--ui) - 60px); }
#menu.nm.lay-short.partying .nm-foot { visibility: hidden; }
#menu.nm.lay-short.partying .nm-side { max-height: calc(100vh / var(--ui) - 8px); }
/* (phones' browsers: 100vh is taller than what's visible while the address bar shows - the dynamic height instead) */
@supports (height: 100dvh) {
  #menu.nm .nm-rail, #menu.nm .nm-modes { height: calc(100dvh / var(--ui)); }
  #menu.nm .nm-side { max-height: calc(100dvh / var(--ui) - 96px); }
  #menu.nm.lay-short .nm-side { max-height: calc(100dvh / var(--ui) - 60px); }
  #menu.nm.lay-short.partying .nm-side { max-height: calc(100dvh / var(--ui) - 8px); }
  #menu.nm.lay-short .nm-cards { height: calc(100dvh / var(--ui) - 128px); }
  #menu.nm.lay-mid .nm-cards { height: min(600px, calc(100dvh / var(--ui) - 200px)); }
  #menu.nm.lay-tiny.pilot-open .nm-side, #menu.nm.lay-tiny.partying .nm-side { max-height: none; }
  #menu.nm.lay-stack > .nm-side { max-height: none; }
  #menu.nm.lay-stack > .nm-modes { height: auto; }
}
#round-mvp .mvp small, #round-mvp small { font-size: 12px; }
/* (the kicker over the logo stays on one line in the slimmer banners; the eight colours on one row on a tablet) */
#menu.nm .nm-kicker { white-space: nowrap; }
#menu.nm.lay-mid .nm-kicker { font-size: 11.5px; letter-spacing: 0.18em; }
#menu.nm.lay-short .nm-kicker { letter-spacing: 0.14em; }
#menu.nm.lay-mid .swatches { gap: 9px; }
/* (the mode cards' titles size to their card - "COMPETITIVE 5V5" fits a narrow card on a 1366 laptop or tablet) */
#menu.nm .nm-mode { container-type: inline-size; }
#menu.nm .nm-mode .m-t { font-size: clamp(15px, calc(14cqi - 9px), 34px); }
#menu.nm.lay-mid .nm-mode .m-t { font-size: clamp(15px, calc(14cqi - 9px), 28px); }
#menu.nm.lay-short .nm-mode .m-t { font-size: clamp(13px, calc(14cqi - 6px), 18px); }
#menu.nm.lay-stack .nm-mode .m-t { font-size: 25px; }
#round-mvp .award small { font-size: 11.5px; }
#round-mvp .award span { font-size: 12px; }
body:has(#scoreboard.on) #notes { visibility: hidden; }
/* (the narrowest phones on their side, ~568 px: Discord as its icon only - the top row then stays clear of the logo) */
@media (max-width: 619px) and (orientation: landscape) { #menu.nm.lay-tiny .nm-discord span { display: none; } #menu.nm.lay-tiny .nm-discord { padding: 0 12px; } }
/* (the loading box at the foot of the banner: while it shows - a slow load, a failed one with its Retry - nothing in the
   banner is ever squeezed: the menu keeps its full height and the banner scrolls if it must; on a short screen the PLAY ON
   icons step aside until the game has loaded, and the message gets the box's full width, Retry under it) */
#menu.nm .nm-rail > * { flex-shrink: 0; }
#menu.nm .nm-rail { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
#menu.nm .nm-rail::-webkit-scrollbar { display: none; }
#menu.nm .nm-nav { overflow: visible; }
#menu.nm.lay-short .nm-rail:has(#boot:not(.done)) .platforms { display: none; }
#menu.nm.lay-short #boot .boot-top, #menu.nm.lay-mid #boot .boot-top { flex-wrap: wrap; row-gap: 6px; }
#menu.nm.lay-short #boot #boot-text, #menu.nm.lay-mid #boot #boot-text { flex: 1 1 100%; }
#menu.nm.lay-short #boot #boot-retry, #menu.nm.lay-mid #boot #boot-retry { margin: 0 auto 0 0; }
#menu.nm.lay-stack > .nm-rail { overflow: visible; }
body.touch #boot-retry { min-height: 40px; padding: 0 16px; }
#menu.nm.lay-tiny .nm-rail:has(#boot:not(.done)) .nm-kicker { display: none; }
#menu.nm.lay-tiny .nm-rail:has(#boot:not(.done)) .nm-item:not(.nm-main) { min-height: 34px; }
#menu.nm.lay-tiny .nm-rail:has(#boot:not(.done)) .nm-logo { font-size: 28px; }
#menu.nm.lay-tiny .nm-rail:has(#boot:not(.done)) .nm-main { min-height: 42px; }
#menu.nm.lay-tiny .nm-rail #boot { padding: 4px 10px 6px; }
#menu.nm.lay-tiny .nm-rail #boot .boot-top { margin-bottom: 4px; }
/* (the break between rounds works held upright too - its own one-column layout: the "turn your phone" banner waits) */
body.touch.playing.re-on #rotate-hint { display: none; }

/* =====================================================================================================================
   ONLY ONLINE (2026-10-02, the user: "I want BIONEURAL to be only online"): the hidden mode cards and what belongs to them
   (js/main.js ONLY_ONLINE; PLAY goes straight into PLAY ONLINE). 2026-10-03: 5v5 is back as PLAY 5v5 in the main menu
   (#nm-comp presses the game's own #play-comp) - its leaderboard tab, HOW TO PLAY tab and DUST card show again
   ===================================================================================================================== */
body.only-online #play-comp, body.only-online #party-make, body.only-online #play-off, body.only-online #party-box { display: none !important; }

/* THE QUEUE: every seat on the game server taken - the place in line, the pilots playing, the time waited; the player
   drops in by themselves (js/main.js playNet.onQueue) */
#queue { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 35%, rgba(10, 30, 60, 0.78), rgba(3, 5, 12, 0.95)); backdrop-filter: blur(6px); }
#queue.hidden { display: none; }
.q-card { position: relative; width: min(500px, 100%); padding: 28px 30px 24px; border-radius: 22px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 28, 52, 0.94), rgba(9, 14, 28, 0.96)); border: 1px solid rgba(64, 224, 255, 0.28);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(64, 224, 255, 0.06), 0 0 70px rgba(64, 224, 255, 0.1);
  animation: qIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.q-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: qScan 2.6s linear infinite; }
@keyframes qIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes qScan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.q-radar { position: relative; width: 84px; height: 84px; margin: 0 auto 12px; }
.q-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; animation: qPulse 2.4s ease-out infinite; }
.q-radar i:nth-child(2) { animation-delay: 0.8s; }
.q-radar i:nth-child(3) { animation-delay: 1.6s; }
.q-radar b { position: absolute; inset: 31px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
@keyframes qPulse { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
.q-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--font); letter-spacing: 0.26em; color: var(--cyan); }
.q-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; animation: qBlink 1.2s steps(2) infinite; }
@keyframes qBlink { 50% { opacity: 0.25; } }
.q-title { margin: 8px 0; font: 700 38px/1.05 var(--font); letter-spacing: 0.06em; color: #fff; }
.q-sub { margin: 0 auto 18px; max-width: 390px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.q-pos { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 12px; padding: 14px 12px 13px; border-radius: 16px;
  background: rgba(64, 224, 255, 0.06); border: 1px solid rgba(64, 224, 255, 0.2); }
.q-pos small, .q-stats small { font: 700 11px var(--font); letter-spacing: 0.22em; color: var(--muted); }
.q-pos b { font: 700 62px/1 var(--font); color: #fff; text-shadow: 0 0 30px rgba(64, 224, 255, 0.45); font-variant-numeric: tabular-nums; }
.q-hash { margin-right: 2px; color: var(--cyan); font-size: 0.55em; vertical-align: 0.55em; }
.q-pos em { font: 600 14px var(--font); font-style: normal; letter-spacing: 0.03em; color: var(--cyan); }
.q-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.q-stats div { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.q-stats b { font: 700 20px var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.q-leave { min-width: 200px; }
body.touch .q-leave { min-height: 44px; }
/* low screens (a phone on its side): no radar, everything a size smaller - all of it on the screen */
@media (max-height: 560px) {
  .q-card { padding: 16px 22px 14px; }
  .q-radar { display: none; }
  .q-title { font-size: 28px; margin: 4px 0 6px; }
  .q-sub { font-size: 13.5px; margin-bottom: 10px; }
  .q-pos { padding: 8px 10px; margin-bottom: 8px; flex-direction: row; justify-content: center; gap: 14px; }
  .q-pos small, .q-pos em { white-space: nowrap; }
  .q-pos b { font-size: 42px; }
  .q-stats { margin-bottom: 10px; }
  .q-stats div { padding: 6px 8px; }
  .q-stats b { font-size: 17px; }
}
@media (max-height: 370px) { .q-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .q-card, .q-card::before, .q-radar i, .q-kicker i { animation: none !important; } .q-radar i { opacity: 0.4; } }

/* =====================================================================================================================
   THE LOADING SCREEN (the user, 2026-10-02: "when someone enters the server to play or spectate, and when the map is
   loading, he must know the MAP is loading - otherwise people will think the game is broken"): CONNECTING, then the map -
   its picture, its name, what is happening (building it, downloading its model), a bar. Over the game and its HUD, under
   the windows (settings) - and over the "click to play" card, which waits until the map is there. (main.js: loadSet)
   ===================================================================================================================== */
#loading { z-index: 25; background: #05060a; overflow: hidden; }
body.touch.playing #loading { z-index: 62; }
#ld-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#ld-img.on { opacity: 0.4; }
#loading::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5,6,10,0.94) 0%, rgba(5,6,10,0.5) 50%, rgba(5,6,10,0.72) 100%); }
#loading .ld-box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, 100%); text-align: center; zoom: var(--ui); }
#loading .spinner { margin-bottom: 6px; }
#ld-kicker { font: 700 12px var(--font); letter-spacing: 0.34em; color: var(--nm-red); }
#ld-map { font: 700 48px var(--font); letter-spacing: 0.08em; line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
#ld-map:empty { display: none; }
#loading p { margin: 0; }
#ld-bar { width: min(360px, 80%); height: 4px; margin-top: 6px; background: rgba(255,255,255,0.1); overflow: hidden; }
#ld-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--nm-red), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.35s ease-out; }
#loading.connecting #ld-bar { visibility: hidden; }
@media (max-height: 500px) { #ld-map { font-size: 34px; } #loading .spinner { width: 34px; height: 34px; margin-bottom: 2px; } }

/* =====================================================================================================================
   OLD iPADS (html.calm - index.html: iPadOS 17 and older, e.g. the user's iPad Pro 2nd gen on iOS 17.6.1): the main
   menu without its moving effects - the picture's colour filter and slow zoom, the scan lines, the logo glitch, the
   pulsing buttons. Measured on that iPad (2026-10-02, the TEST diagnostic, the same rules): with them, opening HOW TO PLAY
   or SETTINGS froze the picture for up to a minute in every run; without them 55-60 fps, not one freeze. The pictures
   still change with their crossfade. Every other device: untouched.
   ===================================================================================================================== */
html.calm #menu.nm .nm-reel video, html.calm #menu.nm .nm-reel .nm-r-still { filter: none !important; }
html.calm #menu.nm .nm-reel .nm-r-still.kb { animation: none !important; }
html.calm #menu.nm .nm-scan { display: none !important; }
html.calm #menu.nm .nm-logo { filter: none !important; }
html.calm #menu.nm .nm-logo::before, html.calm #menu.nm .nm-logo::after { animation: none !important; opacity: 0 !important; }
html.calm #menu.nm .nm-main, html.calm #menu.nm .nm-badge, html.calm #snd-btn, html.calm .online i, html.calm #boot-bar, html.calm .fr-dot { animation: none !important; }
#world-stats u { flex-basis: 100%; height: 0; }   /* (the pilots' chips: a row of their own under the world's numbers) */

/* =====================================================================================================================
   PHONES ON THEIR SIDE, SHORT SCREENS (2026-10-02 - a player's iPhone 15 in Safari, whose bars leave 286-343 px of
   height; measured on 21 phone sizes): the thumb buttons hang from the bottom and the kill feed from the top, so on a
   short screen they met. The feed shows as many of its newest lines as fit above DASH; under 342 px the right-hand
   buttons are a size smaller; under 306 px the left column closes up so the nuke button stays on the screen.
   (the score line a size smaller where the gap between the boxes is tight: the leader and the bounty stay readable)
   ===================================================================================================================== */
@media (max-width: 900px) and (orientation: landscape) { body.touch #score-line { font-size: 14px; padding: 3px 10px 4px; } body.touch #score-line em { font-size: 12px; margin-left: 6px; } }
@media (orientation: landscape) and (max-height: 477px) { body.touch:not(.lefty) #killfeed > :nth-child(n+6) { display: none; } }
@media (orientation: landscape) and (max-height: 450px) { body.touch:not(.lefty) #killfeed > :nth-child(n+5) { display: none; } }
@media (orientation: landscape) and (max-height: 423px) { body.touch:not(.lefty) #killfeed > :nth-child(n+4) { display: none; } }
@media (orientation: landscape) and (max-height: 396px) { body.touch:not(.lefty) #killfeed > :nth-child(n+3) { display: none; } }
@media (orientation: landscape) and (max-height: 369px) { body.touch:not(.lefty) #killfeed > :nth-child(n+2) { display: none; } }
@media (orientation: landscape) and (max-height: 341px) { #touch-layer :is(.tfire, .tjump, .tdash, .treload, .tswitch, .tstrike, .tscope, .tuse, .tview) { zoom: 0.72; } }
/* (the event bars - TSUNAMI's warning, DUNE's airships - are laid out by their own code at 'top: 92px', which on a phone is the ammo box's
   bottom edge: on phones they start just under it. If a browser ever writes that style another way, this rule simply doesn't take.) */
body.touch #hud > div[style*="top: 92px"] { top: 102px !important; }
body.touch #hud > div[style*="78vw"] { width: min(330px, 46vw) !important; }   /* (TSUNAMI's: between the health box and the kill feed on every phone) */
@media (orientation: landscape) and (max-height: 305px) { .tchat { top: 118px; } .tvoice { top: 166px; } .tnuke, body.comp .tbuy { top: 220px; } }

/* ---- SERVERS: the server list (2026-10-03) - the leaderboard window's frame, one row per server */
.sv-card { width: min(640px, 100%); }
.sv-sub { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sv-sub b { color: var(--text); }
.sv-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; max-height: min(640px, 74vh); padding-right: 2px; }
.sv-h { margin: 8px 0 2px; font: 800 11px var(--font); letter-spacing: 0.18em; color: #7de8ff; text-transform: uppercase; }
.sv-h:first-child { margin-top: 0; }
.sv-h small { font: 500 11.5px Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 8px; }
.sv-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.sv-row b { display: block; font: 800 14px var(--font); letter-spacing: 0.06em; color: #fff; }
.sv-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sv-n { text-align: right; white-space: nowrap; }
.sv-n b { font-size: 16px; }
.sv-n b i { font-style: normal; font-weight: 600; color: var(--muted); font-size: 13px; }
.sv-go { display: flex; gap: 6px; }
.sv-go button { appearance: none; cursor: pointer; border: 1px solid rgba(64,224,255,0.55); background: rgba(64,224,255,0.14); color: #fff; font: 800 12px var(--font); letter-spacing: 0.1em; padding: 9px 12px; min-width: 64px; }
.sv-go button:hover:not(:disabled), .sv-go button:focus-visible { background: rgba(64,224,255,0.3); outline: none; }
.sv-go button[data-team="T"] { border-color: rgba(255,179,71,0.65); background: rgba(255,179,71,0.14); }
.sv-go button[data-team="T"]:hover:not(:disabled) { background: rgba(255,179,71,0.3); }
.sv-go button[data-team="CT"] { border-color: rgba(111,183,255,0.65); background: rgba(111,183,255,0.14); }
.sv-go button[data-team="CT"]:hover:not(:disabled) { background: rgba(111,183,255,0.3); }
.sv-go button:disabled { opacity: 0.35; cursor: default; }
.sv-row.off { opacity: 0.5; padding: 4px 12px; }
.sv-row.off small { display: none; }
.sv-row.off b { font-size: 12.5px; }
.sv-row.off .sv-go button { padding: 4px 12px; font-size: 10.5px; }
.sv-row { padding: 7px 12px; }
.sv-empty { padding: 18px 8px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .sv-row { grid-template-columns: 1fr auto; } .sv-go { grid-column: 1 / -1; } .sv-go button { flex: 1; } }
body.touch .sv-go button { min-height: 40px; }

/* ---- every window's scrollbar: thin and in the game's colours (never the browser's default grey bar) */
.menu-card, .menu-card * { scrollbar-width: thin; scrollbar-color: rgba(64,224,255,0.45) transparent; }
.menu-card ::-webkit-scrollbar, .menu-card::-webkit-scrollbar { width: 6px; height: 6px; }
.menu-card ::-webkit-scrollbar-track, .menu-card::-webkit-scrollbar-track { background: transparent; }
.menu-card ::-webkit-scrollbar-thumb, .menu-card::-webkit-scrollbar-thumb { background: rgba(64,224,255,0.4); border-radius: 3px; }
.menu-card ::-webkit-scrollbar-thumb:hover { background: rgba(64,224,255,0.65); }

/* ---- CLANS (2026-10-03): the clan window, the emblem maker, the tag on the scoreboard */
.menu-card.cl-card { width: min(900px, 100%) !important; }
.cl-body { overflow-y: auto; min-height: 0; max-height: min(620px, 78vh); padding-right: 4px; }
.cl-body h3 { margin: 12px 0 6px; font: 800 11px var(--font); letter-spacing: 0.18em; color: #7de8ff; text-transform: uppercase; }
.cl-body h3 small { color: var(--muted); letter-spacing: 0.06em; margin-left: 6px; }
.cl-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.cl-form { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); padding: 12px; }
.cl-form h3 { margin-top: 0; }
.cl-form input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--text); font: 600 14px Inter, sans-serif; padding: 9px 10px; }
.cl-form input:focus { outline: none; border-color: rgba(64,224,255,0.6); }
.cl-row { display: flex; gap: 8px; }
.cl-row .cl-tag { width: 86px; flex: none; text-transform: uppercase; text-align: center; letter-spacing: 0.1em; }
.cl-code { text-transform: uppercase; letter-spacing: 0.25em; text-align: center; font-weight: 800 !important; }
.cl-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.cl-hint b { color: var(--text); letter-spacing: 0.12em; }
.cl-err { margin: 0 0 8px; padding: 8px 10px; font-size: 13px; color: #ffd0d6; background: rgba(255,46,77,0.14); border: 1px solid rgba(255,46,77,0.45); }
.cl-maker { display: flex; gap: 12px; align-items: flex-start; }
.cl-prev { flex: none; padding: 6px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); line-height: 0; }
.cl-picks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-picks label { font: 700 10px var(--font); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.cl-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.cl-pick button { appearance: none; cursor: pointer; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: #cfd6e4; line-height: 0; }
.cl-pick button:hover { border-color: rgba(64,224,255,0.5); }
.cl-pick button.on { border-color: #40e0ff; background: rgba(64,224,255,0.18); color: #fff; }
.cl-pick button i { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); }
.cl-emb { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.cl-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.cl-head b { display: block; font: 800 24px var(--font); letter-spacing: 0.04em; color: #fff; }
.cl-head b i { font-style: normal; color: #7de8ff; font-size: 0.75em; margin-left: 4px; }
.cl-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-style: italic; }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-list li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); font-size: 14px; color: var(--text); }
.cl-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-list li small { color: var(--muted); }
.cl-list li.free { opacity: 0.45; font-style: italic; }
.cl-list li em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cl-list li em.on { color: #7dff9a; }
.cl-tog .btn { flex: 1; }
.cl-inv { display: flex; gap: 8px; margin-bottom: 6px; }
.cl-inv input { flex: 1; min-width: 0; background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--text); font: 600 13px Inter, sans-serif; padding: 8px 10px; }
.cl-foot { margin-top: 14px; justify-content: space-between; }
.cl-leave { color: #ff8a9a !important; }
.ctg { color: #7de8ff; font: 700 0.85em var(--font); margin-right: 4px; letter-spacing: 0.04em; }
@media (max-width: 640px) { .cl-two { grid-template-columns: 1fr; } .cl-maker { flex-direction: column; } .cl-head b { font-size: 19px; } }

/* ---- NEWS: patch notes (the HOW TO PLAY window's frame, a release list on the left) */
.nw-nav button { align-items: flex-start; }
.nw-nav button i { margin-top: 2px; }
.nw-nav button span { display: flex; flex-direction: column; line-height: 1.15; }
.nw-nav button span em { font-style: normal; font-weight: 600; color: var(--text); }
.nw-nav button span small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.nw-nav button.on span em { color: #fff; }
.nw-nav .nw-new { margin-left: auto; align-self: center; font: 800 9.5px var(--font); letter-spacing: 0.12em; color: #0a0b10; background: #7dff9a; border-radius: 6px; padding: 3px 6px; }
.nw-hero { position: relative; aspect-ratio: 21 / 8; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 14px; background: #0d1426; }
.nw-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-hero div { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px 16px; background: linear-gradient(180deg, transparent, rgba(5,8,16,0.92)); }
.nw-hero span, .nw-rel span { display: block; font: 700 11px var(--font); letter-spacing: 0.18em; color: #7de8ff; }
.nw-hero b, .nw-rel b { display: block; font: 800 30px var(--font); letter-spacing: 0.04em; color: #fff; line-height: 1.05; margin: 4px 0 2px; }
.nw-hero small, .nw-rel small { font-size: 12.5px; color: var(--muted); }
.nw-rel { padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.nw-lead { font-size: 15px; color: var(--text); margin: 0 0 14px; line-height: 1.5; }
.nw-t { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 8px; font: 800 12px var(--font); letter-spacing: 0.16em; text-transform: uppercase; }
.nw-t::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.nw-t.new { color: #7dff9a; } .nw-t.imp { color: #7de8ff; } .nw-t.bal { color: #d7a6ff; } .nw-t.fix { color: #ffb45c; }
.nw-body ul { margin: 0; padding-left: 18px; }
.nw-body li { margin: 0 0 8px; line-height: 1.5; font-size: 14px; color: var(--muted); }
.nw-body li b { color: var(--text); }
.nw-body kbd { font: 600 11.5px var(--font); background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--text); }
@media (max-width: 640px) { .nw-hero b, .nw-rel b { font-size: 22px; } .nw-nav button span small { display: none; } .nw-nav .nw-new { display: none; } }
/* THE LOCKER: one window, the same size on every tab - only its middle (the tab's content) changes, and scrolls inside */
#locker > .locker-card { width: min(900px, 100%) !important; height: min(calc((100vh - 32px) / var(--ui)), 860px); max-height: none; overflow: hidden; }
#locker > .locker-card > * { flex: none; }
#locker > .locker-card > #locker-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
#locker-body > .lk-grid { flex: 1 1 0; min-height: 0; max-height: none; align-content: start; }
#locker-body > .lk-show { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
#locker-body .lk-stage { height: auto; min-height: 0; }
#locker-body .lk-show .lk-grid { max-height: none; min-height: 0; }
/* (a phone, upright or on its side: the window is the screen; the tabs one row to swipe along; the tab's content fills the
   screen under them, the profile code is under that - the window scrolls down to it) */
@media (max-width: 620px), (max-height: 520px) {
  #locker > .locker-card { height: calc((100vh - 32px) / var(--ui)); overflow-y: auto; --lk-top: 229px; }
  #locker > .locker-card > #locker-body { flex: none; height: calc((100vh - 32px) / var(--ui) - var(--lk-top)); min-height: 220px; }
  #locker .lk-tabs, #shop .lk-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px 0 0; }
  #locker .lk-tabs::-webkit-scrollbar, #shop .lk-tabs::-webkit-scrollbar { display: none; }
  #locker .lk-tabs button, #shop .lk-tabs button { flex: none; min-width: 0; padding: 8px 12px; white-space: nowrap; }
}
@media (max-width: 620px) { #locker-body > .lk-show { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (max-height: 520px) { #locker > .locker-card { --lk-top: 80px; } }
/* THE SHOP: the same - one window size for its three tabs (and the packs); the stage takes what the window has left */
#shop > .locker-card { height: min(calc((100vh - 32px) / var(--ui)), 860px); max-height: none; overflow: hidden; }
#shop > .locker-card > * { flex: none; }
#shop > .locker-card > #shop-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
#shop-body > .lk-show { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
#shop-body .lk-stage { height: auto; min-height: 0; }
#shop-body .lk-show .lk-grid { max-height: none; min-height: 0; }
#shop-body > .lk-grid { flex: 1 1 0; min-height: 0; max-height: none; align-content: start; }   /* (the tabs earned with levels and medals) */
#shop-body > .gs { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
#shop-body .gs-stage { flex: 1 1 0; height: auto; min-height: 150px; }
#shop-body .gs-row { flex: none; }
@media (max-width: 620px) { #shop-body > .lk-show { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
  #shop .sh-top { flex-wrap: wrap; row-gap: 6px; } #shop .sh-top p { flex-basis: 100%; } #shop .sh-wallet { width: 100%; justify-content: space-between; } }
@media (max-height: 520px) {
  #shop > .locker-card { height: calc((100vh - 32px) / var(--ui)); }
  #shop-body > .gs { display: grid; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  #shop-body .gs-stage, #shop-body .gs-row { height: auto; min-height: 0; }
  #shop-body .gs-row { overflow-y: auto; }
}
/* THE FREE CHARACTER: the line over the shop's characters while the pick is open, the cards' FREE */
.sh-free { flex: none; margin: 0 0 8px; padding: 9px 13px; border-radius: 11px; border: 1px solid rgba(125, 243, 192, 0.45); background: linear-gradient(100deg, rgba(125, 243, 192, 0.16), rgba(125, 243, 192, 0.03)); font-size: 13px; color: #d9fff0; }
.sh-free b { color: #7df3c0; }
.lk-item small.free { color: #7df3c0; font-weight: 800; }
@media (max-height: 520px) { .sh-free { padding: 5px 10px; margin-bottom: 6px; font-size: 12px; } .sh-free span { display: none; } }
/* THE SHOP: the line under the tabs (its server is being asked / did not answer / said no), the buttons while it is asked */
.sh-note { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); font-size: 13px; color: var(--muted); }
.sh-note.bad { border-color: rgba(255, 110, 110, 0.5); background: rgba(255, 90, 90, 0.1); color: #ffd0d0; }
.sh-note .btn { padding: 6px 12px; font-size: 12px; margin: 0; }
#shop.busy [data-buy], #shop.busy [data-free], #shop.busy [data-pack], #shop.busy [data-retry] { opacity: 0.55; pointer-events: none; }
/* PAYMENT: the box to tick before a pack is paid for; the shop's line when it has good news */
.sh-agree { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-size: 13px; line-height: 1.45; color: var(--text); cursor: pointer; }
.sh-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #7df3c0; cursor: pointer; }
.sh-note.good { border-color: rgba(125, 243, 192, 0.5); background: rgba(125, 243, 192, 0.1); color: #d9fff0; }
.sh-agree a, #shop-body .note a, .credits a { color: #40e0ff; }
/* THE SHOP's EVENT (all skins free to TRY): the line over the items, the notice over the greyed-out packs, the 0 credits */
.sh-event { flex: none; padding: 9px 13px; border-radius: 11px; border: 1px solid rgba(255, 211, 77, 0.55); background: linear-gradient(100deg, rgba(255, 211, 77, 0.18), rgba(255, 211, 77, 0.04)); font-size: 13px; color: #fff3c9; }
.sh-event b { color: #ffd34d; letter-spacing: 0.04em; }
.sh-event.big { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin: 6px 0 2px; font-size: 14px; line-height: 1.45; }
.sh-event.big > b { font: 800 17px var(--font); letter-spacing: 0.1em; }
.sh-pack.off, .sh-pack.off:hover { opacity: 0.38; cursor: default; border-color: var(--line); background: rgba(255, 255, 255, 0.04); }
.gs-price.try small { margin-top: 2px; font: 700 10px var(--font); letter-spacing: 0.14em; color: #7df3c0; text-transform: uppercase; }
.gs-card small { white-space: nowrap; }
@media (max-height: 520px) { .sh-event { padding: 5px 10px; font-size: 12px; } .sh-event.big { padding: 9px 12px; font-size: 12.5px; } .sh-event.big > b { font-size: 14px; } }
/* GUN SKINS, each gun its own: a dot in the skin's colour on the button of a gun that wears one */
.gs-guns button .gd { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
/* the GET CREDITS page's foot: the Terms and the Privacy Policy */
.sh-legal { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.sh-legal a { color: #40e0ff; }

/* =====================================================================================================================
   THE HOME SCREEN, MENU3 (2026-10-04 - the user: "too many menu items ... do it like a truly AAA game studio"):
   one PLAY (the mode it plays on a card above it, the server browser beside it; PRACTICE, 5v5 and OPTIONS under it),
   tabs at the top (PLAY, SKINS, SQUAD, CAREER), the pilot as a chip, the rest as icons in the corner, the latest update
   as a card. #menu.v3
   ===================================================================================================================== */
#menu.nm.v3 .platforms { display: none; }
/* ---- the top bar: the tabs from the banner's edge, the icons on the right */
#menu.nm.v3 .nm-top { left: 448px; right: 14px; justify-content: space-between; gap: 14px; }
#menu.nm.v3.lay-mid .nm-top { left: 388px; }
#menu.nm.v3 .nm-tabs { display: flex; align-items: center; gap: 2px; }
#menu.nm.v3 .nm-tab { appearance: none; position: relative; border: 0; background: none; cursor: pointer; padding: 10px 16px 11px; font: 700 15px var(--font); letter-spacing: 0.18em; color: #9aa6bd; display: flex; align-items: center; gap: 6px; }
#menu.nm.v3 .nm-tab i { font-style: normal; font-size: 11px; transition: transform 0.2s; }
#menu.nm.v3 .nm-tab.open i { transform: rotate(180deg); }
#menu.nm.v3 .nm-tab::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; background: var(--cyan); transform: scaleX(0); transition: transform 0.2s; }
#menu.nm.v3 .nm-tab:hover, #menu.nm.v3 .nm-tab:focus-visible, #menu.nm.v3 .nm-tab.pad-focus, #menu.nm.v3 .nm-tab.open { color: #fff; outline: none; box-shadow: none !important; }
#menu.nm.v3 .nm-tab:hover::after, #menu.nm.v3 .nm-tab:focus-visible::after, #menu.nm.v3 .nm-tab.pad-focus::after, #menu.nm.v3 .nm-tab.open::after, #menu.nm.v3 .nm-tab.on::after { transform: scaleX(1); }
#menu.nm.v3 .nm-tab.on { color: #fff; }
#menu.nm.v3 .nm-dd { position: relative; }
#menu.nm.v3 .nm-ddm { position: absolute; left: 6px; top: calc(100% + 6px); min-width: 260px; display: flex; flex-direction: column; padding: 6px; z-index: 8;
  background: rgba(6,8,13,0.96); border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--nm-red); box-shadow: 0 14px 40px rgba(0,0,0,0.55); }
#menu.nm.v3 .nm-ddm.hidden { display: none; }
#menu.nm.v3 .nm-ddm button { appearance: none; border: 0; background: none; cursor: pointer; text-align: left; padding: 10px 12px; font: 700 16px var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: #dde3ef; position: relative; }
#menu.nm.v3 .nm-ddm button small { display: block; margin-top: 3px; font: 500 11.5px Inter, sans-serif; letter-spacing: 0.01em; text-transform: none; color: var(--nm-dim); }
#menu.nm.v3 .nm-ddm button:hover, #menu.nm.v3 .nm-ddm button:focus-visible, #menu.nm.v3 .nm-ddm button.pad-focus { background: var(--nm-paper); color: #0a0b10; outline: none; box-shadow: none !important; }
#menu.nm.v3 .nm-ddm button:hover small, #menu.nm.v3 .nm-ddm button:focus-visible small, #menu.nm.v3 .nm-ddm button.pad-focus small { color: #4a443a; }
#menu.nm.v3 .nm-ddm .nm-badge { margin-left: 8px; vertical-align: 2px; }
#menu.nm.v3 .nm-icons { display: flex; align-items: center; gap: 8px; }
#menu.nm.v3 .nm-ico { appearance: none; position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.08); background: rgba(6,8,13,0.78); cursor: pointer; padding: 0; color: #dde3ef; }
#menu.nm.v3 .nm-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#menu.nm.v3 .nm-ico:hover, #menu.nm.v3 .nm-ico:focus-visible, #menu.nm.v3 .nm-ico.pad-focus { background: var(--nm-paper); color: #0a0b10; outline: none; box-shadow: none !important; }
#menu.nm.v3 .nm-ico .nm-badge { position: absolute; top: -6px; right: -7px; margin: 0; }
#menu.nm.v3 .nm-dot { display: none; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--nm-red); box-shadow: 0 0 8px var(--nm-red); }
#menu.nm.v3 .nm-dot.on { display: block; }
#menu.nm.v3 .nm-pilot { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border: 1px solid rgba(255,255,255,0.08); cursor: pointer; color: #fff; background: rgba(6,8,13,0.78);
  font: 700 13px var(--font); letter-spacing: 0.08em; }
#menu.nm.v3 .nm-pilot b { padding: 2px 7px; background: #e9eef8; color: #0a0b10; font-size: 12px; letter-spacing: 0; }
#menu.nm.v3 .nm-pilot span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu.nm.v3 .nm-pilot img { width: 20px; height: 14px; object-fit: cover; border-radius: 1px; }
#menu.nm.v3 .nm-pilot i { font-style: normal; font-size: 11px; color: var(--nm-dim); transition: transform 0.2s; }
#menu.nm.v3 .nm-pilot:hover, #menu.nm.v3 .nm-pilot:focus-visible, #menu.nm.v3 .nm-pilot.pad-focus, #menu.nm.v3.pilot-open .nm-pilot { background: var(--nm-paper); color: #0a0b10; outline: none; box-shadow: none !important; }
#menu.nm.v3.pilot-open .nm-pilot b { background: #0a0b10; color: #fff; }
#menu.nm.v3.pilot-open .nm-pilot i { transform: rotate(180deg); }
#menu.nm.v3 .nm-discord { height: 38px; padding: 0 14px 0 12px; font-size: 12px; letter-spacing: 0.14em; }
#menu.nm.v3 .nm-top #snd-btn { height: 38px; padding: 0 14px; }
/* ---- your pilot's plate: a panel under the chip (it was always open on the right) */
#menu.nm.v3 .nm-side { display: none; }
#menu.nm.v3.pilot-open .nm-side, #menu.nm.v3.partying .nm-side { display: flex; z-index: 7; top: 62px; right: 14px; width: 360px; padding: 16px 18px 14px; max-height: calc(100vh / var(--ui) - 140px);
  background: rgba(6,8,13,0.95); border: 1px solid rgba(255,255,255,0.08); border-top: 3px solid var(--nm-red); box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
/* ---- the banner: the logo at the top, PLAY at the foot */
#menu.nm.v3 .nm-nav { margin: auto -14px 0 -14px; overflow: visible; gap: 10px; flex: none; }
#menu.nm.v3 .nm-mode-wrap { position: relative; }
#menu.nm.v3 .nm-modecard { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; padding: 12px 18px 13px 18px; text-transform: none; letter-spacing: 0;
  background: rgba(10,12,19,0.82); border: 1px solid rgba(255,255,255,0.09); border-left: 3px solid var(--cyan); transform: none !important; }
#menu.nm.v3 .nm-modecard::before { content: none; }
#menu.nm.v3 .nm-modecard small { grid-column: 1; font: 600 10.5px var(--font); letter-spacing: 0.3em; color: var(--nm-dim); }
#menu.nm.v3 .nm-modecard b { grid-column: 1; font: 700 22px var(--font); letter-spacing: 0.08em; color: #fff; margin-top: 2px; }
#menu.nm.v3 .nm-modecard em { grid-column: 1; font: 500 12px Inter, sans-serif; font-style: normal; color: var(--nm-dim); margin-top: 3px; }
#menu.nm.v3 .nm-modecard i { grid-column: 2; grid-row: 1 / 4; align-self: center; font-style: normal; font-size: 14px; color: var(--cyan); transition: transform 0.2s; }
#menu.nm.v3 .nm-modecard[aria-expanded="true"] i { transform: rotate(180deg); }
#menu.nm.v3 .nm-modecard:hover, #menu.nm.v3 .nm-modecard:focus-visible, #menu.nm.v3 .nm-modecard.pad-focus, #menu.nm.v3 .nm-modecard[aria-expanded="true"] { background-image: none; background: rgba(22,27,40,0.92); border-color: rgba(64,224,255,0.45); outline: none; }
#menu.nm.v3 .nm-modecard:hover b, #menu.nm.v3 .nm-modecard:focus-visible b, #menu.nm.v3 .nm-modecard.pad-focus b { color: #fff; }
#menu.nm.v3 .nm-mode-pick { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 2px; padding: 6px; z-index: 8;
  background: rgba(6,8,13,0.97); border: 1px solid rgba(255,255,255,0.09); border-left: 3px solid var(--cyan); box-shadow: 0 -14px 40px rgba(0,0,0,0.55); }
#menu.nm.v3 .nm-mode-pick.hidden { display: none; }
#menu.nm.v3 .nm-mode-pick button { appearance: none; border: 0; background: none; cursor: pointer; text-align: left; padding: 10px 12px 10px 34px; position: relative; color: #dde3ef; }
#menu.nm.v3 .nm-mode-pick button b { display: block; font: 700 17px var(--font); letter-spacing: 0.1em; }
#menu.nm.v3 .nm-mode-pick button small { display: block; margin-top: 3px; font: 500 11.5px Inter, sans-serif; color: var(--nm-dim); }
#menu.nm.v3 .nm-mode-pick button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 12px; top: 11px; color: var(--cyan); font-weight: 700; }
#menu.nm.v3 .nm-mode-pick button:hover, #menu.nm.v3 .nm-mode-pick button:focus-visible, #menu.nm.v3 .nm-mode-pick button.pad-focus { background: var(--nm-paper); color: #0a0b10; outline: none; box-shadow: none !important; }
#menu.nm.v3 .nm-mode-pick button:hover small, #menu.nm.v3 .nm-mode-pick button:focus-visible small, #menu.nm.v3 .nm-mode-pick button.pad-focus small { color: #4a443a; }
#menu.nm.v3 .nm-mode-pick button:hover::before, #menu.nm.v3 .nm-mode-pick button:focus-visible::before { color: #b0122c; }
#menu.nm.v3 .nm-go { display: flex; gap: 8px; align-items: stretch; }
#menu.nm.v3 .nm-go .nm-main { flex: 1; margin: 0; font-size: 40px; padding: 16px 24px 15px 26px; letter-spacing: 0.1em; }
#menu.nm.v3 .nm-go .nm-main::before { content: none; }
#menu.nm.v3 .nm-go .nm-main::after { font-size: 11.5px; letter-spacing: 0.22em; font-weight: 700; margin-top: 5px; }
#menu.nm.v3 .nm-srv { width: 112px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; text-align: center;
  font: 700 12px/1.15 var(--font); letter-spacing: 0.14em; color: #dde3ef; background: rgba(10,12,19,0.85); border: 1px solid rgba(255,255,255,0.12); background-image: none; transform: none !important; }
#menu.nm.v3 .nm-srv::before { content: none; }
#menu.nm.v3 .nm-srv svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#menu.nm.v3 .nm-srv:hover, #menu.nm.v3 .nm-srv:focus-visible, #menu.nm.v3 .nm-srv.pad-focus { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); outline: none; }
/* ---- PRACTICE · 5v5 · OPTIONS: three clear buttons under PLAY (the user, 2026-10-05: "people need to see those clearly") */
#menu.nm.v3 .nm-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#menu.nm.v3 .nm-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 0; padding: 11px 4px 10px; text-align: center; white-space: nowrap;
  text-transform: none; font: 700 13px/1.1 var(--font); letter-spacing: 0.12em; color: #dde3ef; background: rgba(10,12,19,0.85); border: 1px solid rgba(255,255,255,0.12); background-image: none; transform: none !important; }
#menu.nm.v3 .nm-q::before { content: none; }
#menu.nm.v3 .nm-q svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#menu.nm.v3 .nm-q:hover:not(:disabled), #menu.nm.v3 .nm-q:focus-visible, #menu.nm.v3 .nm-q.pad-focus { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); outline: none; }
#menu.nm.v3.lay-mid .nm-q { padding: 10px 2px 9px; font-size: 12px; letter-spacing: 0.08em; }
/* (a phone on its side: the icon beside the word, smaller; while the game loads the loading bar has the place, then the
   buttons take it) */
#menu.nm.v3.lay-short .nm-quick { gap: 6px; }
#menu.nm.v3.lay-short .nm-q { flex-direction: row; padding: 7px 2px; font-size: 11.5px; letter-spacing: 0.08em; gap: 5px; }
#menu.nm.v3.lay-short .nm-q svg { width: 15px; height: 15px; }
#menu.nm.v3.lay-short .nm-rail:has(#boot:not(.done)) .nm-quick { display: none; }
#menu.nm.v3.lay-short .nm-rail #boot.done { display: none; }
/* (upright: the icon over the word) */
#menu.nm.v3.lay-stack .nm-q { flex-direction: column; gap: 6px; padding: 11px 2px 10px; font-size: 12.5px; letter-spacing: 0.1em; }
/* ---- the latest update, bottom right */
#menu.nm.v3 .nm-newscard { position: absolute; right: 34px; bottom: 40px; zoom: var(--ui); width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px 13px 16px;
  text-align: left; cursor: pointer; color: #fff; background: rgba(6,8,13,0.8); border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--nm-red); z-index: 3; }
#menu.nm.v3 .nm-newscard small { font: 600 10.5px var(--font); letter-spacing: 0.3em; color: var(--nm-red); }
#menu.nm.v3 .nm-newscard b { font: 700 16px var(--font); letter-spacing: 0.08em; }
#menu.nm.v3 .nm-newscard em { font: 500 12px Inter, sans-serif; font-style: normal; color: var(--nm-dim); }
#menu.nm.v3 .nm-newscard .nm-dot { top: 14px; right: 14px; }
#menu.nm.v3 .nm-newscard:hover, #menu.nm.v3 .nm-newscard:focus-visible, #menu.nm.v3 .nm-newscard.pad-focus { background: rgba(22,27,40,0.94); outline: none; box-shadow: none !important; }
#menu.nm.v3.picking .nm-cap, #menu.nm.v3.pilot-open .nm-newscard { opacity: 0; pointer-events: none; }

/* ---- mid: a size smaller */
#menu.nm.v3.lay-mid .nm-tab { padding: 9px 12px 10px; font-size: 14px; letter-spacing: 0.14em; }
#menu.nm.v3.lay-mid .nm-go .nm-main { font-size: 34px; padding: 14px 20px 13px 22px; }
#menu.nm.v3.lay-mid .nm-srv { width: 100px; }
#menu.nm.v3.lay-mid .nm-newscard { width: 290px; right: 24px; }

/* ---- short (a phone on its side, a small window): the banner slim, one row of everything */
#menu.nm.v3.lay-short .nm-top { left: 312px; right: 8px; gap: 6px; }
#menu.nm.v3.lay-short .nm-tab { padding: 7px 8px 8px; font-size: 12px; letter-spacing: 0.1em; }
#menu.nm.v3.lay-short .nm-tab::after { left: 8px; right: 8px; }
#menu.nm.v3.lay-short .nm-icons { gap: 5px; }
#menu.nm.v3.lay-short .nm-ico, #menu.nm.v3.lay-short .nm-pilot, #menu.nm.v3.lay-short .nm-discord, #menu.nm.v3.lay-short .nm-top #snd-btn { height: 32px; }
#menu.nm.v3.lay-short .nm-ico { width: 32px; }
#menu.nm.v3.lay-short .nm-ico svg { width: 17px; height: 17px; }
#menu.nm.v3.lay-short .nm-discord span, #menu.nm.v3.lay-short .nm-top #snd-btn .tx { display: none; }
#menu.nm.v3.lay-short .nm-discord { padding: 0 9px; }
#menu.nm.v3.lay-short .nm-pilot span { max-width: 80px; }
#menu.nm.v3.lay-short .nm-nav { display: flex; flex-direction: column; margin: auto -4px 0 -6px; gap: 6px; }
#menu.nm.v3.lay-short .nm-modecard { padding: 7px 12px 8px; }
#menu.nm.v3.lay-short .nm-modecard b { font-size: 16px; }
#menu.nm.v3.lay-short .nm-modecard em { font-size: 11px; }
#menu.nm.v3.lay-short .nm-go .nm-main { font-size: 26px; padding: 10px 14px 9px 16px; }
#menu.nm.v3.lay-short .nm-go .nm-main::after { font-size: 10px; margin-top: 3px; }
#menu.nm.v3.lay-short .nm-srv { width: 84px; font-size: 10.5px; gap: 3px; padding: 6px 4px; }
#menu.nm.v3.lay-short .nm-srv svg { width: 18px; height: 18px; }
#menu.nm.v3.lay-short .nm-mode-pick button { padding: 7px 10px 7px 30px; }
#menu.nm.v3.lay-short .nm-mode-pick button b { font-size: 14px; }
#menu.nm.v3.lay-short .nm-mode-pick button small { font-size: 10.5px; }
#menu.nm.v3.lay-short .nm-newscard { width: 240px; right: 12px; bottom: 34px; padding: 8px 12px 9px; }
#menu.nm.v3.lay-short .nm-newscard b { font-size: 13px; }
#menu.nm.v3.lay-short .nm-newscard em { display: none; }
#menu.nm.v3.lay-short.pilot-open .nm-side { top: 46px; right: 8px; width: min(320px, 46vw); max-height: calc(100vh / var(--ui) - 56px); padding: 10px 14px; }
#menu.nm.v3.lay-tiny .nm-tab { padding: 6px 6px 7px; font-size: 11px; letter-spacing: 0.06em; }
#menu.nm.v3.lay-tiny .nm-tab i { display: none; }
#menu.nm.v3.lay-tiny .nm-pilot span, #menu.nm.v3.lay-tiny .nm-pilot img { display: none; }
#menu.nm.v3.lay-tiny .nm-newscard { display: none; }

/* ---- stack (held upright): one column - the bar, the logo, PLAY, the news */
#menu.nm.v3.lay-stack .nm-top { position: relative; left: auto; right: auto; top: auto; order: 0; flex-direction: column-reverse; align-items: stretch; gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
#menu.nm.v3.lay-stack .nm-tabs { justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
#menu.nm.v3.lay-stack .nm-tab { padding: 10px 6px; font-size: 13px; letter-spacing: 0.1em; }
#menu.nm.v3.lay-stack .nm-icons { justify-content: flex-end; flex-wrap: wrap; }
#menu.nm.v3.lay-stack .nm-pilot { margin-right: auto; }
#menu.nm.v3.lay-stack .nm-nav { display: flex; flex-direction: column; margin-top: 18px; }
#menu.nm.v3.lay-stack .nm-mode-pick { bottom: auto; top: calc(100% + 6px); }
#menu.nm.v3.lay-stack .nm-newscard { position: relative; right: auto; bottom: auto; zoom: 1; width: 100%; order: 3; margin-top: 14px; }
#menu.nm.v3.lay-stack.pilot-open .nm-side { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
#menu.nm.v3.lay-stack.pilot-open .nm-newscard { opacity: 1; pointer-events: auto; }
/* (the bar compacts as the screen narrows: mid - Discord as an icon; short - small tabs, the chip as level + flag;
   tiny - only what can't be reached elsewhere: the chip, news, settings, music; friends live under SOCIAL) */
#menu.nm.v3.lay-mid .nm-discord span { display: none; }
#menu.nm.v3.lay-mid .nm-discord { padding: 0 11px; }
#menu.nm.v3.lay-mid .nm-pilot span { max-width: 90px; }
#menu.nm.v3.lay-short .nm-tab { padding: 6px 6px 7px; font-size: 11.5px; letter-spacing: 0.06em; }
#menu.nm.v3.lay-short .nm-tab::after { left: 6px; right: 6px; }
#menu.nm.v3.lay-short .nm-tab i { display: none; }
#menu.nm.v3.lay-short .nm-pilot span { display: none; }
#menu.nm.v3.lay-short .nm-icons { gap: 4px; }
#menu.nm.v3.lay-short .nm-ico, #menu.nm.v3.lay-short .nm-discord { width: 30px; height: 30px; padding: 0; justify-content: center; }
#menu.nm.v3.lay-short .nm-pilot, #menu.nm.v3.lay-short .nm-top #snd-btn { height: 30px; }
#menu.nm.v3.lay-short .nm-top #snd-btn { padding: 0 9px; }
#menu.nm.v3.lay-tiny [data-open="howto"].nm-ico, #menu.nm.v3.lay-tiny .nm-discord, #menu.nm.v3.lay-tiny #nm-friends { display: none; }
#menu.nm.v3.lay-stack .nm-nav { margin-left: 0; margin-right: 0; }
#menu.nm.v3.lay-tiny .nm-tab { padding: 6px 4px 7px; letter-spacing: 0.02em; }
#menu.nm.v3.lay-tiny .nm-tab::after { left: 4px; right: 4px; }
#menu.nm.v3.lay-tiny .nm-pilot i { display: none; }
#menu.nm.v3.lay-tiny .nm-pilot { padding: 0 6px; }
#menu.nm.v3.lay-short .nm-newscard { bottom: 64px; }
#menu.nm.v3.lay-stack .nm-icons { flex-wrap: nowrap; gap: 6px; }
#menu.nm.v3.lay-stack .nm-ico, #menu.nm.v3.lay-stack .nm-discord, #menu.nm.v3.lay-stack .nm-top #snd-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
#menu.nm.v3.lay-stack .nm-discord span, #menu.nm.v3.lay-stack .nm-top #snd-btn .tx { display: none; }
#menu.nm.v3.lay-stack .nm-pilot { height: 36px; }
#menu.nm.v3.lay-stack .nm-pilot span { max-width: 90px; }

/* =====================================================================================================================
   THE WINDOWS' INSIDES IN THE HOME SCREEN'S LOOK (2026-10-05 - the user: the practice window "feels not professional ...
   doesn't fit bioneural current homepage .. check if all main menu popups are new main menu design"): square corners,
   hairlines, labels in the home's letter-spaced caps, the selected thing marked in cyan, the home's paper on hover, line
   icons instead of emoji. The frame (the red-cyan line, the cut corners) is the windows' look from before.
   ===================================================================================================================== */
/* the section labels: small caps and a hairline (as FRIENDS in the friends window) */
#offline .off-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 600 11px var(--font); letter-spacing: 0.3em; color: var(--nm-dim); }
#offline .off-h::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
#offline .off-sub { margin: -2px 0 18px; font: 400 14px/1.5 Inter, sans-serif; color: #a9b3c7; }
/* PRACTICE: the maps - no pictures (the user, 2026-10-05): a line emblem, the name, what the map is; the chosen one cyan
   with a check in its corner, the home's paper on hover */
#offline .off-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 6px; margin-bottom: 20px; }
#offline .off-m { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center;
  padding: 14px 16px; text-align: left; cursor: pointer; border-radius: 0; border: 1px solid rgba(255,255,255,0.09); background: rgba(10,12,19,0.85); color: #dde3ef;
  transition: background 0.12s, border-color 0.12s, color 0.12s; }
#offline .off-m svg { grid-row: 1 / 3; width: 30px; height: 30px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#offline .off-m b { font: 700 14.5px var(--font); letter-spacing: 0.16em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#offline .off-m small { font: 400 12px Inter, sans-serif; color: var(--nm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#offline .off-m:hover, #offline .off-m:focus-visible, #offline .off-m.pad-focus { background: var(--nm-paper); border-color: var(--nm-paper); outline: none; }
#offline .off-m:hover :is(b, small), #offline .off-m:focus-visible :is(b, small), #offline .off-m.pad-focus :is(b, small) { color: #0a0b10; }
#offline .off-m:hover svg, #offline .off-m:focus-visible svg, #offline .off-m.pad-focus svg { stroke: #0a0b10; }
#offline .off-m.on { border-color: var(--cyan); background: rgba(64,224,255,0.08); box-shadow: inset 3px 0 0 var(--cyan); }
#offline .off-m.on b { padding-right: 18px; }
#offline .off-m.on::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061018' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
#offline .off-m.on:hover { background: rgba(64,224,255,0.14); border-color: var(--cyan); }
#offline .off-m.on:hover b { color: #fff; } #offline .off-m.on:hover small { color: var(--nm-dim); } #offline .off-m.on:hover svg { stroke: var(--cyan); }
/* PRACTICE: how hard the bots fight - three square buttons, one to three bars */
#offline .off-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 8px; border: 0; border-radius: 0; background: none; }
#offline .off-diff button { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 8px; border-radius: 0; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,12,19,0.85); color: #c3ccdc; font: 700 14px var(--font); letter-spacing: 0.2em; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
#offline .off-diff button s { display: flex; align-items: flex-end; gap: 3px; text-decoration: none; }
#offline .off-diff button s i { width: 4px; background: rgba(255,255,255,0.16); }
#offline .off-diff button s i:nth-child(1) { height: 7px; } #offline .off-diff button s i:nth-child(2) { height: 11px; } #offline .off-diff button s i:nth-child(3) { height: 15px; }
#offline .off-diff [data-d="easy"] s i:nth-child(1), #offline .off-diff [data-d="normal"] s i:nth-child(-n+2), #offline .off-diff [data-d="hard"] s i { background: currentColor; }
#offline .off-diff button:hover, #offline .off-diff button:focus-visible, #offline .off-diff button.pad-focus { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); outline: none; }
#offline .off-diff button.on { color: #fff; border-color: var(--cyan); background: rgba(64,224,255,0.08); box-shadow: inset 3px 0 0 var(--cyan); }
#offline .off-diff [data-d="easy"].on s i:nth-child(1), #offline .off-diff [data-d="normal"].on s i:nth-child(-n+2), #offline .off-diff [data-d="hard"].on s i { background: var(--cyan); }
#offline .off-note { margin: 0; font: 400 13px Inter, sans-serif; color: var(--nm-dim); }
/* PRACTICE on a phone: START always on the screen (pinned to the window's foot, the list scrolls under it); flatter maps */
#offline .off-card > .st-foot { position: sticky; bottom: -16px; z-index: 3; margin-bottom: -16px; padding-bottom: 16px; background: rgb(7,9,14); }
@media (max-height: 520px) { #offline .off-maps { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 14px; } #offline .off-m { padding: 11px 12px; column-gap: 11px; } #offline .off-m svg { grid-row: auto; width: 24px; height: 24px; } #offline .off-m small { display: none; } #offline .off-sub { margin-bottom: 12px; } }
@media (max-width: 620px) { #offline .off-maps { grid-template-columns: minmax(0, 1fr); } }
/* HOW TO PLAY and NEWS: the side menu as the home's menus - words only, the open one marked cyan, the home's paper on
   hover; square cards with a short cyan dash before their titles instead of emoji */
.modal .hx .hx-nav { gap: 3px; }
.modal .hx .hx-nav button:not(.hx-ok) { border-radius: 0; border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid transparent; background: rgba(10,12,19,0.7); padding: 12px 14px;
  color: #9aa6bd; font: 700 13px var(--font); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: none; }
.modal .hx .hx-nav button:not(.hx-ok) > i { display: none; }
.modal .hx .hx-nav button:not(.hx-ok):hover, .modal .hx .hx-nav button:not(.hx-ok):focus-visible, .modal .hx .hx-nav button:not(.hx-ok).pad-focus { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); outline: none; }
.modal .hx .hx-nav button.on { background: rgba(64,224,255,0.08); border-color: rgba(64,224,255,0.25); border-left-color: var(--cyan); color: #fff; box-shadow: none; }
.modal .hx .hx-nav button.on:hover { background: rgba(64,224,255,0.14); color: #fff; border-color: rgba(64,224,255,0.25); border-left-color: var(--cyan); }
.modal .hx :is(.hx-stat, .hx-card, .hx-feat > div, .hx-keys > div, .hx-w, .hx-map, .hx-mv-hero, .hx-back, .nw-hero) { border-radius: 0; }
.modal .hx .hx-stat { background: rgba(10,12,19,0.85); border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--cyan); }
.modal .hx .hx-stat b { font: 700 30px var(--font); letter-spacing: 0.02em; }
.modal .hx .hx-stat span { font: 600 10.5px var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nm-dim); }
.modal .hx :is(.hx-card, .hx-feat > div) { background: rgba(10,12,19,0.72); border: 1px solid rgba(255,255,255,0.08); }
.modal .hx :is(.hx-card > i, .hx-feat i) { display: none; }
.modal .hx .hx-card > b, .modal .hx .hx-feat b { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font: 700 13.5px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.modal .hx .hx-card > b::before, .modal .hx .hx-feat b::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px rgba(64,224,255,0.6); }
.modal .hx .hx-card.hot { border-color: rgba(255,46,77,0.45); background: rgba(255,46,77,0.06); }
.modal .hx .hx-card.hot > b::before { background: var(--nm-red); box-shadow: 0 0 8px rgba(255,46,77,0.6); }
.modal .hx .hx-feat p { margin-top: 0; }
.modal .hx .hx-w .chips span { border-radius: 0; }
.modal .hx .hx-seg { border-radius: 0; gap: 3px; padding: 0; border: 0; background: none; }
.modal .hx .hx-seg button { border-radius: 0; border: 1px solid rgba(255,255,255,0.1); background: rgba(10,12,19,0.85); color: #c3ccdc; font: 700 12.5px var(--font); letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 16px; }
.modal .hx .hx-seg button:hover { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); }
.modal .hx .hx-seg button.on { background: rgba(64,224,255,0.08); color: #fff; border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.modal .hx .hx-maps .hx-map { transform: none !important; box-shadow: none; }
.modal .hx .hx-maps .hx-map:hover, .modal .hx .hx-maps .hx-map:focus-visible { border-color: rgba(64,224,255,0.6); }
.modal .hx .hx-map .tag { border-radius: 0; }
/* NEWS: the updates as the side menu - the version small in cyan, the name, the date; LATEST in the home's red */
.modal .nw .nw-nav button span { font: 600 10.5px var(--font); letter-spacing: 0.2em; color: #7de8ff; text-transform: none; }
.modal .nw .nw-nav button span em { display: block; margin: 3px 0 1px; font: 700 13px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: #dde3ef; }
.modal .nw .nw-nav button span small { font: 500 11px Inter, sans-serif; letter-spacing: 0; color: var(--nm-dim); }
.modal .nw .nw-nav button:not(.hx-ok):hover span, .modal .nw .nw-nav button:not(.hx-ok):hover span em, .modal .nw .nw-nav button:not(.hx-ok):hover span small { color: #0a0b10; }
.modal .nw .nw-nav button.on:hover span em { color: #fff; } .modal .nw .nw-nav button.on:hover span { color: #7de8ff; } .modal .nw .nw-nav button.on:hover span small { color: var(--nm-dim); }
.modal .nw .nw-nav .nw-new { border-radius: 0; background: var(--nm-red); color: #fff; font: 700 9px var(--font); letter-spacing: 0.2em; padding: 3px 6px; }
.modal .nw .nw-t::before { border-radius: 0; width: 7px; height: 7px; }
/* SKINS, PROFILE, OPTIONS, LEADERBOARD, SERVERS: square corners (the round colour swatches and dots stay round); the tabs as
   the leaderboard's - the open one cyan, the home's paper on hover */
:is(#shop, #locker, #settings, #board-modal, #servers) :is(.lk-tabs button, .lk-item, .lk-item img, .lk-stage, .lk-xp s, .gs-stage, .gs-card, .gs-guns button, .gs-price, .sh-pack, .sh-soon,
  .sh-free, .sh-note, .sh-agree, .sh-event, #lk-code-box, #lk-code-box code, #lk-code-box input, #lk-code-box button, .st-sec, .st-mini, .sens-exact input, .xh-box,
  .xh-opts input[type=color], select, input[type=text], input[type=number], .bc-tabs button, #world-stats, #world-stats span) { border-radius: 0; }
:is(#shop, #locker) .lk-tabs button { background: rgba(10,12,19,0.85); border: 1px solid rgba(255,255,255,0.1); color: #9aa6bd; font: 700 11.5px var(--font); letter-spacing: 0.14em; }
:is(#shop, #locker) .lk-tabs button:hover, :is(#shop, #locker) .lk-tabs button:focus-visible { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); outline: none; }
:is(#shop, #locker) .lk-tabs button.on { background: rgba(64,224,255,0.1); color: #fff; border-color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan); }
:is(#shop, #locker) .lk-item { background: rgba(10,12,19,0.72); border-color: rgba(255,255,255,0.08); }
#settings .st-sec { background: rgba(10,12,19,0.72); border-color: rgba(255,255,255,0.08); }
#settings .st-mini:hover { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); }
#locker #lk-code-box { background: rgba(10,12,19,0.72); border-color: rgba(255,255,255,0.08); border-left: 3px solid var(--cyan); }
#locker #lk-code-box button:hover { background: var(--nm-paper); color: #0a0b10; border-color: var(--nm-paper); }
/* THE LEADERBOARD (the user, 2026-10-05: "this must feel rewarding to those players there"): the top three on a podium in
   gold, silver and bronze - the winner in the middle, raised, under a crown - then the ranked list; you lit in cyan */
#board-modal .nm-board { width: min(780px, 100%) !important; }
#board-modal .lb-podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); gap: 8px; align-items: end; margin: 8px 0 14px; }
#board-modal .lb-pod { --m: #ffd34d; position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 12px 14px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m) 15%, transparent), rgba(10,12,19,0.88) 72%); border: 1px solid color-mix(in srgb, var(--m) 30%, transparent); border-top: 3px solid var(--m); }
#board-modal .lb-pod.gold { --m: #ffd34d; padding: 14px 14px 22px; box-shadow: 0 0 46px rgba(255,211,77,0.13); }
#board-modal .lb-pod.silver { --m: #cdd7e8; }
#board-modal .lb-pod.bronze { --m: #e39a5f; }
#board-modal .lb-pod.empty { visibility: hidden; }
#board-modal .lb-crown { width: 28px; height: 28px; margin-bottom: -6px; fill: none; stroke: var(--m); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255,211,77,0.55)); }
#board-modal .lb-place { font: 700 32px/1 var(--font); color: var(--m); text-shadow: 0 0 22px color-mix(in srgb, var(--m) 55%, transparent); }
#board-modal .lb-pod.gold .lb-place { font-size: 46px; }
#board-modal .lb-who { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-width: 0; }
#board-modal .lb-who span { min-width: 0; font: 700 15px var(--font); letter-spacing: 0.04em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#board-modal .lb-pod.gold .lb-who span { font-size: 18px; }
#board-modal .lb-who .flag { flex: none; }
#board-modal .lb-big b { display: block; font: 700 24px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
#board-modal .lb-pod.gold .lb-big b { font-size: 32px; }
#board-modal .lb-big small, #board-modal .lb-kd { display: block; margin-top: 3px; font: 600 10px var(--font); letter-spacing: 0.22em; color: var(--nm-dim); }
#board-modal .lb-pod.me { box-shadow: inset 0 0 0 2px var(--cyan); }
#board-modal .lb-youtag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 1; font: 700 9.5px var(--font); font-style: normal; letter-spacing: 0.2em; padding: 2px 6px; background: var(--cyan); color: #061018; }
#board-modal .lb-lv { flex: none; font: 700 10.5px/1 var(--font); padding: 3px 5px; background: #e9eef8; color: #0a0b10; }
/* the list: from 4th place */
#board-modal #top-panel .lb-scroll, #board-modal #cmp-panel .lb-scroll { max-height: min(340px, calc(36vh / var(--ui))) !important; }   /* (over the older !important) */
#board-modal .nm-board { max-height: calc((100vh - 24px) / var(--ui)); overflow-y: auto; scrollbar-width: thin; }
#board-modal table { table-layout: fixed; width: 100%; border-collapse: collapse; }
#board-modal th { position: sticky; top: 0; z-index: 1; padding: 7px 10px; background: rgb(8,10,15); border-bottom: 1px solid rgba(255,255,255,0.08); text-align: right;
  font: 600 10px var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--nm-dim); }
#board-modal td { padding: 7px 10px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.05); font: 500 13.5px Inter, sans-serif; color: #c9d2e3; font-variant-numeric: tabular-nums; }
#board-modal th:nth-child(1), #board-modal td:nth-child(1) { width: 52px; text-align: left; }
#board-modal th:nth-child(2), #board-modal td:nth-child(2) { width: auto; text-align: left; }
#board-modal th:nth-child(3), #board-modal td:nth-child(3), #board-modal th:nth-child(4), #board-modal td:nth-child(4) { width: 92px; }
#board-modal th:nth-child(5), #board-modal td:nth-child(5) { width: 70px; }
#board-modal td:nth-child(1) { font: 700 14px var(--font); color: var(--nm-dim); }
#board-modal .lb-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
#board-modal .lb-n span { min-width: 0; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#board-modal .lb-n .flag { flex: none; }
#board-modal .lb-n em { flex: none; font: 700 9.5px var(--font); font-style: normal; letter-spacing: 0.2em; padding: 2px 6px; background: var(--cyan); color: #061018; }
#board-modal tbody tr:hover td { background: rgba(255,255,255,0.035); }
#board-modal tr.me td { background: rgba(64,224,255,0.1); }
#board-modal tr.me td:first-child { color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
/* you */
#board-modal .lb-you { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 14px; background: rgba(10,12,19,0.88); border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--cyan); font: 500 13px Inter, sans-serif; color: #c9d2e3; }
#board-modal .lb-you:empty { display: none; }
#board-modal .lb-you .lb-tag { font: 700 11px var(--font); letter-spacing: 0.26em; color: var(--cyan); }
#board-modal .lb-you strong { font: 700 20px/1 var(--font); color: #fff; }
#board-modal .lb-you span b { color: #fff; }
#board-modal .lb-you small { margin-left: auto; font-size: 12px; color: var(--nm-dim); }
/* the world's numbers: the home's caps and big numbers, no emoji */
#board-modal #world-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 16px 0 0; padding: 0; background: none; border: 0; }
#board-modal #world-stats > b { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0 0 2px; text-align: left; font: 600 11px var(--font); letter-spacing: 0.3em; color: var(--nm-dim); }
#board-modal #world-stats > b::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
#board-modal #world-stats span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; white-space: normal; background: rgba(10,12,19,0.85); border: 1px solid rgba(255,255,255,0.07);
  font: 600 9.5px var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nm-dim); }
#board-modal #world-stats span i, #board-modal #world-stats u { display: none; }
#board-modal #world-stats span em { font: 700 19px/1 var(--font); font-style: normal; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { #board-modal .lb-podium { gap: 5px; } #board-modal .lb-pod { padding: 12px 6px 10px; } #board-modal .lb-pod.gold .lb-place { font-size: 36px; } #board-modal .lb-big b { font-size: 19px; } #board-modal .lb-pod.gold .lb-big b { font-size: 24px; }
  #board-modal .lb-who { flex-wrap: wrap; } #board-modal .lb-who span { flex-basis: 100%; font-size: 13px; } #board-modal .lb-pod.gold .lb-who span { font-size: 14px; }
  #board-modal th:nth-child(4), #board-modal td:nth-child(4) { display: none; } #board-modal th:nth-child(3), #board-modal td:nth-child(3) { width: 70px; } #board-modal th:nth-child(1), #board-modal td:nth-child(1) { width: 40px; } }
/* =====================================================================================================================
   THE BANNER'S KEY ART (the user, 2026-10-05: the black space under the logo - "can we do the logo VERTICAL? something truly
   epic" - "i want whole black space to be used" - "If you need images or textures ... use CODEX!" - "this must only be for
   pc players", the old iPads gave us trouble): on a PC with a mouse only (never a touch screen, never html.calm) a picture
   made with Codex fills the whole banner above the PLAY block, the game's 3D logo (Codex too) stands up its left side and
   the line about the game sits at its foot. Everywhere else the banner is as it was - and only these devices ever fetch
   the two pictures (CSS backgrounds).
   ===================================================================================================================== */
@media (hover: hover) and (pointer: fine) {
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-brand { position: relative; isolation: isolate; flex: 1 1 0; min-height: 0; display: grid;
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 14px; }
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-brand::before { content: ""; position: absolute; z-index: -1; inset: -46px -78px -8px -44px; pointer-events: none;
    background: radial-gradient(ellipse 62% 46% at 64% 58%, rgba(64,224,255,0.17), rgba(64,224,255,0) 72%), radial-gradient(ellipse 70% 30% at 66% 98%, rgba(255,46,77,0.2), rgba(255,46,77,0) 75%),
      linear-gradient(180deg, #04060b, #0a0e18 55%, #05060a);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%); }
  html:not(.calm) body:not(.touch) #menu.nm.v3.lay-mid .nm-brand::before { inset: -36px -64px -8px -34px; }
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-kicker { grid-column: 1 / -1; grid-row: 1; }
  /* (the words of the logo stay for screen readers and search engines; the picture is the logo) */
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-logo { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-art-logo { display: block; grid-column: 1; grid-row: 2; align-self: stretch; height: auto; min-height: 0; width: auto; aspect-ratio: 336 / 1518; margin: 12px 0 6px -8px;
    background: url(../assets/menu/logo_v.webp) 50% 100% / contain no-repeat; filter: drop-shadow(0 0 18px rgba(64,224,255,0.22)) drop-shadow(0 0 30px rgba(255,46,77,0.15)); }
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-brand .tag { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 14px; max-width: 210px; color: #b9c3d6;
    text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,0.9); }
}
#menu.nm .nm-art-logo { display: none; }
/* 5v5: no airstrikes and no nukes there - their touch buttons never show (the user, 2026-10-05) */
body.comp :is(.tstrike, .tnuke) { display: none !important; }
/* THE BANNER'S HERO (the user, 2026-10-05: "3D animation of currently selected character player is playing with ... instead of
   that image, logo will stay"): the pilot as he plays - his character, skin, hat, colour - on the SKINS window's 3D stage
   (js/showcase.js, a canvas of its own) standing in the banner beside the logo; PC with a mouse only, like the art before */
#menu.nm .nm-hero { display: none; }
@media (hover: hover) and (pointer: fine) {
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-hero { display: block; position: absolute; z-index: -1; inset: -10px -60px 4px 34px; pointer-events: auto; }
}
/* SKINS: "TRYING ✔" / "WEARING ✔" / "IN USE ✔" is done, not loading - no spinning wait cursor over it (the user, 2026-10-05:
   "the mouse icon is nonstop circling"; the shop's real waiting - #shop.busy - has its own look above) */
#shop .btn.primary:disabled { cursor: default; }
/* THE PAGE'S TITLE - its one H1 (the user, 2026-10-05: "add as h1 Bioneural - free fps browser game... somewhere on the page
   where is space, for example on the video... something pro way"): a quiet letter-spaced line with a cyan bar over the film's
   top left, in line with the film's caption below it; upright, it heads the caption in the column. (The logo above PLAY is a
   div now: one H1 on the page.) Out of the way while the modes are open, like the caption. */
#menu.nm .nm-h1 { position: absolute; left: 468px; top: 84px; zoom: var(--ui); z-index: 2; margin: 0; display: flex; align-items: center; gap: 12px;
  font: 600 13px/1.2 var(--font); letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap; color: rgba(232,238,248,0.88);
  text-shadow: 0 1px 10px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.8); pointer-events: none; transition: opacity 0.3s; }
#menu.nm .nm-h1::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(64,224,255,0.65); }
#menu.nm .nm-h1 b { font-weight: 700; color: #fff; }
#menu.nm.modes .nm-h1 { opacity: 0; }
#menu.nm.lay-mid .nm-h1 { left: 396px; top: 76px; }
#menu.nm.lay-short .nm-h1 { left: 320px; top: 50px; gap: 9px; font-size: 11px; letter-spacing: 0.26em; }
#menu.nm.lay-short .nm-h1::before { width: 18px; }
#menu.nm.lay-stack > .nm-h1 { order: 4; left: auto; top: auto; zoom: 1; margin-top: 24px; gap: 9px; font-size: 10.5px; letter-spacing: 0.2em; }
#menu.nm.lay-stack > .nm-h1::before { width: 18px; }
#menu.nm.lay-stack > .nm-h1 + .nm-cap { margin-top: 10px; }
#menu.nm.v3.picking .nm-h1 { opacity: 0; }
/* ...on a PC (a mouse; the wide and mid layouts) it sits on the right, under the icons - PILOT, friends, news, help,
   settings, DISCORD, music - its end in line with theirs (the user, 2026-10-05: "move it under like profile discord etc
   is.. on pc") */
@media (hover: hover) and (pointer: fine) {
  html:not(.calm) body:not(.touch) #menu.nm.v3:is(.lay-wide, .lay-mid) .nm-h1 { left: auto; right: 14px; top: 70px; }
}

/* ---- THE THREE PLAYS (2026-10-10, city/home3play.py): PLAY BIONEURAL = the online arena (the MODE card goes), and the two
   other games as tiles with key art under it - like a big shooter's mode tiles */
#menu.nm.v3 .nm-mode-wrap { display: none; }
#menu.nm.v3 .nm-go .nm-main { font-size: 32px; letter-spacing: 0.08em; }
#menu.nm.v3 .nm-games { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }   /* (one game tile since cat9: HOW TO CAT left the site) */
#menu.nm.v3 .nm-game { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1px; min-height: 96px; padding: 10px 12px 11px;
  text-align: left; text-transform: none; transform: none !important; color: #fff; isolation: isolate;
  background-color: #10141e; background-size: 100% 100%, cover; background-position: 0 0, 72% 50%; background-repeat: no-repeat;   /* (the picture itself: on the button, index.html) */
  border: 1px solid rgba(255,255,255,0.12); border-bottom: 3px solid var(--acc); transition: filter 0.15s, box-shadow 0.15s, border-color 0.15s; }
#menu.nm.v3 .nm-game::before { content: none; }
#menu.nm.v3 .nm-game small { font: 700 10px var(--font); letter-spacing: 0.34em; color: var(--acc); }
#menu.nm.v3 .nm-game b { font: 800 17px/1.05 var(--font); letter-spacing: 0.04em; text-shadow: 0 2px 10px rgba(0,0,0,0.9); max-width: 100%; overflow-wrap: break-word; }
#menu.nm.v3 .nm-game em { font: 500 11px/1.25 Inter, sans-serif; font-style: normal; letter-spacing: 0.02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: #c9d2e3; margin-top: 3px; text-shadow: 0 1px 6px #000; }
#menu.nm.v3 .nm-game .nm-g-new { position: absolute; top: 8px; right: 8px; font: 800 9.5px var(--font); letter-spacing: 0.2em; font-style: normal; color: #0a0b10; background: var(--acc); padding: 3px 6px 2px; }
#menu.nm.v3 .nm-game:hover:not(:disabled), #menu.nm.v3 .nm-game:focus-visible, #menu.nm.v3 .nm-game.pad-focus { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 10px 30px rgba(0,0,0,0.55); filter: brightness(1.14) saturate(1.1); outline: none; }
#menu.nm.v3 .nm-game:disabled { filter: grayscale(0.7) brightness(0.7); cursor: default; }
#menu.nm.v3.lay-mid .nm-game { min-height: 84px; } #menu.nm.v3.lay-mid .nm-game b { font-size: 15px; } #menu.nm.v3.lay-mid .nm-go .nm-main { font-size: 28px; }
/* (a phone on its side: short tiles, the title only; while the game loads the loading bar has the place) */
#menu.nm.v3.lay-short .nm-games { gap: 6px; }
#menu.nm.v3.lay-short .nm-game { min-height: 44px; padding: 5px 9px 6px; }
#menu.nm.v3.lay-short .nm-game em, #menu.nm.v3.lay-short .nm-game .nm-g-new { display: none; }
#menu.nm.v3.lay-short .nm-game small { font-size: 8px; } #menu.nm.v3.lay-short .nm-game b { font-size: 13px; white-space: nowrap; }
#menu.nm.v3.lay-short .nm-go .nm-main { font-size: 20px; }
#menu.nm.v3.lay-short .nm-rail:has(#boot:not(.done)) .nm-games { display: none; }
/* (upright) */
#menu.nm.v3.lay-stack .nm-games { grid-column: 1 / -1; }
#menu.nm.v3.lay-stack .nm-game { min-height: 64px; } #menu.nm.v3.lay-stack .nm-game b { font-size: 16px; } #menu.nm.v3.lay-stack .nm-game em { display: none; }
#menu.nm.v3.lay-tiny .nm-game { min-height: 40px; } #menu.nm.v3.lay-tiny .nm-game em { display: none; }
html.calm #menu.nm.v3 .nm-game { transition: none; }