/* Design system "Arena" do Missão 5.
   Mundo de jogo de celular: fundo roxo de arena, painéis claros com contorno
   grosso, botões 3D que afundam ao tocar e dourado para tudo que é prêmio.
   Regras para TDAH: uma ação principal por tela, texto de estudo sempre em painel
   claro com alto contraste; só o personagem se mexe em loop (Onda 2, decisão do
   Diego), e "reduzir movimento" ou o ajuste do responsável desligam.

   Tokens: as cores "on-bg" valem sobre o fundo roxo; .card/.panel redefinem
   --muted e --link para a versão de painel, então os componentes funcionam
   nos dois lugares sem classe extra. */
:root {
  --arena-1: #2a1663;
  --arena-2: #4a25b8;
  --line: #1a0f33;           /* contorno de tudo */
  --ink: #1a0f33;            /* texto em painel */
  --on-bg: #ffffff;          /* texto sobre a arena */
  --muted: #cbbef7;          /* secundário sobre a arena */
  --link: #ffd84d;
  --panel: #ffffff;
  --panel-2: #efe9ff;
  --panel-line: #d9cffa;
  --gold: #ffc928;
  --gold-dark: #e08e00;
  --blue: #2ec4ff;
  --blue-dark: #1386c9;
  --purple: #7b5cff;
  --purple-light: #9d85ff;   /* roxo com texto escuro (raridade épica): 6,2:1 */
  --trail-locked: #a08ce6;
  --rank-bronze: #d9853b;
  --rank-prata: #cfd8e6;
  --glass: rgba(26, 15, 51, 0.62); /* painel escuro translúcido sobre a arena (texto --on-bg) */   /* trilho ainda não alcançado: >= 3:1 sobre os dois tons da arena */
  --ok: #20b866;
  --ok-dark: #128048;
  --ok-bg: #dcfbe8;
  --review: #ff8a2a;         /* erro = "vamos aprender", nunca vermelho de punição */
  --review-dark: #b35200;
  --review-bg: #ffeddc;
  /* cor de cada matéria (ícone e faixa); laranja fica reservado para "vamos aprender" */
  --subj-portugues: var(--purple);
  --subj-matematica: var(--blue);
  --subj-ciencias: var(--ok);
  --subj-geografia: var(--gold);
  --subj-historia: #c98a4b;
  --subj-ingles: #ff6fb5;
  --font-display: 'Lilita One', 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --font-body: 'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 20px;
  --border: 3px solid var(--line);
  --lift: 0 5px 0 var(--line);
  --tap: 58px;
  color-scheme: light;
}
:root.big-text { font-size: 112.5%; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--on-bg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--arena-1);
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 22px, transparent 22px 44px),
    radial-gradient(120% 70% at 50% 0%, var(--arena-2) 0%, var(--arena-1) 70%);
  background-attachment: fixed;
}
#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  padding-block: 16px 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: 0.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
/* Título sobre a arena ganha a "sombra de figurinha". */
main > h1, main > div > h1, header h1, .hero-title { text-shadow: 0 3px 0 var(--line); }
p { margin: 0; }
b, strong { font-weight: 800; }
/* `hidden` sempre esconde, mesmo com classe que define display (ex.: .stack nas confirmações). */
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

/* ---------- superfícies ---------- */
.card, .panel, .option, .mission-item, .kpi, .gain-tile, .badge-new, .confirm, .subject-tile, .subject-switch, .char-card, .step-card {
  --muted: #5b4f80;
  --link: #5b2bd6;
  color: var(--ink);
}
.card {
  background: var(--panel);
  border: var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 6px 0 var(--line);
}
.panel { background: var(--panel-2); border: 2px solid var(--panel-line); border-radius: 16px; padding: 16px; }

/* ---------- botões 3D ---------- */
button { font: inherit; color: inherit; }
.btn {
  min-height: var(--tap);
  border: var(--border);
  border-radius: 16px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 -5px 0 var(--panel-line), var(--lift);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}
.btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--panel-line), 0 1px 0 var(--line); }
.btn-primary {
  background: var(--gold);
  color: var(--line);
  box-shadow: inset 0 -6px 0 var(--gold-dark), var(--lift);
  text-transform: uppercase;
}
.btn-primary:active { box-shadow: inset 0 -3px 0 var(--gold-dark), 0 1px 0 var(--line); }
.btn-block { width: 100%; }
.btn-big { min-height: 76px; font-size: 1.7rem; border-radius: 20px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; filter: grayscale(0.6); }
.link {
  background: none; border: 0; padding: 10px 4px; color: var(--link); font-weight: 800; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.icon-btn {
  width: 48px; height: 48px; border-radius: 14px; border: var(--border); background: var(--panel); color: var(--ink);
  box-shadow: 0 4px 0 var(--line); cursor: pointer; display: inline-grid; place-items: center;
  font-size: 1.3rem; font-weight: 900; flex: none;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

/* ---------- ficha (moeda) ---------- */
.ficha {
  width: 1.4em; height: 1.4em; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #ffe68a 0 18%, var(--gold) 19% 62%, var(--gold-dark) 63%);
  border: 2px solid var(--line); color: var(--line); font-size: 1em;
}
.ficha::after { content: '★'; font-size: 0.62em; line-height: 1; }
.wallet-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border-radius: 999px;
  background: var(--line); color: var(--gold); border: 3px solid var(--line);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  font-family: var(--font-display); font-size: 1.3rem; cursor: pointer; font-variant-numeric: tabular-nums; min-height: 48px;
}

/* ---------- personagem e rank ---------- */
.avatar-tile {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  border: var(--border); border-radius: 18px; box-shadow: 0 4px 0 var(--line);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
}
.avatar-tile svg { width: 86%; height: 86%; display: block; }
/* arte nova: zoom no rosto (ponto de foco por personagem em js/ui/arena.js) */
.avatar-tile .tile-img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.9); }
.avatar-tile .tile-img.retrato { transform: none; object-position: 50% 30%; }
.art-missing { font-family: var(--font-display); font-size: 2rem; color: var(--on-bg); }
.hello { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hello h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
.rank {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.95rem; background: var(--line); color: #fff; width: fit-content;
}
.rank-gem { width: 16px; height: 16px; margin: 2px; transform: rotate(45deg); border: 2px solid #fff; border-radius: 4px; }
.rank-bronze .rank-gem { background: var(--rank-bronze); }
.rank-prata .rank-gem { background: var(--rank-prata); }
.rank-ouro .rank-gem { background: var(--gold); }
.rank-diamante .rank-gem { background: var(--blue); }

/* ---------- lobby (home) ---------- */
.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mission { display: flex; flex-direction: column; gap: 14px; position: relative; }
.eyebrow {
  align-self: flex-start; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 999px; background: var(--purple); color: #fff; border: 2px solid var(--line);
}
.mission h2 { font-size: 1.9rem; }
.pips { display: flex; gap: 6px; }
.pip { width: 26px; height: 12px; border-radius: 4px; background: var(--panel-2); border: 2px solid var(--line); }
.level { display: flex; flex-direction: column; gap: 8px; }
.bar { height: 22px; border-radius: 999px; background: var(--panel-2); border: var(--border); overflow: hidden; }
.bar > span {
  display: block; height: 100%; border-radius: 999px; min-width: 14px;
  background: linear-gradient(180deg, #8ff0ff 0 35%, var(--blue) 36%); border-right: 3px solid var(--line);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink); border: 2px solid var(--line); font-size: 0.9rem; font-weight: 800;
}
.chip.on { background: var(--gold); }
.chip.off { color: #5b4f80; border-color: #b9addf; border-style: dashed; }
details.card > summary { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '▾'; font-size: 1.1rem; }
details.card[open] > summary::after { content: '▴'; }
.mission-list { display: flex; flex-direction: column; gap: 10px; }
.mission-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: 16px; border: var(--border); background: var(--panel); box-shadow: 0 4px 0 var(--line); cursor: pointer; font-size: 1rem;
}
.mission-item:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.mission-item[disabled] { cursor: not-allowed; background: var(--panel-2); box-shadow: 0 2px 0 var(--line); opacity: 0.75; }
/* etiquetas de estado (missões e matérias); texto escuro para contraste AA sobre as cores */
.tag {
  font-size: 0.85rem; font-family: var(--font-display); padding: 3px 10px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink); border: 2px solid var(--line); white-space: nowrap;
}
.tag.done { background: var(--ok); color: var(--line); }
.tag.review { background: var(--review); color: var(--line); }
.tag.new { background: var(--blue); color: var(--line); }
/* ---------- matérias ---------- */
.subj-portugues { --subj: var(--subj-portugues); }
.subj-matematica { --subj: var(--subj-matematica); }
.subj-ciencias { --subj: var(--subj-ciencias); }
.subj-geografia { --subj: var(--subj-geografia); }
.subj-historia { --subj: var(--subj-historia); }
.subj-ingles { --subj: var(--subj-ingles); }
.subject-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--subj, var(--purple)); border: 2px solid var(--line); font-size: 1.6rem; line-height: 1;
}
.subject-switch {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; min-height: var(--tap);
  border-radius: 16px; border: var(--border); background: var(--panel); box-shadow: 0 4px 0 var(--line); cursor: pointer;
}
.subject-switch .subject-icon { width: 44px; height: 44px; font-size: 1.35rem; }
.subject-switch b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.subject-switch:active, .subject-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.subject-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; min-height: 150px; text-align: left;
  border-radius: var(--radius); border: var(--border); background: var(--panel); box-shadow: 0 5px 0 var(--line); cursor: pointer;
}
.subject-tile b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; overflow-wrap: anywhere; }
.subject-tile[aria-current='true'] { outline: 4px solid var(--gold); outline-offset: 2px; }
.subject-tile:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }
.subject-tile .tag { margin-top: auto; }
.rest { text-align: center; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ---------- jogo ---------- */
.play-head { display: flex; align-items: center; gap: 10px; }
.progress-dots { display: flex; gap: 6px; flex: 1; }
.dot { flex: 1; height: 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); border: 2px solid var(--line); }
.dot.now { background: var(--gold); }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--review); }
.counter { font-family: var(--font-display); font-size: 1.1rem; color: var(--muted); letter-spacing: 0.02em; }
.prompt { font-family: var(--font-body); font-size: 1.3rem; font-weight: 800; line-height: 1.4; white-space: pre-line; }
.options { display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px;
  border-radius: 16px; border: var(--border); background: var(--panel); box-shadow: 0 4px 0 var(--line); cursor: pointer;
  text-align: left; font-size: 1.1rem; font-weight: 700; line-height: 1.35;
}
.option:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.option .letter {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--purple); color: #fff; border: 2px solid var(--line); font-family: var(--font-display); font-size: 1.15rem;
}
.option .mark { margin-left: auto; font-family: var(--font-display); font-size: 1.05rem; flex: none; }
.option:disabled { cursor: default; }
.option.correct { background: var(--ok-bg); }
.option.correct .letter { background: var(--ok); }
.option.correct .mark { color: var(--ok-dark); }
.option.wrong { background: var(--review-bg); }
.option.wrong .letter { background: var(--review); color: var(--line); }
.option.wrong .mark { color: var(--review-dark); }
.option.dim { opacity: 0.5; box-shadow: 0 2px 0 var(--line); }
.hint-box { background: #fff6cc; border: 2px solid var(--line); border-radius: 14px; padding: 12px 16px; font-weight: 700; }
.feedback { display: flex; flex-direction: column; gap: 12px; border-radius: var(--radius); padding: 18px; border: var(--border); box-shadow: 0 5px 0 var(--line); }
.feedback.ok { background: var(--ok-bg); }
.feedback.bad { background: var(--review-bg); }
.feedback .verdict { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.6rem; }
.feedback .verdict > span:first-child {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 2px solid var(--line); color: #fff; flex: none;
}
.feedback.ok .verdict { color: var(--ok-dark); }
.feedback.ok .verdict > span:first-child { background: var(--ok); }
.feedback.bad .verdict { color: var(--review-dark); }
.feedback.bad .verdict > span:first-child { background: var(--review); color: var(--line); }
.feedback .gain { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 1.2rem; color: var(--ink); }
.fb-part { display: flex; flex-direction: column; gap: 2px; }
.fb-part b { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: #5b2bd6; }
.list-q { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 3px dashed var(--panel-line); }
.list-q:last-of-type { border-bottom: 0; }
.confirm { display: flex; flex-direction: column; gap: 12px; }
.sticky-next { position: sticky; bottom: 0; padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--arena-1) 35%); }

