/* ==========================================================================
   PRIMO — app.css
   Geometria de jogo (Duolingo) sobre a pele quente do Haja Luz.
   Nenhuma cor literal: tudo vem de tokens.css.
   ========================================================================== */

/* 1 ─────────────────────────────────────────────────────────── reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="radio"], [role="switch"], a, input):focus-visible {
  outline: 3px solid var(--acao-degrau);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 2 ────────────────────────────────────────────────────────── fundo */
.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 58% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #fdfefe 0%, var(--papel) 42%, #e7ecf4 100%);
  pointer-events: none;
}

.mancha {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.mancha--a {
  top: -150px;
  left: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--acao) 0%, rgba(255, 200, 0, 0) 72%);
  opacity: 0.3;
  animation: aurora-a 26s ease-in-out infinite;
}

.mancha--b {
  right: -120px;
  bottom: 2%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--laranja) 0%, rgba(255, 138, 0, 0) 72%);
  opacity: 0.14;
  animation: aurora-b 32s ease-in-out infinite;
}

.mancha--c {
  top: 36%;
  left: 54%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, var(--acao-clara) 0%, rgba(255, 221, 85, 0) 72%);
  opacity: 0.22;
  animation: aurora-c 29s ease-in-out infinite;
}

.grao {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(120, 120, 120, 0.45) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.055;
}

/* 3 ─────────────────────────────────────────────────────────── casca */
.app {
  --gutter: var(--e5);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--largura);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--altura-nav) + var(--gutter));
}

.app[data-rota="licao"],
.app[data-rota="onboarding"],
.app[data-rota="fim"] {
  padding-bottom: var(--gutter);
}

.tela {
  padding-bottom: var(--e6);
}

.camada {
  position: fixed;
  inset: 0;
  z-index: 70;
}

/* 4 ────────────────────────────────────────────────────── tipografia */
.titulo {
  font-family: var(--fonte-serif);
  font-size: var(--t-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.titulo--serie {
  font-size: clamp(28px, 7.6vw, 37px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.04;
}

.secao {
  font-size: var(--t-secao);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--tinta);
}

.legenda {
  font-size: var(--t-legenda);
  font-weight: 700;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.corpo {
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.58;
  color: var(--tinta-corpo);
}

.numero {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* 5 ───────────────────────────────────────────────────────── botões */
.bt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 54px;
  padding: 0 var(--e5);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--acao);
  color: var(--acao-tinta);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 var(--degrau) 0 var(--acao-degrau);
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--m-toque),
    box-shadow var(--m-toque),
    background var(--m-toque),
    border-color var(--m-toque);
}

.bt:hover {
  background: var(--acao-clara);
}

.bt:active {
  transform: translateY(var(--degrau));
  box-shadow: 0 0 0 var(--acao-degrau);
}

.bt[disabled],
.bt[aria-disabled="true"] {
  background: var(--superficie-baixa);
  color: var(--tinta-fraca);
  border-color: var(--borda);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.bt--vidro {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--borda);
  box-shadow: 0 var(--degrau) 0 var(--borda-forte);
}

.bt--vidro:hover {
  background: var(--superficie-alta);
  border-color: var(--borda-forte);
}

.bt--vidro:active {
  box-shadow: 0 0 0 var(--borda-forte);
}

.bt--certo {
  background: var(--verde);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 var(--degrau) 0 var(--verde-degrau);
}

.bt--certo:hover {
  background: var(--verde);
  filter: brightness(1.06);
}

.bt--certo:active {
  box-shadow: 0 0 0 var(--verde-degrau);
}

.bt--erro {
  background: var(--vermelho);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 var(--degrau) 0 var(--vermelho-degrau);
}

.bt--erro:hover {
  background: var(--vermelho);
  filter: brightness(1.06);
}

.bt--erro:active {
  box-shadow: 0 0 0 var(--vermelho-degrau);
}

.bt--vilao {
  background: var(--tinta);
  color: var(--tinta-inversa);
  border-color: transparent;
  box-shadow: 0 var(--degrau) 0 #000;
}

.bt--pequeno {
  min-height: 42px;
  padding: 0 var(--e4);
  border-radius: var(--r-sm);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.bt--fantasma {
  min-height: 46px;
  padding: 0 var(--e3);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--tinta-suave);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.bt--fantasma:hover {
  background: rgba(90, 66, 26, 0.07);
}

.bt--fantasma:active {
  transform: translateY(1px);
  box-shadow: none;
}

.bt--bloco {
  display: flex;
  width: 100%;
}

.icone-bt {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 3px 0 var(--borda-forte);
  cursor: pointer;
  transition:
    transform var(--m-toque),
    box-shadow var(--m-toque),
    background var(--m-toque);
}

.icone-bt svg {
  width: 20px;
  height: 20px;
}

.icone-bt:hover {
  background: var(--superficie-alta);
}

.icone-bt:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--borda-forte);
}

