*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101d2c;color:#f8f0db;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}body{height:100dvh}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;top:max(22px,env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:900;letter-spacing:2px}.mark{color:#ff8050;font-size:38px}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:5px;color:#98a9b7}button{white-space:nowrap;font:inherit;color:#d3d9db;background:#172c3d;border:1px solid #385061;border-radius:24px;padding:11px 15px;cursor:pointer;pointer-events:auto}button:focus-visible{outline:3px solid #f6ba70}header button{font-size:11px}.stats{position:absolute;top:max(95px,calc(env(safe-area-inset-top) + 76px));left:50%;transform:translateX(-50%);display:flex;gap:38px;text-align:center}.stats small{white-space:nowrap;font-size:9px;letter-spacing:2px;color:#99afb9}.stats b{display:block;font-size:34px;line-height:1.2;font-variant-numeric:tabular-nums}.stats div:first-child b{color:#ffae74}#feedback{position:absolute;top:177px;width:100%;text-align:center;font-size:11px;font-weight:bold;letter-spacing:2.5px;color:#efba89;pointer-events:none}footer{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;pointer-events:none}#hint strong{display:block;font-size:20px}#hint span{display:block;color:#9bb0ba;font-size:11px;margin-top:7px}.power{width:150px;height:4px;background:#28404f;border-radius:5px;margin:16px auto;overflow:hidden}.power i{display:block;width:0;height:100%;background:#ff9c61}.actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.actions button{font-size:11px}.actions span{font-size:8px;letter-spacing:1.5px;color:#9bb0ba}dialog{color:#f8f0db;background:#162c3b;border:1px solid #52616b;border-radius:22px;text-align:center;padding:32px;max-width:calc(100% - 40px)}dialog::backdrop{background:#08111bba;backdrop-filter:blur(6px)}dialog small{letter-spacing:3px;color:#ffae74}dialog h1{font-size:32px}dialog p b{font-size:55px}dialog span{display:block;color:#9bb0ba;margin:20px 0}dialog button{background:#ff9c61;color:#17202b;font-weight:bold;width:100%}@media(max-height:550px){header{top:12px;left:18px}.brand small{display:none}.stats{top:15px;gap:25px}.stats b{font-size:26px}#feedback{top:77px}footer{bottom:10px;left:18px;right:18px}#hint strong{font-size:15px}#hint span{font-size:10px}.power{margin:8px auto}.actions{position:absolute;bottom:0;width:100%}.actions span{display:none}#hint{margin-bottom:28px}}

@media(max-width:360px){header{left:16px;right:16px}.brand{font-size:12px;gap:8px;letter-spacing:1.5px}.mark{font-size:30px}.brand small{font-size:6.5px;letter-spacing:1.2px}.actions span{display:none}.stats{gap:26px}}
@media(max-height:550px) and (max-width:700px){.brand div{display:none}#feedback{left:18px;top:90px;width:120px;text-align:left;line-height:1.5;font-size:9px}}
@media(max-height:550px){dialog{padding:18px 28px}dialog small{font-size:10px}dialog h1{font-size:24px;margin:10px 0}dialog p{margin:8px 0}dialog p b{font-size:40px}dialog span{font-size:12px;margin:12px 0}dialog button{padding:10px 15px}}