/* ============================================================================
   ApogeaBound.

   APOGEAIDLE'S DESIGN LANGUAGE, so the two games read as one family: the same
   ink-and-torch palette token for token, the same three bundled faces, the
   same hairline `.win` panel with its spaced Silkscreen title, the same well
   for anything you type into and the same raised slot for anything you press.

   The three faces, and what each one is for:
     --display  Jersey 25       titles, names, every number worth reading
     --label    Silkscreen      small uppercase labels, buttons, table heads
     body       system sans     sentences
   Silkscreen is drawn for 8-10px and is only used there.

   Dark, and only dark: this is a game window, and the portraits and the
   battlefield are lit for a dark frame.
   ========================================================================== */
@font-face { font-family: "Jersey 25"; font-display: swap; src: url(/assets/fonts/jersey25.woff2) format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-display: swap; src: url(/assets/fonts/pressstart2p.woff2) format("woff2"); }
@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url(/assets/fonts/silkscreen.woff2) format("woff2"); }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url(/assets/fonts/silkscreen-bold.woff2) format("woff2"); }

:root {
  /* ApogeaIdle's palette */
  --ink:     #0d1017;
  --ink-2:   #10141c;
  --panel:   #151a24;
  --panel-2: #1b2130;
  --line:    #2a3242;
  --text:    #d6dde8;
  --dim:     #7c8698;
  --sub:     #8d97a8;
  --faint:   #5d6779;
  --title:   #e7ecf4;
  --torch:   #f0a53c;
  --torch-d: #a56c1f;
  --lit:     #ffc46a;
  --edge:    #05070b;
  --well:    #0a0d13;
  --lift:    #2b3241;
  --mid:     #171d28;
  --sink:    #0f141d;
  --good:    #7fd18c;
  --bad:     #ff8b7a;
  --hp:      #3fae4a;
  --hp-d:    #25782d;
  --ss:      #a77bff;
  --ss-d:    #6440b8;
  --team-a:  #5ea4f5;
  --team-b:  #f0675d;

  --display: "Jersey 25", "Segoe UI Variable Display", system-ui, sans-serif;
  --label:   "Silkscreen", "Press Start 2P", monospace;
  --loud:    "Press Start 2P", "Silkscreen", monospace;
  --sans:    "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;

  --radius: 6px;
  --rail: 60px;
  --tier: 28px;
  --head: calc(var(--rail) + var(--tier));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ink); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
img { image-rendering: pixelated; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
b { font-weight: 600; }
::selection { background: var(--torch-d); color: #fff; }

/* thin scrollbars everywhere, in the panel's own line colour */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ── the small type ── */
.lbl { font: 400 9px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.lbl.dim { color: var(--faint); }
.eyebrow { font: 700 10px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--torch); }
.note { color: var(--faint); font-size: 12.5px; margin: 0; text-align: center; }
.err { color: var(--bad); min-height: 1.4em; margin: 12px 0 0; font-size: 13.5px; }
.empty { color: var(--dim); text-align: center; padding: 28px 16px; margin: 0; }
.muted { color: var(--dim); }
.center { text-align: center; }
.grow { flex: 1; }

/* every section heading: a torch-lit rule with the wiki's diamond on it */
h2.dh { display: flex; align-items: center; gap: 8px; font: 700 10px var(--label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--torch); margin: 22px 0 10px; }
h2.dh::before { content: "◆"; font-size: 8px; color: var(--torch-d); }
h2.dh::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ── icons (filled in by main.mjs from one table) ── */
i[data-ico] { display: inline-flex; width: 14px; height: 14px; flex: none; }
i[data-ico] svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.primary, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border-radius: 5px; font: 700 10px var(--label); letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 14px; white-space: nowrap; transition: background .12s, border-color .12s, color .12s, filter .12s; }
.primary { background: linear-gradient(var(--lit), var(--torch)); color: #1a1205; border: 1px solid var(--torch-d);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 14px rgba(240,165,60,.18); }
.primary:hover:not(:disabled) { filter: brightness(1.08); }
.primary:active:not(:disabled) { transform: translateY(1px); }
.ghost { background: var(--well); color: var(--title); border: 1px solid var(--line); }
.ghost:hover:not(:disabled) { border-color: var(--torch-d); color: var(--lit); }
.primary:disabled, .ghost:disabled { opacity: .4; cursor: not-allowed; }
.primary.lg, .ghost.lg { padding: 13px 22px; font-size: 11px; }
.ghost.sm, .primary.sm { padding: 5px 10px; font-size: 9px; }
.block { width: 100%; }
.ghost.danger { color: var(--bad); }
.ghost.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.linkbtn { background: none; border: 0; padding: 0 0 0 8px; color: var(--dim); cursor: pointer;
  font: 400 9px var(--label); letter-spacing: .12em; text-transform: uppercase; }
.linkbtn:hover { color: var(--torch); }
:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }

/* ── FIELDS: a well you type into ── */
input, select, .field { background: var(--well); border: 1px solid var(--line); border-radius: 5px; color: var(--text);
  padding: 8px 10px; font-size: 13.5px; width: 100%; }
input:focus, select:focus { outline: 0; border-color: var(--torch-d); }
select { cursor: pointer; }
input::placeholder { color: var(--faint); }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 5px; }
.form label > span { font: 400 9px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label.check { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
label.check input { width: 15px; height: 15px; accent-color: var(--torch); margin: 0; }
label.check span { font: 400 13px var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; }
kbd { display: inline-block; min-width: 24px; padding: 2px 6px; text-align: center; font: 700 9px var(--label); letter-spacing: .08em;
  color: var(--title); background: linear-gradient(var(--lift), var(--sink)); border: 1px solid var(--edge); border-radius: 4px;
  box-shadow: 0 2px 0 var(--edge), 0 1px 0 rgba(255,255,255,.08) inset; }

/* ── THE PANEL: one hairline of torch round a flat dark ground ─────────────── */
.win { position: relative; display: flex; flex-direction: column; min-height: 0;
  background: rgba(11,14,20,.92); border: 1px solid var(--torch-d); border-radius: 4px;
  box-shadow: 0 10px 26px rgba(0,0,0,.55); overflow: hidden; }
.win.grow { flex: 1; }
.winbar { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 10px 7px 11px; border-bottom: 1px solid var(--line); }
.winbar > i[data-ico] { width: 12px; height: 12px; color: var(--torch); }
.wintitle { font: 700 9px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--lit); white-space: nowrap; }
.winsub { flex: 1; font: 400 9px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.winbody { flex: 1; min-height: 0; padding: 14px; overflow: auto; }
.winbody.bare { padding: 0; }
.winshut { width: 22px; height: 22px; padding: 0; flex: none; cursor: pointer; background: rgba(9,11,16,.6);
  border: 1px solid var(--line); border-radius: 3px; color: var(--text); font-size: 15px; line-height: 1; }
.winshut:hover { color: var(--torch); border-color: var(--torch-d); }

/* ── TABS ── */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tab { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--dim); padding: 8px 10px; border-radius: 5px;
  cursor: pointer; font: 700 9px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--torch); border-color: var(--torch-d); background: var(--panel-2); }