/* 6 ────────────────────────────────────────────────────────── cartão */
.vidro {
  padding: var(--e5);
  border: 2px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
}

.vidro--varre {
  position: relative;
  overflow: hidden;
}

.vidro--varre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.55) 50%, transparent 66%);
  transform: translateX(-130%);
  animation: varre 5s var(--m-viva) 1.2s 2;
  pointer-events: none;
}

/* 7 ─────────────────────────────────────────────────────────── topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 10px 0 var(--e3);
  background: linear-gradient(180deg, var(--papel) 74%, transparent);
}

.topo__marca {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.topo__nome {
  font-family: var(--fonte-display);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

/* O brilho atravessa a marca de vez em quando (v7). */
@supports (-webkit-background-clip: text) {
  .topo__nome {
    background-image: linear-gradient(
      100deg,
      var(--tinta) 0%,
      var(--tinta) 38%,
      var(--acao-escura) 50%,
      var(--tinta) 62%,
      var(--tinta) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: texto-brilho 7s ease-in-out 500ms infinite;
  }
}

.topo__tag {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* HUD do caminho: contadores soltos, sem pílula — desenho do Duolingo. */
.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 12px 2px 14px;
  background: linear-gradient(180deg, var(--papel) 78%, transparent);
}

.hud__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  cursor: default;
}

.hud__item svg {
  width: 21px;
  height: 21px;
}

.hud__item--nivel svg {
  color: var(--acao);
}

.hud__item--chama svg {
  color: var(--laranja);
}

.hud__item--talento svg {
  color: var(--acao-escura);
}

.hud__item--vida {
  cursor: pointer;
}

.hud__item--vida svg {
  color: var(--vermelho);
}

.contador {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 11px;
  border: 2px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--superficie);
  box-shadow: 0 2px 0 var(--borda);
  font-size: 14.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  cursor: default;
}

.contador svg {
  width: 17px;
  height: 17px;
}

.contador--chama {
  color: var(--laranja);
}

.contador--vida {
  color: var(--vermelho);
  cursor: pointer;
}

.contador--talento {
  color: var(--acao-escura);
}

.contador .numero {
  color: var(--tinta);
}

/* 8 ────────────────────────────────────────────────────── navegação */
.nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  padding-inline: max(0px, calc((100vw - var(--largura)) / 2));
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  box-shadow: 0 -12px 28px -22px rgba(16, 21, 27, 0.35);
}

.nav__item {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 124px;
  height: var(--altura-nav);
  color: var(--tinta-fraca);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--m-toque);
}

.nav__item > svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  transition: transform var(--m-toque);
}

.nav__item > span {
  position: relative;
  z-index: 1;
}

.nav__item:hover {
  color: var(--tinta-suave);
}

.nav__item--ativo {
  color: var(--acao-escura);
}

.nav__item--ativo > svg {
  transform: translateY(-1px) scale(1.06);
}

.nav__item--ativo::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 52px;
  height: 34px;
  border: 2px solid var(--acao);
  border-radius: 12px;
  background: var(--acao-fundo);
  box-shadow: 0 8px 18px -12px rgba(255, 200, 0, 0.95);
  z-index: 0;
}

/* 9 ─────────────────────────────────────────────────────── caminho */
.mascote {
  flex: 0 0 auto;
  width: var(--mascote-tam, 96px);
  height: var(--mascote-tam, 96px);
}

.mascote img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
}

.mascote--pisca img {
  transform-origin: 50% 92%;
  animation: pisca 6s ease-in-out infinite;
}

.mundo {
  position: relative;
  margin: 0 0 var(--e7);
}

/* Cabeçalho da unidade: superfície com trilho de ouro à esquerda. */
.unidade {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie-alta);
  box-shadow: var(--sombra-2);
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    box-shadow var(--m-firme),
    transform var(--m-firme);
}

