/* The landscape shell is CSS only: no extra render target or animation loop. */
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff9e9}
body{display:flex;justify-content:center;align-items:center}
#game{box-sizing:border-box;position:relative;width:100%;height:100dvh;overflow:hidden;background:#fff9e9;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* Insets protect controls, while the shared framebuffer also paints underneath
   them. Padding must be inside the viewport, never added to its total height. */
html[data-native] #game{height:100%;padding-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));padding-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));padding-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px));padding-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px))}
@media(aspect-ratio > 1/1){
 html,body{background-color:#c5b699;background-image:url('./assets/ui/desktop-hex-pattern.png?v=2');background-size:768px 672px;background-repeat:repeat}
 /* Full height maximizes the board. The narrow extra paper at either edge
    gives the shared 390px GUI breathing room without stretching its artwork. */
 #game{width:min(100%,calc(100dvh * .62));border:0;border-radius:0;box-shadow:-4px 0 8px #3d2b1424,4px 0 8px #3d2b1424,-14px 0 32px #3d2b1447,14px 0 32px #3d2b1447}
}