.view-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.view-options button { min-height:35px; padding:5px 3px; border:1px solid var(--line); border-radius:4px; background:transparent; font-size:11px; color:var(--muted); }
.view-options button.is-active { border-color:#a38a60; background:#faf5e9; color:#75613d; }
.view-section .setting-note { margin-top:12px; }
.spatial-loading { position:absolute; inset:0; display:grid; place-items:center; z-index:5; font-size:12px; color:#927b57; pointer-events:none; }
.spatial-three-canvas { position:absolute; display:block; inset:0; width:100%; height:100%; touch-action:pan-y; }
:is(.go-board,.xq-board):not(.is-spatial) > .spatial-three-canvas { display:none !important; }
:is(.go-board,.xq-board).is-spatial { aspect-ratio:1.42; border:0; background:none; box-shadow:none; border-radius:0; }
:is(.go-board,.xq-board).is-spatial[data-view="top"] { aspect-ratio:1; }
:is(.go-board,.xq-board).is-spatial[data-view="low"] { aspect-ratio:1.6; }
:is(.go-board,.xq-board).is-spatial::before, :is(.go-board,.xq-board).is-spatial::after { display:none; }
.is-spatial > :is(.go-grain,.go-grid,.go-coordinates,.xq-grain,.xq-grid,.xq-frame,.xq-coordinates,.xq-board-inscription) { display:none; }
.is-spatial :is(.go-points,.xq-points) { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.is-spatial :is(.go-point,.xq-point) { width:30px; height:30px; padding:0; pointer-events:none; background:none; border:0; }
.is-spatial :is(.go-point,.xq-point)::before, .is-spatial :is(.go-point,.xq-point)::after, .is-spatial :is(.go-stone,.go-hint,.xq-piece,.xq-hint,.go-placement-ghost,.xq-placement-ghost) { display:none; }
.is-spatial :is(.go-point,.xq-point):focus-visible { outline:2px solid #b88947; border-radius:50%; outline-offset:3px; }
.board-two-canvas { display:none; position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
:is(.ch-board,.st-board,.sg-board)[data-view="diagram"] { aspect-ratio:1 !important; }
[data-view="diagram"] > .board-two-canvas { display:block; }
[data-view="diagram"] > :is(.ch-three-canvas,.st-three-canvas,.sg-three-canvas) { display:none !important; }
.board-stage:has(.is-spatial) { --preview-ratio:1.42; --preview-overhead:250px; }
.board-stage:has(.is-spatial[data-view="low"]) { --preview-ratio:1.6; }
.board-stage:has(.is-spatial[data-view="top"]), .board-stage:has([data-view="diagram"]) { --preview-ratio:1; }
.board-view-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:4px 0 8px; font-size:10px; color:#aa987b; }
.board-view-toolbar > span { margin-right:auto; }
.board-view-toolbar .rotation-hint { margin-right:0; white-space:nowrap; }
.board-view-toolbar button { border:0; background:none; padding:5px 0 5px 7px; font-size:10px; color:#987b50; }
.board-view-toolbar .touch-rotation-button { display:none; }
@media (any-pointer:coarse) { .board-view-toolbar .touch-rotation-button { display:inline-block; } }
@media (pointer:coarse) { .board-view-toolbar .rotation-hint { display:none; } }