/* =========================================================
   Camada 3: layout do app e telas
   ========================================================= */

* { box-sizing: border-box; }

/* O atributo `hidden` precisa vencer o `display` dos componentes; sem isto,
   esconder a barra superior a deixava ocupando espaço mesmo assim. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { transition: background var(--t-slow) linear; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.15; }
p { margin: 0; line-height: 1.55; }
button { font: inherit; }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Shell ---------- */
.app {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  min-height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) 0;
}
/* Com a barra do topo, é ela que desconta a área segura. */
.app:has(> .topbar) { padding-top: 0; }

/* Na tela do pet a página não rola: o palco é fixo e ocupa a mesma viewport
   dinâmica usada pelas demais telas. Usar `svh` apenas aqui encurtava o app
   quando a barra do navegador estava recolhida e fazia a navegação inferior
   parecer mais alta ao alternar entre páginas. */
body.is-stage { overflow: hidden; height: var(--app-height, 100dvh); }
body.is-stage .app { height: var(--app-height, 100dvh); min-height: var(--app-height, 100dvh); padding: 0; }

/*
 * `min-height: 0` é o que permite ao palco encolher.
 *
 * Um item de flex nasce com `min-height: auto`, ou seja, se recusa a ficar
 * menor que o próprio conteúdo: em telas baixas o palco crescia além da
 * viewport (716px numa tela de 640px) e a página voltava a rolar, empurrando o
 * dock de ações por cima da navegação.
 */
body.is-stage .app > .grow { min-height: 0; }

/*
 * Espaço ocupado pela navegação flutuante (altura + distância do rodapé).
 * O valor aqui é só um piso de segurança: o `main.js` mede a barra de verdade
 * e reescreve esta variável. Chutar essa altura em número fixo foi o que fez o
 * dock de ações encostar na navegação — a barra cresce com a fonte do sistema
 * e com a área segura do aparelho.
 */
:root { --nav-space: 96px; --stage-hud: 54px; --rail-w: 62px; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-bottom: calc(var(--nav-space) + 8px);
  animation: screen-in var(--t-med) var(--ease-liquid) both;
}
.screen--game {
  min-height: 0;
  gap: var(--s-2);
  padding-bottom: calc(var(--nav-space) + var(--s-2));
}

/* Durante uma partida, a tela vira uma coluna limitada pelo viewport. O palco
   recebe todo o espaço que sobrar entre o topo medido e a navegação medida. */
body.is-minigame { overflow: hidden; }
body.is-minigame .app { height: var(--app-height, 100dvh); min-height: 0; }
body.is-minigame .app > .grow { display: flex; min-height: 0; }
body.is-minigame .topbar { flex: 0 0 auto; margin-bottom: var(--s-2); }
body.is-minigame .screen--game { min-width: 0; }
body.is-minigame .screen--game .game-stage { flex: 1 1 auto; min-height: 0; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.muted { color: var(--text-secondary); font-size: 0.92rem; }
.tiny { font-size: 0.78rem; color: var(--text-muted); }
.pad { padding: var(--s-4); }
.pad-lg { padding: var(--s-5); }

/* ---------- Topo: moedas e streak ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  /* Folgas curtas: 4px acima (depois da área segura) e 10px até o conteúdo. */
  margin: 0 calc(-1 * var(--s-2)) 6px;
  /* A barra é quem cuida da área segura (notch): fica logo abaixo dela, com
     uma folga curta. Somar esse recuo ao do `.app` empurrava tudo para baixo. */
  padding: calc(env(safe-area-inset-top) + var(--s-1)) var(--s-2) var(--s-1);
  /* Grudada no topo ao rolar: um véu do fundo evita texto passando por baixo. */
  background: linear-gradient(180deg, var(--bg-deep) 55%, transparent);
}
.topbar__wallet { display: flex; gap: var(--s-2); flex-shrink: 0; }
.topbar .wallet { white-space: nowrap; }
/* Com a carteira na mesma linha, o complemento do status só cabe em telas largas. */
@media (max-width: 439px) { .topbar:not(.topbar--bare) .sync-chip__extra { display: none; } }
.sync-chip__extra:empty { display: none; }
/* Telas de palco e a loja já mostram a carteira: a barra fica só com o status. */
.topbar--bare .topbar__wallet { display: none; }
/* Pet e casa: a barra fica fora do fluxo de rolagem, mas no mesmo lugar e com
   o mesmo espaçamento das demais telas (o recuo vertical vem de `.topbar`). */
body.is-stage .topbar {
  position: relative;
  flex-shrink: 0;
  margin: 0 0 6px;
  padding-inline: var(--s-4);
  background: none;
}

.wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
}
.wallet__icon { font-size: 1rem; }
.wallet--common { color: var(--coin-common); }
.wallet--premium { color: var(--coin-premium); }

.streak { padding: 7px 13px; font-size: 0.82rem; color: var(--text-secondary); }

/* ---------- Palco do pet ---------- */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s-5) var(--s-4);
  min-height: 268px;
  border-radius: var(--r-xl);
}

.stage__scene {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  pointer-events: none;
  transition: background var(--t-slow) linear;
}

.pet-holder {
  position: relative;
  width: min(220px, 58vw);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: breathe 4.2s ease-in-out infinite;
  transform-origin: 50% 88%;
}

.pet-holder:active { animation: none; transform: scale(0.95); }
.pet-holder.is-happy { animation: bounce-joy 0.7s var(--ease-liquid) 2; }
.pet-holder svg { width: 100%; height: auto; display: block; overflow: visible; }

@keyframes breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.035) translateY(-5px); }
}
@keyframes bounce-joy {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-22px) scale(1.06); }
  70% { transform: translateY(0) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .pet-holder, .pet-holder.is-happy { animation: none; }
}


.pet-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  font-size: 0.72rem;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--rare { background: var(--grad-premium); border-color: transparent; color: #fff; }
.badge--mood { text-transform: none; letter-spacing: 0; font-size: 0.8rem; }

/* Acessórios flutuam sobre o pet, ancorados por porcentagem. */
.accessory {
  position: absolute;
  font-size: 2rem;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}
.accessory--head { top: -6%; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.accessory--face { top: 32%; left: 50%; transform: translateX(-50%); font-size: 1.6rem; }
.accessory--body { bottom: 8%; left: 50%; transform: translateX(-50%); font-size: 1.5rem; }

/* ---------- Atributos ---------- */
.needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.need { display: flex; flex-direction: column; gap: 6px; }
.need__top { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; }
.need__label { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.need__value { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.need.is-critical .need__value { color: var(--state-danger); }
.need.is-critical .need__label { color: var(--state-danger); }

/* ---------- Ações ---------- */
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--s-2); }
.action {
  flex-direction: column;
  gap: 4px;
  padding: 12px 6px;
  min-height: 76px;
  border-radius: var(--r-md);
  font-size: 0.76rem;
}
.action__emoji { font-size: 1.5rem; line-height: 1; }
.action__cost { font-size: 0.68rem; color: var(--coin-common); }

/* ---------- Navegação inferior ---------- */
.nav {
  position: fixed;
  background: color-mix(in srgb, var(--bg-deep) 62%, var(--glass-surface-strong));
  left: 50%;
  transform: translateX(-50%);
  /* `--viewport-gap`: ver o bloco "iOS instalado" no fim do arquivo. */
  bottom: calc(var(--nav-gap, max(14px, env(safe-area-inset-bottom))) - var(--viewport-gap, 0px));
  z-index: 40;
  display: flex;
  gap: 4px;
  padding: 6px;
  width: min(480px, calc(100% - 28px));
}

.nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-family: var(--font-display);
  cursor: pointer;
  transition: color var(--t-fast) linear, background var(--t-med) var(--ease-liquid);
}
.nav__item span { font-size: 1.2rem; }
/* Seis destinos (com a Casa Mágica): o rótulo acompanha a largura da tela
   para nenhum item ser cortado em celulares estreitos. */
.nav__item { min-width: 0; padding-inline: 2px; }
.nav__item span:nth-child(2) { font-size: clamp(0.66rem, 2.9vw, 0.9rem); white-space: nowrap; }
.nav__item.is-active { color: var(--text-primary); background: var(--glass-surface-strong); }
.nav__item:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.nav { overflow: visible; }
.nav__item--pet {
  position: relative;
  align-self: flex-end;
  min-height: 64px;
  margin: -14px 2px 0;
  border-radius: 22px;
  color: var(--text-primary);
  /* Fundo opaco: a parte que sobe acima da barra não pode deixar ver o que
     está atrás (era isso que dava a impressão de botão cortado). */
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand-mint) 34%, var(--bg-deep)),
    color-mix(in srgb, var(--brand-violet) 22%, var(--bg-deep)));
  border: 1px solid color-mix(in srgb, var(--brand-mint) 55%, transparent);
  box-shadow: 0 -2px 0 color-mix(in srgb, var(--bg-deep) 60%, transparent), 0 10px 24px rgba(0,0,0,.3);
}
.nav__item--pet.is-active { border-color: var(--brand-mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-mint) 25%, transparent), 0 10px 24px rgba(0,0,0,.3); }
.nav__item--pet span:first-child { font-size: 1.55rem; }
.nav__item.has-notifications { color: var(--text-primary); }

/* Status e sino: um bloco só, à direita da barra do topo. */
.status-dock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}
.status-dock[hidden] { display: none; }
body.is-minigame .status-dock, body.is-party .status-dock, body.is-game-fullscreen .status-dock { display: none; }

.notification-button {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 70%, var(--glass-surface-strong));
  color: var(--text-primary);
  box-shadow: var(--shadow-glass);
  cursor: pointer;
}
.notification-button[hidden] { display: none; }
.notification-button.has-notifications { border-color: var(--brand-mint); animation: bell-pulse 2.4s ease-in-out infinite; }
.notification-button__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 1px 4px;
  border: 2px solid var(--bg-deep);
  border-radius: 99px;
  background: var(--state-danger);
  color: white;
  font: 700 .65rem var(--font-display);
}
.notification-button.is-sparkling {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--bg-deep) 70%, var(--glass-surface-strong)), color-mix(in srgb, var(--bg-deep) 70%, var(--glass-surface-strong))) padding-box,
    var(--grad-primary) border-box;
  animation: bell-glow 1.25s ease-in-out 4, bell-ring .9s ease-in-out 2;
}
.notification-button__glitter { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0; pointer-events: none; }
.notification-button__glitter i {
  position: absolute;
  left: 0; top: 0;
  width: var(--gs); height: var(--gs);
  margin: calc(var(--gs) / -2) 0 0 calc(var(--gs) / -2);
  background: var(--gc);
  box-shadow: 0 0 6px var(--gc);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: bell-glitter 1.6s ease-out var(--gd) 3;
}
@keyframes bell-glow {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--brand-mint) 45%, transparent); }
  50% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--brand-violet) 60%, transparent), 0 0 34px 8px color-mix(in srgb, var(--brand-mint) 30%, transparent); }
}
@keyframes bell-ring {
  0%, 100% { rotate: 0deg; }
  15% { rotate: 14deg; } 30% { rotate: -12deg; } 45% { rotate: 8deg; } 60% { rotate: -6deg; } 75% { rotate: 3deg; }
}
@keyframes bell-glitter {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(1) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .notification-button.is-sparkling { animation: none; box-shadow: 0 0 18px color-mix(in srgb, var(--brand-violet) 55%, transparent); }
}
@keyframes bell-pulse { 50% { transform: translateY(-2px); box-shadow: 0 0 20px color-mix(in srgb, var(--brand-mint) 50%, transparent); } }

.invite-alert {
  position: fixed;
  z-index: 90;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 24px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--brand-mint);
  box-shadow: 0 18px 52px rgba(0,0,0,.58), 0 0 24px color-mix(in srgb, var(--brand-mint) 38%, transparent);
  animation: invite-alert-in var(--t-med) var(--ease-liquid);
}
.invite-alert__icon { font-size: 1.55rem; }
.invite-alert__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite-alert__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; color: var(--text-secondary); }
.invite-alert__action, .invite-alert__close { border: 0; cursor: pointer; color: var(--text-primary); }
.invite-alert__action { padding: 8px 12px; border-radius: 999px; background: var(--grad-primary); color: #07121c; font-weight: 800; }
.invite-alert__close { padding: 6px; background: transparent; font-size: 1.4rem; }
@keyframes invite-alert-in { from { opacity: 0; transform: translate(-50%, -18px) scale(.96); } }

.nav__dot {
  position: absolute;
  top: 6px;
  right: 22%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-danger);
  box-shadow: 0 0 10px var(--state-danger);
}

/* ---------- Onboarding ---------- */
.hero { display: grid; place-items: center; gap: var(--s-4); padding: var(--s-7) var(--s-4); text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); }

.species-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.species {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: inherit;
  text-align: center;
  transition: transform var(--t-med) var(--ease-liquid), border-color var(--t-med) linear;
}
.species:hover { transform: translateY(-4px); }
.species.is-selected { border-color: var(--brand-mint); box-shadow: var(--shadow-glow-green); }
.species svg { width: 88px; height: 88px; }
.species__name { font-family: var(--font-display); font-size: 1rem; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.84rem; color: var(--text-secondary); }
.input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.input:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }

/* ---------- Loja ---------- */
.tabs { display: flex; gap: 4px; padding: 5px; }
.tab {
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--t-med) var(--ease-liquid), color var(--t-fast) linear;
}
.tab.is-active { background: var(--glass-surface-strong); color: var(--text-primary); }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.item { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.item__art { font-size: 2.2rem; line-height: 1; }
.item__name { font-family: var(--font-display); font-size: 0.98rem; }
.item__desc { font-size: 0.76rem; color: var(--text-secondary); flex: 1; }

.price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.86rem;
}
.price--common { color: var(--coin-common); }
.price--premium { color: var(--coin-premium); }
/* Dinheiro real é sempre marcado de forma inconfundível (seção 6 da spec). */
.price--money {
  color: var(--money-real);
  border: 1px solid var(--money-real);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.money-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: var(--money-real);
  font-size: 0.68rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.owned { color: var(--state-success); font-size: 0.82rem; font-family: var(--font-display); }

/* ---------- Missões ---------- */
.quest { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); }
.quest__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.quest__title { font-family: var(--font-display); font-size: 0.95rem; }
.quest.is-done { opacity: 0.6; }

