:root {
  --void: #1a1631;
  --void-2: #120f24;
  --panel: #231e40;
  --panel-2: #2d2752;
  --rule: #3d3670;
  --text: #f1e9d8;
  --dim: #a59ec6;
  --flare: #f2a83b;
  --alert: #ec5a7a;
  --ok: #6fd3a0;
  --display: 'Saira Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Saira Semi Condensed', 'Segoe UI', system-ui, sans-serif;
  --r-sm: 4px;
  --r-md: 8px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  accent-color: var(--flare);
  background: var(--void);
  color: var(--text);
  font: 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: .01em; }
a { color: var(--flare); }
.dim { color: var(--dim); }
.small { font-size: 13px; }
code { background: var(--void-2); padding: 1px 5px; border-radius: 3px; font-size: 12px; word-break: break-all; }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--void-2); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 5px 8px; min-height: 32px;
}
input[type=number] { width: 4.2em; }
input:focus, select:focus, textarea:focus { border-color: var(--flare); outline: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 4px 14px; border-radius: 999px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--rule); color: var(--text);
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .02em; text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--dim); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--flare); border-color: var(--flare); color: #24170a; }
.btn.primary:hover:not(:disabled) { background: #ffbb55; }
.btn.ghost { background: transparent; }
.btn.big { min-height: 46px; font-size: 20px; width: 100%; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--panel); cursor: pointer; font-size: 18px; line-height: 1;
}
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--void-2); }
.tag { font-family: var(--display); font-size: 13px; padding: 0 8px; border-radius: 999px; background: var(--void-2); color: var(--dim); }
body.busy { cursor: progress; }

