/* The loading state must be visible immediately, including after scrolling settings. */
#loading-screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:24px;background:var(--bg);animation:none}
.game-sidebar{display:contents}
body[data-screen="game"] #app{max-width:none;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom)}
body[data-screen="game"] .game-screen{max-width:none}
@media(min-width:1001px){body[data-screen="game"] #app{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}}

/* On short, wide screens the controls use the spare width instead of field height. */
@media(max-height:540px) and (orientation:landscape){
 body[data-screen="game"] .header{display:flex;height:48px;gap:12px;flex-wrap:nowrap}
 body[data-screen="game"] .brand{font-size:19px;flex-shrink:0}
 body[data-screen="game"] .game-top{display:flex;flex:1;width:auto;min-width:0;height:auto;gap:8px}
 body[data-screen="game"] .game-top #menu{min-height:44px;padding:8px 4px}
 body[data-screen="game"] .round-label{position:absolute;left:50%;transform:translateX(-50%);font-size:11px}
 body[data-screen="game"] .timer{font-size:16px;min-width:52px;gap:3px}
 body[data-screen="game"] .header-right{gap:0!important;flex-shrink:0}
 body[data-screen="game"] .audio-toggle{width:40px;height:44px;padding:10px}
 body[data-screen="game"] .language select{max-width:90px;min-width:0;font-size:11px;padding:12px 2px}
 body[data-screen="game"] .game-screen{display:grid;grid-template-columns:minmax(0,1fr) 180px;column-gap:12px;align-items:start}
 body[data-screen="game"] .time-track{grid-column:1/-1;grid-row:1;width:100%;margin:3px 0}
 body[data-screen="game"] .object-headings{grid-column:1;grid-row:2;margin-bottom:4px;min-width:0}
 body[data-screen="game"] .object-heading{padding:2px 6px;gap:4px}
 body[data-screen="game"] .object-heading h2{font-size:12px}
 body[data-screen="game"] .object-size{font-size:12px}
 body[data-screen="game"] .board-wrap{grid-column:1;grid-row:3}
 body[data-screen="game"] .object-description{grid-column:1;grid-row:4;margin-top:6px;padding:6px 9px;max-height:clamp(36px,14dvh,64px);overflow-y:auto;overscroll-behavior:contain}
 body[data-screen="game"] .object-description p{font-size:11px;line-height:1.4}
 body[data-screen="game"] .game-sidebar{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;align-self:stretch;gap:12px;min-height:0;contain:size;overflow-y:auto;overscroll-behavior:contain;padding:4px 0}
 body[data-screen="game"] .game-bottom{flex-direction:column;align-items:stretch;gap:12px;margin:0;padding:0;border:0;flex-shrink:0}
 body[data-screen="game"] .zoom-controls{gap:2px;justify-content:space-between}
 body[data-screen="game"] .square-button{width:40px;height:44px;flex-shrink:0}
 body[data-screen="game"] .zoom-readout{width:auto;min-width:0;flex:1;gap:3px}
 body[data-screen="game"] .zoom-readout strong{font-size:11px;white-space:normal}
 body[data-screen="game"] .primary{width:100%;min-width:0;min-height:44px;padding:10px 12px;font-size:12px;gap:6px}
 body[data-screen="game"] #inspection-hint,body[data-screen="game"] #game-hint{display:none}
 body[data-screen="game"] .result-panel{flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:8px 0 0;min-height:0}
 body[data-screen="game"] .result-score{min-width:0}
 body[data-screen="game"] .result-score strong{font-size:28px;line-height:1.1;margin-top:3px}
 body[data-screen="game"] .result-details{min-width:0;font-size:10px;order:2}
 body[data-screen="game"] .result-details p{margin:3px 0}
 body[data-screen="game"] .result-details small{display:block;font-size:10px}
 body[data-screen="game"] .reference-menu{top:45px;max-height:calc(100dvh - 56px);overflow-y:auto}
}
@media(max-width:700px) and (max-height:540px) and (orientation:landscape){
 body[data-screen="game"] .brand>span:last-child{display:none}
 body[data-screen="game"] .brand-mark{display:flex}
 body[data-screen="game"] #menu>span,body[data-screen="game"] .round-label>span{display:none}
 body[data-screen="game"] .game-screen{grid-template-columns:minmax(0,1fr) 150px;column-gap:8px}
 body[data-screen="game"] .language select{max-width:76px}
 body[data-screen="game"] .audio-toggle{width:36px;padding:8px}
}