/* =====================================================================
   TEPUI · Quiz de Roraima — tema "noite no lavrado"
   ===================================================================== */
:root {
  --night-0: #07081c;
  --night-1: #0e0f30;
  --night-2: #1a1650;
  --glass: rgba(22, 20, 64, 0.62);
  --glass-strong: rgba(18, 16, 52, 0.86);
  --glass-line: rgba(255, 255, 255, 0.12);
  --glass-line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f1ff;
  --text-soft: #b9b3e0;
  --text-mute: #8a84b8;

  --sun-1: #ffb347;
  --sun-2: #ff5f6d;
  --sun: linear-gradient(135deg, var(--sun-1), var(--sun-2));
  --ok: #2de2a6;
  --ok-deep: #0f7a5a;
  --bad: #ff4d6d;
  --bad-deep: #8c1d35;
  --gold: #ffd166;
  --ai: #4cc9f0;
  --ai-2: #7b6cff;
  --wheel: #ff7a45;
  --wheel-2: #c74dff;

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--glass-line) inset;
  --font-display: 'Unbounded', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* lua, sol e o centro de ambos (usado pelos gradientes de luz) */
  --moon: 70px;
  --sun-size: 46px;
  --cx: calc(88% - var(--moon) / 2);
  --cy: calc(9% + var(--moon) / 2);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--night-0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------------- Cenário ---------------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Disco do céu: gira em torno de um ponto bem abaixo do horizonte, então a lua
   descreve um arco da direita para a esquerda. O theme.js usa o mesmo pivô. */
.sky-wheel, .sun-wheel { position: absolute; inset: 0; transform-origin: 50% 160%; will-change: transform; }
.sky-wheel { transition: opacity 1.4s ease; }
.stars-far {
  /* estrelas além das bordas da tela, para o céu não "acabar" durante o giro */
  position: absolute; left: -160%; right: -160%; top: -90%; bottom: 36%; opacity: .75;
  background-image:
    radial-gradient(circle at 23px 41px, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 121px 97px, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 61px 173px, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 187px 29px, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 251px 199px, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 97px 263px, #fff 0 .9px, transparent 1.5px);
  background-size: 157px 157px, 157px 157px, 211px 211px, 211px 211px, 293px 293px, 293px 293px;
}

/* Nuvens: base alongada + dois "bojos" */
.cloud {
  position: absolute; display: block; width: var(--w); height: calc(var(--w) * .3);
  border-radius: 999px; background: var(--cloud);
}
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 50%; aspect-ratio: 1; left: 14%; bottom: 28%; }
.cloud::after { width: 36%; aspect-ratio: 1; right: 15%; bottom: 34%; }
.clouds-night { position: absolute; inset: 0; --cloud: rgba(74, 60, 150, .34); filter: blur(7px); }
.clouds-night .cloud:nth-child(odd) { --cloud: rgba(110, 76, 150, .28); }

