*{box-sizing:border-box}body{margin:0;background:#080e20;color:#e3e8ff;font-family:Tahoma,Arial,sans-serif}header,main{max-width:1200px;margin:auto}header{padding:22px;display:flex;justify-content:space-between;gap:12px;align-items:center}a{color:#eacb88;text-decoration:none}header b{font-size:16px}.toolbar{padding:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}.toolbar>div{display:flex;align-items:center;gap:8px}button{background:linear-gradient(145deg,#3e4267,#22233e);border:1px solid #9393bb66;border-radius:12px;color:#fff;padding:10px 16px;font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f5d790}label{font-size:12px}.viewport{position:relative;overflow:hidden;border:1px solid #a0a4d744;border-radius:22px;box-shadow:0 20px 100px #302a6840;background:#0a1530}canvas{width:100%;aspect-ratio:16/9;display:block;touch-action:none}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(90deg,#080d24c9,#14233e8c);padding:20px}#overlay[hidden]{display:none}#overlay span{color:#7de7e2;font-size:13px}h1{font-size:clamp(27px,5vw,64px);margin:12px;color:#ffe2ae;text-shadow:0 0 40px #e5ac5980}#overlay p{max-width:560px;line-height:1.9;font-size:14px}#play{background:linear-gradient(120deg,#f4d99f,#c99a5a);color:#252038;font-weight:bold;font-size:18px;padding:15px 35px}#toast{position:absolute;top:15%;left:15%;right:15%;text-align:center;color:#fff0c3;pointer-events:none;text-shadow:0 2px 8px #000;font-size:18px}.touch{display:flex;justify-content:space-between;direction:ltr;padding:12px 4px;user-select:none}.touch>div{display:flex;gap:10px}.touch button{touch-action:none;min-height:56px;min-width:62px;background:#202e48}.touch button:active{background:#485879}section{padding:12px 22px 35px;line-height:2;color:#a7b5cf}section h2{color:#dac695;font-size:19px}@media(max-width:600px){header{padding:15px 10px;font-size:12px}header b{font-size:12px}.viewport{border-radius:12px}canvas{aspect-ratio:4/3}#overlay p{font-size:11px;margin:7px}#overlay span{font-size:11px}#play{padding:10px 24px;font-size:14px}.toolbar{padding:10px 4px}label{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* In-frame HUD and controls, kept below the modal. */
.viewport .toolbar{position:absolute;inset:0 0 auto;z-index:2;background:linear-gradient(#081329ed,#08132980,transparent);padding:12px 16px;pointer-events:none}.toolbar button,.toolbar label{pointer-events:auto}#stats{max-width:58%;font-size:12px;line-height:1.8;text-shadow:0 2px 5px #000}.viewport .touch{position:absolute;inset:auto 0 0;z-index:2;padding:14px;background:linear-gradient(transparent,#081329c9);pointer-events:none}.touch button{pointer-events:auto;background:#172b48bd;backdrop-filter:blur(8px);border-color:#a7dfe766}.touch button[hidden]{display:none}#shoot{border-color:#94ffe2;color:#bcffec;box-shadow:0 0 20px #62ffd32b}#overlay{z-index:4}#toast{z-index:3;top:24%;font-size:15px}.viewport:has(#overlay:not([hidden])) .touch{visibility:hidden}canvas{aspect-ratio:16/10}#overlay p{max-width:540px}@media(max-width:600px){canvas{aspect-ratio:4/4}.viewport .toolbar{padding:8px;gap:4px}.toolbar>div{gap:4px}.toolbar button{padding:7px;font-size:10px}.toolbar label{font-size:9px}#stats{font-size:10px;max-width:100%;width:100%}.touch button{padding:8px;min-width:44px;min-height:48px;font-size:12px}.touch>div{gap:5px}.viewport .touch{padding:8px}#toast{top:27%;font-size:12px}}