/* ---------- resultado ---------- */
.result-hero { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.result-hero .eyebrow { align-self: center; }
.score { font-family: var(--font-display); font-size: 4.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.score small { font-size: 1.6rem; color: var(--muted); }
.stars { display: flex; gap: 6px; align-items: flex-end; justify-content: center; }
.star {
  width: 64px; height: 64px; background: #b9addf; position: relative;
  clip-path: polygon(50% 2%, 63% 36%, 98% 38%, 70% 60%, 80% 96%, 50% 76%, 20% 96%, 30% 60%, 2% 38%, 37% 36%);
}
.star::before { content: ''; position: absolute; inset: 6px; background: var(--panel-2); clip-path: inherit; }
.star.on { background: var(--line); animation: star-in 0.35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 0.15s); }
.star.on::before { background: linear-gradient(180deg, #ffe68a 0 40%, var(--gold) 41%); }
.stars .star:nth-child(2) { width: 80px; height: 80px; }
@keyframes star-in { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.gain-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gain-tile {
  background: var(--panel); border: var(--border); box-shadow: 0 5px 0 var(--line); border-radius: 16px; padding: 10px 18px;
  display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1;
}
.gain-tile .lbl { font-family: var(--font-body); font-size: 0.85rem; font-weight: 800; color: var(--muted); }
.xp-gem {
  width: 1.1em; height: 1.1em; margin: 0 0.1em; transform: rotate(45deg); border-radius: 5px; border: 2px solid var(--line);
  background: linear-gradient(135deg, #8ff0ff, var(--blue)); flex: none;
}
.badge-new {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px;
  background: var(--gold); border: var(--border); box-shadow: 0 5px 0 var(--line); font-weight: 800;
}
.medal {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gold); color: var(--line); border: var(--border); font-size: 1.4rem;
}
.badge-new .medal { background: #fff; }
.review-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 2px solid var(--panel-line); }
.review-item:last-of-type { border-bottom: 0; }
.prompt-inline { white-space: pre-line; }
.result-table td { vertical-align: middle; }
.result-mark { font-weight: 800; white-space: nowrap; }
.section-title { font-size: 1.2rem; }
.btn-stack { flex-direction: column; gap: 2px; padding-block: 10px; line-height: 1.15; }
.btn-sub { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; text-transform: none; letter-spacing: 0; }
.result-mark.ok { color: var(--ok-dark); }
.result-mark.bad { color: var(--review-dark); }

/* ---------- área do responsável (mesma família, mais calma) ---------- */
.parent { font-size: 1rem; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.tab {
  border: var(--border); background: var(--panel); color: var(--ink); padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-display); font-size: 1rem; cursor: pointer; white-space: nowrap; min-height: 44px; box-shadow: 0 3px 0 var(--line);
}
.tab[aria-selected='true'] { background: var(--gold); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--panel); border: var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 4px 0 var(--line); }
.kpi .v { font-family: var(--font-display); font-size: 1.9rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .l { font-size: 0.85rem; color: var(--muted); font-weight: 800; }
.skill-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 2px solid var(--panel-line); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 2px solid var(--line); }
.status.dominada { background: var(--ok); color: #fff; }
.status.ajuda { background: var(--review); color: var(--line); }
.status.aprendendo { background: var(--blue); color: var(--line); }
.status.nova { background: var(--panel-2); color: var(--ink); }
.mini-bar { height: 10px; border-radius: 999px; background: var(--panel-2); border: 2px solid var(--line); overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: var(--ok); }
details summary { cursor: pointer; font-weight: 800; color: var(--link); padding: 4px 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--panel-line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok-dark); font-weight: 800; }
.neg { color: var(--review-dark); font-weight: 800; }
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }
input[type='text'], input[type='number'], input[type='password'], textarea, select {
  font: inherit; font-weight: 700; padding: 12px 14px; border-radius: 14px; border: var(--border); background: #fff; color: var(--ink);
  min-height: 52px; width: 100%; box-shadow: inset 0 3px 0 var(--panel-2);
}
input::placeholder { color: #7d72a0; font-weight: 600; }
textarea { min-height: 100px; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { flex: 1; min-height: 48px; border-radius: 12px; border: var(--border); background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.seg button[aria-pressed='true'] { background: var(--gold); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 300px; margin: 0 auto; width: 100%; }
.pin-pad button { min-height: 64px; border-radius: 16px; border: var(--border); background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--line); font-family: var(--font-display); font-size: 1.7rem; cursor: pointer; }
.pin-pad button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.pin-dots { display: flex; gap: 12px; justify-content: center; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); }
.pin-dots span.on { background: var(--gold); }

/* ---------- criar personagem ---------- */
.hero-title { font-size: 2.6rem; color: var(--gold); text-align: center; }
.hero-sub { text-align: center; color: var(--on-bg); font-weight: 700; }
.preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.preview-name { font-family: var(--font-display); font-size: 1.4rem; }
.avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.avatars button {
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 18px; display: grid; place-items: center;
}
.avatars button .avatar-tile { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.avatars button[aria-pressed='true'] .avatar-tile { outline: 4px solid var(--gold); outline-offset: 2px; transform: translateY(-3px); box-shadow: 0 7px 0 var(--line); }
.avatars button:focus-visible { outline: none; }
.avatars button:focus-visible .avatar-tile { outline: 4px solid var(--blue); outline-offset: 2px; }
.error { color: #ffb37a; font-weight: 800; }
.card .error { color: var(--review-dark); }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--line); color: var(--gold); border: 3px solid var(--gold); padding: 12px 20px; border-radius: 18px;
  font-weight: 800; z-index: 20; width: max-content; max-width: calc(100% - 32px); text-align: center;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- coleção (personagens, Caminho de Troféus, Passe da Prova) ---------- */
/* raridade sempre com o nome escrito; texto escuro para contraste AA sobre as cores */
.rarity {
  display: inline-block; width: fit-content; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--line); color: var(--line);
}
.rar-comum { background: var(--panel-2); }
.rar-rara { background: var(--blue); }
.rar-epica { background: var(--purple-light); }
.rar-lendaria { background: var(--gold); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 1rem; border-radius: 12px; }
.equipped { display: flex; align-items: center; gap: 16px; }
.equipped h2 { font-size: 1.5rem; overflow-wrap: anywhere; }
.char-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.char-card {
  background: var(--panel); border: var(--border); border-radius: 18px;
  box-shadow: 0 4px 0 var(--line); padding: 12px 10px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center; min-width: 0;
}
.char-card b { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; overflow-wrap: anywhere; }
.char-card.locked { background: var(--panel-2); }
.char-card.locked .avatar-tile, .skin-row.locked .avatar-tile { filter: grayscale(1) brightness(0.75); }
.skin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.skin-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--panel-line); }
.skin-row:last-child { border-bottom: 0; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.summary > div + div { border-left: 2px solid var(--panel-line); padding-left: 12px; }
.big-num { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* trilha vertical: os próximos em cima, os alcançados embaixo; trilho azul = progresso */
.trail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.step::before {
  content: ''; position: absolute; left: 20px; top: 24px; width: 8px; height: calc(100% + 14px);
  background: var(--trail-locked); border-left: 2px solid var(--line); border-right: 2px solid var(--line);
}
.step.done::before, .step.now::before { background: var(--blue); }
.step:last-child::before { display: none; }
.node {
  position: relative; z-index: 1; width: 48px; height: 48px; flex: none; border-radius: 50%; border: var(--border);
  display: grid; place-items: center; background: var(--panel-2); color: var(--ink); font-weight: 900; font-size: 1.1rem;
  box-shadow: 0 3px 0 var(--line); overflow: hidden;
}
.step.done .node { background: var(--ok); color: var(--line); }
.step.now .node { background: var(--panel); }
.step.now .node .avatar-tile { border: 0; border-radius: 50%; box-shadow: none; }
.now-pill {
  align-self: center; font-family: var(--font-display); font-size: 1.1rem; padding: 4px 14px; border-radius: 999px;
  background: var(--gold); color: var(--line); border: var(--border); box-shadow: 0 3px 0 var(--line);
}
.step-card {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel-2); border: var(--border); border-radius: 16px; padding: 10px 14px; box-shadow: 0 4px 0 var(--line);
}
.step.done .step-card { background: var(--ok-bg); }
.step-at { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }

/* ---------- Arena 2.0 (Onda 2): Lobby, Modos, Partida, Vitória ---------- */
/* painel escuro translúcido sobre a arena (texto branco) */
.lobby { gap: 14px; }
.lobby-top { display: flex; align-items: center; gap: 10px; }
.avatar-btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 18px; flex: none; }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.who h1 { font-size: 1.35rem; line-height: 1.1; overflow-wrap: anywhere; }
.pills { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.trophy-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; min-height: 44px;
  background: var(--line); color: var(--on-bg); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  font-family: var(--font-display); font-size: 1.15rem; cursor: pointer; font-variant-numeric: tabular-nums;
}
.pills .wallet-pill { font-size: 1.15rem; min-height: 44px; }
.road-bar, .side-btn, .mode-card {
  border: var(--border); background: var(--glass); color: var(--on-bg); box-shadow: 0 4px 0 var(--line);
}
.road-bar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 18px; cursor: pointer; }
.road-bar:active, .side-btn:active, .chip-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.road-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.road-main b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.road-main .bar { position: relative; display: block; height: 24px; }
.road-main .bar em {
  position: absolute; inset: 0; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display); font-size: 0.9rem; color: var(--line);
}
.road-prize { display: flex; align-items: center; gap: 8px; max-width: 46%; }
.road-prize .avatar-tile { border-radius: 12px; }
.road-prize > span:last-child { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.road-prize .small { color: var(--muted); font-size: 0.75rem; }
.road-prize b { font-size: 0.9rem; overflow-wrap: anywhere; }
.road-prize .ficha { font-size: 1.4rem; }
.stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 262px; }
.side { position: absolute; left: 0; top: 4px; display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.side-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; padding: 8px 4px;
  border-radius: 16px; font-family: var(--font-display); font-size: 0.95rem; cursor: pointer;
}
.side-icon { font-size: 1.7rem; line-height: 1; }
.side-count {
  position: absolute; top: -8px; right: -8px; padding: 0 7px; border-radius: 999px; font-size: 0.8rem;
  background: var(--blue); color: var(--line); border: 2px solid var(--line);
}
/* personagem grande: o fundo do recorte se dissolve na arena (mesmo roxo) */
.hero {
  position: relative; display: flex; align-items: flex-end; justify-content: center; height: var(--hero-h);
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 24px;
}
.hero-floor {
  position: absolute; bottom: 0; left: 50%; width: 80%; height: 30px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 240, 255, 0.5), rgba(123, 92, 255, 0.3) 60%, transparent);
}
.hero-img { display: block; height: var(--hero-h); width: auto; max-width: 70vw; object-fit: contain; }
/* recorte provisório: o fundo do recorte se dissolve na arena */
.hero-img.recorte {
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 50%, #000 58%, transparent 100%);
}
.mode-card { display: flex; gap: 12px; align-items: stretch; padding: 10px; border-radius: var(--radius); }
.mode-art { width: 112px; height: 100px; object-fit: cover; flex: none; border-radius: 14px; border: 3px solid var(--line); background: var(--subj, var(--purple)); }
.mode-card .subject-icon { width: 100px; height: 100px; font-size: 2.6rem; }
.mode-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mode-body > .small { color: var(--muted); }
.mode-name { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.mode-mission { font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; }
.mode-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.bonus-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-display); font-size: 0.85rem; background: var(--ok); color: var(--line); border: 2px solid var(--line);
}
.chip-btn {
  min-height: 44px; padding: 4px 18px; border-radius: 999px; border: var(--border); cursor: pointer;
  font-family: var(--font-display); font-size: 0.95rem; background: var(--blue); color: var(--line); box-shadow: 0 3px 0 var(--line);
}
.play-cta { min-height: 84px; font-size: 2.2rem; letter-spacing: 0.06em; }
.play-count { color: var(--muted); margin-top: -6px; }
.bonus-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
/* Modos: cartões com a arte da matéria */
.modes .subject-tile { padding: 0; gap: 0; min-height: 0; overflow: hidden; background: var(--glass); color: var(--on-bg); }
.subject-art { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-bottom: 3px solid var(--line); background: var(--subj); }
.subject-body { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 8px 12px; text-align: center; }
.modes .subject-tile b { color: var(--on-bg); }
.subject-trophies { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.modes .subject-tile .tag { margin-top: 0; }
/* Partida: personagem pequeno no canto */
.play-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.buddy .avatar-tile { border-radius: 14px; }
/* Vitória */
.victory { gap: 14px; }
.ribbon-title {
  align-self: center; text-align: center; font-size: 2.2rem; letter-spacing: 0.03em; color: var(--line); padding: 6px 26px;
  background: linear-gradient(180deg, #ffe68a, var(--gold) 55%, var(--gold-dark)); border: var(--border); border-radius: 14px;
  box-shadow: 0 5px 0 var(--line); transform: rotate(-2deg);
}
.victory-hero { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.victory-score { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.victory-score .star { width: 46px; height: 46px; }
.victory-score .stars .star:nth-child(2) { width: 58px; height: 58px; }
.victory .score { color: var(--on-bg); font-size: 3.6rem; }
.victory-msg { font-weight: 800; max-width: 160px; line-height: 1.25; }
.victory-eyebrow { align-self: center; max-width: 100%; text-align: center; }
.gain-tile { position: relative; }
.gain-icon { font-size: 1.6rem; line-height: 1; }
.bonus-chip.ribbon { position: absolute; bottom: -12px; right: -10px; transform: rotate(-4deg); font-size: 0.75rem; }
.prize-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.prize-chips li {
  padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 0.9rem;
  background: var(--glass); color: var(--on-bg); border: 2px solid var(--gold);
}

/* Personagens se mexem em todas as telas (decisão do Diego, DIRECAO_ARTE.md): só transform/opacity,
   uma animação de personagem por tela. "Reduzir movimento" do aparelho, o ajuste do responsável
   (:root.no-anim) e a aba oculta (:root.oculta) param tudo. */
.anim-char, .tap-wrap { display: inline-block; transform-origin: 50% 92%; }
.anim-char { will-change: transform; }
.anim-char.idle { animation: entrada 0.5s ease-out both, respirar 3.4s ease-in-out 0.5s infinite; }
.anim-char.mini { animation: respirar-mini 4s ease-in-out infinite; }
.anim-char.vitoria { animation: entrada 0.4s ease-out both, salto 0.9s ease-out 0.4s, respirar 3.4s ease-in-out 1.3s infinite; }
.anim-char.feliz { animation: salto 0.8s ease-out, respirar-mini 4s ease-in-out 0.8s infinite; }
.anim-char.pensar { animation: pensar 1s ease-in-out, respirar-mini 4s ease-in-out 1s infinite; }
.tap-wrap.toque { animation: toque 0.6s ease-out; }
@keyframes respirar { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.015); } }
@keyframes respirar-mini { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes entrada { 0% { transform: translateY(26px) scale(0.88); opacity: 0; } 70% { transform: translateY(-5px) scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes salto { 0% { transform: none; } 30% { transform: translateY(-22px) scale(1.05); } 55% { transform: translateY(0) scale(0.98); } 75% { transform: translateY(-7px); } 100% { transform: none; } }
@keyframes pensar { 0%, 100% { transform: none; } 25% { transform: rotate(-7deg) translateX(-3px); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes toque { 0%, 100% { transform: none; } 25% { transform: translateY(-16px) rotate(-4deg); } 55% { transform: translateY(0) rotate(3deg); } 75% { transform: rotate(-2deg); } }
:root.no-anim .anim-char, :root.no-anim .tap-wrap { animation: none !important; }
:root.oculta .anim-char { animation-play-state: paused; }

/* Barra de Especial e Desafio Especial (Partida) */
.especial-bar { display: inline-flex; align-items: center; gap: 4px; }
.especial-icon { font-size: 1.1rem; }
.especial-seg { width: 26px; height: 12px; border-radius: 4px; background: var(--trail-locked); border: 2px solid var(--line); }
.especial-seg.on { background: var(--blue); }
.especial-bar.pronto .especial-seg { background: var(--gold); }
.especial-banner {
  margin: 0; padding: 10px 14px; border-radius: 14px; text-align: center; font-family: var(--font-display); font-size: 1.15rem;
  background: var(--gold); color: var(--line); border: var(--border); box-shadow: 0 4px 0 var(--line); animation: pop 0.22s ease-out;
}
.card.especial-card { border-color: var(--gold-dark); box-shadow: 0 6px 0 var(--line), 0 0 0 4px var(--gold); }
.especial-msg { margin: 0; font-weight: 800; color: var(--ink); }
.boom {
  font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); text-align: center; letter-spacing: 0.04em;
  -webkit-text-stroke: 2px var(--line); text-shadow: 0 4px 0 var(--line); animation: boom 0.5s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes boom { 0% { transform: scale(0.3) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.subject-powers { font-weight: 800; font-size: 0.9rem; }
.mode-powers { color: var(--muted); }

/* Maestria (Onda 3): moldura do retrato pelo nível e chips de nível */
.moldura { display: inline-grid; place-items: center; padding: 3px; border-radius: 22px; flex: none; box-shadow: 0 3px 0 var(--line); }
.moldura .avatar-tile { box-shadow: none; }
/* brilho claro em cima, cor do rank no meio, sombra embaixo */
.moldura-bronze { background: linear-gradient(135deg, var(--panel), var(--rank-bronze) 45%, var(--line) 130%); }
.moldura-prata { background: linear-gradient(135deg, var(--panel), var(--rank-prata) 45%, var(--line) 140%); }
.moldura-ouro { background: linear-gradient(135deg, var(--panel), var(--gold) 45%, var(--gold-dark)); }
.moldura-diamante { background: linear-gradient(135deg, var(--panel), var(--blue) 45%, var(--purple)); }
.who-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mastery-chip {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-family: var(--font-display);
  font-size: 0.85rem; background: var(--glass); color: var(--on-bg); border: 2px solid var(--line);
}
.mastery-level { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.mastery-mini { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: center; }
.mastery-mini .mini-bar { width: 80%; }
.mastery-gain { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); }

/* Arte animada: tira de quadros deslizando em passos (só transform). --n quadros, --dur total,
   --end = posição do último quadro (estados de uma vez param nele). */
.sprite { position: relative; display: block; width: var(--s); height: var(--s); overflow: hidden; }
.sprite-layer { position: absolute; inset: 0; overflow: hidden; }
.sprite-layer.entra { animation: camada-entra 180ms ease-out both; }
.sprite-layer.sai { animation: camada-sai 180ms ease-in both; }
@keyframes camada-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes camada-sai { from { opacity: 1; } to { opacity: 0; } }
.sprite .sprite-pose { display: block; width: 100%; height: 100%; }
.sprite img { display: block; height: 100%; width: auto; max-width: none; will-change: transform; }
.sprite img.loop { animation: sprite-loop var(--dur) steps(var(--n)) infinite; }
.sprite img.once { animation: sprite-once var(--dur) steps(var(--n), jump-none) 1 forwards; }
@keyframes sprite-loop { to { transform: translateX(-100%); } }
@keyframes sprite-once { to { transform: translateX(var(--end)); } }
:root.oculta .sprite img { animation-play-state: paused; }
:root.no-anim .sprite img { animation: none !important; }
/* imagem parada no mesmo lugar do personagem animado (pés em 89% do quadro, como o conversor alinha) */
.sprite .sprite-still { display: block; height: 82%; width: auto; max-width: 100%; margin: 7% auto 0; object-fit: contain; }
.hero.animado { align-items: flex-end; }
/* o quadro tem margem embaixo (~10%): desce o personagem até o chão do palco */
.hero.animado .sprite { margin-bottom: calc(var(--s) * -0.085); }
.buddy-sprite .sprite { border-radius: 14px; background: var(--glass); border: 2px solid var(--line); }

/* ---------- missão por foto (área do responsável) ---------- */
.ai-mark { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 800; color: var(--ink); }
.tag.ia { background: var(--purple-light); color: var(--line); }
.foto-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.foto-thumb { position: relative; }
.foto-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: var(--border); }
.foto-thumb .icon-btn { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; font-size: 1rem; }
.ia-alternativas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ia-alternativas li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--panel-line); background: var(--panel); }
.ia-alternativas li.ia-certa { background: var(--ok-bg); border-color: var(--ok-dark); font-weight: 800; }
.ia-erros { border-color: var(--review-dark); background: var(--review-bg); }
.ia-erros ul { margin: 0; padding-left: 18px; }
.ok-text { color: var(--ok-dark); font-weight: 800; }
.ia-edit textarea { font-family: inherit; font-size: 1rem; min-height: 76px; }
.ia-fieldset { border: 0; margin: 0; padding: 0; }
.ia-opcao { padding: 10px; border-radius: 12px; border: 2px dashed var(--panel-line); }
.ia-certa-radio input { width: 22px; height: 22px; accent-color: var(--ok-dark); }
.ia-contador.over { color: var(--review-dark); font-weight: 800; }
.ia-aprovada { padding: 10px 0; border-bottom: 2px solid var(--panel-line); }

/* Uma animação curta ao aparecer; fora os personagens (acima), nada fica se mexendo. */
@keyframes pop { 0% { transform: scale(0.94); opacity: 0.3; } 70% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } }
.feedback, .result-hero .score, .victory .score, .badge-new { animation: pop 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Aviso sem JavaScript (antes era style inline, que a CSP do servidor bloqueia). */
noscript p { padding: 16px; }