/* Holofote que segue o ponteiro (só em ponteiro fino). */
.unidade::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    var(--holofote),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--m-firme);
  pointer-events: none;
}

.unidade:hover::after,
.unidade:focus-visible::after {
  opacity: 1;
}

.unidade::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  background: var(--acao);
}

.unidade:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-flutua);
}

.unidade:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent;
}

.unidade__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 13px var(--e4) 15px;
}

.unidade__olho {
  font-size: var(--t-etiqueta);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acao-escura);
}

.unidade__nome {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.unidade__guia {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  border-left: 2px solid var(--borda);
}

.unidade__guia svg {
  width: 23px;
  height: 23px;
}

.mundo--breve .unidade {
  border: 2px solid var(--borda);
  background: var(--superficie);
  box-shadow: none;
  color: var(--tinta-suave);
}

.mundo--breve .unidade::before {
  background: var(--borda-forte);
}

.mundo--breve .unidade__guia {
  border-left-color: var(--borda);
}

.trilha {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: var(--e6) 0 var(--e5);
}

/* O mascote senta ao lado do caminho, com sombra no chão. */
.trilha__mascote {
  position: relative;
  align-self: flex-end;
  margin: -4px 2px -12px 0;
  pointer-events: none;
}

.trilha__mascote::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 86px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.trilha__mascote .mascote {
  --mascote-tam: 104px;
  position: relative;
  animation: flutua 5s ease-in-out infinite;
}

.no {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateX(var(--deslocamento, 0));
}

/* O casulo é o berço do nó atual: um anel fundo sob o disco. */
.no__casulo {
  position: absolute;
  inset: -10px;
  border-radius: 30%;
  background: var(--trilho);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.18);
}

.no__disco {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 30%;
  background: linear-gradient(180deg, var(--acao-clara), var(--acao));
  box-shadow:
    0 4px 0 var(--acao-degrau),
    var(--brilho-ouro),
    inset 0 2px 0 rgba(255, 255, 255, 0.65);
  color: var(--acao-tinta);
  transition:
    box-shadow var(--m-toque),
    transform var(--m-toque),
    filter var(--m-toque);
}

.no__disco svg {
  width: 32px;
  height: 32px;
}

.no:hover .no__disco {
  filter: brightness(1.05);
}

.no:active .no__disco {
  transform: translateY(6px);
  box-shadow:
    0 0 0 var(--acao-degrau),
    inset 0 3px 0 rgba(255, 255, 255, 0.5);
}

/* O respiro em cima abre espaço para o balão "Começar". */
.no--atual {
  margin-top: 34px;
}

/* O nó atual ganha um aro de ouro girando (v7). */
.no--atual .no__casulo {
  overflow: hidden;
  padding: 3px;
  background: transparent;
  box-shadow: none;
  /* o miolo do casulo é vazado: só o aro aparece */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.no--atual .no__casulo::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(
    from 0deg,
    rgba(217, 164, 0, 0.28) 0deg,
    rgba(217, 164, 0, 0.28) 20deg,
    var(--acao) 100deg,
    var(--acao-clara) 170deg,
    rgba(217, 164, 0, 0.28) 270deg,
    rgba(217, 164, 0, 0.28) 360deg
  );
  animation: girar-aro 4.5s linear infinite;
}

.no--atual .no__disco {
  width: 88px;
  height: 88px;
  background: linear-gradient(180deg, var(--acao-clara), var(--acao));
  box-shadow:
    0 6px 0 var(--acao-degrau),
    0 14px 30px -12px rgba(255, 200, 0, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.no--atual .no__disco svg {
  width: 40px;
  height: 40px;
}

.no--feito .no__disco {
  background: linear-gradient(180deg, #35e0a1, var(--verde));
  box-shadow:
    0 4px 0 var(--verde-degrau),
    0 12px 26px -14px rgba(22, 199, 132, 0.9),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

.no--bloqueado {
  cursor: not-allowed;
}

.no--bloqueado .no__disco {
  background: var(--borda);
  box-shadow: 0 var(--degrau-no) 0 var(--borda-forte);
  color: var(--tinta-suave);
}

.no--bloqueado .no__disco svg {
  opacity: 0.6;
}

/* Balão "Começar" sobre o nó atual, com bico e pulinho. */
.no__balao {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  padding: 7px 14px 8px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #1b232c, var(--balao-fundo));
  box-shadow: 0 12px 26px -14px rgba(16, 21, 27, 0.6);
  color: var(--balao-tinta);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: pulinho 1.9s ease-in-out infinite;
}

.no__balao::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 7px solid transparent;
  border-top-color: var(--balao-fundo);
  border-bottom-width: 0;
  transform: translateX(-50%);
}

.balao {
  position: fixed;
  z-index: 80;
  width: min(292px, 86vw);
  padding: var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie-alta);
  box-shadow: var(--sombra-grande);
  animation: entra var(--m-viva) both;
}

.balao__xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--acao-escura);
  font-weight: 900;
}