/* ── PILLS AND RANKS ── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line);
  font: 700 8px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.pill.torch { color: var(--torch); border-color: var(--torch-d); }
.pill.good { color: var(--good); border-color: #2f6a3a; }
.pill.bad { color: var(--bad); border-color: #7a3a33; }
.pill.ss { color: var(--ss); border-color: var(--ss-d); }
.pill:empty { display: none; }
.rank-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--rc); white-space: nowrap; font: 400 17px/1 var(--display); letter-spacing: .03em; text-transform: none; }
.rank-badge i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--rc); border: 1px solid rgba(0,0,0,.6);
  box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 60%, transparent); flex: none; }
.rank-badge.sm { font-size: 15px; }
.t-iron { color: #9a8d88; font-weight: 600; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.help .tiers { border: 1px solid var(--line); border-radius: 4px; margin-top: 12px; background: var(--well); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE RAIL AND THE TIER STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.rail { position: fixed; top: 0; left: 0; right: 0; height: var(--rail); z-index: 20; display: flex; align-items: center; gap: 22px;
  padding: 0 18px; background: linear-gradient(#1a2030, #10141c); border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.brand { background: none; border: 0; padding: 0; cursor: pointer; font: 400 30px/1 var(--display); letter-spacing: .04em; color: var(--title); }
.brand span { color: var(--torch); }
.nav { display: flex; gap: 4px; height: 100%; }
.navb { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; background: none; border: 0;
  cursor: pointer; color: var(--sub); font: 700 9px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.navb i[data-ico] { width: 15px; height: 15px; color: var(--faint); transition: color .12s; }
.navb:hover { color: var(--title); }
.navb:hover i[data-ico] { color: var(--torch-d); }
.navb.on { color: var(--torch); }
.navb.on i[data-ico] { color: var(--torch); }
.navb.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--torch);
  box-shadow: 0 0 10px rgba(240,165,60,.6); }
.acct { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 5px;
  padding: 4px 10px 4px 4px; cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--line); background: rgba(255,255,255,.02); }
.chip .port { width: 40px; height: 40px; }
.chip .cn { font: 700 11px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--torch); }
.chip .rank-badge { font-size: 15px; }
.port { display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #232b3a, var(--well) 70%);
  border: 1px solid var(--line); border-radius: 4px; flex: none; }
.port img { width: 100%; height: 100%; object-fit: contain; }

.tier { position: fixed; top: var(--rail); left: 0; right: 0; height: var(--tier); z-index: 19; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 0 18px;
  background: linear-gradient(90deg, rgba(240,165,60,.10), rgba(240,165,60,.02) 45%, transparent), #0b0e14;
  border-bottom: 1px solid var(--edge); font: 400 9px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--sub); white-space: nowrap; overflow: hidden; }
.tier b { color: var(--torch); font-weight: 700; }
.tier .sep { display: inline-block; width: 1px; height: 11px; background: var(--line); margin: 0 10px; vertical-align: middle; }
.tier .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 6px;
  box-shadow: 0 0 6px var(--good); vertical-align: 0; }

/* ── screens ── */
.stage-menus { position: fixed; top: var(--head); left: 0; right: 0; bottom: 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(240,165,60,.07), transparent 60%),
              radial-gradient(ellipse 60% 50% at 100% 100%, rgba(94,164,245,.05), transparent 60%), var(--ink); }
