/* ---------- polimento de interface (rodada UI) ---------- */
/* Modais e camadas de celebração cobrem a tela inteira, não só a coluna do jogo */
#modal, #ad, #end-layer { position: fixed; }
#modal { background: rgba(24, 63, 72, .28); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); }
/* Coluna do jogo mais larga em tablets e janelas em pé */
@media (min-width: 560px) and (max-aspect-ratio: 4/3), (min-width: 560px) and (max-width: 899px) {
  #app { max-width: 620px; }
}
/* Carrossel de pistas some suavemente nas bordas em vez de ser cortado */
@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #clues { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
}


/* ---------- rodada UI 1: tokens e correções do crítico ---------- */
:root {
  --ink: #103f4b; --ink-2: #3f6468; --ink-3: #7d9693;
  --surface: #fffdf5; --surface-2: #f1f6ee; --surface-3: #e7f0e9; --line: #e2eadf; --edge: #d5dfd4;
  --teal: #2a9d99; --teal-depth: #1f7d7a; --teal-soft: #d4eae3;
  --coral: #e98b6e; --coral-depth: #cf735b; --sun: #f2c46b; --sun-depth: #d6a54a;
  --veil: rgba(255,250,240,.32); --spot: rgba(16,63,75,.14);
  --r-chip: 10px; --r-tile: 14px; --r-btn: 20px; --r-card: 28px; --r-pill: 999px;
  --e-1: 0 2px 0 var(--edge), 0 3px 8px #254e480d; --e-2: 0 3px 0 var(--edge), 0 10px 24px #254e4812; --e-3: 0 4px 0 var(--edge), 0 24px 60px #183f4824;
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
/* véus claros */
#modal { background: var(--veil); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
.spot { box-shadow: 0 0 0 9999px var(--spot), 0 0 0 6px #fffdf5, 0 0 0 10px #2a9d9966 !important; }
.hints { background: none !important; }
#boss-tint { display: none; }
/* fim de nível: pistas somem com fade, sem lasca nem painel cortado */
#game.ending #clues { transform: none !important; opacity: 0 !important; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s .3s !important; }
/* carrossel sem cortar cantos e sombra (fora do desktop) */
@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #clues { height: auto !important; padding: 6px 0 16px !important; overflow-x: clip; overflow-y: visible; }
}
/* cards e modais */
#modal .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e-3); animation: cardInCalm .32s var(--ease-out); }
@keyframes cardInCalm { from { transform: scale(.96) translateY(12px); opacity: 0; } }
.card-title { background: var(--surface-2); color: var(--ink); box-shadow: 0 3px 0 var(--edge); }
.card-x { right: 12px !important; top: 12px !important; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--ink); box-shadow: none; font-size: 20px; }
.card p { color: var(--ink-2); }
/* botões */
.btn-soft, #m-stats, .btn-blue { background: var(--surface-3); color: var(--teal-depth); box-shadow: 0 3px 0 #cfdcd2; text-shadow: none; }
.btn-link { color: var(--ink-2); text-underline-offset: 4px; }
.icon-btn { background: var(--surface); box-shadow: var(--e-1); }
.icon-btn svg { fill: var(--ink); }
.level-pill { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }
.level-pill.boss { background: linear-gradient(#fff6dc, #ffeab0); color: #7a5410; box-shadow: 0 2px 0 var(--sun-depth), 0 0 0 3px #f2c46b88; animation: none; }
.crown { fill: #e0a83a; filter: none; }
#toast.top { background: var(--surface); color: #7a5410; box-shadow: 0 0 0 3px var(--sun), var(--e-2); }
/* pistas e fichas */
.clue { background: var(--surface); box-shadow: var(--e-1); }
.clue:not(.current) { background: var(--surface-2); }
.clue:not(.current) .clue-text { color: var(--ink-3); }
.clue.current { box-shadow: 0 0 0 3px var(--teal), var(--e-2) !important; }
.clue-text { color: var(--ink); }
.clue-ans:not(.solved) span { background: var(--surface-3); border: 2px solid var(--edge); color: var(--ink); }
#tip .tip-text { color: var(--ink); box-shadow: 0 0 0 3px var(--teal-soft), var(--e-2); }
/* ajustes, idiomas, toggles */
.toggle { background: #d9e3dc; } .toggle.on { background: var(--teal); }
.langs button { background: var(--surface-3); color: var(--ink); box-shadow: 0 3px 0 #cfdcd2; }
.langs button.on { background: var(--teal); color: #fff; box-shadow: 0 3px 0 var(--teal-depth); }
.row-ico { background: var(--surface-3); fill: var(--teal-depth); }
.stats div, #m-code { background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); border-color: var(--edge); }
/* prêmio diário, loja */
.day { background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); }
.day.now { background: var(--surface); box-shadow: 0 3px 0 var(--edge), 0 0 0 3px var(--coral); }
.shop-item { background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); }
.shop-item em { background: var(--coral); box-shadow: none; border-radius: var(--r-pill); }
/* trilha, contador, mapa */
.trail .bed, .nc-bed, .map-bed { stroke: #dfeae3; }
.trail .count, .nc-count { background: var(--teal); box-shadow: 0 3px 0 var(--teal-depth); }
.trail .marks circle, .nc-marks circle { fill: #d5e3da; }
.trail .marks circle.now { fill: var(--coral); }
.map-node circle { fill: #d5e3da; } .map-node.done circle { fill: var(--teal); } .map-node.cur circle { fill: var(--coral); }
.map-node .lock { stroke: var(--ink-3); } .map-node.lock .map-name, .map-node.lock .map-sub { fill: var(--ink-3); }
.map-node .map-name { fill: var(--ink); } .map-node .here rect { fill: var(--coral); }
.map-scroll { padding-top: 56px !important; }
/* pular e lontra */
#skip { background: var(--surface); color: var(--ink); box-shadow: var(--e-2); }
.otter .q { fill: var(--teal); }
/* movimento calmo: molas só em recompensas */
#clue-track { transition-timing-function: var(--ease-out) !important; }
/* desktop: tabbar flutuante */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #home .tabbar { border-radius: 24px !important; margin-bottom: 20px !important; box-shadow: var(--e-3); }
}


/* fundo: desfoque leve no centro (esconde a baixa resolução do vídeo) e nuvens nos cantos, atrás da interface */
.bg-soften { position: fixed; inset: 0; z-index: 0; pointer-events: none; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 35%, transparent 100%); }
.sky-clouds { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky-clouds .cl { position: absolute; top: -7%; width: clamp(240px, 40vw, 680px); opacity: .95; animation: cloud-drift 26s ease-in-out infinite alternate; will-change: transform; }
.sky-clouds .cl-l { left: -12%; }
.sky-clouds .cl-r { right: -12%; top: -3%; width: clamp(200px, 32vw, 560px); animation-duration: 33s; animation-delay: -9s; animation-name: cloud-drift-r; }
@keyframes cloud-drift { from { transform: translate(-2%, 0); } to { transform: translate(4%, 1.5%); } }
@keyframes cloud-drift-r { from { transform: scaleX(-1) translate(-2%, 0); } to { transform: scaleX(-1) translate(5%, 2%); } }
body[data-time="night"] .sky-clouds { filter: brightness(.45) saturate(.6); }
body[data-time="sunset"] .sky-clouds { filter: sepia(.2) saturate(1.1); }
.reduce-motion .sky-clouds .cl { animation: none; }
#btn-settings svg { width: 24px; height: 24px; }
@media (max-aspect-ratio: 3/4) {
  .sky-clouds .cl-l { width: 78vw; left: -26%; top: -5%; }
  .sky-clouds .cl-r { width: 62vw; right: -24%; top: -2%; }
}
/* mãozinha do tutorial (ilustrada) */
#hand { width: 50px; height: 58px; margin: -3px 0 0 -18.75px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 56%22%3E%3Cpath d=%22M14 30V7a4 4 0 0 1 8 0v15a4 4 0 0 1 8 0v2a4 4 0 0 1 8 0v2a4 4 0 0 1 7 0v10c0 9-6 15-14 15h-4c-5 0-8.5-2-11.3-6L9 35c-1.6-2.3-.6-5 2-5.5 1.8-.4 3.1.5 4 1.6Z%22 fill=%22%23fff%22 stroke=%22%2314262b%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M22 22v6M30 24v5M38 26v4%22 fill=%22none%22 stroke=%22%2314262b%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); filter: drop-shadow(0 3px 4px #14262b40); }

/* ---------- rodada UI 2: correções do crítico (u1) ---------- */
/* celebrações na paleta (coral no lugar do laranja) */
#praise, .pack-banner { background: linear-gradient(#f2a189, var(--coral)); border-radius: 10px; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #b8604a;
  box-shadow: 0 4px 0 var(--coral-depth), 0 14px 30px #b8604a33; }
#praise::before, #praise::after, .pack-banner::before, .pack-banner::after { background: var(--coral-depth); }
#combo b { color: var(--coral); -webkit-text-stroke: 4px var(--surface); }
#combo i span { background: linear-gradient(90deg, var(--sun), var(--coral)); }
#combo.low i span { background: linear-gradient(90deg, var(--coral), var(--coral-depth)); }
/* pistas: texto legível, título com respiro, sem viúvas */
.clue:not(.current) .clue-text { color: var(--ink-2); }
.clue-text { text-wrap: balance; }
/* tutorial e avisos */
#tip .tip-text { max-width: 520px; margin: 0 auto; }
/* loja e prêmio diário */
.shop-item em { transform: none; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; }
.shop-item.best { box-shadow: 0 0 0 3px var(--coral), 0 3px 0 var(--edge); }
.stars { margin: 16px 0 4px; }
.langs { gap: 10px; }
.langs button { padding: 12px 6px; }
.coins b { font-variant-numeric: tabular-nums; }
@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #clues { margin-top: 12px !important; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .day { padding: 10px 4px 12px; gap: 6px; }
  .day small { line-height: 1.1; margin-bottom: 2px; }
  .day .stack { height: 46px; align-items: flex-end; }
  .day .stack .coin-ico { width: 34px; height: 34px; margin: 0 -9px; }
  .day .stack.s2 .coin-ico:nth-child(2), .day .stack.s3 .coin-ico:nth-child(2) { transform: translateY(-4px); }
  #modal { align-items: center; padding: 96px 20px 40px; }
  #modal .card { max-height: calc(100vh - 136px); }
  #modal .card:has(.pack-banner) { margin-top: 48px; }
  #toast.top { top: 112px; }
  #clues { align-self: start; }
  .clue.current { transform: none !important; }
  .map-scroll { padding-top: 84px !important; }
}
/* rodada UI 3 (crítica u2) */
body:has(#tip:not(.hidden)) #debug-solve { visibility: hidden; }
#tip .tip-text { font-size: 16px; text-wrap: balance; }
.float-word { color: var(--ink) !important; -webkit-text-stroke: 6px var(--surface); paint-order: stroke fill; text-shadow: 0 4px 0 var(--wc, var(--teal)); }
.float-word span { color: var(--coral-depth); }
.reward, .pack-coins, .plus-coins { color: var(--ink); text-shadow: none; }
.plus-coins { -webkit-text-stroke: 4px var(--surface); }
.shop-item:nth-child(2) { transform: none; border: 0; }
.shop-item em { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.coins { min-width: 112px; }
#game.ending .bar > :not(.coins) { visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* pista atual branca (mais limpa), com respiro do cabeçalho; combo no cabeçalho, sem cobrir a pista */
.clue.current { background: var(--surface) !important; border-left: 0 !important; }
@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #clues { margin-top: 18px !important; }
  #combo { left: 55%; right: auto; top: 12px; transform: translateX(-50%) scale(.6); }
  #combo.on { transform: translateX(-50%) scale(1); }
  #combo i { width: 60px; height: 8px; }
}
/* horário do pacote: filtro em CSS no fundo (o Safari do iPhone ignora o filtro do canvas); o tabuleiro fica sempre vivo */
body[data-time="sunset"] #bg { filter: sepia(.16) saturate(.8) hue-rotate(332deg); }
body[data-time="night"] #bg { filter: brightness(.55) saturate(.7) hue-rotate(12deg); }
body[data-time="dawn"] #bg { filter: saturate(.7) sepia(.08); }
body[data-time="night"] .sky-clouds { filter: brightness(.6) saturate(.7); }
/* juice: brilho que atravessa a pista ao receber a palavra; botão principal "respira" */
.clue { position: relative; overflow: hidden; }
.clue.hop::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, #ffffffcc 48%, transparent 66%); transform: translateX(-110%); animation: clueSheen .6s .05s var(--ease-out); }
@keyframes clueSheen { to { transform: translateX(110%); } }
#home .btn-play { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.025); } }
#home .btn-play:active { animation: none; }
.reduce-motion #home .btn-play, .reduce-motion .clue.hop::after { animation: none; }

/* ---------- sequência diária (streak) ---------- */
#streak { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; overflow: hidden; color: var(--ink); text-align: center;
  background: radial-gradient(circle at 50% 34%, #fffaf0 0, #e3f4ee 46%, #b6e2dc 100%); animation: stIn .45s var(--ease-out); }
#streak.out { animation: stOut .32s var(--ease-out) forwards; }
@keyframes stIn { from { opacity: 0; transform: scale(1.04); } }
@keyframes stOut { to { opacity: 0; transform: scale(.98); } }
.st-rays { position: absolute; left: 50%; top: 34%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #ffffff66 0 7deg, transparent 7deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 46%); mask-image: radial-gradient(circle, #000 0, transparent 46%);
  animation: stSpin 40s linear infinite; }
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-body { position: relative; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 0; }
.st-hero { position: relative; width: 180px; height: 190px; }
.st-otter svg { width: 180px; height: 190px; animation: stBob 3s ease-in-out infinite; }
.st-otter .q, .st-otter .z, .st-otter .closed { display: none; }
@keyframes stBob { 50% { transform: translateY(-6px); } }
.st-flame { position: absolute; right: -6px; bottom: 6px; width: 64px; height: 76px; filter: drop-shadow(0 4px 8px #f2a46b66); animation: stFlicker 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.st-flame svg { width: 100%; height: 100%; }
@keyframes stFlicker { to { transform: scale(1.06, .96) rotate(-2deg); } }
.st-num b { display: inline-block; font: 800 104px/0.95 "Baloo 2", sans-serif; color: var(--ink); -webkit-text-stroke: 8px #fffdf5; paint-order: stroke fill; text-shadow: 0 6px 0 #103f4b22; }
.st-num b.roll { animation: stRoll .52s var(--ease-spring); }
@keyframes stRoll { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-40px); opacity: 0; } 50% { transform: translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.st-lbl { font: 800 20px "Baloo 2", sans-serif; letter-spacing: .08em; color: var(--teal-depth); margin-top: -4px; }
.st-week { display: flex; gap: 6px; margin: 16px 0 6px; padding: 12px 14px; background: #fffdf5d9; border-radius: 22px; box-shadow: var(--e-2); }
.st-d { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 38px; }
.st-d small { font-weight: 800; font-size: 13px; color: var(--ink-3); }
.st-d i { font-style: normal; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: #fff; font-weight: 800; font-size: 16px; }
.st-d.done i { background: var(--teal); box-shadow: 0 2px 0 var(--teal-depth); }
.st-d.ice i { background: #9fd8ec; box-shadow: 0 2px 0 #6fb8d4; }
.st-d.fut i { background: transparent; box-shadow: inset 0 0 0 2px var(--edge); }
.st-d.risk i { box-shadow: inset 0 0 0 2px var(--coral); animation: stPulse 1s ease-in-out infinite; }
.st-d.today small { color: var(--ink); }
.st-d.today i { background: #fff; box-shadow: 0 0 0 3px var(--sun), 0 4px 10px #f2a46b44; transform: scale(1.12); animation: stPop .5s .7s var(--ease-spring) backwards; }
.st-d.today i svg { width: 20px; height: 24px; }
@keyframes stPop { from { transform: scale(0); } }
@keyframes stPulse { 50% { box-shadow: inset 0 0 0 2px var(--coral), 0 0 0 5px #e98b6e33; } }
.st-msg { margin: 6px 12px 10px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ink-2); text-wrap: balance; min-height: 2.7em; }
.st-msg b { color: var(--teal-depth); }
.st-btns { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.st-go { width: min(320px, 100%); background: #fffdf5; color: var(--teal-depth); font-size: 24px; box-shadow: 0 5px 0 var(--edge), 0 12px 24px #103f4b1f; }
#st-ad { background: var(--teal); color: #fff; box-shadow: 0 5px 0 var(--teal-depth); font-size: 20px; }
.st-alt { width: min(320px, 100%); background: var(--surface); color: var(--ink); font-size: 18px; box-shadow: 0 4px 0 var(--edge); display: flex; gap: 8px; justify-content: center; align-items: center; }
.st-link { color: var(--ink-2); }
/* sequência em risco: lontra cochilando, chama apagada */
.st-risk .st-flame { filter: grayscale(1) opacity(.45); animation: none; }
.st-risk .st-otter .eyes { display: none; } .st-risk .st-otter .closed { display: inline; }
.st-reset .st-flame { transform: scale(.8); }
.reduce-motion .st-rays, .reduce-motion .st-otter svg, .reduce-motion .st-flame { animation: none; }
@media (max-height: 700px) { .st-hero, .st-otter svg { width: 140px; height: 148px; } .st-num b { font-size: 84px; } .st-week { margin-top: 10px; } }


/* ---------- nível completo: entrada em cascata, estrelas que caem, trilha com ponto de luz ---------- */
#modal .card:has(.stars-wrap) { animation: lcIn .55s var(--ease-spring); }
@keyframes lcIn { 0% { transform: scale(.82) translateY(30px); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } }
#modal .card:has(.stars-wrap) .card-title { animation: lcDrop .5s .15s var(--ease-spring) backwards; }
@keyframes lcDrop { from { transform: translate(-50%, -40px); opacity: 0; } }
.pack-theme { animation: fadeUp .4s .3s var(--ease-out) backwards; }
@keyframes fadeUp { from { transform: translateY(8px); opacity: 0; } }
.stars-wrap { position: relative; margin: 10px 0 2px; }
.mini-rays { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(#ffe08a55 0 8deg, transparent 8deg 22deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%); mask-image: radial-gradient(circle, #000 0, transparent 62%);
  animation: raysIn .6s 1.1s var(--ease-out) forwards, stSpin 30s linear infinite; }
@keyframes raysIn { to { opacity: 1; } }
.stars { position: relative; gap: 6px; align-items: flex-end; margin: 0 !important; }
.stars i { position: relative; width: 64px !important; height: 62px !important; background: none !important; clip-path: none !important; transform: none !important; animation: none !important; }
.stars i:nth-child(2) { width: 82px !important; height: 80px !important; margin-bottom: 14px; }
.stars svg { width: 100%; height: 100%; overflow: visible; }
.stars .sb { fill: #e4ece6; stroke: #d3ddd5; stroke-width: 2.5; stroke-linejoin: round; transition: fill .2s; }
.stars .sh { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.stars i.on svg { animation: starFall .55s var(--ease-out) both; }
.stars i.on .sb { fill: url(#starGold); fill: #f7c443; stroke: #e0a326; filter: drop-shadow(0 3px 0 #d4962155); }
.stars i.on .sh { opacity: .9; }
@keyframes starFall { 0% { transform: translateY(-90px) scale(1.7) rotate(-35deg); opacity: 0; } 55% { transform: translateY(0) scale(1.18, .82) rotate(4deg); opacity: 1; } 75% { transform: scale(.94, 1.08); } 100% { transform: none; } }
.stars .halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, #fff3b0cc 0, #fff3b000 65%); opacity: 0; pointer-events: none; }
.stars i.on .halo { animation: halo 1.1s .25s var(--ease-out); }
@keyframes halo { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.stars i.on::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #ffffffd9 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'%3E%3Cpath d='M24 2.5l6.4 13.3 14.6 2-10.6 10.2 2.6 14.5L24 35.6l-13 6.9 2.6-14.5L3 17.8l14.6-2Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'%3E%3Cpath d='M24 2.5l6.4 13.3 14.6 2-10.6 10.2 2.6 14.5L24 35.6l-13 6.9 2.6-14.5L3 17.8l14.6-2Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation: starShine 3.2s 2.2s ease-in-out infinite; }
.stars i.on:nth-child(2)::after { animation-delay: 2.5s; } .stars i.on:nth-child(3)::after { animation-delay: 2.8s; }
@keyframes starShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.stars i.off svg { animation: fadeUp .3s var(--ease-out) both; }
.pack-done span { display: inline-block; animation: letterHop .42s var(--ease-spring) backwards; }
@keyframes letterHop { from { transform: translateY(16px) scale(.6); opacity: 0; } }
.pack-coins { animation: fadeUp .35s 1.45s var(--ease-out) backwards !important; }
.pack-coins .coin-ico { animation: coinSpin .6s 1.5s ease-in-out; }
@keyframes coinSpin { 50% { transform: scaleX(.1); } }
.trail { animation: fadeUp .4s 1.6s var(--ease-out) backwards; }
.trail-dot { fill: #fff; stroke: var(--coral); stroke-width: 4; filter: drop-shadow(0 0 6px #ffe08a); }
.trail .marks circle.pop { animation: markPop .45s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes markPop { 40% { transform: scale(1.8); } }
.trail .count.pop { animation: countPop .4s var(--ease-spring); }
@keyframes countPop { 40% { transform: translateX(-50%) scale(1.25); } }
.trail .chest.wiggle { animation: wiggle .5s ease-in-out; } .trail .chest.wiggle-big { animation: wiggle .5s ease-in-out 2; }
@keyframes wiggle { 25% { transform: rotate(-7deg) scale(1.05); } 75% { transform: rotate(6deg) scale(1.05); } }
#m-next.late { position: relative; overflow: hidden; animation: fadeUp .45s 2.3s var(--ease-spring) backwards, breathe 2.6s 3.2s ease-in-out infinite; }
#m-next.late::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff55 50%, transparent 65%); transform: translateX(-120%); animation: btnShine 2.8s 3s ease-in-out infinite; }
@keyframes btnShine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.reduce-motion .mini-rays, .reduce-motion #m-next.late, .reduce-motion #m-next.late::after, .reduce-motion .stars i.on::after { animation: none; opacity: 1; }


/* ---------- nível completo v2 (crítica: sem card vazio, estrelas com peso, manchete carimbo, clímax) ---------- */
#modal .card:has(.stars-wrap) { animation: lcIn .42s var(--ease-spring); }
#modal .card:has(.stars-wrap) .card-title { animation: lcDrop .42s .06s var(--ease-spring) backwards; }
.pack-theme { animation: fadeUp .3s .10s var(--ease-out) backwards; font-size: 14px; opacity: .85; }
.stars-wrap { animation: fadeUp .3s .14s var(--ease-out) backwards; margin: 6px 0 0; }
.pack-coins { animation: fadeUp .3s .22s var(--ease-out) backwards !important; display: inline-flex !important; margin: 4px auto 0; padding: 6px 18px 6px 8px; border-radius: 999px; background: #fff4d6;
  box-shadow: 0 3px 0 #ecd9a6, inset 0 0 0 2px #f6e3ae; font-size: 26px; gap: 8px; }
.pack-coins .coin-ico { width: 32px !important; height: 32px !important; animation: coinSpin .5s .95s ease-in-out; }
.trail { animation: fadeUp .35s .28s var(--ease-out) backwards; height: 130px; margin-bottom: 8px; }
.mini-rays { width: 340px; height: 340px; margin: -170px 0 0 -170px; background: none; animation: raysIn .5s .86s var(--ease-out) forwards; }
.mini-rays::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(#ffe08a77 0 8deg, transparent 8deg 22deg); animation: stSpin 16s linear infinite; }
.mini-rays.flare { animation: rayFlare .7s var(--ease-out) forwards, rayPulse 3s 1.4s ease-in-out infinite; }
@keyframes rayFlare { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.18); } 100% { opacity: .85; transform: scale(1); } }
@keyframes rayPulse { 50% { opacity: .6; } }
.stars .sk { fill: #ece5d2; stroke: #dcd2b8; stroke-width: 3; stroke-linejoin: round; }
.stars .gold { opacity: 0; transform-box: view-box; transform-origin: 24px 23px; }
.stars .sb { fill: url(#lcGold); stroke: #b8741a; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; filter: none; transition: none; }
.stars .si { fill: #fff; opacity: .22; }
.stars .sh { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .95; }
.stars i.on .sb { fill: url(#lcGold); stroke: #b8741a; filter: none; }
.stars i.on .gold { opacity: 1; filter: drop-shadow(0 3px 0 #c98a1e); animation: starSlam .52s both; }
@keyframes starSlam {
  0% { transform: translateY(-120px) scale(2.4) rotate(-40deg); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  15% { opacity: 1; }
  62% { transform: translateY(0) scale(1.28,.76) rotate(6deg); animation-timing-function: var(--ease-out); }
  78% { transform: scale(.92,1.1) rotate(-2deg); } 90% { transform: scale(1.04); } 100% { transform: none; } }
.stars i.on .sk { animation: sockFlash .35s .3s ease-out; }
@keyframes sockFlash { 0% { fill: #fff3b0; } 100% { fill: #ece5d2; } }
.stars i.on svg { animation: starFloat 3s 2.2s ease-in-out infinite; }
.stars i.on:nth-child(2) svg { animation-delay: 2.5s; } .stars i.on:nth-child(3) svg { animation-delay: 2.8s; }
@keyframes starFloat { 50% { transform: translateY(-3px); } }
.pack-done { font-size: 32px; letter-spacing: 2px; color: var(--ink); text-shadow: 0 3px 0 #f2c46b; animation: lcPunch .42s .18s both; }
@keyframes lcPunch { 0% { transform: scale(2.2); opacity: 0; letter-spacing: 14px; animation-timing-function: cubic-bezier(.55,0,1,.45); } 55% { transform: scale(.94); opacity: 1; letter-spacing: 2px; animation-timing-function: var(--ease-out); } 80% { transform: scale(1.04); } 100% { transform: none; } }
.pack-done span { display: inline-block; animation: lcWave 5s calc(2.6s + var(--i) * 40ms) ease-in-out infinite; }
@keyframes lcWave { 0%, 8%, 100% { transform: none; } 4% { transform: translateY(-5px); } }
.trail .marks circle.done { fill: #fff; stroke: var(--teal); stroke-width: 3; }
.trail .chest { filter: drop-shadow(0 0 calc(4px + var(--p, 0) * 14px) #ffe08a); animation: chestBob 2.4s 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes chestBob { 50% { transform: translateY(-3px) rotate(-2deg); } }
.trail .chest.wiggle, .trail .chest.wiggle-big { animation: wiggle .5s ease-in-out, chestBob 2.4s .6s ease-in-out infinite; }
.trail .count { left: auto; right: 10px; transform: none; bottom: -14px; font-size: 18px; padding: 2px 12px; }
@keyframes countPop { 40% { transform: scale(1.25); } }
#m-next.late { position: relative; overflow: hidden; pointer-events: none; animation: lcCta .45s 1.65s var(--ease-spring) backwards, breathe 2.6s 2.4s ease-in-out infinite; }
#m-next.late.ready { pointer-events: auto; }
@keyframes lcCta { 0% { transform: translateY(18px) scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
#m-next.late::after { animation: btnShine 2.8s 2.3s ease-in-out infinite; }
@media (min-width: 900px) and (min-height: 760px) {
  .stars i { width: 80px !important; height: 78px !important; } .stars i:nth-child(2) { width: 104px !important; height: 100px !important; margin-bottom: 18px; }
  .pack-done { font-size: 38px; } .pack-theme { font-size: 16px; } .pack-coins { font-size: 30px; } .pack-coins .coin-ico { width: 36px !important; height: 36px !important; }
  .trail { height: 130px; margin-top: 0; } .mini-rays { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
}
.reduce-motion .stars i.on .gold, .reduce-motion .pack-done, .reduce-motion .pack-done span, .reduce-motion .trail .chest,
.reduce-motion .stars i.on svg, .reduce-motion .mini-rays, .reduce-motion .mini-rays::before, .reduce-motion #m-next.late, .reduce-motion #m-next.late::after { animation: none !important; opacity: 1; }
.reduce-motion #m-next.late { pointer-events: auto; }
.pack-done { white-space: nowrap; font-size: clamp(22px, 7.2vw, 32px); }
@media (min-width: 900px) and (min-height: 760px) { .pack-done { font-size: 38px; } }
/* nível completo: ajustes da reavaliação */
@keyframes lcPunch { 0% { transform: scale(2.2); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); } 55% { transform: scale(.94); opacity: 1; animation-timing-function: var(--ease-out); } 80% { transform: scale(1.04); } 100% { transform: none; } }
.mini-rays { opacity: 0; animation: none; }
.mini-rays.flare { animation: rayFlare .7s var(--ease-out) forwards, rayPulse 3s 1.4s ease-in-out infinite; }
.trail { margin-bottom: 0 !important; }
.trail svg { transform: translateY(-6px); }
.trail .count { top: 62px; bottom: auto; right: 14px; }
.trail .bed { stroke: #e2ebe5; }
.trail .marks circle:not(.done):not(.now) { fill: #c6d9cf; stroke: #fff; stroke-width: 2; }
@media (min-width: 900px) and (min-height: 760px) {
  .trail { height: 170px; } .trail .chest { width: 100px; height: 88px; } .trail .count { font-size: 20px; top: 84px; } .pack-theme { font-size: 17px; }
}
@media (max-width: 899px) { .trail { height: 112px; } }
.pack-done { text-shadow: 0 2px 0 #e8b54f; }
.trail .chest { filter: drop-shadow(0 0 calc(8px + var(--p, 0) * 12px) #ffd76a); }


/* ---------- ranking: liga semanal e desafio diário ---------- */
.tab-ico { position: relative; }
.tab-dot { position: absolute; top: -2px; right: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--surface); display: none; }
.tab-dot.on { display: block; animation: stPulse 1.6s ease-in-out infinite; }
.drop-ico { display: inline-block; width: .8em; height: .95em; vertical-align: -.1em; margin-left: 3px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cpath d='M20 2C27 13 35 20 35 28a15 15 0 0 1-30 0C5 20 13 13 20 2Z' fill='%2362c7dd'/%3E%3C/svg%3E"); }
.pack-gotas { display: inline-flex; align-items: center; gap: 2px; margin: 6px 0 0 8px; padding: 6px 14px; border-radius: 999px; background: #e3f4f6; color: var(--teal-depth); font-weight: 800; font-size: 18px; box-shadow: 0 3px 0 #c6e3e6; animation: fadeUp .3s 1.35s var(--ease-out) backwards; }
.rk-card { display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.rk-tabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-3); border-radius: 999px; margin-bottom: 12px; }
.rk-tabs button { flex: 1; padding: 9px 6px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--ink-2); background: none; }
.rk-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }
.rk-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.rk-head { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 8px; }
.rk-head b { display: block; font: 800 24px "Baloo 2", sans-serif; color: var(--ink); line-height: 1.1; }
.rk-head small { color: var(--ink-2); font-weight: 700; }
.rk-help { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink); font-weight: 800; }
.rk-rules { font-size: 14px; color: var(--ink-2); text-align: left; margin: 0 0 8px; }
.emblem { position: relative; display: inline-grid; place-items: center; width: 40px; height: 44px; flex: none; filter: drop-shadow(0 3px 0 #103f4b22); }
.emblem.big { width: 58px; height: 64px; }
.emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.emblem b { position: relative; top: 5px; color: #fff; font: 800 18px "Baloo 2", sans-serif; text-shadow: 0 1px 0 #0003; }
.emblem.big b { font-size: 24px; top: 7px; }
.rk-near { background: #fff4d6; color: #7a5410; font-weight: 800; font-size: 14px; border-radius: 12px; padding: 7px 10px; margin-bottom: 8px; }
.rk-list { overflow-y: auto; min-height: 0; flex: 1; max-height: 52vh; padding: 2px 4px 8px; margin: 0 -4px; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; margin-bottom: 4px; background: var(--surface-2); text-align: left; }
.rk-row .pos { width: 24px; font-weight: 800; color: var(--ink-2); text-align: center; }
.rk-row .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 800; font-size: 14px; flex: none; }
.rk-row .av.me { background: var(--coral); }
.rk-row .nm { flex: 1; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .gt { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rk-row.up { background: #e6f5f0; } .rk-row.dn { background: #fbece6; }
.rk-row.me { position: sticky; top: 0; bottom: 0; z-index: 1; background: var(--surface); box-shadow: 0 0 0 3px var(--coral), var(--e-2); }
.rk-sep { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 0 6px; }
.rk-sep.up { color: var(--teal-depth); } .rk-sep.down { color: var(--coral-depth); } .rk-sep.gold { color: #b8741a; }
.rk-sim { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; }
.rk-empty { padding: 18px 8px; } .rk-empty p { color: var(--ink-2); font-weight: 700; font-size: 17px; margin: 12px 0 16px; }
.rk-empty-ico .emblem { width: 72px; height: 80px; } .rk-empty-ico .emblem b { font-size: 28px; top: 8px; }
.rk-daily { padding: 4px 6px 6px; }
.rk-cal { display: inline-flex; flex-direction: column; align-items: center; width: 74px; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--e-2); }
.rk-cal small { width: 100%; background: var(--coral); color: #fff; font-weight: 800; padding: 3px 0; }
.rk-cal b { font: 800 34px/1.3 "Baloo 2", sans-serif; color: var(--ink); }
.rk-daily h3 { font: 800 22px "Baloo 2", sans-serif; color: var(--ink); margin: 10px 0 2px; }
.rk-daily p { color: var(--ink-2); font-weight: 700; margin: 0 0 14px; }
.rk-res { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-weight: 800; color: var(--ink); margin: 6px 0 14px; }
.rk-res.big { font-size: 20px; }
.rk-stars { color: #f2b632; letter-spacing: 2px; } .rk-stars i { color: #d9e3dc; font-style: normal; }
.daily-stars .sk { fill: #ece5d2; stroke: #dcd2b8; stroke-width: 3; } .daily-stars i.on .sk { fill: #f7c443; stroke: #b8741a; }
#modal .card .btn + .btn { margin-top: 10px; }
.rk-move { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0; }
.rk-move .emblem:last-child { animation: lcIn .6s .7s var(--ease-spring) backwards; }
.rk-move .emblem:first-child { opacity: .55; }
.rk-arrow { font: 800 30px "Baloo 2", sans-serif; color: var(--ink-3); }
.rk-move.promoted .rk-arrow { color: var(--teal); animation: fadeUp .4s .4s backwards; } .rk-move.relegated .rk-arrow { color: var(--coral-depth); }
.rk-final { font: 800 30px "Baloo 2", sans-serif; color: var(--ink); }
.rk-msg { color: var(--ink-2); font-weight: 700; margin: 4px 0 12px; text-wrap: balance; }
.rk-rew { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.rk-rew span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff4d6; font-weight: 800; font-size: 20px; color: var(--ink); box-shadow: 0 3px 0 #ecd9a6; }
.rk-rew .coin-ico { width: 24px; height: 24px; }

/* lontra nova: boca aberta no cheer, pedra fica no peito */
.otter .mouth-open { opacity: 0; }
.otter.cheer .mouth { opacity: 0; } .otter.cheer .mouth-open { opacity: 1; }

.rk-cal.locked small { background: var(--ink-3); } .rk-cal.locked b { color: var(--ink-3); }
#modal .card:focus { outline: none; }


/* ---------- foguinho da sequência no topo e calendário ---------- */
.flame-ico { display: inline-block; width: 22px; height: 26px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 2c3 9 14 14 14 28a14 14 0 0 1-28 0c0-7 4-11 7-15 1 4 3 6 5 6-2-7 0-13 2-19Z' fill='%23f2a46b'/%3E%3Cpath d='M20 22c2 5 7 8 7 15a7 7 0 0 1-14 0c0-4 2-6 4-8 0 2 1 3 2 3-1-4 0-7 1-10Z' fill='%23ffe08a'/%3E%3C/svg%3E"); }
.streak-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--e-1); font: 800 20px var(--font, "Nunito"), sans-serif; color: var(--ink); cursor: pointer; }
.streak-pill .flame-ico { animation: stFlicker 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.streak-pill.cold .flame-ico { filter: grayscale(1) opacity(.55); animation: none; }
.streak-pill + .coins { margin-left: 8px !important; }
.streak-pill:active { transform: translateY(2px); }
.cal-card .cal-hero { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 10px; text-align: left; }
.cal-flame { width: 56px; height: 66px; filter: drop-shadow(0 4px 8px #f2a46b66); animation: stFlicker 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.cal-flame svg { width: 100%; height: 100%; }
.cal-hero b { display: block; font: 800 52px/1 "Baloo 2", sans-serif; color: var(--ink); }
.cal-hero small { font-weight: 800; color: var(--teal-depth); letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.cal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cal-stats div { background: var(--surface-2); border-radius: 14px; padding: 8px; box-shadow: 0 3px 0 var(--edge); }
.cal-stats b { display: block; font: 800 24px "Baloo 2", sans-serif; color: var(--ink); line-height: 1.1; }
.cal-stats small { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.cal-month { background: var(--surface-2); border-radius: 18px; padding: 10px 10px 12px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-nav b { font-weight: 800; color: var(--ink); font-size: 16px; }
.cal-nav button { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: var(--e-1); font-size: 20px; font-weight: 800; color: var(--ink); }
.cal-nav button:disabled { opacity: .35; box-shadow: none; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week i { font-style: normal; font-weight: 800; font-size: 12px; color: var(--ink-3); padding: 2px 0 6px; }
.cal-grid span { position: relative; height: 38px; display: grid; place-items: center; }
.cal-grid span i { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.cal-grid span.fut i { color: var(--ink-3); opacity: .5; }
.cal-grid span.done::before, .cal-grid span.ice::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 3px; right: 3px; border-radius: 16px; background: #cfeee6; }
.cal-grid span.ice::before { background: #d6eef7; }
.cal-grid span.l::before { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-grid span.r::before { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-grid span.done i { background: var(--teal); color: #fff; box-shadow: 0 2px 0 var(--teal-depth); }
.cal-grid span.ice i { background: #9fd8ec; color: #fff; }
.cal-grid span.today i { box-shadow: 0 0 0 3px var(--sun); }
.cal-grid span.today.done i { background: #fff; } .cal-grid span.today i svg { width: 18px; height: 22px; }

/* sem vídeo de fundo: tira o desfoque que escondia a baixa resolução dele */
.bg-soften { display: none; }
/* barras de rolagem no estilo do jogo (finas, verde-água) */
* { scrollbar-width: thin; scrollbar-color: #9fd3c8 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #9fd3c8; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; height: 0; }

.card .rk-sim { font-size: 13px; }
.rk-list { -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 0, #000 calc(100% - 18px), transparent); }


/* ---------- mapa interativo ---------- */
#map-screen { position: fixed; inset: 0; z-index: 54; display: flex; flex-direction: column; background: #bfe3b4; animation: stIn .35s var(--ease-out); }
#map-screen.out { animation: stOut .26s var(--ease-out) forwards; }
.mp-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(#fffdf5f2, #fffdf5d0); box-shadow: 0 3px 0 #0000000d; }
.mp-bar b { flex: 1; font: 800 22px "Baloo 2", sans-serif; color: var(--ink); }
.mp-stars { font-weight: 800; color: #b8741a; background: #fff4d6; padding: 6px 12px; border-radius: 999px; box-shadow: 0 3px 0 #ecd9a6; }
.mp-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.map-svg { display: block; max-width: 640px; margin: 0 auto; box-shadow: 0 0 60px #103f4b14; }
.mr-bank { fill: none; stroke: #e8d9a8; stroke-width: 96; stroke-linecap: round; stroke-linejoin: round; }
.mr-water { fill: none; stroke: #74c9de; stroke-width: 78; stroke-linecap: round; stroke-linejoin: round; }
.mr-shine { fill: none; stroke: #ffffff66; stroke-width: 6; stroke-dasharray: 18 46; stroke-linecap: round; animation: mrFlow 6s linear infinite; }
@keyframes mrFlow { to { stroke-dashoffset: 640; } }
.mr-banner rect { fill: #fffdf5; filter: drop-shadow(0 3px 0 #0000001a); }
.mr-banner text { text-anchor: middle; font: 800 15px "Baloo 2", sans-serif; fill: var(--ink); }
.mr-banner text.sub { font: 700 10px Nunito, sans-serif; fill: var(--ink-2); }
.mr-node { cursor: pointer; }
.mr-node .sh { fill: #103f4b; opacity: .18; }
.mr-node .st { fill: #e2d3b4; transform: translateY(5px); }
.mr-node .tp { fill: #fffaf0; stroke: #fff; stroke-width: 2; }
.mr-node text { text-anchor: middle; font: 800 18px "Baloo 2", sans-serif; fill: var(--ink); pointer-events: none; }
.mr-node.done .tp { fill: #fffaf0; stroke: var(--teal); stroke-width: 4; }
.mr-node.done .st { fill: var(--teal-depth); }
.mr-node.lock .tp { fill: #dfe7e3; stroke: #eef3f0; } .mr-node.lock .st { fill: #b9c8c2; } .mr-node.lock text { fill: #9aaba5; }
.mr-node.cur .tp { fill: var(--coral); stroke: #fff; stroke-width: 4; } .mr-node.cur .st { fill: var(--coral-depth); } .mr-node.cur text { fill: #fff; }
.mr-node.cur { animation: mrPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mr-node.cur.arrive .tp { animation: markPop .5s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes mrPulse { 50% { filter: drop-shadow(0 0 10px #f2c46b); } }
.mr-node.boss .tp { stroke: var(--sun); stroke-width: 5; }
.mr-node .crown { font-size: 18px; fill: #e0a83a; }
.mr-node .stars { font-size: 12px; fill: #f2b632; letter-spacing: 1px; } .mr-node .stars tspan { fill: #ffffffaa; }
.mr-node.nope { animation: wiggle .4s ease-in-out; transform-box: fill-box; transform-origin: center; }
.mr-chest .halo { fill: #ffe08a; opacity: .35; } .mr-chest.open .halo { opacity: 0; }
.mr-chest { cursor: pointer; } .mr-chest.wig { animation: wiggle .5s ease-in-out; transform-box: fill-box; transform-origin: center; }
.leaf-boat { animation: boatBob 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes boatBob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.leaf-boat .q, .leaf-boat .z, .leaf-boat .closed { display: none; }
.mp-tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); background: var(--surface); color: var(--ink); font-weight: 800; padding: 8px 14px; border-radius: 14px; box-shadow: var(--e-2); white-space: nowrap; pointer-events: none; animation: fadeUp .2s var(--ease-out); }
.reduce-motion .mr-shine, .reduce-motion .leaf-boat, .reduce-motion .mr-node.cur { animation: none; }

/* lontra vista de cima na folha: balança na água e deixa ondinhas */
.mr-boat { cursor: pointer; }
.leaf-boat { animation: tdBob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tdBob { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.02); } }
.leaf-boat .wake { fill: none; stroke: #ffffffb3; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: tdWake 2.4s ease-out infinite; }
.leaf-boat .w2 { animation-delay: 1.2s; }
@keyframes tdWake { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.td-otter { animation: tdBreath 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tdBreath { 50% { transform: scale(1.03, .98); } }
.reduce-motion .leaf-boat, .reduce-motion .leaf-boat .wake, .reduce-motion .td-otter { animation: none; }


/* ---------- trechos do rio ---------- */
body.world-art #bg { filter: none !important; }
.ns-art { position: relative; height: 150px; border-radius: 20px; background: #cfe6b0 center/cover no-repeat; box-shadow: inset 0 0 0 3px #fff, var(--e-2); margin: 4px 0 12px; animation: lcIn .5s var(--ease-spring); }
.ns-art span { position: absolute; left: 12px; top: 12px; background: var(--surface); color: var(--ink); font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; box-shadow: var(--e-1); }
.ns-name { font: 800 30px "Baloo 2", sans-serif; color: var(--ink); line-height: 1.1; animation: lcPunch .42s .2s both; }
.ns-place { color: var(--teal-depth); font-weight: 800; margin: 2px 0 14px; animation: fadeUp .3s .35s var(--ease-out) backwards; }


/* ---------- mapa v2: fundo pintado por trecho, rio em SVG, juice ---------- */
#map-screen { z-index: 28; background: #cfe6b0; }
.mp-bar { padding: 10px 14px calc(10px) 14px; gap: 12px; background: linear-gradient(#fffdf5, #fffdf5e6); box-shadow: 0 4px 0 #103f4b12, 0 10px 24px #103f4b14; }
.mp-title { flex: 1; display: flex; flex-direction: column; line-height: 1.1; }
.mp-title b { font: 800 21px "Baloo 2", sans-serif; color: var(--ink); }
.mp-title small { font-weight: 800; font-size: 13px; color: var(--teal-depth); }
.mp-stars { display: inline-flex; align-items: center; gap: 6px; }
.mp-stars svg { width: 20px; height: 20px; fill: #f2b632; }
.mp-world { position: relative; width: 100%; overflow: hidden; }
.mp-sec { position: absolute; left: 0; right: 0; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(transparent 0, #000 90px); mask-image: linear-gradient(transparent 0, #000 90px); }
.mp-sec:first-child { -webkit-mask-image: none; mask-image: none; }
.map-svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: none; margin: 0; box-shadow: none; overflow: visible; }
.mr-bank { fill: none; stroke-width: 100; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.mr-foam { fill: none; stroke: #ffffffb0; stroke-width: 86; stroke-linecap: round; stroke-dasharray: 2 13; }
.mr-water { fill: none; stroke: #63c0d6; stroke-width: 78; stroke-linecap: round; stroke-linejoin: round; }
.mr-mid { fill: none; stroke: #8fd8e8; stroke-width: 44; stroke-linecap: round; opacity: .55; }
.mr-shine { fill: none; stroke: #ffffff80; stroke-width: 5; stroke-dasharray: 16 52; stroke-linecap: round; animation: mrFlow 9s linear infinite; }
@keyframes mrFlow { to { stroke-dashoffset: -680; } }
.spark { fill: #fff; transform-box: fill-box; transform-origin: center; animation: spark 3.8s ease-in-out infinite; opacity: 0; }
@keyframes spark { 0%, 70%, 100% { opacity: 0; transform: scale(.3); } 80% { opacity: .95; transform: scale(1); } }
.mr-sign { transform-box: fill-box; transform-origin: 50% 100%; animation: signIn .5s var(--ease-spring) backwards; }
.mr-sign .board { fill: #fffdf5; filter: drop-shadow(0 3px 0 #103f4b22); }
.mr-sign text { text-anchor: middle; } .mr-sign .t1 { font: 800 13px "Baloo 2", sans-serif; fill: var(--ink); } .mr-sign .t2 { font: 700 10.5px Nunito, sans-serif; fill: var(--teal-depth); }
@keyframes signIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.mr-node, .mr-chest { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .12s var(--ease-out); }
.mr-node.press, .mr-chest.press { transform: scale(.88) translateY(3px); }
.mr-node.pop, .mr-chest.pop { animation: nodePop .42s var(--ease-spring); }
@keyframes nodePop { 0% { transform: scale(.88); } 50% { transform: scale(1.12); } 100% { transform: none; } }
.mr-node .sh { fill: #103f4b; opacity: .2; }
.mr-node .sd { fill: #cdbb93; } .mr-node .tp { fill: #fffaf0; } .mr-node .hl { fill: none; stroke: #ffffffcc; stroke-width: 3; stroke-linecap: round; }
.mr-node text { text-anchor: middle; font: 800 18px "Baloo 2", sans-serif; fill: var(--ink); pointer-events: none; }
.mr-node.done .tp { fill: #fffaf0; stroke: var(--teal); stroke-width: 4; } .mr-node.done .sd { fill: var(--teal-depth); }
.mr-node.lock .tp { fill: #e3e9e5; } .mr-node.lock .sd { fill: #b6c4be; } .mr-node.lock text { fill: #93a49e; } .mr-node.lock .hl { stroke: #ffffff88; }
.mr-node.cur .tp { fill: var(--coral); } .mr-node.cur .sd { fill: var(--coral-depth); } .mr-node.cur text { fill: #fff; font-size: 20px; }
.mr-node.cur .ring { fill: none; stroke: #ffe08a; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: curRing 1.6s ease-out infinite; }
@keyframes curRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.mr-node.cur { animation: curBob 1.8s ease-in-out infinite; }
@keyframes curBob { 50% { transform: translateY(-4px); } }
.mr-node.cur.press { animation: none; }
.mr-node.arrive { animation: nodePop .5s var(--ease-spring), curBob 1.8s .5s ease-in-out infinite; }
.mr-node.boss .tp { stroke: var(--sun); stroke-width: 5; } .mr-node .crown { font-size: 20px; fill: #e0a83a; }
.mr-node.nope { animation: wiggle .42s ease-in-out; }
.ms.on { fill: #f7c443; stroke: #b8741a; stroke-width: 4; stroke-linejoin: round; } .ms.off { fill: #ffffffd0; stroke: #c9bfa5; stroke-width: 4; stroke-linejoin: round; }
.mr-chest .halo { fill: #ffe08a; opacity: 0; } .mr-chest.near .halo { animation: chestHalo 2s ease-in-out infinite; }
@keyframes chestHalo { 50% { opacity: .55; } }
.mr-chest.near { animation: chestBob 2.4s ease-in-out infinite; }
.mr-chest.wig { animation: wiggle .5s ease-in-out; }
.mr-boat { cursor: pointer; }
.mp-fog { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 40px at 20% 100%, #fffffff2 60%, transparent 62%), radial-gradient(50% 50px at 70% 100%, #fffffff2 60%, transparent 62%), linear-gradient(#ffffffe6 0, #ffffffd9 calc(100% - 50px), transparent 100%); }
.mp-lock { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface); padding: 14px 22px; border-radius: 22px; box-shadow: var(--e-3); }
.mp-lock span { font-size: 26px; } .mp-lock b { font: 800 20px "Baloo 2", sans-serif; color: var(--ink); } .mp-lock small { font-weight: 800; color: var(--teal-depth); }
.mp-sky { position: absolute; inset: 64px 0 0; pointer-events: none; overflow: hidden; z-index: 3; }
.mp-sky .cs { position: absolute; width: 520px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, #103f4b1f, transparent); animation: cloudShadow 48s linear infinite; }
.mp-sky .c1 { top: 8%; } .mp-sky .c2 { top: 48%; animation-duration: 64s; animation-delay: -30s; } .mp-sky .c3 { top: 78%; animation-duration: 56s; animation-delay: -12s; width: 380px; }
@keyframes cloudShadow { from { transform: translateX(-600px); } to { transform: translateX(110vw); } }
.mp-sky .birds { position: absolute; width: 60px; height: 20px; fill: none; stroke: #103f4b99; stroke-width: 2.2; stroke-linecap: round; animation: birds 22s linear infinite; }
.mp-sky .b1 { top: 22%; } .mp-sky .b2 { top: 60%; animation-duration: 30s; animation-delay: -14s; width: 36px; }
@keyframes birds { from { transform: translateX(-80px) translateY(0); } 50% { transform: translateX(55vw) translateY(-30px); } to { transform: translateX(110vw) translateY(10px); } }
.lp-card .lp-world { font-weight: 800; color: var(--teal-depth); margin-top: -4px; }
.lp-stars { width: 220px; height: 88px; margin: 8px auto 2px; display: block; overflow: visible; }
.lp-stars .ms { animation: lpStar .5s var(--ease-spring) backwards; transform-box: fill-box; transform-origin: center; }
.lp-stars .ms:nth-child(2) { animation-delay: .08s; } .lp-stars .ms:nth-child(3) { animation-delay: .16s; }
@keyframes lpStar { from { transform: scale(0) rotate(-40deg); } }
.lp-card .lp-theme { color: var(--ink-2); font-weight: 700; margin-bottom: 14px; }
.reduce-motion .mp-sky, .reduce-motion .spark, .reduce-motion .mr-shine, .reduce-motion .mr-node.cur, .reduce-motion .mr-node.cur .ring, .reduce-motion .mr-chest.near { animation: none; }
/* mapa: trechos se misturam embaixo; névoa com borda de nuvens */
.mp-sec { -webkit-mask-image: linear-gradient(#000 calc(100% - 110px), transparent); mask-image: linear-gradient(#000 calc(100% - 110px), transparent); }
.mp-sec[data-pi="0"] { -webkit-mask-image: none; mask-image: none; }
.mp-fog { background: linear-gradient(#fffffff0, #ffffffe0 70%, #ffffffc8); }
.mp-fog::after { content: ''; position: absolute; left: -40px; right: -40px; bottom: -44px; height: 70px;
  background: radial-gradient(circle at 50% 30%, #ffffffd0 58%, transparent 60%) 0 0 / 96px 70px repeat-x, radial-gradient(circle at 50% 10%, #ffffffc8 50%, transparent 52%) 48px 10px / 96px 60px repeat-x; filter: drop-shadow(0 6px 8px #103f4b14); }
.mp-lock { bottom: auto; top: 42%; }


/* ---------- mapa v3 (crítica): cerimônia, fase atual, pedras com volume, laterais no PC ---------- */
.mr-node .tp { fill: url(#gTop); }
.mr-node.cur .tp { fill: url(#gCur); stroke: #fff; stroke-width: 4; }
.mr-node.lock .tp { fill: url(#gLock); } .mr-node.lock .sd { fill: #a39b88; } .mr-node.lock text { fill: #6f6858; }
.mr-node.done .tp { stroke: var(--teal); stroke-width: 5; }
.mr-node text { font-size: 20px; paint-order: stroke; stroke: #fffaf0; stroke-width: 3px; }
.mr-node.cur text { fill: #fff; stroke: var(--coral-depth); stroke-width: 3px; font-size: 22px; }
.mr-node .ring, .mr-node .ring2 { display: none; }
.mr-node.cur .ring { display: block; fill: none; stroke: #ffe08a; stroke-width: 6; animation: curRing 1.4s ease-out infinite; }
.mr-node.cur .ring2 { display: block; fill: #ffe08a; opacity: .35; transform-box: fill-box; transform-origin: center; animation: curGlow 1.8s ease-in-out infinite; }
@keyframes curGlow { 50% { opacity: .6; transform: scale(1.08); } }
.mr-node.unlock { animation: nodeUnlock .6s var(--ease-spring); }
@keyframes nodeUnlock { 0% { transform: scale(1); } 30% { transform: scale(.7) rotate(-8deg); } 65% { transform: scale(1.3) rotate(4deg); } 100% { transform: scale(1.22); } }
.mr-node.cur { animation: curBob2 1.8s ease-in-out infinite; }
@keyframes curBob2 { 0%, 100% { transform: scale(1.22); } 50% { transform: scale(1.22) translateY(-4px); } }
.mr-node.cur.press { animation: none; transform: scale(1.08) translateY(3px); }
.mr-node.arrive { animation: nodePop .5s var(--ease-spring), curBob2 1.8s .5s ease-in-out infinite; }
.mr-node.enter { animation: nodeEnter .45s var(--ease-spring) backwards; }
.mr-node.cur.enter { animation: nodeEnter .45s var(--ease-spring) backwards, curBob2 1.8s .6s ease-in-out infinite; }
@keyframes nodeEnter { from { transform: scale(0); opacity: 0; } }
.mr-node .rip { fill: none; stroke: #ffffffaa; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rip 3.2s ease-out infinite; opacity: 0; }
@keyframes rip { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
.mr-node .msbg { fill: #103f4b; opacity: .55; }
.ms.off { fill: #ffffff40; stroke: #ffffffaa; stroke-width: 3; }
.mr-node .ms.on { filter: drop-shadow(0 1px 0 #8a5410); }
.mr-node .ms.pending, .mr-node .msbg.pending { opacity: 0; }
.mr-node .ms.pending { transform: scale(0) rotate(-60deg); transform-box: fill-box; transform-origin: center; }
.mr-node .ms.stamp { transform-box: fill-box; transform-origin: center; animation: msStamp .42s var(--ease-spring) forwards; }
@keyframes msStamp { 0% { opacity: 0; transform: scale(2.4) rotate(-60deg); } 60% { opacity: 1; transform: scale(.85) rotate(8deg); } 100% { opacity: 1; transform: none; } }
.mr-node .msbg { transition: opacity .3s; }
.mr-node .crown { font-size: 22px; }
.mr-sign .t0 { font: 800 9.5px Nunito, sans-serif; letter-spacing: .12em; fill: var(--teal-depth); text-anchor: middle; }
.mr-sign .t1 { font: 800 15px "Baloo 2", sans-serif; fill: var(--ink); }
.mr-sign { animation: signIn .5s var(--ease-spring) backwards, signSway 4s 1s ease-in-out infinite; }
@keyframes signSway { 50% { transform: rotate(1.5deg); } }
.mr-chest .cbar { fill: #103f4b55; } .mr-chest .cfill { fill: #f2c46b; } .mr-chest .cnum { text-anchor: middle; font: 800 13px "Baloo 2", sans-serif; fill: #fff; paint-order: stroke; stroke: #103f4b; stroke-width: 3px; }
.leaf-boat.hop { animation: boatHop .5s var(--ease-out), tdBob 2.6s .5s ease-in-out infinite; }
@keyframes boatHop { 0% { transform: scale(1); } 30% { transform: scale(1.12, .82); } 60% { transform: scale(.92, 1.14) translateY(-6px); } 100% { transform: none; } }
.td-otter .eye { transform-box: fill-box; transform-origin: center; animation: tdBlink 4.2s infinite; }
@keyframes tdBlink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.1); } }
.td-otter .tail { transform-box: fill-box; transform-origin: 50% 0; animation: tdTail 1.6s ease-in-out infinite; }
@keyframes tdTail { 50% { transform: rotate(14deg); } }
.fish { transform-box: fill-box; transform-origin: center; animation: fish 7s ease-in-out infinite; opacity: 0; }
@keyframes fish { 0%, 80% { opacity: 0; transform: translate(-18px, 0) rotate(-60deg); } 82% { opacity: 1; } 90% { transform: translate(0, -26px) rotate(0); } 98% { opacity: 1; transform: translate(18px, 0) rotate(60deg); } 100% { opacity: 0; } }
.fsplash { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: fsplash 7s ease-out infinite; opacity: 0; }
@keyframes fsplash { 0%, 79% { opacity: 0; transform: scale(.3); } 81% { opacity: .9; } 88% { opacity: 0; transform: scale(1.6); } 97% { opacity: 0; transform: scale(.3); } 98% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } }
.mp-fog { background: linear-gradient(#ffffffd9, #ffffffb8 60%, #ffffff8c); -webkit-backdrop-filter: saturate(.6) blur(1.5px); backdrop-filter: saturate(.6) blur(1.5px); }
.mp-fog::before { content: ''; position: absolute; inset: 0; opacity: .7; background: radial-gradient(closest-side, #fff 60%, transparent) 0 0 / 260px 140px, radial-gradient(closest-side, #fff 55%, transparent) 130px 70px / 300px 160px; animation: fogDrift 60s linear infinite; }
@keyframes fogDrift { to { background-position: 520px 0, 730px 70px; } }
.mp-lock { animation: lockBob 3s ease-in-out infinite; }
@keyframes lockBob { 50% { transform: translateX(-50%) translateY(-5px); } }
.mp-lockbar { display: block; width: 140px; height: 10px; border-radius: 5px; background: #103f4b1f; margin-top: 6px; overflow: hidden; }
.mp-lockbar::before { content: ''; display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #f2c46b, #e98b6e); border-radius: inherit; }
.mp-go { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; transform: translate(-50%, 160%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 999px;
  font: 800 22px "Baloo 2", sans-serif; color: #fff; background: var(--coral); box-shadow: 0 5px 0 var(--coral-depth), 0 12px 26px #103f4b40; transition: transform .45s var(--ease-spring); overflow: hidden; }
.mp-go .tri { border-left-color: #fff; }
.mp-go.in { transform: translate(-50%, 0); animation: goPulse 1.6s 1s ease-in-out infinite; }
@keyframes goPulse { 50% { transform: translate(-50%, 0) scale(1.05); } }
.mp-go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, #ffffff70 50%, transparent 60%); transform: translateX(-100%); animation: goShine 2.8s 1.4s ease-in-out infinite; }
@keyframes goShine { 30%, 100% { transform: translateX(100%); } }
.mp-go[data-off="up"] .mp-go-arrow::before { content: '▲'; } .mp-go[data-off="down"] .mp-go-arrow::before { content: '▼'; }
.mp-go-arrow { font-style: normal; font-size: 16px; }
.mp-side { display: none; }
.lp-card.lp-in { animation: lpIn .38s var(--ease-spring); }
@keyframes lpIn { from { transform: scale(.15); opacity: 0; } 60% { opacity: 1; } }
.lp-stars .ms.off { fill: #00000010; stroke: #d8cfb8; stroke-dasharray: 6 5; }
.lp-tag { display: inline-block; border-radius: 999px; background: #2a9d991a; color: var(--teal-depth); font: 800 15px "Baloo 2", sans-serif; padding: 4px 14px; margin: 2px 0 14px; }
.card-title.boss-title { background: #c0392b; color: #fff; }
.lp-card .btn-play { position: relative; overflow: hidden; }
.lp-card .btn-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, #ffffff60 50%, transparent 60%); transform: translateX(-100%); animation: goShine 2.8s 1s ease-in-out infinite; }
.lp-card .btn-play.sink { transform: translateY(4px); box-shadow: none; }
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) {
  .mp-side { display: flex; flex-direction: column; gap: 6px; position: absolute; top: 100px; width: 250px; padding: 18px; border-radius: 24px; background: #fffdf5e0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--e-3); z-index: 4; animation: sideIn .5s .3s var(--ease-spring) backwards; text-align: left; }
  .mp-side.l { left: max(24px, calc(50% - 230px - 290px)); } .mp-side.r { right: max(24px, calc(50% - 230px - 290px)); }
  @keyframes sideIn { from { opacity: 0; transform: translateY(20px); } }
  .mp-side small { font-weight: 800; letter-spacing: .1em; color: var(--teal-depth); font-size: 12px; }
  .mp-side b { font: 800 26px/1.1 "Baloo 2", sans-serif; color: var(--ink); margin-bottom: 4px; }
  .mp-side .ms-row { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink-2); }
  .mp-side .ms-row .mp-lockbar { flex: 1; margin: 0; } .mp-side .ms-row svg { width: 20px; height: 20px; fill: #f2b632; }
  .mp-side .side-go { margin-top: 10px; width: 100%; font-size: 20px; }
  .side-peek { position: relative; height: 120px; border-radius: 16px; background-size: cover; background-position: center; filter: saturate(.55); box-shadow: inset 0 0 0 3px #fff; display: grid; place-items: center; }
  .side-peek span { font-size: 30px; filter: none; }
  .side-left { letter-spacing: 0 !important; color: var(--ink-2) !important; font-size: 14px !important; }
  .mp-go { display: none; }
  .mp-bar { padding: 14px 28px; } .mp-title b { font-size: 26px; } .mp-stars { font-size: 20px; padding: 8px 16px; }
  .mr-node:not(.lock):hover { filter: brightness(1.06) drop-shadow(0 0 6px #ffe08a); }
}
.reduce-motion .mr-node.enter, .reduce-motion .mr-node .rip, .reduce-motion .fish, .reduce-motion .fsplash, .reduce-motion .mp-fog::before, .reduce-motion .mp-go.in, .reduce-motion .mr-sign { animation: none; }
.mr-node .crownp { fill: #f2c46b; stroke: #b8741a; stroke-width: 2; stroke-linejoin: round; }
.lp-stars .ms { transform-box: fill-box; transform-origin: center; }
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) { .mp-side .side-go { min-width: 0; padding-left: 12px; padding-right: 12px; } }


/* Clean river: perspective lounge at home, overhead navigation on the map. */
:root { --play: #e98b6e; --play-depth: #cf735b; }
html, body { background: #39c7d9; }
#app { max-width: none; }
.bg-soften { display: none; }
body.world-art .river-foreground { display: block; }
body[data-screen="home"] .river-foreground { filter: none; }
.reeds { width: clamp(135px, 20vw, 330px); }
#home.screen {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px minmax(95px, 1fr) minmax(120px, 1.25fr) auto auto 70px;
  gap: 14px; justify-items: center; align-items: center;
  width: min(620px, 100%); max-width: none; margin: auto;
  padding: max(10px, env(safe-area-inset-top)) 20px 0;
}
#home .bar { grid-row: 1; height: 48px; gap: 10px; }
#home .bar .icon-btn { width: 44px; height: 44px; }
#home .coins { min-width: 96px; font-size: 22px; }
#home .streak-pill { margin-left: auto; }
#home .coins { margin-left: 0; }
#home .logo {
  grid-row: 2; align-self: center; margin: 0; width: min(80vw, 380px);
  animation: none; transform: none;
}
#home .logo::after, #home .logo-wave, #home .logo-top, #home .logo-main { display: none; }
#home .logo-img { display: block; width: 100%; height: auto; max-height: 22svh; object-fit: contain; animation: none; }
.home-mascot { grid-row: 3; position: relative; width: min(48vw, 200px); height: 100%; max-height: 220px; min-height: 0; pointer-events: none; }
.home-otter { position: relative; display: block; height: 100%; max-width: 100%; margin: auto; object-fit: contain; animation: loungeFloat 5.5s ease-in-out infinite; }
.home-wake { position: absolute; width: 155%; max-width: none; height: auto; left: -27.5%; bottom: 25%; animation: loungeWake 5.5s ease-in-out infinite; }
@keyframes loungeFloat { 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes loungeWake { 50% { transform: scale(1.05); opacity: .65; } }
#home .next-card {
  grid-row: 4; margin: 0; width: min(360px, 100%); min-height: 78px;
  padding: 12px 18px; border: 0; background: #fffdf5f5; box-shadow: 0 2px 0 #d9e2cf;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 10px;
  gap: 8px 14px; border-radius: 22px;
}
#home .nc-text { min-width: 0; gap: 2px; }
#home .nc-text small { font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
#home .nc-text b { font-size: clamp(19px, 4.7vw, 26px); line-height: 1.1; }
#home .nc-count { position: static; align-self: center; padding: 3px 10px; border-radius: 12px; box-shadow: none; background: #dfede4; color: var(--ink); font-size: 16px; }
.nc-progress { grid-column: 1 / -1; appearance: none; -webkit-appearance: none; border: 0; width: 100%; height: 10px; overflow: hidden; border-radius: 10px; background: #e4e1cf; color: var(--coral); }
.nc-progress::-webkit-progress-bar { background: #e4e1cf; border-radius: 10px; }
.nc-progress::-webkit-progress-value { background: var(--coral); border-radius: 10px; }
.nc-progress::-moz-progress-bar { background: var(--coral); border-radius: 10px; }
#home .home-actions { grid-row: 5; margin: 0; width: min(360px, 100%); gap: 12px; }
#home .btn-play { width: 100%; min-width: 0; min-height: 58px; padding: 10px 14px; font-size: clamp(22px, 5.9vw, 29px); border-radius: 24px; animation: none; white-space: nowrap; }
#home .btn-play .tri { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
#home .row-btns { display: flex; width: 100%; gap: 12px; }
#home .row-btns .btn { flex: 1; min-width: 0; min-height: 44px; padding: 8px 9px; gap: 8px; font-size: 17px; border-radius: 18px; white-space: nowrap; }
#home .row-btns .vid { transform: scale(.78); margin-right: 3px; }
#home .tabbar { grid-row: 6; align-self: end; width: calc(100% + 40px); height: 70px; margin: 0 -20px; border: 0; border-radius: 22px 22px 0 0; background: #fffdf5f5; box-shadow: none; }
#home .tabbar button.on { background: #e0f0e7; }
#home .tabbar .tab-ico svg { width: 26px; height: 26px; }
#home .tabbar .tab-lbl { font-size: 12px; }
#game.screen { max-width: 620px; margin: auto; }
#game .game-logo { object-fit: contain; }
#map-screen { background: #bad58a; }
#map-screen .mp-bar { background: #fffdf5f5; box-shadow: none; }
#map-screen .mp-sec { background-size: 100% auto; background-repeat: repeat-y; background-color: #bad58a; }
#map-screen .mr-bank { stroke-width: 164; opacity: 1; }
#map-screen .mr-foam { stroke: #fff1cd; stroke-width: 151; stroke-dasharray: none; }
#map-screen .mr-water { stroke: #39c5da; stroke-width: 142; }
#map-screen .mr-mid { stroke: #60cfdf; stroke-width: 84; opacity: .4; }
#map-screen .mr-shine, #map-screen .spark, #map-screen .fish, #map-screen .fsplash, #map-screen .drift { display: none; }
#map-screen .mr-node { animation: none; filter: none; }
#map-screen .node-hit { fill: transparent; pointer-events: all; }
#map-screen .stone-art { pointer-events: none; }
#map-screen .mr-node .ring, #map-screen .mr-node .ring2, #map-screen .mr-node .rip, #map-screen .mr-node .msbg { display: none; }
#map-screen .mr-node.cur .stone-art { filter: drop-shadow(2px 0 #e98b6e) drop-shadow(-2px 0 #e98b6e) drop-shadow(0 2px #e98b6e) drop-shadow(0 -2px #e98b6e); }
#map-screen .mr-node.cur text { fill: var(--ink); }
#map-screen .mr-node.lock .stone-art { opacity: .8; }
#map-screen .mr-node.lock text { fill: #586a67; }
#map-screen .mr-node .ms.off { fill: #c6cbb7; stroke: none; }
#map-screen .mr-node:focus-visible .stone-art { filter: drop-shadow(0 0 3px #103f4b); }
#map-screen .mr-node:focus-visible { outline: none; }
#map-screen .mr-sign { animation: none; }
#map-screen .mr-sign .board { filter: none; }
#map-screen .mr-boat { cursor: pointer; }
#map-screen .map-otter-sprite { pointer-events: visiblePainted; }
#map-screen .mp-sky, #map-screen .mp-fog::before, #map-screen .mp-fog::after { display: none; }
#map-screen .mp-fog { background: #f4f7e8c9; backdrop-filter: blur(2px) saturate(.5); -webkit-backdrop-filter: blur(2px) saturate(.5); border-radius: 0 0 46% 8% / 0 0 35px 12px; }
#map-screen .mp-go { box-shadow: 0 3px 0 var(--coral-depth); font-size: 21px; }
#map-screen .mp-go.in, #map-screen .mp-go::after { animation: none; }
#map-screen .mp-side { box-shadow: 0 2px 0 #d5dfcb; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #home.screen {
    width: min(1120px, calc(100% - 80px)); padding: max(16px, env(safe-area-inset-top)) 0 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 56px minmax(115px, 1fr) minmax(150px, 1.25fr) 126px 76px;
    column-gap: 28px; row-gap: 18px;
  }
  #home .bar { grid-column: 1 / -1; height: 56px; }
  #home .bar .icon-btn { width: 50px; height: 50px; }
  #home .logo { grid-column: 1 / -1; width: min(42vw, 460px); }
  #home .logo-img { max-height: 23svh; }
  #home .home-mascot { grid-column: 1 / -1; width: 300px; max-height: 31svh; }
  #home .next-card { grid-column: 1; grid-row: 4; justify-self: end; width: min(390px, 100%); min-height: 102px; padding: 16px 22px; }
  #home .nc-text b { font-size: 27px; }
  #home .nc-text small { font-size: 12px; }
  #home .home-actions { grid-column: 2; grid-row: 4; justify-self: start; width: min(390px, 100%); }
  #home .btn-play { font-size: 27px; min-height: 62px; }
  #home .row-btns .btn { font-size: 18px; min-height: 43px; }
  #home .tabbar { grid-column: 1 / -1; grid-row: 5; width: 500px; height: 76px; margin: 0; border-radius: 22px; }
  #game.screen { max-width: 1360px; width: calc(100% - 48px); grid-template-columns: minmax(0, 680px) minmax(280px, 360px); column-gap: clamp(28px, 4vw, 70px); }
  #map-screen .mp-side { width: 238px; }
  #map-screen .mp-side.l { left: max(24px, calc(50% - 600px)); }
  #map-screen .mp-side.r { right: max(24px, calc(50% - 600px)); }
}
@media (max-height: 700px) {
  #home.screen { gap: 9px; grid-template-rows: 42px minmax(64px, 1fr) minmax(65px, 1fr) auto auto 58px; padding-top: 7px; }
  #home .logo-img { max-height: 18svh; }
  #home .home-mascot { max-height: 19svh; }
  #home .next-card { min-height: 65px; padding: 9px 15px; gap: 6px; }
  #home .nc-text small { display: none; }
  #home .home-actions { gap: 9px; }
  #home .btn-play { min-height: 48px; font-size: 23px; padding: 7px 10px; }
  #home .row-btns .btn { min-height: 38px; font-size: 15px; padding: 6px; }
  #home .tabbar { height: 58px; }
  #home .tabbar .tab-ico svg { width: 23px; height: 23px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) and (max-height: 700px) {
  #home.screen { grid-template-rows: 46px minmax(80px, 1fr) minmax(70px, 1fr) 102px 60px; padding-bottom: 12px; }
  #home .next-card, #home .home-actions { grid-row: 4; }
  #home .tabbar { grid-row: 5; }
}
@media (max-width: 360px) {
  #home.screen { padding-left: 12px; padding-right: 12px; gap: 10px; }
  #home .coins { min-width: 86px; font-size: 19px; }
  #home .streak-pill { padding: 5px 10px; }
  #home .nc-text b { font-size: 19px; }
  #home .row-btns .btn { font-size: 15px; gap: 5px; }
  #home .tabbar { width: calc(100% + 24px); margin: 0 -12px; }
}
.reduce-motion .home-otter, .reduce-motion .home-wake, .reduce-motion .home-mascot, .reduce-motion .reeds img { animation: none; }
@media (prefers-reduced-motion: reduce) { .home-otter, .home-wake { animation: none; } }

@media (max-width: 899px) and (max-height: 480px) and (min-aspect-ratio: 4/3) {
  #home.screen { width: min(820px, 100%); grid-template-columns: 1fr 1fr; grid-template-rows: 40px minmax(0, 1fr) minmax(0, 1fr) 56px; column-gap: 24px; row-gap: 8px; padding-bottom: 0; }
  #home .bar { grid-column: 1 / -1; grid-row: 1; height: 40px; }
  #home .logo { grid-column: 1; grid-row: 2; width: min(280px, 100%); }
  #home .logo-img { max-height: 25svh; }
  #home .home-mascot { grid-column: 1; grid-row: 3; max-height: 26svh; width: 130px; }
  #home .next-card { grid-column: 2; grid-row: 2; width: 100%; }
  #home .home-actions { grid-column: 2; grid-row: 3; }
  #home .tabbar { grid-column: 1 / -1; grid-row: 4; width: min(480px, 100%); margin: 0; height: 56px; border-radius: 18px 18px 0 0; }
  #game.screen { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: 40px 0 minmax(0, 1fr) 63px; grid-template-areas: "bar bar" "preview clues" "board clues" "hints clues"; gap: 5px 18px; padding: 7px 24px; align-items: stretch; }
  #game .bar { grid-area: bar; height: 40px; }
  #game .bar .icon-btn { width: 38px; height: 38px; }
  #game .level-pill { font-size: 17px; }
  #game #board-wrap { grid-area: board; }
  #game #preview { grid-area: preview; height: 0; margin: 0; }
  #game #clues { grid-area: clues; width: 100%; height: auto; margin: 0; overflow-y: auto; padding: 5px; mask-image: none; -webkit-mask-image: none; }
  #game #clue-track { flex-direction: column; height: auto; gap: 7px; transform: none !important; }
  #game .clue { width: 100%; height: auto; min-height: 56px; padding: 8px; }
  #game .clue-text { font-size: 15px; }
  #game .hints { grid-area: hints; padding: 0; gap: 18px; }
  #game .hint { width: 60px; height: 61px; }
  #game .hint-ico { width: 45px; height: 45px; }
  #game .price { font-size: 12px; }
}

#modal .card .btn { min-width: 0; }

/* Keep the floating action outside the map's scrollable touch area. */
#map-screen { padding-bottom: calc(82px + env(safe-area-inset-bottom)); background: #fffdf5; }
#map-screen .mr-node.cur text { stroke: none; }
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) { #map-screen { padding-bottom: 0; } }

/* Feedback pass: contact with water, clear control groups and matching nested radii. */
#home .home-mascot { width: min(84vw, 350px); max-height: 230px; }
#home .home-otter { width: 100%; height: 100%; animation-name: afloatDrift; }
@keyframes afloatDrift { 50% { transform: translateY(-2px) rotate(-.6deg); } }
#home .tabbar { padding: 6px; gap: 0; overflow: hidden; margin-bottom: 0 !important; border-radius: 24px !important; }
#home .tabbar button, #home .tabbar button.on { margin: 0; padding: 0; border-radius: 18px; }
#home .tabbar button.on { background: #deeee5; }
#map-screen .mr-node, #map-screen .mr-node:focus, #map-screen .mr-node:focus-visible, #map-screen .mr-boat:focus { outline: none !important; }
#map-screen .mr-node:focus-visible .stone-art { filter: drop-shadow(2px 0 #216d6a) drop-shadow(-2px 0 #216d6a) drop-shadow(0 2px #216d6a) drop-shadow(0 -2px #216d6a); }
#map-screen .mr-node text { stroke: none; }
#map-screen .ms.off { fill: #ece5d2; stroke: #dcd2b8; stroke-width: 2.5; stroke-dasharray: none; stroke-linejoin: round; }
#map-screen .ms.on { fill: #f7c443; stroke: #d69a26; stroke-width: 2.5; stroke-dasharray: none; stroke-linejoin: round; }
.lp-card .lp-stars { display: flex; width: auto; height: auto; min-height: 110px; justify-content: center; margin: 16px auto 12px !important; }
.lp-card .lp-stars svg { animation: none !important; }
#map-screen .mr-chest .halo { display: none; }
#map-screen .mr-chest .cbar { fill: #ffffffb3; }
#map-screen .mr-chest .cfill { fill: #e9b552; }
#map-screen .mr-chest .cnum { fill: var(--ink); stroke: none; font: 800 12px Nunito, sans-serif; }
#map-screen .mp-fog { pointer-events: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
#map-screen .mp-lock { pointer-events: auto; top: auto; bottom: 95px; width: 210px; padding: 12px 16px; border-radius: 22px; box-shadow: 0 2px 0 #d5dfcb; animation: none; gap: 4px; }
#map-screen .mp-lock b { font-size: 18px; text-align: center; }
#map-screen .mp-lock span { font-size: 18px; }
#map-screen .mp-lock small { font-size: 13px; }
#map-screen .mp-lockbar::before { background: var(--coral); }
#map-screen .mp-sec { background-image: none; background-repeat: no-repeat; background-size: auto; mask-image: linear-gradient(#000 calc(100% - var(--blend, 200px)), transparent); -webkit-mask-image: linear-gradient(#000 calc(100% - var(--blend, 200px)), transparent); }
#map-screen .mp-sec[data-pi="0"] { mask-image: none; -webkit-mask-image: none; }
#map-screen .mp-scenery { position: absolute; inset: 0; margin: 0 auto; width: min(100%, 1200px); background-size: 100% auto; background-position: center bottom; background-repeat: repeat-y; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#map-screen .side-peek { background-size: cover; box-shadow: none; filter: none; }
#toast { background: #fffdf5; color: var(--ink); box-shadow: 0 3px 0 #d5dfcb; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) and (min-height: 701px) {
  #home.screen { width: min(1280px, calc(100% - 80px)); grid-template-rows: 56px minmax(140px, .95fr) minmax(190px, 1.15fr) 126px 84px; gap: 28px 36px; }
  #home .logo { width: min(48vw, 620px); }
  #home .logo-img { max-height: 29svh; }
  #home .home-mascot { width: min(38vw, 520px); max-height: 34svh; }
  #home .next-card { width: min(420px, 100%); }
  #home .home-actions { width: min(440px, 100%); }
  #home .tabbar { width: 560px; height: 80px; }
}
@media (max-height: 700px) { #home .home-mascot { max-height: 23svh; } }
@media (max-width: 899px) and (max-height: 480px) and (min-aspect-ratio: 4/3) { #home .home-mascot { width: 190px; max-height: 26svh; } }
.reduce-motion #home .home-otter { animation: none; }

#home .logo { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
#home .logo-img { height: 100%; }
#map-screen .mr-sign .t0 { font-size: 8px; }
#map-screen .mr-sign .t1 { font-size: 12px; }
#map-screen .mr-bank { stroke: #e8d6a0 !important; }
.lake-details { display: none; position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
body[data-screen="home"] .lake-details { display: block; }
.lake-lilies { position: absolute; width: clamp(80px, 10vw, 150px); height: auto; animation: liliesDrift 7s ease-in-out infinite; }
.lake-lilies-left { left: 7%; top: 49%; }
.lake-lilies-right { right: 9%; top: 43%; width: clamp(65px, 8vw, 115px); animation-delay: -3s; }
@keyframes liliesDrift { 50% { transform: translate(3px, 2px) rotate(1deg); } }
.reduce-motion .lake-lilies { animation: none; }
@media (max-width: 700px) { .lake-lilies-left { left: -16px; top: 53%; width: 90px; } .lake-lilies-right { right: -14px; top: 43%; width: 65px; } }
@media (prefers-reduced-motion: reduce) { .lake-lilies { animation: none; } }