*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071d28;color:#fff;font-family:Tahoma,system-ui,sans-serif}canvas{display:block;width:100%;height:100%;object-fit:contain}header{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px max(18px,env(safe-area-inset-right));background:linear-gradient(#061c2ae6,transparent);gap:12px;pointer-events:none}header>*{pointer-events:auto}header b{letter-spacing:3px;color:#ffe5a0}small{display:block;font-size:10px;letter-spacing:0;color:#c9e9dc;margin-top:4px}nav{display:flex;gap:6px}button{cursor:pointer;color:#fff;border:1px solid #ffffff40;background:#163c46e8;border-radius:13px;padding:12px 18px;font:inherit;touch-action:none}button:hover{background:#347969}button:disabled{opacity:.4;cursor:default}#panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#02152165;backdrop-filter:blur(5px)}.card{width:min(760px,94vw);max-height:86vh;overflow:auto;padding:28px;border:1px solid #c7e8cc50;border-radius:28px;background:linear-gradient(140deg,#123e47f5,#071f32f5);box-shadow:0 20px 100px #0008}.eyebrow{color:#a3e6cd;font-size:12px;letter-spacing:4px}h1{font-size:clamp(30px,6vw,62px);margin:8px 0;color:#ffe8a8;letter-spacing:3px}h2{color:#ffe8a8}p{color:#c1d9d7;line-height:1.8;margin:10px 0}.primary{background:#e2ad52;color:#182e30;font-weight:bold;margin:10px 6px 10px 0}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}.levels button{padding:10px 3px;font-size:12px}.levels strong{display:block;font-size:21px;color:#ffe0a3}#touch{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:20px;right:20px;display:none;justify-content:space-between;pointer-events:none}#touch button{width:67px;height:61px;font-size:28px;pointer-events:auto;background:#102f4677;border:2px solid #fff6;user-select:none;-webkit-user-select:none}#touch div{display:flex;gap:12px}#rotate{display:none;position:fixed;bottom:95px;width:100%;text-align:center;background:#123b48d9;padding:12px;font-size:13px;pointer-events:none}#hud{font-size:14px;text-shadow:0 2px 4px #000}body.play #panel{display:none}@media(pointer:coarse){body.play #touch{display:flex}}@media(orientation:portrait) and (pointer:coarse){#rotate{display:block}}@media(max-height:500px){header{padding:7px 15px}small{display:none}.card{padding:15px 24px}h1{font-size:32px}p{font-size:12px;margin:5px 0}button{padding:8px 12px}.levels{margin:8px 0}.levels button{padding:5px}#hud{font-size:12px}}