@charset "UTF-8";
/* Gems2 — gelatina premium: brilho delicado, contorno fino, ouro, fonte arredondada.
 * Tamanhos saem do espaço real de cada tela (container queries), não de um celular fixo. */
@font-face{font-family:"Fredoka";src:url("assets/fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{
 color-scheme:dark;
 --ink:#2a0a4a;
 --gold:#ffd34d;--gold-soft:#ffe9a3;--gold-deep:#b8740f;
 --glass:linear-gradient(180deg,#ffffff2e,#ffffff12);
 --glass-line:#ffffff3a;
 --font:"Fredoka",ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
 --outline:0 1.5px 0 var(--ink),1.5px 0 0 var(--ink),-1.5px 0 0 var(--ink),0 -1px 0 var(--ink),0 3px 0 #2a0a4a99;
 --soft-outline:0 1px 0 var(--ink),0 2px 3px #2a0a4a80;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.hidden{display:none!important}
html,body{height:100%}
body{margin:0;color:#fff;font-family:var(--font);font-weight:500;background:#1c0838 radial-gradient(ellipse at 50% -10%,#7a2fd0 0%,#3b1470 45%,#1c0838 85%) fixed;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible,.map-scroll:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;border-radius:12px}
button:disabled{cursor:default}
main{position:relative;isolation:isolate;width:100%;max-width:480px;height:100vh;height:100svh;min-height:460px;margin:auto;overflow:hidden;display:flex;flex-direction:column}
@supports(height:100dvh){main{height:100dvh}}
main>section{flex:1;min-height:0}
@media(min-width:620px) and (min-height:700px){main{height:min(940px,calc(100dvh - 40px));margin:20px auto;border-radius:34px;border:1.5px solid #ffffff30;box-shadow:0 0 0 6px #ffffff0d,0 0 0 7px var(--gold-deep),0 30px 80px #0009}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- botões de gelatina ---------- */
.jelly,.round-btn,.dock-btn,.booster{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:600;text-shadow:var(--outline);border:2px solid var(--ink);--c1:#a6ff6a;--c2:#45cc22;--c3:#1f7a12;background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 58%,var(--c3) 100%);box-shadow:inset 0 2px 0 #ffffffa0,inset 0 -3px 0 #00000026,0 3px 0 var(--ink),0 6px 14px #12002a55;transition:transform .08s,filter .15s}
.jelly:before,.round-btn:before,.dock-btn:before,.booster:before{content:"";position:absolute;left:12%;right:12%;top:6%;height:34%;border-radius:999px;background:linear-gradient(#ffffffb0,#ffffff08);pointer-events:none}
.jelly:active:not(:disabled),.round-btn:active:not(:disabled),.dock-btn:active:not(:disabled),.booster:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 0 #ffffffa0,inset 0 -2px 0 #00000026,0 1px 0 var(--ink),0 3px 6px #12002a55}
.jelly:disabled,.booster:disabled{filter:saturate(.35) brightness(.85)}
.jelly{min-height:46px;padding:8px 20px;border-radius:16px;font-size:17px;letter-spacing:.2px}
.jelly.big{min-height:52px;min-width:200px;font-size:19px;border-radius:18px}
.jelly.small{min-height:38px;padding:5px 12px;font-size:13px;border-radius:13px}
.btn-green{--c1:#b4ff86;--c2:#4fd12c;--c3:#1f7a12}
.btn-pink{--c1:#ffadd8;--c2:#ff4aa8;--c3:#a3005c}
.btn-blue{--c1:#8fe6ff;--c2:#3191ff;--c3:#123f9e}
.btn-orange{--c1:#ffd98a;--c2:#ff9f2a;--c3:#a34a00}
.btn-purple{--c1:#d9b3ff;--c2:#9b55ff;--c3:#4b1590}
.btn-gold{--c1:#fff5bf;--c2:#ffcc35;--c3:#b8650a}
.round-btn{width:40px;height:40px;border-radius:50%;padding:0}
.round-btn.small{width:34px;height:34px;font-size:20px;line-height:1}
.round-btn svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1.5px 0 var(--ink))}
.round-btn:disabled{filter:saturate(.2) opacity(.45)}
.pill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 4px;border-radius:999px;border:1.5px solid var(--glass-line);background:#2a0a4a8c;backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 #ffffff30,0 2px 8px #0003;font-size:14px;font-weight:600;text-shadow:var(--soft-outline);font-variant-numeric:tabular-nums}
.star-pill>span{font-size:18px;color:var(--gold);text-shadow:0 1px 0 var(--gold-deep)}
.coin{display:inline-block;width:20px;height:20px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--gold-deep);background:radial-gradient(circle at 35% 30%,#fffbe0 0 12%,#ffe066 13% 45%,#ffb800 46% 100%);box-shadow:inset 0 -1.5px 0 #c77a00;vertical-align:middle;position:relative}
.coin:after{content:"";position:absolute;inset:3.5px;border-radius:50%;border:1px solid #c77a0080}

/* ---------- pop-ups ---------- */
/* Sem cartão: título, conteúdo e botões soltos sobre a tela escurecida. */
.popup{position:relative;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center}
.popup-ribbon{max-width:100%;margin:0 0 clamp(8px,1.6vh,14px)}
.popup-ribbon h2,.popup-ribbon span{margin:0;font-size:clamp(22px,3.4vh,30px);font-weight:600;line-height:1.1;text-shadow:var(--outline);color:#fff}
.modal-eyebrow{display:block;font-size:clamp(12px,1.8vh,15px)!important;letter-spacing:2px;text-transform:uppercase;color:var(--gold)!important}
.close-x{position:absolute;right:-4px;top:-6px;width:40px;height:40px;padding:0;border:0;background:none;color:#fff;font-size:22px;font-weight:600;text-shadow:var(--outline);z-index:2}
.close-x:active{transform:scale(.9)}
.sheet{position:absolute;inset:0;z-index:40;container-type:size;display:flex;justify-content:center;padding:max(18px,calc(env(safe-area-inset-top) + 12px)) 16px max(16px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 0%,#6a2bd0d0,transparent 70%),#160833f2;backdrop-filter:blur(10px);animation:fade-in .2s;overflow-y:auto;--glass:#ffffff14;--glass-line:transparent}
.sheet .popup{min-height:100%;margin:0;animation:pop-in .3s cubic-bezier(.2,1.2,.45,1)}
.sheet .popup-ribbon{flex-shrink:0;margin:clamp(4px,1cqh,10px) 40px clamp(10px,2.4cqh,22px)}
.sheet .popup>.jelly{flex-shrink:0;width:100%;max-width:320px;min-height:clamp(46px,7.5cqh,60px);margin-top:auto;font-size:clamp(16px,2.6cqh,21px)}
.sheet .shop-note{margin-top:auto;padding-top:10px}
.option-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:clamp(50px,8cqh,64px);margin:0;padding:0 2px;border:0;border-bottom:1px solid #ffffff22;border-radius:0;background:none;font-size:clamp(16px,2.5cqh,19px);font-weight:600;text-shadow:var(--soft-outline)}
.switch{position:relative;width:52px;height:30px;border-radius:999px;border:2px solid var(--ink);background:linear-gradient(#9aa4b8,#6b7488);box-shadow:inset 0 2px 3px #0004;transition:background .2s}
.switch:after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:linear-gradient(#fff,#dde1ea);box-shadow:0 1px 0 #0003;transition:left .2s cubic-bezier(.3,1.5,.5,1)}
[aria-checked=true] .switch{background:linear-gradient(#b4ff86,#4fd12c 60%,#1f7a12)}
[aria-checked=true] .switch:after{left:24px}
.volume-control{display:flex;flex-direction:column;gap:2px;width:100%;margin:clamp(8px,1.8cqh,16px) 0;padding:0 2px;text-align:left;font-size:clamp(14px,2.2cqh,17px);font-weight:500;text-shadow:var(--soft-outline)}
.volume-control input{width:100%;min-height:30px;accent-color:var(--gold)}
#map-help{margin-top:4px;width:100%}

/* ---------- mapa ---------- */
.map-screen{position:relative;height:100%;display:flex;flex-direction:column;isolation:isolate;background:#8fdcff}
.map-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:6px;padding:max(8px,env(safe-area-inset-top)) 10px 10px;background:linear-gradient(#2a0a4a80,transparent)}
.map-brand{display:flex;align-items:center;gap:5px;min-width:0}
.map-brand img{width:26px;height:26px;filter:drop-shadow(0 2px 2px #2a0a4a80)}
.logo-text{font-size:19px;font-weight:600;letter-spacing:-.3px;text-shadow:var(--outline);line-height:1;white-space:nowrap}
.logo-text .amp{color:var(--gold);font-weight:700}
.map-tools{display:flex;align-items:center;gap:5px;margin-left:auto}
.map-tools .round-btn{width:34px;height:34px}
.map-tools .round-btn svg{width:17px;height:17px}
.chapter-heading{position:absolute;left:0;right:0;top:calc(max(8px,env(safe-area-inset-top)) + 40px);z-index:4;display:flex;justify-content:center;pointer-events:none}
.ribbon{text-align:center;color:#fff;text-shadow:var(--outline)}
.chapter-kicker{display:block;font-size:8.5px;letter-spacing:2px;font-weight:600;text-shadow:var(--soft-outline)}
.ribbon h1{margin:0;font-size:15px;line-height:1.1;font-weight:600;text-shadow:var(--outline)}
.map-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;position:relative}
.map-scroll::-webkit-scrollbar{display:none}
.map-landscape{position:relative;height:1120px;width:100%;margin:90px 0 270px}
.map-landscape:after{content:"";position:absolute;left:0;right:0;top:100%;height:270px;background:var(--ground)}
.map-scenery,.map-path{position:absolute;inset:0;width:100%;height:100%}
.level-stop{position:absolute;translate:-50% -50%;width:52px;height:52px;z-index:2;display:grid;place-items:center}
.level-stop:has(.is-current){z-index:3}
.map-node{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;border-radius:0;background:var(--gem) center/contain no-repeat;color:#fff;font-size:18px;font-weight:600;line-height:1;text-shadow:var(--outline);filter:drop-shadow(0 4px 0 #2a0a4a50);transition:transform .12s}
.map-node:active:not(:disabled){transform:translateY(2px) scale(.96)}
.map-node:disabled{filter:grayscale(1) brightness(.92) contrast(.82) drop-shadow(0 3px 0 #2a0a4a40);opacity:.92}
.map-node:disabled>span{font-size:14px}
.map-node svg{display:none}
.map-node.is-current{width:66px;height:66px;font-size:23px;animation:node-bob 1.8s ease-in-out infinite;filter:drop-shadow(0 0 10px #fff5bf) drop-shadow(0 5px 0 #2a0a4a60)}
.map-node.is-current:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid #ffd34d;animation:node-halo 1.8s ease-out infinite;pointer-events:none}
.node-ice{position:absolute;right:-8px;top:-5px;width:15px;height:15px;background:url("assets/ice2.svg") center/contain no-repeat;rotate:12deg}
.node-callout{position:absolute;left:50%;top:-32px;translate:-50% 0;padding:2px 9px 3px;border:1.5px solid var(--ink);border-radius:9px;background:linear-gradient(#fff5bf,#ffcc35);font-size:10px;font-weight:600;letter-spacing:1px;text-shadow:var(--outline);white-space:nowrap;box-shadow:0 2px 0 var(--ink);pointer-events:none;animation:node-bob 1.8s ease-in-out infinite}
.node-callout:after{content:"";position:absolute;left:50%;bottom:-5px;translate:-50% 0;width:8px;height:8px;rotate:45deg;background:#ffcc35;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.node-stars{position:absolute;top:46px;left:50%;translate:-50% 0;display:flex;font-size:12px;white-space:nowrap;color:#ffffff80;text-shadow:var(--outline)}
.node-stars .lit{color:var(--gold)}
.node-stars span:nth-child(2){translate:0 3px;font-size:14px}
/* Rodapé do mapa: solto sobre a paisagem, sem barras nem caixas. */
.map-dock{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:7px;padding:44px 14px max(8px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent 0,#1a0a3eb8 48px,#160833f2 96px);pointer-events:none}
.map-dock>*{pointer-events:auto}
.chapter-nav{display:flex;align-items:center;justify-content:center;gap:8px;text-shadow:var(--outline)}
.chapter-arrow{width:36px;height:30px;padding:0;border:0;background:none;color:#fff;font-size:26px;line-height:1;font-weight:600;text-shadow:var(--outline)}
.chapter-arrow:disabled{opacity:.3}
.chapter-range{font-size:13px;font-weight:600;letter-spacing:.4px}
.chapter-stars{font-size:13px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.mastery-panel{display:contents}
.mastery-row{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:0 6px;border:0;background:none;color:#fff;font-size:12px;text-shadow:var(--outline);pointer-events:auto}
.mastery-row[hidden]{display:none}
.mastery-row .eyebrow{flex-shrink:0;color:var(--gold);font-size:10px;letter-spacing:1px;font-weight:600}
.mastery-row strong{min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mastery-arrow{color:var(--gold);font-size:14px}
.map-dock .jelly.big{min-width:0;width:min(100%,320px);min-height:54px;font-size:20px;padding:6px 10px}
.map-nav{display:flex;justify-content:space-between;width:100%;max-width:420px}
.nav-item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0 0;border:0;background:none;color:#fff;font-size:10.5px;font-weight:500;line-height:1.1;text-shadow:var(--soft-outline);transition:transform .12s}
.nav-item:active{transform:translateY(2px) scale(.95)}
.nav-item svg{width:32px;height:32px;filter:drop-shadow(0 2px 0 #12002a90)}
/* Anúncio só no mapa, debaixo do menu, com folga para o toque não cair no bloco. */
.map-ad{width:100%;max-width:420px;margin-top:6px;display:flex;flex-direction:column;gap:8px}
.map-ad-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.map-ad-label{margin:0;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-soft);text-shadow:var(--soft-outline)}
.map-ad-privacy,.legal-link{color:#fff;font-size:12px;font-weight:500;line-height:1.2;text-align:right;text-decoration:underline;text-underline-offset:2px;text-shadow:var(--soft-outline)}
.map-ad-privacy{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;padding:6px 0}
.map-ad-slot{height:64px;display:flex;align-items:center;border-radius:12px;border:1px solid #ffffff2e;background:#12002466;overflow:hidden}
.map-ad-slot .adsbygoogle{display:block;width:100%;height:50px;min-height:50px}
.legal-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;padding:0 12px;font-size:14px;text-align:center}
@media(max-height:640px){.map-ad-slot,.map-ad-slot .adsbygoogle{height:50px}}

/* ---------- partida ---------- */
.game-screen{position:relative;height:100%;display:flex;flex-direction:column;isolation:isolate;container-type:size;--chip:clamp(38px,min(12.4cqw,7.4cqh),54px);--gap:clamp(3px,1cqw,6px);gap:var(--gap);padding:max(6px,env(safe-area-inset-top)) clamp(4px,1.4cqw,8px) max(4px,env(safe-area-inset-bottom));background:#1a0a3e}
.game-scenery{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.game-screen:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#1a0a3eb8,#1a0a3e50 16%,#1a0a3e30 50%,#160833b0 84%,#160833f0)}
.game-header{position:relative;z-index:2;flex-shrink:0;display:flex;align-items:center;gap:var(--gap);height:calc(var(--chip) * 1.42)}
.hud-chip,.obj-chip,.moves-chip{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;background:none;text-shadow:var(--outline)}
.hud-score{min-width:calc(var(--chip) * 1.9);align-items:flex-start;padding:0 2px;gap:calc(var(--chip) * .03)}
.hud-level{display:flex;align-items:baseline;gap:4px;font-size:calc(var(--chip) * .24);letter-spacing:.8px;color:#fff;line-height:1;font-weight:600}
.hud-level h1{margin:0;font-size:calc(var(--chip) * .34);font-weight:600;color:var(--gold);line-height:1}
.score{font-size:calc(var(--chip) * .56);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;text-shadow:var(--outline)}
.score.bounce{animation:score-pop .3s ease-out}
.star-meter{display:flex;gap:1px}
.star{font-size:calc(var(--chip) * .24);line-height:1;color:#ffffff40}
.star.earned{color:var(--gold);text-shadow:0 1px 0 var(--gold-deep),0 0 6px #ffd34d80;animation:star-pop .45s cubic-bezier(.2,1.5,.5,1)}
.star-next{display:none}
.objective-row{flex:1;min-width:0;display:flex;align-items:stretch;justify-content:center;gap:var(--gap)}
.bump .obj-chip{animation:chip-bump .3s}
.obj-chip{flex:0 1 var(--chip);min-width:0;max-width:calc(var(--chip) * 1.02);height:calc(var(--chip) * 1.32);justify-content:center;padding:0;gap:0;border:1.5px solid #ffffff2e;border-radius:calc(var(--chip) * .26);background:#161229;box-shadow:inset 0 2px 6px #0006,0 2px 6px #12002a50}
.obj-chip .gem,.obj-chip .gem-ice,.obj-chip .gem-stone,.obj-chip .gem-chain{width:calc(var(--chip) * .74);height:calc(var(--chip) * .74);margin:0;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 2px 3px #12002a80)}
.gem-ice{background:url("assets/ice2.svg") center/contain no-repeat}
.obj-num{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1;margin-top:calc(var(--chip) * -.03)}
.obj-num b{font-size:calc(var(--chip) * .34);font-weight:600;font-variant-numeric:tabular-nums;text-shadow:var(--outline)}
.obj-num b.check{width:calc(var(--chip) * .34);height:calc(var(--chip) * .34);display:grid;place-items:center;border-radius:50%;background:linear-gradient(#b4ff86,#3fb81d);border:1.5px solid var(--ink);font-size:calc(var(--chip) * .2);text-shadow:var(--soft-outline)}
.obj-num small{display:none}
.obj-chip[data-done=true]{border-color:#7cf05aa0;background:#123021}
.obj-chip[data-done=true] .gem{opacity:.6}
.obj-chip.got{animation:chip-bump .28s}
.moves-chip{width:calc(var(--chip) * 1.12)}
.moves-chip b{font-size:calc(var(--chip) * .82);line-height:.95;font-weight:600;text-shadow:var(--outline);font-variant-numeric:tabular-nums}
.moves-chip span{font-size:calc(var(--chip) * .2);letter-spacing:.4px;text-shadow:var(--soft-outline)}
.moves-chip[data-low=true]{color:#ff8a96}
.moves-chip[data-low=true] b{animation:moves-low 1s ease-in-out infinite}
@keyframes moves-low{50%{transform:scale(1.14)}}
.moves-chip.tick b{animation:tick .25s}
.play-area{flex:1;min-height:0;display:flex}
.board-shell{position:relative;flex:1;min-height:0}
.board{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;touch-action:none;contain:layout paint style;--bw:13.5%;--bh:7.8%}
.tiles,.ice-layer{position:absolute;inset:0;pointer-events:none}
.tiles{z-index:0}.ice-layer{z-index:3}
/* As casas formam uma peça escura só, no desenho da fase: os buracos mostram a paisagem. */
.tile{position:absolute;width:var(--bw);height:var(--bh);border-radius:16%;background:#171230;box-shadow:0 0 0 3px #171230}
.tiles{filter:drop-shadow(0 4px 0 #0a041f70)}
.tile:after{content:"";position:absolute;inset:6%;border-radius:20%;background:#ffffff07}
.tile.alt:after{background:#ffffff10}
.ice{position:absolute;width:var(--bw);height:var(--bh);background:url("assets/ice1.svg") center/100% 100% no-repeat;transition:opacity .25s}
.ice[data-hp="2"]{background-image:url("assets/ice2.svg")}

/* joias: pedras lapidadas, cada cor com seu corte */
.ball{position:absolute;left:0;top:0;z-index:2;width:var(--bw);height:var(--bh);padding:0;border:0;border-radius:20%;background-color:transparent;background-size:86% 86%;background-position:center;background-repeat:no-repeat;will-change:translate;transform-origin:50% 50%;backface-visibility:hidden;user-select:none;-webkit-user-select:none;transition:filter .15s}
.ball:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.ball.selected{z-index:4;filter:brightness(1.18) drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--gold))}
.ball.selected:before{content:"";position:absolute;inset:2%;border-radius:22%;border:2px solid #fff;box-shadow:0 0 10px var(--gold);pointer-events:none}
.ball.can-swap{filter:brightness(1.1) drop-shadow(0 0 4px #bff4ff)}
.ball.hinted{animation:hint-wiggle 1.1s ease-in-out infinite}
.ball.nope{animation:nope .3s}
.ball.popping{z-index:3;pointer-events:none;animation:pop .26s ease-in forwards}
.ball.born{animation:born .6s cubic-bezier(.2,1.6,.4,1)}
.ball.twinkle:after{background:linear-gradient(115deg,transparent 30%,#ffffffb0 46%,#ffffff 50%,#ffffffb0 54%,transparent 70%) no-repeat;background-size:250% 100%;animation:twinkle .9s ease-out;mix-blend-mode:overlay}
.ball.wave:after{background:radial-gradient(circle,#7cf05ad0 30%,#45e07a90 70%);transition:background .4s}
.ball.wrapped{background-size:58% 58%,96% 96%}
.ball.striped-h:before,.ball.striped-v:before{content:"";position:absolute;inset:0;pointer-events:none;background:url("assets/ray.svg") center/100% 100% no-repeat;animation:ray-pulse 1.2s ease-in-out infinite}
.ball.striped-v:before{rotate:90deg}
.ball.prism{background-size:94% 94%;animation:diamond-glow 2s ease-in-out infinite}
.ball.prism:after{background:linear-gradient(115deg,transparent 35%,#ffffffd0 50%,transparent 65%) no-repeat;background-size:260% 100%;animation:twinkle 1.6s ease-in-out infinite;mix-blend-mode:overlay}
.hammer-mode .ball{cursor:crosshair}
.hammer-mode .ball:hover{filter:brightness(1.3) drop-shadow(0 0 8px #ffd45a)}

/* efeitos */
.toast{position:absolute;top:30%;left:0;right:0;z-index:8;padding:0 10px;text-align:center;pointer-events:none;font-size:clamp(24px,9cqw,38px);font-weight:600;line-height:1.05;letter-spacing:.5px;color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),0 5px 0 var(--ink),0 8px 18px #0007}
.toast.show{animation:toast-appear .9s cubic-bezier(.2,1.5,.45,1) forwards}
.toast:empty{display:none}
.toast[data-tone=special]{color:var(--gold)}
.toast[data-tone=mega]{color:#bff4ff;font-size:clamp(28px,11cqw,46px)}
.flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#ffffff70,transparent 65%)}
.flash.on{animation:flash .45s ease-out}
.flash.gold{background:radial-gradient(circle at 50% 50%,#ffe9a380,transparent 65%)}
.flash.mega{background:radial-gradient(circle at 50% 50%,#ffffffa0,#bff4ff40 45%,transparent 75%);animation:flash .7s ease-out}
.flash.soft{background:radial-gradient(circle at 50% 50%,#ffffff40,transparent 60%)}
.particle{position:absolute;z-index:6;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;box-shadow:0 0 6px currentColor,inset 0 0 0 1.5px #ffffffa0;pointer-events:none;animation:burst .65s ease-out forwards}
.pop-ring{position:absolute;z-index:5;width:var(--bw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 10px #fff;pointer-events:none;animation:ring .45s ease-out forwards}
.points-float{position:absolute;z-index:7;translate:-50% -50%;pointer-events:none;font-size:19px;font-weight:600;color:#fff;text-shadow:var(--outline);animation:points-rise .9s ease-out forwards}
.points-float.big{font-size:28px;color:var(--gold)}
.beam{position:absolute;z-index:6;pointer-events:none;border-radius:999px;background:linear-gradient(90deg,transparent,#fff,#bff4ff,#fff,transparent);box-shadow:0 0 20px #bff4ff,0 0 6px #fff}
.beam-h{left:0;width:100%;height:10px;margin-top:-5px;animation:beam-sweep .5s ease-out forwards}
.beam-v{top:0;height:100%;width:10px;margin-left:-5px;background:linear-gradient(180deg,transparent,#fff,#bff4ff,#fff,transparent);animation:beam-sweep-v .5s ease-out forwards}
.blast{position:absolute;z-index:6;width:calc(var(--bw) * 3);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,#ffe9a3cc 34%,#ffb84d55 55%,transparent 70%);animation:blast-burst .55s ease-out forwards}
.power-blast{width:calc(var(--bw) * 5.4)}
.prism-blast{width:calc(var(--bw) * 6);background:conic-gradient(#ff9ad299,#ffe68099,#9dffcf99,#8fd8ff99,#c9a6ff99,#ff9ad299);mask:radial-gradient(circle,#000 25%,transparent 70%)}
.super-line{position:absolute;z-index:6;pointer-events:none;opacity:0;animation:super-flash .5s ease-out}
.super-row{left:0;right:0;height:12px;margin-top:-6px;background:linear-gradient(90deg,transparent,#fff5bf,#fff,#fff5bf,transparent);box-shadow:0 0 18px var(--gold)}
.super-col{top:0;bottom:0;width:12px;margin-left:-6px;background:linear-gradient(180deg,transparent,#fff5bf,#fff,#fff5bf,transparent);box-shadow:0 0 18px var(--gold)}
.curtain{position:absolute;inset:0;z-index:9;pointer-events:none;transform:translateY(-104%);background:linear-gradient(180deg,#3b1287f5,#7a3be0e8 45%,#3b1287f5);transition:transform .32s cubic-bezier(.55,0,.35,1)}
.board.curtain-on .curtain{transform:translateY(0)}
.fly-layer{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.flyer{position:absolute;width:calc(var(--chip) * .5);height:calc(var(--chip) * .5);background-size:contain;background-repeat:no-repeat;background-position:center;will-change:transform}
.flyer.gem-ice{width:calc(var(--chip) * .38);height:calc(var(--chip) * .38)}

/* rodapé */
/* Rodapé solto, como no mapa: poderes direto sobre a paisagem, sem caixas. */
.game-dock{position:relative;z-index:2;flex-shrink:0}
.dock-row{display:flex;align-items:center;gap:0;height:calc(var(--chip) * 1.08)}
.dock-back{flex:0 0 calc(var(--chip) * .74);height:100%;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff}
.dock-back svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;filter:drop-shadow(0 2px 0 #12002a)}
.dock-powers{flex:1;min-width:0;display:flex;justify-content:space-between}
.booster{flex:1 1 0;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transition:transform .12s,filter .12s}
.booster:before{display:none}
.booster:active:not(:disabled){transform:translateY(2px) scale(.94);box-shadow:none}
.booster svg{width:calc(var(--chip) * .8);height:calc(var(--chip) * .8);filter:drop-shadow(0 2px 0 #12002a90)}
.booster[aria-pressed=true]{transform:translateY(-4px) scale(1.14);box-shadow:none;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 14px var(--gold))}
.booster[data-empty=true] .booster-count{background:linear-gradient(#b4ff86,#4fd12c);font-size:0}
.booster[data-empty=true] .booster-count:before{content:"+";font-size:13px}
.plus-art{font-size:calc(var(--chip) * .46);font-weight:600;color:#7fd8ff;text-shadow:var(--outline)}
.booster-count,.shake-count{position:absolute;left:calc(50% + var(--chip) * .17);top:calc(var(--chip) * .02);min-width:18px;height:18px;padding:0 3px;display:grid;place-items:center;border-radius:9px;border:1.5px solid var(--ink);background:linear-gradient(#fff5bf,#ffcc35);color:#fff;font-size:11px;font-weight:600;text-shadow:var(--soft-outline)}
.shake-art{position:relative;width:calc(var(--chip) * .8);height:calc(var(--chip) * .8)}
.shake-art img{position:absolute;width:62%;left:2%;bottom:4%;rotate:-16deg;filter:drop-shadow(0 1.5px 0 #0005)}
.shake-art img+img{left:34%;bottom:26%;rotate:14deg}
.shake-copy{display:none}
.shake-button[data-state=empty] .shake-art{opacity:.5}
.shake-button[data-state=bonus] .booster-count{background:linear-gradient(#ffadd8,#ff4aa8)}

/* ---------- diálogos da partida (cobrem a tela da partida inteira) ---------- */
.overlay{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;padding:max(16px,calc(env(safe-area-inset-top) + 10px)) 18px max(14px,env(safe-area-inset-bottom));overflow-y:auto;background:radial-gradient(circle at 50% 32%,#7a35e0b8,transparent 62%),#160833ea;backdrop-filter:blur(9px);animation:fade-in .2s;--glass:#ffffff14;--glass-line:transparent}
.overlay .popup{flex:1 0 auto;justify-content:center;animation:pop-in .36s cubic-bezier(.2,1.2,.45,1);gap:0}
.overlay .popup-ribbon{margin-bottom:clamp(2px,1cqh,8px)}
.overlay h2{margin:clamp(2px,.8cqh,8px) 0 clamp(2px,.8cqh,6px);font-size:clamp(32px,7cqh,58px);line-height:1;font-weight:600;text-shadow:var(--outline)}
.overlay p{margin:0 0 clamp(10px,2.4cqh,22px);max-width:320px;font-size:clamp(13px,2cqh,16px);line-height:1.35;font-weight:400;text-shadow:var(--soft-outline)}
.modal-art{position:relative;width:clamp(130px,26cqh,210px);height:clamp(60px,14cqh,120px);margin:2px 0}
.modal-art img{position:absolute;width:38%;left:4%;top:28%;rotate:-14deg;filter:drop-shadow(0 3px 2px #2a0a4a80)}
.modal-art img:nth-child(2){left:58%;top:24%;rotate:14deg}
.modal-art img:nth-child(3){width:48%;left:26%;top:0;rotate:-4deg}
.modal-stars{position:relative;display:none;align-items:flex-end;justify-content:center;gap:4px;margin:clamp(6px,1.8cqh,18px) 0 clamp(2px,1.4cqh,14px);height:min(clamp(76px,19cqh,160px),30cqw);isolation:isolate}
.modal-stars span{position:relative;height:78%;aspect-ratio:1;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z' fill='%23ffffff30' stroke='%232a0a4a' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.modal-stars span:nth-of-type(2){height:100%;margin-bottom:8%}
.modal-stars span.earned{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6c4'/%3E%3Cstop offset='.5' stop-color='%23ffd21f'/%3E%3Cstop offset='1' stop-color='%23e08a00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z' fill='url(%23g)' stroke='%232a0a4a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M38 30q8-4 14 0' stroke='%23fff' stroke-width='5' stroke-linecap='round' fill='none' opacity='.85'/%3E%3C/svg%3E");animation:star-burst .55s cubic-bezier(.2,1.6,.4,1) backwards;filter:drop-shadow(0 0 10px #ffe680)}
.modal-stars span:nth-of-type(2).earned{animation-delay:.3s}
.modal-stars span:nth-of-type(3).earned{animation-delay:.55s}
.sunburst{position:absolute;left:50%;top:55%;width:260px;height:260px;translate:-50% -50%;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(#fff5bf55 0 8deg,transparent 8deg 20deg);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:spin 14s linear infinite;z-index:-1}
.broken-heart{display:none;width:clamp(70px,17cqh,140px);margin:2px 0 clamp(4px,1.4cqh,14px);animation:heart-sad 2.4s ease-in-out infinite}
.broken-heart svg{width:100%;filter:drop-shadow(0 3px 0 #00000030)}
.popup-actions{display:flex;flex-direction:column;align-items:center;gap:clamp(7px,1.4cqh,12px);width:100%}
.popup-actions .jelly{width:100%;max-width:320px;min-height:clamp(44px,7cqh,60px);font-size:clamp(16px,2.6cqh,21px)}
.popup-actions .map-return{min-height:36px;width:auto;padding:4px 18px;border:0;background:none;box-shadow:none;font-size:clamp(14px,2cqh,16px);font-weight:500;text-shadow:var(--outline)}
.popup-actions .map-return:before{display:none}
.next-level{order:-1}
#continue-plus small{display:inline-flex;align-items:center;gap:3px;font-size:12px;margin-left:6px;font-weight:500}
#continue-plus .coin{width:14px;height:14px}
.result-details{display:flex;justify-content:center;gap:6px;width:100%;margin:0 0 clamp(8px,1.8cqh,14px)}
.result-details>div{flex:1;padding:0 2px}
.result-details small{display:block;font-size:clamp(10px,1.5cqh,12px);letter-spacing:1.4px;font-weight:600;color:#e6d8ff;text-shadow:var(--soft-outline)}
.result-details b{display:inline-flex;align-items:center;gap:3px;font-size:clamp(19px,3.6cqh,30px);font-weight:600;text-shadow:var(--outline);font-variant-numeric:tabular-nums}
.result-details b.done,.result-details span.done{animation:tick .3s}
.result-details .coins-won b{color:var(--gold-soft)}
.result-details .coin{width:16px;height:16px}
.lesson{display:grid;gap:5px;width:100%;margin:2px 0 10px;text-align:left}
.lesson>div{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:13px;border:1.5px solid var(--glass-line);background:var(--glass);font-size:13px;line-height:1.3;font-weight:400;text-shadow:var(--soft-outline)}
.lesson b{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);background:linear-gradient(#fff5bf,#ffcc35);font-size:12px;font-weight:600;text-shadow:var(--soft-outline)}
.pause-options{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:8px}
.option-buttons{display:flex;gap:8px;width:100%}
.option-buttons .jelly{flex:1;padding:5px 8px}
#audio-status{margin:0;font-size:12px}
#audio-status:empty{display:none}
.overlay[data-mode=win]{background:radial-gradient(circle at 50% 28%,#ffb82ed8,#d9561e90 34%,transparent 66%),#2a0d4cec}
.overlay[data-mode=win] .modal-stars{display:flex}
.overlay[data-mode=win] .modal-art,.overlay[data-mode=win] .map-return{display:none}
.overlay[data-mode=win] h2{animation:win-pop .5s .15s cubic-bezier(.2,1.4,.4,1) both}
.overlay[data-mode=lost]{background:radial-gradient(circle at 50% 30%,#5d7cc2b8,transparent 62%),#10163aee}
.overlay[data-mode=lost] .broken-heart{display:block}
.overlay[data-mode=lost] .modal-art,.overlay[data-mode=help] .modal-art,.overlay[data-mode=pause] .modal-art{display:none}
.overlay[data-mode=help] p{text-align:left;font-size:13px}
.confetti{position:absolute;top:-14px;z-index:31;width:8px;height:13px;border-radius:2px;opacity:0;pointer-events:none;animation:confetti-fall 2s linear forwards}

/* ---------- loja e recordes ---------- */
.shop-balance{margin:2px 0 10px;height:34px;font-size:17px}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.shop-item:last-child:nth-child(odd){grid-column:1/-1}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:16px;border:1.5px solid var(--glass-line);background:var(--glass);box-shadow:inset 0 1px 0 #ffffff50}
.shop-art{display:grid;place-items:center;width:52px;height:46px}
.shop-art svg{width:42px;height:42px;filter:drop-shadow(0 2px 0 #0004)}
.shop-art .plus-art{font-size:28px}
.shop-mix{position:relative;width:46px;height:40px}.shop-mix img{position:absolute;width:30px;left:0;bottom:0;rotate:-16deg;filter:drop-shadow(0 2px 1px #2a0a4a80)}.shop-mix img+img{left:16px;bottom:8px;rotate:16deg}
.shop-pack{position:relative;width:50px;height:40px}.shop-pack .coin{position:absolute;width:26px;height:26px}.shop-pack .coin:nth-child(1){left:0;bottom:0}.shop-pack .coin:nth-child(2){left:20px;bottom:2px}.shop-pack .coin:nth-child(3){left:10px;bottom:14px}
.shop-item strong{font-size:14px;font-weight:600;line-height:1.1;text-shadow:var(--outline)}
.shop-item small{font-size:10.5px;line-height:1.25;font-weight:400;text-shadow:var(--soft-outline);min-height:26px}
.owned{font-size:10px;padding:1px 7px;border-radius:7px;background:#0002}
.shop-item .buy{width:100%;margin-top:3px;gap:3px}
.shop-item .buy .coin{width:15px;height:15px}
.shop-note{margin:10px 0 0;font-size:11px;font-weight:400;text-shadow:var(--soft-outline)}
.records-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;flex-shrink:0;margin:0 0 clamp(10px,2.2cqh,20px)}
.records-summary b{display:block;font-size:clamp(18px,3.4cqh,27px);line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:var(--outline)}
.records-summary small{font-size:clamp(10px,1.5cqh,12px);color:#e6d8ff;text-shadow:var(--soft-outline)}
.records-list{scrollbar-width:none;flex:1 1 0;min-height:160px;list-style:none;margin:0;padding:0;width:100%;overflow:auto;display:block;overscroll-behavior:contain}
.record{display:flex;align-items:center;gap:8px;min-height:clamp(44px,6.6cqh,54px);padding:0 2px;border-bottom:1px solid #ffffff1c;font-weight:600;text-shadow:var(--soft-outline)}
.record.top strong,.record.top .record-name{color:var(--gold-soft)}
.record.empty{justify-content:center;border:0;font-weight:400;font-size:14px}
.rank{width:30px;flex-shrink:0;text-align:center;font-size:15px;color:#e6d8ff}
.crown{width:28px;height:22px;flex-shrink:0;--k1:#fff6b8;--k2:#ffd21f;--k3:#c77a00;background:linear-gradient(180deg,var(--k1),var(--k2) 55%,var(--k3));clip-path:polygon(0 30%,22% 60%,50% 0,78% 60%,100% 30%,90% 100%,10% 100%);filter:drop-shadow(0 1.5px 0 var(--ink))}
.crown-2{--k1:#ffffff;--k2:#cfd8e6;--k3:#7d8aa3}
.crown-3{--k1:#ffd9b0;--k2:#e08a4a;--k3:#8f4512}
.record-name{flex:1;text-align:left;font-size:clamp(14px,2.2cqh,16px)}
.record-stars{font-size:clamp(14px,2.2cqh,17px);color:var(--gold);letter-spacing:-1px}
.record-stars em{font-style:normal;color:#ffffff38}
.record strong{min-width:62px;text-align:right;font-size:clamp(14px,2.2cqh,17px);font-variant-numeric:tabular-nums}

/* ---------- animações ---------- */
@keyframes fade-in{from{opacity:0}}
@keyframes pop-in{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes pop{0%{scale:1}35%{scale:1.22;filter:brightness(1.7)}100%{scale:0;opacity:0}}
@keyframes born{0%{scale:0;filter:brightness(2.5)}60%{scale:1.25}100%{scale:1}}
@keyframes twinkle{from{background-position:120% 0}to{background-position:-60% 0}}
@keyframes setting-glow{50%{opacity:.4}}
@keyframes ray-pulse{50%{opacity:.6}}
@keyframes diamond-glow{0%,100%{filter:drop-shadow(0 0 5px #4db8ffc0)}50%{filter:drop-shadow(0 0 14px #6fd0ff) brightness(1.15)}}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes ring{from{scale:.4;opacity:1}to{scale:1.7;opacity:0}}
@keyframes points-rise{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:translateY(-56px)}}
@keyframes score-pop{50%{scale:1.12}}
@keyframes star-pop{0%{scale:.3;opacity:0}65%{scale:1.35}100%{scale:1;opacity:1}}
@keyframes star-burst{0%{transform:scale(0) rotate(-40deg);opacity:0}70%{transform:scale(1.3) rotate(8deg);opacity:1}100%{transform:none}}
@keyframes toast-appear{0%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1.1)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@keyframes beam-sweep{from{transform:scaleX(.05);opacity:0}30%{opacity:1}to{transform:scaleX(1);opacity:0}}
@keyframes beam-sweep-v{from{transform:scaleY(.05);opacity:0}30%{opacity:1}to{transform:scaleY(1);opacity:0}}
@keyframes blast-burst{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
@keyframes super-flash{0%{opacity:0;scale:.6}25%{opacity:1}100%{opacity:0;scale:1}}
@keyframes hint-wiggle{0%,60%,100%{rotate:0deg;scale:1}70%{rotate:-8deg;scale:1.08}80%{rotate:8deg}90%{rotate:-4deg}}
@keyframes nope{25%{rotate:-8deg}75%{rotate:8deg}}
@keyframes chip-bump{50%{transform:scale(1.12)}}
@keyframes tick{50%{transform:scale(1.22)}}
@keyframes low-pulse{50%{box-shadow:inset 0 1px 0 #ffffff50,0 0 16px #ff4256}}
@keyframes node-bob{50%{transform:translateY(-4px)}}
@keyframes node-halo{from{scale:.8;opacity:1}to{scale:1.25;opacity:0}}
@keyframes win-pop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:none}}
@keyframes heart-sad{50%{transform:translateY(3px) rotate(-3deg)}}
@keyframes spin{to{rotate:360deg}}
@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(95cqh) rotate(540deg)}}

/* ---------- ajustes por tamanho de tela ---------- */
@container (max-width:360px){
 .hud-score{min-width:calc(var(--chip) * 1.7)}
}
@container (max-height:620px){
 .overlay .modal-art{display:none}
}
@media(max-width:360px){.logo-text{font-size:16px}.pill{height:28px;font-size:13px}.map-brand img{width:22px;height:22px}}
@media(max-height:640px){.map-landscape{margin-top:80px}.mastery-row{min-height:30px}}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .ball{will-change:auto}
 .beam,.blast,.particle,.pop-ring,.confetti,.flash,.flyer{display:none}
}

/* ---------- obstáculos: pedra e corrente ---------- */
.stone{position:absolute;z-index:4;width:var(--bw);height:var(--bh);background:url("assets/wall1.svg") center/100% 100% no-repeat;transform:scale(.98)}
.stone[data-hp="2"]{background-image:url("assets/wall2.svg")}
.stone.rising{animation:wall-rise .4s cubic-bezier(.2,1.3,.5,1) backwards}
@keyframes wall-rise{from{clip-path:inset(100% 0 0 0);translate:0 45%}to{clip-path:inset(0);translate:0 0}}
.ball.chained{background-size:50% 50%;background-position:50% 46%}
.ball.chained:before{content:"";position:absolute;inset:0;pointer-events:none;background:url("assets/vault.svg") center/100% 100% no-repeat}
.vault-door{position:absolute;z-index:6;width:var(--bw);height:var(--bh);translate:-50% -50%;pointer-events:none;background:url("assets/vault.svg") center/100% 100% no-repeat;transform-origin:4% 50%;animation:vault-open .5s ease-in forwards}
@keyframes vault-open{0%{transform:perspective(220px) rotateY(0)}18%{transform:perspective(220px) rotateY(-14deg)}100%{transform:perspective(220px) rotateY(-105deg);opacity:0}}
.gem-stone{background:url("assets/wall2.svg") center/contain no-repeat}
.gem-chain{background:url("assets/vault-icon.svg") center/contain no-repeat}
.flyer.gem-stone,.flyer.gem-chain{width:calc(var(--chip) * .38);height:calc(var(--chip) * .38)}
.node-stone{background:url("assets/wall2.svg") center/contain no-repeat}
.node-chain{background:url("assets/vault-icon.svg") center/contain no-repeat}

/* ---------- animações de sensação ---------- */
.ball.squash{transform-origin:50% 92%;animation:squash .3s cubic-bezier(.3,1.6,.5,1)}
.ball.nudge{transform-origin:50% 100%;animation:nudge .26s ease-out}
.shard{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:0;box-shadow:none;animation:shard .7s cubic-bezier(.2,.8,.4,1) forwards}
.s0{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.s1{border-radius:50%}
.s2{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.s3{clip-path:polygon(50% 0,100% 100%,0 100%)}
.s4{width:8px;height:12px;border-radius:2px}
.s5{border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.srock{width:9px;height:8px;clip-path:polygon(20% 0,100% 15%,80% 100%,0 75%)}
.slink{width:10px;height:6px;border-radius:999px;background:transparent!important;border:2px solid #c4c8d2}
@keyframes squash{0%{scale:1.16 .8}45%{scale:.93 1.07}100%{scale:1 1}}
@keyframes nudge{40%{scale:1.05 .93}100%{scale:1 1}}
@keyframes shard{0%{transform:translate(0,0) rotate(0) scale(1.1);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 18px)) rotate(var(--rot)) scale(.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.stone,.ball.chained:before{animation:none}}

/* ---------- prêmios no mapa: diário, missões e baú ---------- */
.perk-badge{position:absolute;left:calc(50% + 8px);top:-3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);background:#ff4256;font-size:11px;font-style:normal;font-weight:600;color:#fff;animation:badge-pulse 1.2s ease-in-out infinite}
#open-chest[data-ready=true]{animation:chest-wiggle 1.8s ease-in-out infinite}
.sheet-lead{margin:0 0 clamp(10px,2.4cqh,20px);max-width:340px;font-size:clamp(13px,2cqh,16px);font-weight:400;line-height:1.35;text-shadow:var(--soft-outline)}
.daily-grid{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(84px,clamp(84px,19cqh,150px));align-content:center;gap:clamp(6px,1.2cqh,10px);width:100%;margin-bottom:clamp(10px,2cqh,18px)}
.daily-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border-radius:16px;background:var(--glass);font-size:clamp(16px,2.8cqh,22px);text-shadow:var(--outline)}
.daily-day span{font-size:clamp(10px,1.5cqh,12px);letter-spacing:1px;text-transform:uppercase;color:#e6d8ff;text-shadow:var(--soft-outline)}
.daily-day small{font-size:clamp(10px,1.45cqh,12px);line-height:1.1;font-weight:400;text-shadow:var(--soft-outline)}
.daily-day .coin{width:clamp(22px,4cqh,34px);height:clamp(22px,4cqh,34px)}
.daily-day.big{grid-column:1/-1;background:linear-gradient(90deg,#8fd8ff30,#ffffff30,#8fd8ff30)}
.daily-day.now{box-shadow:0 0 0 2.5px var(--gold),0 0 16px #ffd34d90;animation:node-bob 1.6s ease-in-out infinite}
.daily-day.got{opacity:.55}
.daily-day em{position:absolute;right:4px;top:2px;font-style:normal;color:#b4ff86;font-size:13px}
.daily-gem{width:clamp(38px,8cqh,64px);height:clamp(38px,8cqh,64px);background:url("assets/diamond.svg") center/contain no-repeat}
.mission-list{flex:1 1 auto;list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,3.4cqh,30px)}
.mission{display:flex;align-items:center;gap:12px;text-align:left}
.mission.claimed{opacity:.6}
.mission-icon,.mission-icon.gem-stone{flex-shrink:0;width:clamp(40px,7cqh,56px);height:clamp(40px,7cqh,56px);margin:0;background-size:contain;background-position:center;background-repeat:no-repeat}
.mission-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mission-body strong{font-size:clamp(14px,2.3cqh,17px);font-weight:600;line-height:1.15;text-shadow:var(--soft-outline)}
.mission-body small{font-size:clamp(11px,1.7cqh,13px);font-variant-numeric:tabular-nums}
.mission-bar{height:clamp(8px,1.3cqh,11px);border-radius:999px;background:#ffffff1c;overflow:hidden}
.mission-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b4ff86,#4fd12c)}
.mission .jelly{flex-shrink:0;min-width:58px;gap:3px}
.mission .jelly .coin{width:13px;height:13px}
.mission-done{width:58px;text-align:center;color:#b4ff86;font-size:20px}
.reward-art{position:relative;display:grid;place-items:center;width:100%;flex:1 1 auto;min-height:130px;isolation:isolate}
.reward-art .sunburst{width:min(92cqw,48cqh);height:min(92cqw,48cqh);top:50%}
.reward-icon{width:min(50cqw,24cqh);height:min(42cqw,20cqh);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 66'%3E%3Cpath d='M6 28h68v32a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4Z' fill='%23d9822b'/%3E%3Cpath d='M6 28V20A16 16 0 0 1 22 4h36a16 16 0 0 1 16 16v8Z' fill='%23f0a640'/%3E%3Cpath d='M6 28h68v6H6Z' fill='%23ffd34d'/%3E%3Crect x='33' y='24' width='14' height='16' rx='3' fill='%23ffd34d'/%3E%3C/svg%3E") center/contain no-repeat;animation:chest-wiggle 1.2s ease-in-out infinite}
.reward-icon.open{animation:chest-pop .6s cubic-bezier(.2,1.6,.4,1)}
.reward-list{list-style:none;margin:0 0 clamp(12px,2.4cqh,22px);padding:0;display:grid;gap:clamp(4px,1cqh,10px);width:100%}
.reward-list li{display:flex;align-items:center;justify-content:center;gap:6px;padding:0;background:none;font-size:clamp(16px,2.6cqh,20px);font-weight:500;text-shadow:var(--soft-outline);animation:pop-in .4s cubic-bezier(.2,1.4,.45,1) backwards}
.reward-list li:nth-child(2){animation-delay:.12s}.reward-list li:nth-child(3){animation-delay:.24s}
.reward-list b{font-size:clamp(22px,4cqh,32px);color:var(--gold-soft);text-shadow:var(--outline)}
.reward-list .reward-note{font-size:13px;font-weight:400}

/* ---------- mapa vivo e fase-chefe ---------- */
.map-pin{position:absolute;z-index:4;width:22px;height:22px;margin:-12px 0 0 34px;background:linear-gradient(#fff6b8,#ffcc35 60%,#d98a10);clip-path:polygon(50% 0,63% 35%,100% 38%,71% 60%,81% 96%,50% 76%,19% 96%,29% 60%,0 38%,37% 35%);filter:drop-shadow(0 3px 2px #2a0a4a80);transition:left .9s cubic-bezier(.5,0,.3,1),top .9s cubic-bezier(.5,0,.3,1);animation:node-bob 1.4s ease-in-out infinite;pointer-events:none}
.map-node.unlocking{animation:unlock .9s .9s cubic-bezier(.2,1.6,.4,1) backwards}
.map-node.unlocking:before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,#fff5bf 0 30%,transparent 65%);opacity:0;animation:unlock-glow 1s .9s ease-out;pointer-events:none}
.map-node.is-boss{width:62px;height:62px}
.map-node.is-boss.is-current{width:72px;height:72px}
.node-crown{position:absolute;left:50%;top:-15px;translate:-50% 0;width:24px;height:16px;background:linear-gradient(180deg,#fff6b8,#ffd21f 55%,#c77a00);clip-path:polygon(0 30%,22% 60%,50% 0,78% 60%,100% 30%,90% 100%,10% 100%);filter:drop-shadow(0 1.5px 0 var(--ink))}

/* ---------- partida: tutorial e efeitos ---------- */
.coach{position:absolute;z-index:12;width:0;height:0}
.coach-ring{position:absolute;left:0;top:0;width:calc(var(--bw) * 1.5);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 4px #ffd34d80,0 0 18px #fff;animation:coach-ring 1.2s ease-in-out infinite}
.coach-bubble{position:absolute;left:0;bottom:calc(var(--bw) * .95);translate:-50% 0;width:190px;padding:8px 11px;border-radius:14px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-size:13px;font-weight:600;line-height:1.25;text-align:center;box-shadow:0 4px 0 var(--ink),0 10px 20px #0006;animation:pop-in .35s cubic-bezier(.2,1.4,.45,1)}
.coach.below .coach-bubble{bottom:auto;top:calc(var(--bw) * .95)}
.coach.left .coach-bubble{translate:-14% 0}.coach.left .coach-bubble:after{left:14%}
.coach.right .coach-bubble{translate:-86% 0}.coach.right .coach-bubble:after{left:86%}
.coach-bubble:after{content:"";position:absolute;left:50%;bottom:-7px;translate:-50% 0;width:10px;height:10px;rotate:45deg;background:#fff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.coach.below .coach-bubble:after{bottom:auto;top:-7px;border:0;border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.zap{position:absolute;z-index:6;height:3px;margin-top:-1.5px;transform-origin:0 50%;border-radius:999px;background:linear-gradient(90deg,#fff,#bff4ff 60%,#ffd6f4);box-shadow:0 0 8px #bff4ff,0 0 3px #fff;pointer-events:none;animation:zap .5s ease-out both}
.star-flyer{width:22px;height:22px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 8 8 3-8 3-3 8-3-8-8-3 8-3Z' fill='%23fff5bf'/%3E%3C/svg%3E");filter:drop-shadow(0 0 6px #ffd34d)}
.blast:not(.prism-blast)::after{content:"";position:absolute;inset:-10%;border-radius:50%;border:3px solid #fff5bf;animation:shock .55s ease-out forwards}
.beam-h::after,.beam-v::after{content:"";position:absolute;inset:-6px;border-radius:inherit;background:inherit;filter:blur(6px);opacity:.7}
@keyframes badge-pulse{50%{scale:1.15}}
@keyframes chest-wiggle{0%,70%,100%{rotate:0deg}78%{rotate:-8deg}86%{rotate:8deg}94%{rotate:-4deg}}
@keyframes chest-pop{0%{scale:.4}60%{scale:1.25}100%{scale:1}}
@keyframes unlock{0%{scale:.3;filter:brightness(2)}60%{scale:1.25}100%{scale:1}}
@keyframes unlock-glow{0%{opacity:0;scale:.5}30%{opacity:1}100%{opacity:0;scale:1.6}}
@keyframes coach-ring{50%{scale:1.12}}
@keyframes zap{0%{scale:0 1;opacity:1}45%{scale:1 1;opacity:1}100%{scale:1 .2;opacity:0}}
@keyframes shock{from{scale:.3;opacity:1}to{scale:1.5;opacity:0}}
@media(prefers-reduced-motion:reduce){.zap,.coach-ring,.map-pin{animation:none}.map-pin{transition:none}}

.reward-card .popup-ribbon{margin-bottom:0}
.sheet .modal-art{flex:1 1 auto;width:min(70cqw,300px);height:auto;min-height:110px}
.sheet .modal-art img{top:auto;bottom:24%}
.sheet .modal-art img:nth-child(3){bottom:34%}
.broken-heart svg{overflow:visible}

/* Página pública de privacidade: rola, fora do quadro fixo do jogo. */
body.legal{height:auto;min-height:100%;overflow:auto}
body.legal main{display:block;height:auto;min-height:100%;max-width:40rem;overflow:visible;margin:0 auto;padding:32px 22px 64px;border:0;border-radius:0;box-shadow:none}
body.legal h1{margin:8px 0 4px;font-size:clamp(28px,8vw,40px);line-height:1.05;text-shadow:var(--outline)}
body.legal h2{margin:26px 0 8px;font-size:20px;line-height:1.2;text-shadow:var(--outline)}
body.legal p{margin:0 0 12px;max-width:38rem;font-size:16px;font-weight:450;line-height:1.5;hyphens:manual}
body.legal a{color:var(--gold-soft)}
body.legal code{font-size:.92em}
.legal-brand{margin:0;font-size:28px;font-weight:600;letter-spacing:-.4px;line-height:1;text-shadow:var(--outline)}
.legal-brand span{color:var(--gold);font-weight:700}
.legal-meta{color:var(--gold-soft);font-size:13px;font-weight:600}
.legal-back{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:600;text-underline-offset:3px}
body.legal section{margin-top:28px;padding-top:12px;border-top:1px solid #ffffff2e}