html,body{width:100%;height:100%;margin:0;background:#0b0d10}body{display:grid;place-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}#game{width:min(100vw,1024px);height:min(100vh,704px);image-rendering:pixelated}canvas{display:block;image-rendering:pixelated}#touch-controls,#rotate-hint{display:none}@media(pointer:coarse){:root{--mobile-control-rail: clamp(150px, 18vw, 210px);--mobile-control-rail: clamp(150px, 18dvw, 210px);--mobile-button-size: clamp(46px, 9vh, 58px);--mobile-button-size: clamp(46px, 9dvh, 58px);--mobile-pad-gap: clamp(3px, 1vh, 6px);--mobile-pad-gap: clamp(3px, 1dvh, 6px)}html,body{height:100vh;height:100dvh}body{touch-action:none}@media(orientation:landscape){body{display:grid;grid-template-columns:var(--mobile-control-rail) minmax(0,1fr) var(--mobile-control-rail);place-items:center;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box}#game{grid-column:2;width:min(1024px,calc(100vw - var(--mobile-control-rail) * 2 - env(safe-area-inset-left) - env(safe-area-inset-right)));width:min(1024px,calc(100dvw - var(--mobile-control-rail) * 2 - env(safe-area-inset-left) - env(safe-area-inset-right)));height:min(704px,100vh);height:min(704px,100dvh)}}#touch-controls{position:fixed;inset:0;z-index:10;display:grid;grid-template-columns:var(--mobile-control-rail) minmax(0,1fr) var(--mobile-control-rail);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box;pointer-events:none}body[data-level-status=playing] .mobile-pad,body[data-level-status=playing] .mobile-use,body[data-level-status=lost] .mobile-status-actions,body[data-level-status=won] .mobile-status-actions{display:grid}body[data-level-status=won] .mobile-restart{display:none}.mobile-pad,.mobile-use,.mobile-status-actions{display:none;pointer-events:auto}.mobile-pad{grid-column:1;align-self:end;justify-self:center;margin-bottom:max(14px,env(safe-area-inset-bottom));width:calc(var(--mobile-button-size) * 3 + var(--mobile-pad-gap) * 2);height:calc(var(--mobile-button-size) * 3 + var(--mobile-pad-gap) * 2);grid-template-columns:repeat(3,var(--mobile-button-size));grid-template-rows:repeat(3,var(--mobile-button-size));gap:var(--mobile-pad-gap)}.mobile-button{border:2px solid rgba(242,236,216,.68);border-radius:8px;background:#101317ad;color:#f2ecd8;font:700 clamp(18px,4vh,24px) / 1 sans-serif;font:700 clamp(18px,4dvh,24px) / 1 sans-serif;min-width:var(--mobile-button-size);min-height:var(--mobile-button-size);padding:0;-webkit-tap-highlight-color:transparent}.mobile-button:active{background:#43576fe0}.mobile-button-up{grid-column:2;grid-row:1}.mobile-button-left{grid-column:1;grid-row:2}.mobile-button-right{grid-column:3;grid-row:2}.mobile-button-down{grid-column:2;grid-row:3}.mobile-use{grid-column:3;align-self:end;justify-self:center;margin-bottom:max(32px,env(safe-area-inset-bottom));width:clamp(72px,15vh,96px);width:clamp(72px,15dvh,96px);height:clamp(72px,15vh,96px);height:clamp(72px,15dvh,96px);border-radius:999px;font-size:clamp(28px,7vh,38px);font-size:clamp(28px,7dvh,38px)}.mobile-status-actions{grid-column:3;align-self:end;justify-self:center;margin-bottom:max(22px,env(safe-area-inset-bottom));grid-auto-flow:column;gap:clamp(8px,2dvh,14px)}.mobile-status-actions .mobile-button{min-width:clamp(66px,12vh,88px);min-width:clamp(66px,12dvh,88px);padding:0 12px;font-size:clamp(16px,4vh,20px);font-size:clamp(16px,4dvh,20px)}@media(orientation:portrait){#rotate-hint{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#0b0d10eb;color:#f2ecd8;font:700 24px/1 sans-serif}#touch-controls{display:none}}}