/* 10 ───────────────────────────────────────────────────────── player */
.player {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.player__topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 10px 0 var(--e3);
  background: var(--papel);
}

.player__topo .contador {
  flex: 0 0 auto;
}

.barra {
  position: relative;
  flex: 1;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--trilho);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
}

.barra__enche {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--v, 0) * 100%);
  border-radius: var(--r-pill);
  background: var(--acao);
  box-shadow: inset 0 -3px 0 var(--acao-degrau);
  transition: width var(--m-viva);
}

.barra__brilho {
  position: absolute;
  top: 3px;
  left: 5px;
  width: calc(var(--v, 0) * 100% - 10px);
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.5);
  transition: width var(--m-viva);
  pointer-events: none;
}

.barra--dourada .barra__enche {
  background: linear-gradient(180deg, var(--amarelo-claro), var(--dourado));
}

.combo {
  position: absolute;
  top: -22px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--verde);
  box-shadow: 0 2px 0 var(--verde-degrau);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: translateX(-50%) rotate(-3deg);
  animation: pop var(--m-viva) both;
  white-space: nowrap;
}

.player__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: var(--e4);
  padding: var(--e4) 0 var(--e5);
}

.enunciado {
  font-size: var(--t-enunciado);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.etiqueta-novo {
  align-self: flex-start;
  padding: 3px 10px;
  border: 2px solid var(--acao);
  border-radius: var(--r-pill);
  background: var(--acao-fundo);
  color: var(--acao-escura);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.etiqueta-novo--corrigir {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho-tinta);
}

.novo {
  padding: var(--e5);
  border: 2px solid var(--borda-forte);
  border-radius: var(--r-lg);
  background: var(--superficie-alta);
  box-shadow: 0 5px 0 var(--borda);
}

.novo__titulo {
  font-family: var(--fonte);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.novo__texto {
  margin-top: var(--e2);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.6;
  color: var(--tinta-corpo);
}

.novo__dica {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e3);
  border: 2px dashed var(--borda-forte);
  border-radius: var(--r-md);
  background: var(--superficie-baixa);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.novo__dica .mascote {
  --mascote-tam: 42px;
}

.opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opcoes--grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.opcao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: 58px;
  padding: 12px var(--e4);
  border: 2px solid var(--borda-forte);
  border-radius: var(--r-md);
  background: var(--superficie-alta);
  box-shadow: 0 4px 0 var(--borda-forte);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-opcao);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--m-toque),
    box-shadow var(--m-toque),
    border-color var(--m-toque),
    background var(--m-toque);
}

.opcao:hover {
  border-color: var(--borda-forte);
  background: var(--superficie-alta);
}

.opcao:active {
  transform: translateY(3px);
  box-shadow: none;
}

.opcao--escolhida {
  border-color: var(--acao);
  background: var(--acao-fundo);
  box-shadow: 0 3px 0 var(--acao-degrau);
  color: var(--acao-escura);
}

.opcao--certa {
  border-color: var(--verde);
  background: var(--verde-fundo);
  box-shadow: 0 3px 0 var(--verde-degrau);
  color: var(--verde-tinta);
}

.opcao--errada {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
  box-shadow: 0 3px 0 var(--vermelho-degrau);
  color: var(--vermelho-tinta);
}

.opcao--apagada {
  opacity: 0.4;
}

.opcao--travada {
  cursor: default;
  pointer-events: none;
}

.opcao__tecla {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--borda-forte);
  border-radius: 6px;
  color: var(--tinta-fraca);
  font-size: 11px;
  font-weight: 900;
}

.opcao--escolhida .opcao__tecla {
  border-color: var(--acao-degrau);
  color: var(--acao-escura);
}

.opcao--certa .opcao__tecla {
  border-color: var(--verde-degrau);
  color: var(--verde-tinta);
}

