@font-face{font-family:Fredoka;src:url(fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/Nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{--rosa:#E81D72;--verde:#248B46;--amarelo:#F7B825;--azul:#0887CE;--creme:#FFF9F1;--texto:#33233F;
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--flip:420ms}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--creme);color:var(--texto);font-family:Nunito,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:manipulation}
body{background:radial-gradient(circle at 12% 8%,#ffe3ef 0,transparent 34%),radial-gradient(circle at 92% 88%,#dff1fb 0,transparent 38%),radial-gradient(circle at 85% 12%,#fff0c8 0,transparent 26%),var(--creme)}
#app{position:fixed;inset:0;padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);display:flex;flex-direction:column;gap:8px}
#top{flex:0 0 auto;height:60px;display:flex;align-items:center;gap:10px;padding:0 8px;background:#fff;border-radius:30px;box-shadow:0 6px 18px rgba(51,35,63,.10),0 1px 0 rgba(51,35,63,.04)}
#titulo{flex:1;min-width:0;font-family:Fredoka;font-weight:600;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rosa)}
#hud{display:flex;align-items:center;gap:8px;font-family:Fredoka;font-weight:600;font-size:20px}
#hudTent{display:flex;align-items:center;gap:4px;background:var(--creme);border-radius:20px;padding:4px 12px 4px 8px}
#hudTent:empty{display:none}
.btn-round{width:46px;height:46px;flex:0 0 46px;border:0;border-radius:50%;background:linear-gradient(180deg,#fff 0,#f3ecff 100%);color:var(--texto);box-shadow:0 4px 0 #e5dcef,0 6px 14px rgba(51,35,63,.12);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.btn-round svg{width:26px;height:26px}.btn-round:active{transform:translateY(3px);box-shadow:0 1px 0 #e5dcef}
.btn-round.hide{visibility:hidden}
#stage{flex:1;min-height:0;position:relative}
.scene{position:absolute;inset:0}.hidden{display:none!important}
.stars{display:inline-flex;gap:2px}
.star{width:22px;height:22px;display:inline-block}
.star svg{width:100%;height:100%;display:block}
/* ---------- mapa ---------- */
#mapa{overflow-y:auto;overflow-x:hidden;padding:6px 4px 20px;scrollbar-width:none}
#mapa::-webkit-scrollbar{display:none}
.mundo{margin:4px auto 18px;max-width:760px;background:rgba(255,255,255,.75);border-radius:28px;padding:12px 12px 16px;box-shadow:0 8px 22px rgba(51,35,63,.08)}
.mundo-h{display:flex;align-items:center;gap:10px;margin:0 4px 10px;font-family:Fredoka;font-weight:600;font-size:19px}
.mundo-ico{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.mundo-ico svg{width:24px;height:24px}
.fases{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px}
.no{position:relative;aspect-ratio:1;border:0;border-radius:26px;cursor:pointer;font-family:Fredoka;font-weight:700;font-size:28px;color:#fff;background:var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.14),inset 0 4px 0 rgba(255,255,255,.35),0 6px 12px rgba(51,35,63,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.no:active{transform:scale(.94)}
.no .stars{gap:0}.no .star{width:16px;height:16px}
.no.boss::after{content:"";position:absolute;top:-8px;right:-6px;width:28px;height:28px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18l-1.5-10-4.5 4-3-7-3 7-4.5-4z" fill="%23F7B825" stroke="%23fff" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center/contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.no.locked{background:#e4dbe8;color:#b7a9bf;box-shadow:inset 0 -6px 0 rgba(0,0,0,.06)}
.no.atual{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* ---------- grade ---------- */
#fase{display:grid;place-items:center}
#grid{display:grid;gap:var(--gap);perspective:1100px}
.carta{top:0;width:var(--cw);height:var(--ch);position:relative;border:0;padding:0;background:none;cursor:pointer;animation:flutua 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes flutua{0%,100%{top:0}50%{top:-4px}}
.carta.vazio{visibility:hidden;animation:none}
.inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--flip) cubic-bezier(.45,.05,.25,1.25);border-radius:var(--r)}
.carta.aberta .inner,.carta.par .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.verso{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.45) 0,transparent 42%),linear-gradient(150deg,#ff5fa2 0,var(--rosa) 55%,#c3105d 100%);box-shadow:inset 0 -7px 0 rgba(0,0,0,.14),inset 0 4px 0 rgba(255,255,255,.35),0 10px 18px rgba(232,29,114,.22),0 2px 4px rgba(51,35,63,.12)}
.verso::before{content:"";position:absolute;inset:7%;border-radius:calc(var(--r)*.75);background:rgba(255,255,255,.12)}
.verso{display:grid;place-items:center}.verso .emblema{width:62%;height:62%;object-fit:contain;position:relative;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));pointer-events:none}
.frente{transform:rotateY(180deg);background:linear-gradient(180deg,#fff 0,#fff7ec 100%);border:4px solid var(--borda);box-shadow:inset 0 -7px 0 rgba(51,35,63,.07),0 10px 18px rgba(51,35,63,.14),0 2px 4px rgba(51,35,63,.1);display:grid;place-items:center}
.frente img,.frente svg{width:86%;height:86%;object-fit:contain;pointer-events:none}
.carta.par{animation:none}
.carta.par .inner{animation:pulo .7s cubic-bezier(.3,1.6,.5,1)}
.carta.par .frente{box-shadow:0 0 0 4px var(--amarelo),0 0 26px 6px rgba(247,184,37,.55),0 10px 18px rgba(51,35,63,.14)}
.carta.par .frente::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);background-size:250% 100%;animation:brilho 1s ease-out forwards}
@keyframes pulo{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) translateY(-14px) scale(1.08)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes brilho{from{background-position:120% 0}to{background-position:-60% 0}}
.carta.erro .inner{animation:balanca .45s ease-in-out}
@keyframes balanca{0%,100%{transform:rotateY(180deg) rotate(0)}30%{transform:rotateY(180deg) rotate(-4deg)}70%{transform:rotateY(180deg) rotate(4deg)}}
.carta.pisca .verso{animation:piscaV 1s ease-in-out 2}
@keyframes piscaV{50%{filter:brightness(1.25) saturate(1.2);box-shadow:0 0 0 4px #fff,0 0 22px rgba(247,184,37,.9)}}
.carta.trocando{z-index:5;transition:translate 1.2s cubic-bezier(.45,0,.25,1);filter:drop-shadow(0 0 12px rgba(247,184,37,.9))}
.maozinha{position:absolute;width:56px;height:56px;pointer-events:none;z-index:9;animation:mao 1.2s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
@keyframes mao{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-8px)}}
/* ---------- fim ---------- */
#fim{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(51,35,63,.28);backdrop-filter:blur(3px);animation:fade .35s ease}
@keyframes fade{from{opacity:0}}
.fim-card{position:relative;z-index:2;width:min(92vw,420px);background:var(--creme);border-radius:36px;padding:22px 22px 24px;text-align:center;box-shadow:0 20px 50px rgba(51,35,63,.3),inset 0 -6px 0 rgba(51,35,63,.06);animation:sobe .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes sobe{from{transform:translateY(40px) scale(.85);opacity:0}}
.fim-leleco{width:140px;height:140px;margin:-80px auto 0;animation:festa 1.2s ease-in-out infinite}
.fim-leleco svg{width:100%;height:100%;filter:drop-shadow(0 8px 8px rgba(51,35,63,.2))}
@keyframes festa{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.fim-stars{display:flex;justify-content:center;gap:10px;margin:8px 0 18px}
.fim-stars .star{width:64px;height:64px;opacity:0;animation:estrela .6s cubic-bezier(.3,1.7,.5,1) forwards}
.fim-stars .star{animation-delay:.75s}.fim-stars .star:nth-child(2){animation-delay:1s;transform:translateY(-10px)}.fim-stars .star:nth-child(3){animation-delay:1.25s}
@keyframes estrela{from{opacity:0;scale:.2;rotate:-40deg}to{opacity:1;scale:1;rotate:0deg}}
.fim-btns{display:flex;justify-content:center;gap:14px}
.btn-big{width:76px;height:76px;border:0;border-radius:26px;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 -6px 0 rgba(0,0,0,.16),inset 0 4px 0 rgba(255,255,255,.3),0 8px 16px rgba(51,35,63,.18);transition:transform .15s}
.btn-big:active{transform:scale(.93)}.btn-big svg{width:38px;height:38px}
.btn-big.azul{background:var(--azul)}.btn-big.amarelo{background:var(--amarelo)}.btn-big.verde{background:var(--verde)}
#confete{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cf{position:absolute;top:-20px;width:12px;height:16px;border-radius:4px;animation:cai linear forwards}
@keyframes cai{to{transform:translate(var(--x),110vh) rotate(720deg)}}
@media (max-height:500px){#top{height:50px}.btn-round{width:40px;height:40px;flex-basis:40px}#titulo{font-size:18px}}
@media (prefers-reduced-motion:reduce){.carta{animation:none}:root{--flip:200ms}}
@media (max-width:430px){#titulo{font-size:18px}#hud{font-size:17px;gap:4px}.star{width:18px;height:18px}}
.frente img{width:90%;height:90%}
/* modo print (somente para capturas estáticas) */
body.print #fim,body.print .fim-card{animation:none}
body.print .fim-stars .star{animation:none;opacity:1}

#titulo{display:flex;align-items:center;gap:8px;overflow:visible}
#titulo .mundo-ico{width:40px;height:40px;flex:0 0 40px;border-radius:14px}
#titulo .num{font-size:32px;font-weight:700;line-height:1;color:var(--texto)}
#titulo .coroa{width:26px;height:26px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18l-1.5-10-4.5 4-3-7-3 7-4.5-4z" fill="%23F7B825" stroke="%23e19c00" stroke-width="1.5" stroke-linejoin="round"/></svg>') no-repeat center/contain}
#titulo .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tNome{display:flex;align-items:center;gap:8px;min-width:0}
.carta.trocando{animation-play-state:paused}
#titulo .num,#titulo .mundo-ico,#titulo .coroa{flex-shrink:0}
#top{gap:6px}
@media (max-width:400px){.btn-round{width:40px;height:40px;flex-basis:40px}.btn-round svg{width:22px;height:22px}#titulo .mundo-ico{width:34px;height:34px;flex-basis:34px}#titulo .num{font-size:28px}#titulo .coroa{display:none}#hudTent{padding:3px 8px 3px 6px}.star{width:16px;height:16px}}