*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0b1a12}
#maze-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* divisória entre a visão da capi (em cima) e a câmera de perseguição (embaixo) */
#split{position:fixed;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:linear-gradient(90deg,#0000,#fff8,#0000);box-shadow:0 0 14px #0008;pointer-events:none}
/* título no topo central: nome do jogo + fase atual */
#hud{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + .6em);transform:translateX(-50%);text-align:center;pointer-events:none;color:#fff;
  font-size:clamp(12px,3.4vw,22px);text-shadow:0 3px 0 #0006,0 0 14px #0005}
#hud h1{margin:0;font:400 2.3em/1 "Luckiest Guy",system-ui,sans-serif;letter-spacing:.03em;color:#ffd23b;
  -webkit-text-stroke:.07em #5a2a00;paint-order:stroke fill}
#hud h1 span{color:#5dff9a;-webkit-text-stroke-color:#0a4a2a}
#hud p{display:inline-block;margin:.3em 0 0;padding:.15em .8em;border-radius:99px;font:700 1em/1.3 Fredoka,system-ui,sans-serif;
  background:#ffffff26;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px #ffffff55}
#hud p.pop{animation:pop .6s ease-out}
@keyframes pop{0%{transform:scale(1.6)}60%{transform:scale(.92)}100%{transform:none}}
/* pisca a tela na vitória / evento forte */
#flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,#fff0 40%,var(--c,#fff6));opacity:0;transition:opacity .5s}
#flash.on{opacity:1;transition:none}
/* tabela de presentes na divisão das telas, no estilo do painel da ponte: ajuda em verde, derruba em vermelho */
#legend{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(96vw,620px);padding:.5em .55em .55em;border-radius:1.1em;
  background:#ffffff1f;backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 6px 20px #0004,inset 0 0 0 1px #ffffff40;color:#fff;text-shadow:0 1px 3px #000c,0 0 2px #000;
  font:700 clamp(8px,2.15vw,14px)/1.15 system-ui,"Segoe UI",sans-serif;text-align:center;pointer-events:none}