/* No toque não há teclado: o número só polui. */
@media (pointer: coarse) {
  .opcao__tecla {
    display: none;
  }
}

.opcao__marca {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
}

.opcao__marca svg {
  width: 14px;
  height: 14px;
}

.vf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.complete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--tinta);
}

.lacuna {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 38px;
  padding: 0 var(--e3);
  border: 2px dashed var(--acao-degrau);
  border-radius: var(--r-sm);
  background: var(--acao-fundo);
  color: var(--acao-tinta);
  font-weight: 900;
}

.lacuna--cheia {
  border-style: solid;
}

.lacuna--certa {
  border-color: var(--verde-degrau);
  background: var(--verde-fundo);
  color: var(--verde-tinta);
}

.lacuna--errada {
  border-color: var(--vermelho-degrau);
  background: var(--vermelho-fundo);
  color: var(--vermelho-tinta);
}

.linha-fichas {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--e2);
  min-height: 76px;
  padding: var(--e3);
  border: 2px dashed var(--borda-forte);
  border-radius: var(--r-lg);
  background: var(--superficie-baixa);
}

.banco-fichas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e3) 0;
}

.ficha {
  padding: 9px var(--e3);
  border: 2px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--superficie);
  box-shadow: 0 3px 0 var(--borda);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform var(--m-toque),
    box-shadow var(--m-toque),
    background var(--m-toque);
}

.ficha:active {
  transform: translateY(3px);
  box-shadow: none;
}

.ficha--na-linha {
  border-color: var(--acao);
  background: var(--acao-fundo);
  box-shadow: 0 3px 0 var(--acao-degrau);
  color: var(--acao-tinta);
}

.ficha--fantasma {
  visibility: hidden;
}

.ficha--certa {
  border-color: var(--verde-degrau);
  background: var(--verde-fundo);
  box-shadow: 0 3px 0 var(--verde-degrau);
  color: var(--verde-tinta);
}

.ficha--errada {
  border-color: var(--vermelho-degrau);
  background: var(--vermelho-fundo);
  box-shadow: 0 3px 0 var(--vermelho-degrau);
  color: var(--vermelho-tinta);
}

.pares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pares__coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.par {
  min-height: 54px;
  padding: 10px var(--e3);
  border: 2px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: 0 3px 0 var(--borda);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition:
    transform var(--m-toque),
    box-shadow var(--m-toque),
    background var(--m-toque);
}

.par:active {
  transform: translateY(3px);
  box-shadow: none;
}

.par--escolhido {
  border-color: var(--acao);
  background: var(--acao-fundo);
  box-shadow: 0 3px 0 var(--acao-degrau);
  color: var(--acao-tinta);
}

.par--casado {
  border-color: var(--verde);
  background: var(--verde-fundo);
  box-shadow: none;
  color: var(--verde-tinta);
  opacity: 0.7;
}

.par--errado {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho-tinta);
  animation: tremer 320ms ease-in-out;
}

.campo {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--e4);
  border: 2px solid var(--borda-forte);
  border-radius: var(--r-md);
  background: var(--superficie-alta);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 17px;
  font-weight: 800;
  outline: none;
  transition:
    border-color var(--m-toque),
    box-shadow var(--m-toque);
}

.campo::placeholder {
  color: var(--tinta-fraca);
  font-weight: 700;
}

.campo:focus {
  border-color: var(--acao);
  box-shadow: 0 0 0 4px var(--acao-fundo);
}

.campo--certa {
  border-color: var(--verde);
  background: var(--verde-fundo);
}

.campo--errada {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
}

.faixa {
  position: sticky;
  bottom: 0;
  z-index: 25;
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--e3) var(--gutter) calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 2px solid var(--borda);
  background: var(--superficie);
  animation: sobe var(--m-viva) both;
}

.faixa--certo {
  border-color: var(--verde);
  background: var(--verde-fundo);
}

.faixa--erro {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
}

