/* Every board uses the same 3D scene; only match viewports fill their parent. */
.match-stage.stage-viewport { width:100%; height:100%; }
.board-wrap.board-viewport { width:100%; aspect-ratio:1; min-width:0; min-height:0; position:relative; container-type:size; isolation:isolate; background:#d8e1d4; border:0; border-radius:18px; overflow:hidden; }
.board-wrap.board-fill { height:100%; aspect-ratio:auto; }
.board-scene { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; border-radius:inherit; outline:none; }
.board-scene:focus-visible { outline:none; }
.board-thumbnail { display:block; width:100%; height:100%; object-fit:contain; }
.board-wrap.mini-board { pointer-events:none; background:transparent; border:0; }
.board-scene-loading { position:absolute; inset:0; display:grid; place-items:center; padding:12px; font-size:12px; color:#617762; pointer-events:none; }
/* An accessible equivalent of the canvas, not a second board or a visible cell picker. */
.board-accessibility .board-cell, .board-player-status, .board-description { all:unset; position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.board-accessibility .board-cell:focus-visible { clip-path:none; left:14px; bottom:50px; width:auto; height:auto; max-width:calc(100% - 28px); padding:8px 12px; border-radius:8px; background:#fffef8; color:#234d3a; z-index:8; outline:2px solid #c59539; font:12px/1.4 system-ui; }
.board-accessibility .board-cell > span { all:unset; margin-right:5px; }
.board-camera-hint { position:absolute; top:12px; left:14px; z-index:2; display:flex; align-items:center; gap:16px; color:#45654d; font-size:11px; line-height:1.2; padding:4px 10px; background:#f5f8eceb; border-radius:8px; pointer-events:none; max-width:calc(100% - 82px); user-select:none; }
.board-camera-gesture { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.board-camera-gesture svg { width:24px; height:28px; flex:none; color:#708674; }
.camera-mouse-body, .camera-mouse-wheel { fill:#fffef8; }
.camera-mouse-active { fill:#397558; stroke:none; }
.camera-mouse-scroll { stroke:#397558; }
.board-scene-error { position:absolute; left:14px; right:64px; top:14px; z-index:7; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#7d5834; padding:12px; background:#fff5e4; border:1px solid #eedbb9; border-radius:8px; }
.board-viewport .board-dialog-layer { inset:0; padding:76px 14px 44px; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.board-viewport .board-dialog {
    pointer-events:auto; width:min(380px,100%); max-height:min(46cqh,100%); padding:16px 18px;
    border:1px solid transparent; border-radius:14px; background:#fffef9f7;
    box-shadow:0 8px 32px #183c2d28;
}
.board-viewport .board-dialog:hover {
    border-color:color-mix(in srgb,var(--status-player-color,#e0e5d6) 40%,transparent);
    box-shadow:0 0 6px 1px color-mix(in srgb,var(--status-player-color,#e0e5d6) 55%,transparent),
        0 0 22px 3px color-mix(in srgb,var(--status-player-color,#e0e5d6) 28%,transparent),
        inset 0 0 5px color-mix(in srgb,var(--status-player-color,#e0e5d6) 18%,transparent),
        0 8px 32px #183c2d28;
}
.board-viewport .board-dialog:focus-visible { outline:none; }
.board-viewport .board-dialog h2 { font-size:25px; }
.board-viewport .board-dialog p { font-size:12px; }
.board-viewport .board-dialog small { font-size:10px; }
.board-viewport .board-dialog .eyebrow { font-size:9px; }
.board-viewport .board-dialog .button { font-size:12px; }
.board-viewport .board-dialog .table-dice { padding:14px 8px; gap:30px; }
.board-viewport .board-dialog .die { --die-size:38px; }
.board-viewport .board-dialog .purchase-price { font-size:38px; margin:14px 0; }
.board-viewport .board-dialog .dialog-facts strong { font-size:13px; }
.board-viewport .board-dialog.trade-dialog { width:min(480px,100%); padding:18px; }
.inspecting-cell .board-viewport .board-dialog-layer { display:flex; }
.board-viewport .cell-inspection-status { display:none; }
.stage-viewport > .cell-popup { z-index:9; pointer-events:auto; }
.board-connector { position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:hidden; pointer-events:none; }
.board-connector[hidden] { display:none; }
.board-viewport:not(:has(.board-dialog:hover)) > .turn-connector { visibility:hidden; }
.board-connector line { stroke:var(--connector-color); stroke-width:2.5; stroke-linecap:round; }
.board-connector circle { fill:var(--connector-color); stroke:#fffef9; stroke-width:1.5; }
.board-connector .connector-offscreen { fill:#fffef9; stroke:var(--connector-color); stroke-dasharray:2 2; }
@container (max-width:700px) {
    .board-camera-hint { display:none; }
    .board-viewport .board-dialog-layer { padding:104px 10px 12px; }
    .board-viewport .board-dialog { width:min(380px,100%); padding:13px; }
}
.board-graphics-toggle { position:absolute; right:12px; top:12px; z-index:10; width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid #cdd9c7; border-radius:10px; background:#fffef8f2; color:#325543; box-shadow:0 3px 12px #173e2710; cursor:pointer; }
.board-graphics-toggle svg { display:block; width:23px; height:23px; }
.board-graphics-toggle:hover, .board-graphics-toggle[aria-expanded=true] { background:#e8efdf; color:#174b39; }
.board-graphics-toggle:disabled { opacity:.45; cursor:default; }
.board-graphics-toggle:focus-visible, .board-graphics-panel :is(button,select,input):focus-visible { outline:2px solid #c59539; outline-offset:2px; }
/* Native popovers use the browser's top layer, above cards, action panels and clipping ancestors. */
.board-graphics-panel { position:fixed; inset:auto; margin:0; padding:0; width:340px; max-width:calc(100vw - 24px); border:1px solid #cedac8; border-radius:16px; background:#fffef9; color:#253c30; box-shadow:0 16px 60px #15352b42,0 3px 12px #15352b22; overflow:hidden; text-align:left; }
.board-graphics-panel:popover-open { display:flex; flex-direction:column; }
.board-graphics-panel::backdrop { background:transparent; }
.graphics-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex:none; padding:18px 20px 15px; border-bottom:1px solid #e6ebdf; }
.graphics-heading h2 { margin:0; font:400 25px Georgia,serif; color:#253c30; }
.graphics-close { width:30px; height:30px; display:grid; place-items:center; flex:none; padding:0; border:0; border-radius:50%; background:#edf2e5; color:#526c4d; font:24px/1 system-ui,sans-serif; cursor:pointer; }
.graphics-options { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:16px 20px; display:grid; gap:14px; }
.graphics-options label { display:grid; gap:7px; margin:0; color:#3b5540; font:500 12px/1.4 system-ui,sans-serif; }
.graphics-options select { width:100%; min-height:37px; margin:0; padding:8px 10px; background:#f5f7ef; border:1px solid #d5dfcd; border-radius:8px; color:#2b4935; font:400 12px system-ui,sans-serif; }
.graphics-slider > span { display:flex; justify-content:space-between; gap:10px; }
.graphics-slider output { color:#6f8262; font-variant-numeric:tabular-nums; }
.graphics-slider input { width:100%; margin:3px 0; padding:0; accent-color:#327358; cursor:pointer; }
.graphics-footer { padding:13px 20px 16px; flex:none; border-top:1px solid #e6ebdf; }
.graphics-footer button { width:100%; padding:9px 12px; border:1px solid #cfdbc4; border-radius:8px; color:#426239; background:#edf3e4; font:500 12px system-ui,sans-serif; cursor:pointer; }
@container (max-width:700px) {
    .board-graphics-toggle { top:8px; right:8px; width:39px; height:39px; }
    .board-graphics-toggle svg { width:21px; height:21px; }
}
@container (max-height:450px) {
    .board-viewport .board-dialog-layer { padding:90px 10px 12px; }
    .board-camera-hint { display:none; }
}
/* On phones the board gets its own usable window; the conversation follows it. */
@media(max-width:900px) {
    .main-content:has(.stage-viewport) > .room-body.match-active { overflow:auto; }
    .match-table-layout:has(.stage-viewport) { flex:none; grid-template-rows:minmax(480px,65dvh) 360px; }
    .board-camera-hint { display:none; }
}
@media(max-width:480px) {
    .match-table-layout:has(.stage-viewport) { grid-template-rows:minmax(530px,72dvh) 340px; }
    .board-viewport .board-dialog-layer { padding:100px 10px 12px; }
}