#legend>div{display:flex;gap:.3em;align-items:stretch}#legend>div+div{margin-top:.35em}
#legend em{font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg);border-radius:.6em;padding:.3em .15em;font-size:.85em;letter-spacing:.04em}
#legend .help em{color:#fff;background:#18b85ccc}#legend .sab em{color:#fff;background:#e8365ecc}
#legend span{flex:1;min-width:0;border-radius:.7em;padding:.35em .1em .4em}
#legend .help span{box-shadow:inset 0 0 0 1.5px #3dff8a99;background:#0f6a3a40}#legend .sab span{box-shadow:inset 0 0 0 1.5px #ff5a8099;background:#6a0f2a40}
#legend i{display:block;width:2.6em;height:2.6em;margin:0 auto .2em}
#legend i svg,#legend i img{width:100%;height:100%;object-fit:contain;display:block}
#legend b{display:block;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#legend small{display:block;font-weight:700;font-size:.85em}
/* ===================== versão de jogar ===================== */
[hidden]{display:none!important}
.ui-root{font-family:Fredoka,system-ui,sans-serif;color:#fff}
.ui-screen{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;padding:1.2em;
  background:radial-gradient(circle at 50% 30%,#ffffff22,#0b102acc 70%);backdrop-filter:blur(6px);text-align:center;font-size:clamp(14px,3.6vw,20px)}
.ui-root button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ui-logo{margin:0;font:400 3.4em/1 "Luckiest Guy",system-ui,sans-serif;color:#ffd23b;-webkit-text-stroke:.07em #5a2a00;paint-order:stroke fill;
  text-shadow:0 .1em 0 #0005;animation:float 3s ease-in-out infinite}
.ui-logo span{color:#5dff9a;-webkit-text-stroke-color:#0a4a2a}
@keyframes float{50%{transform:translateY(-.12em) rotate(-1deg)}}
.ui-sub{margin:0;opacity:.9}.ui-label{margin:.6em 0 0;font-weight:700}
.ui-help{margin:.4em 0 0;opacity:.8;font-size:.85em}
.ui-views{display:flex;gap:.5em}
.ui-view{display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.6em .8em;border-radius:1em;background:#ffffff1f;box-shadow:inset 0 0 0 2px #ffffff33;font-weight:700;font-size:.9em}
.ui-view span{font-size:1.8em}.ui-view.on{background:#5dff9a33;box-shadow:inset 0 0 0 3px #5dff9a;transform:scale(1.05)}
.ui-big,.ui-mid{padding:.55em 1.6em;border-radius:99px;font-weight:700;box-shadow:0 .25em 0 #0005}
.ui-big{font-size:1.4em;background:linear-gradient(#ffe25a,#ffaa1a);color:#5a2a00}
.ui-mid{background:#ffffff2a;box-shadow:inset 0 0 0 2px #ffffff55}
.ui-big:active,.ui-mid:active{transform:translateY(.15em);box-shadow:0 .1em 0 #0005}
.ui-round{width:2.4em;height:2.4em;border-radius:50%;background:#ffffff2e;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 2px #ffffff55;font-size:1em}
/* mapa */
.ui-map{justify-content:flex-start;padding:0;gap:0}
.ui-maphead{position:sticky;top:0;z-index:1;width:100%;display:flex;align-items:center;gap:.8em;padding:calc(env(safe-area-inset-top) + .6em) 1em .6em;background:#0b102acc;backdrop-filter:blur(8px)}
.ui-maphead h3{margin:0;flex:1;text-align:left;font:400 1.6em "Luckiest Guy",system-ui;color:#ffd23b}
.ui-total{color:#ffd23b}
.ui-path{flex:1;width:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:.9em;padding:1em 0 3em}
.ui-world{flex-shrink:0;margin-top:.8em;padding:.2em 1em;border-radius:99px;background:#ffffff26;font-weight:700;letter-spacing:.05em}
.ui-node{flex-shrink:0;position:relative;transform:translateX(var(--x));width:4.4em;height:4.4em;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),linear-gradient(160deg,var(--a),var(--b));box-shadow:0 .3em 0 #0006,inset 0 0 0 3px #fff9}
.ui-node b{font:400 1.5em/1 "Luckiest Guy",system-ui;color:#fff;-webkit-text-stroke:.06em #0006;paint-order:stroke fill}
.ui-node i{font-style:normal;color:#ffd23b;font-size:.75em;letter-spacing:-.05em;text-shadow:0 1px 2px #000}
.ui-node.locked{filter:grayscale(.55) brightness(.8);opacity:.85;cursor:default}
.ui-node.current{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 .3em 0 #0006,inset 0 0 0 3px #fff,0 0 0 .5em #ffd23b66}}
/* HUD do jogo: pausa, visão e placar */
.ui-hud{position:fixed;z-index:4;left:0;right:0;top:calc(env(safe-area-inset-top) + 5.4em);display:flex;align-items:center;justify-content:center;gap:.5em;pointer-events:none;font-size:clamp(12px,3.2vw,18px)}
.ui-hud button{pointer-events:auto}
.ui-stats{display:flex;gap:.7em;padding:.3em .9em;border-radius:99px;background:#ffffff26;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px #ffffff55;font-weight:700;text-shadow:0 1px 3px #000a}
.ui-stats .hurry{color:#ff6a7a;animation:pulse2 .5s infinite alternate}@keyframes pulse2{to{transform:scale(1.15)}}
/* controle na tela (só celular) */
.ui-dpad{position:fixed;z-index:4;right:.8em;bottom:calc(env(safe-area-inset-bottom) + 1em);opacity:.8;display:grid;grid-template:"a u b" "l c r" "d s e";gap:.25em;font-size:clamp(14px,5vw,22px)}
@media (pointer:fine){.ui-dpad{display:none!important}}
.ui-pad{width:2.6em;height:2.6em;border-radius:.8em;background:#ffffff33;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 2px #ffffff77,0 .2em 0 #0004;color:#fff;font-size:1em;touch-action:none}
.ui-pad.up{grid-area:u}.ui-pad.left{grid-area:l}.ui-pad.right{grid-area:r}.ui-pad.down{grid-area:s}
.ui-pad.hit{background:#5dff9a88;transform:scale(.92)}
/* contagem, pausa e resultado */
.ui-count{position:fixed;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.ui-count b{font:400 clamp(70px,24vw,160px)/1 "Luckiest Guy",system-ui;color:#fff;-webkit-text-stroke:.05em #ff5a8a;paint-order:stroke fill;text-shadow:0 .06em 0 #0006}
.ui-count small{font:700 clamp(16px,4.5vw,26px) Fredoka,system-ui;text-shadow:0 2px 6px #000}
.pop{animation:pop .6s ease-out}
.ui-pop h3{margin:0;font:400 2.2em/1.1 "Luckiest Guy",system-ui;color:#ffd23b;-webkit-text-stroke:.06em #5a2a00;paint-order:stroke fill}
.ui-stars{display:flex;gap:.2em;font-size:3.4em;line-height:1}
.ui-stars span{color:#ffffff33;transform:scale(.7);transition:transform .35s cubic-bezier(.3,1.8,.5,1),color .2s}
.ui-stars span.on{color:#ffd23b;transform:scale(1.15);text-shadow:0 0 .3em #ffb000}
.ui-unlock{margin:0;font-weight:700;color:#5dff9a;animation:pop .6s ease-out .9s both}
.ui-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em}
.ui-node u{position:absolute;top:-.55em;right:-.45em;text-decoration:none;font-size:1.1em;filter:drop-shadow(0 2px 2px #0008)}
.ui-node.boss{width:5.2em;height:5.2em;box-shadow:0 .3em 0 #0006,inset 0 0 0 4px #ffd23b}
/* toque pra jogar, topo do menu, avisos, loja, conquistas, recompensa diária, resultado */
.ui-splash{cursor:pointer}
.ui-tap{margin:1em 0 0;font-weight:700;font-size:1.4em;animation:blink 1.1s ease-in-out infinite}@keyframes blink{50%{opacity:.35}}
.ui-topbar{position:absolute;top:calc(env(safe-area-inset-top) + .8em);left:1em;right:1em;display:flex;justify-content:space-between}
.ui-wallet,.ui-streak{padding:.25em .8em;border-radius:99px;background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff55;font-weight:700}
.ui-wallet{color:#ffd23b}
.ui-toasts{position:fixed;z-index:9;top:calc(env(safe-area-inset-top) + 1em);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:.5em;pointer-events:none;font-family:Fredoka,system-ui,sans-serif}
.ui-toast{display:flex;align-items:center;gap:.6em;padding:.5em 1em;border-radius:1em;background:linear-gradient(135deg,#ffd23bee,#ff8a3bee);color:#3a1a00;font-weight:700;box-shadow:0 .4em 1.2em #0006;animation:pop .5s ease-out;transition:opacity .5s,transform .5s}
.ui-toast b{font-size:2em}.ui-toast.out{opacity:0;transform:translateY(-1em)}
.ui-shop{justify-content:flex-start;padding:0;gap:.6em}
.ui-tabs{display:flex;gap:.4em;padding:0 1em}
.ui-tabs button{padding:.4em 1em;border-radius:99px;background:#ffffff1f;font-weight:700}.ui-tabs button.on{background:#5dff9a;color:#0a3a1a}
.ui-grid{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5em,1fr));gap:.6em;padding:0 1em;overflow-y:auto}
.ui-item{display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.7em .4em;border-radius:1em;background:#ffffff1f;box-shadow:inset 0 0 0 2px #ffffff33;font-weight:700}
.ui-item b{font-size:2.2em;line-height:1.1}.ui-item small{font-size:.8em;color:#ffd23b}.ui-item small i{color:#9fe8ff;font-style:normal;font-size:.9em}
.ui-item.on{box-shadow:inset 0 0 0 3px #5dff9a;background:#5dff9a26}.ui-item.on small{color:#5dff9a}
.ui-item.poor{opacity:.6}.ui-item.locked{opacity:.45}
.ui-item.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ui-week{display:flex;gap:.3em}
.ui-week span{display:flex;flex-direction:column;align-items:center;padding:.4em .45em;border-radius:.7em;background:#ffffff1f;font-weight:700}
.ui-week span.done{opacity:.45}.ui-week span.now{background:#ffd23b;color:#5a2a00;transform:scale(1.15);box-shadow:0 0 0 3px #fff8}
.ui-earn{margin:0;font:400 2em "Luckiest Guy",system-ui;color:#ffd23b;-webkit-text-stroke:.05em #5a2a00;paint-order:stroke fill}
.ui-near{margin:0;font-weight:700;color:#ff8aa0;font-size:1.15em}
.ui-next{margin:0;opacity:.95}
.ui-auto{margin:0;font-size:.85em;opacity:.8}