:root{color-scheme:dark;--vw:100vw;--vh:100vh}
@supports(width:100dvw){:root{--vw:100dvw;--vh:100dvh}}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-width:100%;min-height:100%;overflow:hidden;background:#0d1723;font-family:Arial,Helvetica,sans-serif;touch-action:none;overscroll-behavior:none}
body{min-width:240px;min-height:240px}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 22%,#354c68 0,#162536 48%,#0b121b 100%)}
#game{display:block;width:min(var(--vw),calc(var(--vh) * 16 / 9));height:min(var(--vh),calc(var(--vw) * 9 / 16));max-width:100%;max-height:100%;aspect-ratio:16/9;object-fit:contain;background:#f4ddba;box-shadow:0 18px 70px rgba(0,0,0,.45);outline:none;-webkit-tap-highlight-color:transparent;image-rendering:auto}
#rotateHint{display:none;position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:7px 13px;border-radius:999px;background:rgba(10,20,30,.74);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;pointer-events:none;white-space:nowrap}
@media (orientation:portrait) and (max-width:700px){#rotateHint{display:block}#game{width:var(--vw);height:auto;max-height:var(--vh)}}
@media (max-height:420px){#rotateHint{display:none}}