/* ---------- Modal ---------- */
.modal-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: var(--bg-veil);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in var(--t-med) var(--ease-liquid);
}
.modal { width: min(420px, 100%); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.modal h3 { font-size: 1.25rem; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Toasts e efeitos ---------- */
.toasts {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(440px, calc(100% - 24px));
  pointer-events: none;
}
.toast {
  padding: 16px 18px;
  min-height: 56px;
  font-size: 1rem;
  font-weight: 750;
  border-width: 2px;
  box-shadow: 0 18px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  animation: toast-in var(--t-med) var(--ease-liquid);
}
.toast--success { border-color: rgba(61,220,151,.9); background: rgba(12,66,52,.96); }
.toast--warn { border-color: rgba(251,191,36,.95); background: rgba(76,52,8,.97); }
.toast--danger { border-color: rgba(251,113,133,.95); background: rgba(80,18,38,.97); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.float-pop {
  position: absolute;
  z-index: 50;
  font-family: var(--font-display);
  font-size: 1.5rem;
  pointer-events: none;
  animation: float-up 1.05s var(--ease-liquid) forwards;
}
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -22px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -72px) scale(1); }
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: fall 1.9s linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(680deg); opacity: 0; }
}

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

@media (min-width: 560px) {
  .needs { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Telas de conta, início e questionário do ovo
   ========================================================= */

.form-error { color: var(--state-danger); font-size: 0.84rem; min-height: 1.1em; }

/* ---------- Verificação de contatos ---------- */
.verify-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.verify-chip--ok { color: var(--state-success); }
.verify-chip--pending { color: var(--state-warning); }
.verify-code { flex: 1; min-width: 0; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.account-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.account-contact__value { overflow-wrap: anywhere; }

/* ---------- Escolha do modo de início ---------- */
.start-card { display: flex; gap: var(--s-4); align-items: center; }
.start-card__art { width: 92px; flex-shrink: 0; }
.start-card__art svg { width: 100%; height: auto; }
.start-card h2 { font-size: 1.15rem; }

/* ---------- Questionário ---------- */
.quiz-progress { height: 8px; padding: 0; border-radius: var(--r-pill); overflow: hidden; }
.quiz-progress__fill {
  height: 100%;
  background: var(--grad-primary);
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-liquid);
}

.quiz-egg { width: 120px; margin: 0 auto; }
.quiz-egg svg { width: 100%; height: auto; }

.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

.quiz-option {
  flex-direction: column;
  gap: 6px;
  min-height: 104px;
  padding: var(--s-4) var(--s-2);
  border-radius: var(--r-lg);
  text-align: center;
  line-height: 1.25;
}
.quiz-option__emoji { font-size: 2rem; }
.quiz-option__label { font-size: 0.86rem; font-weight: 600; }
.quiz-option.is-picked { border-color: var(--brand-mint); box-shadow: var(--shadow-glow-green); }

/* ---------- Narração das perguntas ---------- */
.quiz-voice { display: flex; gap: var(--s-2); align-items: center; }
.quiz-voice .gbtn { gap: 6px; min-height: 36px; }
.quiz-sound[aria-pressed='false'] { opacity: 0.75; }
.no-narration .quiz-voice { display: none; }
.quiz-repeat.is-attention { animation: nar-attention 1.2s ease-in-out infinite; border-color: var(--brand-mint); }

/* A palavra dita acende na pergunta (e na alternativa); as já ditas ficam realçadas. */
.nar-word {
  border-radius: 0.35em;
  padding: 0 0.12em;
  margin: 0 -0.12em;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-fast) var(--ease-liquid);
}
.nar-word.is-spoken { color: var(--brand-mint); }
.nar-word.is-now {
  background: var(--brand-mint);
  color: #06210f;
  transform: scale(1.06);
  display: inline-block;
}
/* A alternativa que está sendo lida brilha. */
.quiz-option.is-narrating,
.color-swatch.is-narrating {
  border-color: var(--brand-mint);
  box-shadow: var(--shadow-glow-green);
  transform: scale(1.04);
}
h2.is-narrating { text-shadow: 0 0 18px color-mix(in srgb, var(--brand-mint) 55%, transparent); }
@keyframes nar-attention { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .quiz-repeat.is-attention { animation: none; }
  .nar-word.is-now, .quiz-option.is-narrating, .color-swatch.is-narrating { transform: none; }
}

/* ---------- Última pergunta: a cor ---------- */
.quiz-reading { font-size: 0.9rem; }
.color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: var(--s-2) 4px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-med) linear;
}
.color-swatch:active { transform: scale(0.95); }
.color-swatch:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.color-swatch__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 42%), var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.color-swatch__name { font-size: 0.72rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-swatch.is-picked { border-color: var(--brand-mint); box-shadow: var(--shadow-glow-green); }
.quiz-option--karma { width: 100%; min-height: 0; margin-top: var(--s-2); }

/* ---------- Eclosão ---------- */
.hatch-egg { width: 180px; margin: 0 auto; cursor: pointer; }
.hatch-egg svg { width: 100%; height: auto; }
.hatch-egg.is-shaking { animation: egg-shake 1.6s ease-in-out infinite; }
.hatch-egg.is-cracking { animation: egg-crack 1.1s var(--ease-liquid) infinite; }

@keyframes egg-shake {
  0%, 62%, 100% { transform: rotate(0); }
  68% { transform: rotate(-7deg); }
  74% { transform: rotate(6deg); }
  80% { transform: rotate(-4deg); }
  86% { transform: rotate(3deg); }
}
@keyframes egg-crack {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.06) rotate(-8deg); }
  50% { transform: scale(0.96) rotate(7deg); }
  75% { transform: scale(1.05) rotate(-5deg); }
}

.hatch-pet { width: 190px; margin: 0 auto; animation: hatch-pop 0.8s var(--ease-liquid); }
.hatch-pet svg { width: 100%; height: auto; }

@keyframes hatch-pop {
  0% { opacity: 0; transform: scale(0.3) translateY(30px); }
  60% { opacity: 1; transform: scale(1.12) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hatch-egg.is-shaking, .hatch-egg.is-cracking, .hatch-pet { animation: none; }
}

/* ---------- Ficha de traços ---------- */
.trait-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--s-3);
  align-items: baseline;
}
.trait-value { font-family: var(--font-display); font-size: 0.92rem; }

/* ---------- Indicador de sincronização ---------- */
.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  min-width: 0;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-deep) 70%, var(--glass-surface-strong));
  white-space: nowrap;
}
.sync-chip__text { overflow: hidden; text-overflow: ellipsis; }
/* Ponto de estado: verde on-line e salvo, amarelo salvando, vermelho off-line.
   O texto não muda de cor: só o ponto conta o estado. */
.sync-chip::after {
  content: '';
  order: -1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-success);
  box-shadow: 0 0 8px var(--state-success);
}
.sync-chip::after { transition: background .25s ease, box-shadow .25s ease; }
.sync-chip.is-syncing::after { background: var(--state-warning); box-shadow: 0 0 8px var(--state-warning); }
.sync-chip.is-offline::after { background: var(--state-danger); box-shadow: 0 0 8px var(--state-danger); }
/* Em telas estreitas o chip vira só ponto + ícone; o texto continua no rótulo acessível. */
@media (max-width: 359px) { .sync-chip__text, .sync-chip__extra { display: none; } }

/* =========================================================
   Palco do pet — tela fixa, HUD flutuante e gestos
   ========================================================= */

.screen--stage {
  padding: 0;
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  animation: none;
}

.stage-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Altura do contêiner (que já é a viewport), nunca 100dvh de novo: somar
     alturas de viewport em elementos aninhados é o que cria rolagem fantasma. */
  height: 100%;
  min-height: 0;
  /* O respiro embaixo é o espaço real da navegação mais uma folga visível,
     para os dois conjuntos de botões nunca se tocarem. */
  /* O respiro de cima (área segura e folga) fica com a barra do topo. */
  padding: 0 var(--s-3) var(--nav-space);
  gap: var(--s-2);
  contain: layout paint;
}

/* Cenário: cobre a tela inteira, inclusive atrás da barra do topo (status e
   sino), fica atrás de tudo e nunca captura gesto. Ele mora fora do
   `.stage-shell`, cujo `contain: paint` o cortaria na borda do palco. */
.stage-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background var(--t-slow) linear;
}

/* ---------- HUD superior ---------- */
/* Cartão compacto: quem é o pet (identidade, carteira, crescimento). As
   necessidades moram nos botões de cuidado; o humor, no balão acima do pet. */
.hud {
  position: relative;
  z-index: 3;
  padding: 10px var(--s-3) var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.hud__id { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.hud__identity { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hud__nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud__tag { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__rarity { font-size: 0.64rem; padding: 3px 9px; flex-shrink: 0; }
.hud__mood {
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  white-space: nowrap;
}

.hud__wallet { display: flex; gap: 4px; flex-shrink: 0; }
.hud__coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.hud__coin--common { color: var(--coin-common); }
.hud__coin--premium { color: var(--coin-premium); }

/* Maturidade: linha fina com o próximo estágio escrito por extenso. */
.maturity {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.66rem;
}
.maturity__title { font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maturity__track {
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, .38);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.maturity__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-premium);
  box-shadow: 0 0 8px rgba(192, 132, 252, .65);
  transition: width var(--t-slow) var(--ease-liquid);
}
.maturity__label { text-align: right; font-variant-numeric: tabular-nums; }

/* O nível da necessidade anima de verdade no anel dos botões de cuidado. */
@property --level { syntax: '<percentage>'; inherits: true; initial-value: 60%; }

/* ---------- Miolo do palco: área de gesto, humor e lugares ---------- */
.stage-middle {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---------- Área de brincar ---------- */
.stage-play {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  /* O gesto é do palco: o navegador não deve rolar nem selecionar aqui. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.stage-play:active { cursor: grabbing; }

.pet-holder {
  --drag-x: 0px;
  --drag-y: 0px;
  position: relative;
  /* A moldura do SVG é fixa (é o que deixa o filhote visivelmente menor que o
     adulto) e reserva espaço para auréola e antenas.
     O tamanho é limitado pela largura E pela altura disponíveis: só pela
     largura, telas baixas estouravam o palco e voltavam a rolar. */
  aspect-ratio: 344 / 412;
  height: min(100%, 460px);
  width: auto;
  /* A coluna de lugares ocupa a lateral direita: a mesma folga dos dois
     lados mantém o pet centralizado sem ele passar por baixo dos botões. */
  max-width: min(calc(100% - 2 * var(--rail-w)), 380px);
  /* Também item de grade: sem `min-*: 0` ele se recusa a ficar menor que o
     desenho e invade o dock em telas baixas. */
  min-height: 0;
  min-width: 0;
  /* A moldura tem mais folga em cima (auréola, antenas) do que embaixo, o que
     joga a massa visual para baixo do centro. Esta margem centraliza o PET. */
  margin-top: -5%;
  transform: translate3d(var(--drag-x), var(--drag-y), 0);
  animation: breathe 4.2s ease-in-out infinite;
  transform-origin: 50% 86%;
}

.pet-art { width: 100%; height: 100%; }

.pet-art svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Durante o arraste não há transição (acompanha o dedo na hora);
   na volta, entra a mola. */
.pet-holder.is-dragging { animation: none; transition: none; }
.pet-holder.is-springing {
  animation: none;
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pet-holder.is-jumping { animation: pet-jump 0.85s var(--ease-liquid); }
.pet-holder.is-wiggling { animation: pet-wiggle 0.6s ease-in-out; }
.pet-holder.is-snuggling { animation: pet-snuggle 1.4s ease-in-out infinite; }
.pet-holder.is-dozing { animation: pet-doze 0.9s ease-in-out; }
.pet-holder.is-asleep { animation: pet-sleep 5s ease-in-out infinite; }

@keyframes pet-jump {
  0%, 100% { transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1); }
  30% { transform: translate3d(var(--drag-x), calc(var(--drag-y) - 62px), 0) scale(1.07); }
  55% { transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(0.93); }
  75% { transform: translate3d(var(--drag-x), calc(var(--drag-y) - 16px), 0) scale(1.02); }
}
@keyframes pet-wiggle {
  0%, 100% { transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(0); }
  25% { transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(-7deg) scale(1.03); }
  75% { transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(7deg) scale(1.03); }
}
@keyframes pet-snuggle {
  0%, 100% { transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1); }
  50% { transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1.06); }
}
@keyframes pet-doze {
  0%, 100% { transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(0); }
  50% { transform: translate3d(var(--drag-x), calc(var(--drag-y) + 10px), 0) rotate(-4deg) scale(0.97); }
}
@keyframes pet-sleep {
  0%, 100% { transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1); }
  50% { transform: translate3d(var(--drag-x), calc(var(--drag-y) + 6px), 0) scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-holder, .pet-holder.is-jumping, .pet-holder.is-wiggling,
  .pet-holder.is-snuggling, .pet-holder.is-dozing, .pet-holder.is-asleep { animation: none; }
}

/* ---------- Efeitos de gesto ---------- */
.stage-effects { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.fx { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }

.fx--pop {
  font-size: 1.6rem;
  font-family: var(--font-display);
  animation: fx-pop 1s var(--ease-liquid) forwards;
}
@keyframes fx-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  22% { opacity: 1; transform: translate(-50%, -110%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(0.95); }
}

.fx--bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95), rgba(180, 230, 255, 0.35) 55%, rgba(180, 230, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: fx-bubble 1.3s ease-out forwards;
}
@keyframes fx-bubble {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -320%) scale(1.1); }
}

/* ---------- Dica de gesto ---------- */
.hint-chip {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%) translateY(8px);
  z-index: 4;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.82rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) linear, transform var(--t-med) var(--ease-liquid);
}
.hint-chip.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Dock de cuidados ---------- */
.dock {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  width: min(480px, 100%);
  margin-inline: auto;
}