.faixa__interior {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.faixa__icone {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  color: var(--verde);
}

.faixa__icone svg {
  width: 20px;
  height: 20px;
}

.faixa--erro .faixa__icone {
  color: var(--vermelho);
}

.faixa__texto {
  flex: 1;
  min-width: 0;
}

.faixa__titulo {
  color: var(--verde-tinta);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.faixa--erro .faixa__titulo {
  color: var(--vermelho-tinta);
}

.faixa__resposta {
  margin-top: 2px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 800;
}

.faixa__porque {
  margin-top: 2px;
  color: var(--tinta-corpo);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.faixa .bt {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 var(--e4);
}

.player__pe {
  position: sticky;
  bottom: 0;
  z-index: 25;
  padding: var(--e3) 0 calc(var(--e3) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, var(--papel) 42%);
}

.player__pe .bt {
  width: 100%;
}

/* CTA principal: ouro PRIMO com tinta escura — a assinatura da marca. */
.player__pe .bt,
.fim > .bt {
  background: linear-gradient(180deg, var(--acao-clara), var(--acao));
  color: var(--acao-tinta);
  border-color: transparent;
  box-shadow: 0 var(--degrau) 0 var(--acao-degrau), var(--brilho-ouro);
}

.player__pe .bt:hover,
.fim > .bt:hover {
  background: var(--acao-clara);
  filter: none;
}

.player__pe .bt:active,
.fim > .bt:active {
  box-shadow: 0 0 0 var(--acao-degrau);
}

.player__pe .bt[disabled],
.player__pe .bt[aria-disabled="true"] {
  background: var(--superficie-baixa);
  color: var(--tinta-fraca);
  border-color: var(--borda);
  box-shadow: none;
  filter: none;
}

.particula {
  position: fixed;
  z-index: 90;
  color: var(--acao-escura);
  font-size: 18px;
  font-weight: 900;
  pointer-events: none;
  animation: sobe-some 900ms var(--m-viva) forwards;
}

/* 11 ──────────────────────────────────────────────── fim de lição */
.fim {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100dvh - var(--gutter));
  gap: var(--e3);
  padding: var(--e6) 0 var(--e5);
  text-align: center;
}

/* O botão fecha a tela: o respiro fica entre o conteúdo e ele, nunca embaixo. */
.fim > .bt {
  margin-top: auto;
}

.raios {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--e4) 0;
}

.raios::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 204, 2, 0.22), transparent 66%);
  animation: respiro 5s ease-in-out infinite;
}

.fim__mascote {
  position: relative;
  animation: pop var(--m-festa) both;
}

.fim__titulo {
  font-family: var(--fonte-serif);
  font-size: clamp(27px, 7.2vw, 34px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--tinta);
}

.metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: var(--e2);
}

.metrica {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--e3) var(--e2);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: 0 2px 0 var(--borda);
}

.metrica__valor {
  font-family: var(--fonte-serif);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--tinta);
}

.metrica__rotulo {
  color: var(--tinta-fraca);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.semana {
  display: flex;
  justify-content: center;
  gap: var(--e2);
  margin-top: var(--e3);
}

.semana__dia {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--borda);
  border-radius: 50%;
  background: var(--superficie-baixa);
  color: var(--tinta-fraca);
  font-size: 11px;
  font-weight: 900;
}

.semana__dia--feito {
  border-color: var(--verde-degrau);
  background: var(--verde);
  color: #fff;
}

.semana__dia svg {
  width: 14px;
  height: 14px;
}

.semana__dia--hoje {
  border-color: var(--acao-degrau);
  background: var(--acao);
  color: var(--acao-tinta);
}

.confete {
  position: fixed;
  z-index: 85;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  animation: cair 1500ms ease-in forwards;
}

/* 12 ───────────────────────────────────────────────── telas gerais */
.cabeca-tela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0 var(--e5);
}

.cabeca-tela__texto {
  min-width: 0;
}

.grade-metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cartao-met {
  padding: var(--e3) var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: 0 2px 0 var(--borda);
}

.cartao-met__valor {
  margin-top: var(--e2);
  font-family: var(--fonte-serif);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--tinta);
}

.cartao-met svg {
  width: 15px;
  height: 15px;
  margin-right: 2px;
  vertical-align: -3px;
  color: var(--acao-escura);
  opacity: 0.85;
}

.cartao-met__rotulo {
  margin-top: 5px;
  color: var(--tinta-fraca);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cartao-met__nota {
  margin-top: 2px;
  color: var(--tinta-suave);
  font-size: 12px;
  font-weight: 700;
}

.bloco {
  margin-bottom: var(--e5);
  padding: var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
}

.bloco__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e2);
}

.mapa-calor {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mapa-calor span {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--superficie-baixa);
}

.medalhas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.medalha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--e3) var(--e2);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie-alta);
  text-align: center;
}

