/* Client theme: deep-space holotable. Dark navy field with a tactical amber
   readout accent. Platform layout mirrors the owner's Global 1940 lobby. */
:root {
  --bg: #0a0f1e;
  --panel: #111a30;
  --line: #22304f;
  --ink: #dbe4f5;
  --dim: #7e8db0;
  --accent: #f0b429;      /* tactical amber */
  --accent-ink: #1a1200;
  --danger: #e5484d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* beat any display rule on hidden elements */
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line); }
h1 { font-size: 18px; letter-spacing: .35em; margin: 0; }
h1 span { color: var(--accent); }
h2 { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
/* The in-game view is an app screen, not a document — let it use the full
   viewport width so the map can be as large as possible. */
main.game-layout { max-width: none; margin: 12px auto 0; padding: 0 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.cols { display: flex; gap: 16px; align-items: flex-start; }
.grow { flex: 1; }
.side { width: 320px; }
.row { display: flex; gap: 8px; margin-top: 8px; }
.spread { justify-content: space-between; align-items: center; }
input, select { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: 8px 10px; }
button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px;
  padding: 8px 14px; font-weight: 600; cursor: pointer; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ul { list-style: none; padding: 0; margin: 8px 0; }
li { padding: 8px; border-bottom: 1px solid var(--line); }
.error { color: var(--danger); min-height: 1.2em; }
.dim { color: var(--dim); }
.wrap { flex-wrap: wrap; }
@media (max-width: 800px) { .cols { flex-direction: column; } .side { width: 100%; } }

/* ===================== In-game UI (mobile-first) ===================== */
:root {
  --imp: #7aa2ff;
  --reb: #ff9457;
}
.imp { color: var(--imp); } .reb { color: var(--reb); }

.turnbar { display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.turnbar .phase { color: var(--accent); text-transform: uppercase; letter-spacing: .15em; }
.turnbar .your-turn { color: var(--accent); font-weight: 700; }

/* Folded phone: single column, map first. */
.game-layout { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.map-panel { padding: 8px; position: relative; }
/* Always-visible key for the per-planet production icons. A slim inline strip
   BELOW the map (not an overlay) so it never covers a planet — the galaxy fills
   every corner of the frame, leaving nowhere on the board it wouldn't hide one. */
.map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px;
  margin: 6px 4px 0; font-size: 11px; color: var(--dim); }
.map-legend .ml-title { color: var(--accent); font-weight: 700; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; }
.map-legend .ml-grp { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.map-legend .ml-sw { width: 8px; height: 8px; border-radius: 2px; border: 1px solid #05070d; margin-left: 4px; }
.map-legend .ml-grp .ml-sw:first-child { margin-left: 0; }
.map-legend .ml-ground { background: #f2a233; }
.map-legend .ml-space { background: #4d9be6; }
.map-legend .ml-shape { color: var(--ink); margin-left: 4px; }
.map-legend .ml-grp .ml-shape:first-child { margin-left: 0; }
/* Default (folded phone, and any squarish/portrait screen incl. an unfolded
   foldable): the map spans the FULL width on top of the side panel at the
   galaxy's natural aspect — the biggest whole-galaxy view for that width.
   pan-y keeps page scroll alive at base zoom; map.js flips touch-action to
   none when zoomed. Wide landscape screens switch to two columns below. */
#galaxyMap { width: 100%; height: auto; display: block; touch-action: pan-y;
  background: radial-gradient(circle at 50% 40%, #0c1424 0%, #070b16 100%);
  border-radius: 8px; }
.hint { margin: 6px 4px 0; font-size: 13px; color: var(--dim); min-height: 1.2em; }
.hint.error { color: var(--danger); }

.side-panel { display: flex; flex-direction: column; gap: 0; }
.tabs { display: flex; gap: 6px; margin-bottom: -1px; }
.tab { background: transparent; color: var(--dim); border: 1px solid var(--line);
  border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px 14px; }
.tab.active { color: var(--accent); background: var(--panel); }
.tabpane { border-top-left-radius: 0; }
.scrolly { max-height: 40vh; overflow-y: auto; }
ul.tight li { padding: 4px 2px; font-size: 13px; border-bottom: 1px solid var(--line); }

/* Wide LANDSCAPE screens only (real desktops / a foldable held sideways):
   map beside the side panel. The map takes most of the width and fills the
   viewport height (the side panel is usually taller and scrolls), so there's
   no dead space. Squarish/portrait screens keep the full-width stacked map
   above — a wide galaxy can't fill a tall narrow column without shrinking. */
@media (min-width: 860px) and (min-aspect-ratio: 4/3) {
  .game-layout { flex-direction: row; align-items: flex-start; }
  .map-panel { flex: 3; position: sticky; top: 12px; align-self: flex-start;
    display: flex; flex-direction: column; height: calc(100dvh - 24px); }
  /* Fill the panel explicitly (width:100%/height:100%) instead of letting the
     SVG shrink to its intrinsic aspect — otherwise the galaxy floats small in
     the middle. preserveAspectRatio centres the galaxy inside. */
  #galaxyMap { flex: 1; min-height: 0; width: 100%; height: 100%; }
  .map-panel .hint { flex: 0 0 auto; }
  .side-panel { flex: 1; min-width: 300px; max-width: 400px; }
}

/* --- map (board-style territory regions) --- */
.cell-fill { stroke: none; }        /* fill-opacity set inline per loyalty (space vs tint) */
/* three-tier borders, board colours */
.map-border-planet { stroke: #3d7fe0; stroke-width: 1.4; }              /* planets in a system */
.map-border-system { stroke: #f0b83c; stroke-width: 4; stroke-linecap: round; } /* between systems */
.map-impass-bar { stroke: #e42d2d; stroke-width: 6; stroke-linecap: round; }    /* impassable */
.map-lane { stroke: #f0b83c; stroke-width: 4; stroke-linecap: round; opacity: .9; }
.map-frame { fill: none; stroke: #f0b83c; stroke-width: 5; rx: 6; }     /* galaxy edge */
.map-body { fill: #0d1526; }
.map-name { fill: #f2f5fb; font-size: 10px; font-weight: 600; text-anchor: middle;
  paint-order: stroke; stroke: #05070d; stroke-width: 2.4; stroke-linejoin: round; }
.map-markers { fill: var(--accent); font-size: 15px; text-anchor: middle;
  paint-order: stroke; stroke: #05070d; stroke-width: 2; }
.pick-ring { stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 5 4;
  animation: spin-ring 6s linear infinite; }
/* stationed unit sprites */
.map-unit-glyph { font-size: 9px; font-weight: 700; text-anchor: middle; }
.map-unit-count-bg { stroke: #0a0f1e; stroke-width: 1; }
.map-unit-count { fill: #0a0f1e; font-size: 8px; font-weight: 700; text-anchor: middle; }
.map-more { fill: #dfe5ef; font-size: 11px; font-weight: 700; text-anchor: middle; }
.map-system { cursor: pointer; }
.map-system.dimmed { opacity: .4; }
.map-system.pickable .cell-fill { stroke: var(--accent); stroke-width: 2.5; }
@keyframes spin-ring { to { stroke-dashoffset: -90; } }

/* --- chips (leaders, probe cards, tactic cards) --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; text-align: left;
  min-height: 44px; touch-action: none; }
.chip.leader { flex-direction: row; align-items: center; gap: 7px; }
.chip .chip-text { display: flex; flex-direction: column; gap: 1px; }
.chip-portrait { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.uicon { width: 22px; height: 22px; vertical-align: -6px; margin-right: 4px; object-fit: contain; }
.chip.leader.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.chip.leader.unavailable { opacity: .45; }
/* ⓘ affordance opening the leader's Action Card detail sheet. */
.chip-info { margin-left: auto; align-self: flex-start; color: var(--accent);
  font-size: 14px; line-height: 1; padding: 2px 2px 4px 6px; opacity: .8; }
.chip-info:hover { opacity: 1; }
/* Leader detail sheet */
.ls-top { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.ls-portrait { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.ls-h { margin: 10px 0 6px; }
.ls-card { border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: var(--bg); }
.ls-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.ls-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.chip.tactic { border-color: var(--accent); min-height: 40px; }
.drag-ghost { position: fixed; z-index: 50; pointer-events: none; opacity: .85;
  transform: translate(-50%, -60%); box-shadow: 0 6px 18px rgba(0,0,0,.5); }

/* --- cards --- */
.card-col { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.mission-card { display: flex; flex-direction: row; align-items: stretch; gap: 10px; background: var(--bg);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.mission-card .mc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mission-card.assigned { border-left-color: var(--dim); }
.mission-card.objective { border-left-color: var(--reb); }
.mission-card button { align-self: flex-start; padding: 6px 12px; font-size: 12px; }
.mission-card button:disabled { opacity: .4; cursor: default; }
/* Card FACE thumbnail: one cell of the mod's card atlas, cropped by an
   overflow-hidden frame around an oversized <img>. Portrait card aspect. */
.card-face { display: block; position: relative; overflow: hidden; flex: 0 0 auto;
  width: 54px; aspect-ratio: 63 / 88; border-radius: 4px; background: #05070d;
  border: 1px solid var(--line); }
.card-face img { display: block; }
.card-face.cf-click { cursor: zoom-in; }
.ls-card { display: flex; gap: 10px; align-items: flex-start; }
.ls-card .ls-card-body { min-width: 0; flex: 1; }
.ls-face { width: 68px; }
.tac-face { width: 30px; margin-right: 6px; }
.chip.tactic { display: inline-flex; align-items: center; }
/* Full-size card popup (tap the overlay to dismiss). */
.card-zoom { cursor: zoom-out; z-index: 70; }
.card-zoom-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.card-zoom-face { width: min(78vw, 46vh); border-width: 2px; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.card-zoom-face.cf-fail img { display: none; }
.card-zoom-face.cf-fail::after { content: 'image unavailable'; position: absolute;
  inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; }
.cz-label { color: var(--ink); font-weight: 600; letter-spacing: .04em; text-align: center; }

#actionBar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
#actionBar button { min-height: 44px; }
#combatPanel { border: 1px solid var(--danger); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
#combatPanel .force { margin: 4px 0; font-size: 13px; }

/* battle dice (symbol faces: ⚔ hit, ✷ crit, ⚡ tactic) */
.dice-block { margin: 6px 0; font-size: 12px; }
.dice-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.cdie { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px; font-size: 11px; }
.cdie.red { background: #3a1215; box-shadow: inset 0 0 0 1px #b0383e; color: #ffb3b6; }
.cdie.black { background: #10141f; box-shadow: inset 0 0 0 1px #46536e; color: #c8d2e8; }
.cdie.green { background: #12331f; box-shadow: inset 0 0 0 1px #3f9d63; color: #a6f0c2; }
.cdie.blank { opacity: .45; }
.chip-text .minor { opacity: .7; font-size: .92em; }
.build-sys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line, #22304d); }
.build-sys strong { min-width: 120px; }
select.build-slot { background: #131c2f; color: inherit; border: 1px solid #2f3f5e; border-radius: 6px; padding: 4px 8px; font: inherit; }
.build-slot.dim { opacity: .6; }

/* pulses when the engine is waiting on YOU (any phase) */
.turnbar.attention { animation: turnpulse 1.6s ease-in-out 3; border-radius: 6px; }
@keyframes turnpulse { 50% { box-shadow: 0 0 14px rgba(240, 180, 41, .8); } }

/* deploy update banner (server boot id changed) */
#updateBanner { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 10px 14px; z-index: 200; display: flex; gap: 10px; align-items: center;
  font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.6); max-width: 92vw; }

/* --- planetary battlefield grid --- */
.battle-grid { display: grid; gap: 2px; margin: 10px 0; }
.battle-grid .cell { position: relative; aspect-ratio: 1; border-radius: 3px;
  background: #101a30; min-height: 26px; }
.battle-grid .cell.rough { background: #2a2417; }
.battle-grid .cell.cover { background: #12301f; box-shadow: inset 0 0 0 1px #2c6e49; }
.battle-grid .cell.block { background: #05070d; box-shadow: inset 0 0 0 1px #1a2340; }
.battle-grid .cell img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.battle-grid .cell b { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12px; }
.battle-grid .cell .hp { position: absolute; right: 1px; bottom: 0; font-size: 9px;
  color: var(--ink); background: rgba(0,0,0,.55); border-radius: 3px; padding: 0 2px; }
.battle-grid .imp-cell { box-shadow: inset 0 0 0 2px var(--imp); }
.battle-grid .reb-cell { box-shadow: inset 0 0 0 2px var(--reb); }
.battle-grid .selectable { cursor: pointer; }
.battle-grid .selected { box-shadow: inset 0 0 0 2px var(--accent); }
.battle-grid .move-target { cursor: pointer; background: #2b2a12;
  box-shadow: inset 0 0 0 1px var(--accent); }
.battle-grid .staged { box-shadow: inset 0 0 0 2px var(--accent); background: #3a3413; }
.battle-grid .attack-target { cursor: pointer; box-shadow: inset 0 0 0 2px var(--danger); }
.battle-grid .staged-target { background: #3a1215; }

/* --- overlays --- */
.overlay { position: fixed; inset: 0; background: rgba(4, 7, 15, .8);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.overlay-card { max-width: 420px; width: 100%; }

/* Battle board: the combat panel promoted to a dramatic centered overlay. */
.battle-overlay { z-index: 400; background: rgba(3, 6, 14, .86); backdrop-filter: blur(2px); }
.battle-board { max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(240, 184, 60, .3), 0 24px 70px rgba(0, 0, 0, .65); }
.bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bb-head h2 { margin: 0; }
.bb-round { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #f0b83c; white-space: nowrap; }
.cdie { transition: transform .1s; }
@keyframes diecast { 0% { transform: scale(.35) rotate(-28deg); opacity: 0; }
  55% { transform: scale(1.22) rotate(9deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.cdie.rolling { animation: diecast .4s cubic-bezier(.2, 1.35, .5, 1) both; }
@media (prefers-reduced-motion: reduce) { .cdie.rolling { animation: none; } }
.move-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.move-row input { max-width: 70px; flex: 0 0 auto; min-height: 40px; }
#chatDot { color: var(--accent); }

/* ===================== Platform UI (lobby / friends / admin) ===================== */
button.small { padding: 4px 10px; font-size: 12px; min-height: 30px; }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
button.block { width: 100%; margin-top: 10px; min-height: 44px; }
h3 { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim);
  margin: 14px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.hdr-actions { align-items: center; margin-top: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
@media (max-width: 560px) {
  header { padding: 10px 12px; }
  h1 { font-size: 14px; letter-spacing: .2em; }
  .userbox .dim { display: none; } /* keep rank + name, drop the stat string */
}
.iconbtn { position: relative; font-size: 16px; padding: 6px 10px; min-height: 38px; }
.notif-badge { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff;
  border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 5px; min-width: 16px; }
/* Red "you must act" count — on your-turn game cards and the Games tab. */
.action-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  height: 18px; padding: 0 5px; background: var(--danger); color: #fff; border-radius: 9px; font-size: 10px;
  font-weight: 700; box-shadow: 0 0 7px rgba(229, 72, 77, .7); animation: badgepulse 2s ease-in-out infinite; }
@keyframes badgepulse { 0%, 100% { box-shadow: 0 0 6px rgba(229, 72, 77, .5); } 50% { box-shadow: 0 0 11px rgba(229, 72, 77, .9); } }
@media (prefers-reduced-motion: reduce) { .action-badge { animation: none; } }
.userbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.push-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
  border-radius: 50%; background: #58c470; animation: pushpulse 1.9s ease-in-out infinite; }
@keyframes pushpulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.5); opacity: .4; } }
.rank { display: inline-flex; vertical-align: -2px; }
.dot { color: var(--accent); font-size: 9px; vertical-align: 2px; }

/* auth */
.auth-box { max-width: 380px; margin: 8vh auto 0; }
.auth-title { text-align: center; font-size: 20px; letter-spacing: .3em; margin: 4px 0 14px; }
.auth-title span { color: var(--accent); }
.auth-box input { width: 100%; margin-top: 10px; }
.auth-tabs { margin-bottom: 6px; }

/* lobby columns: left (my games) / center (open games) / right (friends+chat) */
.mobile-tabs { display: none; }
.lobby-cols { display: flex; gap: 14px; align-items: flex-start; }
.lcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lcol-left { width: 280px; flex: 0 0 280px; }
.lcol-center { flex: 1; }
.lcol-right { width: 320px; flex: 0 0 320px; }
@media (max-width: 900px) {
  main { margin: 12px auto; }
  .mobile-tabs { display: flex; margin-bottom: 12px; }
  .lobby-cols { flex-direction: column; }
  .lcol { width: 100%; flex: 1 1 auto; }
  /* pane switching: show only the active tab's sections */
  .lobby-cols[data-active="games"] .lcol-right { display: none; }
  .lobby-cols[data-active="friends"] .lcol-left,
  .lobby-cols[data-active="friends"] .lcol-center,
  .lobby-cols[data-active="friends"] [data-pane="chat"] { display: none; }
  .lobby-cols[data-active="chat"] .lcol-left,
  .lobby-cols[data-active="chat"] .lcol-center,
  .lobby-cols[data-active="chat"] [data-pane="friends"] { display: none; }
}

/* game cards */
.card-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#gameSearch { width: 100%; margin-top: 8px; }
.game-card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; }
.game-card:hover { border-color: var(--accent); }
.game-card .row { margin-top: 0; align-items: center; }
.game-card.your-turn-card { border-left: 3px solid #58c470; }
.game-card.finished { cursor: pointer; }
.gc-sub { font-size: 12px; margin-top: 2px; }
.gc-status { font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.gc-status.lobby { color: var(--accent); }
.gc-status.active { color: #58c470; }
.gc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line);
  border-radius: 9px; padding: 1px 7px; color: var(--dim); }
.tag.locked { color: var(--danger); border-color: var(--danger); }
.tag.ranked { color: var(--accent); border-color: var(--accent); }
.tag.era { color: var(--imp); border-color: var(--imp); }
.tag.friend { color: #58c470; border-color: #58c470; }
.gc-turn { margin-top: 6px; font-size: 12px; font-weight: 600; }
.gc-turn.yours { color: #58c470; }
.gc-turn.theirs { color: var(--dim); }
.gc-actions { margin-top: 8px; display: flex; gap: 6px; }
.won { color: #58c470; font-weight: 700; }
.lost { color: var(--danger); font-weight: 700; }

/* friends */
.friend-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.friend-row .fr-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.friend-row .fr-actions { margin-left: auto; display: flex; gap: 4px; }
.pres { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #3d4c6e; }
.pres.on { background: #58c470; box-shadow: 0 0 6px #58c470; }
.chat-log { max-height: 46vh; min-height: 120px; }

/* notifications dropdown */
.dropdown { position: fixed; top: 58px; right: 12px; width: 340px; max-width: calc(100vw - 24px);
  max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; z-index: 60; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.drop-head { padding: 10px 12px 0; }
.drop-list { padding: 6px 0 8px; }
.notif { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.notif.unread { border-left: 3px solid var(--accent); background: rgba(240, 180, 41, .06); }
.notif-type { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* modals */
.modal-card { max-width: 440px; max-height: 86vh; overflow-y: auto; }
.modal-wide { max-width: 720px; width: 100%; }
.field { display: block; margin-top: 10px; font-size: 13px; color: var(--dim); }
.field input, .field select { width: 100%; margin-top: 4px; color: var(--ink); }
.check { display: block; margin-top: 10px; font-size: 13px; }
.check input { margin-right: 6px; }

/* leaderboard */
.lb-grid { margin-top: 8px; }
.lb-row { display: grid; grid-template-columns: 34px 1fr 52px 46px 46px 56px; gap: 4px;
  align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lb-row.lb-head { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.lb-row.me { background: rgba(240, 180, 41, .1); font-weight: 700; }
.lb-name { display: flex; align-items: center; gap: 5px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.lb-elo { color: var(--accent); font-weight: 700; }

/* admin */
.adm-section { margin-top: 16px; }
.adm-section input, .adm-section select { width: auto; }
.adm-section > input { width: 100%; margin-bottom: 6px; }
.adm-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.adm-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.adm-stat b { font-size: 16px; color: var(--accent); }
.adm-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.adm-row { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-top: 8px; font-size: 13px; }
.adm-row .row { margin-top: 6px; }
.adm-edit .stepper { display: inline-flex; align-items: center; gap: 3px; }
.stepper input { width: 54px; text-align: center; flex: 0 0 auto; padding: 4px; }
.adm-audit { font-size: 12px; padding: 5px 2px; border-bottom: 1px solid var(--line); }

/* ===================== Pre-game lobby (game.html) ===================== */
.pl-header { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap; }
.pl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-body { display: flex; gap: 14px; margin-top: 12px; align-items: flex-start; flex-wrap: wrap; }
.pl-col { flex: 1; min-width: 260px; }
.seat-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-top: 8px; font-size: 14px; min-height: 56px; cursor: pointer; }
.seat-row .seat-side { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.seat-row .seat-status { font-size: 12px; color: var(--dim); }
.seat-row.imp { border-left: 3px solid var(--imp); }
.seat-row.reb { border-left: 3px solid var(--reb); }
.seat-row.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.seat-row.taken { cursor: default; }
.seat-row.open .seat-status { color: var(--accent); }
.seat-row.ai .seat-status { color: #58c470; }
.seat-row[disabled] { cursor: default; opacity: .95; }
.seat-wrap { display: flex; align-items: stretch; gap: 6px; }
.seat-wrap .seat-row { flex: 1; }
.seat-wrap .ai-toggle { margin-top: 8px; white-space: nowrap; align-self: center; }
.pl-player { display: flex; align-items: center; gap: 7px; padding: 6px 2px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.pl-player .fr-actions { margin-left: auto; }
.setting-row { display: flex; justify-content: space-between; padding: 5px 2px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.pl-chat { max-height: 40vh; min-height: 100px; }
a.btn { display: inline-flex; align-items: center; background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px; padding: 8px 14px; font-weight: 600;
  text-decoration: none; font-size: 14px; }

/* ---- tutorial coach --------------------------------------------------------
   A corner card that teaches a first-time player as they go (tutorial games).
   Sits above the board but out of the way; collapses to a small chip. */
.tut-coach {
  position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 14px 16px 12px;
  animation: tutpop .25s ease; }
@keyframes tutpop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tut-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tut-badge { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 9px; }
.tut-stepno { font-size: 11px; }
.tut-min { margin-left: auto; padding: 2px 9px; line-height: 1; font-size: 16px; }
.tut-coach h3 { margin: 2px 0 6px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.tut-body { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.tut-body b { color: var(--accent); }
.tut-blue { color: var(--imp); font-weight: 700; }
.tut-red { color: var(--reb); font-weight: 700; }
.tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tut-chip {
  position: fixed; z-index: 60; right: 16px; bottom: 16px;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
  padding: 10px 16px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
/* Soft amber pulse on whatever UI the current step is talking about. */
.tut-target { position: relative; animation: tutglow 1.6s ease-in-out infinite; border-radius: 8px; }
@keyframes tutglow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
  50% { box-shadow: 0 0 0 3px rgba(240,180,41,.55); }
}
@media (max-width: 640px) {
  .tut-coach { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .tut-chip { right: 8px; bottom: 8px; }
}

/* Setup redeploy sheet: one block per system, unit count inputs. */
.setup-sys { border-bottom: 1px solid var(--line); padding: 8px 0; }
.setup-sys strong { display: block; margin-bottom: 4px; }
.setup-cell { display: inline-flex; align-items: center; gap: 6px; margin: 2px 10px 2px 0; font-size: 13px; }
.setup-cell input { width: 58px; flex: 0 0 auto; }