.dock__btn {
  --tone: var(--brand-mint);
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 66px;
  padding: 6px 2px;
  border-radius: var(--r-md);
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* O selo de custo passa um pouco da borda do anel: o botão não corta. */
.dock__btn { overflow: visible; }
.dock__btn:hover { background: var(--glass-surface); border-color: var(--glass-border); box-shadow: none; }
.dock__btn:disabled { opacity: 0.45; }
/* O ícone fica dentro do anel da necessidade que o botão enche: o anel
   esvazia com ela (na cor dela) e o número vai num selo embaixo. */
.dock__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--tone) var(--level, 100%), color-mix(in srgb, var(--tone) 16%, rgba(255, 255, 255, .08)) 0);
  box-shadow: 0 0 12px -5px var(--tone);
  transition: transform var(--t-fast) var(--ease-liquid), box-shadow var(--t-med) linear, --level var(--t-slow) var(--ease-liquid);
}
.dock__icon::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 80%, var(--tone));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
}
.dock__emoji { position: relative; }
.dock__level {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  min-width: 24px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  font-family: var(--font-display);
  font-size: 0.6rem;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.dock__level:empty { display: none; }
.dock__btn.is-low .dock__level { color: var(--state-warning); }
.dock__btn.is-critical .dock__level { color: var(--state-danger); }
.dock__emoji { font-size: 1.3rem; line-height: 1; }
.dock__label {
  max-width: 100%;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Custo como selo no canto de cima do anel: o de baixo é do nível. */
.dock__cost {
  position: absolute;
  z-index: 1;
  right: -9px;
  top: -6px;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  font-family: var(--font-display);
  font-size: 0.58rem;
  line-height: 1.3;
  color: var(--coin-common);
  white-space: nowrap;
}
.dock__cost[hidden] { display: none; }
/* A necessidade deste botão está baixa: ele chama atenção. */
.dock__btn.is-needed .dock__icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 70%, transparent), 0 0 16px -2px var(--tone);
  animation: dock-needed 1.6s ease-in-out infinite;
}
.dock__btn.is-needed .dock__label { font-weight: 800; }
@keyframes dock-needed { 50% { transform: translateY(-2px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .dock__btn.is-needed .dock__icon { animation: none; }
}

/* Telas mais altas podem dar mais espaço ao pet. */
@media (min-height: 780px) {
  .pet-holder { width: min(96vw, 440px); }
  .dock__btn { min-height: 76px; }
  .dock__icon { width: 50px; height: 50px; }
  .dock__emoji { font-size: 1.4rem; }
}

/* Vitrine da loja: a peça desenhada, não o emoji */
.item__art--drawn { height: 62px; display: grid; place-items: center; }
.item__art--drawn svg { width: 100%; height: 62px; }

/* Guia de gestos */
.gesture-guide { display: grid; gap: var(--s-2); }
.gesture-guide__item { display: flex; align-items: center; gap: var(--s-3); }
.gesture-guide__icon { font-size: 1.2rem; width: 34px; text-align: center; flex-shrink: 0; }
.gesture-guide__title { font-family: var(--font-display); font-size: 0.88rem; }

/* Telas bem estreitas: o rótulo corta ("limentar", "eterinári"). Nesse
   espaço o ícone se vira sozinho — o nome continua no `aria-label`, então
   quem usa leitor de tela não perde nada. */
@media (max-width: 399px) {
  .dock__label { font-size: 0.6rem; }
}
@media (max-width: 359px) {
  .dock__label { display: none; }
  .dock__btn { min-height: 54px; }
}

/* =========================================================
   Mini-games
   ========================================================= */

/* ---------- Lista ---------- */
.online-friends-modal { min-width: min(340px, 72vw); }
.online-friend-row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: var(--r-md); background: rgba(255,255,255,.04); }
.online-friend-row__status { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-mint); box-shadow: 0 0 9px var(--brand-mint); }
.online-friend-row .gbtn { grid-column: 3; grid-row: 1 / span 2; }
.active-game-sessions { display: grid; gap: 5px; padding: 11px 13px; border: 1px solid rgba(61,220,151,.35); border-radius: var(--r-md); background: rgba(61,220,151,.08); }



.game-friend-list { display: grid; gap: var(--s-2); max-height: 42vh; overflow-y: auto; }
.game-mode-empty { padding: var(--s-3); border-radius: var(--r-md); background: rgba(251,191,36,.1); color: var(--text-secondary); }
.game-waiting { margin-top: 12vh; }
.game-waiting__icon { font-size: 3rem; animation: waiting-pulse 1.4s ease-in-out infinite; }
@keyframes waiting-pulse { 50% { transform: scale(1.12); opacity: .65; } }


/* ---------- Palco ---------- */
.game-stage {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: var(--r-lg);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(82, 230, 255, .22);
  box-shadow: 0 18px 48px rgba(0,8,32,.38), inset 0 1px rgba(255,255,255,.08);
}