.medalha__selo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--acao-fundo);
  color: var(--acao-escura);
}

.medalha__selo svg {
  width: 22px;
  height: 22px;
}

.medalha__nome {
  color: var(--tinta-suave);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}

.medalha--bloqueada {
  opacity: 0.45;
  box-shadow: none;
}

.medalha--bloqueada .medalha__selo {
  background: var(--superficie-baixa);
  color: var(--tinta-fraca);
}

.linha-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borda);
}

.linha-item:last-child {
  border-bottom: 0;
}

.linha-item__texto {
  min-width: 0;
}

.linha-item__titulo {
  color: var(--tinta);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.linha-item__sub {
  margin-top: 2px;
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.trilho {
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--trilho);
}

.trilho__enche {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acao-clara), var(--acao));
  transition: width var(--m-viva);
}

.loja-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: 0 2px 0 var(--borda);
}

.loja-item__icone {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--acao-fundo);
  color: var(--acao-escura);
}

.loja-item__icone svg {
  width: 22px;
  height: 22px;
}

.loja-item__texto {
  flex: 1;
  min-width: 0;
}

.selo-ativo {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 2px solid var(--verde-degrau);
  border-radius: var(--r-pill);
  background: var(--verde-fundo);
  color: var(--verde-tinta);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loja-item__titulo {
  color: var(--tinta);
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.25;
}

.loja-item__sub {
  margin-top: 2px;
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 700;
}

.interruptor {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--borda-forte);
  border-radius: var(--r-pill);
  background: var(--trilho);
  cursor: pointer;
  transition:
    background var(--m-firme),
    border-color var(--m-firme);
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--superficie-alta);
  box-shadow: 0 1px 3px rgba(60, 40, 10, 0.28);
  transition: transform var(--m-firme);
}

.interruptor[aria-checked="true"] {
  border-color: var(--acao-degrau);
  background: var(--acao);
}

.interruptor[aria-checked="true"]::after {
  transform: translateX(22px);
}

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e7) var(--e4);
  text-align: center;
}

.vazio__selo {
  display: inline-block;
  padding: 6px 14px;
  border: 2px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--superficie-baixa);
  color: var(--tinta-fraca);
  font-size: var(--t-etiqueta);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vazio__texto {
  max-width: 30ch;
  color: var(--tinta-suave);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.previa {
  width: 100%;
  max-width: 400px;
  padding: var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: 0 2px 0 var(--borda);
  text-align: left;
}

.previa__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
}

.previa__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.previa__numero {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--acao-fundo);
  color: var(--acao-escura);
  font-size: 11.5px;
  font-weight: 900;
}

/* 13 ──────────────────────────────────────────────────── onboarding */
.onb {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e4);
  min-height: calc(100dvh - 2 * var(--gutter, var(--e5)));
  padding: var(--e4) 0 var(--e6);
}

.onb__topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.onb__passo {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--borda-forte);
}

.onb__passo i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--acao-clara), var(--acao));
  transition: width var(--m-viva);
}

.onb__passo--cheio i {
  width: 100%;
}

.onb__mascote {
  align-self: center;
  margin: var(--e2) 0;
  animation: flutua 4.5s ease-in-out infinite;
}

.onb__pergunta {
  font-family: var(--fonte-serif);
  font-size: clamp(27px, 7.2vw, 34px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--tinta);
}

.onb__opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onb__opcao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 60px;
  padding: 12px var(--e4);
  border: 2px solid var(--borda-forte);
  border-radius: var(--r-md);
  background: var(--superficie-alta);
  box-shadow: 0 4px 0 var(--borda-forte);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-opcao);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--m-toque),
    box-shadow var(--m-toque),
    border-color var(--m-toque),
    background var(--m-toque);
}

.onb__opcao:active {
  transform: translateY(3px);
  box-shadow: none;
}

.onb__opcao--escolhida {
  border-color: var(--acao);
  background: var(--acao-fundo);
  box-shadow: 0 3px 0 var(--acao-degrau);
  color: var(--acao-tinta);
}

.onb__emoji {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--superficie-alta);
  box-shadow: inset 0 0 0 2px var(--borda);
  font-size: 20px;
  line-height: 1;
}

.onb__opcao--escolhida .onb__emoji {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--acao);
}

.onb .bt--bloco {
  margin-top: auto;
}

