/* v0.4 viewport layout. The board renderer fills the entire left viewport;
   the sidebar keeps the reference's roughly 30% share on wide desktops. */
:root{--flight-header-height:72px}
@media(min-width:701px){
 .play{grid-template-columns:minmax(0,1fr) clamp(305px,30.5vw,660px);height:calc(100dvh - var(--flight-header-height));min-height:0;max-height:none;gap:0}
 .board-region{min-height:0;min-width:0;overflow:hidden}
 #canvas-wrap{width:100%;height:100%;min-height:0}
 aside{min-width:0;min-height:0;overscroll-behavior:contain}
 .turn-panel{max-height:none}
 .name-line b{max-width:none}
}
@media(min-width:701px) and (max-width:1100px){
 :root{--flight-header-height:66px}
 .play{grid-template-columns:minmax(0,1fr) 305px}
}
/* Keep controls in view on shorter desktop windows without shrinking the board. */
@media(min-width:701px) and (max-height:740px){
 aside{padding:10px;gap:8px}
 .crew-panel{padding:9px 8px}
 .crew-head{padding:0 4px 7px}
 .crew-head h2{font-size:21px}
 #players{gap:5px}
 .player-row,.player-row.active{min-height:54px;padding:6px 8px;gap:8px;border-radius:13px}
 .player-avatar{width:38px;height:38px}
 .name-line b{font-size:17px}
 .player-info{gap:3px}
 .player-info small{font-size:9px}
 .current-badge{font-size:6px;bottom:7px;right:8px;padding:3px 5px}
 .player-row.active .player-info small{padding-right:60px}
 .turn-panel{min-height:216px;padding:11px;grid-template-rows:auto minmax(80px,1fr) auto auto auto}
 .turn-title b{font-size:21px}
 .turn-title span{font-size:10px;padding:5px 7px}
 .dice-stage{min-height:80px}
 .dice{width:72px;height:72px;border-radius:17px}
 .dice .pip{width:13px;height:13px}
 #action-hint{margin:6px 0 8px;font-size:11px}
 #piece-buttons{margin-bottom:7px}
 #piece-buttons button{padding:7px 5px;font-size:11px}
 .roll-button{min-height:44px;padding:8px;font-size:19px}
 .reactions{gap:7px}
 .reactions button{min-height:39px;padding:7px 0;font-size:23px}
 .aside-foot{min-height:15px}
}
@media(min-width:701px) and (max-height:680px){
 #players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .player-row,.player-row.active{padding:7px 5px;gap:5px;min-height:56px}
 .player-avatar{width:31px;height:31px}
 .name-line{gap:4px}
 .name-line b{font-size:14px}
 .name-line .seat-dot{width:8px;height:8px}
 .name-line .type-badge{display:none}
 .player-info small{font-size:8px}
 .player-row.active .player-info small{padding-right:0}
 .current-badge{font-size:5px;padding:2px 4px;bottom:2px;right:3px}
 .crew-head>span{font-size:9px}
}

@media(max-width:700px){.brand-icon{width:36px;height:36px;top:-3px}.brand{padding-left:38px}}