/* 3D uses the whole board allocation. Information stays in readable HTML below
   the scene, so camera moves never rotate card text or gameplay controls. */
#app .board-view-control{margin:0;display:block;flex:none}
.board-view-control select{min-height:38px;width:auto;padding:7px 25px 7px 10px;font-size:.85rem;font-weight:700;border-color:var(--line);background:var(--paper)}
.view-3d .tv-board{display:flex;flex-direction:column;overflow:hidden;background:var(--board-well);border:1px solid var(--line);border-radius:18px}
.scene-viewport{position:relative;flex:1;min-height:220px;background:radial-gradient(ellipse at 50% 35%,#f9fcf1aa,transparent 72%)}
.scene-canvas-host{position:absolute;inset:0;overflow:hidden}
.board-3d-canvas{display:block;width:100%;height:100%;cursor:pointer;touch-action:pan-y}
.scene-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-weight:700}
.scene-camera-buttons{position:absolute;top:10px;left:10px;display:flex;gap:5px}
.scene-camera-buttons .tv-button{font-size:.73rem;padding:7px 10px;min-height:34px;box-shadow:0 2px 9px #152c3017}
.scene-camera-buttons .tv-button[aria-pressed=true]{background:#1e5040;color:#fffce9;border-color:#1e5040}
.view-3d .tv-center{position:relative;inset:auto!important;flex:none;max-height:32%;padding:14px 18px;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.85fr);gap:8px 18px;align-content:start;align-items:center;text-align:left;border-top:1px solid var(--line);background:var(--paper);color:var(--ink)}
.view-3d .tv-center>:first-child,.view-3d .tv-center>:last-child{margin:0}
.view-3d .turn-identity{grid-column:1;justify-content:flex-start}
.view-3d .tv-caption{font-size:11px}
.view-3d .tv-announcement,.view-3d .tv-announcement.long-announcement{grid-column:1;font-size:clamp(17px,1.8vw,28px);line-height:1.25}
.view-3d .tv-dice{grid-column:1;font-size:18px;justify-content:flex-start;gap:10px}
.view-3d .tv-dice .die-scene{display:none}
.view-3d .tv-dice>strong{font-size:22px}
.view-3d .tv-dice>small{font-size:10px}
.view-3d .tv-center:is(.has-card) .tv-dice{display:none}
.view-3d .tv-center :is(.tv-property,.tv-auction,.tv-debt,.tv-card){grid-column:2;grid-row:1 / span 5;margin:0;padding:12px;max-width:none;max-height:none;font-size:15px}
.view-3d .tv-center :is(.tv-property,.tv-auction,.tv-debt) h2{font-size:20px}
.view-3d .tv-card p{font-size:17px;line-height:1.4}
.view-3d .tv-card>span,.view-3d .tv-owner,.view-3d .tv-instruction,.view-3d .tv-event-detail{font-size:12px}
.view-3d .tv-instruction,.view-3d .tv-event-detail{grid-column:1;line-height:1.4}
.view-3d .tv-rent>strong{font-size:21px}
.view-3d .tv-rent>span,.view-3d .tv-buildings{font-size:12px}
.view-3d .tv-celebration,.view-3d .tv-moment{grid-column:1;font-size:15px;animation:none}
:root[data-color-scheme=dark] .scene-viewport{background:radial-gradient(ellipse at 50% 35%,#40554a77,transparent 75%)}
:root[data-color-scheme=dark] .scene-camera-buttons .tv-button[aria-pressed=true]{background:#9bd6b0;color:#142a22;border-color:#9bd6b0}
@media(max-width:650px){
  .view-3d .tv-center{padding:10px;gap:7px;grid-template-columns:minmax(0,1fr);max-height:38%}
  .view-3d .tv-center :is(.tv-property,.tv-auction,.tv-debt,.tv-card){grid-column:1;grid-row:auto}
  .view-3d .tv-announcement,.view-3d .tv-announcement.long-announcement{font-size:18px}
  .view-3d .tv-center .tv-instruction,.view-3d .tv-center .tv-event-detail{display:none}
  .view-3d .tv-card p{font-size:15px}
  .scene-camera-buttons{top:6px;left:6px}
}