.screen { display: none; height: 100%; overflow: auto; }
.screen.active { display: block; }
.page { max-width: 1240px; margin: 0 auto; padding: 22px 22px 40px; }
.page.narrow { max-width: 820px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.in-game .rail, body.in-game .tier, body.in-game .stage-menus { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME
   ═══════════════════════════════════════════════════════════════════════════ */
.home { position: relative; }
.home-grid { max-width: 1240px; margin: 0 auto; padding: 56px 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.hero { padding-top: 12px; }
.hero-title { font: 400 104px/.9 var(--display); letter-spacing: .02em; margin: 14px 0 18px; color: var(--title);
  text-shadow: 0 4px 0 var(--edge), 0 18px 40px rgba(0,0,0,.6); }
.hero-title span { color: var(--torch); text-shadow: 0 4px 0 #3a2208, 0 0 40px rgba(240,165,60,.25); }
.hero-sub { max-width: 540px; color: var(--sub); font-size: 17px; line-height: 1.6; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .lg { min-width: 200px; }
.facts { display: flex; gap: 0; margin-top: 40px; border: 1px solid var(--line); border-radius: 4px; background: rgba(10,13,19,.7); width: max-content; max-width: 100%; }
.facts > div { padding: 10px 22px; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts b { display: block; font: 400 28px/1 var(--display); color: var(--title); }
.facts > div > span { font: 400 8px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.home-side { display: flex; flex-direction: column; gap: 14px; }
.top-row { display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(42,50,66,.6); cursor: pointer; }
.top-row:last-child { border-bottom: 0; }
.top-row:hover .tn { color: var(--lit); }
.top-row .tp { font: 400 20px var(--display); color: var(--faint); text-align: center; }
.top-row .tp.p1 { color: #ffd76a; } .top-row .tp.p2 { color: #cfd8e6; } .top-row .tp.p3 { color: #d69a66; }
.top-row .port { width: 34px; height: 34px; }
.top-row .tn { font: 400 19px/1.1 var(--display); color: var(--title); }
.top-row .tlp { font: 400 18px var(--display); color: var(--sub); }
.keys { display: grid; gap: 9px; }
.keys > div { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 10px; color: var(--sub); font-size: 13.5px; }
.keys > div > span { display: flex; gap: 4px; }
.parade { display: flex; justify-content: center; gap: 4px; padding: 18px 22px 40px; flex-wrap: wrap; }
.parade .pm { width: 96px; text-align: center; opacity: .75; transition: opacity .15s, transform .15s; cursor: default; }
.parade .pm:hover { opacity: 1; transform: translateY(-3px); }
.parade .pm img { width: 80px; height: 80px; display: block; margin: 0 auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.parade .pm span { font: 400 8px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   ROSTER TILES AND THE MONSTER SHEET
   ═══════════════════════════════════════════════════════════════════════════ */
.cols-setup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.col.side { position: sticky; top: 0; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.roster.compact { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.card { position: relative; background: linear-gradient(var(--mid), var(--sink)); border: 1px solid var(--edge); border-radius: 4px;
  padding: 6px 4px 7px; cursor: pointer; text-align: center; box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow .12s, transform .12s; }
.card:hover { box-shadow: 0 0 0 1px var(--torch-d) inset; transform: translateY(-1px); }
.card.sel { box-shadow: 0 0 0 1px var(--torch) inset, 0 0 18px rgba(240,165,60,.18) inset; background: linear-gradient(#262c3a, var(--sink)); }
.card.sel::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--torch); box-shadow: 0 0 6px var(--torch); }
.card img { width: 100%; aspect-ratio: 1; display: block; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), transparent 65%); }
.card .nm { font: 400 17px/1.05 var(--display); color: var(--title); margin-top: 2px; }
.card .el { font: 400 8px var(--label); letter-spacing: .12em; text-transform: uppercase; }
.roster.compact .nm { font-size: 15px; }

.sheet-head { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); }
.sheet-head .port { width: 112px; height: 112px; }
.sheet-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sheet-name h3 { font: 400 36px/1 var(--display); color: var(--torch); margin: 0; letter-spacing: .02em; }
.sheet-blurb { color: var(--sub); margin: 6px 0 12px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stat { background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
.stat b { display: block; font: 400 24px/1.05 var(--display); color: var(--title); font-weight: 400; }
.stat > span { font: 400 8px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.stat.good b { color: var(--good); } .stat.bad b { color: var(--bad); } .stat.torch b { color: var(--torch); }
.abil { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(42,50,66,.6); cursor: help; }
.abil:last-child { border-bottom: 0; }
.abil:hover { background: rgba(255,255,255,.025); }
.abil .slot { width: 40px; height: 40px; display: grid; place-items: center; font: 700 11px var(--label); color: var(--title);
  background: linear-gradient(var(--lift), var(--sink)); border: 1px solid var(--edge); border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,.07) inset; }
.abil .slot.ss { color: var(--ss); box-shadow: 0 0 0 1px var(--ss-d) inset; }
.abil .an { font: 400 21px/1 var(--display); color: var(--title); }
.abil .ad { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; color: var(--sub); font-size: 13px; }
.abil .dmg-n { font: 400 24px var(--display); color: #ffd6cf; text-align: right; line-height: 1; }
.abil .dmg-n small { display: block; font: 400 8px var(--label); letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.el-chip { display: inline-block; padding: 1px 6px; border-radius: 3px; font: 700 8px var(--label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--el); border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); background: color-mix(in srgb, var(--el) 10%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   ONLINE: sign in, the room browser, the lobby
   ═══════════════════════════════════════════════════════════════════════════ */
.gate { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.gate-card { width: 400px; max-width: 100%; padding: 28px; }
.gate-brand { font: 400 40px/1 var(--display); letter-spacing: .03em; color: var(--title); margin-bottom: 8px; }
.gate-brand span { color: var(--torch); }
.gate-card .sub { color: var(--sub); font-size: 14px; margin: 0 0 20px; }

.cols-online { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: stretch; min-height: 100%; }
.cols-online > .col:first-child { min-height: 520px; }
.live { display: inline-flex; align-items: center; gap: 5px; font: 700 8px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--good); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); animation: breathe 2s infinite; }
.live.off { color: var(--faint); } .live.off::before { background: var(--faint); box-shadow: none; animation: none; }
@keyframes breathe { 50% { opacity: .35; } }
.rooms-head, .room { display: grid; grid-template-columns: minmax(0, 1.6fr) 80px minmax(0, 1fr) 120px 104px; align-items: center; gap: 12px; padding: 0 14px; }
.rooms-head { height: 30px; border-bottom: 1px solid var(--line); font: 400 8px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); background: rgba(0,0,0,.2); }
.room { min-height: 62px; border-bottom: 1px solid rgba(42,50,66,.6); cursor: pointer; transition: background .1s; }
.room:hover { background: rgba(240,165,60,.04); }
.room.shut { cursor: default; opacity: .6; }
.room.shut:hover { background: none; }
.room .rh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.room .rh .port { width: 42px; height: 42px; }
.room .rn { font: 400 20px/1 var(--display); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .rm { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: nowrap; overflow: hidden; }
.room .rcode { font: 400 8px var(--label); letter-spacing: .14em; color: var(--faint); }
.room .mode { font: 400 22px var(--display); color: var(--title); }
.room .map { color: var(--sub); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.pips i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--line); background: var(--well); }
.pips i.a { background: var(--team-a); border-color: #2f5b8e; } .pips i.b { background: var(--team-b); border-color: #8a3a34; }
.pips i.bot { opacity: .5; }
.pips .n { font: 400 16px var(--display); color: var(--sub); margin-left: 6px; }
.room .ract { text-align: right; }
.me-top { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; align-items: center; }
.me-top .port { width: 64px; height: 64px; }
.me-top .cn { font: 400 26px/1 var(--display); color: var(--title); }
.me-top .lp { font: 400 17px var(--display); color: var(--sub); margin-left: 4px; }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.me-stats > div { padding: 8px 12px; border-right: 1px solid var(--line); }
.me-stats > div:last-child { border-right: 0; }
.me-stats b { display: block; font: 400 22px/1 var(--display); color: var(--title); font-weight: 400; }
.me-stats > div > span { font: 400 8px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.me-act { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.me-act .ghost { flex: 1; }
.joinrow { display: flex; gap: 8px; }
input.code { text-transform: uppercase; text-align: center; font: 400 26px/1 var(--display); letter-spacing: .3em; padding: 6px 10px; }
.joinrow .ghost { padding: 0 20px; }

.lobby-head { flex-direction: row; align-items: center; gap: 18px; padding: 12px 16px; flex-wrap: wrap; overflow: visible; }
.lh-code { display: flex; align-items: center; gap: 12px; }
.lh-code b { font: 400 40px/1 var(--display); color: var(--torch); letter-spacing: .14em; font-weight: 400; text-shadow: 0 0 20px rgba(240,165,60,.25); }
.lh-tags { display: flex; gap: 6px; }
.lh-set { margin-left: auto; display: flex; gap: 10px; align-items: end; }
.lh-set label { display: grid; gap: 3px; }
.lh-set label > span { font: 400 8px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.lh-set select { padding: 5px 8px; width: auto; min-width: 90px; }
.lh-set label.check { align-self: center; }
#lobby-settings-view { color: var(--sub); font: 400 20px var(--display); }
.teams { display: grid; grid-template-columns: 1fr 54px 1fr; gap: 12px; margin: 14px 0; align-items: stretch; }
.vs { display: grid; place-items: center; font: 400 34px var(--display); color: var(--faint); letter-spacing: .06em; }
.team .tdot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }
.team-A .tdot { background: var(--team-a); box-shadow: 0 0 8px var(--team-a); }
.team-B .tdot { background: var(--team-b); box-shadow: 0 0 8px var(--team-b); }
.team-A { border-color: #2f5b8e; } .team-B { border-color: #8a3a34; }
.team-A .wintitle { color: var(--team-a); } .team-B .wintitle { color: var(--team-b); }
.team ul { list-style: none; margin: 0; padding: 6px 0; flex: 1; min-height: 120px; }
.team li { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 12px; }
.team li .port { width: 48px; height: 48px; }
.team li .who { min-width: 0; }
.team li .pn { font: 400 21px/1 var(--display); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team li .pn.link { cursor: pointer; } .team li .pn.link:hover { color: var(--lit); }
.team li .pc { display: flex; gap: 8px; align-items: center; margin-top: 3px; font: 400 8px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.team li.open { opacity: .45; }
.team li.open .port { border-style: dashed; background: none; }
.team-foot { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.bot-add { display: flex; gap: 6px; }
.bot-add select { width: auto; padding: 4px 6px; font-size: 12px; }
.lobby-low { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
.lobby-actions { display: flex; gap: 12px; margin-top: 16px; align-items: center; }
.lobby-actions .primary.lg { min-width: 220px; }
body:not(.is-host) .host-only { display: none !important; }
body.is-host .guest-only { display: none !important; }

.chat { min-height: 0; }
.chat .log { flex: 1; height: 150px; overflow-y: auto; padding: 8px 12px; font-size: 13.5px; }
.chat .log div { padding: 1px 0; }
.chat .log b { color: var(--torch); font-weight: 600; margin-right: 4px; }
.chat input { border: 0; border-top: 1px solid var(--line); border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   LADDER AND PROFILE
   ═══════════════════════════════════════════════════════════════════════════ */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: rgba(11,14,20,.92); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.tile b { display: block; font: 400 30px/1 var(--display); color: var(--title); font-weight: 400; }
.tile > span:not(.rank-badge) { font: 400 8px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tile .rank-badge { font-size: 26px; }
.ladder-table { width: 100%; border-collapse: collapse; }
.ladder-table th { text-align: left; padding: 9px 14px; font: 400 8px var(--label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line); background: rgba(0,0,0,.2); position: sticky; top: 0; }
.ladder-table td { padding: 8px 14px; border-bottom: 1px solid rgba(42,50,66,.6); }
.ladder-table .num { text-align: right; font: 400 19px var(--display); }
.ladder-table th.num { font: 400 8px var(--label); }
.ladder-table tbody tr { cursor: pointer; transition: background .1s; }
.ladder-table tbody tr:hover { background: rgba(240,165,60,.045); }
.ladder-table tr.me { background: rgba(240,165,60,.08); box-shadow: 2px 0 0 var(--torch) inset; }
.ladder-table .pos { width: 56px; font: 400 22px var(--display); color: var(--faint); text-align: center; }
.ladder-table .pos.p1 { color: #ffd76a; text-shadow: 0 0 12px rgba(255,215,106,.4); } .ladder-table .pos.p2 { color: #cfd8e6; } .ladder-table .pos.p3 { color: #d69a66; }
.ladder-table .pl { display: flex; align-items: center; gap: 10px; }
.ladder-table .pl .port { width: 36px; height: 36px; }
.ladder-table .pl span { font: 400 20px var(--display); color: var(--title); }
.ladder-table .rec { font: 400 18px var(--display); color: var(--faint); }
.cw { color: var(--good); } .cl { color: var(--bad); }
.ladder-table .main img { width: 32px; height: 32px; vertical-align: middle; }

.modal { position: fixed; inset: 0; z-index: 60; background: rgba(4,6,10,.72); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; }
.profile-box { width: min(600px, 100%); max-height: calc(100vh - 32px); }
.profile-top { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
.fav { text-align: center; }
.fav .port { width: 150px; height: 150px; margin-bottom: 8px; }
.fav .lbl { display: block; }
.fav-n { font: 400 22px/1.1 var(--display); color: var(--torch); }
.fav-g { color: var(--faint); font-size: 12.5px; }
.fav-empty { width: 150px; height: 150px; display: grid; place-items: center; font: 400 60px var(--display); color: var(--line); border: 1px dashed var(--line); border-radius: 4px; margin-bottom: 8px; }
.pname { font: 400 44px/1 var(--display); color: var(--title); margin: 0 0 10px; letter-spacing: .02em; }
.big-rank { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.big-rank i { width: 30px; height: 30px; transform: rotate(45deg); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 70%, #fff), var(--rc) 55%, color-mix(in srgb, var(--rc) 55%, #000));
  box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 50%, transparent); border: 1px solid rgba(0,0,0,.6); margin: 0 4px; }
.big-rank b { display: block; font: 400 30px/1 var(--display); color: var(--rc); font-weight: 400; }
.big-rank span { font: 400 18px var(--display); color: var(--sub); }
.stats.six { grid-template-columns: repeat(3, 1fr); margin: 18px 0 4px; }
.mons { display: flex; flex-wrap: wrap; gap: 6px; }
.mon { position: relative; }
.mon .port { width: 48px; height: 48px; }
.mon span { position: absolute; right: 3px; bottom: 1px; font: 400 15px var(--display); color: var(--title); text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.fine { color: var(--faint); font-size: 12px; margin: 14px 0 0; }

/* ── HELP ── */
.help { padding: 18px 22px 24px; }
.help p { color: var(--sub); line-height: 1.65; margin: 0 0 8px; }
.help p b { color: var(--title); }
.help .lead { color: var(--text); font-size: 16px; }
.help .keys > div { grid-template-columns: 150px 1fr; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════════════════════ */
.tip { position: fixed; z-index: 100; width: 300px; pointer-events: none; background: rgba(11,14,20,.97); border: 1px solid var(--torch-d);
  border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.75); padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.tip-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 6px; }
.tip-h b { font: 400 22px/1 var(--display); color: var(--torch); font-weight: 400; }
.tip-slot { font: 400 8px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tip-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.tip-el { display: inline-block; padding: 1px 6px; border-radius: 3px; font: 700 8px var(--label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--el); border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); background: color-mix(in srgb, var(--el) 10%, transparent); }
.tip-el.sm { font-size: 7px; padding: 0 4px; }
.tip-ss { font: 700 8px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ss); }
.tip-dmg { margin-bottom: 8px; }
.tip-dmg > b { font: 400 30px/1 var(--display); color: #ffd6cf; font-weight: 400; }
.tip-dmg .x { font: 400 18px var(--display); color: var(--torch); }
.tip-dmg small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.tip-grid > div { background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; }
.tip-grid b { display: block; font: 400 17px/1.1 var(--display); color: var(--title); font-weight: 400; }
.tip-grid span { font: 400 7px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tip-eff { border-left: 2px solid var(--ss); background: rgba(167,123,255,.07); padding: 5px 8px; border-radius: 0 3px 3px 0; margin-bottom: 6px; color: var(--text); }
.tip-eff b { display: block; font: 700 8px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ss); margin-bottom: 2px; }
.tip-eff.none { border-color: var(--line); background: none; color: var(--faint); }
.tip-trait { color: var(--sub); font-size: 12.5px; padding-left: 12px; position: relative; }
.tip-trait::before { content: ""; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; transform: rotate(45deg); background: var(--torch-d); }
.tip-line { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(42,50,66,.6); }
.tip-line .k { font: 700 8px var(--label); color: var(--sub); }
.tip-line b { font: 400 17px/1 var(--display); color: var(--title); font-weight: 400; }
.tip-line .dm { font: 400 16px var(--display); color: #ffd6cf; }
.tip-fx { font: 700 7px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ss); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE MATCH
   ═══════════════════════════════════════════════════════════════════════════ */
#game.screen { position: fixed; inset: 0; z-index: 30; background: #000; height: auto; overflow: hidden; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; cursor: grab; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* above each monster */
.tag-u { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; }
.tag-u .n { font: 400 18px/1 var(--display); letter-spacing: .03em; text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 6px rgba(0,0,0,.8); }
.tag-u.A .n { color: #9cc8ff; } .tag-u.B .n { color: #ffa39b; }
.tag-u .hpb { position: relative; width: 74px; height: 11px; margin: 3px auto 0; background: var(--well); border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tag-u .hpb i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#5ccc66, var(--hp-d)); transition: width .3s; }
.tag-u.B .hpb i { background: linear-gradient(#f07d74, #a8362f); }
.tag-u.A .hpb i { background: linear-gradient(#7fb8ff, #3169b3); }
.tag-u .hpb span { position: relative; display: block; font: 400 7px/10px var(--label); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 0 #000; }
.tag-u .st { display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
.tag-u .st:empty { display: none; }
.tag-u .st span { font: 700 7px var(--label); letter-spacing: .1em; text-transform: uppercase; padding: 1px 4px; border-radius: 2px; background: rgba(0,0,0,.7); border: 1px solid; }
.tag-u .st .bind { color: #d3a8ff; border-color: #6a4a9a; } .tag-u .st .poison { color: #8dff5a; border-color: #3d7a27; } .tag-u .st .burn { color: #ffae6a; border-color: #8a4a1d; }
.tag-u.cur::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 auto 5px; transform: rotate(45deg); background: var(--torch);
  box-shadow: 0 0 10px var(--torch); animation: bob .7s infinite alternate ease-in-out; }
@keyframes bob { to { transform: translateY(-5px) rotate(45deg); } }
.dmg { position: absolute; transform: translate(-50%, -50%); font: 400 34px var(--display); color: #ffe0d8; letter-spacing: .02em;
  text-shadow: 0 2px 0 #6a0f0a, 0 0 8px #000; animation: rise 1.4s ease-out forwards; }
.dmg.heal { color: #c8ffc8; text-shadow: 0 2px 0 #0a4a12, 0 0 8px #000; }
.dmg.dot { font-size: 26px; color: #dcc4ff; }
@keyframes rise { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -64px; } }

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .win { background: rgba(11,14,20,.86); }

.hud-order { position: absolute; top: 12px; left: 12px; width: 236px; max-height: 45vh; }
.turn-order { overflow: auto; padding: 4px 0; }
.to { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 3px 10px 3px 8px; border-left: 2px solid transparent; }
.to .port { width: 30px; height: 30px; }
.to .tn { font: 400 17px/1 var(--display); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to .d { font: 400 16px var(--display); color: var(--faint); }
.to.A { border-left-color: var(--team-a); } .to.B { border-left-color: var(--team-b); }
.to.cur { background: linear-gradient(90deg, rgba(240,165,60,.16), transparent); }
.to.cur .tn { color: var(--lit); }
.to.dead { opacity: .35; } .to.dead .tn { text-decoration: line-through; }

.hud-wind { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); flex-direction: row; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; }
.wind-dial { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, #1b2130, var(--well) 70%);
  border: 1px solid var(--line); box-shadow: 0 0 0 3px var(--well), 0 0 0 4px var(--line); }
.wind-dial::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(124,134,152,.25); }
.wind-arrow { position: absolute; left: 50%; top: 50%; width: 20px; height: 4px; margin-top: -2px; background: var(--torch); transform-origin: 0 50%;
  border-radius: 2px; transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .3s; box-shadow: 0 0 8px rgba(240,165,60,.6); }
.wind-arrow::after { content: ""; position: absolute; right: -7px; top: -4px; border: 6px solid transparent; border-left: 8px solid var(--torch); border-right: 0; }
.wind-t { display: grid; justify-items: center; }
.wind-n { font: 400 36px/1 var(--display); color: var(--title); font-weight: 400; }

.hud-tr { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.timer-box { flex-direction: row; align-items: baseline; gap: 10px; padding: 4px 14px 6px; }
.timer { font: 400 40px/1 var(--display); color: var(--title); min-width: 44px; text-align: right; font-weight: 400; }
.timer.low { color: #ff6b5e; text-shadow: 0 0 12px rgba(255,107,94,.5); }
.mm { padding: 4px; }
#minimap { display: block; width: 240px; height: 120px; image-rendering: pixelated; background: rgba(0,0,0,.35); border-radius: 2px; }

.banner { position: absolute; left: 50%; top: 24%; transform: translate(-50%, 8px); font: 400 56px/1 var(--display); letter-spacing: .06em;
  text-transform: uppercase; color: var(--torch); text-shadow: 0 3px 0 #000, 0 0 24px rgba(0,0,0,.9), 0 0 50px rgba(240,165,60,.25);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.banner.show { opacity: 1; transform: translate(-50%, 0); }

.hud-bottom { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center;
  background: rgba(11,14,20,.92); border: 1px solid var(--torch-d); border-radius: 4px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.hud-bottom.idle { border-color: var(--line); }
.hud-bottom.idle .shots, .hud-bottom.idle .power-box { opacity: .55; }
.hud-bottom .sep { width: 1px; align-self: stretch; background: var(--line); }
.me-card { display: flex; gap: 10px; align-items: center; }
.me-port { width: 62px; height: 62px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #232b3a, var(--well) 70%);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.me-port img { width: 100%; height: 100%; object-fit: contain; }
.me-text { width: 168px; }
.me-name { font: 400 20px/1 var(--display); color: var(--torch); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { position: relative; height: 14px; background: var(--well); border: 1px solid var(--edge); border-radius: 2px; margin-top: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#5ccc66, var(--hp-d)); transition: width .3s; }
.bar.ss i { background: linear-gradient(#c3a2ff, var(--ss-d)); }
.bar.ss.full i { animation: pulse .6s infinite alternate; }
@keyframes pulse { to { filter: brightness(1.45); } }
.bar span { position: relative; display: block; text-align: center; font: 400 8px/13px var(--label); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 #000; }
.angle-box { position: relative; width: 96px; height: 96px; }
.angle-box canvas { width: 96px; height: 96px; }
.angle-n { position: absolute; bottom: 2px; right: 2px; font: 400 26px/1 var(--display); color: var(--title); }
.power-box { width: 330px; }
.pb-l { display: flex; justify-content: space-between; margin: 2px 0 3px; }
.power-bar { position: relative; height: 26px; background: var(--well); border: 1px solid var(--edge); border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.power-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffd66a, var(--torch) 55%, #ff5d3b);
  box-shadow: 0 0 12px rgba(240,165,60,.5); }
.power-bar b { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; left: 0; }
.power-bar .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.55) calc(10% - 1px) 10%); }
.stamina-bar { position: relative; height: 8px; background: var(--well); border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.stamina-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7fb8ff, #3169b3); }
.shots { display: flex; gap: 6px; }
.shots button { position: relative; width: 84px; height: 64px; padding: 16px 4px 4px; cursor: pointer; text-align: center;
  background: linear-gradient(var(--lift), var(--mid) 55%, var(--sink)); border: 1px solid var(--edge); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 2px 0 var(--edge); transition: box-shadow .12s, transform .08s; }
.shots button:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--torch-d) inset, 0 2px 0 var(--edge); }
.shots button .k { position: absolute; top: 4px; left: 6px; font: 700 8px var(--label); color: var(--sub); }
.shots button .nm { display: block; font: 400 16px/1 var(--display); color: var(--title); }
.shots button .dm { display: block; font: 400 8px var(--label); letter-spacing: .08em; color: var(--faint); margin-top: 3px; text-transform: uppercase; }
.shots button.sel { box-shadow: 0 0 0 1px var(--torch) inset, 0 0 16px rgba(240,165,60,.25) inset, 0 2px 0 var(--edge); }
.shots button.sel .k, .shots button.sel .nm { color: var(--lit); }
.shots button.ss .k { color: var(--ss); }
.shots button.ss:not(:disabled) { box-shadow: 0 0 0 1px var(--ss-d) inset, 0 0 14px rgba(167,123,255,.25) inset, 0 2px 0 var(--edge); }
.shots button.ss.sel:not(:disabled) { box-shadow: 0 0 0 1px var(--ss) inset, 0 0 18px rgba(167,123,255,.4) inset, 0 2px 0 var(--edge); }
.shots button:disabled { cursor: default; opacity: .4; }
.hud-actions { display: flex; flex-direction: column; gap: 4px; }
.hud-actions .ghost { min-width: 72px; }

.result { position: absolute; inset: 0; background: rgba(4,6,10,.72); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 5; }
.result-box { width: 420px; max-width: calc(100% - 32px); padding: 26px 28px; text-align: center; align-items: center; }
.result-box h2 { font: 400 64px/1 var(--display); letter-spacing: .04em; margin: 8px 0 6px; color: var(--torch); font-weight: 400; text-shadow: 0 3px 0 #000, 0 0 30px rgba(240,165,60,.3); }
.result-box h2.lose { color: #c9d1dd; text-shadow: 0 3px 0 #000; }
.result-box p { color: var(--sub); margin: 0 0 18px; }
.result-rank { width: 100%; background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 12px; margin-bottom: 18px; display: grid; gap: 6px; justify-items: center; }
.lp-delta { font: 400 44px/1 var(--display); }
.lp-delta.up { color: var(--good); } .lp-delta.down { color: var(--bad); }
.lp-now { font: 400 18px var(--display); color: var(--sub); }
.rank-move { font: 700 9px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.rank-move.up { color: var(--torch); } .rank-move.down { color: var(--dim); }
.game-chat { position: absolute; left: 12px; bottom: 150px; width: 320px; }
.game-chat .log { height: 110px; }

.loading { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--ink); }
.spin { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--torch); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   SMALLER WINDOWS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .hud-bottom { transform: translateX(-50%) scale(.84); transform-origin: 50% 100%; }
  .power-box { width: 250px; }
  .hud-order { width: 200px; }
}
@media (max-width: 1000px) {
  .navb span { display: none; }
  .home-grid, .cols-setup, .cols-online, .lobby-low { grid-template-columns: 1fr; }
  .col.side { position: static; }
  .hero-title { font-size: 76px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .rooms-head, .room { grid-template-columns: minmax(0, 1fr) 60px 100px 96px; }
  .rooms-head span:nth-child(3), .room .map { display: none; }
}
@media (max-width: 640px) {
  .rail { gap: 10px; padding: 0 10px; }
  .brand { font-size: 24px; }
  .chip .cn, .chip .rank-badge { display: none; }
  .teams { grid-template-columns: 1fr; }
  .vs { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 14px 12px 32px; }
}