*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#1b2330;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
#loading{position:fixed;inset:0;background:#0051ba;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50}#loading .lt{font:900 54px Verdana,Arial,sans-serif;color:#ffda1a;letter-spacing:2px;border:6px solid #ffda1a;padding:4px 18px}#loading .ls{margin-top:14px;opacity:.85}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,30,80,.55);z-index:30;padding:12px;overflow:auto}
.card{background:#fff;color:#111;border-radius:16px;max-width:560px;width:100%;padding:18px 20px;box-shadow:0 10px 40px rgba(0,0,0,.4);max-height:92vh;max-height:92dvh;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;text-align:center}
.modal{align-items:flex-start;padding-top:max(12px,env(safe-area-inset-top))}.modal .card{margin:auto}
.logo{display:inline-block;background:#0051ba;color:#ffda1a;font:900 30px Verdana,Arial,sans-serif;letter-spacing:1px;padding:4px 16px;border:4px solid #ffda1a;border-radius:6px}
h1{margin:10px 0 4px;font-size:26px}.sub{color:#444;font-size:15px;line-height:1.35;margin:6px 0 10px}
.how{text-align:left;padding-left:18px;margin:6px 0;font-size:14px;line-height:1.35;color:#222}.how li{margin:4px 0}
.keys{font-size:12px;color:#666;margin:6px 0}.touch .nt{display:none}body:not(.touch) .tt{display:none}
#levels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0 6px}
.lvl:first-child{flex-basis:100%;background:#0051ba;color:#ffda1a;font-size:21px;padding:14px;box-shadow:0 4px 0 #003a8c}.lvl:first-child small{color:#e8eefc}
#loading button{margin-top:16px;border:0;border-radius:12px;padding:12px 26px;font-size:18px;font-weight:800;background:#ffda1a;color:#0051ba}#loading .ls{max-width:86vw;text-align:center}
.lvl{flex:1 1 150px;min-height:58px;border:0;border-radius:12px;background:#ffda1a;color:#0b2a5b;padding:12px 10px;font-size:16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;box-shadow:0 3px 0 #c9a800}.lvl small{font-size:12px;color:#334}.lvl.locked{background:#ddd;box-shadow:none;cursor:default;color:#888}
.go,.sec{display:block;width:100%;border:0;border-radius:12px;padding:13px;font-size:18px;font-weight:800;margin-top:8px;cursor:pointer}.go{background:#0051ba;color:#ffda1a}.go.alt{background:#ffda1a;color:#0051ba}.sec{background:#eee;color:#333}
#endStars{font-size:44px;color:#f5b800;letter-spacing:4px}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud button{pointer-events:auto}
#top{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:8px;right:8px;display:flex;align-items:flex-start;gap:8px}
#timerBox{background:#0051ba;border:2px solid #ffda1a;border-radius:10px;padding:3px 10px;display:flex;flex-direction:column;align-items:center;line-height:1}#timerBox small{font-size:10px;color:#ffda1a;margin-top:2px}#timer{font:800 22px ui-monospace,Menlo,monospace}#timer.warn{color:#ff6b6b;animation:bl 1s infinite}@keyframes bl{50%{opacity:.4}}
#zone{flex:1;align-self:center;font-size:12px;font-weight:700;letter-spacing:.5px;background:rgba(0,0,0,.45);padding:5px 9px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
#btns{display:flex;gap:6px;margin-left:auto}#btns button{width:42px;height:42px;border-radius:10px;border:2px solid #ffda1a;background:#0051ba;font-size:20px;cursor:pointer}
#list{position:absolute;top:calc(env(safe-area-inset-top) + 64px);left:8px;width:min(270px,58vw);background:rgba(255,255,255,.93);color:#111;border-radius:10px;padding:6px 8px;font-size:12px;line-height:1.2;border-top:5px solid #ffda1a}#list.hide{display:none}
.lh{font-weight:800;margin-bottom:3px;color:#0051ba}.li{display:flex;gap:6px;padding:3px 0;border-top:1px solid #eee}.li span{font-size:15px}.li small{color:#555}.li small b{color:#c8102e;font-size:12px}.li.got{opacity:.55}
#mini{position:absolute;top:calc(env(safe-area-inset-top) + 58px);right:8px;border-radius:10px;border:2px solid rgba(255,218,26,.8)}#mini.hide{display:none}
#pa{position:absolute;left:50%;transform:translate(-50%,-20px);top:calc(env(safe-area-inset-top) + 60px);max-width:min(560px,70vw);background:#ffda1a;color:#111;border-radius:10px;padding:8px 12px;font-size:13px;opacity:0;transition:.4s;text-align:center}#pa.on{opacity:1;transform:translate(-50%,0)}
#toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 150px);transform:translateX(-50%);background:rgba(0,0,0,.75);padding:9px 14px;border-radius:10px;font-size:14px;opacity:0;transition:.3s;max-width:88vw;text-align:center}#toast.on{opacity:1}
#bUse{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 86px);background:#ffda1a;color:#0b2a5b;border:0;border-radius:14px;padding:13px 18px;font-size:16px;font-weight:800;box-shadow:0 4px 0 #c9a800,0 6px 20px rgba(0,0,0,.4);display:none;max-width:88vw;cursor:pointer}#bUse.on{display:block}#bUse kbd{background:#0051ba;color:#fff;border-radius:5px;padding:1px 6px;font-size:13px;margin-left:6px}
#stamBox{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 14px);left:50%;transform:translateX(-50%);width:140px;height:7px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden}#stam{height:100%;background:#4ade80;width:100%}
#bRun{position:absolute;right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 104px);width:60px;height:60px;border-radius:50%;border:3px solid #ffda1a;background:rgba(0,81,186,.7);font-size:26px;display:none;touch-action:none;-webkit-touch-callout:none}.touch #bRun{display:block}


#pad{position:absolute;inset:0;pointer-events:none}
#padL,#padR{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;gap:10px}
#padL{left:calc(env(safe-area-inset-left) + 14px);flex-direction:column}
#padR{right:calc(env(safe-area-inset-right) + 14px);flex-direction:row}
#hud .ar{pointer-events:auto;width:76px;height:76px;border-radius:20px;border:2px solid rgba(255,218,26,.9);background:rgba(0,45,110,.45);color:#fff;font-size:32px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-shadow:0 3px 10px rgba(0,0,0,.25);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#hud .ar.on{background:rgba(255,218,26,.75);color:#0b2a5b;transform:scale(.96)}
#stamBox{bottom:calc(env(safe-area-inset-bottom) + 6px)}
@media (min-aspect-ratio:1/1){#bUse{bottom:calc(env(safe-area-inset-bottom) + 24px)}#toast{bottom:calc(env(safe-area-inset-bottom) + 92px)}}
@media (max-aspect-ratio:1/1){#bUse{bottom:calc(env(safe-area-inset-bottom) + 186px);max-width:calc(100vw - 40px)}#toast{bottom:calc(env(safe-area-inset-bottom) + 250px)}}
@media (max-height:450px){#hud .ar{width:66px;height:66px;font-size:28px}#padL{flex-direction:row-reverse;flex-direction:column}#bRun{bottom:calc(env(safe-area-inset-bottom) + 90px);width:54px;height:54px;font-size:22px}}
@media (max-height:360px){#padL{flex-direction:row}}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(255,255,255,.7)}
#bigmap{position:fixed;inset:0;background:rgba(0,20,60,.8);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:25;padding:10px}#bigmap.on{display:flex}#bigmap canvas{border-radius:8px;box-shadow:0 6px 30px rgba(0,0,0,.5)}#bigmap p{font-size:14px;margin:8px}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;z-index:20;color:#ffda1a}#fade.on{opacity:1}
@media (max-height:450px){#list{top:56px;font-size:11px;width:min(240px,40vw)}#mini{top:56px}.card{padding:12px}.how{display:none}h1{font-size:22px}}
@media (min-width:1000px){#list{font-size:14px;width:300px}#zone{font-size:14px}#timer{font-size:26px}}

@media (max-width:600px) and (min-height:500px){#pa{top:auto;bottom:calc(env(safe-area-inset-bottom) + 300px);transform:translate(-50%,20px)}#pa.on{transform:translate(-50%,0)}#mini{top:calc(env(safe-area-inset-top) + 64px)}}