:root{color-scheme:dark;--green:#65cf6c;--panel:#101820}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;margin:0}
body{overflow:hidden;background:#10161d;color:white;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body:before{content:"";position:fixed;inset:-16%;z-index:-2;background-image:linear-gradient(120deg,rgba(8,15,22,.78),rgba(8,15,22,.94)),url('assets/bg_night.png');background-size:cover;background-position:center;filter:blur(23px);opacity:.82}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.3))}
.stage{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
.screen-wrap{width:min(calc((100dvh - 77px) * .5625),calc(100vw - 20px),500px);aspect-ratio:288/512;max-height:calc(100dvh - 77px);position:relative;overflow:hidden;border-radius:7px;border:2px solid #35424b;box-shadow:0 15px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);background:#53b8bf;flex-shrink:1;touch-action:none}
canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:pointer;outline:none;image-rendering:auto}
.below{width:min(calc((100dvh - 77px) * .5625),calc(100vw - 20px),500px);display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:44px}
.hints{display:flex;flex-direction:column;gap:3px;font-family:monospace;font-size:clamp(8px,1.7vw,10px);font-weight:900;letter-spacing:.055em;color:#8ea8b2;white-space:nowrap}
.hints span:first-child{color:#f1e5b0;font-size:clamp(10px,2vw,12px)}
.actions{display:flex;gap:6px;flex-shrink:0}
.actions button{padding:10px 8px;border:1px solid #43515a;border-radius:5px;background:#202e35;color:#ecf1e4;font:700 9px/1 monospace;letter-spacing:.015em;cursor:pointer;min-height:36px}
.actions button:active{transform:translateY(1px);background:#3d555d}
button:focus-visible,canvas:focus-visible{outline:2px solid #e9db8d;outline-offset:2px}
.screen-wrap:fullscreen{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;display:grid;place-items:center;background:#050e14}
.screen-wrap:fullscreen canvas{width:min(100vw,calc(100dvh * .5625));height:min(100dvh,calc(100vw * 1.7777778));max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:550px){.stage{padding:0 0 max(4px,env(safe-area-inset-bottom));gap:6px}.screen-wrap{border:0;border-radius:0;width:min(100vw,calc((100dvh - 50px) * .5625));max-height:calc(100dvh - 50px)}.below{width:min(100vw,calc((100dvh - 50px) * .5625));padding:0 7px;min-height:40px}.actions button{padding:7px 7px;min-height:31px}}
@media(orientation:landscape) and (max-height:500px){.stage{flex-direction:row;gap:13px}.screen-wrap{width:min(calc(100dvh * .5625),calc(100vw - 130px));max-height:100dvh}.below{width:110px;min-height:0;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px}.actions{flex-direction:column}}