[hidden]{display:none!important}
.board-panel{padding-block:58px 72px}
#board{height:100%}
.status{pointer-events:none}
.hex.fields{fill:#d4b265}
.hex.gold{fill:#f4d33f;stroke:#98751a;stroke-width:5}
.edge.owned.ship{stroke-dasharray:16 7}.edge.source-edge{stroke:#fff27a;stroke-width:14}
.port{pointer-events:none}.port circle{fill:#fff7dc;stroke:#315e64;stroke-width:2}
.number,.number-text,.token,.token-disc{pointer-events:none}.token-disc{fill:#fffdf5;stroke:#17323a;stroke-width:2}.token{font:bold 12px sans-serif;text-anchor:middle;dominant-baseline:middle;fill:#17323a}
.port text{text-anchor:middle;dominant-baseline:middle;font-size:7px;font-weight:900;fill:#17323a}
.map-legend{position:absolute;left:14px;bottom:16px;z-index:6;padding:7px 10px;border-radius:9px;background:#fffdf5d9;font-size:.72rem;font-weight:700;pointer-events:none}
.legend-road,.legend-ship{display:inline-block;width:24px;margin:0 5px 2px 10px;border-top:4px solid #315e64;vertical-align:middle}.legend-ship{border-top-style:dashed}
@media(max-width:900px){.board-panel{padding-block:52px 66px}.map-legend{display:none}}

.expansion-line{display:inline-block;margin:.2rem 0 1rem;padding:.35rem .7rem;border-radius:99px;background:#e5f1eb;color:var(--deep);font-size:.78rem;font-weight:850;letter-spacing:.04em}
.hex.hidden{fill:#789aa2;stroke:#b9d1cd;stroke-dasharray:7 4}.fog-art{pointer-events:none;opacity:.86}.fog-art path{fill:#d8e5e0;stroke:#607d83;stroke-width:2}.fog-art text{font:900 21px Georgia,serif;text-anchor:middle;fill:#47666d}
.player .improvement-summary{margin-top:5px;color:#536b68;font-size:.67rem;line-height:1.35}
.commodity{border-left:3px solid currentColor;background:#f2eef8}.commodity-cloth{color:#526fa5}.commodity-paper{color:#4a8665}.commodity-coin{color:#a1722b}
.city-improvements,.progress-hand{display:grid;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.72rem}.city-improvements>b,.progress-hand>b{grid-column:1/-1}.city-improvements span,.progress-hand span,.progress-decks span{padding:4px 6px;border-radius:6px;background:#edf4ed}.track-science{border-left:3px solid #56a36f}.track-trade{border-left:3px solid #e5bb3d}.track-politics{border-left:3px solid #4f72a5}
#ckStatus{margin-top:10px}.event-line{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.68rem}.event-line span{color:#6e7f7d}.barbarian-track{display:flex;gap:3px;margin:7px 0}.barbarian-track i{height:6px;flex:1;border-radius:99px;background:#bacbc5}.barbarian-track i.advanced{background:var(--coral)}.progress-decks{display:grid;gap:3px;margin:7px 0;font-size:.62rem}.progress-decks span{display:flex;justify-content:space-between}
.city-wall{pointer-events:none;filter:url(#pieceShadow)}.city-wall path{fill:var(--piece);stroke:#fff2dc;stroke-width:1.5}.metropolis-crown{fill:#f2cd54;stroke:#6c5523;stroke-width:1.5}.metropolis-label{font:900 8px sans-serif;text-anchor:middle;fill:#4d4025;pointer-events:none}.knight-piece{filter:url(#pieceShadow)}.knight-piece circle{fill:#f7ecd3;stroke:var(--piece);stroke-width:5}.knight-piece path{fill:var(--piece);stroke:#fff4dc;stroke-width:1}.knight-piece text{fill:#fff;font:900 9px sans-serif;text-anchor:middle;pointer-events:none}.knight-piece.inactive{opacity:.62}.knight-piece.active circle{stroke:#ffe26a}.knight-piece>*{pointer-events:none}.knight-piece>.piece-hit{fill:transparent;stroke:none}.knight-piece.legal{cursor:pointer}.knight-piece.legal>.piece-hit{pointer-events:all}.knight-piece.legal,.source-vertex{filter:url(#pieceShadow) drop-shadow(0 0 7px #ffe26a)}
.new-cards{margin-top:8px;padding:7px;border-radius:7px;background:#fff2c7;font-size:.75rem}.trade-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trade-columns fieldset{border:1px solid var(--line);border-radius:10px}.trade-columns label{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;margin:5px}.trade-columns input{width:58px;padding:.35rem}

/* Procedural board artwork. Interactive geometry stays on .hex/.edge/.vertex/.building. */
.hex{filter:url(#hexInset);stroke:#f7f0d8;stroke-width:5}.hex.sea{fill:#62b8c3}.hex.forest{fill:#4f9468}.hex.hills{fill:#b96d4d}.hex.fields{fill:#d9b75f}.hex.pasture{fill:#8fb85c}.hex.mountains{fill:#858d8d}.hex.desert{fill:#d8c385}.hex.gold{fill:#edc640;stroke:#fff2a8}
.terrain-art{pointer-events:none;opacity:.3;fill:#173f36;stroke:#173f36;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.terrain-art .snow{fill:#f4f1df;stroke:none;opacity:.85}.wheat{fill:none;stroke:#765a18}.pasture-art{fill:none;stroke:#325f35}.pasture-art circle{fill:#f2ead0}.brick-art{fill:none;stroke:#6e3029;stroke-width:3}.gold-art{fill:#b17612;stroke:#82560c}.desert-art{fill:none;stroke:#8e763e}.waves{fill:none;stroke:#e5fbf8;opacity:.55;stroke-width:3}
.number-token{pointer-events:none}.number{fill:#fff8dc;stroke:#594b35;stroke-width:1.5;filter:drop-shadow(0 2px 1px #17323a44)}.number-text{font:900 16px Georgia,serif}.number-pips{text-anchor:middle;fill:#705e43;font-size:7px;font-weight:900}.number-token.hot .number-text,.number-token.hot .number-pips{fill:#ba302c}.number-token.hot .number{stroke:#ba302c;stroke-width:2}
.edge{stroke:#edf5ef;stroke-width:7;stroke-linecap:round}.edge.occupied{stroke:transparent;stroke-width:18}.edge.legal{stroke:#ffe26a;stroke-width:13;filter:drop-shadow(0 0 5px #a76c00);cursor:pointer}.edge.source-edge{stroke:#fff27a;stroke-width:18}.road-piece,.ship-piece{pointer-events:none;filter:url(#pieceShadow)}.ship-piece.road-route{filter:none}.road-shadow{fill:#4b3428;opacity:.65}.road-top,.ship-hull,.ship-flag{fill:var(--piece);stroke:#fff8e7;stroke-width:1.2}.road-piece>path{stroke:#fff;stroke-width:1.5;opacity:.42}.ship-hull{stroke:#3b342d;stroke-width:1.5}.ship-mast{stroke:#49372b;stroke-width:2}.ship-sail{fill:#fff7df;stroke:var(--piece);stroke-width:1.4}.ship-flag{stroke-width:.7}
.building{filter:url(#pieceShadow)}.building>*{pointer-events:none}.piece-hit,.ship-hit{fill:transparent;stroke:none}.building.legal{cursor:pointer}.building.legal>.piece-hit,.ship-piece>.ship-hit{pointer-events:all}.piece-shadow{fill:#263b3d;opacity:.5}.piece-body{fill:var(--piece);stroke:#fff8e7;stroke-width:1.5}.piece-light{fill:#fff4cf;stroke:#4f4138;stroke-width:.8}.building.legal{filter:url(#pieceShadow) drop-shadow(0 0 6px #ffe26a)}
.island-art{pointer-events:none}
.vertex{fill:#f9f1d8;stroke:#315e64;stroke-width:2}.vertex.legal{fill:#fff5a6;stroke:#d39614;stroke-width:3}
.port{pointer-events:none}.port .dock{fill:none;stroke:#76583b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.port circle{fill:#fff3cb;stroke:#76583b;stroke-width:2;filter:drop-shadow(0 2px 2px #17323a55)}.port text{text-anchor:middle;dominant-baseline:middle;fill:#3c3328;font-weight:900}.port-ratio{font-size:9px}.port-name{font-size:6px}
.token-disc{fill:#fffdf5;stroke:#17323a;stroke-width:2;filter:drop-shadow(0 2px 2px #17323a55)}.token{font:bold 12px sans-serif;text-anchor:middle;dominant-baseline:middle;fill:#17323a}
.legend-road{border-top:7px solid #875b3a;border-radius:3px}.legend-ship{height:13px;border:0;background:linear-gradient(155deg,transparent 45%,#fff8df 46% 75%,transparent 76%),linear-gradient(#287ea0,#287ea0);clip-path:polygon(0 65%,38% 65%,48% 0,84% 65%,100% 65%,86% 100%,12% 100%)}
.action-tray{flex-wrap:nowrap;min-height:52px;max-height:52px;overflow-x:auto;overflow-y:hidden}.action-tray button{flex:0 0 auto;white-space:nowrap;height:36px;padding:.45rem .72rem}.map-legend{bottom:78px}

#testPanel { margin-bottom: 18px; }
#testPanel button { margin: 3px 2px; }
.test-banner { background: #f5d88a; color: #382c16; padding: 10px; border-radius: 8px; margin-bottom: 10px; }
.test-help { font-size: 12px; line-height: 1.5; }
#testPanel select { width: 100%; }

.connection-status{position:fixed;top:58px;left:50%;z-index:30;transform:translateX(-50%);padding:.55rem .9rem;border:1px solid #d09b3c;border-radius:999px;background:#fff2c7;color:#563d16;box-shadow:0 4px 16px #17323a33;font-size:.82rem;font-weight:800}
.reconnect-panel{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:10px;background:#fff8e3}
.reconnect-panel p{margin-top:0}.reconnect-panel button+button{margin-left:.4rem}
.capability-status{min-height:1.4em;margin:.65rem 0 0;color:#6b5b3f;font-size:.78rem}.capability-status button{margin-left:.4rem;padding:.25rem .55rem}

/* Composite the painted board as one HTML layer while moving its camera. */
.board-viewport{width:100%;height:100%;overflow:hidden;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.board-stage{width:100%;height:100%;transform-origin:50% 50%}
.board-stage.camera-moving{will-change:transform}
.board-stage #board{display:block}
.board-viewport.dragging,.board-viewport.dragging #board{cursor:grabbing}

.trade-offer{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:5;width:420px;max-width:calc(100% - 24px);padding:16px;border:2px solid var(--gold);border-radius:14px;background:var(--paper);box-shadow:0 5px 22px #17323a35;overflow-wrap:anywhere}
.trade-partners{margin:4px 0 12px;font-size:.85rem}
.trade-terms{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade-terms>div{padding:10px;background:#edf4ed;border-radius:8px}
.trade-terms span,.trade-terms b{display:block}.trade-terms span{font-size:.75rem;margin-bottom:4px}.trade-terms b{font-size:.95rem}
.trade-response-note{font-size:.78rem;margin:12px 0 0}
.roll-stats{margin-top:18px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);min-width:0}
.roll-summary{font-size:.8rem;margin:4px 0 12px}.roll-chart{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px}
.roll-column{text-align:center;min-width:0;font-size:.65rem;font-variant-numeric:tabular-nums}
.roll-count{font-weight:700}.roll-bar-space{height:65px;display:flex;align-items:flex-end;margin:4px 0;border-bottom:1px solid var(--line)}
.roll-bar-space i{display:block;width:100%;background:var(--deep);border-radius:3px 3px 0 0}.roll-number{font-weight:700}
.roll-help{font-size:.72rem;line-height:1.45;margin:10px 0;color:#536b68}.roll-stats button{width:100%;font-size:.75rem;padding:8px 4px}
.roll-table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}.roll-table th,.roll-table td{text-align:right;padding:7px;border-bottom:1px solid var(--line)}.roll-table th:first-child{text-align:left}.roll-table thead{background:#edf4ed}
@media(max-width:900px){.roll-stats{grid-column:1/-1;margin-top:0}.roll-bar-space{height:75px}.trade-offer{padding:12px}}

.log-filter{display:flex;align-items:center;gap:8px;font-size:.78rem}.log-filter select{flex:1;width:100%;padding:7px 5px;font-size:.78rem}
.log-help{font-size:.72rem;color:#536b68;margin:8px 0}.log-turn{font-size:.78rem;margin:16px 0 4px;padding-bottom:5px;border-bottom:2px solid var(--line)}
.log-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.74rem}.bot-badge{background:#e0ebe8;border-radius:4px;padding:1px 5px;font-size:.62rem;font-weight:700;text-transform:uppercase}
.log-item{overflow-wrap:anywhere}.log-item p{margin:4px 0}.log-item ul{padding-left:15px;margin:4px 0;color:#536b68;font-size:.73rem}.log-item li+li{margin-top:4px}
.room-activity{margin-top:20px;font-size:.75rem}.room-activity>summary{cursor:pointer;font-weight:700;padding:8px 0}

/* One camera toolbar serves both the flat board and the optional 3D table. */
.board-panel{padding-top:104px}.board-tools{top:55px;left:14px;right:14px;justify-content:space-between;gap:8px}.board-mode,.board-zoom{display:flex;gap:4px}.board-mode button[aria-pressed="true"]{background:#315f5b;color:#fff;border-color:#315f5b}.board-mode #orbitBoard[aria-pressed="true"]{background:#b88036;border-color:#b88036}.board-panel>.status{top:12px;max-width:calc(100% - 28px);font-size:.85rem;overflow:hidden;text-overflow:ellipsis}
#board3d{position:absolute;left:0;top:0;will-change:transform;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline-offset:-3px}.dragging #board3d{cursor:grabbing}.board-hint{position:absolute;left:14px;bottom:114px;pointer-events:none;color:#e4f0e6;font-size:.69rem;background:#183e4bce;padding:6px 9px;border-radius:7px}.coastline{pointer-events:none;fill:none;stroke-linecap:round}.coast-water{stroke:#72c3c0;stroke-width:12}.coast-sand{stroke:#f4ddaa;stroke-width:5}.piece-plinth{stroke:#fff3d3;stroke-width:2;pointer-events:none}
@media(max-width:900px){.board-tools{top:48px;left:8px;right:8px}.board-tools button{padding:6px 8px;font-size:.75rem}.board-panel{padding-top:91px}.board-hint{left:10px;bottom:75px;max-width:calc(100% - 20px);font-size:.62rem}.board-panel>.status{font-size:.73rem}}