/* ---- Dia nublado ---- */
.sky-day {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease;
  background:
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255, 246, 225, .7), transparent 70%),
    linear-gradient(180deg, #6f97c5 0%, #8fb0d2 28%, #b9cfe3 55%, #dce7ef 78%, #eef2f1 100%);
}
/* claridade em volta do sol: mora no disco do sol, então se põe junto com ele */
.sun-glow {
  position: absolute; width: 200vmax; height: 200vmax;
  left: calc(var(--cx) - 100vmax); top: calc(var(--cy) - 100vmax);
  opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(circle 60vmax at 50% 50%, rgba(255, 250, 225, .9), rgba(255, 244, 210, .35) 25%, transparent 100%);
}
.clouds-day {
  position: absolute; inset: 0 0 34% 0; opacity: 0; transition: opacity 1.8s ease .2s;
  --cloud: linear-gradient(180deg, #fbfcfd 0%, #e9eef2 55%, #c6d0d9 100%);
  filter: blur(5px);
  animation: drift 90s ease-in-out infinite alternate;
}
.clouds-day .cloud { box-shadow: 0 18px 40px -10px rgba(110, 130, 150, .35); }
.clouds-day .cloud:nth-child(3n) { --cloud: linear-gradient(180deg, #eef2f5, #cfd8df 60%, #b4c0ca); opacity: .9; }
@keyframes drift { to { transform: translateX(-7vw); } }

/* Sol: menor que a lua, mas com raios */
.sun {
  position: absolute; width: var(--sun-size); height: var(--sun-size);
  /* centro do sol = centro da lua */
  right: calc(12% + (var(--moon) - var(--sun-size)) / 2); top: calc(9% + (var(--moon) - var(--sun-size)) / 2);
  opacity: 0; transform: scale(.35);
  transition: opacity .7s ease, transform 1.3s cubic-bezier(.2, 1.5, .4, 1);
}
.sun-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fffef6 0 38%, #fff0b8 66%, #ffd66e 100%);
  box-shadow: 0 0 22px 8px rgba(255, 244, 196, .95), 0 0 70px 30px rgba(255, 226, 150, .5), 0 0 160px 70px rgba(255, 236, 190, .28);
  transition: box-shadow .35s ease;
}
.sun-rays { position: absolute; inset: -150%; transform: scale(0); transition: transform 1.8s cubic-bezier(.15, .8, .25, 1) .15s; }
.sun-rays::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 242, 190, .85) 0deg 3.5deg, transparent 3.5deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 17%, #000 19%, rgba(0, 0, 0, .5) 40%, transparent 70%);
  mask: radial-gradient(circle, transparent 17%, #000 19%, rgba(0, 0, 0, .5) 40%, transparent 70%);
  animation: spin 46s linear infinite;
}
.sun-rays-2 { inset: -270%; transition-delay: .35s; }
.sun-rays-2::before {
  background: repeating-conic-gradient(from 7deg, rgba(255, 248, 215, .5) 0deg 1.6deg, transparent 1.6deg 11deg);
  -webkit-mask: radial-gradient(circle, transparent 10%, #000 12%, rgba(0, 0, 0, .35) 34%, transparent 66%);
  mask: radial-gradient(circle, transparent 10%, #000 12%, rgba(0, 0, 0, .35) 34%, transparent 66%);
  animation-duration: 80s; animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fachos de luz que atravessam as nuvens e iluminam o cenário */
.sunbeams {
  /* quadro bem maior que a tela, centrado no sol: os fachos se apagam (raio 80vmax)
     muito antes da borda (150vmax), então girar/escalar nunca mostra um recorte reto */
  position: absolute; width: 300vmax; height: 300vmax;
  left: calc(var(--cx) - 150vmax); top: calc(var(--cy) - 150vmax);
  opacity: 0; transition: opacity 1s ease;
  background: repeating-conic-gradient(from 180deg at 50% 50%, rgba(255, 250, 228, .55) 0deg 2.4deg, transparent 2.4deg 8deg, rgba(255, 250, 228, .3) 8deg 9.5deg, transparent 9.5deg 17deg);
  -webkit-mask: radial-gradient(circle 110vmax at 50% 50%, #000 0, rgba(0, 0, 0, .55) 30%, transparent 72%);
  mask: radial-gradient(circle 110vmax at 50% 50%, #000 0, rgba(0, 0, 0, .55) 30%, transparent 72%);
  transform-origin: 50% 50%; mix-blend-mode: screen;
}
.sun-rising .sunbeams { animation: beamsBurst 2.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes beamsBurst {
  0% { opacity: 0; transform: scale(.4) rotate(-6deg); }
  28% { opacity: 1; }
  100% { opacity: .4; transform: none; }
}
.sun-rising .sun-core { animation: sunFlare 1.6s ease-out both; }
@keyframes sunFlare {
  0% { box-shadow: 0 0 0 0 rgba(255, 244, 196, 1), 0 0 0 0 rgba(255, 226, 150, .6), 0 0 0 0 rgba(255, 236, 190, .3); }
  35% { box-shadow: 0 0 60px 30px rgba(255, 250, 220, 1), 0 0 200px 100px rgba(255, 236, 170, .8), 0 0 420px 220px rgba(255, 240, 200, .5); }
}

/* Botão invisível sobre a lua / o sol */
.sky-toggle {
  position: fixed; z-index: 1; right: calc(12% - 10px); top: calc(9% - 10px);
  width: calc(var(--moon) + 20px); height: calc(var(--moon) + 20px);
  border: 0; border-radius: 50%; background: transparent; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.sky-toggle:focus-visible { outline-offset: -4px; }
.sky-toggle[aria-busy="true"] { cursor: progress; }
.sky-toggle:hover ~ .scene .moon { transform: scale(1.06); box-shadow: 0 0 70px 18px rgba(255, 226, 160, .42), 0 0 170px 56px rgba(255, 190, 130, .2); }
.sky-toggle:hover ~ .scene .sun-core { box-shadow: 0 0 28px 12px rgba(255, 246, 205, 1), 0 0 90px 40px rgba(255, 230, 160, .6), 0 0 190px 90px rgba(255, 238, 195, .32); }
/* a UI deixa o clique passar pelas áreas vazias, para alcançar a lua */
.app, .app > section, .game > .arena { pointer-events: none; }
.app > section > *, .game > .arena > * { pointer-events: auto; }
.start > .brand, .start > .rule-strip { pointer-events: none; } /* só texto: não bloqueia a lua no celular */

/* Flash de luz (amanhecer) / véu (anoitecer): cobre a troca de cores da UI */
.theme-flash { position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0; }
.theme-flash.dawn {
  background: radial-gradient(circle at var(--cx) var(--cy), rgba(255, 253, 242, .97), rgba(255, 247, 222, .8) 26%, rgba(255, 242, 212, .55) 62%, rgba(250, 238, 214, .42));
  animation: themeFlash 1.15s ease-out both;
}
.theme-flash.dusk {
  background: radial-gradient(circle at 15% 15%, rgba(40, 30, 96, .82), rgba(10, 9, 36, .9));
  animation: themeFlash 1.1s ease-in-out both;
}
@keyframes themeFlash { 0% { opacity: 0; } 32% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Estado "dia" do cenário ---- */
[data-theme="light"] .sky-day,
[data-theme="light"] .sun-glow,
[data-theme="light"] .clouds-day,
[data-theme="light"] .sun { opacity: 1; }
[data-theme="light"] .sun,
[data-theme="light"] .sun-rays { transform: none; }
[data-theme="light"] .sunbeams { opacity: .4; }
[data-theme="light"] .sky-wheel,
[data-theme="light"] .fireflies { opacity: 0; }
.fireflies { transition: opacity 1.2s ease; }

/* Borboletas (dia): pequenas, voando perto do chão */
.butterflies { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.butterflies i {
  position: absolute; width: 6px; height: 5px;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
.butterflies b {
  position: absolute; left: 50%; top: 50%; width: .8px; height: 3px; margin: -1.5px 0 0 -.4px;
  border-radius: .5px; background: #3b2c22;
}
.butterflies b::before, .butterflies b::after {
  content: ''; position: absolute; top: -.75px; width: 2.5px; height: 3.5px; background: var(--c);
  box-shadow: 0 0 0 .3px rgba(60, 40, 30, .35);
  animation: wing var(--f, .2s) ease-in-out infinite alternate;
}
.butterflies b::before { right: 100%; border-radius: 85% 15% 40% 70%; transform-origin: 100% 50%; }
.butterflies b::after { left: 100%; border-radius: 15% 85% 70% 40%; transform-origin: 0 50%; }
@keyframes wing { to { transform: scaleX(.18); } }
@keyframes bfly1 {
  0% { transform: translate(0, 0) rotate(-8deg); }
  25% { transform: translate(28px, -18px) rotate(8deg); }
  50% { transform: translate(52px, -6px) rotate(-4deg); }
  75% { transform: translate(80px, -26px) rotate(6deg); }
  100% { transform: translate(108px, -10px) rotate(-6deg); }
}
@keyframes bfly2 {
  0% { transform: translate(0, 0) rotate(6deg); }
  30% { transform: translate(-34px, -22px) rotate(-8deg); }
  55% { transform: translate(-60px, -8px) rotate(4deg); }
  80% { transform: translate(-86px, -30px) rotate(-6deg); }
  100% { transform: translate(-100px, -14px) rotate(4deg); }
}
@keyframes bfly3 {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(22px, -24px) rotate(10deg); }
  50% { transform: translate(-6px, -40px) rotate(-8deg); }
  75% { transform: translate(-30px, -16px) rotate(6deg); }
  100% { transform: translate(-8px, -4px) rotate(-4deg); }
}

/* Pássaros (dia): revoada pequena e distante, ao fundo — atrás dos tepuis */
.birds { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.flock { position: absolute; left: 0; will-change: transform, opacity; }
.flock-body { position: relative; }
.bird { position: absolute; width: 12px; height: 5px; animation: birdBob 2.6s ease-in-out infinite alternate; }
.bird span { display: block; width: 100%; height: 100%; transform-origin: 50% 70%; animation: birdFlap .45s ease-in-out infinite alternate; }
.bird svg { width: 100%; height: 100%; overflow: visible; }
.bird path { fill: none; stroke: #4b5a68; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
@keyframes birdFlap { to { transform: scaleY(-.5) translateY(-1px); } }
@keyframes birdBob { to { transform: translateY(3px); } }

[data-theme="light"] .butterflies,
[data-theme="light"] .birds { opacity: 1; }
/* o que não aparece fica parado (economiza processamento) */
[data-theme="dark"] .butterflies i,
[data-theme="dark"] .butterflies b::before,
[data-theme="dark"] .butterflies b::after,
[data-theme="light"] .fireflies i { animation-play-state: paused; }

/* Relevo: cores da noite → dia (transição suave no SVG) */
.ridge stop, .ridge path { transition: stop-color 1.8s ease, stop-opacity 1.8s ease, fill 1.8s ease, stroke 1.8s ease; }
[data-theme="light"] .st-far-a { stop-color: #93abb8; }
[data-theme="light"] .st-far-b { stop-color: #7894a3; }
[data-theme="light"] .st-mid-a { stop-color: #5f8a66; }
[data-theme="light"] .st-mid-b { stop-color: #42684c; }
[data-theme="light"] .st-cap-a { stop-color: #fff6da; stop-opacity: .5; }
[data-theme="light"] .st-cap-b { stop-color: #fff6da; }
[data-theme="light"] .r-ground { fill: #7f9a4f; }
[data-theme="light"] .palm > path { stroke: #2f4b30; }
[data-theme="light"] .palm > g { fill: #2f4b30; }
.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(255, 120, 90, 0.38), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 85%, rgba(199, 77, 255, 0.25), transparent 70%),
    linear-gradient(180deg, #060719 0%, #0f1035 38%, #2a1d5e 70%, #57306f 86%, #8a4466 100%);
}
.aurora {
  position: absolute; left: -20%; right: -20%; top: 4%; height: 40%;
  background:
    radial-gradient(ellipse 40% 50% at 30% 50%, rgba(45, 226, 166, 0.13), transparent 70%),
    radial-gradient(ellipse 35% 45% at 70% 40%, rgba(76, 201, 240, 0.12), transparent 70%);
  filter: blur(20px);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translateX(8%) skewX(-6deg); opacity: .6; } }
.moon {
  position: absolute; right: 12%; top: 9%; width: var(--moon); height: var(--moon); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #ffe2a0 60%, #f5c56f);
  box-shadow: 0 0 60px 12px rgba(255, 220, 150, 0.25), 0 0 140px 40px rgba(255, 180, 120, 0.12);
  transition: box-shadow .35s ease, transform .35s ease;
}
.stars i {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ridge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.palm { animation: sway 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
.fireflies { position: absolute; inset: 0; }
.fireflies i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a3; box-shadow: 0 0 10px 3px rgba(255, 220, 120, .7);
  opacity: 0; animation: firefly 10s ease-in-out infinite;
}
@keyframes firefly {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  50% { transform: translate(30px, -60px); opacity: .8; }
  80% { opacity: 0; }
  100% { opacity: 0; transform: translate(-20px, -120px); }
}

/* ---------------- Base layout ---------------- */
.app {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  padding: 20px 16px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.app.is-game { justify-content: flex-start; }

.eyebrow {
  margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}

.sound-toggle {
  position: fixed; z-index: 30; right: 16px; top: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--glass-line-strong); background: var(--glass-strong);
  backdrop-filter: blur(10px); display: grid; place-items: center; color: var(--text-soft);
}
.sound-toggle svg { width: 20px; height: 20px; }
.sound-toggle.is-muted { color: var(--text-mute); }
body[data-screen="game"] .sound-toggle { display: none; }
.hud .snd.is-muted { color: var(--text-mute); }

/* ---------------- Botões ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s;
}
.btn svg { width: 20px; height: 20px; }
.btn:active:not(:disabled) { transform: translateY(2px) scale(.98); }
.btn-sun {
  background: var(--sun); color: #2a0b1e;
  box-shadow: 0 10px 30px -8px rgba(255, 95, 109, .7), inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.btn-sun:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 14px 36px -8px rgba(255, 95, 109, .9), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.btn-sun:disabled { filter: grayscale(.8) brightness(.7); }
.btn-glass {
  background: rgba(255, 255, 255, .07); color: var(--text);
  border: 1px solid var(--glass-line-strong);
}
.btn-glass:hover { background: rgba(255, 255, 255, .14); }
/* ícone no centro; no hover/foco o ícone sai e o texto entra no lugar */
.btn-swap { display: inline-grid; place-items: center; min-width: 180px; overflow: hidden; }
.btn-swap > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.btn-swap .swap-icon svg { width: 24px; height: 24px; }
.btn-swap .swap-text { opacity: 0; transform: translateY(12px); }
.btn-swap:hover .swap-icon, .btn-swap:focus-visible .swap-icon { opacity: 0; transform: translateY(-12px) scale(.7); }
.btn-swap:hover .swap-text, .btn-swap:focus-visible .swap-text { opacity: 1; transform: none; }
/* telas de toque não têm hover: mostra ícone + texto lado a lado */
@media (hover: none) {
  .btn-swap { display: inline-flex; gap: 10px; }
  .btn-swap > span { grid-area: auto; }
  .btn-swap .swap-icon svg { width: 20px; height: 20px; }
  .btn-swap .swap-text,
  .btn-swap:hover .swap-icon, .btn-swap:focus-visible .swap-icon { opacity: 1; transform: none; }
}
.btn-danger { background: var(--bad); color: #fff; }

/* ---------------- Tela inicial ---------------- */
.start {
  width: min(760px, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px;
  animation: rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* tela inicial 10% menor (igual ao zoom de 90% do navegador); no celular fica
   em 100% para não encolher os alvos de toque */
@media (min-width: 641px) { .start { zoom: .9; } }
.brand { display: flex; flex-direction: column; align-items: center; }
/* logo do Governo de Roraima (versão de texto preto no dia, branco à noite) */
/* SEADI | Governo de Roraima: a linha fica exatamente no centro da tela */
.start > .brand { align-self: stretch; }
.brand-logo {
  --logo-h: clamp(32px, 8.6vw, 58px);
  --logo-gap: clamp(10px, 2.4vw, 22px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  width: 100%; margin-bottom: 18px;
}
/* cada lado corta o que passa da linha: as logos "saem de dentro" dela */
.logo-side { display: flex; overflow: hidden; }
.logo-left { justify-content: flex-end; padding-right: var(--logo-gap); }
.logo-right { justify-content: flex-start; padding-left: var(--logo-gap); }
.brand-logo img { display: block; height: var(--logo-h); width: auto; }
.logo-line {
  width: 2px; height: calc(var(--logo-h) * 1.12); border-radius: 2px;
  background: rgba(255, 255, 255, .6);
}
[data-theme="light"] .logo-line { background: rgba(40, 40, 40, .55); }
.brand-logo .logo-day { display: none; }
[data-theme="light"] .brand-logo .logo-day { display: block; }
[data-theme="light"] .brand-logo .logo-night { display: none; }

/* abertura: a linha cresce no centro, depois as duas logos deslizam para fora dela */
.brand-intro .logo-line { animation: logoLine .6s cubic-bezier(.2, .8, .2, 1) calc(.2s + var(--intro-skip, 0ms)) both; }
.brand-intro .logo-left img { animation: logoOutLeft .95s cubic-bezier(.16, .84, .24, 1) calc(.75s + var(--intro-skip, 0ms)) both; }
.brand-intro .logo-right img { animation: logoOutRight .95s cubic-bezier(.16, .84, .24, 1) calc(.75s + var(--intro-skip, 0ms)) both; }
@keyframes logoLine { from { transform: scaleY(0); opacity: 0; } 35% { opacity: 1; } }
@keyframes logoOutLeft { from { transform: translateX(calc(100% + var(--logo-gap))); opacity: 0; } 30% { opacity: 1; } }
@keyframes logoOutRight { from { transform: translateX(calc(-100% - var(--logo-gap))); opacity: 0; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .brand-intro .logo-line, .brand-intro .logo-side img { animation: none !important; } }
.brand-mark { width: 74px; color: var(--sun-1); filter: drop-shadow(0 6px 20px rgba(255, 140, 80, .6)); margin-bottom: 14px; }
.brand-mark svg { width: 100%; }
.brand-title {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.6rem, 15vw, 7.5rem); line-height: .9; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff 10%, #ffd9a8 55%, #ff8a6b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 30px rgba(255, 120, 90, .35));
}
.brand-sub { margin: 16px 0 0; color: var(--text-soft); font-size: 1.05rem; line-height: 1.55; max-width: 520px; }

/* 3 colunas de mesma largura (a da maior), então o espaçamento fica uniforme */
.rule-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass);
  backdrop-filter: blur(12px);
}
.rule-strip li { padding: 10px 22px; display: flex; flex-direction: column; align-items: center; }
.rule-strip li + li { border-left: 1px solid var(--glass-line); }
.rule-strip b { font-family: var(--font-display); font-size: 1.15rem; }
.rule-strip span { font-size: .72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .1em; }

.power-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.pp {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 14px; border-radius: var(--r-lg); background: var(--glass);
  border: 1px solid var(--glass-line); backdrop-filter: blur(12px);
}
.pp-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.pp-icon svg { width: 22px; height: 22px; }
.pp-skip .pp-icon { background: rgba(255, 209, 102, .16); color: var(--gold); }
.pp-ai .pp-icon { background: rgba(76, 201, 240, .16); color: var(--ai); }
.pp-wheel .pp-icon { background: rgba(255, 122, 69, .16); color: var(--wheel); }
.pp-text b { display: block; font-size: .92rem; }
.pp-text em { font-style: normal; color: var(--text-mute); font-weight: 600; }
.pp-text small { color: var(--text-mute); font-size: .78rem; line-height: 1.35; }

/* ---- Mini-animações dos widgets (hover) ---- */
.pp { position: relative; overflow: hidden; min-height: 96px; cursor: default; transition: border-color .3s, box-shadow .3s, transform .3s; }
.pp:focus-visible { outline-offset: 2px; }
.pp-icon, .pp-text { transition: opacity .25s, transform .3s, filter .3s; }
.pp-demo {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(.94); pointer-events: none;
  transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pp.demo-on .pp-icon, .pp.demo-on .pp-text { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.demo-on .pp-demo { opacity: 1; transform: none; }
.pp-skip.demo-on { border-color: rgba(255, 209, 102, .55); box-shadow: 0 0 30px -12px var(--gold); }
.pp-ai.demo-on { border-color: rgba(76, 201, 240, .55); box-shadow: 0 0 30px -12px var(--ai); }
.pp-wheel.demo-on { border-color: rgba(255, 122, 69, .55); box-shadow: 0 0 30px -12px var(--wheel); }

/* Pular pergunta: a página é jogada para a esquerda, girando, e a de baixo vira "acerto" */
.dm-skip { position: relative; width: 100%; height: 100%; }
.dm-card {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 60px; margin: -30px 0 0 -23px;
  border-radius: 9px; padding: 7px 7px 0; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(160deg, #2c2768, #191545); border: 1px solid rgba(255, 209, 102, .55);
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .6);
}
.dm-sym { position: relative; height: 16px; margin-bottom: 1px; }
.dm-sym i { position: absolute; left: 0; top: 0; font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: .95rem; color: var(--gold); line-height: 1; }
.dm-ok { position: absolute; left: -2px; top: -2px; width: 20px; height: 20px; opacity: 0; fill: none; stroke: var(--ok); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-ok path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.dm-card u { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.dm-card u:nth-of-type(2) { width: 80%; }
.dm-card u:nth-of-type(3) { width: 55%; }
.dm-next { z-index: 1; transform: translateY(6px) scale(.92); opacity: .7; }
.dm-fly { z-index: 2; }
.demo-on .dm-fly { animation: dmToss 3s cubic-bezier(.45, 0, .55, 1) infinite; }
.demo-on .dm-next { animation: dmNext 3s cubic-bezier(.2, .8, .2, 1) infinite; }
.demo-on .dm-next .dm-sym i { animation: dmQ 3s ease infinite; }
.demo-on .dm-ok { animation: dmOk 3s ease infinite; }
.demo-on .dm-ok path { animation: dmOkDraw 3s ease-out infinite; }
@keyframes dmToss {
  0%, 14% { transform: none; opacity: 1; }
  20% { transform: translate(5px, -3px) rotate(6deg); }
  42% { transform: translate(-210px, -26px) rotate(-300deg) scale(.85); opacity: 1; }
  43% { transform: translate(-210px, -26px) rotate(-300deg) scale(.85); opacity: 0; }
  44% { transform: translateY(-10px) scale(1.15); opacity: 0; }
  86% { transform: translateY(-10px) scale(1.15); opacity: 0; }
  90% { opacity: 1; }
  96%, 100% { transform: none; opacity: 1; }
}
@keyframes dmNext {
  0%, 26% { transform: translateY(6px) scale(.92); opacity: .7; border-color: rgba(255, 209, 102, .55); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .6); }
  44%, 54% { transform: none; opacity: 1; border-color: rgba(255, 209, 102, .55); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .6); }
  60%, 86% { transform: none; opacity: 1; border-color: var(--ok); box-shadow: 0 0 18px -4px var(--ok); }
  96%, 100% { transform: translateY(6px) scale(.92); opacity: .7; border-color: rgba(255, 209, 102, .55); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .6); }
}
@keyframes dmQ {
  0%, 50% { transform: none; opacity: 1; }
  55%, 91% { transform: scale(.2) rotate(-90deg); opacity: 0; }
  92%, 100% { transform: none; opacity: 1; }
}
@keyframes dmOk {
  0%, 52% { transform: scale(.4); opacity: 0; }
  58% { transform: scale(1.25); opacity: 1; }
  64%, 86% { transform: none; opacity: 1; }
  89%, 100% { transform: scale(.6); opacity: 0; }
}
@keyframes dmOkDraw {
  0%, 53% { stroke-dashoffset: 24; }
  63%, 100% { stroke-dashoffset: 0; }
}

/* Pergunte à IA: scanner + códigos + barra percentual */
.dm-ai { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 12px 14px; }
.dm-sheet {
  position: relative; flex: none; width: 66px; height: 70px; padding: 7px 6px; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(160deg, rgba(76, 201, 240, .12), rgba(123, 108, 255, .1)); border: 1px solid rgba(76, 201, 240, .35);
}
.dm-q { display: block; height: 6px; width: 85%; border-radius: 4px; background: rgba(255, 255, 255, .35); margin-bottom: 3px; }
.dm-opt { position: relative; display: flex; align-items: center; gap: 3px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dm-opt b { position: relative; z-index: 1; font-size: 6.5px; line-height: 1; padding-left: 2px; color: var(--text-soft); }
.dm-opt em { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(76, 201, 240, .35), rgba(123, 108, 255, .45)); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.dm-opt.top { box-shadow: 0 0 0 1px var(--ai); }
.dm-opt.top em { background: linear-gradient(90deg, var(--ai), var(--ai-2)); }
.dm-scan {
  position: absolute; left: 0; right: 0; top: -20%; height: 14px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(76, 201, 240, .55) 70%, #bff1ff 100%);
  border-bottom: 1px solid #bff1ff;
}
.dm-ai.scanning .dm-scan { opacity: 1; animation: dmScan .8s linear infinite alternate; }
@keyframes dmScan { from { top: -14px; } to { top: calc(100% - 2px); } }
.dm-corners i { position: absolute; width: 8px; height: 8px; border: 2px solid var(--gold); opacity: 0; transition: opacity .2s; }
.dm-corners i:nth-child(1) { top: 2px; left: 2px; border-right: 0; border-bottom: 0; }
.dm-corners i:nth-child(2) { top: 2px; right: 2px; border-left: 0; border-bottom: 0; }
.dm-corners i:nth-child(3) { bottom: 2px; left: 2px; border-right: 0; border-top: 0; }
.dm-corners i:nth-child(4) { bottom: 2px; right: 2px; border-left: 0; border-top: 0; }
.dm-ai.scanning .dm-corners i { opacity: 1; animation: pulse .6s ease-in-out infinite; }
.dm-side { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 8px; }
.dm-log {
  grid-column: 1 / -1; height: 42px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .64rem; line-height: 1.35; color: var(--ai); text-align: left;
}
.dm-log span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: typeIn .3s steps(16) both; }
.dm-log span.ok { color: var(--ok); font-weight: 700; }
.dm-meter { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dm-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ai), var(--ai-2)); box-shadow: 0 0 8px var(--ai); }
.dm-pct { font-family: var(--font-display); font-size: .72rem; font-weight: 700; color: var(--ai); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.dm-ai.done .dm-pct { color: var(--ok); }

/* Roleta Eliminatória: mini roleta girando */
.dm-wheel { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px 12px; }
.dm-wheel-box { position: relative; flex: none; width: 74px; height: 74px; }
.dm-wheel-box::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from var(--glow-a), var(--wheel), var(--wheel-2), var(--ai), var(--wheel));
  filter: blur(9px); opacity: .45; animation: glowSpin 4s linear infinite;
}
.dm-wheel-box .wheel-svg { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.dm-wheel-box .wsmall { display: none; }
.dm-wheel-box .wbig { font-size: 22px; }
.dm-pointer {
  position: absolute; z-index: 2; left: 50%; top: -6px; width: 12px; height: 15px; transform: translateX(-50%);
  background: var(--gold); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.dm-wres {
  display: flex; align-items: center; gap: 8px; text-align: left; white-space: nowrap; overflow: hidden;
  font-size: .76rem; font-weight: 700; line-height: 1.25; color: var(--text-soft);
  /* fechado enquanto gira: a roleta fica no centro */
  max-width: 0; margin-left: 0; opacity: 0; transform: translateX(-8px);
  transition: max-width .45s cubic-bezier(.2, .8, .2, 1), margin-left .45s cubic-bezier(.2, .8, .2, 1), opacity .25s, transform .3s;
}
/* ao parar: a roleta desliza para o lado e o texto aparece */
.dm-wres.on {
  max-width: 130px; margin-left: 14px; opacity: 1; transform: none;
  transition: max-width .45s cubic-bezier(.2, .8, .2, 1), margin-left .45s cubic-bezier(.2, .8, .2, 1), opacity .3s .2s, transform .3s .2s;
}
.dm-wres .r-chip.sm { font-size: .5rem; }
.dm-wres .r-chip { width: 24px; height: 24px; font-size: .74rem; animation: popIn .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.start-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.start-actions .btn { width: 240px; max-width: 100%; }
.start-actions .btn-sun { font-size: 1.08rem; }
.alert { margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: rgba(255, 77, 109, .15); border: 1px solid rgba(255, 77, 109, .4); color: #ffc2cd; }

/* ---------------- Jogo ---------------- */
.game { width: min(1180px, 100%); display: flex; flex-direction: column; gap: 18px; }

.hud {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 10px 12px 10px 20px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .8);
}
.hud-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; letter-spacing: .08em; }
.hud-brand svg { width: 30px; color: var(--sun-1); }
.hud-progress { display: flex; gap: 5px; }
.seg { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); transition: background .3s; }
.seg.now { background: rgba(255, 255, 255, .55); box-shadow: 0 0 12px rgba(255, 255, 255, .5); animation: pulse 1.6s infinite; }
.seg.ok { background: var(--ok); }
.seg.bad { background: var(--bad); }
@keyframes pulse { 50% { opacity: .5; } }
.hud-stats { display: flex; align-items: center; gap: 14px; }
.stat-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; min-width: 70px; transition: transform .2s; }
.stat-score small { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-mute); }
.stat-score b { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); }
.stat-score.bump { transform: scale(1.18); }
.stat-lives { display: flex; gap: 3px; }
.heart svg { width: 22px; height: 22px; fill: var(--bad); filter: drop-shadow(0 0 6px rgba(255, 77, 109, .6)); transition: .3s; }
.heart.lost svg { fill: rgba(255, 255, 255, .14); filter: none; transform: scale(.85); }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--glass-line-strong);
  background: rgba(255, 255, 255, .06); display: grid; place-items: center; color: var(--text-soft);
}
.icon-btn:hover { background: rgba(255, 77, 109, .2); color: #fff; }
.icon-btn svg { width: 18px; height: 18px; }

.arena { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }

/* Cartão da pergunta */
.qcard {
  position: relative; overflow: hidden;
  padding: 26px 28px 28px; border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(40, 34, 104, .78), rgba(16, 14, 48, .86));
  border: 1px solid var(--glass-line); backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.qcard::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sun); opacity: .9;
}
.anim-enter { animation: cardIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.anim-exit { animation: cardOut .28s ease-in both; }
.anim-skip { animation: cardSkip .52s cubic-bezier(.5, 0, .7, .3) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes cardOut { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes cardSkip { 40% { transform: translateX(12px) rotate(1deg); } to { opacity: 0; transform: translateX(-110%) rotate(-6deg); } }
.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}
body.flash-bad .sky, body.flash-bad .sky-day { filter: hue-rotate(-30deg) saturate(1.6); transition: filter .1s; }

.q-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.q-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); color: var(--text-soft);
}
.tag-num { color: var(--text); background: rgba(255, 255, 255, .14); }
.diff-easy { color: var(--ok); border-color: rgba(45, 226, 166, .35); }
.diff-mid { color: var(--gold); border-color: rgba(255, 209, 102, .35); }
.diff-hard { color: var(--bad); border-color: rgba(255, 77, 109, .4); }

.timer { position: relative; flex: none; width: 60px; height: 60px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 5; }
.timer-track { stroke: rgba(255, 255, 255, .1); }
.timer-bar { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }
.timer b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; }
.timer.warn .timer-bar { stroke: var(--gold); }
.timer.danger .timer-bar { stroke: var(--bad); }
.timer.danger b { color: var(--bad); animation: pulse .5s infinite; }
.timer.paused .timer-bar { stroke: var(--ai); }
.timer.paused b { color: var(--ai); }

.q-text {
  margin: 20px 0 24px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.75rem); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance;
}

/* Alternativas */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answers.five .ans:last-child { grid-column: 1 / -1; }
.ans {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; min-height: 68px;
  padding: 12px 16px 12px 12px; border-radius: var(--r-lg); text-align: left;
  background: rgba(255, 255, 255, .055); border: 1.5px solid rgba(255, 255, 255, .13);
  font-weight: 700; font-size: 1rem; line-height: 1.3;
  transition: background .2s, border-color .2s, transform .15s, opacity .3s, box-shadow .2s;
}
.ans:hover:not(:disabled) {
  background: rgba(255, 255, 255, .11); border-color: rgba(255, 179, 71, .7);
  transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(255, 140, 80, .8);
}
.ans-letter {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: .95rem;
  background: rgba(255, 255, 255, .1); color: var(--sun-1); position: relative; z-index: 1;
}
.ans-text { flex: 1; position: relative; z-index: 1; }
.ans-pct { position: relative; z-index: 1; font-family: var(--font-display); font-size: .85rem; color: var(--ai); font-variant-numeric: tabular-nums; display: none; }
.ans-ai { position: absolute; inset: 0; pointer-events: none; display: none; }
.ans-ai-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(76, 201, 240, .22), rgba(123, 108, 255, .3));
  border-right: 2px solid rgba(76, 201, 240, .8);
  transition: width 1.3s cubic-bezier(.2, .8, .2, 1);
}
.ans.has-ai .ans-ai, .ans.has-ai .ans-pct { display: block; }
.ans.ai-top { border-color: rgba(76, 201, 240, .7); }
.ans.ai-top .ans-pct { color: #fff; text-shadow: 0 0 12px var(--ai); }
.ans.is-out { opacity: .32; text-decoration: line-through; text-decoration-thickness: 2px; border-style: dashed; }
.ans.is-out .ans-letter { color: var(--text-mute); }
.ans.is-correct { background: rgba(45, 226, 166, .2); border-color: var(--ok); box-shadow: 0 0 0 4px rgba(45, 226, 166, .18), 0 10px 30px -10px rgba(45, 226, 166, .8); opacity: 1; }
.ans.is-correct .ans-letter { background: var(--ok); color: #053827; }
.ans.is-wrong { background: rgba(255, 77, 109, .2); border-color: var(--bad); opacity: 1; }
.ans.is-wrong .ans-letter { background: var(--bad); color: #fff; }
.ans.is-dim { opacity: .4; }
.ans:disabled:not(.is-correct):not(.is-wrong) { transform: none; }
.ans.scanned { border-color: var(--ai); }
.ans.eliminating { animation: eliminate .6s ease-in forwards; }
@keyframes eliminate {
  0% { transform: scale(1); }
  30% { transform: scale(1.04); background: rgba(255, 77, 109, .4); border-color: var(--bad); }
  100% { transform: scale(.94); opacity: .3; filter: grayscale(1); }
}
.answers.shuffling .ans { border-color: rgba(199, 77, 255, .7); box-shadow: 0 0 18px -4px rgba(199, 77, 255, .8); }
.ans.pop-in { animation: popIn .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes popIn {
  0% { opacity: 0; transform: scale(.4) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}

/* Feedback */
/* Compacto: título + botão "Próxima" dividem a mesma linha; explicação embaixo */
.feedback {
  margin-top: 14px; padding: 14px 18px; border-radius: var(--r-lg); background: rgba(0, 0, 0, .25); border: 1px solid var(--glass-line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
}
.feedback[hidden] { display: none; }
.feedback.in { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.fb-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fb-head b { font-family: var(--font-display); font-size: 1.05rem; display: block; }
.fb-head small { color: var(--text-soft); font-size: .85rem; }
.fb-badge { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; }
.fb-body { grid-column: 1 / -1; margin-top: 8px; }
.fb-head.ok .fb-badge { background: var(--ok); color: #053827; }
.fb-head.ok b { color: var(--ok); }
.fb-head.bad .fb-badge { background: var(--bad); color: #fff; }
.fb-head.bad b { color: #ff8da2; }
.fb-text { margin: 4px 0; color: var(--text); font-size: .95rem; line-height: 1.45; }
.fb-muted { color: var(--text-soft); font-size: .9rem; }
.fb-source { margin: 6px 0 0; font-size: .76rem; color: var(--text-mute); }
.fb-source a { color: var(--ai); text-decoration: underline; text-underline-offset: 2px; }
.fb-source a::after { content: " ↗"; text-decoration: none; display: inline-block; margin-left: 2px; }
.fb-source a:hover { opacity: .8; }
.btn-next { grid-column: 2; grid-row: 1; min-width: 200px; }

/* Painel de ajudas */
.powers { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.power {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px;
  align-items: center; padding: 16px; border-radius: var(--r-lg); text-align: left;
  background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: blur(12px);
  transition: transform .15s, border-color .2s, box-shadow .2s, opacity .2s;
}
.power-icon { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.power-icon svg { width: 26px; height: 26px; }
.power-body b { display: block; font-size: .98rem; }
.power-body small { color: var(--text-mute); font-size: .78rem; }
.power-pips { display: flex; gap: 6px; }
/* mini-animação no hover (mesma da tela inicial) */
.power { overflow: hidden; min-height: 96px; }
.power-icon, .power-body, .power-pips { transition: opacity .25s, transform .3s, filter .3s; }
.power.demo-on .power-icon, .power.demo-on .power-body, .power.demo-on .power-pips { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.power.demo-on { transform: none !important; }
.power-pips i { width: 22px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.power-skip .power-icon { background: rgba(255, 209, 102, .15); color: var(--gold); }
.power-skip .power-pips i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 209, 102, .7); }
.power-ai .power-icon { background: linear-gradient(135deg, rgba(76, 201, 240, .22), rgba(123, 108, 255, .22)); color: var(--ai); }
.power-ai .power-pips i.on { background: var(--ai); box-shadow: 0 0 8px rgba(76, 201, 240, .7); }
.power-wheel .power-icon { background: linear-gradient(135deg, rgba(255, 122, 69, .2), rgba(199, 77, 255, .2)); color: var(--wheel); }
.power-wheel .power-pips i.on { background: linear-gradient(90deg, var(--wheel), var(--wheel-2)); box-shadow: 0 0 8px rgba(255, 122, 69, .7); }
.power:hover:not(:disabled) { transform: translateX(-4px); }
.power-skip:hover:not(:disabled) { border-color: rgba(255, 209, 102, .6); }
.power-ai:hover:not(:disabled) { border-color: rgba(76, 201, 240, .6); box-shadow: 0 0 30px -10px var(--ai); }
.power-wheel:hover:not(:disabled) { border-color: rgba(255, 122, 69, .6); box-shadow: 0 0 30px -10px var(--wheel); }
.power:disabled { opacity: .45; }
.power.is-spent { opacity: .3; filter: grayscale(.8); }

/* ---------------- IA: visão computacional ---------------- */
.vision {
  position: absolute; inset: 0; z-index: 10; pointer-events: all; opacity: 0; transition: opacity .3s;
  background: rgba(4, 18, 36, .42);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}
.vision.on { opacity: 1; }
.vision.done { opacity: 0; transition-duration: .45s; }
.vision-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(76, 201, 240, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 201, 240, .09) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.vision-scan {
  position: absolute; left: 0; right: 0; height: 90px; top: -90px;
  background: linear-gradient(180deg, transparent, rgba(76, 201, 240, .28) 85%, rgba(160, 240, 255, .9) 100%);
  border-bottom: 2px solid #a8f0ff; box-shadow: 0 4px 24px rgba(76, 201, 240, .8);
  animation: scan 1.5s linear infinite;
}
@keyframes scan { to { top: 100%; } }
.vision-hud {
  position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 14px; align-items: center;
  font-size: .7rem; letter-spacing: .08em; color: #a8f0ff; text-transform: uppercase;
}
.vision-hud .rec { color: #ff6b81; animation: pulse 1s infinite; }
.vision-hud .fps { margin-left: auto; opacity: .7; }
.vision-corners i { position: absolute; width: 26px; height: 26px; border: 2px solid #a8f0ff; }
.vision-corners i:nth-child(1) { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.vision-corners i:nth-child(2) { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.vision-corners i:nth-child(3) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.vision-corners i:nth-child(4) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.vision-reticle {
  position: absolute; left: 0; top: 0; width: 80px; height: 80px; z-index: 2;
  transform: translate(40%, 40%);
  transition: transform .38s cubic-bezier(.5, 0, .2, 1), width .38s cubic-bezier(.5, 0, .2, 1), height .38s cubic-bezier(.5, 0, .2, 1), opacity .3s;
}
.vision-reticle.hide { opacity: 0; }
.vision-reticle i { position: absolute; width: 16px; height: 16px; border: 3px solid var(--gold); }
.vision-reticle i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vision-reticle i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vision-reticle i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vision-reticle i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.vision-tag {
  position: absolute; left: 0; top: -22px; white-space: nowrap; padding: 2px 8px; border-radius: 4px;
  background: var(--gold); color: #1a1400; font-size: .68rem; font-weight: 700;
}
.vision-box {
  position: absolute; border: 1.5px solid rgba(76, 201, 240, .85); border-radius: 6px;
  background: rgba(76, 201, 240, .07); animation: boxIn .3s ease-out both;
}
.vision-box::after {
  content: attr(data-label); position: absolute; right: 4px; bottom: -1px; transform: translateY(100%);
  font-size: .6rem; color: #a8f0ff; background: rgba(4, 18, 36, .85); padding: 1px 6px; border-radius: 0 0 4px 4px;
}
@keyframes boxIn { from { opacity: 0; transform: scale(1.06); } }
.vision-log {
  position: absolute; left: 16px; bottom: 26px; right: 16px; z-index: 3;
  padding: 10px 12px; border-radius: 10px; background: rgba(2, 10, 22, .82); border: 1px solid rgba(76, 201, 240, .35);
  font-size: .76rem; color: #a8f0ff; min-height: 40px;
}
.vision-log p { margin: 2px 0; animation: typeIn .35s steps(24) both; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vision-log p.ok { color: var(--ok); }
@keyframes typeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vision-meter { position: absolute; left: 16px; right: 16px; bottom: 12px; height: 4px; border-radius: 9px; background: rgba(76, 201, 240, .15); overflow: hidden; }
.vision-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ai), var(--ai-2)); transition: width .5s ease; }

/* ---------------- Modal / Roleta ---------------- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4, 4, 18, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.modal-card {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 26px 24px; border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(170deg, #241c63, #110e36); border: 1px solid var(--glass-line-strong);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
  transform: translateY(20px) scale(.96); opacity: 0; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
/* barra de rolagem dentro do cartão: fina, afastada da borda e longe dos cantos
   arredondados (a margem do trilho = raio do cartão) */
.modal-card::-webkit-scrollbar { width: 12px; }
.modal-card::-webkit-scrollbar-track { background: transparent; margin-block: var(--r-xl); }
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22); border-radius: 99px;
  border: 4px solid transparent; background-clip: padding-box;
}
.modal-card::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .35); }
@supports not selector(::-webkit-scrollbar) {
  .modal-card { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
}
[data-theme="light"] .modal-card::-webkit-scrollbar-thumb { background-color: rgba(30, 42, 72, .22); }
[data-theme="light"] .modal-card::-webkit-scrollbar-thumb:hover { background-color: rgba(30, 42, 72, .35); }
.modal.open .modal-backdrop { opacity: 1; }
.modal.open .modal-card { transform: none; opacity: 1; }
.modal.locked .modal-x { visibility: hidden; }
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .06); font-size: 1.3rem; line-height: 1;
}
.modal h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.35rem; }
.confirm p { color: var(--text-soft); margin: 0 0 20px; }
.confirm .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* a roda se ajusta à altura da janela: o resto do modal ocupa ~330px */
.wheel-wrap { position: relative; width: clamp(170px, min(320px, 78vw, 100dvh - 330px), 320px); aspect-ratio: 1; margin: 14px auto 10px; }
.wheel-wrap::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(from var(--glow-a), var(--wheel), var(--wheel-2), var(--ai), var(--wheel));
  filter: blur(18px); opacity: .45; animation: glowSpin 6s linear infinite;
}
/* gira as cores do brilho (não o elemento): o tamanho da caixa não muda,
   então não aparece barra de rolagem no modal durante a rotação */
@property --glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes glowSpin { to { --glow-a: 360deg; } }
.wheel-svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .6)); }
.wheel-rot { transform-box: fill-box; transform-origin: center; }
.wrim { fill: #0b0926; stroke: #ffd166; stroke-width: 2; }
.wseg { stroke: #0b0926; stroke-width: 1.4; transition: filter .3s; }
.wseg.win { filter: brightness(1.35) drop-shadow(0 0 6px #fff); }
.wpin { fill: #ffe9b8; }
.whub-bg { fill: #0b0926; stroke: #ffd166; stroke-width: 2; }
.wlabel text { text-anchor: middle; fill: #fff; font-family: var(--font-display); }
.wlabel.dark text { fill: #2a0b1e; }
.wbig { font-size: 19px; font-weight: 900; }
.wsmall { font-size: 6.4px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-body) !important; }
.wheel-pointer {
  position: absolute; z-index: 3; left: 50%; top: -12px; width: 30px; height: 38px; transform: translateX(-50%);
  background: var(--gold); clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6));
}
.wheel-hub {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px solid var(--gold); background: var(--sun); color: #2a0b1e;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(.7rem, 3vw, .9rem); letter-spacing: .04em;
  box-shadow: 0 0 0 6px rgba(11, 9, 38, .9), 0 0 24px rgba(255, 140, 80, .8);
  animation: hubPulse 1.4s ease-in-out infinite;
}
.wheel-hub:disabled { animation: none; filter: saturate(.6); }
@keyframes hubPulse { 50% { box-shadow: 0 0 0 6px rgba(11, 9, 38, .9), 0 0 40px rgba(255, 140, 80, 1); } }
.roulette-result { min-height: 40px; margin: 2px 0 8px; color: var(--text-soft); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.r-chip { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--font-display); font-weight: 900; color: #fff; flex: none; }
/* legenda em 2 colunas (a 5ª casa ocupa a linha inteira): 3 linhas em vez de 5 */
.roulette-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; text-align: left; font-size: .8rem; color: var(--text-soft); }
.roulette-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; transition: background .3s; }
.roulette-legend li:nth-child(5) { grid-column: 1 / -1; }
.roulette-legend li.win { background: rgba(255, 255, 255, .12); color: #fff; }
.roulette-legend .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.roulette-legend b { font-family: var(--font-display); width: 14px; }

/* Toast */
.toast {
  position: fixed; z-index: 50; left: 50%; top: 18px; transform: translate(-50%, -30px); opacity: 0;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .92rem; max-width: calc(100vw - 32px);
  background: var(--glass-strong); border: 1px solid var(--glass-line-strong); backdrop-filter: blur(12px);
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .8); transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.toast.in { transform: translate(-50%, 0); opacity: 1; }
.toast-ai { border-color: rgba(76, 201, 240, .6); color: #c9f3ff; }
.toast-wheel { border-color: rgba(255, 122, 69, .6); color: #ffd8c8; }
.toast-skip { border-color: rgba(255, 209, 102, .6); color: #fff0c2; }

/* ---------------- Fim de jogo ---------------- */
.end, .ranking { width: min(620px, 100%); }
.end-card, .rank-card {
  padding: 32px 28px; border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(165deg, rgba(40, 34, 104, .85), rgba(14, 12, 44, .92));
  border: 1px solid var(--glass-line); backdrop-filter: blur(16px); box-shadow: var(--shadow);
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
}
.end-title { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(1.3rem, 4vw, 1.8rem); }
.end-score { margin: 18px 0 20px; }
.end-score b {
  display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1;
  background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.end-score span { color: var(--text-mute); text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; }
.end-stats { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.end-stats li { padding: 12px 6px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); }
.end-stats b { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.end-stats span { font-size: .7rem; color: var(--text-mute); }
.save { text-align: left; padding: 18px; border-radius: var(--r-lg); background: rgba(0, 0, 0, .25); border: 1px solid var(--glass-line); }
.save label { display: block; font-weight: 800; margin-bottom: 10px; }
.save-row { display: flex; gap: 10px; }
.save input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--glass-line-strong); background: rgba(255, 255, 255, .06); font-weight: 700; font-size: 1rem;
}
.save input:focus { outline: none; border-color: var(--sun-1); box-shadow: 0 0 0 4px rgba(255, 179, 71, .2); }
.save-msg { margin: 8px 0 0; min-height: 1.2em; font-size: .85rem; color: var(--text-soft); }
.end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }

/* ---------------- Ranking ---------------- */
.rank-title { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 2rem); display: inline-flex; align-items: center; gap: 12px; }
.rank-title svg { width: 30px; height: 30px; color: var(--gold); }
.rank-mine { margin: 6px 0 0; color: var(--text-soft); }
.rank-mine b { color: var(--gold); }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 10px; margin: 30px 0 18px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; position: relative; }
.pod-avatar {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: #1a0f2e;
}
.pod-1 .pod-avatar { width: 68px; height: 68px; font-size: 1.6rem; background: linear-gradient(135deg, #ffe58a, #ffb347); box-shadow: 0 0 30px rgba(255, 209, 102, .6); }
.pod-2 .pod-avatar { background: linear-gradient(135deg, #f1f1ff, #a7a7c9); }
.pod-3 .pod-avatar { background: linear-gradient(135deg, #ffc49b, #c8743f); }
.pod-name { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: .8rem; color: var(--gold); font-weight: 700; }
.pod-block {
  width: 100%; border-radius: 14px 14px 4px 4px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid var(--glass-line);
  font-family: var(--font-display); font-size: 1.3rem;
}
.pod-1 .pod-block { height: 110px; background: linear-gradient(180deg, rgba(255, 209, 102, .35), rgba(255, 209, 102, .04)); }
.pod-2 .pod-block { height: 80px; }
.pod-3 .pod-block { height: 60px; }
.pod.empty { opacity: .35; }
.pod.me .pod-name { color: var(--gold); }
.pod.me .pod-avatar { outline: 3px solid var(--ok); outline-offset: 3px; }
.crown { position: absolute; top: -30px; color: var(--gold); filter: drop-shadow(0 2px 6px rgba(255, 196, 70, .6)); animation: float 2.4s ease-in-out infinite; }
.crown svg { width: 28px; height: 28px; display: block; }
@keyframes float { 50% { transform: translateY(-6px); } }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.rank-list li {
  display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line);
  animation: rise .4s both;
}
.rank-list li:nth-child(2) { animation-delay: .05s; } .rank-list li:nth-child(3) { animation-delay: .1s; }
.rank-list li:nth-child(4) { animation-delay: .15s; } .rank-list li:nth-child(5) { animation-delay: .2s; }
.rank-list li.me { border-color: var(--ok); background: rgba(45, 226, 166, .12); }
.rank-list .pos { font-family: var(--font-display); color: var(--text-mute); }
.rank-list .nm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .meta { font-size: .78rem; color: var(--text-mute); }
.rank-list .pts { font-family: var(--font-display); color: var(--gold); }
.rank-empty { color: var(--text-soft); margin: 30px 0; }
.rank-note { font-size: .8rem; color: var(--text-mute); margin-top: 16px; }
/* "Ver todos" */
.link-btn {
  display: block; margin: 14px auto 0; padding: 4px 8px; border: 0; background: none; cursor: pointer;
  color: var(--gold); font: inherit; font-size: .88rem; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link-btn:hover { text-decoration-thickness: 2px; filter: brightness(1.15); }
/* Modal "Todas as pontuações": lista com rolagem própria + redimensionável */
.modal-rank-all {
  width: min(520px, 100%); max-height: min(560px, calc(100dvh - 32px));
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 20px;
}
.modal-rank-all.resizing { transition: none; user-select: none; }
.rank-all { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rank-all h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.3rem; }
.rank-all-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rank-all-count { flex: none; margin: 0 0 14px; font-size: .8rem; color: var(--text-mute); }
.rank-all-body .rank-empty { margin: 20px 0; }
.rank-list-all {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  align-content: start; padding-right: 6px; margin-right: -6px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 209, 102, .55) transparent;
}
.rank-list-all::-webkit-scrollbar { width: 8px; }
.rank-list-all::-webkit-scrollbar-thumb { background: rgba(255, 209, 102, .5); border-radius: 99px; }
.rank-list-all::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 99px; }
.rank-list-all li { animation: none; }
/* nome sempre inteiro (quebra a linha se precisar, sem reticências) */
/* Ranking compacto: cabe na tela sem rolar. Pódio e espaços mais baixos e, no
   desktop, a lista (4º–10º) em 2 colunas — 7 linhas viram 4. */
.ranking { width: min(760px, 100%); }
.rank-card { padding: 22px 24px 20px; }
.rank-card .rank-title { font-size: clamp(1.3rem, 4.4vw, 1.75rem); }
.rank-card .rank-title svg { width: 26px; height: 26px; }
.rank-card .podium { margin: 28px 0 14px; }
.rank-card .pod { gap: 4px; }
.rank-card .pod-avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.rank-card .pod-1 .pod-avatar { width: 56px; height: 56px; font-size: 1.35rem; }
.rank-card .pod-1 .pod-block { height: 78px; }
.rank-card .pod-2 .pod-block { height: 58px; }
.rank-card .pod-3 .pod-block { height: 44px; }
.rank-card .crown { top: -26px; }
.rank-card .crown svg { width: 24px; height: 24px; }
.rank-card .rank-list li { padding: 8px 14px; gap: 10px; grid-template-columns: 34px 1fr auto auto; }
.rank-card .link-btn { margin-top: 10px; }
.rank-card .end-actions { margin-top: 12px; }
@media (min-width: 641px) {
  .rank-card .rank-list { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
}
.rank-list-all .nm { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
/* alça de redimensionar (canto inferior direito) */
.modal-grip {
  position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none;
  border-radius: 6px; opacity: .6; transition: opacity .2s, background .2s;
  background:
    linear-gradient(135deg, transparent 50%, var(--text-mute) 50%, var(--text-mute) 58%, transparent 58%,
      transparent 68%, var(--text-mute) 68%, var(--text-mute) 76%, transparent 76%);
}
.modal-grip:hover, .resizing .modal-grip { opacity: 1; background-color: rgba(255, 255, 255, .08); }
[data-theme="light"] .rank-list-all { scrollbar-color: rgba(201, 133, 0, .55) transparent; }
[data-theme="light"] .rank-list-all::-webkit-scrollbar-thumb { background: rgba(201, 133, 0, .5); }
[data-theme="light"] .rank-list-all::-webkit-scrollbar-track { background: rgba(30, 42, 72, .06); }

.confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; width: 100%; height: 100%; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

/* =====================================================================
   MODO CLARO — "dia nublado no lavrado"
   ===================================================================== */
:root[data-theme="light"] {
  --night-0: #dfe6ea;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-line: rgba(30, 42, 72, 0.12);
  --glass-line-strong: rgba(30, 42, 72, 0.2);
  --text: #1b2238;
  --text-soft: #46506b;
  --text-mute: #69738e;
  --ok: #10a877;
  --bad: #e2334f;
  --gold: #c98500;
  --ai: #1a8fc0;
  --ai-2: #5b4ee0;
  --wheel: #e8602b;
  --shadow: 0 30px 60px -26px rgba(40, 60, 90, .38), 0 0 0 1px var(--glass-line) inset;
  color-scheme: light;
}
/* Título de dia = um tepui na luz do dia: ardósia dos tepuis distantes no alto,
   descendo para o verde-musgo dos tepuis próximos, com um brilho quente do sol
   batendo nas letras da direita (o sol fica à direita). */
[data-theme="light"] .brand-title {
  background:
    linear-gradient(205deg, rgba(255, 226, 150, .75) 0%, rgba(255, 226, 150, .25) 22%, transparent 42%),
    linear-gradient(180deg, #5d7a8c 8%, #4b6875 48%, #436a58 78%, #4e7a4f 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)) drop-shadow(0 10px 22px rgba(52, 78, 92, .22));
}
[data-theme="light"] .brand-mark { filter: drop-shadow(0 6px 16px rgba(255, 140, 80, .45)); }
[data-theme="light"] .alert { color: #a3192f; }
[data-theme="light"] .btn-glass { background: rgba(255, 255, 255, .6); }
[data-theme="light"] .btn-glass:hover { background: rgba(255, 255, 255, .9); }
[data-theme="light"] .hud { box-shadow: 0 12px 30px -18px rgba(40, 60, 90, .5); }
[data-theme="light"] .seg { background: rgba(30, 42, 72, .12); }
[data-theme="light"] .seg.now { background: rgba(30, 42, 72, .45); box-shadow: none; }
[data-theme="light"] .seg.ok { background: var(--ok); }
[data-theme="light"] .seg.bad { background: var(--bad); }
[data-theme="light"] .heart.lost svg { fill: rgba(30, 42, 72, .16); }
[data-theme="light"] .icon-btn { background: rgba(255, 255, 255, .6); }
[data-theme="light"] .icon-btn:hover { background: rgba(226, 51, 79, .14); color: var(--bad); }
[data-theme="light"] .qcard { background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(238, 243, 247, .84)); }
[data-theme="light"] .tag { background: rgba(30, 42, 72, .05); }
[data-theme="light"] .tag-num { background: rgba(30, 42, 72, .1); }
[data-theme="light"] .timer-track { stroke: rgba(30, 42, 72, .12); }
[data-theme="light"] .ans { background: rgba(255, 255, 255, .62); border-color: rgba(30, 42, 72, .14); }
[data-theme="light"] .ans:hover:not(:disabled) { background: #fff; border-color: rgba(232, 128, 40, .75); box-shadow: 0 10px 24px -14px rgba(232, 110, 40, .7); }
[data-theme="light"] .ans-letter { background: rgba(255, 140, 60, .14); color: #d6611c; }
[data-theme="light"] .ans.ai-top { border-color: rgba(26, 143, 192, .7); }
[data-theme="light"] .ans.ai-top .ans-pct { color: var(--ai); text-shadow: none; }
[data-theme="light"] .ans.is-correct { background: rgba(16, 168, 119, .16); border-color: var(--ok); }
[data-theme="light"] .ans.is-wrong { background: rgba(226, 51, 79, .13); border-color: var(--bad); }
[data-theme="light"] .ans.is-correct .ans-letter { background: var(--ok); color: #fff; }
[data-theme="light"] .ans.is-wrong .ans-letter { background: var(--bad); color: #fff; }
[data-theme="light"] .feedback { background: rgba(255, 255, 255, .55); }
[data-theme="light"] .fb-head.ok .fb-badge { color: #fff; }
[data-theme="light"] .fb-head.bad b { color: #c42640; }
[data-theme="light"] .power-pips i { background: rgba(30, 42, 72, .12); }
[data-theme="light"] .dm-card { background: linear-gradient(160deg, #ffffff, #eef2f7); border-color: rgba(201, 133, 0, .55); box-shadow: 0 8px 16px -8px rgba(40, 60, 90, .45); }
[data-theme="light"] .dm-card u,
[data-theme="light"] .dm-q { background: rgba(30, 42, 72, .2); }
[data-theme="light"] .dm-sheet { background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(226, 240, 248, .9)); }
[data-theme="light"] .dm-opt,
[data-theme="light"] .dm-meter { background: rgba(30, 42, 72, .1); }
[data-theme="light"] .dm-scan { background: linear-gradient(180deg, transparent, rgba(26, 143, 192, .4) 70%, rgba(26, 143, 192, .8) 100%); border-bottom-color: var(--ai); }
[data-theme="light"] .modal-backdrop { background: rgba(40, 56, 82, .42); }
[data-theme="light"] .modal-card { background: linear-gradient(170deg, #ffffff, #edf1f5); box-shadow: 0 40px 80px -24px rgba(30, 45, 70, .5); }
[data-theme="light"] .modal-x { background: rgba(30, 42, 72, .05); }
[data-theme="light"] .roulette-legend li.win { background: rgba(30, 42, 72, .08); color: var(--text); }
[data-theme="light"] .toast { box-shadow: 0 16px 30px -12px rgba(40, 60, 90, .45); }
[data-theme="light"] .toast-ai { color: #0f6f96; }
[data-theme="light"] .toast-wheel { color: #b8461a; }
[data-theme="light"] .toast-skip { color: #8a5c00; }
[data-theme="light"] .end-card,
[data-theme="light"] .rank-card { background: linear-gradient(165deg, rgba(255, 255, 255, .9), rgba(237, 242, 246, .88)); }
[data-theme="light"] .end-stats li { background: rgba(255, 255, 255, .55); }
[data-theme="light"] .save { background: rgba(255, 255, 255, .45); }
[data-theme="light"] .save input { background: #fff; }
[data-theme="light"] .pod-block { background: linear-gradient(180deg, rgba(30, 42, 72, .1), rgba(30, 42, 72, .02)); }
[data-theme="light"] .pod-1 .pod-block { background: linear-gradient(180deg, rgba(255, 196, 70, .45), rgba(255, 196, 70, .06)); }
[data-theme="light"] .rank-list li { background: rgba(255, 255, 255, .58); }
[data-theme="light"] .rank-list li.me { background: rgba(16, 168, 119, .12); }
@media (max-width: 900px) {
  [data-theme="light"] .powers { background: rgba(255, 255, 255, .82); }
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 900px) {
  .arena { grid-template-columns: 1fr; }
  .powers {
    position: sticky; top: auto; bottom: 10px; z-index: 5; order: 2;
    flex-direction: row; gap: 8px; padding: 8px; border-radius: var(--r-lg);
    background: rgba(10, 9, 32, .82); backdrop-filter: blur(14px); border: 1px solid var(--glass-line);
  }
  .power { flex: 1; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 6px; row-gap: 6px; }
  .power-icon { grid-row: auto; width: 40px; height: 40px; border-radius: 12px; }
  .power-icon svg { width: 22px; height: 22px; }
  .power-body b { font-size: .78rem; line-height: 1.15; }
  .power-body small { display: none; }
  .power-pips i { width: 14px; height: 5px; }
  .power:hover:not(:disabled) { transform: none; }
  .game.answered .powers { position: static; }
  .power-preview { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --moon: 46px; --sun-size: 30px; }
  .app { padding: 12px 12px 24px; }
  .hud { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand stats' 'prog prog'; border-radius: var(--r-lg); padding: 10px 12px; gap: 10px; }
  .hud-brand span { display: none; }
  .hud-progress { min-width: 0; gap: 4px; }
  .icon-btn { width: 36px; height: 36px; }
  .stat-score { min-width: 0; }
  .hud-brand { grid-area: brand; }
  .hud-progress { grid-area: prog; }
  .hud-stats { grid-area: stats; gap: 10px; }
  .heart svg { width: 18px; height: 18px; }
  .qcard { padding: 20px 16px 18px; border-radius: var(--r-lg); }
  .q-text { margin: 16px 0 18px; }
  .feedback { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .btn-next { grid-column: 1; grid-row: auto; width: 100%; min-width: 0; margin-top: 12px; }
  .answers { grid-template-columns: 1fr; gap: 10px; }
  .answers.five .ans:last-child { grid-column: auto; }
  .ans { min-height: 58px; font-size: .95rem; }
  .ans-letter { width: 34px; height: 34px; border-radius: 10px; }
  .timer { width: 52px; height: 52px; }
  .end-card, .rank-card { padding: 26px 16px; }
  .end-stats { grid-template-columns: repeat(2, 1fr); }
  .save-row { flex-direction: column; }
  .rule-strip li { padding: 8px 14px; }
  .rank-list li { grid-template-columns: 34px 1fr auto; }
  .rank-list .meta { display: none; }
  .vision-log { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vision-scan { display: none; }
}

/* =====================================================================
   CENÁRIO LOW POLY (js/lowpoly.js) — só vale quando o script montou o cenário
   ===================================================================== */

/* malhas: a da noite fica sempre embaixo; a do dia acende por cima */
.ridge .lp-day { opacity: 0; transition: opacity 1.8s ease; }
[data-theme="light"] .ridge .lp-day { opacity: 1; }

/* brilho das facetas (vidro lapidado): acende e apaga devagar */
.lp-glints polygon {
  fill: #fff6e0; opacity: 0;
  animation: lpGlint 12s ease-in-out infinite;
}
.lp-glints-water polygon { fill: #fffbe8; animation-name: lpWater; animation-timing-function: ease-in-out; }
@keyframes lpGlint { 0%, 70%, 100% { opacity: 0; } 82% { opacity: var(--glint, .09); } }
@keyframes lpWater { 0%, 100% { opacity: 0; } 45% { opacity: var(--glint-w, .22); } }
.ridge { --glint: .07; --glint-w: .16; }
.lp-glints polygon { fill: #b9a8ff; }
.lp-glints-water polygon { fill: #d8ceff; }
[data-theme="light"] .ridge { --glint: .14; --glint-w: .5; }
[data-theme="light"] .lp-glints polygon { fill: #fff6e0; }
[data-theme="light"] .lp-glints-water polygon { fill: #ffffff; }

/* plantas facetadas: cada faceta guarda a cor da noite (--n) e do dia (--d) */
.lp-plants polygon { fill: var(--n); stroke: var(--n); stroke-width: .5; stroke-linejoin: round; transition: fill 1.8s ease, stroke 1.8s ease; }
[data-theme="light"] .lp-plants polygon { fill: var(--d); stroke: var(--d); }

/* balanço suave: a planta inteira gira em torno do pé, e cada folha em torno
   da própria base (origem local 0 0), cada uma no seu ritmo */
.lp-sway, .lp-leaf { transform-origin: 0 0; animation: lpSway 6s ease-in-out infinite alternate; }
@keyframes lpSway { from { transform: rotate(calc(var(--a, 2deg) * -1)); } to { transform: rotate(var(--a, 2deg)); } }

/* margens do rio */
.lp-bank { stroke: #120e36; stroke-width: 1.4; stroke-linejoin: round; opacity: .5; transition: stroke 1.8s ease; }
[data-theme="light"] .lp-bank { stroke: #3f6646; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .lp-glints { display: none; }
  .lp-sway, .lp-leaf { animation: none; }
}