/* Island collection: shared vector/mesh art, with existing board hit targets. */
:root{--coral:#c67552;--deep:#31776c;--gold:#e5bb73}.studio-link{font-size:12px;font-weight:700;text-decoration:none;color:#31776c;border:1px solid #aec6b9;border-radius:30px;padding:8px 15px;margin-left:auto;margin-right:20px}.hero h1{color:#203e40}.hero h1 em{color:#ac7046}#heroIsland{display:flex;max-width:430px;margin:22px 0 -10px}#heroIsland svg{width:38%;margin-right:-4%;filter:drop-shadow(0 12px 6px #193b3a30)}#heroIsland svg:nth-child(2){transform:translateY(-20px)}.board-panel{background:radial-gradient(ellipse at 50% 40%,#377d84,#153f50);background-size:100% 100%}.hex{stroke:#d6d9b8;stroke-width:3}.hex.sea{fill:#318f9e;stroke:#3c9aa5;stroke-width:2}.hex.forest{fill:#367b62}.hex.pasture{fill:#8cbf74}.hex.fields{fill:#d9ad53}.hex.hills{fill:#be745b}.hex.mountains{fill:#758b98}.hex.desert{fill:#d8ba83}.hex.gold{fill:#dab84f}.island-art{pointer-events:none;opacity:1;stroke:none}.island-art polygon{pointer-events:none}.edge{stroke:#d4d6ad66;stroke-width:4}.edge.occupied{stroke:transparent;stroke-width:18}.edge.legal{stroke:#ffe26a;stroke-width:13}.vertex:not(.legal){fill:#e3dabd;stroke:#355756;stroke-width:1;opacity:.75}.building{stroke:none}.number{fill:#fff1ce;stroke:#866542;stroke-width:1.5}.number-text{font-size:16px}.players-panel,.log-panel{background:#f6f3e9}.player{background:#fffcf4}.turn-card,#hand{background:#fffcf4}.status{background:#fff6dfef;color:#24464a}.board-tools button{background:#fff6df}.port circle{fill:#f3e2b7}.action-tray{background:#fff6dfef}.landing{padding-top:4vh;padding-bottom:4vh}@media(max-width:900px){#heroIsland{max-width:260px}.studio-link{margin-right:10px;font-size:10px}.board-tools{top:51px;right:8px}.status{font-size:11px}}
/* Shared seams replace overlapping tile strokes and permanent route guides. */
#board .hex {stroke:none;filter:none}
#board .hex.legal {stroke:#ffe26a;stroke-width:3;stroke-dasharray:none;cursor:pointer}
.board-seams {fill:none;stroke-linecap:round;stroke-linejoin:round}
.board-seams .sea-seam {stroke:#79b6ba;stroke-opacity:.3;stroke-width:.85}
.board-seams .fog-seam {stroke:#bdd0cd;stroke-opacity:.6;stroke-width:.8;stroke-dasharray:3.5 3.5}
.board-seams .land-seam {stroke:#6f7158;stroke-width:2.1}
.board-seams .land-seam-light {stroke:#c4c09a;stroke-width:.8}
.board-seams .shore-water {stroke:#60a9ab;stroke-width:7}
.board-seams .shore-bank {stroke:#647861;stroke-width:3.8}
.board-seams .shore-sand {stroke:#e1cfa0;stroke-width:2.2}
#board .edge {stroke:transparent;filter:none;pointer-events:none}
#board .edge.legal {stroke:#ffe26a;stroke-width:12;pointer-events:stroke;cursor:pointer}
#board .edge.source-edge {stroke:#fff27a;stroke-width:14}
#board .vertex:not(.legal) {fill:#65795f;stroke:none;opacity:.55;pointer-events:none}
#board .vertex.sea-vertex:not(.legal) {opacity:0}
.harbor .harbor-access{fill:none;stroke:#ddc394;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.harbor-art{pointer-events:none;filter:drop-shadow(0 2px 1px #163c4540)}.port .harbor-art circle{stroke:none;filter:none}.port .harbor-art text{font-size:15px}

/* Sit at the table: opponents ahead, your hand and actions nearest you. */
.modal-card:has(.resource-choice-dialog) {max-width:600px;padding:24px;scrollbar-width:thin;scroll-padding-bottom:110px}
.resource-choice-dialog .picker-intro {font-size:.82rem;line-height:1.5;color:#536b68;margin:0 0 15px}
.picker-progress {display:flex;align-items:center;gap:14px;padding:12px;background:#eaf0e6;border-radius:9px;margin-bottom:14px}
.picker-progress strong {font-size:.82rem;flex:1}.picker-progress progress {width:110px;max-width:32%;height:8px;accent-color:#31776c}
.resource-picker-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.picker-card {min-width:0;text-align:center;padding:8px;border:1px solid #ccd4c4;border-radius:10px;background:#fffaf0}
.picker-card.picked {border-color:#387a69;box-shadow:inset 0 0 0 1px #387a69;background:#eaf2e5}
.picker-card.unavailable {background:#eeeee6;color:#677771}
.picker-art {display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:0;border:0;border-radius:5px;background:transparent}
.picker-art svg {width:42px;height:42px;flex:none}.picker-art strong {font-size:.82rem}
.picker-card:not(.unavailable) .picker-art:disabled {opacity:1}
.picker-card>small {display:block;font-size:.66rem;line-height:1.4;margin:4px 0 9px;color:#526960}
.picker-stepper {display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:4px}
.picker-stepper button {padding:0;height:34px;font-size:1rem}
.picker-stepper input {width:100%;padding:4px 0;text-align:center;font-weight:750;font-size:.95rem;appearance:textfield;-moz-appearance:textfield}
.picker-stepper input::-webkit-inner-spin-button,.picker-stepper input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0}
.picker-stepper input[aria-invalid="true"] {border-color:#b54e37;background:#fff1e8}
.picker-footer {position:sticky;bottom:-24px;padding:12px 0 4px;margin-top:12px;background:var(--paper);border-top:1px solid var(--line)}
#resourceSummary {font-size:.78rem;line-height:1.45;margin:0 0 12px}
.picker-buttons {display:flex;justify-content:space-between;gap:8px}.picker-buttons button {font-size:.78rem;padding:10px 12px}
@media(max-width:600px) {
  .modal:has(.resource-choice-dialog) {padding:10px}
  .modal-card:has(.resource-choice-dialog) {padding:18px 14px;max-height:92dvh}
  .modal-card:has(.resource-choice-dialog) h2 {font-size:1.2rem;padding-right:22px}
  .resource-picker-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .picker-card {padding:6px}.picker-card>small {font-size:.62rem}
  .picker-art svg {width:34px;height:34px}.picker-art strong {font-size:.75rem}
  .picker-stepper {grid-template-columns:34px minmax(0,1fr) 34px}
  .picker-progress {gap:8px;padding:9px}.picker-progress strong {font-size:.75rem}
  .picker-footer {bottom:-18px}.picker-buttons button {font-size:.71rem;padding:9px}
}
#table {
  height:calc(100vh - 66px);height:calc(100dvh - 66px);min-height:0;
  grid-template-columns:minmax(0,1fr) 270px;
  grid-template-rows:auto minmax(180px,1fr) auto;
  grid-template-areas:"players sidebar" "board sidebar" "hand sidebar";
  background:#1b4c58;
}
#table .players-panel {
  grid-area:players;display:block;overflow:visible;padding:10px 24px;
  background:#1b4c58;border:0;z-index:3;
}
#players {display:flex;justify-content:center;gap:14px;max-width:1020px;margin:auto;min-width:0}
#players .player {flex:1;max-width:300px;min-width:0;margin:0}
.player {padding:9px 12px;border:1px solid #d1d6c8;border-left:4px solid var(--seat-color);border-radius:10px;background:#fffaf0}
.player.current {box-shadow:0 0 0 2px #e8bd69;border-color:#e8bd69}
.player-line {align-items:center;gap:9px;min-width:0;font-size:.85rem}
.seat-avatar {display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:var(--seat-color);color:#17323a;font-weight:900;font-size:1rem}
.player-name {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-name small {display:block;font-size:.64rem;font-weight:600;margin-top:2px}
.player-score {flex:none;font-size:1.18rem;white-space:nowrap;line-height:1.1;text-align:right}
.player-score small {display:block;font-size:.56rem;font-weight:600;margin-top:3px}
.player-cards {display:flex;align-items:center;gap:6px;margin-top:7px}
.player-cards small {font-size:.69rem;line-height:1.35}
.card-back {display:inline-block;flex:none;width:10px;height:13px;border:1px solid #f8eccf;border-radius:2px;background:#4b7269;box-shadow:2px -1px 0 #a3b6a4}
#table .board-panel {grid-area:board;height:auto;order:0;min-height:0;padding:89px 0 30px}
#table .board-tools {top:44px}
#table .board-panel>.status {top:7px;padding:7px 14px}
#table .map-legend {bottom:7px;left:auto;right:14px;padding:4px 8px;font-size:.64rem}
#table .board-hint {bottom:7px;padding:4px 8px}
#table .trade-offer {bottom:18px;max-height:calc(100% - 90px);overflow:auto}

.hand-dock {
  grid-area:hand;display:grid;grid-template-columns:176px minmax(0,1fr);gap:16px;
  padding:12px 18px 14px;background:linear-gradient(#fcf8ee,#f0e8d5);
  border-top:3px solid #b89964;min-width:0;z-index:3;
}
.your-seat {display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
#yourPlayer .player {margin:0;padding:8px}
#yourPlayer .player-cards {display:none}
.your-seat .turn-card {margin:0;padding:7px 9px;background:transparent;border:0;border-radius:0}
.your-seat .turn-card>span {font-size:.61rem}
.your-seat .turn-card>strong {font-family:inherit;font-size:.85rem;font-weight:700;line-height:1.3;text-transform:capitalize}
#dice {font-size:.84rem;margin-top:4px}
.hand-main {min-width:0}
#table .action-tray {
  position:static;transform:none;max-width:100%;min-height:38px;max-height:44px;
  padding:0 0 5px;margin:0;border-radius:0;background:transparent;gap:6px;
  scrollbar-width:thin;
}
#table .action-tray:empty {display:flex}
#table .action-tray button {height:33px;font-size:.78rem;border-color:#b7c7b8;background:#fffcf4}
#table .action-tray button.selected {background:#efd499;border-color:#c4a061}
#table .action-tray button[data-type="roll"],#table .action-tray button[data-type="end_turn"] {background:#315f5b;color:#fff;border-color:#315f5b}
#hand {display:flex;align-items:flex-start;gap:16px;margin:0;padding:5px 0 0;background:transparent;border:0;border-radius:0;min-width:0;height:125px;overflow:auto}
.hand-resources {min-width:0;flex:0 1 auto}
.hand-heading {display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.hand-heading strong {font-size:.76rem}
.hand-heading small {font-size:.65rem;color:#536b68}
#hand .resources {display:flex;gap:7px;margin:0;padding:1px 2px 5px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
#hand .resource {
  --card-accent:#829280;--card-tint:#edf0df;
  /* Include the full card width when the hand computes its intrinsic size. */
  width:65px;
  position:relative;flex:0 0 65px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:6px 5px;border:1px solid #cfcbb7;border-bottom:3px solid var(--card-accent);border-radius:7px;
  background:linear-gradient(145deg,#fffcf4,var(--card-tint));box-shadow:0 2px 2px #46381710;color:#294648;
}
#hand .resource svg {width:44px;height:44px;margin-bottom:2px;flex:none}
#hand .resource>span {font-size:.65rem;font-weight:750}
#hand .resource-count-badge {position:absolute;right:5px;top:4px;font-size:.85rem;font-variant-numeric:tabular-nums;line-height:1}
#hand .resource.empty {background:#f1eee4;box-shadow:none;border-bottom-color:#c9c9b8}
#hand .resource.empty svg {opacity:.4}
#hand .resource.material-brick {--card-accent:#b76c50;--card-tint:#f0d7c5}
#hand .resource.material-lumber {--card-accent:#478166;--card-tint:#d5e5d7}
#hand .resource.material-wool {--card-accent:#8bac6b;--card-tint:#e1ead1}
#hand .resource.material-grain {--card-accent:#c49b41;--card-tint:#f4e5b8}
#hand .resource.material-ore {--card-accent:#758b98;--card-tint:#dbe4e7}
#hand .resource.material-cloth {--card-accent:#6c8bae;--card-tint:#dce4f0}
#hand .resource.material-paper {--card-accent:#71a075;--card-tint:#deead8}
#hand .resource.material-coin {--card-accent:#bf963d;--card-tint:#f3e2b2}
.hand-extras {flex:1;min-width:150px;max-width:400px;max-height:138px;overflow:auto;scrollbar-width:thin}
.hand-extras:empty {display:none}
#hand .city-improvements,#hand .progress-hand,.development-hand {display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px;padding:0;border:0;font-size:.66rem}
#hand .city-improvements>b,#hand .progress-hand>b,.development-hand>b {flex-basis:100%;font-size:.69rem;margin-bottom:1px}
.held-card {display:inline-flex;flex-direction:column;gap:3px;padding:7px 9px;border:1px solid #c3cbbb;border-radius:6px;background:#fffaf0;font-size:.72rem;font-weight:650}
.held-card small {font-size:.6rem;color:#637568;font-weight:500}
#hand .progress-hand .held-card {background:#eaf0e6;padding:7px 9px}

#table .log-panel {grid-area:sidebar;padding:16px;min-height:0;min-width:0;z-index:6;border-color:#bdcabe;scrollbar-width:thin}
#table .log-panel h3 {font-size:1.12rem;margin:20px 0 12px}
#table .roll-stats {margin:0;padding:12px}
#table #ckStatus {margin:0 0 14px}
#table #ckStatus:empty {display:none}
#table #log {max-height:clamp(160px,30vh,340px);overflow:auto;padding-right:5px;scrollbar-width:thin}
.table-controls {border-top:1px solid var(--line);margin-top:18px}
.graphics-settings {margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.76rem}
.graphics-settings summary {font-weight:750;cursor:pointer}
.graphics-settings label {display:grid;gap:6px;margin-top:12px}
.graphics-settings select {width:100%;padding:8px;font-size:.75rem}
.graphics-settings p {font-size:.72rem;line-height:1.45;color:#536b68;margin:9px 0 0}
#closeSidebar,#toggleSidebar {display:none}
#toast {bottom:clamp(190px,25vh,260px)}
.position-error {padding:11px 13px;border:1px solid #dca398;border-left:4px solid #b34835;border-radius:8px;background:#fff0e9;color:#85372b;font-size:.8rem;line-height:1.5;overflow-wrap:anywhere}
#table .status.test-invalid {white-space:normal;border:1px solid #dca398;border-radius:10px;color:#85372b;background:#fff0e9;line-height:1.35;max-height:100px;overflow:auto}

@media(min-width:1101px) {
  #table .board-panel {padding-top:55px}
  #table .board-tools {top:13px}
  #table .board-panel>.status {top:14px;max-width:calc(100% - 420px)}
}
@media(max-width:1100px) {
  #table {grid-template-columns:minmax(0,1fr);grid-template-areas:"players" "board" "hand"}
  #table .log-panel {position:fixed;top:66px;bottom:0;right:0;width:min(350px,100%);visibility:hidden;box-shadow:-12px 0 40px #12364245}
  #table.sidebar-open .log-panel {visibility:visible}
  #toggleSidebar,#closeSidebar {display:block}
  #closeSidebar {width:100%;margin:0 0 15px}
}
@media(max-width:600px) {
  header {padding-inline:12px;gap:8px}
  header .brand {display:flex;flex-direction:column;flex:1;min-width:0;max-width:160px;font-size:1rem;line-height:1.2}
  header .brand span {font-size:.58rem;line-height:1.35;letter-spacing:.05em;margin-top:3px}
  header .studio-link {flex:none;padding:6px 8px;font-size:.56rem;margin-left:auto;margin-right:0}
  #roomBadge {flex:none;font-size:.67rem;max-width:70px}
  #table {min-height:0}
  #table .players-panel {padding:8px;}
  #players {gap:7px}
  #players .player {padding:6px;border-left-width:3px;border-radius:7px}
  #players .player-line {gap:4px;font-size:.66rem}
  #players .seat-avatar {display:none}
  #players .player-score {font-size:1rem}
  #players .player-score small {font-size:.5rem}
  #players .player-cards {gap:4px;margin-top:5px}
  #players .player-cards small {font-size:.58rem}
  #players .improvement-summary {font-size:.55rem;margin-top:3px}
  #table .board-panel {padding:76px 0 22px}
  #table .board-tools {top:39px;left:8px;right:8px;gap:5px}
  #table .board-tools button {padding:6px;font-size:.67rem}
  #table .board-panel>.status {font-size:.67rem}
  #table .board-hint {bottom:4px;font-size:.56rem;padding:3px 6px}
  #table .trade-offer {padding:10px;bottom:8px;max-height:calc(100% - 79px)}
  .trade-partners {margin:4px 0 8px}.trade-terms>div {padding:7px}.trade-response-note {margin-top:8px}
  .hand-dock {grid-template-columns:minmax(0,1fr);gap:5px;padding:7px 9px max(9px,env(safe-area-inset-bottom))}
  .your-seat {flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  #yourPlayer {min-width:0;flex:1;max-width:250px}
  #yourPlayer .player {padding:3px 6px;border:0;border-left:3px solid var(--seat-color);border-radius:5px;background:transparent}
  #yourPlayer .player.current {box-shadow:0 0 0 1px #c9a362}
  #yourPlayer .player-line {gap:5px;font-size:.72rem}
  #yourPlayer .seat-avatar {flex-basis:22px;height:22px;font-size:.7rem;border-radius:5px}
  #yourPlayer .player-name small {display:inline;margin-left:5px;font-size:.54rem}
  #yourPlayer .player-score {font-size:.95rem}
  #yourPlayer .player-score small {display:inline;font-size:.49rem}
  #yourPlayer .improvement-summary {display:none}
  .your-seat .turn-card {padding:0;flex:none;text-align:right;max-width:130px}
  .your-seat .turn-card>span {display:none}
  .your-seat .turn-card>strong {font-size:.66rem}
  #dice {font-size:.62rem;margin-top:1px}
  #table .action-tray {min-height:33px;max-height:36px;padding-bottom:3px}
  #table .action-tray button {height:30px;font-size:.69rem;padding:.35rem .55rem}
  #hand {gap:10px;padding-top:1px;height:100px}
  .hand-heading {margin-bottom:4px;gap:7px;max-width:calc(100vw - 22px)}.hand-heading strong {font-size:.66rem}.hand-heading small {font-size:.58rem}
  #hand:has(.held-card,.commodity) .hand-heading::after {content:"More cards →";font-size:.55rem;color:#536b68;margin-left:auto}
  #hand .resources {gap:5px;overflow:visible}
  .hand-resources {flex:0 0 auto}
  #hand .resource {width:57px;flex-basis:57px;height:74px;padding:4px}
  #hand .resource svg {width:36px;height:36px;margin-bottom:1px}
  #hand .resource>span {font-size:.6rem}
  #hand .resource-count-badge {font-size:.78rem}
  .hand-extras {flex:0 0 150px;min-width:120px;max-width:170px;max-height:115px}
  #hand .city-improvements,#hand .progress-hand,.development-hand {font-size:.6rem;gap:3px}
  #hand .city-improvements>b,#hand .progress-hand>b,.development-hand>b {font-size:.61rem}
  .held-card {padding:4px 6px;font-size:.63rem}
}

/* Keep test control state visible even when the sidebar is closed or scrolled. */
.room-context {display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.table-mode {border:1px solid #b8944f;border-radius:6px;background:#fff0ca;color:#634b20;padding:3px 7px;font-size:.7rem;font-weight:700;line-height:1.2;text-align:right}
.table-mode[hidden] {display:none}
@media(max-width:600px) {
  header.has-table-mode .studio-link {display:none}
  header.has-table-mode .room-context {max-width:190px;gap:3px}
  header.has-table-mode #roomBadge {max-width:none;font-size:.62rem}
  .table-mode {font-size:.62rem;padding:3px 5px}
}

.test-case-files {display:grid;gap:7px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.test-case-files .test-help {margin:0}
.test-file-warning {border-left:3px solid #b8944f;padding:9px 12px;background:#fff0ca;color:#634b20;line-height:1.45}
#testCaseFile {max-width:100%;font-size:.8rem}

/* Trade quantities use full-size tap targets rather than native number arrows. */
.modal-card:has(.trade-dialog) {max-width:760px;padding:24px;scrollbar-width:thin;scroll-padding-bottom:130px}
.trade-recipient {display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:700}
.trade-recipient select {flex:1;min-height:44px}
.trade-help {font-size:.8rem;line-height:1.5;color:#536b68;margin:12px 0 18px}
.trade-dialog .trade-columns {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trade-dialog fieldset {min-width:0;margin:0;padding:10px;background:#f7f7ed}
.trade-dialog legend {font-weight:750;padding:0 6px}
.trade-resource {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #d7dfd0}
.trade-resource:last-child {border-bottom:0}
.trade-dialog .trade-resource label {display:flex;align-items:center;justify-content:flex-start;gap:5px;margin:0;min-width:0;font-size:.8rem}
.trade-resource label svg {width:30px;height:30px;flex:none}
.trade-resource label small {display:block;font-size:.64rem;font-weight:400;color:#536b68;margin-top:3px}
.trade-stepper {display:grid;grid-template-columns:44px 44px 44px;gap:4px;flex:none}
.trade-stepper button {height:44px;padding:0;font-size:1.3rem;border-radius:8px;touch-action:manipulation}
.trade-dialog .trade-stepper input {width:44px;min-height:44px;padding:3px;text-align:center;font-size:1rem;font-weight:750;appearance:textfield;-moz-appearance:textfield}
.trade-stepper input::-webkit-inner-spin-button,.trade-stepper input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0}
.trade-stepper input[aria-invalid="true"] {border-color:#b54e37;background:#fff1e8}
.trade-footer {position:sticky;bottom:-24px;background:var(--paper);border-top:1px solid var(--line);padding:12px 0 4px;margin-top:16px}
#tradeSummary {font-size:.82rem;line-height:1.4;margin:0 0 10px}
.trade-buttons {display:flex;gap:10px}.trade-buttons button {min-height:44px}.trade-buttons .primary {flex:1}
@media(max-width:650px) {
  .modal:has(.trade-dialog) {padding:10px}
  .modal-card:has(.trade-dialog) {padding:18px 14px;max-height:92dvh}
  .modal-card:has(.trade-dialog) h2 {font-size:1.2rem;padding-right:28px}
  .trade-dialog .trade-columns {grid-template-columns:minmax(0,1fr)}
  .trade-footer {bottom:-18px}
}
.trade-preferences {padding:12px 0;border-block:1px solid var(--line);margin-bottom:16px}
.trade-preferences label {display:flex;align-items:flex-start;gap:10px;font-size:.8rem;font-weight:700;line-height:1.5;cursor:pointer}
.trade-preferences input {width:22px;height:22px;flex:none;margin:0;accent-color:#31776c}
.trade-preferences p {font-size:.72rem;line-height:1.4;color:#536b68;margin:8px 0 0}
/* Illustrated development cards keep their timing visible beside the art. */
.development-hand {position:relative;flex-wrap:nowrap;gap:7px;padding-top:19px}
.development-hand>b {position:absolute;top:0;left:0;white-space:nowrap}
.development-hand .illustrated-card {flex:0 0 96px;align-items:center;justify-content:center;gap:2px;height:94px;padding:3px 5px;border-bottom:3px solid var(--development-accent);background:linear-gradient(145deg,#fffdf4,#eee8d6);text-align:center}
.illustrated-card svg {display:block;width:54px;height:43px;flex:none}
.illustrated-card .held-card-name {font-size:.64rem;font-weight:750;line-height:1.12}
.illustrated-card small {font-size:.56rem;line-height:1.15}
@media(max-width:600px) {
  #hand .development-hand {padding-top:16px;margin-bottom:0;gap:5px;flex-wrap:nowrap}
  .development-hand .illustrated-card {flex-basis:88px;height:80px;padding:2px 4px}
  .illustrated-card svg {width:43px;height:34px}
  .illustrated-card .held-card-name {font-size:.6rem}
  .illustrated-card small {font-size:.52rem}
}
.player-awards {display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;font-size:.61rem;font-weight:700}
.player-awards span {background:#f1dfaa;border-radius:4px;padding:3px 5px}
.vp-changes .vp-change {padding:8px;border-left:3px solid #458374;border-radius:4px;background:#e8f0e1;margin:7px 0}
.vp-changes .vp-loss {border-color:#b26d51;background:#f5e7dc}
.vp-change strong,.vp-change span,.vp-change small {display:block}
.vp-change span {font-size:.73rem;margin:3px 0}.vp-change small {font-size:.66rem;color:#536b68}
@media(max-width:600px) {.player-awards {font-size:.53rem;gap:2px}.player-awards span {padding:2px 3px}}
.blocker-marker,.blocker-marker * {pointer-events:none}
.blocker-marker rect {fill:#fff4d5;stroke:#a54735;stroke-width:1.5}
.blocker-marker text {fill:#713524;font-size:8px;font-weight:850;letter-spacing:.3px}
.modal-card:has(.game-summary) {max-width:600px}
.summary-winner {display:flex;align-items:center;gap:14px;padding:14px;background:#f3e5b9;border-radius:12px;margin-bottom:18px}
.summary-winner>span {font-size:2.3rem;flex:none}.summary-winner p {margin:0;min-width:0;overflow-wrap:anywhere}
.summary-winner strong {display:block;font-size:1.25rem}.summary-winner small {display:block;font-size:.78rem;margin-top:5px;color:#536b68}
.game-standings {list-style:none;margin:0;padding:0;display:grid;gap:8px}
.game-standings li {display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f6f6ed}
.game-standings .summary-first {border-color:#cda651;background:#fff8e2}
.summary-place {flex:0 0 38px;font-size:1.05rem;color:#536b68}
.summary-player {min-width:0;flex:1;overflow-wrap:anywhere}.summary-player>strong {display:block}
.summary-player>small,.summary-awards {display:block;font-size:.72rem;color:#536b68;margin-top:4px}.summary-player strong small {font-weight:400;font-size:.75rem}
.summary-score {flex:none;font-size:1.5rem;text-align:right}.summary-score small {display:block;font-size:.65rem}
.summary-note {font-size:.76rem;line-height:1.5;color:#536b68;margin:16px 0}
#summaryBack {width:100%;min-height:44px}
@media(max-width:600px) {
  .modal:has(.game-summary) {padding:10px}
  .modal-card:has(.game-summary) {padding:18px 14px;max-height:92dvh}
  .game-standings li {gap:8px;padding:10px}.summary-place {flex-basis:32px;font-size:.9rem}
  .summary-winner strong {font-size:1.05rem}.summary-winner>span {font-size:1.8rem}
}
#createTargetSetting small {font-weight:400;color:#536b68;font-size:.72rem}
.lobby-target {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.lobby-target label {margin:0}.lobby-target input {width:90px}.lobby-target button {min-height:44px}
.win-target {font-size:.78rem;font-weight:700;padding:10px;background:#f3e5b9;border-radius:7px}
.presentation-settings {padding:12px 0;border-block:1px solid var(--line);margin-bottom:14px}
.presentation-settings label {display:flex;align-items:center;gap:9px;font-size:.78rem;line-height:1.4;min-height:38px;cursor:pointer}
.presentation-settings input {width:20px;height:20px;flex:none;margin:0;accent-color:#31776c}
.presentation-settings p {font-size:.7rem;line-height:1.45;color:#536b68;margin:6px 0}
.event-notice {position:fixed;z-index:16;top:78px;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 24px));padding:16px 42px 16px 16px;border:2px solid #dbb969;border-radius:14px;background:#fffcf0;box-shadow:0 10px 32px #17323a35;pointer-events:none;animation:notice-arrive .25s ease-out}
#eventNoticeContent {display:flex;align-items:center;gap:12px;overflow-wrap:anywhere}
.notice-icon {flex:0 0 48px;font-size:2rem;text-align:center}.notice-icon svg {width:48px;height:40px;display:block}
#eventNoticeContent strong {display:block;font-size:.94rem}#eventNoticeContent small {display:block;margin-top:5px;font-size:.76rem;color:#536b68}
#closeEventNotice {position:absolute;top:5px;right:5px;padding:5px 10px;border:0;background:transparent;font-size:1.3rem;pointer-events:auto}
.bot-action-caption {position:absolute;z-index:7;bottom:34px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:10px 16px;border:1px solid #e9c976;border-radius:10px;background:#173c46ed;color:#fff6dc;box-shadow:0 3px 15px #122c3540;font-size:.82rem;text-align:center;pointer-events:none;animation:notice-arrive .2s ease-out}
#botActionHighlight {position:absolute;z-index:8;width:60px;height:60px;margin:-30px 0 0 -30px;border:3px solid #ffe68d;border-radius:50%;box-shadow:0 0 0 4px #244d58a0,0 0 18px #ffe68d80;pointer-events:none}
#botActionHighlight.pulse {animation:bot-action-pulse .8s ease-in-out 2}
@keyframes bot-action-pulse {0%,100%{scale:.8;opacity:.85}50%{scale:1.15;opacity:1}}
@keyframes notice-arrive {from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.event-notice {top:72px;padding:12px 38px 12px 12px}#eventNoticeContent strong {font-size:.82rem}.bot-action-caption {font-size:.72rem;padding:8px 10px;bottom:25px}}
@media(prefers-reduced-motion:reduce){.event-notice,.bot-action-caption,#botActionHighlight.pulse {animation:none}}
/* All seats share the top scoreboard; cards and actions use the full dock. */
#players {max-width:1180px}
#players .your-player {background:#fff5dc;border-color:#d4b16a}
#players #yourPlayer .player-cards {display:flex}
.hand-dock {grid-template-columns:minmax(0,1fr);gap:0}
.hand-controls {display:flex;align-items:center;gap:14px}
.hand-controls .turn-card {display:flex;align-items:center;gap:7px;flex:0 0 auto;max-width:230px;margin:0;padding:0;border:0;background:transparent;border-radius:0;font-size:.75rem}
.hand-controls .turn-card>span {font-size:.6rem}.hand-controls .turn-card>strong {font-family:inherit;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hand-controls #dice {margin:0;white-space:nowrap}
#table .hand-controls .action-tray {flex:1;min-width:0}
@media(max-width:600px) {
  #table .players-panel {overflow:hidden;padding:7px 8px}
  #players {justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;padding:2px;scroll-snap-type:x proximity;gap:8px}
  #players .player,#players #yourPlayer {flex:0 0 156px;max-width:none;scroll-snap-align:start;padding:7px}
  #players #yourPlayer .player-score small {display:block;font-size:.5rem}
  #players #yourPlayer .improvement-summary {display:block}
  .hand-controls {display:block}.hand-controls .turn-card {max-width:100%;margin-bottom:4px;font-size:.66rem}
  .hand-controls .turn-card>strong {font-size:.68rem}
}

/* Interface palettes leave terrain, tokens and seat colors in their game colors. */
:root {color-scheme:light}
.theme-toggle {display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:7px 12px;margin-right:16px;flex:none}
.theme-toggle>span:first-child {font-size:1.2rem;line-height:1}
.theme-label {font-size:.75rem}
:root[data-theme="dark"] {
  color-scheme:dark;--ink:#e5ede7;--paper:#202f34;--foam:#122126;
  --line:#485e60;--deep:#8ed3be;--coral:#994f32;--gold:#e5bb73;
  --muted:#adbfba;--surface:#293c40;--warm:#493e29;
  scrollbar-color:#59716e #192a30;
}
[data-theme="dark"] body {background:radial-gradient(ellipse at 20% 0,#25433f,transparent 60%),#122126}
[data-theme="dark"] header {background:#192a30ed;border-color:var(--line)}
[data-theme="dark"] .studio-link {color:var(--deep);border-color:var(--line)}
[data-theme="dark"] .hero h1 {color:var(--ink)}
[data-theme="dark"] .hero h1 em {color:#e3b37c}
[data-theme="dark"] :is(.card,.lobby-copy) {background:#202f34ed;border-color:var(--line);box-shadow:0 20px 65px #0003}
[data-theme="dark"] :is(input,select) {background:#15272d}
[data-theme="dark"] input::placeholder {color:var(--muted);opacity:1}
[data-theme="dark"] :is(button,a,input,select,summary):focus-visible {outline:2px solid #a4dfce;outline-offset:3px}
[data-theme="dark"] :is(.tabs button,.seat small,.player small,.player .improvement-summary,.turn-card span,.hand-heading small,.held-card small,.event-line span,.log-help,.roll-help,.log-item ul,.graphics-settings p,.trade-preferences p,.presentation-settings p,.trade-help,.trade-resource label small,.resource-choice-dialog .picker-intro,.picker-card>small,.vp-change small,.summary-winner small,.summary-place,.summary-player>small,.summary-awards,.summary-note,#createTargetSetting small,.capability-status,#eventNoticeContent small) {color:var(--muted)}
[data-theme="dark"] .tabs button.active {color:var(--ink);border-color:#e3b37c}
[data-theme="dark"] :is(.expansion-line,.city-improvements span,.progress-hand span,.progress-decks span,.trade-terms>div,.roll-table thead,.bot-badge,.picker-progress) {background:var(--surface)}
[data-theme="dark"] :is(.player,.held-card,.picker-card,.trade-dialog fieldset) {background:var(--paper);border-color:var(--line)}
[data-theme="dark"] .player {border-left-color:var(--seat-color)}
[data-theme="dark"] .player.current {border-color:var(--gold);border-left-color:var(--seat-color)}
[data-theme="dark"] #players .your-player {background:#36392d;border-color:#bda06a;border-left-color:var(--seat-color)}
[data-theme="dark"] #table,[data-theme="dark"] #table .players-panel {background:#142e36}
[data-theme="dark"] #table .log-panel {background:#192a30;border-color:var(--line)}
[data-theme="dark"] .hand-dock {background:linear-gradient(#23363b,#192a30);border-color:#887247}
[data-theme="dark"] #table .action-tray button {background:var(--surface);border-color:var(--line)}
[data-theme="dark"] #table .action-tray button.selected {background:#645334;border-color:var(--gold)}
[data-theme="dark"] #table .action-tray :is(button[data-type="roll"],button[data-type="end_turn"]) {background:#315f5b;color:#fff;border-color:#62968a}
[data-theme="dark"] #hand .resource {background:linear-gradient(145deg,#31464a,#203238);color:var(--ink);border-color:var(--line);border-bottom-color:var(--card-accent)}
[data-theme="dark"] #hand .resource.empty {background:#202f34;border-bottom-color:#485e60}
[data-theme="dark"] #hand .resource.empty svg {opacity:.55}
[data-theme="dark"] .development-hand .illustrated-card {background:linear-gradient(145deg,#354446,#253138)}
[data-theme="dark"] #hand .progress-hand .held-card {background:var(--surface)}
[data-theme="dark"] #hand:has(.held-card,.commodity) .hand-heading::after {color:var(--muted)}
[data-theme="dark"] :is(.status,.board-tools button,.map-legend) {background:#203238f5;color:var(--ink)}
[data-theme="dark"] .board-mode button[aria-pressed="true"] {background:#315f5b;color:#fff;border-color:#86b9aa}
[data-theme="dark"] .board-mode #orbitBoard[aria-pressed="true"] {background:#735327;border-color:var(--gold)}
[data-theme="dark"] :is(.player-awards span,.summary-winner,.win-target,.table-mode,.test-banner,.test-file-warning,.new-cards,.connection-status,.reconnect-panel) {background:var(--warm);color:#f1ddb0}
[data-theme="dark"] .game-standings li {background:var(--surface)}
[data-theme="dark"] .game-standings .summary-first {background:var(--warm);border-color:#bda06a}
[data-theme="dark"] .vp-changes .vp-change {background:#26453c;border-color:#78b398}
[data-theme="dark"] .vp-changes .vp-loss {background:#49352e;border-color:#cc977b}
[data-theme="dark"] .trade-resource {border-color:var(--line)}
[data-theme="dark"] .picker-card.picked {background:#29473e;border-color:#8ed3be;box-shadow:inset 0 0 0 1px #8ed3be}
[data-theme="dark"] .picker-card.unavailable {background:#253236;color:var(--muted)}
[data-theme="dark"] .error {color:#ffaf9b}
[data-theme="dark"] :is(.position-error,#table .status.test-invalid,input[aria-invalid="true"]) {background:#482e2c;color:#ffd0c3;border-color:#cf8977}
[data-theme="dark"] .modal {background:#071216b8}
[data-theme="dark"] .event-notice {background:#26383a;border-color:#bda06a;box-shadow:0 10px 32px #0005}
[data-theme="dark"] #toast {background:#324b50;color:#f0f6ef;border:1px solid #829b95}
@media(max-width:600px) {
  .theme-toggle {width:44px;padding:7px;margin-right:0}
  .theme-label {display:none}
  header.has-table-mode .room-context {max-width:150px}
}
@media(max-width:380px) {header .studio-link {display:none}}

.table-map {color:#e1ede4;font-size:.65rem;font-weight:700;letter-spacing:.04em;margin:0 auto 6px;max-width:1180px}
/* Allow the landing form and headline to shrink on small phones. */
.landing>* {min-width:0}
@media(max-width:380px) {.hero h1 {font-size:3.1rem}.embark {padding:18px}.row {grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}

/* Historical changes are a projected overlay, never edits to the live board. */
.map-preview-overlay {position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;overflow:hidden}
.map-delta {fill:#152d3540;stroke:#ffe18b;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 2px #10232f)}
.map-delta.added {stroke:#9cedc7}.map-delta.removed {stroke:#ffaf96;stroke-dasharray:7 5}
.map-delta .delta-index {fill:#17323a;stroke-width:2;stroke-dasharray:none}
.map-delta text {fill:#fff;stroke:none;text-anchor:middle;font:bold 11px sans-serif}
.map-preview-caption {position:absolute;z-index:10;left:12px;bottom:10px;width:min(440px,calc(100% - 24px));padding:12px 36px 12px 14px;border:1px solid var(--gold);border-radius:12px;background:var(--paper);box-shadow:0 4px 18px #14283255;max-height:150px;overflow:auto;user-select:text}
.map-preview-caption strong {display:block;font-size:.8rem}.map-preview-caption small {display:block;font-size:.65rem;margin-top:4px}
.map-preview-caption ol {font-size:.73rem;line-height:1.5;padding-left:20px;margin:7px 0 0}
#closeMapPreview {position:absolute;right:2px;top:2px;border:0;background:transparent;font-size:1.25rem;padding:5px 9px}
.preview-map {padding:5px 8px;font-size:.68rem;margin-bottom:5px}
.log-item:has(.preview-map):hover,.log-item:focus-within {background:#31776c15}
.log-player-filter {margin-top:7px}
@media(max-width:600px){.map-preview-caption {max-height:110px;padding:8px 32px 8px 10px}.map-preview-caption strong {font-size:.7rem}}

/* Game configuration, readable action choices, and public table status. */
.trade-preferences,.presentation-settings {border-top:0}
.game-options {margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:.8rem}
.game-options summary {font-weight:750;cursor:pointer}
.game-options label {display:flex;align-items:flex-start;gap:9px;margin-top:12px;line-height:1.4}
.game-options input[type="checkbox"] {width:20px;height:20px;flex:none;margin:0;accent-color:var(--deep)}
.game-options label:has(input[type="number"]) {display:grid}
.game-options small,.options-summary {display:block;font-size:.7rem;line-height:1.5;color:var(--muted,#536b68);margin:5px 0}
.game-options label:has(input:disabled) {opacity:.6;cursor:default}
.barbarian-approach {display:flex;align-items:center;gap:18px;max-width:1180px;margin:10px auto 0;padding:8px 12px;border:1px solid #759a99;border-radius:9px;background:#163942;color:#edf5eb}
.barbarian-heading {flex:none;font-size:.76rem}.barbarian-heading strong,.barbarian-heading span {display:block}.barbarian-heading span {font-size:.65rem;margin-top:3px}
.barbarian-route {display:flex;flex:1;align-items:center;justify-content:space-between;gap:4px;max-width:360px;background:linear-gradient(#88b6b1,#88b6b1) center/100% 2px no-repeat}
.barbarian-stop {display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:50%;background:#24515a;color:#afc7c3;border:1px solid #789b98;font-size:1.2rem}
.barbarian-stop.passed {border-color:#e2c886}.barbarian-stop.fleet-here {background:#f4dfa9;color:#203b3e;border-color:#f4dfa9;box-shadow:0 0 0 2px #e2c88640}
.barbarian-strength {margin-left:auto;font-size:.73rem}.barbarian-strength small {display:block;font-size:.62rem;margin-top:3px}.barbarian-strength span {margin:0 4px}
.barbarian-approach.near-attack {border-color:#e6a079;background:#513a34}.near-attack .barbarian-heading span {color:#ffe0b8;font-weight:700}
@media(max-width:650px){.barbarian-approach {display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;padding:7px 9px}.barbarian-heading strong {display:inline;margin-right:5px;font-size:.65rem}.barbarian-heading span {font-size:.58rem}.barbarian-route {grid-column:1/-1;grid-row:2;max-width:none}.barbarian-stop {width:20px;height:20px;font-size:1rem}.barbarian-strength {font-size:.61rem;text-align:right}.barbarian-strength small {font-size:.55rem}}
#table #log {border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:10px 12px;overflow-y:scroll;scrollbar-width:auto;scrollbar-gutter:stable;scrollbar-color:#829c91 #e5ebe2;box-shadow:inset 0 -5px 12px #17323a08;outline-offset:2px}
#table #log:focus-visible {outline:2px solid var(--deep)}
#log .log-turn:first-child {margin-top:0}#log .log-item:last-child {border-bottom:0}
#log::-webkit-scrollbar {width:10px}#log::-webkit-scrollbar-track {background:#e5ebe2;border-radius:10px}#log::-webkit-scrollbar-thumb {background:#829c91;border:2px solid #e5ebe2;border-radius:10px}
.log-scroll-hint {font-size:.66rem;color:#536b68;margin:7px 2px 0}
[data-theme="dark"] #table #log {border-color:#64817d;scrollbar-color:#8caaa1 #17282e;box-shadow:inset 0 -5px 12px #0002}
[data-theme="dark"] #log::-webkit-scrollbar-track {background:#17282e}[data-theme="dark"] #log::-webkit-scrollbar-thumb {background:#8caaa1;border-color:#17282e}
[data-theme="dark"] .log-scroll-hint {color:var(--muted)}
button:hover {transform:none;box-shadow:none}
button:not(:disabled):hover {border-color:var(--deep);box-shadow:inset 0 0 0 1px var(--deep)}
#table .action-tray button:focus-visible {outline:2px solid var(--deep);outline-offset:-3px}
.action-confirmation p {font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}
.confirmation-cost {padding:12px;background:#eaf0e6;border-radius:8px;font-weight:700}
.confirmation-buttons {display:flex;gap:10px;margin-top:18px}.confirmation-buttons button {min-height:44px}.confirmation-buttons .primary {flex:1}
[data-theme="dark"] .confirmation-cost {background:var(--surface)}
#hand .progress-hand {position:relative;flex-wrap:nowrap;padding-top:19px;gap:7px}
#hand .progress-hand>b {position:absolute;left:0;top:0;white-space:nowrap}
#hand .progress-hand .illustrated-card {flex:0 0 100px;height:94px;align-items:center;justify-content:center;gap:2px;padding:3px 5px;border-bottom:3px solid var(--development-accent);background:linear-gradient(145deg,#fffdf4,#eee8d6);text-align:center}
.progress-card-info>svg {display:block;width:120px;height:96px;margin:0 auto 10px}.progress-card-info>strong {display:block;text-align:center;font-size:.8rem}
.progress-card-info p {font-size:.9rem;line-height:1.55}.progress-availability {color:#536b68}.progress-card-info button {width:100%;min-height:44px}
.development-card-info>button {position:sticky;bottom:0}
[data-theme="dark"] #hand .progress-hand .illustrated-card {background:linear-gradient(145deg,#354446,#253138)}
[data-theme="dark"] .progress-availability {color:var(--muted)}
.card-arrived {animation:progress-arrives .65s ease-out}
@keyframes progress-arrives {0%{opacity:.35;scale:.9}55%{opacity:1;box-shadow:inset 0 0 0 2px var(--development-accent)}100%{scale:1}}
@media(max-width:600px){#hand .progress-hand {padding-top:16px}#hand .progress-hand .illustrated-card {flex-basis:92px;height:80px;padding:2px 4px}}
@media(prefers-reduced-motion:reduce){.card-arrived {animation:none}}
.choice-grid>button {display:flex;align-items:center;gap:10px;text-align:left;min-height:70px}
.choice-art {display:inline-flex;align-items:center;justify-content:center;gap:3px;flex:none}.choice-art svg {width:44px;height:44px}
.action-confirmation>.choice-art svg {width:58px;height:58px}
.route-choice-location {margin:0 0 8px;font-size:.88rem;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.route-choice-note {margin:0 0 16px;font-size:.75rem;color:var(--muted,#536b68)}
.route-choice-grid {gap:12px;margin-top:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.route-choice-grid>.route-choice {display:flex;flex-direction:column;gap:5px;min-width:0;padding:12px 10px 16px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.route-choice>.route-art {width:100%;height:112px;margin-bottom:5px;border-radius:9px;background:radial-gradient(ellipse at 50% 68%,#bad1a4 0 28%,transparent 29%),linear-gradient(150deg,#f1f4df,#e0e8ce)}
.route-choice>.route-art-ship {background:radial-gradient(ellipse at 50% 83%,#74afb8 0 27%,transparent 28%),repeating-linear-gradient(170deg,transparent 0 19px,#ffffff30 20px 21px,transparent 22px 29px),linear-gradient(150deg,#e0f2ed,#a6d5db)}
.route-choice>.route-art svg {width:126px;height:104px;max-width:100%;filter:drop-shadow(0 5px 3px #193b3a25)}
.route-choice>strong {font-size:1.12rem;line-height:1.3}
.route-choice-terrain {font-size:.75rem;font-weight:450;color:var(--muted,#536b68)}
.route-choice-cost {display:flex;flex-wrap:wrap;justify-content:center;gap:3px 9px;width:100%;margin-top:9px;padding-top:10px;border-top:1px solid var(--line);font-size:.7rem;font-weight:600}
.route-choice-cost>span {display:inline-flex;align-items:center;gap:3px}.route-choice-cost svg {width:23px;height:23px}
.route-choice-grid>.route-choice:focus-visible {outline:3px solid var(--deep);outline-offset:3px}
[data-theme="dark"] .route-choice>.route-art {background:radial-gradient(ellipse at 50% 68%,#55764d 0 28%,transparent 29%),linear-gradient(150deg,#354f3e,#273e33)}
[data-theme="dark"] .route-choice>.route-art-ship {background:radial-gradient(ellipse at 50% 83%,#386878 0 27%,transparent 28%),repeating-linear-gradient(170deg,transparent 0 19px,#ffffff15 20px 21px,transparent 22px 29px),linear-gradient(150deg,#2c5660,#1d3d50)}
@media(max-width:480px){.modal-card:has(.route-choice-dialog) {padding:22px 16px}.modal-card:has(.route-choice-dialog) h2 {padding-right:20px;font-size:1.3rem}.route-choice-grid {gap:9px}.route-choice-grid>.route-choice {padding:8px 7px 12px}.route-choice>.route-art {height:98px}.route-choice>.route-art svg {width:112px;height:92px}.route-choice>strong {font-size:1rem}.route-choice-terrain {font-size:.7rem}}
#hand .improvement-badge {padding:4px 7px;border-left:3px solid var(--track-color,var(--line));font-size:inherit;min-height:28px}
#hand .improvement-badge.track-science {--track-color:#75a882}#hand .improvement-badge.track-trade {--track-color:#d5b45e}#hand .improvement-badge.track-politics {--track-color:#829aca}
#hand .improvement-badge.ability-unlocked {box-shadow:inset 0 0 0 1px var(--track-color)}.ability-description>span {font-size:2.5rem}
#hand:has(.progress-hand) {height:130px;overflow-y:hidden}#hand:has(.progress-hand) .hand-resources {flex:none}
.hand-extras:has(.progress-hand) {display:flex;align-items:flex-start;gap:14px;flex:none;max-width:none;max-height:none;overflow:visible}
#hand:has(.progress-hand) .city-improvements {flex-direction:column;flex-wrap:nowrap;flex:none}#hand:has(.progress-hand) .city-improvements>b {flex-basis:auto}
@media(max-width:600px){#hand:has(.progress-hand) {height:118px}}
.improvement-choices {display:grid;gap:10px}.improvement-choices button {display:grid;grid-template-columns:34px 1fr;text-align:left;gap:5px 8px;min-height:90px}.improvement-choices button>span {grid-row:1/4;font-size:1.7rem}.improvement-choices small {grid-column:2;font-weight:400}
#inventorSelection {position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.inventor-pin {position:absolute;width:60px;height:60px;transform:translate(-50%,-50%);border:3px dashed #fff7d5;border-radius:50%;box-shadow:0 0 0 3px #286e81}
.inventor-pin b {position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff7d5;color:#173d4b;border:2px solid #286e81;font-size:.9rem}
.inventor-preview {display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0}.inventor-preview>b {font-size:1.7rem}
.swap-tile {display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.8rem}.swap-token {display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff0c7;color:#322d21;border:2px solid #a88b50;font-size:1.5rem;font-weight:800}.swap-token.next {border:3px solid #5eac96;box-shadow:0 0 0 2px #5eac9633}
#merchantMarker {position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:0;width:46px;padding:0;transform:translate(-50%,-50%);border:0;border-radius:9px;background:transparent;color:#293b38;box-shadow:none;font-size:8px;line-height:1;cursor:help}
#merchantMarker svg {width:26px;height:26px;padding:2px;border:2px solid var(--merchant-owner);border-radius:50%;background:#fff2d5;box-shadow:0 1px 3px #132c3960}#merchantMarker span {font-weight:850;background:#fff2d5;border:1px solid var(--merchant-owner);border-radius:4px;padding:1px 3px}
#merchantMarker:hover {transform:translate(-50%,-50%);background:transparent;box-shadow:none}#merchantMarker:hover svg {box-shadow:0 0 0 2px #fff1ce}

/* Bank exchanges share the illustrated materials and large trade steppers. */
.modal-card:has(.bank-trade-dialog) {max-width:660px;padding:25px}
.bank-intro,.bank-trade-help {font-size:.8rem;line-height:1.5;color:var(--muted,#536b68);margin:8px 0 14px}
.bank-trade-columns {display:grid;grid-template-columns:1fr 1fr;gap:18px}.bank-trade-columns section {min-width:0}
.bank-trade-columns h3 {font-size:.9rem;margin:0 0 9px}
.bank-material-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bank-material {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;min-width:0;min-height:90px;border-radius:8px}
.bank-material svg {width:35px;height:35px}.bank-material strong {font-size:.7rem}.bank-material small {font-size:.6rem;font-weight:400;white-space:nowrap}
.bank-material.picked {border-color:var(--deep);background:#e4f1e7;box-shadow:inset 0 0 0 2px var(--deep)}
.bank-material:disabled {opacity:.35}
.bank-trade-preview {display:flex;align-items:center;justify-content:space-evenly;gap:12px;margin:18px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.bank-trade-preview>div {display:flex;flex-direction:column;align-items:center;gap:4px}.bank-trade-preview svg {width:45px;height:45px}.bank-trade-preview>span {font-size:1.8rem}.bank-trade-preview strong {font-size:.85rem}.bank-trade-preview small {font-size:.65rem;color:var(--muted,#536b68)}
.bank-quantity {display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bank-quantity label {font-size:.85rem;font-weight:700;flex:1}.bank-quantity .trade-stepper {grid-template-columns:44px 52px 44px}.bank-quantity button {min-height:44px}
.bank-trade-footer {display:flex;gap:9px;padding-top:10px;position:sticky;bottom:-25px;background:var(--paper);padding-bottom:8px}.bank-trade-footer .primary {flex:1;min-height:46px;font-size:.85rem}
[data-theme="dark"] .bank-material.picked {background:#29473e}
@media(max-width:480px){.modal-card:has(.bank-trade-dialog) {padding:18px}.bank-trade-columns {gap:9px}.bank-material-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.bank-material {min-height:76px}.bank-material svg {width:28px;height:28px}.bank-quantity {gap:7px}.bank-quantity label {flex-basis:100%}.bank-trade-footer {bottom:-18px}.bank-trade-preview {margin:12px 0}}

/* Six seats keep readable cards and scroll within the table on smaller displays. */
#players.extended-table {max-width:1500px;justify-content:flex-start;overflow-x:auto;padding:3px;scrollbar-width:thin}
#players.extended-table .player {flex:1 0 175px;max-width:none}
.paired-turn-status {margin:7px 0 0;text-align:center;font-size:.73rem;color:var(--text-muted,#9dafb0)}
@media(max-width:600px) {#players.extended-table .player {flex:0 0 156px}.paired-turn-status {font-size:.65rem;text-align:left}}
@media(min-width:351px) and (max-width:480px){.modal-card:has(.bank-trade-dialog) {max-height:92vh}.bank-material-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.bank-material {min-height:70px}.bank-material small {font-size:.55rem}.bank-material strong {font-size:.65rem}.bank-material svg {width:26px;height:26px}}

.bank-material small span {display:block;line-height:1.25}

/* Read the position: solid knight states, distinct selection and larger numbers. */
#board .knight-piece {opacity:1;filter:url(#pieceShadow)}
#board .knight-piece .knight-selection {fill:none;stroke:#ffe68b;stroke-width:3;opacity:0}
#board .knight-piece:is(.legal,.source-vertex) .knight-selection {opacity:1}
#board .knight-piece .piece-hit {fill:transparent;stroke:none}
#board .edge.occupied.legal {stroke-width:20}
#board .number-text {font:800 17px ui-sans-serif,system-ui,sans-serif;fill:#263a40}
#board .number-pips {font-size:7px;fill:#4e5b51;letter-spacing:.6px}
#board .number-token.hot .number-text,#board .number-token.hot .number-pips {fill:#ad3029}
#board .number {fill:#fff5dc;stroke:#795f3e;stroke-width:1.5}
#board .number-token.hot .number {stroke:#ad3029;stroke-width:2}
.player-defense {display:flex;align-items:center;gap:4px;margin-top:5px;font-size:.67rem;white-space:nowrap}
.knight-count {margin-left:auto;font-size:.64rem}
.defense-shield {display:grid;place-items:center;width:13px;height:15px;background:#286d5c;color:#fff7e2;clip-path:polygon(50% 0,100% 15%,94% 72%,50% 100%,6% 72%,0 15%);font-weight:800;font-size:.6rem}
#table .map-legend {display:flex;align-items:center;gap:14px;max-width:calc(100% - 28px);padding:4px 10px;border:1px solid #ffffff30;border-radius:9px;background:#193942eb;color:#f7f0dc;font-size:.7rem;line-height:1.3}
.route-legend {white-space:nowrap}
.knight-legend {display:flex;align-items:center;gap:10px;border-left:1px solid #ffffff40;padding-left:10px}
.knight-legend>span {display:flex;align-items:center;gap:4px;white-space:nowrap}
.knight-legend svg {width:23px;height:26px;overflow:visible;flex:none}
.knight-legend-strength {font-size:.65rem;color:#c7d8d6}
#table .board-hint {bottom:7px}
#table .board-panel {padding-bottom:36px}
#table .action-tray {min-height:45px;max-height:51px;gap:8px}
#table .action-tray button {display:inline-flex;align-items:center;gap:10px;height:41px;padding:7px 12px;font-size:.8rem;border-radius:9px}
.action-cost {display:inline-flex;align-items:center;gap:3px;padding-left:8px;border-left:1px solid var(--line)}
.action-cost>span {display:inline-flex;align-items:center;gap:1px}
.action-cost svg {width:22px;height:24px;flex:none}
.action-cost b {font-size:.7rem}
#hand .resource-count-badge {font-size:.95rem;min-width:22px;height:22px;display:grid;place-items:center;top:3px;right:3px;border-radius:5px;background:#ffffffab;color:#203b40;line-height:1}
[data-theme="dark"] #hand .resource-count-badge {background:#11282ee6;color:#fff5de}
@media(max-width:600px) {
  #players .player-cards small {font-size:.65rem}
  .player-defense {font-size:.6rem;gap:3px;margin-top:4px}
  #table .map-legend {left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 12px);width:max-content;gap:8px;font-size:.64rem;padding:3px 7px;bottom:5px}
  .knight-legend {gap:8px;padding-left:0;border-left:0}
  .map-legend:has(.knight-legend) .route-legend {display:none}
  .knight-legend .knight-legend-strength {display:none}
  .knight-legend svg {width:20px;height:23px}
  #table .action-tray {min-height:46px;max-height:50px}
  #table .action-tray button {height:42px;font-size:.74rem;padding:6px 10px;gap:6px}
  #table .board-panel {padding-bottom:36px}
  #table .board-hint {display:none}
}

/* Keep phone controls tappable and the map usable on short screens. */
@media(max-width:600px), (pointer:coarse) and (max-width:1100px), (max-width:1100px) and (max-height:600px) {
  #table {height:auto;min-height:calc(100dvh - 66px);grid-template-rows:auto clamp(410px,62dvh,640px) auto}
  #table .board-panel {padding-top:98px}
  #table .board-tools {top:39px;left:8px;right:8px;justify-content:flex-start;gap:8px;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}
  .board-mode,.board-zoom {flex:none}
  #table .board-tools button {min-width:44px;min-height:44px;padding:8px;font-size:.875rem;white-space:nowrap}
  #table .board-panel>.status {font-size:.8rem}
  #table .action-tray {min-height:50px;max-height:54px}
  #table .action-tray button {min-height:44px;height:44px;font-size:.875rem}
  #players .player-line {font-size:.875rem}
  #players .player-cards small {font-size:.75rem}
  #players .player-score small,#players #yourPlayer .player-score small {font-size:.75rem}
  .hand-controls .turn-card>strong {font-size:.875rem}
  #hand {height:116px}
  #hand .resource {width:65px;flex-basis:65px;height:86px}
  #hand .resource>span,.hand-heading strong {font-size:.875rem}
  .hand-heading small {font-size:.75rem}
  .close,#closeMapPreview,#closeEventNotice {min-width:44px;min-height:44px}
  .picker-stepper {grid-template-columns:44px minmax(44px,1fr) 44px}
  .picker-stepper button,.picker-art,.picker-buttons button {min-height:44px}
  #hand .held-card,#hand .improvement-badge {min-height:44px}
  .preview-map {min-height:44px;font-size:.8rem}
  input,select {font-size:16px}
  .trade-count,.picker-stepper input,.bank-quantity input,.log-filter select {font-size:16px}
}
@media(max-width:360px) {
  .resource-picker-grid {grid-template-columns:minmax(0,1fr)}
}

/* Compact card trading: the same two rows for bank and player exchanges. */
.modal-card:has(.compact-trade){width:min(600px,calc(100vw - 24px));max-width:600px;padding:20px}
.trade-tabs{display:flex;gap:5px;padding:4px;background:var(--foam);border:1px solid var(--line);border-radius:10px;margin:0 0 14px}
.trade-tabs button{flex:1;min-height:42px;border:0;background:transparent;color:var(--ink)}
.trade-tabs button[aria-pressed=true]{background:var(--paper);box-shadow:0 1px 5px #183b3525;font-weight:800}
.compact-trade .bank-trade-columns,.compact-trade .trade-columns{display:flex;flex-direction:column;gap:12px}
.compact-trade .bank-trade-columns section,.compact-trade .trade-columns fieldset{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--foam);margin:0;min-width:0}
.compact-trade h3,.compact-trade legend{font-size:.8rem;font-weight:800;margin:0 0 7px;padding:0 4px;color:var(--ink)}
.compact-trade .bank-material-grid,.trade-card-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.compact-trade .bank-material-grid:has(>:nth-child(6)),.trade-card-row:has(>:nth-child(6)){grid-template-columns:repeat(8,minmax(0,1fr))}
.compact-trade .bank-material,.compact-trade .trade-card-add{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;min-height:86px;width:100%;border:2px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.compact-trade .bank-material.picked{border-color:var(--deep);box-shadow:0 0 0 2px var(--deep);background:var(--paper)}
.compact-trade .bank-material svg,.compact-trade .trade-card-add svg{width:34px;height:34px}
.compact-trade .bank-material strong,.trade-card-add span{font-size:.63rem;line-height:1.2;font-weight:750}
.compact-trade .bank-material small{font-size:.62rem;display:flex;gap:6px;justify-content:center}
.compact-trade .bank-material small span:first-child{position:absolute;right:2px;top:2px;padding:1px 4px;background:var(--deep);color:var(--paper);border-radius:3px;font-weight:800}
.compact-trade .bank-material:disabled{opacity:.35}
.compact-trade .bank-trade-preview{margin:12px 0;padding:8px;gap:8px}
.compact-trade .bank-trade-preview>div{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:5px}
.compact-trade .bank-trade-preview svg{width:26px;height:26px}.compact-trade .bank-trade-preview small{display:none}
.compact-trade .bank-quantity{margin-top:12px}.compact-trade .bank-trade-help{margin:7px 0;font-size:.72rem}
.compact-trade .trade-resource{display:block;padding:0;border:0;min-width:0;background:transparent}
.trade-card-add small{font-size:.6rem;color:var(--muted)}
.trade-card-count{display:flex;align-items:center;margin-top:3px;gap:2px}
.trade-card-count button{min-width:28px;min-height:36px;padding:0;flex:1}
.compact-trade .trade-count{width:32px;min-width:0;padding:2px;text-align:center;height:36px;font-weight:800;appearance:textfield;flex:1}
.trade-count::-webkit-inner-spin-button,.trade-count::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.compact-trade .trade-recipient{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:.8rem}.compact-trade .trade-recipient select{flex:1;min-height:40px}
.compact-trade .trade-help{font-size:.75rem;margin:8px 0}.compact-trade .trade-footer{margin-top:12px;padding-top:0}.compact-trade .trade-footer p{font-size:.75rem}
.compact-trade .trade-buttons{display:flex;gap:8px}.compact-trade .trade-buttons .primary{flex:1}
.compact-trade .bank-trade-footer{bottom:-20px}
@media(max-width:480px){
 .modal-card:has(.compact-trade){padding:14px;max-height:94dvh}
 .compact-trade .bank-material-grid:has(>:nth-child(6)),.trade-card-row:has(>:nth-child(6)){grid-template-columns:repeat(4,minmax(0,1fr))}
 .compact-trade .bank-material-grid,.trade-card-row{gap:4px}
 .compact-trade .bank-material,.compact-trade .trade-card-add{min-height:76px}
 .compact-trade .bank-material strong,.trade-card-add span{font-size:.55rem}
 .compact-trade .bank-trade-columns section,.compact-trade .trade-columns fieldset{padding:7px}
 .trade-card-count button{min-width:22px}.compact-trade .trade-count{width:25px}
 .compact-trade .bank-trade-footer{bottom:-14px}
}
/* Both sides stay visible and independently editable in one panel. */
.compact-trade .bank-trade-preview>div{flex-direction:column;gap:3px}
.compact-trade .bank-trade-preview>div>small:first-child{display:block;font-weight:700;font-size:.65rem}
.compact-trade .trade-resource{width:auto}
.compact-trade .trade-card-row .trade-card-add{min-height:64px}
.compact-trade .trade-card-row .trade-card-add small{font-size:.6rem;color:var(--muted)}
@media(max-width:480px){
 .compact-trade .bank-material-grid:has(>:nth-child(6)),.compact-trade .trade-card-row:has(>:nth-child(6)){display:flex;flex-wrap:nowrap;overflow-x:auto;padding:3px 1px 6px;scrollbar-width:thin}
 .compact-trade .bank-material-grid:has(>:nth-child(6))>.bank-material,.compact-trade .trade-card-row:has(>:nth-child(6))>.trade-resource{flex:0 0 52px}
 .compact-trade .bank-material{min-height:70px}
 .compact-trade .bank-trade-preview{margin:8px 0}
}

.board-viewport[data-view="hd2d"]{background:radial-gradient(ellipse at 45% 35%,#477d80,#285560 85%)}

.seat-avatar{position:relative}.seat-avatar .seat-number{position:absolute;right:-4px;bottom:-3px;display:grid;place-items:center;min-width:16px;height:16px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font:800 10px system-ui;line-height:1}

/* Public bank strip, seat chips, details popover, longest-road highlight and the general landing page. */
:root {--chip-bg:#f1ecdc;--chip-line:#ddd3b8;--chip-ink:#26404a;--award-bg:#f6e3a6;--award-line:#c99a3c;--low-ink:#b0412c;--pop-bg:#fffcf4;--pop-shadow:0 14px 38px #17323a3d;--pop-muted:#536b68}
:root[data-theme="dark"] {--chip-bg:#2a3c40;--chip-line:#4a6062;--chip-ink:#e5ede7;--award-bg:#5a4826;--award-line:#c9a45e;--low-ink:#ffb19d;--pop-bg:#1f2f34;--pop-shadow:0 14px 38px #000a;--pop-muted:var(--muted)}
.table-topline {display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto 7px;min-width:0}
.table-topline .table-map {flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bank-strip {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:3px 4px;flex:0 1 auto;min-width:0;padding:3px 5px;border:1px solid #ffffff26;border-radius:10px;background:#123b45;cursor:pointer}
.bank-strip[hidden] {display:none}
.bank-title {margin:0 3px 0 3px;color:#bcd2cc;font:800 .6rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.bank-chip {display:inline-flex;align-items:center;gap:2px;height:26px;margin:0;padding:0 6px 0 3px;border:1px solid transparent;border-radius:7px;background:#ffffff14;color:#f6f0dc;font:800 .74rem/1 system-ui,sans-serif;box-shadow:none}
.bank-chip:hover {background:#ffffff2b;box-shadow:none;transform:none}
.bank-chip:focus-visible {outline:2px solid #ffe68d;outline-offset:1px}
.bank-chip svg {width:20px;height:20px;flex:none}
.bank-chip b {min-width:1.1em;text-align:center}
.bank-chip.low {border-color:#f3a58a99;background:#f3a58a1f}
.bank-chip.low b {color:#ffb39c}
.bank-chip.empty svg {opacity:.45}
.bank-sep {display:block;flex:none;width:1px;height:16px;margin:0 2px;background:#ffffff38}
[data-theme="dark"] .bank-strip {background:#0f262d;border-color:var(--line)}

#players .player {cursor:pointer}
#players .player:focus-visible {outline:2px solid #ffe68d;outline-offset:2px}
.player-chips {display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:7px;min-width:0}
.pchip {position:relative;display:inline-flex;align-items:center;gap:3px;min-height:22px;margin:0;padding:1px 6px 1px 3px;border:1px solid var(--chip-line);border-radius:6px;background:var(--chip-bg);color:var(--chip-ink);font:800 .72rem/1 system-ui,sans-serif;white-space:nowrap;box-shadow:none}
.pchip svg {width:16px;height:16px;flex:none}
.pchip small {font-size:.62rem;font-weight:700;opacity:.8}
.pchip.award {background:var(--award-bg);border-color:var(--award-line)}
.award-mark {position:absolute;top:-7px;right:-6px;padding:1px 3px;border-radius:4px;background:#b9862c;color:#fff;font:800 .5rem/1.1 system-ui,sans-serif;font-style:normal;pointer-events:none}
button.pchip {cursor:pointer}
button.pchip:hover {transform:none;box-shadow:0 0 0 2px var(--seat-color)}
button.pchip:focus-visible {outline:2px solid #e3a93a;outline-offset:1px}
.pchip-road[aria-pressed="true"],.pchip-road.highlighting {box-shadow:0 0 0 2px var(--seat-color);background:color-mix(in srgb,var(--seat-color) 26%,var(--chip-bg))}
.improvement-pips {display:inline-flex;align-items:flex-end;gap:2px;height:16px;padding:0 1px}
.pip-track {display:flex;flex-direction:column-reverse;gap:1px}
.pip-track i {display:block;width:5px;height:2.2px;border-radius:1px;background:var(--chip-line)}
.pip-science i.on {background:#75a882}.pip-trade i.on {background:#d5b45e}.pip-politics i.on {background:#829aca}
.pchip-improvements {padding:2px 4px}

.info-popover {position:fixed;z-index:15;left:8px;top:8px;width:min(340px,calc(100vw - 16px));max-height:min(72vh,560px);overflow:auto;overscroll-behavior:contain;padding:14px 16px 16px;border:1px solid var(--line);border-top:4px solid var(--seat-color,var(--gold));border-radius:12px;background:var(--pop-bg);color:var(--ink);box-shadow:var(--pop-shadow)}
.info-popover[hidden] {display:none}
.info-popover.sheet {left:8px;right:8px;top:auto;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-height:70dvh}
.info-popover h3 {margin:0 36px 10px 0;font:700 1.05rem/1.25 Georgia,serif;overflow-wrap:anywhere}
.info-popover h4 {margin:13px 0 6px;color:var(--pop-muted);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.info-popover .close {top:4px;right:4px;min-width:40px;min-height:40px;padding:0;color:var(--ink)}
.detail-list {display:grid;gap:7px;margin:0;padding:0;list-style:none}
.detail-list li {display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:2px;font-size:.82rem}
.detail-list li>small {grid-column:2/-1;color:var(--pop-muted);font-size:.7rem;line-height:1.35}
.detail-list strong {font-size:.9rem;white-space:nowrap}.detail-list strong small {color:var(--pop-muted);font-size:.7rem;font-weight:600}
.detail-icon {display:grid;place-items:center;width:24px;height:24px}.detail-icon>svg {width:22px;height:22px}
.detail-list li.low strong {color:var(--low-ink)}
.detail-list li.focused {border-radius:6px;background:#e5bb7330;box-shadow:0 0 0 4px #e5bb7330}
.detail-action {grid-column:2/-1;justify-self:start;min-height:34px;margin-top:3px;padding:6px 11px;border-radius:8px;font-size:.75rem}
.detail-action[aria-pressed="true"] {background:var(--seat-color);border-color:var(--seat-color);color:#17323a}
.vp-table {width:100%;border-collapse:collapse;font-size:.8rem}
.vp-table th {padding:3px 0;font-weight:600;text-align:left}.vp-table td {padding:3px 0;font-weight:800;text-align:right}
.vp-table tfoot :is(th,td) {padding-top:6px;border-top:1px solid var(--line);font-weight:800}
.detail-note {margin:10px 0 0;color:var(--pop-muted);font-size:.7rem;line-height:1.4}

.route-highlight {position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.route-highlight[hidden] {display:none}
.route-highlight svg {width:100%;height:100%;overflow:visible}
.route-highlight .route-glow {fill:none;stroke:#fff6c9;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:.82;filter:drop-shadow(0 0 6px #ffe48a)}
.route-highlight .route-line {fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:11 7;animation:route-march 1.1s linear infinite}
.route-highlight .route-end {fill:#fff6c9;stroke:#17323a;stroke-width:2}
.route-highlight .route-label rect {fill:#17323a;stroke-width:2}
.route-highlight .route-label text {fill:#fff;font:800 12px system-ui,sans-serif;text-anchor:middle}
@keyframes route-march {to {stroke-dashoffset:-18}}
@media(prefers-reduced-motion:reduce) {.route-highlight .route-line {animation:none}}

#heroIsland {display:block;margin:18px 0 -6px}
#heroIsland>svg {display:block;width:100%;height:auto;overflow:visible;margin:0;transform:none;filter:none}
#heroIsland .hero-tile {filter:drop-shadow(0 12px 6px #193b3a30);animation:hero-arrive .35s ease-out both}
#heroIsland .hero-piece {filter:drop-shadow(0 4px 3px #193b3a45);animation:hero-arrive .4s .08s ease-out both}
.hero-mode {max-width:31rem;min-height:2.8em;margin:18px 0 0;color:var(--deep);font-size:.9rem;font-weight:700;line-height:1.5}
@keyframes hero-arrive {from {opacity:0}to {opacity:1}}
@media(prefers-reduced-motion:reduce) {#heroIsland .hero-tile,#heroIsland .hero-piece {animation:none}}

@media(max-width:600px) {
  .table-topline {flex-wrap:wrap;gap:5px;margin-bottom:6px}
  .table-topline .table-map {flex-basis:100%}
  .bank-strip {flex:1 1 100%;justify-content:flex-start;padding:3px 4px}
  .bank-chip {height:28px;padding:0 5px 0 2px}
  .bank-title {display:none}
  .player-chips {gap:3px;margin-top:5px}
  .pchip {min-height:22px;padding:1px 5px 1px 2px;font-size:.7rem}
  .pchip svg {width:15px;height:15px}
  .hero-mode {font-size:.8rem;margin-top:12px}
}

/* Longest Road race for your seat, beside the bank strip. */
.road-status {display:inline-flex;align-items:center;gap:4px;flex:none;height:34px;margin:0;padding:0 8px 0 7px;border:1px solid #ffffff26;border-radius:10px;background:#123b45;color:#f6f0dc;font:800 .8rem/1 system-ui,sans-serif;box-shadow:none;white-space:nowrap}
.road-status[hidden] {display:none}
.road-status:hover {background:#18485a;box-shadow:none;transform:none}
.road-status:focus-visible {outline:2px solid #ffe68d;outline-offset:1px}
.road-status svg {width:18px;height:18px;flex:none}
.road-caption {margin-right:3px;color:#bcd2cc;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase}
.road-arrow {color:#bcd2cc;font-weight:700}
.road-gap,.road-held {margin-left:3px;padding:3px 6px;border-radius:6px;font-size:.7rem}
.road-gap {background:#f3a58a;color:#3a1d14}
.road-held {background:#e9c46a;color:#3b2a08}
.road-status[data-state="hold"] .road-gap {background:#8fd3b4;color:#10322a}
[data-theme="dark"] .road-status {background:#0f262d;border-color:var(--line)}
.road-summary {margin:0 0 10px;font-size:.8rem;line-height:1.45}
@media(max-width:600px) {
  .table-topline .table-map {flex:1 1 0}
  .road-caption {display:none}
  .road-status {height:32px;padding:0 6px}
}

/* Post-game box score in the results dialog. Variables with fallbacks cover both themes. */
.modal-card:has(.box-score) {max-width:780px}
.box-score {margin:20px 0 16px;padding-top:14px;border-top:1px solid var(--line)}
.box-score h3 {margin:0 0 10px;font:700 1.15rem Georgia,serif}
.box-score-status {font-size:.85rem;line-height:1.5;color:var(--muted,#536b68);margin:6px 0 10px}
.box-score-scroll {max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:10px;overscroll-behavior-x:contain}
.box-score-scroll:focus-visible {outline:2px solid var(--deep);outline-offset:2px}
.box-score-table {width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem;font-variant-numeric:tabular-nums}
.box-score-table :is(th,td) {padding:5px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.box-score-table thead th {vertical-align:bottom;white-space:normal;min-width:4.5rem;overflow-wrap:break-word;font-size:.78rem;background:var(--paper)}
.box-score-table thead th small {display:block;font-weight:400;font-size:.68rem;color:var(--muted,#536b68)}
.box-score-table :is(th[scope="row"],.box-stat) {position:sticky;left:0;z-index:1;text-align:left;white-space:normal;min-width:6.5rem;max-width:9.5rem;background:var(--paper);font-weight:600}
.box-score-table th[scope="row"] {cursor:help}
.box-score-table .box-group th {padding-top:8px;text-align:left;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);background:var(--surface,#edf4ed)}
.box-score-table .box-group span {position:sticky;left:8px;display:inline-block}
.box-score-table .box-total :is(th,td) {font-weight:800}
.box-score-table tbody:last-child tr:last-child :is(th,td) {border-bottom:0}
.box-score-table .box-you {background:color-mix(in srgb,var(--gold) 13%,var(--paper))}
.box-score-table .box-private {color:var(--muted,#536b68);text-decoration:underline dotted;text-underline-offset:3px}
.box-score-note {font-size:.74rem;line-height:1.5;color:var(--muted,#536b68);margin:8px 0 0}
@media(max-width:600px) {
  .box-score-table {font-size:.72rem}
  .box-score-table :is(th,td) {padding:5px 5px}
  .box-score-table :is(th[scope="row"],.box-stat) {min-width:5rem;max-width:6.5rem}
  .box-score-table thead th {min-width:3.2rem;font-size:.72rem}
}

/* Last roll beside the map: who rolled, both dice and the total. */
.roll-dice {position:absolute;z-index:4;right:14px;top:62px;display:grid;justify-items:center;gap:6px;min-width:112px;padding:10px 12px 9px;border:1px solid #ffffff38;border-radius:14px;background:#173c46d9;color:#fff6dc;box-shadow:0 4px 18px #0c222a55;pointer-events:none;backdrop-filter:blur(4px)}
.roll-dice[hidden] {display:none}
.roll-dice-label {max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#cfe0dc}
.roll-dice-faces {display:flex;gap:8px}
.die {display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:42px;height:42px;padding:6px;border-radius:9px;background:linear-gradient(145deg,#fffdf5,#eadfc4);box-shadow:inset 0 -3px 0 #c9b98f,0 2px 5px #0005}
.die i {display:block}
.die .pip {width:8px;height:8px;margin:auto;border-radius:50%;background:#203b40}
.die.red {background:linear-gradient(145deg,#e46a52,#b8432f);box-shadow:inset 0 -3px 0 #8e2f21,0 2px 5px #0005}
.die.red .pip {background:#fff6dc}
.roll-dice-total {font:800 1.7rem/1 Georgia,serif;color:#fff6dc}
.roll-dice-total.seven {color:#ff9a7f}
.roll-dice-event {padding:2px 8px;border-radius:99px;background:#fff6dc;color:#203b40;font-size:.68rem;font-weight:800}
@media(max-width:600px) {
  .roll-dice {top:auto;bottom:34px;right:8px;min-width:0;padding:6px 8px;gap:4px;grid-template-columns:auto auto;align-items:center}
  .roll-dice-label {grid-column:1/-1;font-size:.56rem}
  .die {width:28px;height:28px;padding:4px;border-radius:6px}
  .die .pip {width:5px;height:5px}
  .roll-dice-faces {gap:5px}
  .roll-dice-total {font-size:1.2rem}
  .roll-dice-event {grid-column:1/-1}
}

/* Desktop: the map runs under see-through scoreboard and hand dock, and the
   view controls float over its corners, so the board fills the column. */
@media(min-width:601px) and (min-height:601px) and (not ((pointer:coarse) and (max-width:1100px))) {
  #table {--cover-overlap:44px;overflow:hidden}
  #table .board-panel {padding:8px 0;overflow:visible}
  #table .board-viewport {position:absolute;inset:calc(8px - var(--cover-overlap)) 0;width:auto;height:auto;overflow:visible;background:none}
  #table .board-tools {top:10px;left:14px;right:14px;pointer-events:none}
  #table .board-tools button {pointer-events:auto}
  #table .board-panel>.status {top:58px;left:14px;transform:none;max-width:min(250px,calc(50% - 60px));white-space:normal;line-height:1.35;border-radius:12px}
  #table .roll-dice {top:62px}
  #table:has(.board-viewport[data-view="hd2d"]) {background:radial-gradient(ellipse at 45% 40%,#477d80,#285560 85%)}
  #table .players-panel {background:linear-gradient(#1b4c58b3,#1b4c5840);backdrop-filter:blur(3px)}
  #table .hand-dock {background:linear-gradient(#fcf8eea6,#f3ecdcdb 45%,#f0e8d5f0);backdrop-filter:blur(4px)}
  [data-theme="dark"] #table .players-panel {background:linear-gradient(#142e36b3,#142e3640)}
  [data-theme="dark"] #table .hand-dock {background:linear-gradient(#23363ba6,#1f3136db 45%,#192a30f0)}
}