.game-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.frontier-defense__backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, rgba(99,255,197,.08), transparent 60%), var(--fd-ground, #071838); pointer-events: none; }
.frontier-defense__video, .frontier-defense__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #071838; pointer-events: none; }
/* Véu do tema: escurece o fundo para a pista e as torres ficarem legíveis. */
.frontier-defense__veil { position: absolute; inset: 0; background: #050b18; opacity: var(--fd-veil, 0); pointer-events: none; }

/* ---------- Defesa da Fronteira: barra de construção e avisos ---------- */
.fd-banner {
  position: absolute; left: 50%; top: 52px; z-index: 3; max-width: calc(100% - 24px);
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(143,239,255,.3);
  background: rgba(5,14,34,.84); color: #e9f7ff; font: 700 .72rem var(--font-display); text-align: center;
  opacity: 0; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.fd-banner.is-visible { opacity: 1; transform: translate(-50%, 0); }
.fd-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 8px 8px; background: linear-gradient(180deg, transparent, rgba(4,11,27,.88) 26%);
}
.fd-bar__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-bar__status { display: flex; flex-wrap: wrap; gap: 4px 10px; color: #dffcff; font: 700 .72rem var(--font-display); }
.fd-stat--coins { color: #ffd962; }
.fd-wave-mode { display: inline-flex; flex: none; padding: 2px; border: 1px solid rgba(143,239,255,.24); border-radius: var(--r-pill); background: rgba(5,14,34,.7); }
.fd-wave-mode__option { min-height: 25px; padding: 3px 8px; border: 0; border-radius: var(--r-pill); background: transparent; color: #9eb5c9; font: 700 .61rem var(--font-display); cursor: pointer; }
.fd-wave-mode__option.is-active { background: rgba(80,235,210,.24); color: #eafffb; box-shadow: inset 0 0 0 1px rgba(143,255,226,.3); }
.fd-bar__powers { display: flex; gap: 8px; }
.fd-power {
  position: relative; display: grid; place-items: center; width: 38px; height: 32px; padding: 0;
  border: 1px solid rgba(143,239,255,.38); border-radius: 10px; background: rgba(8,23,47,.88); color: #fff; font-size: 1rem; cursor: pointer;
}
.fd-power img { width: 22px; height: 22px; object-fit: contain; }
.fd-power__count {
  position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 9px; background: #ffd962; color: #1b1300; font: 800 .62rem var(--font-display);
}
.fd-power:disabled { opacity: .45; cursor: default; }
.fd-bar__row { display: flex; align-items: stretch; gap: 6px; height: 70px; }
.fd-bar__cards { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fd-bar__cards[hidden] { display: none; }
.fd-bar__cards::-webkit-scrollbar { display: none; }
.fd-card {
  display: flex; flex: 1 0 50px; max-width: 92px; flex-direction: column; align-items: center; gap: 1px; padding: 4px 3px 5px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.07); color: #eafaff; cursor: pointer;
}
.fd-card.is-active { border-color: #8fffe2; background: rgba(80,235,210,.22); }
.fd-card.is-poor .fd-card__cost { opacity: .45; }
.fd-card:disabled { opacity: .55; }
.fd-card__art { width: 30px; height: 34px; }
.fd-card__name { max-width: 100%; overflow: hidden; font: 700 .62rem var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.fd-card__cost { color: #ffd962; font: 700 .62rem var(--font-display); }
.fd-next {
  display: flex; flex: 0 0 72px; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid #87ffd4; border-radius: 12px; background: rgba(80,235,170,.22); color: #eafffb; cursor: pointer;
}
.fd-next strong { font: 800 .68rem var(--font-display); }
.fd-next small { font: 700 .58rem var(--font-display); opacity: .85; }
.fd-next:disabled { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); color: #93a4b8; cursor: default; }
.fd-next.is-counting:disabled { border-color: rgba(143,255,226,.42); background: rgba(80,235,210,.13); color: #dffcf4; }
.fd-tower-panel {
  display: flex; flex: 1; align-items: stretch; justify-content: center; gap: 6px; min-width: 0;
}
.fd-tower-panel[hidden] { display: none; }
.fd-tower-panel__title { align-self: center; padding: 0 4px; overflow: hidden; color: #eafffb; font: 700 .68rem var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.fd-action {
  display: flex; flex: 1 1 74px; max-width: 106px; flex-direction: column; align-items: center; justify-content: center; padding: 5px 8px; cursor: pointer;
  border: 1px solid #8fffe2; border-radius: 10px; background: rgba(80,235,210,.18); color: #eafffb;
}
.fd-action strong { font: 800 .64rem var(--font-display); }
.fd-action small { font: 700 .6rem var(--font-display); }
.fd-action--sell { border-color: #ffd962; background: rgba(255,190,70,.16); }
.fd-action--repair { border-color: #5ad1ff; background: rgba(90,209,255,.16); }
.fd-action:disabled { opacity: .5; cursor: default; }

/* ---------- Pega-Pega dos Pets ---------- */
.game-stage--tag { background: #123524; }
.pt-hud {
  position: absolute; left: 6px; right: 6px; top: var(--stage-hud); z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 5px;
}
.pt-chip {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 4px; min-width: 0; padding: 3px 7px 3px 3px;
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--seat) 45%, transparent);
  background: rgba(5,18,14,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #f1fff6; font: 800 .66rem var(--font-display); transition: transform .15s, box-shadow .15s;
}
.pt-chip.is-turn { border-color: var(--seat); box-shadow: 0 0 12px color-mix(in srgb, var(--seat) 60%, transparent); transform: translateY(1px) scale(1.03); }
.pt-chip.is-it { background: linear-gradient(180deg, rgba(120,20,45,.9), rgba(60,10,25,.9)); }
.pt-chip__face { grid-row: span 2; display: block; width: 28px; height: 28px; }
.pt-chip__face svg { display: block; width: 100%; height: 100%; }
.pt-chip__name { min-width: 0; overflow: hidden; color: var(--seat); font-size: .6rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.pt-chip__pts { font-variant-numeric: tabular-nums; font-size: .9rem; line-height: 1; }
.pt-chip__badge { position: absolute; top: -9px; right: -4px; font-size: .9rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.pt-chip__badge--safe { font-size: .72rem; }
.pt-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 10px; background: linear-gradient(180deg, transparent, rgba(4,20,14,.9) 26%);
}
.pt-status { flex: 1; min-height: 2.5em; margin: 0; display: flex; align-items: center; color: #fff8d6; font: 800 .8rem var(--font-display); line-height: 1.25; }
.pt-stay {
  flex: none; min-height: 44px; padding: 6px 14px; border-radius: 16px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.55); background: linear-gradient(180deg, #4fd27a, #239a50); color: #fff;
  font: 800 .8rem var(--font-display); box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.pt-stay[hidden] { display: block; visibility: hidden; }
.pt-stay:active { transform: scale(.96); }
.pt-splash {
  position: absolute; left: 50%; top: 42%; z-index: 4; max-width: 86%; padding: 12px 24px; border-radius: 22px; pointer-events: none;
  border: 3px solid #fff; background: linear-gradient(180deg, #ff8fb4, #d9468f); color: #fff; text-align: center;
  font: 800 1.35rem var(--font-display); text-shadow: 0 2px 0 rgba(0,0,0,.2); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
}
.pt-splash.is-mine { background: linear-gradient(180deg, #ffe27a, #ffb341); color: #3a2300; text-shadow: none; }
.pt-splash[hidden] { display: none; }
.pt-splash.is-showing { animation: aa-double-pop 1.3s cubic-bezier(.2, 1.4, .4, 1) both; }
.pt-end {
  position: absolute; left: 50%; top: 50%; z-index: 5; width: min(340px, calc(100% - 32px)); padding: 18px 16px 16px;
  transform: translate(-50%, -50%); border-radius: 24px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(6,24,18,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #f1fff6; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.pt-end__title { margin: 0 0 10px; font: 800 1.4rem var(--font-display); }
.pt-end__list { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pt-end__row { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 14px; background: rgba(255,255,255,.07); border-left: 4px solid var(--seat); }
.pt-end__row.is-me { background: rgba(255,226,122,.16); }
.pt-end__row .pt-chip__face { flex: none; width: 34px; height: 34px; }
.pt-end__name { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: 700 .85rem var(--font-display); }
.pt-end__pts { font-variant-numeric: tabular-nums; }
.pt-end__btn { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .pt-splash.is-showing { animation: none; }
}

/* ---------- Arena de Artilharia: placar, cartas, energia ---------- */
.game-stage--arena { background: #245f3d; }
.game-stage--space { background: #0d1a3f; }
.game-stage--march { background: #bfe8ff; touch-action: none; }
/* Poderes especiais da Marcha (fase 20+): fileira de botões embaixo, no centro —
   nas laterais eles cobririam as torres da beira da estrada. */
.gm-specials {
  position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3; transform: translateX(-50%);
  display: flex; gap: 12px;
}
.gm-specials[hidden] { display: none; }
.gm-special {
  --gm-tone: 255,138,42;
  position: relative; display: grid; justify-items: center; align-content: center; gap: 1px;
  width: 58px; height: 58px; padding: 4px 2px; border-radius: 16px;
  border: 1.5px solid rgba(var(--gm-tone), .75);
  background: radial-gradient(circle at 50% 32%, rgba(var(--gm-tone), .45), rgba(8,16,38,.9) 70%);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 12px rgba(var(--gm-tone), .35);
  color: #fff; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .2s ease, filter .2s ease;
}
.gm-special--beam { --gm-tone: 210,107,255; }
.gm-special--frost { --gm-tone: 143,220,255; }
.gm-special:not(:disabled):active { transform: scale(.92); }
.gm-special:not(:disabled) { animation: gm-special-glow 2.4s ease-in-out infinite; }
.gm-special__icon { font-size: 1.45rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(var(--gm-tone), .9)); }
.gm-special__name { font: 800 .5rem/1.1 var(--font-display); letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; }
.gm-special__count {
  position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 10px; background: #ffd962; color: #1b1300; font: 900 .7rem var(--font-display); box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.gm-special:disabled { opacity: .42; cursor: default; filter: grayscale(.6); }
@keyframes gm-special-glow {
  0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 12px rgba(var(--gm-tone), .35); }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 16px rgba(var(--gm-tone), .55), inset 0 0 16px rgba(var(--gm-tone), .5); }
}
@media (prefers-reduced-motion: reduce) { .gm-special:not(:disabled) { animation: none; } }
.aa-score {
  position: absolute; left: 6px; right: 6px; top: var(--aa-top, 46px); z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,14,34,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #eef7ff; font: 700 .64rem var(--font-display); pointer-events: none;
}
.aa-score__side { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 6px; min-width: 0; }
.aa-score__side--north { direction: rtl; }
.aa-score__side--north > * { direction: ltr; }
.aa-score__name { grid-column: 1 / 3; overflow: hidden; color: var(--team); text-overflow: ellipsis; white-space: nowrap; }
.aa-score__bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.aa-score__bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--team), #fff); transition: width .25s; }
.aa-score__side--north .aa-score__bar i { inset: 0 0 0 auto; background: linear-gradient(270deg, var(--team), #fff); }
.aa-score__bar.is-low i { background: #ff4d5e; animation: aa-blink .8s ease-in-out infinite alternate; }
.aa-score__hp { font-variant-numeric: tabular-nums; font-size: .6rem; opacity: .9; }
.aa-score__pips { grid-column: 1 / 3; display: flex; gap: 4px; }
.aa-score__pip {
  width: 22px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--team) var(--hp, 100%), rgba(255,255,255,.14) var(--hp, 100%));
}
.aa-score__pip.is-down { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.aa-score__center { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.aa-score__stars { color: #ffe27a; font-size: .62rem; white-space: nowrap; }
.aa-score__clock { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.aa-score__clock.is-urgent { color: #ff9ce8; text-shadow: 0 0 10px rgba(255,80,220,.7); }
.aa-banner { top: calc(var(--aa-arena-top, 96px) + 4px); }

.aa-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 8px 8px; background: linear-gradient(180deg, transparent, rgba(4,11,27,.9) 22%);
}
.aa-bar__top { display: flex; align-items: center; gap: 6px; }
.aa-units { display: flex; flex: 1; gap: 5px; min-width: 0; }
.aa-unit {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 4px; flex: 1 1 0; min-width: 0; max-width: 104px;
  height: 40px; padding: 2px 6px 2px 3px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.07); color: #eafaff; cursor: pointer;
}
.aa-unit__face { grid-row: span 2; width: 30px; height: 30px; object-fit: contain; }
.aa-unit__hp { position: relative; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.aa-unit__hp i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #3d9bff; transition: width .2s; }
.aa-unit__status { min-height: .8em; font: 800 .62rem var(--font-display); color: #cfe3fa; }
.aa-unit.is-selected { border-color: #fff6b0; background: rgba(61,155,255,.28); box-shadow: 0 0 0 2px rgba(255,246,176,.25); }
.aa-unit.is-down { opacity: .5; }
.aa-unit.is-down .aa-unit__face { filter: grayscale(1); }
.aa-unit.is-frozen { border-color: #7fdcff; background: rgba(127,220,255,.2); }
.aa-unit.is-reloading::after {
  content: ''; position: absolute; inset: auto 6px 3px 38px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.55);
  animation: aa-reload 1.5s linear;
}
.aa-move {
  flex: none; display: grid; place-items: center; width: 34px; height: 40px; padding: 0;
  border: 1px solid rgba(143,239,255,.35); border-radius: 12px; background: rgba(8,23,47,.88); color: #eafaff; font-size: .9rem; cursor: pointer;
}
.aa-move:active { background: rgba(80,235,210,.25); }
.aa-move:disabled, .aa-pass:disabled { opacity: .45; cursor: default; }
/* Duelo on-line por turnos: passar a vez (guarda a energia). */
.aa-pass {
  flex: none; height: 40px; padding: 0 10px; border: 1px solid rgba(255,227,122,.45); border-radius: 12px;
  background: rgba(8,23,47,.88); color: #ffe27a; font: 800 .7rem var(--font-display); cursor: pointer; white-space: nowrap;
}
.aa-pass:not(:disabled):active { background: rgba(255,227,122,.2); }
.aa-score__clock.is-mine { color: #9fffe0; }
.aa-next { flex: none; display: flex; flex-direction: column; align-items: center; width: 42px; color: #9eb5c9; font: 700 .52rem var(--font-display); }
.aa-next__art { display: block; width: 26px; height: 26px; opacity: .85; }
.aa-next__art svg, .aa-card__art svg { display: block; width: 100%; height: 100%; }
.aa-hint {
  min-height: 1.2em; overflow: hidden; color: #dffcff; font: 700 .68rem var(--font-display); text-align: center;
  text-overflow: ellipsis; white-space: nowrap;
}
.aa-hand { display: flex; gap: 5px; }
.aa-card {
  position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  height: 66px; padding: 4px 3px 5px; overflow: hidden; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--card, #fff) 55%, transparent); border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card, #fff) 22%, rgba(12,22,48,.95)), rgba(8,15,34,.95));
  color: #eafaff; transition: transform .12s var(--ease-liquid, ease), box-shadow .12s;
}
.aa-card__art { width: 32px; height: 32px; }
.aa-card__name { max-width: 100%; overflow: hidden; font: 700 .6rem var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.aa-card__cost {
  position: absolute; top: 3px; left: 3px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5a8ff, #b01ee0); color: #fff; font: 800 .68rem var(--font-display);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
/* Energia que falta: um véu que desce conforme a energia enche. */
.aa-card__charge {
  position: absolute; inset: 0; pointer-events: none; background: rgba(3,8,20,.62);
  transform-origin: top; transform: scaleY(calc(1 - var(--charge, 1)));
}
.aa-card.is-poor .aa-card__cost { filter: grayscale(.7); }
.aa-card.is-selected { transform: translateY(-5px); border-color: #fff6b0; box-shadow: 0 6px 18px color-mix(in srgb, var(--card, #fff) 55%, transparent), 0 0 0 2px rgba(255,246,176,.35); }
.aa-card:disabled { opacity: .5; cursor: default; }
.aa-energy { display: flex; align-items: center; gap: 6px; }
.aa-energy__icon { font-size: .9rem; }
.aa-energy__track {
  position: relative; flex: 1; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.aa-energy__fill {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: linear-gradient(90deg, #b01ee0, #f07cff);
}
/* Divisões de 1 ponto sobre a barra. */
.aa-energy__track::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), rgba(3,8,20,.75) calc(10% - 1.5px) 10%);
}
.aa-energy__value { min-width: 1.4em; color: #f5b8ff; font: 800 .95rem var(--font-display); text-align: center; font-variant-numeric: tabular-nums; }
.aa-is-double .aa-energy__fill { background: linear-gradient(90deg, #ff3cac, #ffd35c, #ff3cac); background-size: 200% 100%; animation: aa-double-flow 1s linear infinite; }
.aa-is-double .aa-energy__value { color: #ffd35c; }
.aa-double {
  position: absolute; left: 50%; top: 42%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 22px; border-radius: 20px; border: 2px solid #ffd35c; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,60,172,.92), rgba(120,20,160,.92)); color: #fff;
  font: 800 1.35rem var(--font-display); text-shadow: 0 2px 0 rgba(0,0,0,.25); box-shadow: 0 0 40px rgba(255,60,172,.6);
  transform: translate(-50%, -50%);
}
.aa-double span { color: #ffe27a; font-size: 1.8rem; }
.aa-double[hidden] { display: none; }
.aa-double.is-showing { animation: aa-double-pop 2.3s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes aa-double-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  30%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.9); }
}
@keyframes aa-double-flow { to { background-position: -200% 0; } }
@keyframes aa-blink { to { opacity: .55; } }
@keyframes aa-reload { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .aa-double.is-showing, .aa-is-double .aa-energy__fill, .aa-score__bar.is-low i { animation: none; }
}

.aa-next[hidden] { display: none; }

/* ---------- Arena (os pequenos): turnos, itens grandes e cristais no placar ---------- */
.ak-stage { background: #2f7a45; }
.ak-score__side { grid-template-columns: auto 1fr; }
.ak-score__side .aa-score__name { grid-column: 2; }
.ak-score__face { grid-row: span 2; width: 28px; height: 28px; object-fit: contain; }
.ak-gems { grid-column: 2; display: flex; gap: 5px; }
.ak-gem {
  width: 13px; height: 13px; transform: rotate(45deg); border-radius: 3px;
  background: linear-gradient(135deg, #fff 0 18%, var(--team) 40%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--team) 70%, transparent);
}
.ak-gem.is-hurt { opacity: .75; background: linear-gradient(135deg, #fff 0 18%, var(--team) 40%, rgba(0,0,0,.35) 41% 46%, var(--team) 47%); }
.ak-gem.is-broken { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.ak-round { color: #cfe3fa; font-size: .58rem; white-space: nowrap; }
.ak-turn {
  padding: 2px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: #ffb3bd;
  font: 800 .78rem var(--font-display); white-space: nowrap;
}
.ak-turn.is-mine { background: #ffe27a; color: #3a2300; box-shadow: 0 0 12px rgba(255,226,122,.55); }
.ak-turn-splash {
  position: absolute; left: 50%; top: 45%; z-index: 4; padding: 12px 26px; border-radius: 22px; pointer-events: none;
  border: 3px solid #fff; background: linear-gradient(180deg, #ff8fb4, #d9468f); color: #fff;
  font: 800 1.6rem var(--font-display); text-shadow: 0 2px 0 rgba(0,0,0,.2); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
}
.ak-turn-splash.is-mine { background: linear-gradient(180deg, #ffe27a, #ffb341); color: #3a2300; text-shadow: none; }
.ak-turn-splash[hidden] { display: none; }
.ak-turn-splash.is-showing { animation: aa-double-pop 1.3s cubic-bezier(.2, 1.4, .4, 1) both; }
.ak-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 8px 8px; background: linear-gradient(180deg, transparent, rgba(4,11,27,.88) 22%);
}
.ak-hint {
  min-height: 1.3em; color: #fff8d6; font: 800 .8rem var(--font-display); text-align: center; line-height: 1.25;
}
.ak-row { display: flex; align-items: stretch; gap: 6px; }
.ak-items { display: flex; flex: 1; gap: 6px; min-width: 0; }
.ak-item {
  position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 82px; padding: 6px 4px; border-radius: 18px; cursor: pointer; color: #fff;
  border: 2px solid color-mix(in srgb, var(--item, #fff) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--item, #fff) 30%, rgba(12,22,48,.95)), rgba(8,15,34,.95));
  transition: transform .12s var(--ease-liquid, ease), box-shadow .12s;
}
.ak-item__art { width: 42px; height: 42px; }
.ak-item__art svg { display: block; width: 100%; height: 100%; }
.ak-item__name { font: 800 .82rem var(--font-display); }
.ak-item__status { font: 700 .6rem var(--font-display); opacity: .8; }
.ak-item.is-selected { transform: translateY(-4px) scale(1.03); border-color: #fff6b0; box-shadow: 0 8px 20px color-mix(in srgb, var(--item, #fff) 50%, transparent), 0 0 0 3px rgba(255,246,176,.35); }
.ak-item.is-waiting { filter: grayscale(.85); opacity: .6; }
.ak-launch {
  display: flex; flex: 0 0 96px; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 20px; cursor: pointer; color: #3a2300; font: 800 1rem var(--font-display);
  background: linear-gradient(180deg, #ffe27a, #ffb341); box-shadow: 0 6px 18px rgba(255,179,65,.35);
}
.ak-launch__icon { font-size: 1.5rem; line-height: 1; }
.ak-launch:disabled { background: rgba(255,255,255,.1); color: #93a4b8; box-shadow: none; cursor: default; }
.ak-launch.is-ready { animation: ak-ready 1s ease-in-out infinite; }
@keyframes ak-ready { 50% { transform: scale(1.06); box-shadow: 0 8px 26px rgba(255,200,80,.65); } }
@media (prefers-reduced-motion: reduce) { .ak-launch.is-ready, .ak-turn-splash.is-showing { animation: none; } }
.game-stage.is-fullscreen .ak-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
/* Deitado: itens na lateral. */
.ak-side .ak-bar {
  left: auto; top: var(--aa-arena-top, 96px); width: min(250px, 34%); justify-content: flex-end;
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 14px;
  background: linear-gradient(90deg, transparent, rgba(4,11,27,.9) 12%);
}
.ak-side .ak-row { flex-direction: column; }
.ak-side .ak-launch { flex: 0 0 64px; }
.ak-side .aa-banner { left: calc((100% - min(250px, 34%)) / 2); }

/* Jogos de mapa: o palco ganha a altura da dica e do cabeçalho compactado. */
.screen--game-fill > .tiny:last-child { display: none; }
.screen--game-fill .game-header__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.screen--game-fill .game-header h2 { font-size: 1.2rem; }
.screen--game-fill .game-mode-banner { margin: 0; }

/* ---------- HUD ---------- */
.game-hud {
  position: absolute;
  inset: 8px 10px auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  /* Respiro do tamanho do degrau dos botões de brinquedo (tema Mundo Colorido):
     no celular a barra corta o que passa da borda, e o degrau de baixo sumia. */
  padding: 2px 0 7px;
  pointer-events: none;
}

.game-hud__actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  pointer-events: auto;
}
.game-hud__actions .gbtn { min-height: 31px; padding: 5px 8px; font-size: .7rem; }
.game-hud__actions .game-hud__icon-btn { width: 31px; min-width: 31px; padding: 0; justify-content: center; }
.game-hud__icon { width: 15px; height: 15px; flex: none; display: block; }

.game-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(5, 14, 34, 0.7);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.72rem;
  line-height: 1.2;
}
.game-chip__label { color: var(--text-muted); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.035em; }
.game-chip strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.game-chip--combo { border-color: var(--brand-mint); color: var(--brand-mint); }
.game-chip--best { margin-left: 0; }
.game-chip--time.is-urgent { border-color: var(--state-danger); color: var(--state-danger); }
.game-chip__record-stars { position: absolute; inset: 50% auto auto 50%; width: 1px; height: 1px; pointer-events: none; }
.game-chip__record-stars i { position: absolute; color: #fff2a8; font-style: normal; font-size: 10px; opacity: 0; }
.game-chip--best.is-new-record { position: relative; border-color: #ffd962; color: #fff2a8; background: rgba(92,55,4,.74); animation: record-glow 1.5s ease-out 2; }
.game-chip--best.is-new-record .game-chip__label { color: #ffd962; }
.game-chip--best.is-new-record .game-chip__record-stars i { animation: record-star 1.25s ease-out calc(var(--star) * 70ms) both; }
@keyframes record-glow { 50% { box-shadow: 0 0 18px rgba(255,217,98,.62); transform: translateY(-1px); } }
@keyframes record-star { 0% { opacity: 0; transform: rotate(0) translateX(0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--star) * 60deg)) translateX(34px) scale(1.15); } }

/* O tratamento compacto e contrastado usado na Defesa da Fronteira vale para
   todos os jogos: os números importantes permanecem legíveis sem esconder o
   tabuleiro, inclusive quando há quatro ou mais indicadores. */

/* ---------- Contagem regressiva ---------- */
.game-countdown {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(11, 15, 26, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

.game-countdown span {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
}
.game-countdown span.is-pulsing { animation: count-pop 0.6s var(--ease-liquid); }

/* ---------- Clássicos em tabuleiro ---------- */
.classic-game { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-width: 0; min-height: 0; padding: var(--stage-hud) var(--s-3) var(--s-3); background: radial-gradient(circle at 50% 18%, rgba(82,230,255,.12), transparent 48%); }
.classic-status { flex: 0 0 auto; z-index: 2; max-width: 100%; min-height: 0; margin: 0; padding: 5px 11px; border: 1px solid transparent; border-radius: var(--r-pill); background: rgba(11,15,26,.58); color: var(--text-secondary); font-family: var(--font-display); font-size: .82rem; line-height: 1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.classic-status--turn { color: #071923; border-color: var(--brand-mint); background: var(--brand-mint); box-shadow: 0 0 24px rgba(61,220,151,.3); }
.classic-status--waiting { color: var(--state-info); border-color: rgba(125,211,252,.35); background: rgba(125,211,252,.09); }
.ttt-board { flex: 0 1 auto; width: 100%; max-width: min(100%, 420px); max-height: 100%; aspect-ratio: 1; margin: 0; display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); gap: clamp(7px, 2.4vw, 12px); }
.ttt-cell { width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 1px solid var(--glass-border); border-radius: var(--r-md); background: rgba(255,255,255,.055); color: var(--brand-mint); font: 700 clamp(2.4rem, 14vw, 4rem)/1 var(--font-display); }
.ttt-cell.is-o { color: #c084fc; }.ttt-cell.is-winner { border-color: var(--brand-mint); background: rgba(61,220,151,.16); box-shadow: 0 0 20px rgba(61,220,151,.2); }
.pair-board { flex: 0 1 auto; width: 100%; max-width: min(100%, 421px); max-height: 100%; aspect-ratio: .78; margin: 0; display: grid; grid-template: repeat(4, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr)); gap: clamp(7px, 2.2vw, 11px); }
.pair-card { position: relative; width: 100%; min-width: 0; height: 100%; min-height: 0; border: 1px solid rgba(82,230,255,.18); border-radius: 12px; background: linear-gradient(145deg, rgba(42,49,91,.95), rgba(20,24,52,.95)); color: var(--brand-mint); font: 700 1.25rem var(--font-display); transform-style: preserve-3d; transition: transform .3s, border-color .3s; }
.pair-card__face { display: none; font-size: clamp(1.3rem, 7vw, 2rem); }.pair-card.is-open .pair-card__back, .pair-card.is-matched .pair-card__back { display: none; }.pair-card.is-open .pair-card__face, .pair-card.is-matched .pair-card__face { display: inline; }.pair-card.is-open { transform: rotateY(180deg); background: rgba(255,255,255,.1); }.pair-card.is-open .pair-card__face { display: inline-block; transform: rotateY(180deg); }.pair-card.is-matched { border-color: var(--brand-mint); background: rgba(61,220,151,.15); }
.checkers-board { flex: 0 1 auto; width: 100%; max-width: min(100%, 420px); max-height: 100%; aspect-ratio: 1; margin: 0; display: grid; grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr)); overflow: hidden; border: 2px solid rgba(255,255,255,.18); border-radius: var(--r-md); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.checkers-cell { width:100%; min-width:0; height:100%; min-height:0; display:grid; place-items:center; padding:0; border:0; background:#d6d5df; }.checkers-cell.is-dark { background:#30395a; }.checkers-cell.is-target { box-shadow: inset 0 0 0 4px var(--brand-mint); }
.checker { width:78%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 3px 7px rgba(0,0,0,.35); font-size:.7rem; color:white; }.checker--blue { background:#38bdf8; }.checker--red { background:#f05b75; }.checker.is-king { outline:2px solid #fbbf24; }
.snake-controls { position:absolute; z-index:2; right:14px; bottom:16px; width:116px; height:116px; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:4px; padding:7px; border:1px solid rgba(143,239,255,.22); border-radius:28px; background:rgba(5,14,34,.52); backdrop-filter:blur(7px); box-shadow:0 10px 28px rgba(0,0,0,.28); }
.snake-control { padding:0; border:1px solid rgba(143,239,255,.3); border-radius:11px; color:#dffcff; background:rgba(82,230,255,.1); font:700 1rem var(--font-display); touch-action:manipulation; }.snake-control:active { background:rgba(82,230,255,.35); transform:scale(.94); }.snake-control--cima { grid-area:1/2; }.snake-control--esquerda { grid-area:2/1; }.snake-control--baixo { grid-area:3/2; }.snake-control--direita { grid-area:2/3; }

@keyframes count-pop {
  0% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* Quando o palco é mais largo que alto, quem limita o tabuleiro é a altura:
   dimensionar pela largura faria o tabuleiro vazar por baixo. */
@media (orientation: landscape) {
  .ttt-board, .pair-board, .checkers-board { width: auto; height: 100%; max-width: 100%; }
}

/* ---------- Memória ---------- */
.memory-board {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 0;
  padding: var(--stage-hud) var(--s-3) var(--s-3);
}
.memory-board.is-shaking { animation: board-shake 0.4s ease-in-out; }

@keyframes board-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  75% { transform: translateX(9px); }
}

.memory-top {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.memory-status {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  min-height: 0;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(11,15,26,.58);
  color: var(--text-secondary);
  transition: color var(--t-fast) linear;
}
.memory-status.is-watching { color: var(--state-info); }
.memory-status.is-turn { color: var(--brand-mint); }
.memory-status.is-right { color: var(--state-success); }
.memory-status.is-wrong { color: var(--state-danger); }
.memory-status.is-nudge { animation: nudge 0.4s ease-in-out; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
}

.memory-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 2.8vw, var(--s-3));
}

.memory-pad {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.14), transparent 60%),
    color-mix(in srgb, var(--pad-color) 22%, transparent);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-liquid),
              box-shadow var(--t-med) linear, background var(--t-fast) linear;
}
.memory-pad::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--pad-color) 45%, transparent);
  opacity: 0.6;
}
.memory-pad.is-lit {
  background: radial-gradient(circle at 34% 28%, var(--pad-glow), var(--pad-color) 70%);
  box-shadow: 0 0 44px -4px var(--pad-color), inset 0 0 26px rgba(255, 255, 255, 0.4);
  transform: scale(1.03);
}
.memory-pad.is-wrong { box-shadow: 0 0 44px -4px var(--state-danger); }
.memory-pad:active { transform: scale(0.98); }
.memory-pad:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 3px; }

/* ---------- Resultado ---------- */
.result { gap: 2px; }
.result__score {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result__row { margin-top: var(--s-2); }
.result__reward { margin-top: var(--s-2); font-size: 1rem; }

/* ---------- Pausa ---------- */
.row--tight { gap: var(--s-2); }

.game-pause {
  position: absolute;
  inset: 0;
  /* Acima de tudo que o jogo põe no palco (poderes, avisos, comemorações). */
  z-index: 8;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(11, 15, 26, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pause-in 0.18s var(--ease-liquid);
}
.game-pause__card { max-width: 280px; gap: var(--s-3); }
.game-pause__icon { font-size: 2.2rem; }
/* O palco pausado perde um pouco de cor: fica claro que a cena está congelada. */
.game-stage.is-paused .game-canvas,
.game-stage.is-paused .memory-board,
.game-stage.is-paused .edu-board { filter: saturate(0.6) brightness(0.8); }

@keyframes pause-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Jogos educativos ---------- */
.edu-band__options { display: flex; gap: var(--s-2); }
.edu-band__chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-fast);
}
.edu-band__chip strong { font-family: var(--font-display); font-size: 1rem; }
.edu-band__chip.is-active {
  border-color: var(--brand-mint);
  background: var(--glass-surface-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-glow-green);
}
.edu-band__chip:active { transform: scale(0.97); }


/* ---------- Palco da lição ---------- */
/* O palco de uma lição cresce com o texto: proporção fixa deixaria um vão
   embaixo nas perguntas curtas e cortaria as compridas. */
.game-stage--edu { aspect-ratio: auto; max-height: none; }
.game-stage--edu .edu-board { position: static; min-height: 360px; }

.edu-board {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  padding: var(--stage-hud) var(--s-3) var(--s-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.edu-board.is-entering .edu-prompt,
.edu-board.is-entering .edu-scene { animation: edu-rise 0.34s var(--ease-liquid) both; }
.edu-board.is-nudging { animation: board-shake 0.4s ease-in-out; }

.edu-top { display: flex; align-items: center; gap: var(--s-3); }
.edu-progress {
  flex: 1;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.edu-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: var(--grad-primary);
  transition: width var(--t-slow) var(--ease-liquid);
}

/* A cena é a parte animada: os itens entram um a um, no ritmo de quem conta. */
.edu-scene {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  min-height: 72px;
}
.edu-scene.is-empty { min-height: 0; }
.edu-scene__group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.edu-scene__item {
  font-size: 1.9rem;
  line-height: 1;
  animation: edu-pop 0.42s var(--ease-liquid) both, edu-float 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms + 420ms);
}
.edu-scene__plus { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-muted); }
.edu-scene__caption {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.edu-prompt {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.3;
}

.edu-area { display: flex; flex-direction: column; gap: var(--s-3); }

.edu-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.edu-options.is-long { grid-template-columns: 1fr; }
.edu-option {
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: pointer;
  animation: edu-pop 0.3s var(--ease-liquid) both;
  animation-delay: calc(var(--i) * 70ms);
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-fast);
}
.edu-option:active:not(:disabled) { transform: scale(0.97); }
.edu-option:disabled { cursor: default; }
.edu-option.is-right,
.edu-option.is-answer {
  border-color: var(--state-success);
  background: rgba(61, 220, 151, 0.18);
  box-shadow: var(--shadow-glow-green);
}
.edu-option.is-wrong {
  border-color: var(--state-danger);
  background: rgba(251, 113, 133, 0.16);
}
/* A certa continua acesa mesmo quando a criança errou: a tela sempre termina
   mostrando a resposta, nunca só o erro. */
.edu-option.is-answer { animation: edu-glow 1.1s ease-in-out 2; }

.edu-help { margin: 0; text-align: center; font-size: 0.78rem; color: var(--text-muted); }

/* ---------- Montar a palavra ---------- */
.edu-spell { display: flex; flex-direction: column; gap: var(--s-3); }
.edu-spell__slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px dashed var(--glass-border);
}
.edu-spell__slots.is-right { border-color: var(--state-success); border-style: solid; }
.edu-spell__slots.is-wrong { border-color: var(--state-danger); border-style: solid; }
.edu-slot {
  min-width: 46px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}
.edu-slot.is-filled {
  background: var(--glass-surface-strong);
  animation: edu-pop 0.24s var(--ease-liquid) both;
}
.edu-spell__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.edu-tile {
  min-width: 54px;
  min-height: 46px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border-bright);
  background: var(--glass-surface);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  animation: edu-pop 0.3s var(--ease-liquid) both;
  animation-delay: calc(var(--i) * 60ms);
}
.edu-tile:disabled { opacity: 0.28; cursor: default; }
.edu-tile:active:not(:disabled) { transform: scale(0.96); }
.edu-spell__actions { display: flex; gap: var(--s-2); }
.edu-spell__undo,
.edu-spell__confirm {
  flex: 1;
  min-height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}
.edu-spell__confirm { background: var(--grad-primary); color: var(--text-on-accent); border-color: transparent; }
.edu-spell__undo:disabled,
.edu-spell__confirm:disabled { opacity: 0.4; cursor: default; }

/* ---------- Retorno ---------- */
.edu-feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  animation: edu-rise 0.26s var(--ease-liquid) both;
}
.edu-feedback.is-right { border-color: var(--state-success); }
.edu-feedback.is-wrong { border-color: var(--state-warning); }
.edu-feedback__title { font-family: var(--font-display); font-size: 1.05rem; }
.edu-feedback__answer { font-family: var(--font-display); color: var(--state-success); }
.edu-feedback__why { font-size: 0.84rem; color: var(--text-secondary); }
.edu-next {
  margin-top: 4px;
  min-height: 44px;
  border-radius: var(--r-md);
  border: none;
  background: var(--grad-primary);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: pointer;
}

/* O pet acompanha a lição da barra de cima e comemora os acertos. */
.edu-buddy {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  pointer-events: none;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
}
.edu-buddy svg { width: 100%; height: 100%; }
.edu-buddy.is-cheering { animation: edu-cheer 0.7s var(--ease-liquid); }

@keyframes edu-pop {
  0% { opacity: 0; transform: scale(0.6) translateY(8px); }
  70% { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes edu-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes edu-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes edu-glow {
  0%, 100% { box-shadow: var(--shadow-glow-green); }
  50% { box-shadow: 0 0 30px -2px var(--state-success); }
}
@keyframes edu-cheer {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-14px) rotate(-8deg) scale(1.1); }
  60% { transform: translateY(-4px) rotate(6deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

/* Quem pede menos movimento recebe o conteúdo sem a dança dos elementos. */
@media (prefers-reduced-motion: reduce) {
  .edu-scene__item,
  .edu-option,
  .edu-tile,
  .edu-slot.is-filled,
  .edu-feedback,
  .edu-buddy.is-cheering,
  .edu-board.is-entering .edu-prompt,
  .edu-board.is-entering .edu-scene { animation: none; }
}

/* Galeria local de arte — não integra a navegação de produção. */
.aurora-gallery-page { overflow: auto; background: radial-gradient(circle at 50% 0, #124f72, #07142d 42%, #050a18); }
.aurora-gallery-page #app { max-width: 1100px; margin: auto; padding: max(24px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom)); }
.asset-gallery__header { margin-bottom: 24px; color: #e9fbff; }
.asset-gallery__header span { color: #55edff; font: 700 11px var(--font-display); letter-spacing: .18em; }
.asset-gallery__header h1 { margin: 5px 0; font-family: var(--font-display); }
.asset-gallery__header p { color: #9fbad0; }
.asset-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.asset-card { min-width: 0; padding: 12px; border: 1px solid rgba(85,237,255,.22); border-radius: 18px; background: rgba(8,24,53,.78); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.2); color: #e9fbff; }
.asset-card__preview { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 10px; border-radius: 13px; overflow: hidden; background: radial-gradient(circle, rgba(49,218,255,.16), rgba(5,12,31,.7)); }
.asset-card__preview img { width: 88%; height: 88%; object-fit: contain; }
.asset-card__procedural { color: #ff416d; font-size: 4rem; filter: drop-shadow(0 0 12px #ff315f); }
.asset-card strong, .asset-card code, .asset-card small { display: block; overflow: hidden; text-overflow: ellipsis; }
.asset-card strong { font: 700 13px var(--font-display); }
.asset-card code { margin: 5px 0; color: #5eeaff; font-size: 10px; }
.asset-card small { color: #8da9c2; font-size: 10px; }

@media (max-width: 480px) {
  .game-stage { border-color: rgba(75,225,255,.25); box-shadow: 0 18px 48px rgba(0,8,32,.45), inset 0 0 38px rgba(35,185,255,.06); }
  .game-hud { inset: 8px 8px auto; }
}

/* Social infantil: ações claras, sem qualquer campo de conversa livre. */
.social-screen { padding-bottom: calc(var(--nav-space) + 18px); }
.social-form { display: flex; gap: var(--s-2); align-items: stretch; }
.social-input { min-width: 0; flex: 1; padding: 11px 12px; border: 1px solid var(--glass-border); border-radius: var(--r-md); background: var(--glass-surface-soft); color: var(--text-primary); font: inherit; }
.social-input option { color: #141827; }
.social-notice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--glass-surface-soft); }
.social-notifications { border-color: rgba(168,85,247,.3); }
.social-notifications.has-items { background: linear-gradient(145deg, rgba(168,85,247,.13), rgba(61,220,151,.06)); box-shadow: 0 12px 34px rgba(22,10,45,.24); }
.social-section-title { display: flex; align-items: center; gap: 12px; }
.social-section-title__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(168,85,247,.2); font-size: 1.25rem; }
.social-grid { display: grid; gap: var(--s-4); }
.social-friend { overflow: hidden; border: 1px solid rgba(61,220,151,.22); border-radius: var(--r-lg); }
.social-friend__name { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; }
.social-friend__name::-webkit-details-marker { display: none; }
.social-friend__name > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.social-friend__name strong { overflow: hidden; font: 700 1.05rem var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.social-friend__name small { color: var(--text-muted); font-size: .7rem; }
.social-friend__chevron { font-size: 1.6rem; transition: transform var(--t-fast); }
.social-friend[open] .social-friend__chevron { transform: rotate(90deg); }
.social-friend__actions { padding: 0 14px 14px; border-top: 1px solid var(--glass-border); padding-top: 12px; }
.social-notice__actions { margin-left: auto; }
.social-sessions { border-color: rgba(61,220,151,.28); }
.social-history { border-top: 1px solid var(--glass-border); padding-top: 12px; }
.social-history summary { cursor: pointer; color: var(--text-secondary); font: 700 .86rem var(--font-display); }
.social-history__items { margin-top: 10px; }
.social-history__item { display: grid; gap: 3px; padding: 9px 10px; border-radius: var(--r-md); background: var(--glass-surface-soft); }
.player-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgba(61,220,151,.35); border-radius: var(--r-md); background: rgba(61,220,151,.09); }
.player-code strong { font: 800 1.2rem var(--font-display); letter-spacing: .12em; color: #8ff5cd; }
.game-mode-banner { display: flex; width: fit-content; align-items: center; gap: 6px; min-width: 0; margin: 5px 0 0; padding: 4px 8px; border: 1px solid rgba(148,163,184,.3); border-radius: var(--r-pill); background: rgba(148,163,184,.09); color: var(--text-secondary); }
.game-mode-banner.is-friend { border-color: rgba(61,220,151,.42); background: rgba(61,220,151,.1); }
.game-mode-banner__icon { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; background: rgba(148,163,184,.14); font-size: .72rem; }
.game-mode-banner.is-friend .game-mode-banner__icon { background: rgba(61,220,151,.17); }
.coop-room-banner__copy { display: flex; min-width: 0; align-items: baseline; gap: 5px; white-space: nowrap; }
.coop-room-banner__copy strong { overflow: hidden; max-width: 120px; color: var(--text-primary); font: 600 .76rem var(--font-display); text-overflow: ellipsis; }
.coop-room-banner__copy .tiny { color: var(--text-muted); font-size: .66rem; }
.game-mode-banner.is-friend .coop-room-banner__copy .tiny { color: #8ff5cd; }
.result__mode { margin: 2px 0 0; padding: 6px 10px; border-radius: var(--r-pill); color: var(--text-secondary); background: rgba(148,163,184,.1); font: 700 .72rem var(--font-display); }
.result__mode.is-friend { color: #8ff5cd; background: rgba(61,220,151,.1); }
.game-header { min-height: 0; flex: 0 0 auto; }
.game-header__title { min-width: 0; }
.game-header h2 { line-height: 1.08; }
@media (max-width: 480px) {
  :root { --stage-hud: 46px; }
  body.is-minigame .app { padding-inline: var(--s-3); }
  body.is-minigame .topbar { margin-bottom: 4px; }
  .screen--game { gap: 6px; padding-bottom: calc(var(--nav-space) + 6px); }
  .screen--game > .row h2 { font-size: 1.35rem; }
  .screen--game .game-stage { min-height: 0; }

  .screen--game .game-hud { flex-wrap: nowrap; overflow: hidden; }
  /* Os botões (tela cheia, pausa, sair) nunca saem do quadro: quem encolhe são os chips. */
  .screen--game .game-hud__actions { flex-shrink: 0; }
  .screen--game .game-chip { padding: 4px 8px; min-width: 0; flex-shrink: 1; overflow: hidden; white-space: nowrap; }
  .screen--game .game-chip__label { overflow: hidden; text-overflow: ellipsis; }
  .screen--game .game-chip--best { margin-left: auto; }
  .screen--game > .tiny:last-child { flex: 0 0 auto; max-height: 2.5em; overflow: hidden; line-height: 1.25; padding-inline: var(--s-2); }
  .screen--game-fill .game-header h2 { font-size: 1.05rem; }
  .screen--game-fill .coop-room-banner__copy .tiny { display: none; }
}
@media (max-width: 480px) { .social-form { flex-direction: column; } }

/* Salas privadas: alvos de toque grandes, símbolos além de cores e rolagem. */
/*
 * Sala on-line. Sem a barra de moedas e sem o menu, quem cuida da área segura
 * (notch, barra de gestos) é a própria sala. `width: 100%` é essencial: a tela
 * é uma coluna flex e, com `margin: auto`, a sala encolhia até o conteúdo — no
 * iPhone isso deixava o palco da partida bem mais estreito que no modo solo.
 */
body.is-party .nav, body.is-party .topbar { display: none; }
body.is-party .app { padding-top: max(8px, env(safe-area-inset-top)); padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
body.is-party .screen { gap: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.party-room { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; margin: 0 auto; padding: 0 0 12px; }
/* Partida: a sala vira uma coluna do tamanho da tela e o palco fica com tudo que sobra. */
body.is-party-playing { overflow: hidden; }
body.is-party-playing .app { height: var(--app-height, 100dvh); min-height: 0; }
body.is-party-playing .app > .grow { display: flex; min-height: 0; }
body.is-party-playing .screen { min-height: 0; }
.party-room--play { flex: 1 1 auto; min-height: 0; padding-bottom: 0; gap: 6px; }
.party-room--play > .party-content { flex: 1 1 auto; min-height: 0; gap: 6px; }
.party-play { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
/* Barra fina da sala: voltar, jogo e com quem, sair — no lugar de moedas e menu. */
.party-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.party-bar .gbtn { flex: 0 0 auto; min-height: 40px; padding: 6px 12px; }
.party-bar__back { width: 40px; padding: 0 !important; justify-content: center; font-size: 1.5rem; line-height: 1; }
.party-bar__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.party-room .party-bar__title { margin: 0; overflow: hidden; font-size: clamp(1rem, 4.2vw, 1.25rem); text-overflow: ellipsis; white-space: nowrap; }
.party-bar__sub { overflow: hidden; color: var(--text-secondary); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.party-bar__leave { gap: 4px; }
.party-bar__leave[hidden] { display: none; }
.party-rules summary { cursor: pointer; font-weight: 600; }
.party-rules p { margin-top: 8px; }
.party-garden { max-width: 300px; }
.party-plants { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.party-plants button { font-size: .8rem; padding: 8px 4px; min-height: 44px; }
.party-plants [aria-pressed=true] { outline: 2px solid #8ff5cd; }
.party-score { text-align: center; font-weight: 600; }
.party-room h2 { font-size: clamp(1.15rem, 4vw, 1.6rem); }
.party-error:empty { display: none; }
.party-error { color: var(--text-primary); padding: 12px; border: 2px solid #fbbf24; border-radius: 12px; }
.party-choice { display: flex; gap: 12px; align-items: center; min-height: 48px; }
.party-choice input { width: 22px; height: 22px; }
.party-choice > span { display: grid; gap: 2px; }
.party-choice small { color: var(--text-muted); }
.party-invite__intro { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); background: rgba(61,220,151,.1); }
.party-invite__intro > span { font-size: 2rem; }
.party-invite__intro p, .party-invite__rules { margin: 3px 0 0; }
.party-waiting { display: grid; justify-items: center; gap: 7px; padding: 18px 12px; border: 1px solid rgba(82,230,255,.3); border-radius: var(--r-lg); text-align: center; background: radial-gradient(circle at 50% 0,rgba(82,230,255,.12),transparent 70%); }
.party-waiting p { max-width: 430px; margin: 0; color: var(--text-secondary); }
.party-waiting__friends { display: flex; align-items: center; gap: 7px; font-size: 1.8rem; }
.party-waiting__friends i { width: 54px; border-top: 4px dotted var(--brand-cyan); animation: waiting-pulse 1.4s ease-in-out infinite; }
.party-waiting__friends .is-waiting { animation: waiting-pulse 1.4s ease-in-out infinite; }
.party-members { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.party-member { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; font-size: .78rem; padding: 6px 8px; border: 1px solid var(--glass-border); border-radius: 16px; }
.party-member__status { flex: 0 0 auto; font-size: .9rem; line-height: 1; }
.party-member.is-ready { border-color: rgba(61,220,151,.55); background: rgba(61,220,151,.08); }
.party-member.is-waiting { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.07); }
.party-member.is-offline { border-color: rgba(148,163,184,.38); color: var(--text-muted); }
.party-member.is-turn { border-color: #8ff5cd; }
.party-turn { font-weight: 700; min-height: 2em; }
.party-board { display: grid; gap: 6px; width: 100%; max-width: 520px; margin: 0 auto; }
.party-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.party-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.party-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.party-grid-8 { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 2px; }
.party-board button { min-height: 56px; aspect-ratio: 1; padding: 4px; border: 2px solid var(--glass-border); border-radius: 12px; background: #1c2a42; color: #fff; font: inherit; font-size: clamp(.8rem,3vw,1.25rem); cursor: pointer; overflow-wrap: anywhere; }
.party-board button:disabled { cursor: default; opacity: .8; }
.party-board button:focus-visible, .party-directions button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.party-board .is-matched { background: #176343; }
.party-grid-8 button { min-height: 32px; border-radius: 3px; font-size: clamp(.7rem,3vw,1.3rem); }
.party-grid-8 .is-dark { background: #384d6c; }
.party-grid-8 .is-target { border-color: #8ff5cd; background: #176343; }
.party-grid-8 .is-selected { outline: 2px solid #fbbf24; }
.party-board span { display: grid; place-items: center; min-height: 32px; text-align: center; }
.party-snake span { aspect-ratio: 1; border-radius: 3px; background: #17283e; color: #8ff5cd; }
.party-directions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.party-directions button { min-width: 64px; min-height: 48px; border-radius: 12px; font: inherit; }
.party-board .party-pad-0 { background: #166b4a; }
.party-board .party-pad-1 { background: #7338a5; }
.party-board .party-pad-2 { background: #175d92; }
.party-board .party-pad-3 { background: #805b0a; }
/* Arenas on-line: o jogo de verdade dentro da sala, no mesmo palco do modo solo. */
/* Palco da partida on-line: o mesmo do modo solo, com a altura toda da tela. */
.party-arena { flex: 1 1 auto; height: auto; min-height: 0; --stage-hud: 12px; }
.party-arena__status { margin: 0; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(251,191,36,.14); font-weight: 700; text-align: center; font-size: .85rem; }
.party-arena__status[hidden] { display: none; }
/* Largada: "Valendo!" pula no meio do palco e some sem bloquear o toque. */
.party-go { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none; animation: party-go 1.5s var(--ease-liquid) both; }
.party-go strong { padding: 10px 26px; border-radius: var(--r-pill); background: var(--grad-primary); color: #06121c; font: 800 clamp(1.6rem, 9vw, 2.6rem) var(--font-display); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.party-go__burst { font-size: 2.6rem; animation: party-burst 1.5s ease-out both; }
@keyframes party-go { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes party-burst { 0% { transform: translateY(20px) rotate(-20deg); } 30% { transform: translateY(-6px) rotate(10deg); } 100% { transform: translateY(0) rotate(0); } }

/* ---------- Sala: convite, espera e revanche ---------- */
.party-connecting { display: grid; justify-items: center; gap: 8px; padding: 48px 0; color: var(--text-secondary); }
.party-lobby {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 16px; border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--tone-solid, #3ddc97) 45%, transparent);
  background: radial-gradient(120% 60% at 50% 0, color-mix(in srgb, var(--tone-solid, #3ddc97) 22%, transparent), transparent 70%), var(--ui-card);
  box-shadow: var(--ui-shadow), var(--ui-inset); text-align: center; animation: screen-in var(--t-med) var(--ease-liquid) both;
}
.party-lobby--closed { align-items: center; padding-block: 32px; }
.party-lobby--closed p { margin: 0; color: var(--text-secondary); }
.party-lobby__big { font-size: 3rem; }
.party-lobby__hero { display: flex; align-items: center; gap: 12px; text-align: left; }
.party-lobby__icon { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--tone-grad); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 10px 24px -12px var(--tone-solid); animation: party-bob 2.4s ease-in-out infinite; }
.party-lobby__icon svg { width: 44px; height: 44px; }
.party-lobby__icon .game-icon__emoji { font-size: 2.1rem; }
.party-lobby__heading { display: grid; gap: 2px; min-width: 0; }
.party-lobby__heading h3 { margin: 0; font-size: clamp(1.25rem, 5.5vw, 1.6rem); line-height: 1.05; }
.party-lobby__eyebrow { color: var(--tone-solid); font: 700 .74rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.party-lobby__chip { justify-self: start; padding: 3px 10px; border-radius: var(--r-pill); background: var(--ui-chip); border: 1px solid var(--ui-line-strong); color: var(--text-secondary); font-size: .74rem; }
.party-lobby__lead { margin: 0; color: var(--text-secondary); }
.party-lobby__status { display: inline-flex; align-self: center; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ui-chip); border: 1px solid var(--ui-line-strong); font-weight: 700; }
.party-lobby__status.is-waiting { border-color: color-mix(in srgb, var(--tone-solid) 50%, transparent); }
.party-lobby__actions { display: grid; gap: 8px; }
.party-lobby__cta { min-height: 56px; font-size: 1.1rem; animation: party-cta 1.8s ease-in-out infinite; }
.party-lobby__rules { text-align: left; color: var(--text-secondary); }
.party-lobby__rules summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
.party-lobby__rules p { margin: 6px 0 0; }
.party-lobby__safe { margin: 0; color: var(--text-muted); font-size: .74rem; }
.party-dots { display: inline-flex; gap: 3px; }
.party-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-solid, var(--brand-mint)); animation: party-dot 1.2s ease-in-out infinite; }
.party-dots i:nth-child(2) { animation-delay: .15s; }
.party-dots i:nth-child(3) { animation-delay: .3s; }
/* Quem joga: avatares frente a frente (duelo) ou lado a lado (equipe). */
.party-versus { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.party-versus--team { flex-wrap: wrap; }
.party-versus__vs { align-self: center; margin-top: -18px; padding: 6px 10px; border-radius: 12px; background: var(--tone-grad); color: #fff; font: 800 1rem var(--font-display); text-shadow: 0 1px 2px rgba(0,0,0,.3); transform: rotate(-6deg); animation: party-vs 2.2s ease-in-out infinite; }
.party-player { display: grid; justify-items: center; gap: 4px; width: 104px; min-width: 0; }
.party-player__avatar { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; font: 700 1.6rem var(--font-display); background: linear-gradient(145deg, hsl(var(--hue, 160) 70% 58%), hsl(calc(var(--hue, 160) + 40) 72% 46%)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 8px 18px -10px rgba(0,0,0,.7); }
.party-player__pet { display: block; width: 78%; height: 78%; }
.party-player__pet svg { display: block; width: 100%; height: 100%; }
.party-player__avatar--pet { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.35), transparent 60%), linear-gradient(145deg, hsl(var(--hue, 160) 60% 38%), hsl(calc(var(--hue, 160) + 40) 62% 28%)); }
.party-player.is-waiting .party-player__avatar { animation: party-bob 1.6s ease-in-out infinite; opacity: .82; }
.party-player.is-offline .party-player__avatar { filter: grayscale(.9); opacity: .6; }
.party-player.is-ready .party-player__avatar { box-shadow: 0 0 0 3px var(--state-success), 0 0 18px -2px var(--state-success); }
.party-player__check { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--state-success); color: #06231a; font: 800 .8rem var(--font-body); font-style: normal; border: 2px solid var(--ui-card-flat); animation: party-pop .4s var(--ease-liquid) both; }
.party-player__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-player__tag { color: var(--text-secondary); font-size: .74rem; }
.party-player.is-ready .party-player__tag { color: var(--state-success); font-weight: 700; }
.party-result { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ui-chip); border: 1px solid var(--ui-line-strong); }
.party-result strong { font: 700 1.2rem var(--font-display); }
.party-result.is-win { border-color: rgba(255,214,110,.6); background: rgba(255,214,110,.1); }
@keyframes party-bob { 50% { transform: translateY(-4px); } }
@keyframes party-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
@keyframes party-vs { 50% { transform: rotate(6deg) scale(1.08); } }
@keyframes party-pop { from { transform: scale(0); } }
@keyframes party-cta { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone-solid, #3ddc97) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .party-go, .party-go__burst, .party-lobby__icon, .party-player__avatar, .party-dots i, .party-versus__vs, .party-lobby__cta { animation: none !important; }
}
.party-board .is-lit { border: 5px solid white; filter: brightness(1.8); }
.party-threat { font-size: .8rem; }
.party-track button { aspect-ratio: auto; min-height: 110px; }

/* ---------- Tela cheia do jogo ---------- */
/*
 * Modo da página: o palco cobre toda a área útil do aparelho. Cabeçalho de
 * moedas, sino, título e menu flutuante saem de cena. A animação de entrada
 * da tela usa `transform`, e isso prende elementos `position: fixed` dentro
 * dela — por isso é desligada aqui.
 */
body.is-game-fullscreen { overflow: hidden; }
body.is-game-fullscreen .topbar,
body.is-game-fullscreen .nav,
body.is-game-fullscreen .notification-button,
body.is-game-fullscreen .screen--game > .game-header,
body.is-game-fullscreen .screen--game > .tiny { display: none !important; }
body.is-game-fullscreen .screen { animation: none; transform: none; padding: 0; }
body.is-game-fullscreen .app { padding: 0; max-width: none; }
.game-stage.is-fullscreen {
  position: fixed; inset: 0; z-index: 1000;
  width: 100vw; height: 100vh; height: 100dvh; min-height: 0; max-height: none; aspect-ratio: auto;
  border: 0; border-radius: 0; background: #050b18;
}
/* Recortes da tela (notch, barra de gestos): placar e barra do jogo ficam dentro da área segura. */
.game-stage.is-fullscreen .game-hud {
  top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
}
.game-stage.is-fullscreen .fd-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
.game-stage.is-fullscreen .fd-banner { top: calc(52px + env(safe-area-inset-top)); }
.game-stage.is-fullscreen .aa-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
.game-stage.is-fullscreen .aa-score { left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right)); }
/* O aviso das arenas fica logo abaixo do placar (a regra da Defesa acima o levaria para cima dele). */
.game-stage.is-fullscreen .aa-banner { top: calc(var(--aa-arena-top, 96px) + 4px); }
:fullscreen { background: #050b18; }
/*
 * O palco em tela cheia fica em `z-index: 1000`. O resultado (modal), os
 * avisos e o confete moram no `body`, com índices bem menores: sem subir
 * junto, abriam *atrás* do palco e o jogo parecia travado na última cena.
 */
body.is-game-fullscreen .modal-veil { z-index: 1010; }
body.is-game-fullscreen .confetti,
body.is-game-fullscreen .toasts { z-index: 1020; }
.game-hud__fullscreen { display: inline-flex; align-items: center; gap: 5px; }
.game-hud__fullscreen-icon { width: 15px; height: 15px; flex: none; }
/* Os controles da partida são só ícones (o nome continua para leitores de tela). */
.game-hud__fullscreen-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Som desligado: o ícone fica apagado, para se ver de longe que está mudo. */
.game-hud__sound.is-muted { opacity: .62; }

/* ---------- Defesa da Fronteira: palco deitado (barra na lateral) ---------- */
.fd-side .fd-bar {
  left: auto; top: var(--fd-top, 52px); width: min(236px, 36%); justify-content: flex-end; overflow-y: auto; scrollbar-width: none;
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 14px;
  background: linear-gradient(90deg, transparent, rgba(4,11,27,.9) 14%);
}
.fd-side .fd-bar::-webkit-scrollbar { display: none; }
.fd-side .fd-bar__top { flex-direction: column; align-items: stretch; gap: 6px; }
.fd-side .fd-wave-mode { align-self: flex-start; }
.fd-side .fd-bar__powers { justify-content: flex-start; }
.fd-side .fd-bar__row { flex-direction: column; height: auto; }
.fd-side .fd-bar__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.fd-side .fd-card { max-width: none; min-height: 64px; }
.fd-side .fd-next { flex: 0 0 auto; min-height: 50px; }
.fd-side .fd-tower-panel { flex-wrap: wrap; }
.fd-side .fd-action { max-width: none; }
.fd-side .fd-banner { left: calc((100% - min(236px, 36%)) / 2); }

/* ---------- Arena de Artilharia: palco deitado (cartas na lateral) ---------- */
.aa-side .aa-bar {
  left: auto; top: var(--aa-arena-top, 96px); width: min(250px, 34%); justify-content: flex-end; overflow-y: auto; scrollbar-width: none;
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 14px;
  background: linear-gradient(90deg, transparent, rgba(4,11,27,.9) 12%);
}
.aa-side .aa-bar::-webkit-scrollbar { display: none; }
.aa-side .aa-bar__top { flex-wrap: wrap; }
.aa-side .aa-units { flex-basis: 100%; }
.aa-side .aa-hint { white-space: normal; }
.aa-side .aa-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aa-side .aa-card { height: 70px; }
.aa-side .aa-banner { left: calc((100% - min(250px, 34%)) / 2); }

/* ---------- Seletor de tema (Conta) ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-surface-soft);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.theme-option:active { transform: scale(0.96); }
.theme-option:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.theme-option.is-active { color: var(--text-primary); border-color: var(--brand-mint); background: var(--glass-surface-strong); }
.theme-option__swatch {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.15rem;
}
.theme-option--dark .theme-option__swatch { background: linear-gradient(135deg, #0b0f1a, #3b1d6e); }
.theme-option--light .theme-option__swatch { background: linear-gradient(135deg, #eef2ff, #c9f7e3); }
.theme-option--kids .theme-option__swatch { background: conic-gradient(#ff8ec7, #ffd84a, #2bcf6f, #4fdcf2, #b98bff, #ff8ec7); }
.theme-option--kids-night .theme-option__swatch { background: radial-gradient(circle at 70% 30%, #fff7cf 0 18%, transparent 20%), conic-gradient(from 90deg, #3a2a8c, #6a2f8f, #10284d, #1d1650, #3a2a8c); }
.theme-option__name { text-align: center; line-height: 1.15; }

/* ---------- Lugares do pet, por contexto ---------- */
/* Dois botões no alto do palco (🐾 Meu pet e 🎬 Histórias), cada um abre um
   painel com os atalhos daquele contexto — agora com o status de cada um à
   vista ("3/5 segredos", "Seu conto ficou pronto!"). */
.stage-groups {
  position: absolute;
  z-index: 4;
  top: 4px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.stage-group {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 13px 6px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-deep) 55%, var(--glass-surface-strong));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-med) linear;
}
.stage-group::after { content: '▾'; font-size: 0.7rem; opacity: .7; transition: transform var(--t-fast) var(--ease-liquid); }
.stage-group.is-open::after { transform: rotate(180deg); }
.stage-group:active { transform: scale(.95); }
.stage-group:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.stage-group.is-open { border-color: var(--brand-mint); }
.stage-group__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1rem;
  background: color-mix(in srgb, var(--brand-violet) 22%, transparent);
}
.stage-group--stories .stage-group__icon { background: color-mix(in srgb, #f472b6 24%, transparent); }
.stage-group__badge {
  position: absolute;
  top: -5px;
  left: 26px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--state-danger);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-deep);
}
.stage-group__badge[hidden] { display: none; }
.stage-group.has-news .stage-group__icon { animation: group-news 1.8s ease-in-out infinite; }
@keyframes group-news { 50% { transform: scale(1.12) rotate(-6deg); } }

/* O painel do contexto: cai do botão, com os atalhos em ladrilhos. */
.stage-sheet {
  position: absolute;
  z-index: 5;
  top: 52px;
  width: min(100%, 340px);
  padding: 10px;
  border-radius: 22px;
  transform-origin: top left;
  animation: stage-sheet-in .22s var(--ease-liquid) both;
}
.stage-sheet--left { left: 0; }
.stage-sheet--right { right: 0; transform-origin: top right; }
.stage-sheet[hidden] { display: none; }
@keyframes stage-sheet-in { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
.stage-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.pet-link {
  --tone: var(--brand-mint);
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-med) linear;
}
.pet-link:hover { border-color: var(--tone); }
.pet-link:active { transform: scale(.96); }
.pet-link:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.pet-link__icon {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, var(--glass-border));
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-deep) 60%, var(--glass-surface-strong));
}
.pet-link__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pet-link__title { font-family: var(--font-display); font-size: 0.86rem; line-height: 1.15; }
.pet-link__meta {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pet-link.has-news .pet-link__meta { color: var(--state-danger); font-weight: 700; }
.pet-link--house { --tone: var(--brand-mint); }
.pet-link--look { --tone: var(--brand-purple); }
.pet-link--sheet { --tone: #fbbf24; }
.pet-link--lobby { --tone: #22d3ee; }
.pet-link--stories { --tone: #a78bfa; }
.pet-link--tv { --tone: #f472b6; }

/* ---------- As duas aventuras: orbes nos cantos de baixo ---------- */
/* À esquerda o portal das Terras de Laluno (world-portal.css); à direita a
   Conversa com o Pet. Os dois do mesmo tamanho, para o palco ficar simétrico. */
.stage-orb {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 6px;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stage-orb__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.55rem;
  background: radial-gradient(circle at 35% 28%, #f0fff8, #6ee7b7 42%, #0d9488 80%);
  box-shadow: 0 0 18px rgba(61, 220, 151, .55), inset 0 -6px 12px rgba(4, 80, 70, .4);
  transition: transform var(--t-fast) var(--ease-liquid);
}
.stage-orb__core::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(110, 231, 183, .55);
  animation: talk-orb-pulse 2.4s ease-out infinite;
}
@keyframes talk-orb-pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.stage-orb:active .stage-orb__core { transform: scale(.92); }
.stage-orb:focus-visible { outline: none; }
.stage-orb:focus-visible .stage-orb__core { outline: 2px solid var(--brand-mint); outline-offset: 6px; }
.stage-orb__emoji { position: relative; }
.stage-orb__title {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 6px var(--bg-deep), 0 0 2px var(--bg-deep);
}
/* O status vai só para o leitor de tela: no palco, o cadeado diz tudo. */
.stage-orb__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-orb.is-locked .stage-orb__core { filter: saturate(.55); }
.stage-orb.is-locked .stage-orb__core::before { animation: none; opacity: 0; }
.stage-orb.is-locked .stage-orb__core::after {
  content: '🔒';
  position: absolute;
  right: -4px;
  bottom: -2px;
  font-size: .8rem;
}
@media (prefers-reduced-motion: reduce) {
  .stage-orb__core::before, .stage-group.has-news .stage-group__icon, .stage-sheet { animation: none; }
}

/* Balão de humor: centralizado no alto do palco, acima da cabeça do pet. */
.stage-mood {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 0.8rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Telas baixas: HUD e coluna encolhem para o pet continuar grande. */
@media (max-height: 700px) {
  .screen--stage .hud { padding: 8px 10px 6px; gap: 6px; }
  .stage-orb__core { width: 48px; height: 48px; font-size: 1.3rem; }
}
@media (max-height: 600px) {
  .screen--stage .maturity { display: none; }
  .stage-orb__title { display: none; }
  .stage-mood { font-size: 0.7rem; padding: 3px 8px; }
  .sync-chip { min-height: 32px; padding-block: 4px; }
  .notification-button { width: 40px; height: 40px; }
}
/* Telas estreitas: o botão do grupo fica só com o ícone (o nome continua acessível). */
@media (max-width: 339px) {
  .stage-group__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stage-group { padding-right: 10px; }
}

/* Resumo da corrida no fim de jogo */
.run-summary { display: grid; gap: 8px; width: 100%; margin-top: var(--s-2); }
.run-summary__stats { display: flex; justify-content: center; gap: 14px; font: 700 .9rem var(--font-display); }
.run-summary__missions { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; text-align: left; font-size: .78rem; color: var(--text-secondary); }
.run-summary__missions li { display: flex; gap: 6px; }
.run-summary__missions li.is-done { color: var(--text-primary); }
.run-summary__prize {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); text-align: left;
  background: color-mix(in srgb, var(--brand-violet) 18%, transparent); border: 1px solid color-mix(in srgb, var(--brand-mint) 45%, transparent);
  font: 700 .82rem var(--font-display);
}
.run-summary__prize-icon { font-size: 1.6rem; }
.run-summary__prize--stage { background: color-mix(in srgb, var(--brand-mint) 14%, transparent); }
.run-summary__stage { margin: 0; font: 700 .78rem var(--font-display); color: var(--text-secondary); }
.run-summary__collections { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.run-collection {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 46px; padding: 5px 6px; border-radius: 12px; background: rgba(148, 163, 184, .12); font-size: 1.1rem;
}
.run-collection small { font: 700 .62rem var(--font-display); color: var(--text-secondary); }
.run-collection em { position: absolute; top: -6px; right: -6px; padding: 1px 5px; border-radius: 99px; background: var(--brand-mint); color: #06231a; font: 800 .58rem var(--font-display); font-style: normal; }
.run-collection.is-done { background: rgba(61, 220, 151, .18); }

/* ---------- Fim de corrida (cartão de estrelas no palco) ---------- */
/*
 * O cartão é o mesmo das fases da Defesa da Fronteira (td-rating-card.js):
 * fundo escuro fixo, qualquer que seja o tema. Por isso as cores daqui são
 * fixas também, e o resumo da corrida herda o tom claro do cartão.
 */
.run-result .td-rating__card { width: min(380px, 100%); }
.run-result__headline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 14px;
  border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 217, 98, .22);
  animation: td-rating-fade .4s ease-out .3s both;
}
.run-result__points { display: flex; align-items: baseline; gap: 6px; }
.run-result__points .result__score { font: 800 2.1rem/1 var(--font-display); color: #fff; }
.run-result__points span { color: #a9c3e0; font-size: .78rem; font-weight: 700; }
.run-result__side { display: grid; gap: 2px; justify-items: end; text-align: right; }
.run-result__record { color: #cfe3fa; font-size: .76rem; font-weight: 800; }
.run-result__record.is-new { color: #ffd962; }
.run-result__coins { color: #6ee7b7; font-size: .8rem; font-weight: 800; }
.run-result__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none;
  animation: td-rating-fade .4s ease-out .4s both;
}
.run-result__stat {
  display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 7px 4px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); text-align: center;
}
.run-result__stat-icon { font-size: 1rem; }
.run-result__stat strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef7ff; font-size: .8rem; }
.run-result__stat small { color: #a9c3e0; font-size: .62rem; font-weight: 700; }
.run-result .run-summary__missions { margin: 0 0 12px; color: #a9c3e0; }
.run-result .run-summary__missions li.is-done { color: #eef7ff; }
.run-result .run-summary__prize { margin: 0 0 10px; color: #eef7ff; background: rgba(168, 85, 247, .18); border-color: rgba(110, 231, 183, .45); }
.run-result .run-summary__prize--stage { background: rgba(110, 231, 183, .14); }
.run-result .run-summary__collections { margin: 0 0 14px; }
.run-result .run-collection { background: rgba(255, 255, 255, .08); }
.run-result .run-collection small { color: #a9c3e0; }
.run-result .run-collection.is-done { background: rgba(61, 220, 151, .2); }
/* Fora da tela cheia o palco é baixo e o cartão rola: os botões ficam presos
   no pé dele, sempre ao alcance, em vez de sumirem depois das coleções. */
.run-result .td-rating__actions {
  position: sticky; bottom: -18px; z-index: 1; margin: 0 -18px -18px; padding: 12px 18px 18px;
  border-radius: 0 0 22px 22px; background: linear-gradient(180deg, rgba(8, 15, 34, 0), rgba(8, 15, 34, .96) 38%);
}
/* Botões em grade: o principal ("Jogar de novo") ocupa a linha inteira e os
   secundários dividem a de baixo — três lado a lado ficavam espremidos, com o
   texto quebrando letra a letra no celular. Com um só secundário, ele também
   ganha a linha inteira. */
.run-result .td-rating__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.run-result .td-rating__action { min-width: 0; min-height: 48px; padding: 8px 10px; line-height: 1.15; text-wrap: balance; }
.run-result .td-rating__action:first-child,
.run-result .td-rating__action:nth-child(2):last-child { grid-column: 1 / -1; }
@media (max-height: 520px) {
  .run-result .td-rating__card { width: min(620px, 100%); }
  .run-result__headline { margin-bottom: 8px; padding: 6px 12px; }
  .run-result__stats { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .run-result__headline, .run-result__stats { animation: none; }
}

/*
 * iOS instalado: na abertura a viewport pode vir mais baixa que a tela (ver
 * viewport-height.js). O app já cresce até a tela inteira por `--app-height`;
 * os fundos fixos e a navegação são medidos pela viewport curta e precisam
 * descer os mesmos `--viewport-gap` pixels, senão a faixa vazia continua ali.
 * Fica no fim do arquivo para vencer o `inset: 0` de cada um.
 */
.aurora,
.stage-scene,
.modal-veil,
.confetti { bottom: calc(0px - var(--viewport-gap, 0px)); }

/* Campanha das arenas: tipo das suas torres e itens a mais. */
.ar-types { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ar-types__label { color: #cfe0ff; font: 800 .68rem var(--font-display); }
.ar-type {
  display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  color: #fff; font: 800 .74rem var(--font-display);
  border: 2px solid color-mix(in srgb, var(--type, #fff) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--type, #fff) 40%, rgba(12,22,48,.95)), rgba(8,15,34,.95));
}
.ar-type__place { opacity: .7; font-size: .62rem; }
.ar-type__icon { font-size: 1rem; line-height: 1; }
.ar-type.is-waiting { opacity: .6; }
.ar-type:disabled { filter: grayscale(1); opacity: .45; cursor: default; }
.ak-items--many { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak-items--many .ak-item { min-height: 58px; padding: 3px 2px; border-radius: 14px; }
.ak-items--many .ak-item__art { width: 28px; height: 28px; }
.ak-items--many .ak-item__name { font-size: .7rem; }
.ak-items--many .ak-item__status { font-size: .54rem; }
.ak-side .ak-items--many { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Raridades do topo: épico em roxo, mítico em arco-íris translúcido. */
.badge.is-epico { background: linear-gradient(135deg, #7c3aed, #a855f7 60%, #c084fc); border-color: transparent; color: #fff; }
.badge.is-mitico {
  background: linear-gradient(100deg, rgb(255 120 190 / .6), rgb(255 186 120 / .6), rgb(150 255 210 / .6), rgb(120 200 255 / .6), rgb(205 150 255 / .6), rgb(255 120 190 / .6));
  background-size: 200% 100%;
  border: 1px solid rgb(255 255 255 / .6);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 0 12px rgb(205 150 255 / .35);
  backdrop-filter: blur(6px);
  animation: rarity-rainbow 6s linear infinite;
}
@keyframes rarity-rainbow { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .badge.is-mitico { animation: none; } }

/* Ícone personalizado de golpe (painel → Golpes e Pets): ocupa o lugar do emoji. */
.battle-icon { display: inline-block; width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; pointer-events: none; }

/* Idioma no perfil e no topo do jogo. */
.settings-language { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.settings-language__label { display: grid; gap: 2px; }

/* =========================================================
   Barra do topo: carteira à esquerda, status à direita
   Cada item tem o seu tamanho e nenhum encolhe (antes o chip da
   sequência, o atalho do responsável e o idioma eram esmagados e
   cortados). Quem se adapta à largura é a carteira (número curto)
   e o idioma, que nos celulares estreitos fica só em Conta.
   ========================================================= */
.topbar { --dock-size: 42px; --dock-ring: var(--bg-deep); }
html[data-theme='kids'] .topbar { --dock-size: 44px; --dock-ring: var(--kid-paper); }
:root:not([data-theme='kids']) .topbar { --dock-ring: var(--ui-pill); }
.topbar__wallet { flex-shrink: 0; gap: 6px; }
.status-dock { gap: 6px; flex-shrink: 0; }
.status-dock > * { flex-shrink: 0; }
.topbar .wallet { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wallet__value { font-variant-numeric: tabular-nums; }
.wallet__short { display: none; }

/* Botões redondos do status (idioma, responsável, sino): mesmo tamanho. */
html .topbar .status-dock .notification-button,
html .topbar .status-dock .guardian-button,
html .topbar .status-dock__lang { width: var(--dock-size); height: var(--dock-size); padding: 0; justify-content: center; border-radius: 50%; }
html .topbar .status-dock__lang .lang-toggle__globe { display: none; }
html .topbar .status-dock__lang { font-size: .78rem; letter-spacing: .04em; }

/* Sequência: 🔥 e os dias; o ponto de on-line/salvando/off-line vira um selo no canto. */
html .topbar .status-dock .sync-chip { position: relative; height: var(--dock-size); min-height: 0; padding: 0 12px 0 10px; gap: 4px; font-size: .9rem; font-weight: 700; }
html .topbar .status-dock .sync-chip::after {
  position: absolute; top: 3px; left: 3px; order: 0;
  width: 10px; height: 10px; outline: 2px solid var(--dock-ring);
}
html .topbar .status-dock .sync-chip__icon { font-size: 1rem; }

/* Mundo Colorido: idioma e responsável com a mesma pílula branca do sino. */
html[data-theme='kids'] .topbar .status-dock__lang,
html[data-theme='kids'] .topbar .status-dock .guardian-button {
  background: var(--kid-paper);
  border: 3px solid var(--kid-pill-border);
  box-shadow: 0 4px 0 var(--kid-edge);
  color: var(--text-primary);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme='kids'] .topbar .status-dock .guardian-button.has-alerts { border-color: var(--kid-yellow); }
html[data-theme='kids'] .topbar .status-dock .sync-chip { border: 3px solid var(--kid-pill-border); box-shadow: 0 4px 0 var(--kid-edge); }
:root:not([data-theme='kids']) .topbar .status-dock__lang,
:root:not([data-theme='kids']) .topbar .status-dock .guardian-button {
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-pill);
  box-shadow: var(--ui-inset), var(--ui-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Pílulas da carteira sem largura mínima: o número decide o tamanho. */
:root:not([data-theme='kids']) .topbar .wallet { min-width: 0; padding: 4px 13px 4px 9px; }
html[data-theme='kids'] .topbar .wallet { padding: 4px 12px 4px 9px; }

/* Idioma no topo só onde cabe; nos celulares ele fica em Conta → Idioma. */
@media (max-width: 479px) {
  html .topbar .status-dock__lang { display: none; }
}
/* Telas largas: o globo volta ao lado do "PT". */
@media (min-width: 560px) {
  html .topbar .status-dock__lang { width: auto; padding: 0 12px 0 10px; gap: 5px; border-radius: 999px; }
  html .topbar .status-dock__lang .lang-toggle__globe { display: inline; }
}
/* Celulares: tudo um pouco menor. */
@media (max-width: 400px) {
  .topbar { --dock-size: 38px; gap: 6px; }
  html[data-theme='kids'] .topbar { --dock-size: 40px; }
  .status-dock { gap: 5px; }
  :root:not([data-theme='kids']) .topbar .wallet,
  html[data-theme='kids'] .topbar .wallet { padding: 4px 10px 4px 8px; gap: 5px; font-size: .95rem; }
  html .topbar .status-dock .sync-chip { padding: 0 9px 0 8px; font-size: .84rem; }
}
/* Números grandes abreviados (55,1k; o valor inteiro fica no rótulo). */
@media (max-width: 374px) {
  .wallet__value.has-short .wallet__full { display: none; }
  .wallet__value.has-short .wallet__short { display: inline; }
}
/* Celulares bem estreitos (até 359px): a sequência continua com 🔥 e os dias. */
@media (max-width: 359px) {
  .topbar { --dock-size: 36px; gap: 4px; }
  html[data-theme='kids'] .topbar { --dock-size: 36px; }
  .topbar__wallet, .status-dock { gap: 4px; }
  :root:not([data-theme='kids']) .topbar .wallet,
  html[data-theme='kids'] .topbar .wallet { padding: 3px 7px 3px 6px; gap: 4px; font-size: .86rem; }
  html[data-theme='kids'] .topbar .wallet,
  html[data-theme='kids'] .topbar .status-dock .sync-chip,
  html[data-theme='kids'] .topbar .status-dock__lang,
  html[data-theme='kids'] .topbar .status-dock .guardian-button,
  html[data-theme='kids'] .topbar .status-dock .notification-button { border-width: 2px; }
  .topbar .wallet__icon { font-size: .85rem; }
  html .topbar .status-dock .sync-chip { padding: 0 7px; font-size: .8rem; }
  html .topbar .status-dock .sync-chip__text { display: inline; }
  html .topbar .status-dock .sync-chip__extra { display: none; }
}

/* Carteira clicável (topo e HUD): abre a loja de Cristais. */
button.topbar__wallet,
button.hud__wallet {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-pill);
  -webkit-tap-highlight-color: transparent;
}
button.topbar__wallet:focus-visible,
button.hud__wallet:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
button.topbar__wallet:active,
button.hud__wallet:active { transform: scale(0.97); }
.hud__wallet { align-items: center; }
.hud__wallet-plus {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--grad-premium);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  line-height: 1;
  box-shadow: 0 2px 8px -2px rgba(168, 85, 247, 0.7);
}