/* Cenários da partida: um por dezena de níveis (worlds.js), com a mesma ilustração do mapa (img/mapa/, arte nova do dono; antes era img/worlds/). Só a tela de jogo muda.
   No tema escuro uma película escurece a ilustração. Como o fundo é uma imagem (clara ou escura), o cabeçalho e a dica de
   controles ficam em painéis translúcidos escuros com letra clara, para sempre dar para ler. */

body[data-screen="game"] { background-color: #1c1517; background-position: center bottom; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
body[data-screen="game"] .board-card { box-shadow: 0 0 0 3px var(--w-accent, transparent), 0 6px 20px rgba(0, 0, 0, 0.35); }

body[data-screen="game"] .stats {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(24, 12, 16, 0.5);
  backdrop-filter: blur(3px);
}
body[data-screen="game"] .stat-label,
body[data-screen="game"] .stat-goal { color: rgba(255, 244, 230, 0.8); }
body[data-screen="game"] .stat-value { color: #fff4e6; }
body[data-screen="game"] .hint {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 14px;
  border-radius: 14px;
  background: rgba(24, 12, 16, 0.5);
  color: rgba(255, 244, 230, 0.85);
}

body[data-screen="game"][data-world="campo"] {
  --w-accent: #e0707f;
  --w-accent-dark: color-mix(in srgb, #e0707f 62%, #3b1d22);
  background-image: url("../img/mapa/campo.webp");
}

body[data-screen="game"][data-world="lagoa"] {
  --w-accent: #35a9c2;
  --w-accent-dark: color-mix(in srgb, #35a9c2 62%, #3b1d22);
  background-image: url("../img/mapa/lagoa.webp");
}

body[data-screen="game"][data-world="floresta"] {
  --w-accent: #3fae6a;
  --w-accent-dark: color-mix(in srgb, #3fae6a 62%, #3b1d22);
  background-image: url("../img/mapa/floresta.webp");
}

body[data-screen="game"][data-world="cristais"] {
  --w-accent: #8f7fe0;
  --w-accent-dark: color-mix(in srgb, #8f7fe0 62%, #3b1d22);
  background-image: url("../img/mapa/cristais.webp");
}

body[data-screen="game"][data-world="deserto"] {
  --w-accent: #ef8a54;
  --w-accent-dark: color-mix(in srgb, #ef8a54 62%, #3b1d22);
  background-image: url("../img/mapa/deserto.webp");
}

body[data-screen="game"][data-world="inverno"] {
  --w-accent: #7ea8de;
  --w-accent-dark: color-mix(in srgb, #7ea8de 62%, #3b1d22);
  background-image: url("../img/mapa/inverno.webp");
}

body[data-screen="game"] .stat-value .heart { color: #ff5a6a; }
body[data-screen="game"] .stat-value .heart.lost { color: rgba(255, 244, 230, 0.3); }

/* Faixa de cenário no mapa e foto do cenário no cartão da fase */
.map-world { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transform: translateY(-50%); pointer-events: none; }
.map-world small { padding: 0 8px; color: #fff4e6; font-size: 0.72rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.lv-scene {
  display: grid;
  place-items: center;
  height: 120px;
  margin: 6px 14px 0;
  border-radius: 16px;
  background: #2b1a20 center 30% / cover no-repeat;
  box-shadow: inset 0 0 0 100px rgba(10, 6, 8, 0.28);
  overflow: hidden;
}

/* Emblema: cenário em miniatura (animado) com a plaquinha do nome embaixo */
.emblem { display: inline-flex; flex-direction: column; align-items: center; }
.em-scene { display: block; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.emblem-map .em-scene { width: 120px; height: 60px; }
.emblem-card .em-scene { width: 132px; height: 66px; }
.emblem-name {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  padding: 2px 16px;
  border-radius: 999px;
  background: rgba(24, 12, 16, 0.82);
  border: 1px solid rgba(255, 226, 150, 0.55);
  color: #ffe9b8;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.emblem-card .emblem-name { margin-top: 3px; }

.em-scene [class^="em-"] { transform-box: fill-box; transform-origin: center; }
.em-blink { animation: em-blink 2.4s ease-in-out infinite; }
.em-glow { animation: em-glow 3.2s ease-in-out infinite alternate; }
.em-bob { animation: em-bob 3s ease-in-out infinite alternate; }
.em-ripple { animation: em-ripple 2.8s ease-out infinite; }
.em-bubble { animation: em-bubble 3.4s ease-in infinite; }
.em-twinkle { animation: em-twinkle 2.6s ease-in-out infinite alternate; }
.em-fall { animation: em-fall 3s linear infinite; }
@keyframes em-blink { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes em-glow { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes em-bob { from { transform: translateY(-0.9px); } to { transform: translateY(0.9px); } }
@keyframes em-ripple { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes em-bubble { 0% { transform: translateY(2px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 0; } }
@keyframes em-twinkle { from { opacity: 0.8; filter: brightness(1); } to { opacity: 1; filter: brightness(1.35); } }
@keyframes em-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
/* Campo: copa e capim balançam a partir da base, a lua respira e os vagalumes passeiam */
.em-scene .cp-canopy { transform-box: fill-box; transform-origin: 50% 100%; animation: cp-sway 4.2s ease-in-out infinite alternate; }
.em-scene .cp-willow { transform-box: fill-box; transform-origin: 50% 20%; animation: cp-willow 4.6s ease-in-out infinite alternate; }
.em-scene .cp-pine { transform-box: fill-box; transform-origin: 50% 100%; animation: cp-sway 5s ease-in-out infinite alternate; }
.em-scene .cp-sand { animation: cp-sand 4s linear infinite; }
.em-scene .cp-grass { transform-box: fill-box; transform-origin: 50% 100%; animation: cp-grass 2.6s ease-in-out infinite alternate; }
.em-scene .cp-moonglow { transform-box: fill-box; transform-origin: center; animation: cp-moon 3.6s ease-in-out infinite alternate; }
.em-scene .cp-fly-a { animation: cp-fly-a 7s ease-in-out infinite; }
.em-scene .cp-fly-b { animation: cp-fly-b 8.5s ease-in-out infinite; }
.em-scene .cp-fly-c { animation: cp-fly-c 6.4s ease-in-out infinite; }
@keyframes cp-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes cp-willow { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg); } }
@keyframes cp-sand { 0% { transform: translate(-6px, 0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(10px, -1.5px); opacity: 0; } }
@keyframes cp-grass { from { transform: skewX(-7deg); } to { transform: skewX(7deg); } }
@keyframes cp-moon { from { transform: scale(0.85); opacity: 0.7; } to { transform: scale(1.1); opacity: 1; } }
@keyframes cp-fly-a { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5px, -3px); } 50% { transform: translate(9px, 1px); } 75% { transform: translate(3px, 3px); } }
@keyframes cp-fly-b { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-5px, -4px); } 60% { transform: translate(-8px, 1px); } 80% { transform: translate(-3px, 2px); } }
@keyframes cp-fly-c { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(4px, 4px); } 70% { transform: translate(-4px, 2px); } }
@media (prefers-reduced-motion: reduce) { .em-scene * { animation: none !important; } }

/* Cena da corrida (convite e resultado) */
.race-scene { margin: 4px 0 8px; border-radius: 16px; background: linear-gradient(180deg, #4a2438, #2a1520); overflow: hidden; }
.race-scene svg { display: block; width: 100%; height: auto; }
.race-scene * { transform-box: fill-box; transform-origin: center; }
.race-aura { animation: em-glow 2.4s ease-in-out infinite alternate; }
.race-cup { animation: cup-pulse 2.2s ease-in-out infinite alternate; }
.race-banner { animation: banner-wave 2.6s ease-in-out infinite alternate; transform-origin: 50% 0; }
.race-runner { animation: runner 3.2s linear infinite; }
.race-runner.r2 { animation-duration: 3.8s; }
.race-runner.r3 { animation-duration: 2.8s; }
.race-trail { transform-origin: right center; animation: trail 0.5s ease-in-out infinite alternate; }
.race-spark { animation: spark 1.8s ease-in-out infinite; }
@keyframes runner { 0% { transform: translateX(-40px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(260px); opacity: 0; } }
@keyframes trail { from { transform: scaleX(0.7); opacity: 0.5; } to { transform: scaleX(1.1); opacity: 0.9; } }
@keyframes cup-pulse { from { transform: scale(0.97); } to { transform: scale(1.04); } }
@keyframes banner-wave { from { transform: skewX(-2deg) scaleY(0.96); } to { transform: skewX(2deg) scaleY(1.02); } }
@media (prefers-reduced-motion: reduce) { .race-scene * { animation: none !important; } .race-runner { transform: translateX(80px); } }