@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #101c25;
  --bg-deep: #0c171f;
  --panel: #14232d;
  --panel-raised: #1a2b34;
  --panel-hover: #21343e;
  --ink: #f0e9db;
  --muted: #94a5ac;
  --quiet: #647982;
  --line: rgba(206, 219, 215, .11);
  --line-strong: rgba(223, 189, 129, .30);
  --brass: #dfbd81;
  --brass-light: #eed2a1;
  --blue: #7cbbd0;
  --gold: #e1b871;
  --coral: #d88278;
  --green: #a1b798;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg-deep); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  background:
    radial-gradient(ellipse at 52% -25%, rgba(100, 125, 126, .13), transparent 55%),
    var(--bg);
}
body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled), summary { cursor: pointer; }
button, input, select { touch-action: manipulation; }
button { border: 0; }
a { color: var(--brass-light); text-underline-offset: 4px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 4px;
}
button:disabled { cursor: not-allowed; opacity: .42; }
button:disabled:hover { transform: none; }
[hidden] { display: none !important; }
::selection { color: var(--bg-deep); background: var(--brass); }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
img, canvas { max-width: 100%; }
.app-shell { width: min(1680px, 100%); margin-inline: auto; padding: 0 32px; }

.topbar {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.brand > svg, .brand > .brand-icon, .brand > .icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 42px;
  color: var(--brass);
}
.brand-name { display: flex; flex-direction: column; gap: 1px; }
.brand-name strong { font: 600 21px/1.1 var(--serif); letter-spacing: -.6px; }
.brand-name small { color: var(--muted); font: 9px/1.6 var(--mono); letter-spacing: 2.15px; text-transform: uppercase; }
.header-note { margin-left: auto; color: var(--muted); font-size: 11px; letter-spacing: .2px; }
.header-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.button:hover:not(:disabled) { color: var(--ink); border-color: var(--brass); background: rgba(223, 189, 129, .07); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button-primary { color: #222921; border-color: var(--brass); background: var(--brass); }
.button-primary:hover:not(:disabled) { color: #222921; border-color: var(--brass-light); background: var(--brass-light); }
.button-ghost { color: var(--muted); border-color: transparent; background: transparent; }
.button-ghost:hover:not(:disabled) { color: var(--ink); background: var(--panel-raised); border-color: var(--line); }
.button-small { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.button svg { width: 15px; height: 15px; }

.game-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 0; min-height: 540px; }
.briefing-panel { min-width: 0; padding: 25px 22px 21px 0; border-right: 1px solid var(--line); }
.players-panel { min-width: 0; padding: 25px 0 21px 22px; border-left: 1px solid var(--line); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.panel-heading h2, .panel-heading h3, h2.panel-heading, h3.panel-heading {
  font: 600 10px/1.5 var(--mono);
  color: var(--muted);
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.round-number { font: 500 43px/1.1 var(--serif); letter-spacing: -1px; }
.round-number small, .round-number span { font: 400 14px var(--sans); color: var(--quiet); letter-spacing: 0; }
.round-summary { max-width: 200px; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.agenda { list-style: none; padding: 0; margin: 19px 0 24px; display: grid; gap: 2px; }
.agenda-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 31px;
  padding: 6px 9px;
  margin-left: -9px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
}
.agenda-item.is-current { color: var(--brass-light); background: rgba(223, 189, 129, .06); border-color: rgba(223, 189, 129, .17); }
.agenda-item.is-resolved { color: var(--quiet); }
.agenda-number { width: 16px; flex-shrink: 0; font: 9px var(--mono); opacity: .66; }
.agenda-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-marker { margin-left: auto; flex-shrink: 0; color: var(--brass); font-size: 10px; }
.agenda-item.is-resolved .agenda-marker { color: var(--green); }
.move-panel, #move-panel { border-top: 1px solid var(--line); padding-top: 17px; }
#move-panel .move-panel { border-top: 0; padding-top: 0; }
.selected-title { margin-bottom: 7px; font: 500 21px/1.3 var(--serif); letter-spacing: -.35px; }
.instruction { color: var(--muted); font-size: 11px; line-height: 1.7; margin-bottom: 14px; }
.move-panel .button, #move-panel > .button { width: 100%; margin-top: 11px; }
.move-options { display: grid; gap: 10px; }
.follower-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.follower-choice button, button.follower-choice {
  min-width: 34px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
}
.follower-choice button:hover:not(:disabled), button.follower-choice:hover:not(:disabled),
.follower-choice button.is-selected, button.follower-choice.is-selected {
  background: var(--panel-hover);
  border-color: var(--brass);
}
.field-label { display: grid; gap: 7px; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 500; }
select, .field-input, input[type="text"], input[type="url"], input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-deep);
  color: var(--ink);
  line-height: 1.5;
  outline-color: var(--brass);
}
select { font-size: 12px; padding-right: 25px; }
input::placeholder { color: var(--quiet); }
select:hover, .field-input:hover { border-color: rgba(206, 219, 215, .24); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--brass); }

.board-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 540px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(106, 134, 137, .13), transparent 60%),
    linear-gradient(180deg, rgba(21, 37, 47, .12), rgba(8, 20, 27, .16));
}
#board-canvas { position: absolute; inset: 0; z-index: 0; }
.board-webgl { outline: none; }
.board-topline { position: absolute; z-index: 2; top: 23px; left: 24px; right: 24px; pointer-events: none; }
.stage-title { max-width: 75%; }
.eyebrow { display: block; color: var(--brass); font: 500 9px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 1.9px; }
.stage-title h1, .board-topline h1 { margin-top: 7px; font: 500 clamp(27px, 2.3vw, 38px)/1.12 var(--serif); letter-spacing: -1px; }
.stage-description { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.camera-controls {
  position: absolute;
  z-index: 3;
  right: 22px;
  top: 25px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(13, 26, 34, .82);
  backdrop-filter: blur(12px);
}
.camera-controls button { min-height: 30px; min-width: 34px; padding: 6px 9px; border-radius: 3px; background: transparent; color: var(--muted); font: 10px var(--mono); }
.camera-controls button:hover, .camera-controls button.is-active, .camera-controls button[aria-pressed="true"] { background: var(--panel-hover); color: var(--brass-light); }
.board-help { position: absolute; z-index: 2; bottom: 17px; left: 22px; right: 22px; display: flex; justify-content: center; gap: 14px; pointer-events: none; color: #8a9ea5; font: 9px/1.6 var(--mono); letter-spacing: .2px; text-align: center; }
.board-help span { display: inline-flex; align-items: center; gap: 6px; }
.board-help kbd { font: inherit; padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; }
.dice-launcher { position: absolute; z-index: 3; left: 22px; bottom: 48px; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid #b8985a66; border-radius: 8px; color: #f1ddac; background: linear-gradient(140deg, #273c40ef, #12252bec); box-shadow: 0 5px 20px #06101350, inset 0 1px #f2d89f16; text-align: left; cursor: pointer; }
.dice-launcher > span:first-child { font: 33px/1 Georgia, serif; }
.dice-launcher > span:last-child { font: 500 12px/1.4 var(--serif); }
.dice-launcher small { display: block; color: #a9b7b4; font: 8px/1.6 var(--sans); }
.dice-launcher:hover { border-color: var(--brass); transform: translateY(-2px); }
.dice-modal { width: min(680px, calc(100% - 32px)) !important; }
.dice-modal .modal-card { background: radial-gradient(ellipse at 50% 40%, #305451 0, #142e32 60%, #112329 100%); }
.dice-modal .modal-header { border-bottom: 0; padding-bottom: 0; }
#dice-canvas { height: 330px; width: 100%; }
#dice-canvas canvas { display: block; width: 100%; height: 100%; }
.dice-caption { text-align: center; padding: 0 20px 15px; }
#dice-result { min-height: 32px; color: #f4dfb3; font: 500 26px/1.3 var(--serif); }
.dice-caption .muted { font-size: 11px; margin-top: 8px; }
.dice-modal .modal-footer { justify-content: center; border-top: 1px solid #d9c5901c; }
.dice-modal #roll-dice { min-width: 180px; }
#board-fallback { position: absolute; inset: 130px 22px 48px; z-index: 1; }
.fallback-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: min(480px, 100%); margin: 0 auto; height: 100%; align-content: center; transform: rotate(-4deg); }
.territory {
  position: relative;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 8px;
  border: 1px solid rgba(223, 189, 129, .22);
  border-bottom: 5px solid #898b76;
  border-radius: 8px;
  color: #20353b;
  background: #dcdcc4;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .13);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.territory:nth-child(2), .territory:nth-child(5), .territory:nth-child(8) { transform: translateY(-9px); }
.territory:hover:not(:disabled) { box-shadow: 0 12px 22px rgba(0, 0, 0, .23); border-color: var(--brass); }
.territory.is-selected { outline: 2px solid var(--brass); outline-offset: 3px; }
.territory.is-current { background: #eee3c5; }
.territory.is-resolved { opacity: .67; }
.territory strong { font: 600 13px var(--serif); }
.territory small { font: 9px var(--mono); opacity: .75; }
.territory .faction-dot { width: 9px; height: 9px; border-radius: 2px; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.territory-cubes { display: flex; align-items: center; gap: 7px; font: 9px var(--mono); }
.board-overlay { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(7, 18, 26, .55); backdrop-filter: blur(8px); }
.result-card { width: min(390px, 100%); padding: 34px 28px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); text-align: center; box-shadow: 0 25px 80px rgba(0, 0, 0, .35); }
.result-card h2 { font: 500 36px/1.15 var(--serif); margin: 12px 0; letter-spacing: -1px; }
.result-card p { color: var(--muted); font-size: 12px; margin-bottom: 21px; }
.result-card .button { width: 100%; }

.player-card {
  position: relative;
  margin-bottom: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .015);
}
.player-card.is-active { border-color: rgba(223, 189, 129, .45); background: linear-gradient(120deg, rgba(223, 189, 129, .065), rgba(223, 189, 129, .012)); }
.player-card.is-active::before { content: ""; position: absolute; width: 3px; top: 15px; bottom: 15px; left: -1px; border-radius: 2px; background: var(--brass); }
.player-heading { display: flex; align-items: center; gap: 10px; }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: #233741; color: var(--brass-light); font: 500 13px var(--serif); }
.player-name { font-size: 12px; font-weight: 600; }
.player-status { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; }
.player-card.is-active .player-status { color: var(--brass); }
.player-heading > div { min-width: 0; flex: 1; }
.player-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell[data-player-count="4"] .player-card { padding: 10px; margin-bottom: 7px; }
.app-shell[data-player-count="4"] .player-card .court-grid { margin-block: 8px 0; }
.app-shell[data-player-count="4"] .faction-summary { margin-top: 12px; padding-top: 12px; }
.app-shell[data-player-count="4"] .activity-list { max-height: 80px; }
.format-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin-block: 10px 16px; }
.lobby-seats { list-style: none; padding: 0; margin: 18px 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.lobby-seat { display: flex; gap: 9px; align-items: center; padding: 12px 10px; min-width: 0; border: 1px dashed var(--line-strong); border-radius: 6px; background: #ffffff03; }
.lobby-seat.is-connected { border-style: solid; border-color: #7cb39f60; background: #7cb39f09; }
.lobby-seat > div { min-width: 0; flex: 1; }
.lobby-seat strong { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.lobby-seat small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.seat-state { color: var(--muted); font: 8px var(--mono); white-space: nowrap; }
.is-connected .seat-state { color: #b5d7c3; }
.lobby-name { display: flex; align-items: end; gap: 8px; margin-block: 14px; }
.lobby-name label { flex: 1; }
#start-table { width: 100%; margin-bottom: 18px; }
#invite-modal .modal-body { gap: 12px; }
#invite-modal .lobby-seats, #invite-modal .lobby-name, #invite-modal .format-note, #invite-modal #start-table { margin-block: 0; }
.invite-sharing { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #ffffff03; }
.invite-sharing .field-label { margin: 0; }
#new-game-modal .mode-options { grid-template-columns: repeat(3, minmax(0,1fr)); }
#new-game-modal .mode-option { padding: 12px 10px; min-height: 105px; }
#new-game-modal .mode-option:last-child { grid-column: auto; }
@media (max-width: 560px) { .lobby-seats { grid-template-columns: 1fr; } .lobby-name { align-items: stretch; flex-direction: column; } }
.player-heading .badge { margin-left: auto; font-size: 8px; padding: 2px 5px; }
.court-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 13px 0 9px; }
.court-token { min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px; border: 1px solid rgba(206, 219, 215, .05); border-radius: 3px; background: rgba(8, 18, 25, .35); font: 11px var(--mono); }
.court-token::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 2px; background: var(--blue); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.court-token:nth-child(2)::before { background: var(--gold); }
.court-token:nth-child(3)::before { background: var(--coral); }
.court-token:has(.faction-dot)::before { display: none; }
.card-count { color: var(--quiet); font: 9px var(--mono); }
.faction-summary { padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--line); }
.faction-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 11px; }
.faction-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--blue); }
.faction-dot.blue, .faction-dot.scots, .faction-dot.founders { background: var(--blue); }
.faction-dot.gold, .faction-dot.welsh, .faction-dot.operators { background: var(--gold); }
.faction-dot.coral, .faction-dot.english, .faction-dot.investors { background: var(--coral); }
.stat-label { color: var(--muted); }
.stat-value { margin-left: auto; font: 11px var(--mono); color: var(--ink); }
.activity-panel { padding-top: 16px; margin-top: 17px; border-top: 1px solid var(--line); }
.activity-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-height: 135px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #344751 transparent; }
.activity-item { position: relative; padding-left: 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.activity-item::before { content: ""; position: absolute; width: 4px; height: 4px; top: 6px; left: 0; border-radius: 50%; background: var(--quiet); }
.activity-item:first-child { color: #c4cdca; }
.activity-item:first-child::before { background: var(--brass); }
.activity-item time { color: var(--quiet); font: 8px var(--mono); }

.region-rail { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 14px 0 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.region-tab {
  position: relative;
  min-width: 0;
  min-height: 47px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .018);
  color: var(--muted);
  font-size: 10px;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.region-tab:hover:not(:disabled) { background: var(--panel-hover); color: var(--ink); }
.region-tab strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 500; }
.region-tab small, .region-tab .mono { font-size: 8px; color: var(--quiet); }
.region-tab.is-current { border-color: rgba(223, 189, 129, .45); color: var(--brass-light); }
.region-tab.is-current small { color: var(--brass); }
.region-tab.is-selected { border-color: var(--brass); background: rgba(223, 189, 129, .09); color: var(--brass-light); box-shadow: inset 0 -2px 0 var(--brass); }
.region-tab.is-resolved { opacity: .58; }
.region-tab .faction-dot { width: 6px; height: 6px; position: absolute; right: 8px; top: 8px; }

.action-dock { padding: 19px 0 20px; }
.turn-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 15px; }
.turn-copy .eyebrow { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 4px; }
.turn-copy strong { font-size: 14px; font-weight: 500; }
.turn-copy p { display: inline; margin-left: 12px; font-size: 11px; color: var(--muted); }
.turn-actions { display: flex; align-items: center; gap: 8px; }
.hand { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; align-items: stretch; }
.action-card {
  position: relative;
  min-width: 0;
  min-height: 177px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 13px 12px 10px;
  border: 1px solid #c9c9b4;
  border-radius: 6px;
  background: linear-gradient(135deg, #f0e9db, #dedcca);
  color: #223640;
  text-align: left;
  box-shadow: 0 5px 11px rgba(0, 0, 0, .15);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.action-card::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(67, 77, 69, .13); border-radius: 3px; }
.action-card:hover:not(:disabled) { transform: translateY(-5px); border-color: var(--brass-light); box-shadow: 0 12px 18px rgba(0, 0, 0, .24); }
.action-card:focus-visible { outline-offset: 5px; }
.action-card.is-selected { transform: translateY(-7px); outline: 2px solid var(--brass); outline-offset: 3px; box-shadow: 0 15px 28px rgba(0, 0, 0, .28); }
.action-card.is-used { background: #192831; border-color: #2a3a42; color: #a1afb1; opacity: .46; box-shadow: none; }
.action-card.is-used::after { border-color: rgba(255, 255, 255, .07); }
.action-card.is-used .card-description { color: #8da0a5; }
.action-card.is-used .card-bottom { border-color: rgba(255, 255, 255, .1); color: #a9b5b5; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; margin-bottom: 12px; }
.card-icon { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid #ac945566; border-radius: 50%; color: #475d61; font: 25px/1 var(--serif); background: radial-gradient(circle at 35% 25%, #456263, #1d3237 68%); box-shadow: inset 0 0 0 3px #b6a174, inset 0 0 0 4px #28454b, 0 3px 6px #182d3430; text-shadow: 0 2px 1px #0b202e; }
.card-icon svg { width: 28px; height: 28px; stroke-width: 1.35; }
.card-icon:empty::before { content: "✧"; font: 35px var(--serif); }
.card-number { color: #8b9286; font: 9px/1.5 var(--mono); }
.card-title { font: 600 16px/1.2 var(--serif); letter-spacing: -.3px; margin-bottom: 7px; }
.card-description { color: #66746d; font-size: 9px; line-height: 1.65; margin-bottom: 13px; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: auto; padding-top: 7px; border-top: 1px solid rgba(53, 70, 66, .14); color: #6b786c; font: 8px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.site-footer { min-height: 45px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 9px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brass); }
.site-footer .mono { font-size: 8px; letter-spacing: .8px; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.chip, .badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 9px/1.5 var(--mono); white-space: nowrap; }
.chip { color: var(--brass); border-color: rgba(223, 189, 129, .2); background: rgba(223, 189, 129, .055); }
.error { color: #efa59b; font-size: 12px; line-height: 1.7; }
.status-line { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(161, 183, 152, .1); }
.status-dot.error { background: var(--coral); box-shadow: 0 0 0 3px rgba(216, 130, 120, .1); }

dialog.modal {
  width: min(560px, calc(100% - 32px));
  max-width: 100%;
  max-height: min(88dvh, 800px);
  padding: 0;
  border: 1px solid rgba(223, 189, 129, .30);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .55);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3f5056 transparent;
}
dialog.modal::backdrop { background: rgba(4, 13, 20, .75); backdrop-filter: blur(7px); }
.modal-card { padding: 28px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.modal-header h2 { font: 500 29px/1.2 var(--serif); letter-spacing: -.65px; }
.modal-header .eyebrow { margin-bottom: 6px; }
.modal-header p { margin-top: 9px; color: var(--muted); font-size: 12px; }
.modal-close { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; margin: -3px -6px 0 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 22px; line-height: 1; }
.modal-close:hover { color: var(--ink); background: var(--panel-hover); }
.modal-close svg { width: 17px; height: 17px; }
.modal-body { display: grid; gap: 16px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.modal-body > p { margin-bottom: 2px; }
.modal-body strong { color: var(--ink); font-weight: 500; }
.modal-body h3 { color: var(--ink); font: 500 19px var(--serif); }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mode-option { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 105px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); cursor: pointer; color: var(--muted); font-size: 11px; line-height: 1.6; }
.mode-option strong { font-size: 13px; color: var(--ink); }
.mode-option input { position: absolute; right: 11px; top: 12px; width: 13px; height: 13px; }
.mode-option:hover { border-color: rgba(223, 189, 129, .4); }
.mode-option:has(input:checked) { background: rgba(223, 189, 129, .07); border-color: var(--brass); }
.mode-option:has(input:focus-visible) { outline: 2px solid var(--brass-light); outline-offset: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .field-label { margin-bottom: 0; }
.rules-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: rules; }
.rules-step { position: relative; padding-left: 39px; counter-increment: rules; font-size: 12px; color: var(--muted); }
.rules-step::before { content: "0" counter(rules); position: absolute; left: 0; top: 1px; color: var(--brass); font: 10px var(--mono); }
.rules-step strong, .rules-step h3 { display: block; margin-bottom: 5px; color: var(--ink); font: 500 16px var(--serif); }
.invite-link { display: flex; gap: 8px; align-items: center; min-width: 0; }
.invite-link input { flex: 1; min-width: 0; font: 10px var(--mono); }
.invite-link .button { flex-shrink: 0; }
.theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.theme-switch select { width: auto; max-width: 65%; min-height: 34px; padding-block: 6px; }
.toast, #toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 28px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #25373e;
  color: var(--ink);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .32);
  font-size: 12px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.toast.is-visible, #toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (min-width: 1550px) {
  .app-shell { padding-inline: 44px; }
  .game-layout { min-height: 610px; }
  .board-stage { min-height: 610px; }
  .action-card { min-height: 188px; padding: 15px 15px 12px; }
  .card-title { font-size: 18px; }
  .card-description { font-size: 10px; }
}

@media (max-width: 1200px) {
  .app-shell { padding-inline: 23px; }
  .game-layout { grid-template-columns: 195px minmax(0, 1fr) 220px; }
  .briefing-panel { padding-right: 17px; }
  .players-panel { padding-left: 17px; }
  .board-topline { left: 18px; top: 24px; right: 18px; }
  .camera-controls { right: 16px; top: 94px; }
  .stage-title { max-width: 100%; }
  .hand { gap: 7px; }
  .action-card { padding: 11px 9px 9px; min-height: 172px; }
  .card-title { font-size: 14px; }
  .card-description { font-size: 9px; }
  .region-tab { padding-inline: 8px; }
  .header-note { display: none; }
}

@media (max-width: 1100px) {
  .app-shell { padding-inline: 20px; }
  .game-layout { grid-template-columns: 175px minmax(0, 1fr) 190px; min-height: 550px; }
  .briefing-panel { padding-right: 13px; }
  .players-panel { padding-left: 13px; }
  .player-card { padding: 10px; }
  .player-heading { gap: 7px; }
  .player-heading .badge { font-size: 7px; padding: 2px 4px; }
  .avatar { width: 27px; height: 27px; font-size: 11px; }
  .player-name { font-size: 11px; }
  .court-grid { gap: 4px; }
  .court-token { font-size: 10px; gap: 5px; }
  .board-help { font-size: 8px; left: 12px; right: 12px; }
  .turn-copy p { display: block; margin: 3px 0 0; }
  .hand { display: flex; gap: 10px; overflow-x: auto; padding: 9px 4px 14px; margin: -9px -4px -14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #475752 transparent; }
  .action-card { flex: 0 0 142px; min-height: 182px; scroll-snap-align: start; padding: 13px 12px 10px; }
  .card-title { font-size: 16px; }
  .region-rail { gap: 5px; }
  .region-tab { min-height: 48px; padding-inline: 7px; }
  .region-tab strong { font-size: 9px; }
}

@media (max-width: 850px) {
  .topbar { min-height: 78px; gap: 16px; }
  .brand-name strong { font-size: 20px; }
  .brand-name small { font-size: 8px; letter-spacing: 1.6px; }
  .header-actions { gap: 5px; }
  .header-actions .button { min-height: 35px; padding: 7px 10px; font-size: 11px; }
  .game-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .board-stage { grid-column: 1 / -1; grid-row: 1; min-height: 480px; border-bottom: 1px solid var(--line); }
  .board-topline { top: 23px; left: 3px; right: 3px; }
  .stage-title h1, .board-topline h1 { font-size: 32px; }
  .camera-controls { top: 25px; right: 0; }
  .stage-title { max-width: 75%; }
  .board-help { bottom: 15px; font-size: 9px; }
  .briefing-panel { grid-column: 1; grid-row: 2; padding: 20px 20px 18px 0; border-right: 1px solid var(--line); }
  .players-panel { grid-column: 2; grid-row: 2; padding: 20px 0 18px 20px; border-left: 0; }
  .agenda { display: none; }
  .round-number { font-size: 33px; }
  .round-summary { max-width: none; margin-bottom: 18px; }
  .briefing-panel > .panel-heading { margin-bottom: 10px; }
  .move-panel, #move-panel { margin-top: 16px; padding-top: 15px; }
  .players-panel > .panel-heading { margin-bottom: 10px; }
  .player-card { margin-bottom: 8px; padding: 10px 12px; }
  .court-grid { margin-block: 9px 7px; }
  .court-token { min-height: 25px; }
  .faction-summary { display: none; }
  .activity-panel { padding-top: 12px; margin-top: 13px; }
  .activity-panel .panel-heading { margin-bottom: 8px; }
  .activity-list { max-height: 64px; gap: 6px; }
  .region-rail { display: flex; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #475752 transparent; padding-block: 12px; scroll-snap-type: x proximity; }
  .region-tab { flex: 0 0 111px; min-height: 45px; padding: 8px 10px; scroll-snap-align: start; }
  .region-tab strong { font-size: 10px; }
  .action-dock { padding-block: 17px 21px; }
  .turn-copy strong { font-size: 13px; }
  .turn-copy p { font-size: 10px; }
  .turn-bar { margin-bottom: 16px; }
  .site-footer { min-height: 47px; font-size: 8px; }
}

@media (max-width: 560px) {
  .app-shell { padding-inline: 15px; }
  .topbar { min-height: 75px; gap: 9px; }
  .brand { gap: 8px; }
  .brand > svg, .brand > .brand-icon, .brand > .icon { width: 29px; height: 34px; }
  .brand-name strong { font-size: 18px; letter-spacing: -.55px; }
  .brand-name small { font-size: 7px; letter-spacing: 1.2px; }
  .header-actions { justify-content: flex-end; flex-wrap: nowrap; gap: 3px; }
  .header-actions .button { min-height: 33px; padding: 7px 8px; font-size: 10px; gap: 5px; }
  .header-actions .button svg { width: 13px; height: 13px; }
  .board-stage { min-height: 430px; margin-inline: -15px; }
  .board-topline { left: 18px; right: 18px; top: 19px; }
  .stage-title h1, .board-topline h1 { font-size: 29px; margin-top: 6px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .stage-description { font-size: 10px; margin-top: 7px; max-width: 220px; }
  .camera-controls { right: 15px; top: 19px; }
  .camera-controls button { min-height: 28px; min-width: 29px; font-size: 9px; padding: 5px 7px; }
  .board-help { left: 14px; right: 14px; bottom: 13px; gap: 9px; font-size: 8px; }
  .briefing-panel { padding: 18px 13px 18px 0; }
  .players-panel { padding: 18px 0 18px 13px; }
  .panel-heading h2, .panel-heading h3, h2.panel-heading, h3.panel-heading { font-size: 8px; letter-spacing: 1.2px; }
  .round-number { font-size: 30px; }
  .round-summary { font-size: 10px; margin-bottom: 14px; }
  .selected-title { font-size: 19px; }
  .instruction { font-size: 10px; }
  .move-panel .button { padding-inline: 9px; font-size: 11px; }
  .field-label { font-size: 10px; }
  .player-card { padding: 9px; }
  .avatar { width: 24px; height: 24px; font-size: 10px; }
  .player-name { font-size: 10px; }
  .player-status { font-size: 8px; }
  .player-heading .badge { display: none; }
  .court-grid { gap: 3px; }
  .court-token { gap: 4px; padding-inline: 3px; font-size: 9px; }
  .court-token::before { width: 7px; height: 7px; }
  .card-count { font-size: 8px; }
  .activity-item { font-size: 9px; line-height: 1.5; }
  .activity-list { max-height: 58px; }
  .turn-bar { gap: 10px; align-items: flex-start; }
  .turn-copy .eyebrow { font-size: 7px; }
  .turn-copy strong { font-size: 12px; }
  .turn-copy p { font-size: 9px; max-width: 215px; }
  .turn-actions { gap: 4px; }
  .turn-actions .button { min-height: 34px; padding: 7px 9px; font-size: 10px; }
  .action-card { flex-basis: 140px; min-height: 178px; }
  .site-footer { gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; padding-block: 12px; line-height: 1.6; }
  .site-footer > * { max-width: 100%; }
  #board-fallback { inset: 122px 17px 45px; }
  .fallback-board { gap: 7px; width: min(350px, 100%); }
  .territory { min-height: 72px; padding: 10px 5px; gap: 4px; }
  .territory strong { font-size: 11px; }
  .territory small { font-size: 8px; }
  .result-card { padding: 27px 22px; }
  .result-card h2 { font-size: 30px; }
  dialog.modal { max-height: 91dvh; width: calc(100% - 24px); }
  .modal-card { padding: 23px 20px; }
  .modal-header { margin-bottom: 19px; }
  .modal-header h2 { font-size: 26px; }
  .modal-body { gap: 14px; font-size: 11px; }
  .mode-options { gap: 7px; }
  .mode-option { padding: 12px; font-size: 10px; min-height: 112px; }
  .mode-option strong { font-size: 12px; padding-right: 16px; }
  .mode-option input { right: 8px; top: 10px; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .rules-step { padding-left: 32px; font-size: 11px; }
  .invite-link { flex-wrap: wrap; }
  .invite-link input { flex-basis: 100%; }
  .invite-link .button { width: 100%; }
}

@media (max-width: 380px) {
  .app-shell { padding-inline: 12px; }
  .brand-name strong { font-size: 16px; }
  .brand-name small { font-size: 6px; }
  .brand > svg, .brand > .brand-icon, .brand > .icon { width: 24px; }
  .header-actions .button { font-size: 9px; padding-inline: 7px; }
  .header-actions .button-ghost { padding-inline: 5px; }
  .board-stage { margin-inline: -12px; }
  .camera-controls { top: 93px; }
  .stage-title { max-width: 100%; }
  .turn-copy p { max-width: 165px; }
  .turn-actions .button { font-size: 9px; padding-inline: 7px; }
  .briefing-panel { padding-right: 10px; }
  .players-panel { padding-left: 10px; }
  .player-card { padding: 7px; }
  .player-heading { gap: 5px; }
  .court-token { font-size: 8px; gap: 3px; }
  .mode-options { grid-template-columns: 1fr; }
  .mode-option { min-height: 85px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .action-card:hover:not(:disabled), .action-card.is-selected { transform: none; }
}

@media (forced-colors: active) {
  .action-card, .territory, .button, .region-tab, .player-card, .mode-option { border: 1px solid ButtonText; }
  .action-card.is-selected, .region-tab.is-selected, .territory.is-selected { outline: 2px solid Highlight; }
  .faction-dot, .court-token::before { forced-color-adjust: none; }
}

/* Exact application markup: faction glyphs, fallback counters, and compact chrome. */
.brand > img { width: 39px; height: 42px; flex: 0 0 auto; object-fit: contain; }
.panel-heading > .mono { font-size: 8px; letter-spacing: .3px; white-space: nowrap; }
.player-heading > .card-count { margin-left: auto; flex-shrink: 0; font-size: 11px; }
.player-heading > .card-count small { font-size: 8px; color: var(--quiet); }
.court-token::before { display: none; }
.court-token > span:first-child:not(.sr-only) { color: var(--faction, var(--blue)); font-size: 11px; line-height: 1; }
.court-token b { font-weight: 500; }
.faction-dot { background: var(--faction, var(--blue)); }
.faction-dot:not(:empty) { display: grid; place-items: center; width: 12px; height: 14px; color: var(--faction, var(--blue)); background: transparent; font-size: 11px; line-height: 1; }
.agenda-marker { color: var(--faction, var(--brass)); }
.stat-value > span { color: var(--quiet); font-size: 9px; }
.region-tab > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-tab small { white-space: nowrap; }
.region-tab small i { font-style: normal; }
.card-icon { font-size: 29px; line-height: 1; }
.selected-title > h3 { margin-top: 4px; font: inherit; }
.move-panel > h3 { margin-top: 5px; margin-bottom: 8px; font: 500 20px/1.25 var(--serif); }
.territory > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; width: 100%; font-size: 10px; }
.territory .court-token { display: inline-flex; flex: 0 0 auto; min-height: 20px; gap: 3px; padding: 1px 2px; border: 0; background: transparent; color: #25363b; font-size: 9px; }
.territory .court-token > span:first-child:not(.sr-only) { font-size: 9px; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.turn-actions > .mono { font-size: 8px; letter-spacing: .5px; white-space: nowrap; }
.mode-option:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 82px; }
input.invite-link { display: block; font: 11px/1.5 var(--mono); }
@media (max-width: 850px) {
  .turn-bar { flex-wrap: wrap; }
  .turn-copy { flex: 1 1 250px; }
  .turn-actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 13px; padding: 15px 0 12px; }
  .brand > img { width: 29px; height: 34px; }
  .header-actions { flex: 1 1 100%; width: 100%; justify-content: space-between; gap: 5px; }
  .header-actions .button { flex: 1 1 auto; }
  .turn-copy { flex-basis: 100%; }
  .turn-actions { width: 100%; justify-content: flex-end; }
  .turn-actions > .mono { margin-right: auto; }
  .territory > span { gap: 3px; }
  .territory .court-token { gap: 2px; font-size: 8px; }
  .panel-heading > .mono { font-size: 7px; }
}
@media (max-width: 380px) {
  .brand > img { width: 24px; height: 30px; }
  .header-actions .button { font-size: 10px; }
}