/* ---------------- toasts & dialogs ---------------- */
.toasts { position: fixed; z-index: 100; left: 50%; top: 14px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 460px); pointer-events: none; }
.toast { background: var(--panel-2); border-left: 4px solid var(--dim); padding: 10px 14px; border-radius: var(--r-sm); box-shadow: 0 8px 24px #0008; transition: opacity .3s, transform .3s; }
.toast-error { border-color: var(--alert); }
.toast-warn { border-color: var(--flare); }
.toast-turn { border-color: var(--flare); background: #3a2a14; font-weight: 600; }
.toast.out { opacity: 0; transform: translateY(-8px); }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 0; max-width: min(94vw, 760px); }
dialog::backdrop { background: #07051099; backdrop-filter: blur(3px); }
.dialog-body { padding: 22px; display: grid; gap: 14px; min-width: min(86vw, 420px); }
.dialog-body h2 { font-size: 26px; }
.dialog-body p { margin: 0; }
.field { display: grid; gap: 4px; color: var(--dim); }
.field input { color: var(--text); }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ok { color: var(--ok); }
.zoom-body { display: grid; grid-template-columns: minmax(220px, 320px) minmax(200px, 360px); gap: 22px; padding: 22px; }
.zoom-art img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 10px 30px #000a; }
.zoom-text h2 { font-size: 30px; }
.zoom-meta { color: var(--dim); margin: 4px 0 12px; }
.zoom-rules { line-height: 1.55; margin-bottom: 16px; }
@media (max-width: 640px) { .zoom-body { grid-template-columns: 1fr; } .zoom-art { max-width: 260px; margin: auto; } }

/* ---------------- cards ---------------- */
.card { position: relative; flex: none; border-radius: 7px; overflow: hidden; background: var(--panel-2); cursor: zoom-in; box-shadow: 0 2px 6px #0007; transition: transform .12s ease, box-shadow .12s ease; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-xs { width: 44px; height: 62px; border-radius: 4px; }
.card-sm { width: 64px; height: 89px; }
.card-md { width: 92px; height: 128px; }
.card-lg { width: 240px; height: 336px; border-radius: 14px; }
.card.selectable { cursor: pointer; }
.card.selectable:hover { transform: translateY(-6px); }
.card.selected { transform: translateY(-12px); box-shadow: 0 0 0 3px var(--flare), 0 10px 24px #000a; }
.card.back { background: repeating-linear-gradient(135deg, #3b3270 0 6px, #2b2456 6px 12px); cursor: default; }
.text-card { padding: 6px; font-size: 11px; line-height: 1.2; display: flex; flex-direction: column; gap: 4px; }
.action-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--suit) 92%, #fff 8%), color-mix(in srgb, var(--suit) 60%, #120f24));
  color: #fff; border: 2px solid color-mix(in srgb, var(--suit) 50%, #fff 50%);
  display: flex; flex-direction: column; align-items: flex-start; padding: 4px 6px; cursor: pointer;
}
.ac-num { font: 800 34px/1 var(--display); text-shadow: 0 2px 0 #0005; }
.ac-suit { font: 700 12px/1 var(--display); opacity: .92; margin-top: 2px; }
.ac-pips { margin-top: auto; display: flex; gap: 3px; flex-wrap: wrap; }
.ac-pips i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 0 #0006; }
.card-xs.action-card { padding: 2px 3px; border-width: 1px; }
.card-xs .ac-num { font-size: 20px; }
.card-xs .ac-suit { display: none; }
.card-xs .ac-pips i { width: 5px; height: 5px; }
.card-lg .ac-num { font-size: 120px; }
.card-lg .ac-suit { font-size: 30px; }
.card-lg .ac-pips i { width: 26px; height: 26px; }

/* ---------------- lobby ---------------- */
.lobby { max-width: 1100px; margin: 0 auto; padding: 32px 16px 60px; }
.lobby-head { margin-bottom: 28px; position: relative; }
.orbits { position: absolute; right: 0; top: -10px; width: min(46%, 440px); height: auto; pointer-events: none; }
.preview-link { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--dim); }
@media (max-width: 640px) { .orbits { display: none; } }
.lobby-head h1 {
  font: 800 clamp(72px, 14vw, 150px)/.85 var(--display); letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--flare), #e2493f 45%, #a463e8 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lobby-head p { font-size: 19px; color: var(--dim); max-width: 34em; margin: 10px 0 0; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lobby-grid #result { grid-column: 2; }
.lobby-grid .mine { grid-column: 2; }
.lobby-grid .create { grid-row: span 3; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 18px; }
.panel h2 { font-size: 26px; margin-bottom: 12px; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
legend { font: 700 18px var(--display); color: var(--flare); margin-bottom: 8px; padding: 0; }
.seat { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(90px, 120px); gap: 10px; align-items: center; }
.swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--void-2); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--flare); background: #f2a83b12; }
.radio b { display: block; font-family: var(--display); font-size: 17px; }
.radio span { color: var(--dim); }
.radio b { color: var(--text); }
.check { display: flex; gap: 8px; align-items: center; color: var(--dim); }
.invites { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.invites li { display: grid; grid-template-columns: 14px auto 1fr auto auto; gap: 8px; align-items: center; }
.invites input { min-width: 0; font-size: 12px; }
.my-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.my-games li { display: flex; align-items: center; gap: 8px; }
.my-games a { flex: 1; display: grid; text-decoration: none; color: var(--text); padding: 8px 10px; border-radius: var(--r-sm); background: var(--void-2); }
.my-games a:hover { outline: 1px solid var(--rule); }
@media (max-width: 820px) {
  .lobby-grid { grid-template-columns: minmax(0, 1fr); }
  .lobby-grid > * { grid-column: auto !important; grid-row: auto !important; }
  .invites li { grid-template-columns: 14px 1fr auto; }
  .invites li input { grid-column: 1 / -1; order: 5; }
  .invites li a { display: none; }
}

/* ---------------- game layout ---------------- */
body.in-game { overflow: hidden; }
/* App shell (desktop): fixed rows so the map never resizes when the action UI changes.
   top bar | map + HUD column | court strip | action sheet (fixed height, scrolls inside). */
.game {
  --top-h: 50px; --bar-h: clamp(150px, 24vh, 224px);
  height: 100dvh; display: grid; position: relative;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: var(--top-h) auto minmax(0, 1fr) var(--bar-h);
  grid-template-areas: "top top" "map tabs" "map panes" "bar bar";
}
.topbar { grid-area: top; display: flex; align-items: center; gap: 18px; padding: 6px 14px; background: var(--void-2); border-bottom: 1px solid var(--rule); min-height: 50px; }
.brand { font: 800 28px/1 var(--display); text-decoration: none; background: linear-gradient(100deg, var(--flare), #e2493f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapter { font-family: var(--display); font-size: 17px; display: flex; gap: 8px; align-items: baseline; }
.chapter span { color: var(--dim); }
.status { flex: 1; font-size: 16px; }
.status .you { color: var(--flare); font-family: var(--display); font-size: 20px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.conn { font-size: 12px; color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
.conn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.conn[data-state=live]::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.conn[data-state=reconnecting]::before, .conn[data-state=polling]::before { background: var(--flare); }
.conn[data-state=mock]::before { background: #a463e8; }

.map-wrap { grid-area: map; position: relative; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2a2150 0%, #1a1631 55%, #100d20 100%); }
.map-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent), radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent), radial-gradient(1.5px 1.5px at 88% 64%, #fff7 50%, transparent), radial-gradient(1px 1px at 32% 82%, #fff5 50%, transparent), radial-gradient(1px 1px at 55% 42%, #fff4 50%, transparent), radial-gradient(1.2px 1.2px at 8% 60%, #fff6 50%, transparent); }
.map { position: absolute; inset: 0; }
.starmap { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: grab; }
.starmap:active { cursor: grabbing; }
.map-zoom { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; z-index: 2; }
.cluster-label { font: 700 22px var(--display); fill: #d9cff7; fill-opacity: .45; letter-spacing: .04em; }
.cluster.oop .cluster-label { fill: #8d86ab; fill-opacity: .6; font-size: 18px; }
.lane { stroke: #cfc6f0; stroke-opacity: .28; stroke-width: 2.4; }
.lane.gg { stroke: var(--flare); stroke-opacity: .35; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.lane.off { stroke-opacity: .08; }
.system { cursor: pointer; outline: none; }
.system .planet { stroke: #120f24; stroke-width: 3; }
.system:hover .planet, .system:focus-visible .planet { stroke: var(--text); }
.system:focus-visible polygon.gate, .system:hover polygon.gate { stroke: var(--text); }
polygon.gate { fill: #120f24; stroke: var(--flare); stroke-width: 3; }
polygon.gate-core { fill: var(--flare); fill-opacity: .25; }
.sys-id { font: 700 15px var(--display); fill: #fff; paint-order: stroke; stroke: #120f24; stroke-width: 3.5px; pointer-events: none; }
.res-label { font: 600 10.5px var(--body); fill: #120f24; fill-opacity: .85; pointer-events: none; }
.slot { fill: #120f24; fill-opacity: .8; stroke: #cfc6f0; stroke-opacity: .5; stroke-width: 1.5; }
.ships .num { font: 800 18px var(--display); }
.ships .num.dmg { font-size: 15px; }
.tokens { font: 600 12px var(--body); fill: var(--flare); paint-order: stroke; stroke: #120f24; stroke-width: 3px; }
.system.off, .ship-layer.off { opacity: .32; }
.ship-layer { cursor: pointer; }
.mark { fill: none; stroke-width: 4; }
.mark-inspect { stroke: #fff; stroke-opacity: .6; stroke-dasharray: 6 6; }
.mark-target, .mark-from { stroke: var(--flare); }
.mark-to { stroke: #6fd3f0; }

/* HUD overlays on the map */
.hud { position: absolute; z-index: 2; background: #120f24d9; backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; max-width: 46%; }
.hud h4 { font-size: 15px; color: var(--dim); font-weight: 700; margin-bottom: 6px; }
.hud-tl { left: 12px; top: 12px; width: 190px; }
.hud-tr { right: 12px; top: 12px; }
.hud-bl { left: 12px; bottom: 12px; max-width: 280px; }
.hud-br { right: 60px; bottom: 12px; max-width: 300px; }
.hud .x { position: absolute; right: 6px; top: 4px; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--dim); }
.amb { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.amb li { display: flex; align-items: center; gap: 6px; min-height: 24px; color: var(--dim); font-family: var(--display); font-size: 15px; }
.amb li span:first-child { flex: 1; }
.amb li.declared { color: var(--text); }
.amb-marker { display: inline-flex; align-items: baseline; justify-content: center; min-width: 34px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--flare); color: #24170a; font: 800 14px/22px var(--display); }
.amb-marker small { font-size: 11px; opacity: .75; }
.amb-marker.flipped { background: #d9cff7; }
.amb-avail { margin-top: 8px; color: var(--dim); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.init { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--dim); }
.init .chip { color: var(--text); font-weight: 600; }
.played-row { display: flex; gap: 8px; }
.played { display: grid; justify-items: center; gap: 3px; text-align: center; font-size: 11px; line-height: 1.15; color: var(--dim); }
.played .card { box-shadow: 0 0 0 2px var(--c); }
.played b { color: var(--text); font-weight: 600; }
.decks { margin-top: 8px; display: flex; gap: 10px; color: var(--dim); font-size: 12px; }
.dice { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.die { width: 30px; height: 30px; border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px; font-size: 12px; line-height: 1; padding: 2px; }
.die-assault { background: #c63b35; }
.die-skirmish { background: #e8e2d4; color: #120f24; }
.die-raid { background: #2f6fb8; }
.die i { font-style: normal; }
.ds-selfHit { color: #ffd166; }
.die-skirmish .ds-selfHit { color: #b5410d; }
.hud p { margin: 0; }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }

/* court */
.court-row { grid-area: court; display: flex; align-items: center; gap: 12px; padding: 4px 14px 2px; background: var(--void-2); border-top: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; min-width: 0; }
.court-row h3 { font-size: 18px; color: var(--dim); writing-mode: vertical-rl; transform: rotate(180deg); }
.court-toggle { flex: none; display: flex; align-items: center; gap: 4px; align-self: stretch; background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--dim); }
.court-toggle:hover h3, .court-toggle:focus-visible h3 { color: var(--text); }
.court-toggle i { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.court-row.collapsed { padding-top: 3px; padding-bottom: 3px; }
.court-row.collapsed .court-toggle { flex-direction: row; }
.court-row.collapsed h3 { writing-mode: horizontal-tb; transform: none; font-size: 15px; }
.court-row.collapsed .court-toggle i { transform: rotate(45deg) translateY(-2px); }
.court-mini { display: flex; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; }
.court-mini .cardlink { flex: none; }
.court-mini .agent { min-width: 18px; height: 18px; font-size: 11px; margin-left: 3px; vertical-align: 1px; }
.court-cards { display: flex; gap: 12px; }
.court-slot { position: relative; padding-bottom: 6px; border-radius: 9px; }
.court-slot.pickable { cursor: pointer; }
.court-slot.pickable .card { box-shadow: 0 0 0 2px var(--rule); cursor: pointer; }
.court-slot.picked .card { box-shadow: 0 0 0 3px var(--flare); }
.agents { position: absolute; bottom: -2px; left: 4px; right: 4px; display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.agent { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px 11px 4px 4px; background: var(--c); color: #120f24; font: 800 13px var(--display); box-shadow: 0 0 0 2px var(--void-2); }

/* side: player boards, tools, log */
.side { grid-area: side; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--rule); background: var(--void); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.players { display: grid; gap: 8px; }
.pboard { background: var(--panel); border-radius: var(--r-md); padding: 10px 12px 10px 14px; border-left: 5px solid var(--c); display: grid; gap: 6px; }
.pboard.active { box-shadow: 0 0 0 2px var(--c), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.pboard header { display: flex; align-items: center; gap: 8px; }
.pboard h3 { font-size: 21px; flex: 1; }
.pboard h3 small { color: var(--dim); font-weight: 500; font-size: 14px; }
.pcolor { display: none; }
.power { font: 800 30px/1 var(--display); color: var(--c); min-width: 1.4em; text-align: right; }
.init-tag { background: var(--flare); color: #24170a; }
.prow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.lbl { color: var(--dim); width: 70px; }
.lbl2 { width: auto; margin-left: 8px; }
.rslots, .outs { display: flex; gap: 4px; }
.rslot { width: 20px; height: 20px; border-radius: 4px; background: var(--r); box-shadow: inset 0 -3px 0 #0004; }
.rslot.empty { background: var(--void-2); box-shadow: inset 0 0 0 1px var(--rule); }
.out { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--r); opacity: .4; }
.out.on { background: var(--r); opacity: 1; box-shadow: 0 0 0 2px var(--void-2), 0 0 0 3px var(--alert); }
.supplies span { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; font-family: var(--display); font-size: 15px; }
.supplies svg { width: 15px; height: 15px; fill: var(--c); }
.pcards { display: flex; gap: 5px; flex-wrap: wrap; }
.panel.tools, .log-panel { padding: 10px 12px; }
.tools summary { font: 700 18px var(--display); cursor: pointer; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.tab { background: var(--void-2); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; font-size: 13px; cursor: pointer; }
.tab.on { border-color: var(--flare); color: var(--flare); }
.tool { display: none; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.tool.on { display: grid; }
.tool label { display: grid; gap: 2px; font-size: 12px; color: var(--dim); }
.tool label > * { color: var(--text); }
.tool .span, .tool p.span { grid-column: 1 / -1; margin: 0; }
.tool input:not([type=number]), .tool select, .tool textarea { width: 100%; }
.log-panel h3 { font-size: 18px; margin-bottom: 6px; }
.log { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; font-size: 13px; display: grid; gap: 2px; }
.log li { padding: 3px 6px 3px 8px; border-left: 3px solid var(--c); }
.log li.manual { background: #f2a83b18; border-left-color: var(--flare); }
.log .lt { color: var(--dim); font-size: 11px; margin-right: 6px; }
.mtag { color: var(--flare); font-weight: 600; }

/* action bar */
/* The footer is a fixed-size slot; the sheet inside it holds the content. The sheet scrolls inside,
   and "More" lifts it over the map (overlay) instead of growing the row, so nothing else moves. */
.actionbar { grid-area: bar; position: relative; z-index: 6; min-height: 0; }
.ab-sheet { position: absolute; inset: 0; display: flex; gap: 14px; padding: 8px 10px 8px 14px;
  background: linear-gradient(180deg, var(--panel), var(--void-2)); border-top: 2px solid var(--rule); }
.ab-sheet.expanded { top: auto; height: auto; min-height: 100%; max-height: min(72dvh, 620px); box-shadow: 0 -14px 34px #000a; border-top-color: var(--flare); }
.ab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding: 2px 6px 6px 0; scroll-padding: 8px;
  /* scroll shadows: a fade at the bottom while more content is below */
  background: linear-gradient(var(--panel) 30%, transparent) center top / 100% 18px no-repeat local,
    linear-gradient(transparent, #120f24 70%) center bottom / 100% 18px no-repeat local,
    radial-gradient(farthest-side at 50% 0, #0009, transparent) center top / 100% 8px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, #000c, transparent) center bottom / 100% 10px no-repeat scroll; }
.ab-main > * { flex: none; }
.ab-handle { position: absolute; z-index: 2; top: -13px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 6px;
  height: 24px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel-2); color: var(--text);
  font: 700 13px/1 var(--display); letter-spacing: .03em; cursor: pointer; box-shadow: 0 2px 8px #0008; }
.ab-handle i { width: 7px; height: 7px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translate(2px, 2px); }
.ab-sheet.expanded .ab-handle i { transform: rotate(225deg) translate(2px, 2px); }
.ab-sheet.can-expand .ab-handle, .ab-sheet.expanded .ab-handle { display: inline-flex; }
.ab-sheet.can-expand:not(.expanded) .ab-handle { border-color: var(--flare); color: var(--flare); }
.ab-handle:hover { border-color: var(--flare); }
.ab-msg { font-size: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ab-msg.error { color: var(--alert); }
.prompt { display: grid; gap: 8px; }
.pmsg { margin: 0; font-size: 17px; font-weight: 500; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.choice-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.play-choice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 17px; }
.mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.turn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.turn-suit { font: 700 19px var(--display); color: var(--suit); }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 14px; height: 14px; border-radius: 50%; background: var(--suit); box-shadow: 0 0 8px var(--suit); }
.pips i.used { background: transparent; box-shadow: inset 0 0 0 2px var(--rule); }
.act-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn.act { font-size: 15px; padding: 2px 12px; min-height: 32px; }
.btn.act.suited { border-color: color-mix(in srgb, var(--suit, var(--flare)) 70%, transparent); background: color-mix(in srgb, var(--flare) 14%, var(--panel-2)); }
.btn.act.on { background: var(--flare); color: #24170a; border-color: var(--flare); }
.btn.end { margin-left: auto; border-color: var(--alert); }
.sep { width: 1px; height: 22px; background: var(--rule); margin: 0 4px; }
.draft, .inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 8px 10px; background: var(--void-2); border-radius: var(--r-md); border: 1px solid var(--rule); }
.draft label, .inline-form label { display: grid; gap: 2px; font-size: 12px; color: var(--dim); }
.draft label > *, .inline-form label > * { color: var(--text); }
.draft label.sys input { width: 6em; border-color: color-mix(in srgb, var(--flare) 50%, var(--rule)); }
/* hand: a compact strip at the side of the sheet (scrolls sideways) */
.hand { display: flex; gap: 6px; padding: 12px 4px 4px; overflow-x: auto; overflow-y: hidden; flex: none; max-width: min(40%, 540px); align-self: flex-start; scrollbar-width: thin; }
.hand .card-md { width: 66px; height: 92px; }
.hand .card.selectable:hover { transform: translateY(-5px); }
.hand .card.selected { transform: translateY(-9px); }
@media (min-width: 861px) {
  .court-row .card-md { width: 62px; height: 87px; }
}
@media (min-width: 861px) and (min-height: 1000px) {
  .hand .card-md { width: 80px; height: 112px; }
  .court-row .card-md { width: 68px; height: 95px; }
}
@media (min-width: 861px) and (max-height: 940px) {
  .court-row .card-md { width: 50px; height: 70px; }
  .court-row .agent { min-width: 18px; height: 18px; font-size: 11px; }
}
@media (min-width: 861px) and (max-height: 740px) {
  .hand .card-md { width: 58px; height: 81px; }
  .court-row .card-md { width: 46px; height: 64px; }
}
.curtain { flex: 1; width: 100%; min-height: 0; display: grid; place-content: center; gap: 4px; text-align: center; cursor: pointer; border: 2px dashed var(--c); border-radius: var(--r-md); color: var(--text);
  background: repeating-linear-gradient(135deg, #ffffff06 0 10px, transparent 10px 20px), var(--void-2); }
.curtain span { font: 700 26px var(--display); }
.curtain b { color: var(--c); }
.curtain small { color: var(--dim); font-size: 14px; }
.ab-main > .curtain { flex: 1 1 auto; }
.curtain-sheet .ab-main { background: none; padding: 0; }
.opt-row { gap: 5px; }
.btn.act.quick { font-size: 14px; min-height: 30px; border-style: solid; }
.btn.act.extra { background: transparent; font-size: 14px; min-height: 30px; color: var(--dim); }
.btn.act.extra:hover { color: var(--text); }
/* free-action credits: shown first and glowing until used */
.btn.act.credit { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 22%, var(--panel-2)); box-shadow: 0 0 0 1px #6fd3a055, 0 0 12px #6fd3a044; }
.btn.act.credit.on { background: var(--ok); color: #0d1f17; border-color: var(--ok); }
.prelude-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border-radius: var(--r-md);
  background: linear-gradient(90deg, #6fd3a026, #6fd3a00d); border: 1px solid #6fd3a088; border-left: 4px solid var(--ok); font-size: 14px; }
.prelude-banner .pb-text { flex: 1 1 260px; min-width: 0; }
.prelude-banner .pb-text b { color: var(--ok); }
.prelude-banner .pb-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prelude-banner .small-btn { min-height: 30px; }
.undo-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; max-width: min(46%, 340px); min-height: 26px; padding: 0 10px 0 8px;
  border-radius: 13px; border: 1px solid var(--rule); background: var(--void-2); color: var(--dim); font-size: 13px; cursor: pointer; }
.undo-chip:hover, .undo-chip:focus-visible { border-color: var(--flare); color: var(--text); }
.undo-chip svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.undo-chip b { font: 700 13px var(--display); color: var(--text); }
.undo-chip span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ab-chiprow { display: flex; }
#forfeit-dlg .dialog-body { max-width: 480px; }
#forfeit-dlg .dialog-actions { flex-wrap: wrap; }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .game { grid-template-columns: minmax(0, 1fr) 330px; }
  .hud-tr { max-width: 40%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.undo-req { padding: 6px 10px; border-radius: var(--r-md); background: #a463e822; border: 1px solid #a463e866; }

.hud h4 { cursor: pointer; display: flex; align-items: center; gap: 6px; padding-right: 14px; }
.hud h4::after { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg) translateY(-2px); margin-left: auto; }
.hud.collapsed h4 { margin-bottom: 0; }
.hud.collapsed h4::after { transform: rotate(-45deg); }
.hud.collapsed > :not(h4):not(.x) { display: none !important; }
.hud-bl p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hud-br h4 { padding-right: 22px; }

.opt-card { display: grid; justify-items: center; gap: 6px; width: 120px; }
.opt-card .card-md { width: 110px; height: 154px; }
.opt-card .btn { font-size: 13px; padding: 2px 8px; min-height: 28px; width: 100%; white-space: normal; line-height: 1.1; }
.opts .choice-cards { flex-basis: 100%; }

.seat input, .seat select { min-width: 0; width: 100%; }

/* ---- legal-move hints ---- */
.mark-legal, .mark-legal-to { fill: none; stroke-width: 3; stroke-dasharray: 5 5; animation: legal-spin 6s linear infinite; }
.mark-legal { stroke: #6fd3a0; stroke-opacity: .85; }
.mark-legal-to { stroke: #6fd3f0; stroke-width: 4; }
@keyframes legal-spin { to { stroke-dashoffset: -60; } }
.system.is-legal { cursor: pointer; }
.btn.act .cnt { margin-left: 6px; font: 700 11px var(--display); background: #6fd3a033; color: var(--ok); border-radius: 8px; padding: 0 5px; }
.btn.act .cnt.zero { background: transparent; color: var(--dim); }
.btn.act.nolegal { opacity: .55; }
.tag.free { background: #6fd3a022; color: var(--ok); }
.tag.prelude { background: #f2a83b22; color: var(--flare); }
.legal-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px; } /* the action sheet scrolls; no nested scroller */
.legal-list .lg-hint { width: 100%; font-size: 14px; color: var(--dim); }
.legal-list .lg-hint b { color: var(--text); }
.legal-list.none span { color: var(--alert); font-size: 14px; }
.btn.lg-opt { font-size: 14px; padding: 2px 10px; min-height: 30px; border-color: #6fd3a066; }
.btn.lg-opt:hover, .btn.lg-opt:focus-visible { border-color: var(--ok); }
details.manual { font-size: 14px; }
details.manual > summary { cursor: pointer; color: var(--dim); width: max-content; }
details.manual[open] > summary { margin-bottom: 6px; }
.small-btn { font-size: 13px; min-height: 26px; padding: 0 10px; justify-self: start; }
.court-slot.legal .card { box-shadow: 0 0 0 3px #6fd3a0aa; }
.court-slot.not-legal { opacity: .45; }

/* ---- prompts ---- */
.ms-title { font: 700 18px var(--display); margin: 0 0 4px; color: var(--flare); letter-spacing: .02em; }
.manual-step .rule-text { max-height: 180px; overflow-y: auto; background: var(--void-2); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; line-height: 1.55; max-width: 72ch; }
.battle-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 14px; }
.hits-form { display: grid; gap: 6px; }
.hit-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hit-row .lbl { min-width: 150px; font-size: 13px; color: var(--dim); }
.hit-row select { font: inherit; font-size: 14px; background: var(--void-2); color: var(--text); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 3px 6px; }
.btn.toggle.on { border-color: var(--flare); background: #f2a83b22; }
.btn.toggle .ord { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--flare); color: #120f24; font-size: 12px; margin-right: 6px; }
.rdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--r); box-shadow: 0 0 0 2px var(--void-2); margin-right: 5px; vertical-align: -1px; }
.pick-dice { display: flex; flex-wrap: wrap; gap: 6px; }
.die-btn { background: none; border: 2px solid transparent; border-radius: 9px; padding: 2px; cursor: pointer; }
.die-btn:disabled { cursor: default; opacity: .45; }
.die-btn.elig:not(:disabled) { border-color: var(--rule); }
.die-btn.on { border-color: var(--flare); transform: translateY(-3px); }
.gameover-msg { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- campaign panel ---- */
.camp-panel, .score-panel { padding: 10px 12px; }
.camp-panel h3, .score-panel h3 { font-size: 17px; margin-bottom: 8px; }
.camp-panel h3 .dim { font-size: 14px; font-weight: 500; margin-left: 6px; }
.camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
.camp-grid > div, .camp-cards { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.camp-panel .lbl, .cp-row .lbl { width: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.camp-cards { margin-top: 8px; font-size: 13px; }
.camp-cards .lbl { flex-basis: 100%; }
.camp-card-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 2px 6px; max-width: 100%; }
.camp-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; width: 92px; cursor: pointer; }
.camp-card figcaption { font-size: 11px; line-height: 1.15; text-align: center; color: var(--dim); max-width: 92px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cardlink { background: var(--void-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; cursor: pointer; font-size: 13px; }
.cardlink:hover, .cardlink:focus-visible { border-color: var(--flare); }
.camp-players { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.camp-players li { border-left: 3px solid var(--c); background: var(--void-2); border-radius: var(--r-sm); padding: 6px 8px; font-size: 13px; }
.camp-players li.mine { box-shadow: inset 0 0 0 1px var(--rule); }
.cp-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cp-head .pcolor { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.cp-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin-top: 3px; }
.cp-row .lbl { width: auto; min-width: 66px; }
.tag.outlaw { background: #ec5a7a26; color: var(--alert); }
.tag.regent { background: #7f93ab33; color: #c9d4e2; }
.camp-winner { margin: 8px 0 0; font-weight: 600; }
.ok { color: var(--ok); }

/* ---- scoring & game over ---- */
.score-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.score-table th { text-align: left; font: 600 12px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 2px 4px; border-bottom: 1px solid var(--rule); }
.score-table td { padding: 4px; border-bottom: 1px solid #3d367055; vertical-align: top; }
.score-panel p { margin: 6px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
#gameover { border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--text); padding: 0; max-width: min(520px, calc(100vw - 32px)); width: 100%; }
#gameover::backdrop { background: #07051acc; }
.gameover-body { padding: 22px; display: grid; gap: 12px; }
.go-kicker { margin: 0; font: 700 13px var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--flare); }
.gameover-body h2 { margin: 0; font: 800 34px/1.1 var(--display); }
.standings { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.standings li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--void-2); border-radius: var(--r-md); border-left: 4px solid var(--c); }
.standings li.win { box-shadow: inset 0 0 0 1px var(--flare); }
.standings .pcolor { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.standings .power { margin-left: auto; font: 800 22px var(--display); }
.gameover-body h3 { margin: 4px 0 0; font-size: 16px; }

/* ---- map: campaign pieces ---- */
.token .tok-txt { font: 800 11px var(--display); fill: #120f24; }
/* official piece art: count badges, soft footprint, campaign planet ID symbols */
.pc-shadow { fill: #06050c; fill-opacity: .42; }
.pc-badge circle { fill: #120f24; stroke: #f4f1ff; stroke-width: 1.3; }
.pc-badge text { font: 800 10.5px var(--display); fill: #fff; }
.pc-badge.dmg circle { fill: #5a1a16; stroke: #ff9a7a; }
.ships-blight .pc-shadow { fill: #1f3a0e; fill-opacity: .5; }
.id-sym { pointer-events: none; }
.id-sym circle { fill: #ece8de; stroke: #120f24; stroke-width: 2.5; }

@media (max-width: 860px) {
  .camp-grid { grid-template-columns: 1fr; }
  .hit-row .lbl { min-width: 0; width: 100%; }
}
.btn.act.on .cnt { background: #120f2433; color: inherit; }

.move-confirm { display: grid; gap: 6px; width: 100%; }
.move-confirm .mc-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.move-confirm input[type=number] { width: 56px; font: inherit; font-size: 14px; background: var(--void-2); color: var(--text); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 2px 4px; }

/* ---- map: real board art ---- */
.board-mode .starmap { background: #0c0a14; }
.board-img { filter: brightness(.74) saturate(.9); }
.bsys .hit { fill: #fff; fill-opacity: 0; stroke: none; }
.bsys:hover .hit, .bsys:focus-visible .hit { fill-opacity: .07; stroke: #fff; stroke-opacity: .5; stroke-width: 3; }
.bsys.is-legal .hit { fill: #6fd3a0; fill-opacity: .08; }
.bsys .mark { stroke-width: 6; }
.bsys .gate-ring { fill: none; stroke: #cfc6f0; stroke-opacity: .35; stroke-width: 3; stroke-dasharray: 4 6; pointer-events: none; }
.board-id { stroke-width: 5px; }
.res-badge { pointer-events: none; }
.oop-wedge path { fill: #06050c; fill-opacity: .78; stroke: #8d86ab; stroke-opacity: .35; stroke-width: 3; stroke-dasharray: 10 8; pointer-events: none; }
.oop-label { font: 700 30px var(--display); fill: #e8e4f4; paint-order: stroke; stroke: #06050c; stroke-width: 7px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.map-legend { position: absolute; left: 8px; bottom: 26px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 70px);
  padding: 4px 8px; border-radius: 8px; background: #0c0a14cc; font: 600 11px var(--body); color: var(--text); pointer-events: none; }
.map-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.map-credit { position: absolute; left: 8px; bottom: 6px; z-index: 2; font: 500 10px var(--body); color: #cfc6f0; opacity: .75;
  background: #0c0a14aa; padding: 1px 6px; border-radius: 4px; pointer-events: none; }
@media (max-width: 700px) { .map-legend { font-size: 10px; gap: 2px 7px; } .map-credit { font-size: 9px; right: 56px; } }

.map-legend img { border-radius: 50%; box-shadow: 0 0 0 1.5px #120f24; flex: none; }

/* ---- desktop: HUD column docked beside the board (scrolls on its own; the board never moves) ---- */
.board-img { filter: brightness(.7) saturate(.88); }
@media (min-width: 861px) {
  .hud-col { width: 280px; }
  .hud-col > .hud { font-size: 12px; background: #120f24e6; }
  .hud-col > .hud[hidden] { display: none; }
  .hud-col > .hud h4 { font-size: 14px; margin-bottom: 4px; }
  .hud-col > .hud-tl .amb li { font-size: 14px; min-height: 20px; }
  .hud-col > .hud-tl .amb { gap: 2px; }
  .hud-col > .hud-tr .played-row { flex-wrap: wrap; gap: 6px; }
  .hud-col > .hud-tr .decks { flex-wrap: wrap; gap: 2px 10px; }
  .hud-col > .hud-bl p { -webkit-line-clamp: 6; }
  .hud-col > .map-legend { position: static; margin: 0; max-width: none; display: grid; flex: none;
    grid-template-columns: 1fr 1fr 1fr; gap: 3px 4px; padding: 4px 6px; font-size: 10px; background: #120f24cc; border: 1px solid var(--rule); }
  .hud-col > .map-legend img { width: 18px; height: 18px; }
  .hud-col > .map-credit { position: static; margin: auto 0 0; flex: none; }
  .map-wrap .map-zoom { top: auto; bottom: 10px; right: 10px; transform: none; }
  .map-wrap .map-zoom .icon-btn { width: 34px; height: 34px; min-height: 34px; opacity: .9; }
  /* top bar keeps one line: long text truncates instead of wrapping (which would resize the board) */
  .topbar { height: var(--top-h); min-height: 0; overflow: hidden; flex-wrap: nowrap; gap: 14px; }
  .chapter, .status { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chapter { flex: 0 1 auto; display: block; }
  .chapter span { margin-left: 6px; }
  .scoreboard { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; margin-left: 0; }
  .top-actions { flex: none; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .game { --top-h: 50px; }
  .conn { display: none; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .hud-col { gap: 5px; padding-top: 6px; }
  .hud-col > .hud { padding: 6px 8px; }
  .hud-col > .hud h4 { font-size: 13px; margin-bottom: 2px; }
  .hud-col > .hud-tl .amb li { font-size: 13px; min-height: 18px; }
  .hud-col > .hud-tl .amb-avail, .hud-col > .hud-tl .init { margin-top: 4px; }
  .hud-col > .hud-tr .played .card { zoom: .72; }
  .hud-col > .hud-tr .decks { margin-top: 4px; }
  .act-row { gap: 5px; }
  .btn.act { min-height: 30px; font-size: 14px; padding: 1px 10px; }
}

/* ---- phone: a fixed app shell, no page scrolling: top bar | map (or the open info tab, laid over
   the map's area so the map never resizes) | tab bar | action sheet. ---- */
@media (max-width: 860px) {
  body.in-game { overflow: hidden; }
  .game { --top-h: 70px; --tabs-h: 40px; --sheet-h: clamp(190px, 34svh, 320px);
    height: 100dvh; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top-h) minmax(0, 1fr) var(--tabs-h) var(--sheet-h);
    grid-template-areas: "top" "map" "tabs" "bar"; }
  .map-wrap::before { display: none; }
  /* top bar: two fixed lines (brand, chapter, buttons | status, scores) */
  .topbar { height: var(--top-h); min-height: 0; overflow: hidden; flex-wrap: wrap; align-content: center; gap: 4px 10px; padding: 5px 12px; }
  .topbar::after { content: ''; order: 4; flex-basis: 100%; height: 0; }
  .brand { font-size: 26px; }
  .chapter { order: 1; flex: 1 1 0; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  .chapter span { margin-left: 5px; }
  .top-actions { order: 2; gap: 6px; }
  .top-actions .btn { min-height: 30px; padding: 2px 10px; font-size: 14px; }
  .conn { display: none; }
  .status { order: 5; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 22px; }
  .status .you { font-size: 16px; }
  .scoreboard { order: 6; flex: 0 1 auto; width: auto; max-width: 64%; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .scoreboard::-webkit-scrollbar { display: none; }
  .map-zoom { top: auto; bottom: 8px; transform: none; right: 8px; }
  .map .map-zoom .icon-btn { width: 40px; height: 40px; }
  /* action sheet: fixed height, scrolls inside; "More" opens it as an overlay over the map */
  .ab-sheet { flex-direction: column; gap: 4px; padding: 12px 10px 6px 12px; border-radius: 14px 14px 0 0; border-top-width: 1px;
    box-shadow: 0 -6px 18px #0007; }
  .ab-sheet.expanded { position: fixed; top: auto; left: 0; right: 0; bottom: 0; height: auto; min-height: var(--sheet-h); max-height: calc(100svh - var(--top-h) - 84px); z-index: 40; }
  .ab-handle { top: -11px; height: 22px; font-size: 12px; padding: 0 14px; }
  .opt-row .sep { display: none; }
  .undo-chip { max-width: 100%; }
  .ab-sheet.can-expand .ab-handle, .ab-sheet.expanded .ab-handle { display: inline-flex; }
  .ab-main { gap: 6px; padding-right: 2px; }
  .hand { max-width: none; width: 100%; padding: 8px 2px 2px; align-self: stretch; }
  .hand .card-md { width: 48px; height: 67px; }
  .hand .card-md .ac-num { font-size: 20px; }
  .hand .aa-badge { font-size: 8px; line-height: 12px; left: 2px; right: 2px; bottom: 2px; padding: 0 3px; gap: 2px; }
  .hand .aa-badge b { font-size: 11px; }
  .hand .aa-badge i { display: none; }
  .btn.end { margin-left: 0; }
  .act-row { gap: 5px; }
  .btn.act { font-size: 14px; padding: 1px 9px; min-height: 30px; }
  .turn-head { gap: 6px; }
  .turn-suit { font-size: 17px; }
  .curtain span { font-size: 22px; }
  .camp-grid { grid-template-columns: 1fr; }
  .hit-row .lbl { min-width: 0; width: 100%; }
}

/* ---- info tabs (Me, Players, Court, Ambitions, Campaign, Log; Board on phones) ---- */
.hud-col { position: absolute; left: 10px; top: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.hud-col > * { pointer-events: auto; }
.hud-col > .hud { position: relative; inset: auto; max-width: none; width: auto; margin: 0; flex: none; }
.hud-col > .hud[hidden] { display: none; }
.hud-col > .map-legend { position: static; margin: 0; max-width: none; pointer-events: none; }
.hud-col > .map-credit { position: static; margin: auto 0 0; align-self: flex-start; pointer-events: none; }
.tabbar { grid-area: tabs; display: flex; align-items: stretch; gap: 2px; padding: 0 8px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  background: var(--void-2); border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.tabbar::-webkit-scrollbar { display: none; }
.tabbtn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 11px;
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dim); font: 700 15px/1 var(--display); letter-spacing: .02em; cursor: pointer; }
.tabbtn:hover, .tabbtn:focus-visible { color: var(--text); }
.tabbtn.on { color: var(--text); border-bottom-color: var(--flare); }
.tab-badge { width: 8px; height: 8px; border-radius: 50%; background: var(--flare); box-shadow: 0 0 8px var(--flare); animation: tabpulse 1.4s ease-in-out infinite; }
@keyframes tabpulse { 50% { opacity: .35; } }
.tab-count { min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--panel-2); color: var(--text); font: 700 11px/16px var(--body); text-align: center; }
.tabpanes { grid-area: panes; position: relative; min-height: 0; overflow: hidden; background: var(--void); border-left: 1px solid var(--rule); }
.tabpane { display: none; position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  flex-direction: column; gap: 10px; padding: 10px; }
.tabpane.on { display: flex; }
.tabpane > * { flex: none; }
.tabpane > [hidden] { display: none; }
.tabpane .hud { position: relative; inset: auto; max-width: none; width: auto; backdrop-filter: none; background: var(--panel); font-size: 13px; }
.tabpane .hud h4 { cursor: default; padding-right: 0; }
.tabpane .hud h4::after { display: none; }
.tabpane .court-row { display: block; padding: 0; background: none; border: 0; overflow: visible; }
.tabpane .court-cards { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.tabpane .court-row .card-md { width: 104px; height: 146px; }
.court-hint { margin: 0 0 8px; color: var(--flare); font-weight: 600; }
.tabpane .court-slot.legal .card { box-shadow: 0 0 0 3px #6fd3a0; }
.tabpane .court-slot.not-legal { opacity: .55; }
.tabpane[data-pane=log] .log-panel { flex: 1 1 auto; min-height: 140px; display: flex; flex-direction: column; }
.tabpane[data-pane=log] .log { flex: 1 1 auto; max-height: none; min-height: 0; }
.tabpane[data-pane=log].on { overflow: hidden; }
.tabpane[data-pane=log] .tools[open] { max-height: 55%; overflow-y: auto; }
.me-board .pboard { box-shadow: none; }
@media (max-width: 860px) {
  /* info tabs open over the map's area (the map keeps its size underneath) */
  .tabpanes { grid-area: map; z-index: 5; border-left: 0; }
  .game[data-tab=board] .tabpanes { display: none; }
  .tabbar { border-bottom: 0; border-left: 0; border-top: 1px solid var(--rule); padding: 0 6px; }
  .tabbtn { flex: 1 0 auto; justify-content: center; padding: 0 9px; font-size: 14px; }
  /* system details float over the top-left of the map (small, closable) */
  .hud-col { left: 8px; top: 8px; bottom: 8px; width: min(64%, 300px); }
  .hud-col > .hud-br { max-height: 100%; overflow: auto; font-size: 12px; padding: 6px 8px; }
  .tabpane { padding: 8px 10px 12px; }
  .tabpane .court-row .card-md { width: 30vw; max-width: 116px; height: calc(min(30vw, 116px) * 1.4); }
}
@media (max-width: 860px) {
  /* room under the tab buttons for the action sheet's "More" handle, so it never covers a tab */
  .game { --tabs-h: 50px; }
  .tabbar { padding-bottom: 11px; }
  .tabbtn { min-height: 0; }
}

/* ---- wide screens: the info tabs sit along the bottom (like phones) and open over the map's area,
   with a Board tab to get back; only Ambitions stays in the right column. ---- */
.sidepane { display: none; }
@media (min-width: 861px) {
  .game { grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: var(--top-h) minmax(0, 1fr) auto var(--bar-h);
    grid-template-areas: "top top" "map side" "tabs side" "bar bar"; }
  .tabpanes { grid-area: map; z-index: 5; border-left: 0; }
  .game[data-tab=board] .tabpanes { display: none; }
  .tabbar { border-left: 0; border-bottom: 0; border-top: 1px solid var(--rule); }
  .sidepane { display: block; grid-area: side; position: relative; min-height: 0; overflow: hidden; background: var(--void); border-left: 1px solid var(--rule); }
  .sidepane .tabpane { display: flex; }
  /* tab content over the map: keep lines a readable length */
  .tabpanes .tabpane { padding: 12px 16px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .game { grid-template-columns: minmax(0, 1fr) 300px; }
}