/* 14 ───────────────────────────────────────────────────── animações */
@keyframes aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(30px, 18px, 0) scale(1.08); }
}

@keyframes aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-26px, -22px, 0) scale(1.06); }
}

@keyframes aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-20px, 26px, 0) scale(1.1); }
}

@keyframes girar-aro {
  to { transform: rotate(360deg); }
}

@keyframes texto-brilho {
  0% { background-position: 200% 0; }
  52% { background-position: -70% 0; }
  100% { background-position: -70% 0; }
}

@keyframes flutua {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}

@keyframes pisca {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.9);
  }
}

@keyframes pulinho {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

@keyframes pop {
  0% {
    transform: scale(0.72);
    opacity: 0;
  }
  60% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes entra {
  0% {
    transform: translateY(8px) scale(0.97);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes sobe {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes respiro {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes varre {
  0% {
    transform: translateX(-130%);
  }
  60%,
  100% {
    transform: translateX(130%);
  }
}

@keyframes tremer {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes sobe-some {
  0% {
    transform: translateY(0) scale(0.9);
    opacity: 0;
  }
  25% {
    transform: translateY(-14px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-64px) scale(1);
    opacity: 0;
  }
}

@keyframes cair {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(540deg);
    opacity: 0.9;
  }
}

.entra > * {
  animation: entra var(--m-entrada) both;
}

.entra > *:nth-child(2) {
  animation-delay: 60ms;
}

.entra > *:nth-child(3) {
  animation-delay: 120ms;
}

.entra > *:nth-child(4) {
  animation-delay: 180ms;
}

.entra > *:nth-child(5) {
  animation-delay: 240ms;
}

/* 15 ─────────────────────────────────────────────────────── folha */
.folha {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--e4);
  background: rgba(41, 37, 36, 0.42);
  animation: entra 200ms ease-out both;
}

.folha__caixa {
  width: 100%;
  max-width: 430px;
  padding: var(--e5);
  border: 2px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--superficie-alta);
  box-shadow: var(--sombra-grande);
  animation: sobe var(--m-viva) both;
}

.folha__botoes {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e4);
}

.folha .mascote {
  margin: 0 auto var(--e3);
}

/* 16 ─────────────────────────────────────────────────── responsivo */
@media (min-width: 560px) {
  :root {
    --t-titulo: 34px;
    --t-enunciado: 25px;
    --t-opcao: 18px;
  }

  .app {
    --gutter: var(--e6);
  }

  .folha {
    align-items: center;
  }

  .no__disco {
    width: 80px;
    height: 80px;
  }

  .no__disco svg {
    width: 36px;
    height: 36px;
  }

  .no--atual .no__disco {
    width: 96px;
    height: 96px;
  }

  .trilha {
    gap: 36px;
  }

  .metricas {
    max-width: 460px;
  }
}

@media (max-width: 359px) {
  .opcoes--grade,
  .vf,
  .pares,
  .medalhas {
    grid-template-columns: 1fr;
  }

  .no__disco {
    width: 64px;
    height: 64px;
  }

  .no--atual .no__disco {
    width: 76px;
    height: 76px;
  }

  .trilha__mascote {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .onb,
  .player {
    min-height: 0;
  }
}

/* 17 ───────────────────────────────────────────── movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root[data-movimento="reduzido"] *,
:root[data-movimento="reduzido"] *::before,
:root[data-movimento="reduzido"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* 20 ──────────────────────────────────────────── heroi do caminho (v7) */
.heroi {
  padding: 2px 2px var(--e6);
}

.heroi__olho {
  font-size: var(--t-etiqueta);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.heroi__titulo {
  margin-top: 5px;
  font-family: var(--fonte-display);
  font-size: clamp(27px, 7.6vw, 35px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--tinta);
}

/* O nome próprio entra em itálico de ouro: a assinatura editorial da tela. */
.heroi__titulo em {
  font-style: italic;
  color: var(--acao-escura);
}

.heroi__sub {
  margin-top: 7px;
  font-size: var(--t-legenda);
  font-weight: 700;
  color: var(--tinta-suave);
}

/* 18 ─────────────────────────────────────────── tema dourado (loja) */
:root[data-tema="dourado"] .no--atual .no__disco {
  box-shadow:
    0 6px 0 var(--acao-degrau),
    0 0 0 6px rgba(245, 184, 0, 0.28),
    inset 0 3px 0 rgba(255, 255, 255, 0.55);
}