:root {
  --ink: #34406e;
  --ink-soft: #6b76a6;
  --cream: #fff9ef;
  --cream-depth: #dccbb5;
  --play: #ff8a3d;
  --play-depth: #d4601c;
  --teal: #22b8a7;
  --teal-depth: #138577;
  --blue: #4e6cf2;
  --blue-depth: #3046b8;
  --gold: #ffc53d;
  --font: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7fd3e6; font-family: var(--font); color: var(--ink); }
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; background: none; padding: 0; }
canvas#bg, canvas#fx { position: fixed; inset: 0; width: 100%; height: 100%; }
canvas#fx { pointer-events: none; z-index: 50; }
#app { position: fixed; inset: 0; margin: 0 auto; max-width: 480px; z-index: 1; touch-action: none; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); transition: opacity .35s, transform .35s; }
.hidden { display: none !important; }

/* ---------- barra superior ---------- */
.bar { width: 100%; display: flex; align-items: center; gap: 10px; height: 52px; flex: none; }
.icon-btn { width: 48px; height: 48px; border-radius: 14px; background: var(--blue); box-shadow: 0 5px 0 var(--blue-depth), 0 8px 14px #0002;
  display: grid; place-items: center; transition: transform .1s; }
.icon-btn svg { width: 26px; height: 26px; fill: #fff; }
.icon-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blue-depth); }
.coins { margin-left: auto; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 22px; padding: 4px 16px 4px 6px;
  box-shadow: 0 4px 0 #c9d3f0, 0 6px 12px #0002; font-weight: 800; font-size: 22px; min-width: 110px; }
.coins b { flex: 1; text-align: center; }
.coins.bump { animation: bump .25s; }
.coin-ico { display: inline-block; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0 12%, #ffd34d 13% 55%, #f0a51c 56% 70%, #c97b0d 71%); box-shadow: inset 0 -2px 0 #0002; position: relative; }
.coin-ico::after { content: ''; position: absolute; inset: 30%; border: 3px solid #c97b0d55; border-radius: 3px; transform: rotate(45deg); }
.coins .coin-ico.flash { animation: flash .3s; }
@keyframes bump { 50% { transform: scale(1.12); } }
@keyframes flash { 50% { filter: brightness(2.2); transform: scale(1.25); } }
.level-pill { background: #ffffffd9; border-radius: 16px; padding: 4px 16px; font-weight: 800; font-size: 20px; box-shadow: 0 4px 0 #c9d3f0; }

/* ---------- botões grandes ---------- */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 22px; color: #fff;
  font-weight: 800; font-size: 30px; padding: 12px 28px; text-shadow: 0 2px 0 #0003; transition: transform .1s, box-shadow .1s; }
.btn:active { transform: translateY(5px); }
.btn-play { background: linear-gradient(#ffa25e, var(--play)); box-shadow: 0 7px 0 var(--play-depth), 0 12px 22px #0003; min-width: 270px; }
.btn-play:active { box-shadow: 0 2px 0 var(--play-depth); }
.btn-play .tri { width: 0; height: 0; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; filter: drop-shadow(0 2px 0 #0003); }
.btn-teal { background: linear-gradient(#3ed3c1, var(--teal)); box-shadow: 0 6px 0 var(--teal-depth), 0 10px 18px #0002; font-size: 22px; }
.btn-teal:active { box-shadow: 0 1px 0 var(--teal-depth); }
.btn-blue { background: linear-gradient(#6d86ff, var(--blue)); box-shadow: 0 6px 0 var(--blue-depth), 0 10px 18px #0002; font-size: 22px; }
.btn-blue:active { box-shadow: 0 1px 0 var(--blue-depth); }
.btn-free { background: linear-gradient(#6d86ff, var(--blue)); box-shadow: 0 6px 0 var(--blue-depth), 0 10px 18px #0002; font-size: 20px; padding: 10px 22px; }
.btn-free:disabled { filter: grayscale(.7) opacity(.75); }
.vid { width: 30px; height: 20px; border-radius: 5px; background: #fff; position: relative; flex: none; }
.vid::after { content: ''; position: absolute; right: -9px; top: 4px; border-right: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.btn-teal .vid { background: #fff; }

/* ---------- home ---------- */
.logo { margin-top: 9vh; text-align: center; animation: float 4s ease-in-out infinite; }
.logo-top { font-size: 28px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 #2a8fa6, 0 6px 14px #0003; letter-spacing: 3px; }
.logo-main { font-size: 74px; line-height: .9; font-weight: 800; color: #fff; letter-spacing: 1px;
  text-shadow: 0 4px 0 #1f9fb4, 0 8px 0 #157c8f, 0 14px 24px #0004; }
.logo-wave { width: 220px; height: 22px; fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 3px 0 #1f9fb4); }
@keyframes float { 50% { transform: translateY(-8px); } }
.home-actions { margin-top: auto; margin-bottom: 12vh; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.btn-play.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }

/* ---------- pistas ---------- */
#clues { width: calc(100% + 28px); margin-top: 8px; overflow: hidden; flex: none; height: 118px; touch-action: none; }
#clue-track { display: flex; gap: 14px; height: 100%; transition: transform .38s cubic-bezier(.2,.9,.25,1.15); will-change: transform; }
.clue { flex: none; width: 76%; height: 100px; background: #fff; border-radius: 22px; box-shadow: 0 6px 0 #c9d3f0, 0 10px 20px #0002;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 16px; text-align: center; transition: transform .3s, opacity .3s; }
.clue:not(.current) { transform: scale(.92); opacity: .75; }
.clue-text { font-weight: 700; font-size: 22px; line-height: 1.12; }
.clue-ans { display: flex; gap: 3px; margin-top: 6px; min-height: 0; }
.clue-ans span { min-width: 20px; height: 24px; border-radius: 6px; font-size: 16px; font-weight: 800; display: grid; place-items: center; padding: 0 3px;
  background: #eef1fb; color: var(--ink-soft); }
.clue-ans.solved span { color: #fff; animation: chipIn .35s backwards; }
.clue.glow { animation: glow .9s; }
@keyframes glow { 30% { box-shadow: 0 6px 0 #c9d3f0, 0 0 0 6px #ffe48a, 0 0 40px 10px #ffe48a; } }
.clue.done .clue-text { opacity: .55; }

/* ---------- prévia ---------- */
#preview { height: 44px; display: flex; gap: 4px; align-items: center; justify-content: center; flex: none; margin-top: 4px; }
#preview span { width: 32px; height: 36px; border-radius: 9px; background: #fff; box-shadow: 0 3px 0 #d6c8b4; display: grid; place-items: center;
  font-weight: 800; font-size: 22px; animation: chipIn .18s cubic-bezier(.3,1.6,.5,1); }
#preview.bad { animation: shake .35s; }
#preview.fly { transition: transform .45s cubic-bezier(.5,0,.3,1), opacity .45s; }
@keyframes chipIn { from { transform: scale(0); } }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }

/* ---------- tabuleiro ---------- */
#board-wrap { flex: 1; width: 100%; position: relative; min-height: 0; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* ---------- dicas ---------- */
.hints { display: flex; gap: 28px; justify-content: center; flex: none; padding-bottom: 6px; transition: opacity .3s; }
.hint { width: 92px; height: 104px; position: relative; display: flex; flex-direction: column; align-items: center; transition: transform .1s; }
.hint:active { transform: scale(.92); }
.hint-ico { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8fe7ff, #2c9ed8 70%);
  box-shadow: 0 6px 0 #1b6e9e, 0 10px 18px #0003, inset 0 0 0 5px #ffffff88; position: relative; }
.hint-ico.firefly::before { content: ''; position: absolute; left: 24px; top: 20px; width: 34px; height: 40px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 70%, #fffbd0 0 25%, #ffe34d 45%, #ffb21d 80%); box-shadow: 0 0 18px 6px #fff17a; }
.hint-ico.firefly::after { content: ''; position: absolute; left: 14px; top: 14px; width: 54px; height: 22px;
  background: radial-gradient(ellipse at 25% 50%, #ffffffcc 0 35%, transparent 37%), radial-gradient(ellipse at 75% 50%, #ffffffcc 0 35%, transparent 37%); }
.hint-ico.drop { background: radial-gradient(circle at 40% 35%, #b6f5e0, #19a88f 70%); box-shadow: 0 6px 0 #0d7564, 0 10px 18px #0003, inset 0 0 0 5px #ffffff88; }
.hint-ico.drop::before { content: ''; position: absolute; left: 25px; top: 18px; width: 32px; height: 32px; background: linear-gradient(135deg, #e9fbff, #5bc8ff);
  border-radius: 0 50% 50% 50%; transform: rotate(45deg); box-shadow: inset -4px -4px 0 #2a9de0; top: 24px; }
.price { position: absolute; bottom: 0; background: #fff; border-radius: 12px; padding: 0 10px 0 4px; display: flex; align-items: center; gap: 3px;
  font-weight: 800; font-size: 17px; box-shadow: 0 3px 0 #c9d3f0; }
.price .coin-ico { width: 20px; height: 20px; }
.price .coin-ico::after { border-width: 2px; }
.price.free { background: var(--teal); color: #fff; padding: 0 10px; }
.price.free .coin-ico { display: none; }
.hint.wiggle { animation: wiggle .7s; }
@keyframes wiggle { 20% { transform: rotate(-10deg) scale(1.08); } 40% { transform: rotate(9deg) scale(1.08); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.hint.disabled { filter: grayscale(.8) opacity(.6); }
#game.ending .hints, #game.ending #clues, #game.ending #preview, #game.ending .bar > :not(.coins) { opacity: 0; pointer-events: none; transition: opacity .35s; }
#debug-solve { position: absolute; right: 12px; bottom: 120px; width: 44px; height: 44px; border-radius: 50%; background: #000a; color: #fff; font-size: 22px; }

/* ---------- final de nível ---------- */
#end-layer { position: absolute; inset: 0; z-index: 20; }
#praise { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(0); background: linear-gradient(#ffb066, #ff8a3d);
  color: #fff; font-weight: 800; font-size: 40px; padding: 10px 36px; border-radius: 26px; white-space: nowrap;
  box-shadow: 0 7px 0 var(--play-depth), 0 16px 30px #0004; text-shadow: 0 3px 0 #0003; letter-spacing: 1px; }
#praise.show { animation: praiseIn .6s cubic-bezier(.3,1.7,.5,1) forwards; }
@keyframes praiseIn { from { transform: translate(-50%, -50%) scale(0) rotate(-8deg); } to { transform: translate(-50%, -50%) scale(1) rotate(0); } }
#skip { position: absolute; right: 14px; bottom: max(18px, env(safe-area-inset-bottom)); background: var(--blue); color: #fff; font-weight: 800;
  padding: 8px 18px; border-radius: 16px; box-shadow: 0 5px 0 var(--blue-depth); font-size: 18px; opacity: 0; animation: fadeIn .4s .6s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- modal ---------- */
#modal { position: absolute; inset: 0; z-index: 30; background: #1b2350aa; display: grid; place-items: center; padding: 20px; animation: fadeIn .25s; opacity: 0; animation-fill-mode: forwards; }
#modal .card { width: 100%; max-width: 380px; background: #fff; border-radius: 28px; padding: 54px 22px 24px; position: relative; text-align: center;
  box-shadow: 0 8px 0 #c9d3f0, 0 20px 50px #0005; animation: cardIn .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes cardIn { from { transform: scale(.6) translateY(40px); opacity: 0; } }
.card-title { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); background: #eef1fb; border-radius: 18px; padding: 8px 26px;
  font-weight: 800; font-size: 24px; white-space: nowrap; box-shadow: 0 5px 0 #c9d3f0; }
.card-x { position: absolute; right: -10px; top: -14px; width: 44px; height: 44px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 26px;
  font-weight: 800; box-shadow: 0 5px 0 var(--blue-depth); }
.card p { font-size: 20px; font-weight: 600; margin: 4px 0 16px; color: var(--ink-soft); line-height: 1.2; }
.card .btn { width: 100%; margin-top: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px; font-size: 22px; font-weight: 700; }
.toggle { width: 62px; height: 34px; border-radius: 20px; background: #cfd5ea; position: relative; transition: background .2s; }
.toggle::after { content: ''; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #0003; transition: left .2s cubic-bezier(.3,1.5,.5,1); }
.toggle.on { background: var(--blue); }
.toggle.on::after { left: 32px; }
.langs { display: flex; gap: 8px; margin-top: 6px; }
.langs button { flex: 1; padding: 10px 0; border-radius: 14px; background: #eef1fb; font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 #c9d3f0; }
.langs button.on { background: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-depth); }

/* pacote / trilha */
.pack-sub { font-weight: 800; color: var(--ink-soft); font-size: 18px; margin-top: -6px; }
.pack-done { font-size: 30px; font-weight: 800; letter-spacing: 3px; margin: 10px 0 6px; }
.trail { position: relative; height: 150px; margin: 4px -6px 0; }
.trail svg { width: 100%; height: 100%; overflow: visible; }
.trail .bed { fill: none; stroke: #dfe7f7; stroke-width: 18; stroke-linecap: round; }
.trail .flow { fill: none; stroke: url(#flowGrad); stroke-width: 18; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.trail .count { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); background: #7b5cf0; color: #fff; font-weight: 800; font-size: 22px;
  padding: 2px 18px; border-radius: 14px; box-shadow: 0 4px 0 #5537c4; }
.chest { width: 120px; height: 104px; display: block; margin: 0 auto; }
.trail .chest { position: absolute; right: 0; top: -8px; width: 82px; height: 72px; }
.chest-big { margin: 6px auto; width: 150px; height: 130px; }
.chest-big.shake { animation: chestShake .9s ease-in-out; }
.chest-big.open .lid { transform: translateY(-30px) rotate(-18deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.lid { transform-origin: 20% 60%; transform-box: fill-box; }
@keyframes chestShake { 10%,30%,50%,70% { transform: rotate(-6deg) scale(1.04); } 20%,40%,60%,80% { transform: rotate(6deg) scale(1.06); } 90% { transform: scale(1.18); } }
.reward { font-size: 46px; font-weight: 800; color: #ff9b2e; text-shadow: 0 3px 0 #c66a12; display: flex; align-items: center; justify-content: center; gap: 8px; animation: chipIn .4s cubic-bezier(.3,1.7,.5,1); }
.reward .coin-ico { width: 44px; height: 44px; }

/* ---------- dica de tutorial e mão ---------- */
#tip { position: absolute; left: 16px; right: 16px; z-index: 25; pointer-events: none; display: flex; justify-content: center; }
#tip .tip-text { background: #fff; border-radius: 20px; padding: 12px 18px; font-weight: 700; font-size: 20px; text-align: center; color: var(--blue);
  box-shadow: 0 6px 0 #c9d3f0, 0 0 0 4px #9fb0ff88, 0 14px 30px #0004; animation: cardIn .4s cubic-bezier(.3,1.5,.5,1); line-height: 1.15; }
#hand { position: absolute; z-index: 26; width: 56px; height: 64px; pointer-events: none; margin: -6px 0 0 -18px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64'%3E%3Cpath d='M20 4c3 0 5 2 5 5v18l3-1c3-1 5 1 6 3l2-1c3-1 5 1 6 3l2-1c3 0 5 2 5 5v9c0 9-6 17-16 17h-4c-6 0-10-3-13-8L6 39c-2-3 0-6 3-6 2 0 3 1 5 3l1 1V9c0-3 2-5 5-5z' fill='%23fff' stroke='%236a55e0' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 4px 6px #0004); transition: opacity .3s; }
.spot { position: relative; z-index: 27; box-shadow: 0 0 0 9999px #1b235099 !important; border-radius: 50%; }

/* ---------- anúncio simulado ---------- */
#ad { position: absolute; inset: 0; z-index: 60; background: #0d0f1a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#ad .ad-tag { position: absolute; left: 14px; top: max(14px, env(safe-area-inset-top)); font-size: 14px; background: #ffffff22; padding: 2px 10px; border-radius: 8px; letter-spacing: 1px; }
#ad .ad-x { position: absolute; right: 14px; top: max(12px, env(safe-area-inset-top)); width: 40px; height: 40px; border-radius: 50%; background: #ffffff26; color: #fff; font-size: 22px; font-weight: 800; }
#ad .ad-timer { position: absolute; right: 14px; top: max(16px, env(safe-area-inset-top)); width: 34px; height: 34px; border-radius: 50%; border: 3px solid #ffffff55; display: grid; place-items: center; font-size: 16px; }
#ad .ad-art { width: 220px; height: 220px; border-radius: 40px; background: conic-gradient(from 30deg, #ff6b6b, #ffc53d, #5acb6b, #4da3ff, #8e7cf0, #ff6b6b); animation: spin 6s linear infinite; margin-bottom: 22px; opacity: .85; }
#ad h3 { margin: 0; font-size: 28px; }
#ad p { margin: 6px 0 0; opacity: .7; font-size: 17px; }
#ad .ad-bar { position: absolute; left: 0; bottom: 0; height: 6px; background: var(--gold); width: 0; }
#ad .ad-msg { margin-top: 18px; font-size: 20px; font-weight: 800; color: var(--gold); min-height: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }

#toast { position: absolute; left: 50%; bottom: 22%; transform: translate(-50%, 20px); background: #1b2350e6; color: #fff; padding: 10px 20px; border-radius: 16px;
  font-weight: 700; font-size: 18px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 70; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- computador / paisagem ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #app { max-width: none; }
  .bar { height: 64px; }
  .icon-btn { width: 56px; height: 56px; }
  .coins { font-size: 26px; min-width: 140px; }
  .level-pill { font-size: 24px; }
  .logo { margin-top: 12vh; }
  .logo-main { font-size: 120px; }
  .logo-top { font-size: 40px; }
  .logo-wave { width: 340px; }
  .btn-play { font-size: 36px; min-width: 340px; padding: 16px 36px; }
  #game.screen { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 440px); grid-template-rows: 64px 56px minmax(0, 1fr) auto;
    grid-template-areas: "bar bar" "preview clues" "board clues" "hints clues"; column-gap: 36px; padding: 18px 48px 22px; align-items: stretch; justify-items: stretch; }
  #clues { align-self: start; max-height: 100%; }
  #game .bar { grid-area: bar; }
  #preview { grid-area: preview; height: 56px; margin: 0; }
  #preview span { width: 42px; height: 48px; font-size: 28px; border-radius: 12px; }
  #board-wrap { grid-area: board; }
  .hints { grid-area: hints; gap: 40px; }
  .hint { width: 110px; height: 122px; }
  .hint-ico { width: 96px; height: 96px; }
  #clues { grid-area: clues; width: 100%; height: auto; margin: 10px 0 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 20px; }
  #clue-track { flex-direction: column; gap: 14px; transform: none !important; height: auto; }
  .clue { width: 100%; height: auto; min-height: 88px; cursor: pointer; transition: transform .2s, opacity .3s, box-shadow .2s; }
  .clue:not(.current) { transform: none; opacity: .8; }
  .clue.current { box-shadow: 0 6px 0 #c9d3f0, 0 0 0 4px #7fd0ff, 0 10px 24px #0003; transform: translateX(-6px); }
  .clue:hover:not(.done) { transform: translateX(-6px); opacity: 1; }
  .clue-text { font-size: 21px; }
  #debug-solve { bottom: 30px; right: 30px; }
  #praise { font-size: 56px; padding: 14px 52px; }
  #modal .card { max-width: 440px; }
}
@media (hover: hover) {
  .icon-btn:hover, .btn:hover, .hint:hover, .langs button:hover, .card-x:hover { filter: brightness(1.08); transform: translateY(-2px); }
  .hint:hover .hint-ico { box-shadow: 0 8px 0 #0002, 0 14px 24px #0003, inset 0 0 0 5px #fff; }
  .btn:active, .icon-btn:active { transform: translateY(5px); }
}
@media (hover: hover) {
  #board { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M14 2C20 11 25 16 25 21a11 11 0 0 1-22 0c0-5 5-10 11-19z' fill='%235bc8ff' stroke='%23fff' stroke-width='2.5'/%3E%3Cellipse cx='10' cy='20' rx='2.5' ry='4' fill='%23e9fbff'/%3E%3C/svg%3E") 14 30, pointer; }
}
#preview span { animation: chipIn .18s cubic-bezier(.3,1.6,.5,1), bob 1.2s ease-in-out var(--d, 0s) infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
.float-word { position: absolute; z-index: 22; transform: translate(-50%, 0); pointer-events: none; font-weight: 800; font-size: 34px; white-space: nowrap;
  -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 4px 10px #0003; animation: floatUp 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
.float-word.combo { font-size: 44px; animation-name: floatCombo; }
@keyframes floatUp { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 18% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
@keyframes floatCombo { 0% { transform: translate(-50%, 0) scale(.2) rotate(-12deg); opacity: 0; } 25% { transform: translate(-50%, -30px) scale(1.3) rotate(6deg); opacity: 1; } 100% { transform: translate(-50%, -90px) scale(1) rotate(0); opacity: 0; } }

.hints { gap: 18px; }
.hint-ico.flow { background: radial-gradient(circle at 40% 35%, #c9b8ff, #6b52e0 70%); box-shadow: 0 6px 0 #4631a8, 0 10px 18px #0003, inset 0 0 0 5px #ffffff88; overflow: hidden; }
.hint-ico.flow::before, .hint-ico.flow::after { content: ''; position: absolute; left: 16px; right: 16px; height: 9px; border-radius: 9px; }
.hint-ico.flow::before { top: 28px; background: repeating-linear-gradient(90deg, #fff 0 10px, #e6dcff 10px 20px); animation: flowSlide 1.2s linear infinite; }
.hint-ico.flow::after { top: 46px; background: repeating-linear-gradient(90deg, #e6dcff 0 10px, #fff 10px 20px); animation: flowSlide 1.6s linear infinite reverse; }
@keyframes flowSlide { to { background-position: 20px 0; } }
.chest-big { position: relative; }
.chest-big::before { content: ''; position: absolute; inset: -60px; z-index: -1; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(#fff5c0aa 0 12deg, transparent 12deg 30deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: spin 8s linear infinite; transition: opacity .6s; }
.chest-big.crack::before, .chest-big.open::before { opacity: 1; }
.chest-big.crack .chest { filter: drop-shadow(0 0 14px #fff3a8); }
#curtain { position: fixed; inset: -10% 0; z-index: 80; pointer-events: none; transform: translateY(110%); background: linear-gradient(#5cc6e8, #2f8fd0 60%); }
#curtain::before { content: ''; position: absolute; left: 0; right: 0; top: -38px; height: 40px;
  background: radial-gradient(circle at 30px 40px, #5cc6e8 30px, transparent 31px) 0 0/60px 40px repeat-x; }
#curtain.in { transform: translateY(0); transition: transform .38s cubic-bezier(.6,0,.4,1); pointer-events: auto; }
#curtain.out { transform: translateY(-120%); transition: transform .45s cubic-bezier(.6,0,.4,1); }
@media (max-width: 899px) { .hint { width: 80px; } .hint-ico { width: 72px; height: 72px; } .hint-ico.firefly::before { left: 19px; top: 16px; } .hint-ico.drop::before { left: 20px; top: 19px; }
  .hint-ico.flow::before, .hint-ico.flow::after { left: 12px; right: 12px; } .hint-ico.flow::before { top: 24px; } .hint-ico.flow::after { top: 40px; } }

/* ---------- rodada 5: diário, roleta, loja ---------- */
.coins { cursor: pointer; }
.coins::after { content: '+'; position: absolute; right: -8px; top: -6px; width: 24px; height: 24px; border-radius: 8px; background: var(--teal); color: #fff;
  font-size: 20px; line-height: 22px; text-align: center; box-shadow: 0 3px 0 var(--teal-depth); }
.coins { position: relative; }
.row-btns { display: flex; gap: 12px; }
.btn-wheel { background: linear-gradient(#ffd25e, #f5a623); box-shadow: 0 6px 0 #c47d0e, 0 10px 18px #0002; font-size: 20px; padding: 10px 20px; }
.btn-wheel.ready { animation: pulse 1.4s ease-in-out infinite; }
.wheel-ico { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#ff6b6b 0 25%, #2ec4b6 0 50%, #8e7cf0 0 75%, #fff 0); border: 3px solid #fff; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.day { background: #eef1fb; border-radius: 14px; padding: 6px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; box-shadow: 0 4px 0 #c9d3f0; position: relative; }
.day small { font-size: 13px; color: var(--ink-soft); }
.day .coin-ico { width: 26px; height: 26px; }
.day.big { grid-column: span 2; background: #fff4d6; }
.day.now { background: #fff; box-shadow: 0 4px 0 #c9d3f0, 0 0 0 3px var(--play); animation: pulse 1.2s infinite; }
.day.got { opacity: .55; }
.day.got::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: var(--teal); }
.day.pop { animation: chipIn .4s cubic-bezier(.3,1.7,.5,1); }
.hint-ico.mini { width: 28px; height: 28px; position: absolute; right: 6px; top: 6px; box-shadow: none; }
.hint-ico.mini::before { display: none; }
.wheel-wrap { position: relative; width: 280px; height: 280px; margin: 0 auto 6px; }
.wheel-wrap canvas { width: 100%; height: 100%; filter: drop-shadow(0 8px 0 #0002); }
.wheel-pin { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid #34406e; filter: drop-shadow(0 3px 0 #0003); }
.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-item { background: #eef1fb; border-radius: 16px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; box-shadow: 0 5px 0 #c9d3f0; transition: transform .1s; }
.shop-item:active { transform: translateY(4px); box-shadow: 0 1px 0 #c9d3f0; }
.shop-item b { font-size: 22px; }
.shop-item span { background: var(--teal); color: #fff; border-radius: 10px; padding: 2px 10px; }
.shop-item.wide { grid-column: span 3; flex-direction: row; text-align: left; gap: 12px; padding: 12px; }
.shop-item.wide div { flex: 1; display: flex; flex-direction: column; }
.shop-item.wide small { color: var(--ink-soft); font-weight: 600; }
.vid.off { background: #ff6b6b; }
.vid.off::after { border-right-color: #ff6b6b; }

/* ---------- rodada 6: estrelas, mapa, chefe ---------- */
.pack-theme { font-weight: 800; color: var(--teal); font-size: 17px; margin-top: 2px; }
.stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 -4px; }
.stars i { display: block; width: 44px; height: 44px; background: #dfe4f3; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background .2s; }
.stars i:nth-child(2) { transform: translateY(-8px) scale(1.15); }
.stars i.on { background: linear-gradient(#ffe680, #ffb81c); animation: starIn .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.stars i.on:nth-child(2) { animation-name: starIn2; }
@keyframes starIn2 { from { transform: translateY(-8px) scale(0) rotate(-90deg); } to { transform: translateY(-8px) scale(1.15); } }
.level-pill.boss { background: linear-gradient(#ff8a8a, #ff5c5c); color: #fff; box-shadow: 0 4px 0 #c43c3c; animation: pulse 1.2s infinite; }
#home .bar .icon-btn + .icon-btn { margin-left: 4px; }
.map-scroll { max-height: 62vh; overflow-y: auto; margin: 0 -10px; }
.map-bed { fill: none; stroke: #dfe7f7; stroke-width: 22; stroke-linecap: round; }
.map-flow { fill: none; stroke: #3dc9e8; stroke-width: 22; stroke-linecap: round; }
.map-node circle { fill: #c9d3f0; stroke: #fff; stroke-width: 5; }
.map-node.done circle { fill: var(--teal); }
.map-node.cur circle { fill: var(--play); animation: pulse 1.4s infinite; transform-box: fill-box; transform-origin: center; }
.map-node text { text-anchor: middle; font-weight: 800; font-size: 22px; fill: #fff; font-family: var(--font); }
.map-node .map-name { fill: var(--ink); font-size: 19px; }
.map-node .map-sub { fill: var(--ink-soft); font-size: 14px; font-weight: 700; }
.map-node.lock .map-name, .map-node.lock .map-sub { opacity: .5; }

/* ---------- rodada 7 ---------- */
.hint-ico.svg::before, .hint-ico.svg::after { display: none; }
.hint-ico.svg svg { position: absolute; inset: 14%; width: 72%; height: 72%; filter: drop-shadow(0 2px 0 #0002); }
.hint:hover .hint-ico.svg svg { animation: wiggle .6s; }
.logo-main span { display: inline-block; animation: letterBob 2.6s ease-in-out calc(var(--i) * -0.22s) infinite; }
@keyframes letterBob { 50% { transform: translateY(-9px) rotate(var(--r, 3deg)); } }
.logo-main span:nth-child(even) { --r: -3deg; }
.logo { position: relative; animation: none; }
.logo::after { content: ''; position: absolute; left: 50%; top: -30px; width: 14px; height: 18px; margin-left: -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #e9fbff; box-shadow: inset -3px -3px 0 #5bc8ff; animation: dropFall 3.2s cubic-bezier(.5,0,1,.5) infinite; }
@keyframes dropFall { 0% { transform: translateY(0) scale(.6); opacity: 0; } 10% { opacity: 1; } 70% { transform: translateY(var(--fall, 150px)) scale(1); opacity: 1; } 71%, 100% { opacity: 0; transform: translateY(var(--fall, 150px)); } }
.logo-wave { animation: waveRipple 3.2s ease-out infinite; }
@keyframes waveRipple { 0%, 68% { transform: scaleX(1); } 76% { transform: scaleX(1.12) scaleY(1.6); } 100% { transform: scaleX(1); } }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { .logo::after { --fall: 210px; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.stats div { background: #eef1fb; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 4px 0 #c9d3f0; }
.stats small { color: var(--ink-soft); font-weight: 700; font-size: 14px; }
.stats b { font-size: 24px; }
#m-code { width: 100%; border-radius: 12px; border: 2px solid #c9d3f0; font-size: 12px; padding: 8px; resize: none; font-family: monospace; color: var(--ink); user-select: text; -webkit-user-select: text; }
.card .row-btns .btn { flex: 1; }
#modal .card { max-height: 92vh; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .logo-main span, .logo::after, .btn-play.pulse, .btn-wheel.ready { animation: none; } }

/* ---------- gauntlet rodada 1 ---------- */
#modal { padding: 44px 20px 20px; }
#modal .card { max-height: none; overflow: visible; }
.card-title { top: -26px; padding: 10px 30px; }
.card-x { right: -12px; top: -16px; }
.map-scroll { max-height: calc(88vh - 120px); padding: 40px 0 24px; }
.map-node text:not(.map-name):not(.map-sub) { text-anchor: middle; }
.map-node text { text-anchor: unset; }
.map-node .lock { fill: none; stroke: #8a94bd; stroke-width: 3; stroke-linejoin: round; }
.map-node.lock .map-name, .map-node.lock .map-sub { opacity: 1; fill: #8a94bd; }
.map-node.cur .map-name { font-size: 21px; }
#clues { height: 150px; padding: 16px 0; margin-top: -8px; }
.clue:not(.current) { opacity: 1; background: #f4f7fd; }
.clue:not(.current) .clue-text { color: #7c86ad; }
.clue-ans span { height: 30px; min-width: 26px; font-size: 20px; border-radius: 8px; box-shadow: 0 3px 0 #0002; }
.clue-ans:not(.solved) span { background: #dfe5f8; border: 2px solid #c3cdec; color: #34406e; font-size: 18px; }
#preview.fly { transition: transform .45s cubic-bezier(.5,0,.3,1), opacity .15s .3s; }
.float-word { font-size: 30px; -webkit-text-stroke: 7px #fff; animation-duration: .9s; }
.float-word span { color: #f5a300; font-size: .8em; }
.btn-link { display: block; margin: 12px auto 0; background: none; box-shadow: none; color: var(--ink-soft); font-size: 18px; font-weight: 700; padding: 8px; text-decoration: underline; }
.vid { width: 30px; height: 22px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Crect x='1' y='3' width='19' height='16' rx='5' fill='%23fff'/%3E%3Cpath d='M21 9l8-5v14l-8-5z' fill='%23fff'/%3E%3Ccircle cx='7' cy='9' r='2.2' fill='%23000' opacity='.18'/%3E%3C/svg%3E"); border-radius: 0; margin-right: 4px; }
.vid::after { display: none; }
.vid.off { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Crect x='1' y='3' width='19' height='16' rx='5' fill='%2334406e'/%3E%3Cpath d='M21 9l8-5v14l-8-5z' fill='%2334406e'/%3E%3Ccircle cx='14' cy='11' r='9.5' fill='none' stroke='%23ff5c5c' stroke-width='3'/%3E%3Cpath d='M7 18L21 4' stroke='%23ff5c5c' stroke-width='3'/%3E%3C/svg%3E"); }
.btn-wheel { color: #7a4a00; text-shadow: 0 1px 0 #fff6; }
.shop-item span, .langs button.on { background: #138577; }
.langs button.on { box-shadow: 0 4px 0 #0b5e54; }
.shop-item { position: relative; }
.shop-item em { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); background: var(--play); color: #fff; font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 0 var(--play-depth); }
.pack-theme { color: #0f7f72; }
.mini-drop { position: absolute; right: 6px; top: 4px; width: 30px; height: 30px; }
.mini-drop svg { width: 100%; height: 100%; }
#toast.top { top: 132px; bottom: auto; background: linear-gradient(#ff8a8a, #ff5c5c); font-size: 22px; padding: 10px 26px; box-shadow: 0 5px 0 #c43c3c; }
#toast.top.show { transform: translate(-50%, 0) scale(1); animation: chipIn .4s cubic-bezier(.3,1.7,.5,1); }
#game.ending #debug-solve { opacity: 0; pointer-events: none; }
#skip { z-index: 60; }
/* elogio como fita com pontas dobradas */
#praise { background: linear-gradient(#ffb36b, #ff8a3d); border-radius: 8px; padding: 12px 44px; font-size: 44px; -webkit-text-stroke: 2px #c4531a; paint-order: stroke fill;
  box-shadow: 0 6px 0 #c4531a, 0 18px 34px #0004; }
#praise::before, #praise::after { content: ''; position: absolute; top: 18px; width: 40px; height: 100%; background: #d4601c; z-index: -1; }
#praise::before { left: -30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
#praise::after { right: -30px; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
#praise.show { animation: praiseIn .45s cubic-bezier(.3,1.7,.5,1) forwards; }
/* baú com peso */
.chest { overflow: visible; }
.lid { transform-origin: 8% 100%; }
.chest-big { width: 200px; height: 172px; }
.chest-big.open .lid { transform: rotate(-34deg) translate(-2px, -4px); transition: transform .28s cubic-bezier(.3,1.6,.5,1); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #game.screen { row-gap: 14px; }
  .price { font-size: 20px; padding: 2px 12px 2px 6px; }
  .price .coin-ico { width: 24px; height: 24px; }
  .shop-item.wide small { font-size: 14px; }
  #home.screen { padding-left: 48px; padding-right: 48px; }
  .btn-free, .btn-wheel { font-size: 24px; padding: 14px 28px; }
}

/* ---------- gauntlet rodada 1b: home ---------- */
#home.screen { padding-bottom: 0; }
.logo { margin-top: 6vh; }
.next-card { margin-top: auto; width: min(340px, 100%); background: #ffffffd9; border-radius: 24px; padding: 14px 16px 12px; position: relative;
  box-shadow: 0 6px 0 #c9d3f099, 0 14px 30px #0002; display: grid; grid-template-columns: 1fr 70px; grid-template-rows: auto auto; align-items: center; }
.next-card .nc-text { display: flex; flex-direction: column; }
.next-card small { font-weight: 800; color: #0f7f72; font-size: 14px; }
.next-card b { font-size: 24px; line-height: 1; }
.next-card svg:not(.chest) { grid-column: 1 / 2; width: 100%; height: 44px; overflow: visible; }
.nc-bed { fill: none; stroke: #dfe7f7; stroke-width: 12; stroke-linecap: round; }
.nc-flow { fill: none; stroke: #3dc9e8; stroke-width: 12; stroke-linecap: round; }
.nc-count { position: absolute; left: 16px; bottom: -12px; background: #7b5cf0; color: #fff; font-weight: 800; padding: 1px 12px; border-radius: 12px; box-shadow: 0 3px 0 #5537c4; font-size: 15px; }
.nc-chest { grid-row: 1 / 3; grid-column: 2; }
.nc-chest .chest { width: 70px; height: 62px; animation: float 3s ease-in-out infinite; }
.home-actions { margin-top: 26px; margin-bottom: 18px; }
.tabbar { width: calc(100% + 28px); margin: 0 -14px; height: 76px; flex: none; display: flex; background: linear-gradient(#5b78f5, #4e6cf2); border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 0 #3046b8 inset, 0 -8px 24px #0002; padding: 0 8px max(0px, env(safe-area-inset-bottom)); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #dfe6ff; font-weight: 800; font-size: 14px; }
.tabbar svg { width: 30px; height: 30px; fill: currentColor; }
.tabbar button.on { background: #fff; color: #7b5cf0; border-radius: 18px 18px 0 0; margin-top: -10px; box-shadow: 0 -6px 14px #0002; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .next-card { width: 420px; }
  .tabbar { width: 520px; margin: 0 auto; }
}
.btn-teal .vid { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Crect x='1' y='3' width='19' height='16' rx='5' fill='%23fff'/%3E%3Cpath d='M21 9l8-5v14l-8-5z' fill='%23fff'/%3E%3Ccircle cx='7' cy='9' r='2.2' fill='%23000' opacity='.18'/%3E%3C/svg%3E"); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { #clues { height: auto; padding: 4px 10px 20px; margin-top: 10px; } }

/* ---------- gauntlet rodada 2 ---------- */
@keyframes cardIn { from { transform: scale(.6) translateY(40px); opacity: 0; } 40% { opacity: 1; } }
.plus-coins { position: absolute; left: 50%; top: calc(22% + 52px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 32px;
  color: #ff9b2e; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; animation: chipIn .35s cubic-bezier(.3,1.7,.5,1); }
.plus-coins .coin-ico { width: 34px; height: 34px; }
#praise { max-width: calc(100vw - 80px); font-size: clamp(30px, 9vw, 44px); }
@keyframes praiseIn { 0% { transform: translate(-50%, -50%) scale(0) rotate(-6deg); } 70% { transform: translate(-50%, -50%) scale(1.08) rotate(1deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); } }
.clue { justify-content: flex-start; padding-top: 16px; }
.clue-ans { min-height: 30px; }
.clue.glow { animation: glowIn .9s; }
@keyframes glowIn { 30% { outline: 4px solid #ffe48a; outline-offset: -2px; background: linear-gradient(#fffbe6, #fff); } }
.tabbar button.on { padding-top: 10px; }
.logo-top { -webkit-text-stroke: 2px #1f9fb4; paint-order: stroke fill; }
.pack-banner { position: absolute; left: 50%; top: -74px; transform: translateX(-50%); white-space: nowrap; background: linear-gradient(#ffb36b, #ff8a3d); color: #fff;
  font-weight: 800; font-size: 26px; padding: 10px 30px; border-radius: 10px; letter-spacing: 1px; box-shadow: 0 6px 0 #c4531a, 0 14px 26px #0004; text-shadow: 0 2px 0 #c4531a;
  animation: chipIn .45s cubic-bezier(.3,1.7,.5,1); }
.chest-big { width: 240px; height: 206px; margin: 4px auto -24px; }
.reward { margin-top: -6px; }
.btn-soft { background: #eef1fb; color: #4e6cf2; box-shadow: 0 5px 0 #c9d3f0; font-size: 20px; text-shadow: none; }
.trail { height: 120px; margin-top: -6px; }
.trail .marks circle { fill: #c9d3f0; stroke: #fff; stroke-width: 2; }
.trail .marks circle.done { fill: #3dc9e8; }
.trail .marks circle.now { fill: #7b5cf0; animation: pulse 1s infinite; transform-box: fill-box; transform-origin: center; }
.pack-done { font-size: 26px; letter-spacing: 2px; margin: 4px 0; }
.map-node .map-name, .map-node .map-sub { text-anchor: inherit; }
.map-scroll { padding-top: 56px; }
.shop-item em { top: -14px; }
.shop-item:nth-child(2) { transform: scale(1.06); border: 3px solid #ff9f43; }
.shop-item:nth-child(1) .coin-ico { width: 34px; height: 34px; }
.shop-item:nth-child(2) .coin-ico { width: 42px; height: 42px; margin-top: 6px; }
.shop-item:nth-child(3) .coin-ico { width: 52px; height: 52px; }
.day .stack { display: flex; height: 34px; align-items: flex-end; }
.day .stack .coin-ico { width: 24px; height: 24px; margin: 0 -7px; display: none; }
.day .stack.s1 .coin-ico:nth-child(1), .day .stack.s2 .coin-ico:nth-child(-n+2), .day .stack.s3 .coin-ico { display: inline-block; }
.day .stack.s2 .coin-ico:nth-child(2), .day .stack.s3 .coin-ico:nth-child(2) { transform: translateY(-6px); }
.day.big { background: linear-gradient(#fff4d6, #ffe2a3); box-shadow: 0 4px 0 #ffc53d; }
.day-chest .chest { width: 64px; height: 56px; }
.day.got { opacity: 1; background: #e3f6f2; }
.day.got::after { color: #0f7f72; background: #e3f6f2cc; border-radius: 14px; }
.row-ico { width: 22px; height: 22px; fill: #6b76a6; vertical-align: -4px; margin-right: 10px; }
#m-stats { margin-top: 22px; background: #eef1fb; color: #4e6cf2; box-shadow: 0 5px 0 #c9d3f0; text-shadow: none; }
#boss-tint { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .8s;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(20,20,60,0.32)), linear-gradient(rgba(45,63,122,0.35), rgba(255,154,118,0.15) 60%, transparent); }
body.boss #boss-tint { opacity: 1; }
#toast.top { top: 186px; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #toast.top { top: 96px; }
  #game.screen { grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 480px); column-gap: 24px; }
  .clue.current, .clue:hover:not(.done) { transform: none; }
  .clue.current::before { content: '▶'; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: #4e6cf2; font-size: 14px; }
  .clue { position: relative; }
  .float-word { font-size: 34px; }
  .shop-item span { font-size: 18px; padding: 4px 12px; }
  .shop-item b { font-size: 26px; }
  .shop-item.wide small { font-size: 15px; }
  /* home em duas colunas */
  #home.screen { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 64px 1fr auto auto; grid-template-areas: "bar bar" "logo logo" "card actions" "tabs tabs"; column-gap: 40px; align-items: center; }
  #home .bar { grid-area: bar; } #home .logo { grid-area: logo; margin-top: 0; } #home .next-card { grid-area: card; justify-self: end; margin: 0; width: 460px; }
  #home .home-actions { grid-area: actions; justify-self: start; margin: 0; } #home .tabbar { grid-area: tabs; width: 560px; justify-self: center; border-radius: 22px; margin: 24px 0 16px; box-shadow: 0 -4px 0 #3046b8 inset, 0 10px 24px #0003; }
  #home .tabbar button.on { margin-top: -10px; border-radius: 18px; }
}
.clue { justify-content: center; padding-top: 8px; }

/* ---------- gauntlet rodada 3 ---------- */
.chest-big { width: 220px; height: 190px; margin: 0 auto -6px; }
.chest-big .chest { width: 100%; height: 100%; }
#m-rew { margin-top: -8px; }
.reward .coin-ico.flash { animation: flash .3s; }
.map-scroll { padding-top: 40px; -webkit-mask: linear-gradient(transparent, #000 32px, #000 calc(100% - 32px), transparent); mask: linear-gradient(transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.map-node.lock .map-name, .map-node.lock .map-sub { fill: #7c86ad; }
.map-node .here rect { fill: #7b5cf0; }
.map-node .here text { fill: #fff; font-size: 14px; text-anchor: middle; }
.next-card { background: #fff; }
.clue { min-height: 100px; height: auto; justify-content: center; padding: 10px 16px; }
.clue-ans { min-height: 0; transition: height .2s; }
.clue-ans:empty { height: 0; margin: 0; }
.clue-ans:not(:empty) { height: 30px; }
.coins.lift { z-index: 31; position: relative; filter: drop-shadow(0 0 12px #ffe58a); }
.pack-coins { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 22px; font-weight: 800; color: #ff9b2e; animation: chipIn .35s .5s backwards cubic-bezier(.3,1.7,.5,1); }
.pack-coins .coin-ico { width: 22px; height: 22px; }
.trail .count { bottom: -18px; }
.trail { margin-bottom: 18px; }
.hints { background: radial-gradient(ellipse at 50% 70%, #1b4f6a44, transparent 70%); border-radius: 40px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.row > span { display: flex; align-items: center; }
.row-ico { width: 32px; height: 32px; padding: 5px; background: #eef1fb; border-radius: 10px; fill: #5a66a0; margin-right: 12px; flex: none; }
#boss-tint { background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(20,20,60,0.4)), linear-gradient(rgba(45,63,122,0.5), rgba(255,154,118,0.25) 60%, transparent); }
.crown { width: 22px; height: 17px; fill: #ffe58a; vertical-align: -2px; margin-right: 6px; filter: drop-shadow(0 1px 0 #c43c3c); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .clue { min-height: 76px; }
  .clue.current::before { display: none; }
  .clue.current { box-shadow: inset 6px 0 0 #4e6cf2, 0 6px 0 #c9d3f0, 0 0 0 4px #7fd0ff; }
  #modal .card { max-width: 560px; padding: 64px 32px 30px; }
  .card p { font-size: 22px; }
  .day small { font-size: 16px; } .day .stack .coin-ico { width: 30px; height: 30px; }
  .wheel-wrap { width: 360px; height: 360px; }
  .row { font-size: 24px; }
  #home.screen { grid-template-columns: 460px 400px; justify-content: center; }
  #home .next-card { min-height: 190px; justify-self: stretch; width: auto; }
  #home .home-actions { width: 400px; justify-self: stretch; }
  #home .btn-play { width: 100%; min-width: 0; }
  #home .row-btns { width: 100%; } #home .row-btns .btn { flex: 1; }
}

/* ---------- gauntlet rodada 4 ---------- */
.clue-ans { height: 0; transition: height .22s cubic-bezier(.3,1.3,.5,1); overflow: visible; }
.clue-ans.open, .clue-ans:not(:empty) { height: 30px; }
.btn { white-space: nowrap; }
.row > span { flex: 1; min-width: 0; text-align: left; line-height: 1.15; }
#modal { background: #1b2350cc; }
.trail { margin-bottom: 22px; }
.pack-banner::before, .pack-banner::after { content: ''; position: absolute; top: 14px; width: 36px; height: 100%; background: #d4601c; z-index: -1; }
.pack-banner::before { left: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.pack-banner::after { right: -26px; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.pack-banner { border-radius: 8px; animation: bannerIn .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes bannerIn { from { transform: translate(-50%, -40px) scale(.8); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.hints { background: radial-gradient(ellipse at 50% 80%, rgba(20,60,80,.35), transparent 70%); }
@media (max-width: 899px) { .row { font-size: 20px; } }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .card-title { font-size: 28px; padding: 10px 32px; }
  .pack-done { font-size: 34px; }
  .stars i { width: 60px; height: 60px; }
  .trail { height: 190px; margin: 4px 0 22px; }
  .trail .chest { width: 110px; height: 96px; right: -4px; }
  .day { padding: 10px 4px 12px; } .day b { font-size: 22px; }
  .row { padding: 12px 6px; }
  .pack-coins { font-size: 28px; }
  .row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .btn-free, .btn-wheel { font-size: 22px; padding: 14px 18px; gap: 10px; }
  .map-scroll svg { width: 380px; margin: 0 auto; display: block; overflow: visible; }
  #modal { align-items: start; padding-top: 18vh; }
  #game.screen { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 32px; padding: 18px 64px 22px; }
  .clue { min-height: 92px; } .clue-text { font-size: 22px; }
  #clues { align-self: center; }
  .hint-ico { width: 110px; height: 110px; } .hint { width: 120px; height: 136px; }
  .price { font-size: 22px; }
}

/* ---------- gauntlet rodada 5 ---------- */
.float-word.out { transition: transform .12s, opacity .12s; transform: translate(-50%, -16px) scale(.8) !important; opacity: 0 !important; animation: none; }
.float-word { animation-name: floatSoft; }
@keyframes floatSoft { 0% { transform: translate(-50%, 8px) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -4px) scale(1.12); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -24px) scale(1); opacity: 0; } }
.fly-chip { position: fixed; z-index: 55; display: grid; place-items: center; border-radius: 9px; font-weight: 800; font-size: 22px; font-family: var(--font); pointer-events: none;
  transition: transform .38s cubic-bezier(.5,0,.3,1); box-shadow: 0 3px 0 #0002; }
.clue-ans.pending span { visibility: hidden; }
.clue-ans span.land { visibility: visible; animation: chipIn .25s cubic-bezier(.3,1.7,.5,1); }
#m-next { margin-top: 26px; }
.next-card em { font-style: normal; font-size: 14px; color: #6b76a6; font-weight: 700; }
.next-card .nc-count { position: static; display: inline-block; vertical-align: 3px; margin-left: 6px; font-size: 13px; padding: 1px 10px; }
.nc-bed, .nc-flow { stroke-width: 14; }
.nc-marks circle { fill: #c9d3f0; stroke: #fff; stroke-width: 2; }
.nc-marks circle.done { fill: #3dc9e8; }
#toast.top { top: 206px; }
#tip .tip-text { font-size: 18px; padding: 10px 16px; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #toast.top { top: 96px; }
  #modal .card { max-height: calc(100vh - 150px); display: flex; flex-direction: column; }
  .map-scroll { flex: 1; min-height: 0; max-height: none; }
  .day small { font-size: 17px; } .day .stack .coin-ico { width: 38px; height: 38px; } .day b { font-size: 24px; } .day.big .chest { width: 96px; height: 84px; }
  .plus-coins { font-size: 34px; } .plus-coins .coin-ico { width: 34px; height: 34px; }
  .row-ico { width: 34px; height: 34px; padding: 6px; }
  #preview { align-self: end; margin-bottom: 10px; }
  .nc-chest .chest { width: 90px; height: 78px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #modal { padding-top: 70px; padding-bottom: 30px; }
  #modal .card { max-height: calc(100vh - 110px); }
}

/* ---------- gauntlet rodada 6 ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #modal { padding-top: 120px; }
  #modal .card { max-height: calc(100vh - 160px); }
  .reward { margin-top: 10px; }
  .row-ico { padding: 4px; }
}

/* ---------- gauntlet rodada 7 ---------- */
#praise { max-width: calc(100vw - 96px); font-size: clamp(26px, 8vw, 44px); }
@keyframes praiseIn { 0% { transform: translate(-50%, -50%) scale(0) rotate(-6deg); } 70% { transform: translate(-50%, -50%) scale(1.04) rotate(1deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); } }
#game.ending #clues { opacity: 1; transform: translateY(-140%); transition: transform .4s cubic-bezier(.5,0,.75,0); }
.card-title { max-width: calc(100% - 96px); font-size: clamp(18px, 5vw, 24px); overflow: hidden; text-overflow: ellipsis; }
.mini-drop { position: static; display: inline-block; width: 26px; height: 26px; vertical-align: middle; }
.day.big { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 6px; }
.day.big small { width: 100%; text-align: center; }
@media (max-width: 899px) { .logo { margin-top: 9vh; } .logo-main { font-size: 84px; } .logo-top { font-size: 32px; } }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #skip { font-size: 24px; padding: 12px 26px; }
  .card-title { font-size: 28px; }
  .next-card svg:not(.chest) { height: 80px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { #game.ending #clues { transform: translateX(130%); transition: transform .45s cubic-bezier(.5,0,.75,0); } }

/* ---------- juice rodada A ---------- */
.clue.hop { animation: hop .42s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 30% { transform: translateY(-10px) scale(1.04, .96); } 60% { transform: translateY(2px) scale(.98, 1.03); } }
#combo { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
#combo.on { opacity: 1; transform: scale(1); }
#combo b { font-size: 24px; font-weight: 800; color: #ff9b2e; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; line-height: 1; }
#combo i { width: 64px; height: 8px; border-radius: 6px; background: #ffffffaa; overflow: hidden; box-shadow: 0 2px 0 #0002; }
#combo i span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ffb84d, #ff7a3d); transform-origin: left; }
#combo.pop b { animation: comboPop .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes comboPop { 0% { transform: scale(1.8) rotate(-8deg); } 100% { transform: scale(1); } }
#combo-tint { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at 62% 56%, rgba(255,214,120,0.9), rgba(255,170,90,0.35) 45%, rgba(255,140,80,0.1) 80%); mix-blend-mode: soft-light; }
.coins.bump { animation: coinBump .32s cubic-bezier(.3,1.7,.5,1); }
@keyframes coinBump { 35% { transform: scale(1.18, .88); } 70% { transform: scale(.96, 1.06); } }
.chest-big.jump { animation: chestJump .38s cubic-bezier(.3,1.5,.5,1); }
@keyframes chestJump { 40% { transform: translateY(-34px) scale(.94, 1.08); } 80% { transform: translateY(4px) scale(1.08, .92); } }

/* ---------- juice rodada B/C: mascote ---------- */
.otter { position: absolute; left: 2px; bottom: 118px; width: 74px; height: 80px; z-index: 6; pointer-events: none; transform-origin: 50% 100%; }
.otter svg { width: 100%; height: 100%; overflow: visible; }
.otter .closed, .otter .q, .otter .z { opacity: 0; }
.otter .q { font: 800 26px var(--font); fill: #4e6cf2; }
.otter .z { font: 800 18px var(--font); fill: #6b76a6; }
.otter .eyes { animation: blink 4s infinite; transform-origin: 60px 44px; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.otter.idle .body { animation: breathe 2.6s ease-in-out infinite; transform-origin: 60px 124px; }
@keyframes breathe { 50% { transform: scale(1.02, .98); } }
.otter .tail { transform-origin: 86px 106px; animation: tailWag 1.8s ease-in-out infinite; }
@keyframes tailWag { 50% { transform: rotate(12deg); } }
.otter.cheer { animation: otterJump .6s cubic-bezier(.3,1.6,.5,1); }
.otter.cheer.big { animation: otterJump .5s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes otterJump { 30% { transform: translateY(-26px) scale(.95, 1.08); } 60% { transform: translateY(2px) scale(1.08, .92); } }
.otter.cheer .arm.l { animation: armUp .6s ease-out; transform-origin: 38px 80px; } .otter.cheer .arm.r { animation: armUpR .6s ease-out; transform-origin: 82px 80px; }
@keyframes armUp { 30%, 60% { transform: rotate(130deg); } } @keyframes armUpR { 30%, 60% { transform: rotate(-130deg); } }
.otter.cheer .mouth { d: path("M52 58q8 10 16 0z"); fill: #c0504d; }
.otter.think .head { animation: tilt 1.1s ease-in-out; transform-origin: 60px 70px; }
@keyframes tilt { 20%, 80% { transform: rotate(-14deg); } }
.otter.think .q { opacity: 1; animation: qPop .4s cubic-bezier(.3,1.8,.5,1); }
@keyframes qPop { from { transform: translateY(8px) scale(0); } }
.otter.think .mouth { d: path("M54 62h12"); }
.otter.sleep .eyes { opacity: 0; animation: none; } .otter.sleep .closed { opacity: 1; }
.otter.sleep .head { transform: rotate(10deg) translateY(4px); transform-origin: 60px 70px; transition: transform .6s; }
.otter.sleep .z { animation: zz 2.4s ease-in-out infinite; } .otter.sleep .z2 { animation-delay: 1.2s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -16px); } }
.otter.give { animation: otterJump .6s cubic-bezier(.3,1.6,.5,1) 3; }
#game.ending .otter { transform: translateY(0); animation: otterJump .6s cubic-bezier(.3,1.6,.5,1) 3; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { .otter { left: 18px; bottom: 150px; width: 120px; height: 130px; } }

/* ---------- juice rodada E: correções do crítico ---------- */
#game.ending .otter { animation: none; }
.otter.lifted { z-index: 35; }
#game .bar { position: relative; }
#combo { position: absolute; left: 50%; top: 4px; transform: translateX(-50%) scale(.6); }
#combo.on { transform: translateX(-50%) scale(1); }
#combo i { width: 88px; height: 10px; }
#combo.low i span { background: linear-gradient(90deg, #ff6b6b, #ff3d3d); }
#combo.low b { animation: lowPulse .4s ease-in-out infinite; }
@keyframes lowPulse { 50% { transform: scale(1.12); color: #ff5c5c; } }
.level-pill { white-space: nowrap; }
.combo-pay { font-size: .7em; color: #ff7a3d; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { #combo { left: auto; right: 200px; transform: scale(.6); } #combo.on { transform: scale(1.2); } }
#game.ending .bar > #combo.on { opacity: 1; pointer-events: none; }
#modal:not(.hidden) ~ * #combo, body:has(#modal:not(.hidden)) #combo { opacity: 0 !important; }
.combo-pay { white-space: nowrap; }
.plus-coins { white-space: nowrap; }
@media (max-width: 899px) { #combo { left: auto; right: 8px; top: 58px; transform: scale(.6); } #combo.on { transform: scale(1); } }
.otter.cheer .mouth { d: none; }
.otter .mouth { transition: transform .2s; transform-origin: 60px 60px; }
.otter.cheer .mouth { transform: scale(1.3, 1.6); }
.otter.think .mouth { transform: scaleY(.2); }

/* ---------- pedidos do Willian ---------- */
#tip { z-index: 30; }
.hint.locked { filter: grayscale(1) brightness(1.05); opacity: .7; }
.hint.locked .hint-ico::after { content: ''; display: block !important; position: absolute; inset: 0; border-radius: 50%; background: rgba(40,50,90,.45) no-repeat center/42% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Zm2 0h6V8a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E"); }
.hint.locked .price { background: #dfe4f3; color: #6b76a6; }
.hint.unlocking { animation: unlockPop .9s cubic-bezier(.3,1.6,.5,1); }
@keyframes unlockPop { 0% { transform: scale(.6) rotate(-12deg); filter: brightness(2); } 50% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1); } }
/* barra de abas: base em relevo, abas como teclas, ativa elevada */
.tabbar { height: 84px; margin: 0 -14px; width: calc(100% + 28px); padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 8px;
  background: linear-gradient(#6a83f7, #4a66ea 55%, #3d57d6); border-radius: 26px 26px 0 0; border-top: 2px solid #9fb0ff;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -6px 0 rgba(20,30,110,.25), 0 -10px 26px rgba(20,40,90,.25); }
.tabbar button { flex: 1; border-radius: 18px; gap: 3px; color: #d6defe; background: linear-gradient(#5571ef, #4560e0); margin: 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 4px 0 #3046b8; transition: transform .12s, background .2s; padding: 0; }
.tabbar button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 #3046b8; }
.tabbar .tab-ico { width: 40px; height: 32px; display: grid; place-items: center; }
.tabbar .tab-ico svg { width: 26px; height: 26px; fill: currentColor; filter: drop-shadow(0 2px 0 rgba(20,30,110,.35)); }
.tabbar .tab-lbl { font-size: 13px; font-weight: 800; letter-spacing: .3px; text-shadow: 0 1px 0 rgba(20,30,110,.4); }
.tabbar button.on { margin-top: -18px; padding-top: 0; color: #fff; background: linear-gradient(#ffb36b, #ff8a3d); border-radius: 20px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 #c4531a, 0 12px 20px rgba(196,83,26,.35); }
.tabbar button.on .tab-ico svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 #c4531a); animation: tabBob 2.4s ease-in-out infinite; }
.tabbar button.on .tab-lbl { text-shadow: 0 1px 0 #c4531a; }
@keyframes tabBob { 50% { transform: translateY(-2px); } }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #home .tabbar { width: 560px; border-radius: 26px; border: 2px solid #9fb0ff; margin: 26px 0 18px; }
  #home .tabbar button.on { margin-top: -18px; border-radius: 20px; }
}
.home-actions { margin-bottom: 26px; }
/* barra de abas v3 (crítico): bandeja lisa, inativas sem caixa, ativa como cartão branco */
.tabbar { height: 76px; gap: 0; padding: 0 6px max(0px, env(safe-area-inset-bottom)); border-radius: 0; border-top: 0;
  background: linear-gradient(#3f55d8, #3247c4); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 -6px 18px rgba(20,40,90,.22); align-items: stretch; }
.tabbar button { background: none; box-shadow: none; border-radius: 0; color: #e3e8ff; position: relative; justify-content: center; gap: 2px; transition: flex .25s; }
.tabbar button + button::before { content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 2px; background: rgba(20,30,120,.28); box-shadow: 1px 0 0 rgba(255,255,255,.12); }
.tabbar button.on + button::before, .tabbar button.on::before { display: none; }
.tabbar button:active { transform: translateY(2px); box-shadow: none; }
.tabbar .tab-ico svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(10,20,90,.35)); animation: none !important; }
.tabbar .tab-lbl { font-size: 11.5px; opacity: .85; }
.tabbar button.on { flex: 1.25; margin-top: -14px; padding-top: 14px; background: linear-gradient(#ffffff, #eef1ff); color: #7b4ce0; border-radius: 22px 22px 0 0;
  box-shadow: inset 0 2px 0 #fff, 0 -4px 12px rgba(20,30,110,.22); }
.tabbar button.on .tab-ico svg { width: 32px; height: 32px; filter: none; }
.tabbar button.on .tab-lbl { font-size: 13px; opacity: 1; text-shadow: none; }
.tabbar button:focus-visible { outline: 3px solid #ffe48a; outline-offset: -4px; }
.home-actions { margin-bottom: 22px; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #home .tabbar { width: 520px; border: 0; border-radius: 22px 22px 0 0; margin: 24px 0 0; align-self: end; }
  #home .tabbar button.on { margin-top: -14px; border-radius: 22px 22px 0 0; }
  #home.screen { padding-bottom: 0; }
}

/* ---------- imagens ilustradas ---------- */
.logo-img { display: block; width: min(340px, 86vw); margin: 0 auto; filter: drop-shadow(0 10px 18px rgba(20,60,90,.3)); animation: float 4s ease-in-out infinite; }
.logo-img ~ .logo-top, .logo-img ~ .logo-main, .logo-img ~ .logo-wave { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.logo::after { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { .logo-img { width: 460px; } }
.coin-ico { background: no-repeat center/contain url("../assets/img/coin.webp"); box-shadow: none; border-radius: 0; }
.coin-ico::after { display: none; }
.hint-ico.svg { background: radial-gradient(circle at 40% 30%, #ffffff, #dce8ff 70%); box-shadow: 0 6px 0 #9fb0d9, 0 10px 18px #0003, inset 0 0 0 4px #fff; }
.hint-ico.svg img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(20,40,90,.3)); }
.hint:hover .hint-ico.svg img { animation: wiggle .6s; }
.chest-img { object-fit: contain; filter: drop-shadow(0 8px 10px rgba(20,40,90,.3)); }
.chest-big .chest-img { width: 100%; height: 100%; }
.chest-big.open .chest-img { animation: chipIn .35s cubic-bezier(.3,1.7,.5,1); }
.mini-drop img { width: 100%; height: 100%; object-fit: contain; }
/* cadeado do poder bloqueado: zera as regras antigas de ::after dos ícones */
.hint.locked .hint-ico::after { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important;
  inset: 0 !important; transform: none !important; animation: none !important; border-radius: 50% !important; box-shadow: none !important;
  background: rgba(40,50,90,.5) no-repeat center/40% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Zm2 0h6V8a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") !important; }
.hint.locked { filter: none; opacity: 1; }
.hint.locked .hint-ico img { filter: grayscale(1) brightness(.9); opacity: .55; }
.hint.locked .price .coin-ico { display: none; }
.hint.locked .price { padding: 0 10px; }