/* Sonare — design system
   Duas peles sobre os mesmos tokens: "clinica" (entrar, painel, ficha) e
   "kids" (atividades), que cresce tudo, ganha cenario e animacao. */

:root {
  --ink: #12212b;
  --ink-soft: #4a6572;
  --ink-faint: #7d94a1;
  --bg: #f3f7f9;
  --surface: #ffffff;
  --surface-2: #e9f1f4;
  --line: #d3e2e8;

  --brand: #0e7c86;
  --brand-deep: #0a5a62;
  --brand-soft: #d6eff1;
  --coral: #ef6f53;
  --coral-soft: #fde4de;
  --sun: #f5b731;
  --sun-soft: #fdf0d2;
  --grape: #6a5ae0;
  --grape-soft: #e6e3fb;

  --ok: #1d9a6c;
  --ok-soft: #d6f2e6;
  --bad: #d64545;
  --bad-soft: #fbe0e0;

  --ear-l: #2f80ed;
  --ear-l-soft: #dceafc;
  --ear-r: #e2574c;
  --ear-r-soft: #fbe0de;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px;
  --shadow: 0 1px 2px rgba(18,33,43,.06), 0 8px 24px rgba(18,33,43,.08);
  --shadow-lg: 0 2px 4px rgba(18,33,43,.08), 0 18px 48px rgba(18,33,43,.14);
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --ink: #e8f1f4; --ink-soft: #a8bfc9; --ink-faint: #7b929d;
    --bg: #0d1418; --surface: #152029; --surface-2: #1d2c36; --line: #2a3d49;
    --brand: #35b3bd; --brand-deep: #6fd4dc; --brand-soft: #14323a;
    --coral-soft: #3a211c; --sun-soft: #3a2f14; --grape-soft: #241f47;
    --ok-soft: #12332a; --bad-soft: #3a1c1c;
    --ear-l-soft: #14273f; --ear-r-soft: #3a1f1d;
    --warn-ink: #f0d79a; --warn-linha: #5c4a1c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --ink: #e8f1f4; --ink-soft: #a8bfc9; --ink-faint: #7b929d;
  --bg: #0d1418; --surface: #152029; --surface-2: #1d2c36; --line: #2a3d49;
  --brand: #35b3bd; --brand-deep: #6fd4dc; --brand-soft: #14323a;
  --coral-soft: #3a211c; --sun-soft: #3a2f14; --grape-soft: #241f47;
  --ok-soft: #12332a; --bad-soft: #3a1c1c;
  --ear-l-soft: #14273f; --ear-r-soft: #3a1f1d;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); }

.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(700px, 100% - 32px); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 16px); }
.muted { color: var(--ink-soft); }
.tiny { font-size: .82rem; }
.center { text-align: center; }
.hidden { display: none !important; }
.spacer { margin-left: auto; }
.linha-btn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- icones ---------- */
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -4px; }
.ic-lg { width: 26px; height: 26px; }
.ic-hab { width: 34px; height: 34px; flex: none; }
.ic-fig { width: 100%; height: 100%; display: block; }
.ic-per { width: 100%; height: 100%; display: block; }

/* ---------- topo ---------- */
.topbar {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  background: var(--surface); position: sticky; top: 0; z-index: 30;
}
.topbar .wrap { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-name {
  font-weight: 900; font-size: 1.26rem; letter-spacing: -.045em;
  background: linear-gradient(100deg, var(--brand), var(--grape));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca { display: block; flex: none; }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--surface-2); color: var(--ink); transition: transform .12s, filter .15s;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 1.04rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; flex: none;
}
.icon-btn:hover { color: var(--ink); border-color: var(--brand); }
.icon-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---------- cartoes ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 800;
  background: var(--surface-2); color: var(--ink-soft); letter-spacing: .02em;
}
.chip .ic { width: 14px; height: 14px; vertical-align: -2px; }
.chip-brand { background: var(--brand-soft); color: var(--brand-deep); }
.chip-l { background: var(--ear-l-soft); color: var(--ear-l); }
.chip-r { background: var(--ear-r-soft); color: var(--ear-r); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--sun-soft); color: var(--warn-ink, #8a6412); }
.chip-off { background: var(--surface-2); color: var(--ink-faint); }

/* ---------- formularios ---------- */
label { display: block; font-weight: 700; font-size: .87rem; margin-bottom: 6px; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.field + .field { margin-top: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font: inherit; font-weight: 700;
  cursor: pointer; font-size: .86rem;
}
.seg button[aria-pressed=true] { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i {
  width: 44px; height: 25px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .18s; flex: none;
}
.switch i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::after { transform: translateX(19px); }
.switch input:focus-visible + i { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---------- tabelas ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.tbl tbody tr:last-child td { border-bottom: none; }
.scroll-x { overflow-x: auto; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 1.65rem; line-height: 1.1; }
.stat span { font-size: .75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- avisos ---------- */
.note { border-radius: var(--r-md); padding: 14px 16px; font-size: .9rem;
        border: 1px solid var(--line); background: var(--surface-2); }
.note-warn { background: var(--sun-soft); border-color: var(--warn-linha, #e8cd8e); color: var(--warn-ink, #7a5a10); }
.note-brand { background: var(--brand-soft); border-color: transparent; color: var(--brand-deep); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-lg); z-index: 90;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast-erro { background: var(--bad); color: #fff; }

.modal-bg {
  position: fixed; inset: 0; background: rgba(8,18,24,.55); z-index: 80;
  display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity .2s;
  overflow-y: auto;
}
.modal-bg.on { opacity: 1; }
.modal {
  background: var(--surface); border-radius: var(--r-lg); width: min(560px, 100%);
  box-shadow: var(--shadow-lg); transform: translateY(12px); transition: transform .22s;
  max-height: 92vh; display: flex; flex-direction: column;
}
.modal-bg.on .modal { transform: none; }
.modal-top {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.modal-top h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.modal-corpo { padding: 20px; overflow-y: auto; }

/* ---------- lista de clientes ---------- */
.cli {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit; transition: transform .14s, box-shadow .14s;
}
.cli:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.cli:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cli-av {
  width: 46px; height: 46px; border-radius: 15px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep); font-weight: 900; font-size: 1.05rem;
}
.cli-av.crianca { background: var(--sun-soft); color: #8a6412; }
.cli-nome { font-weight: 800; }
.cli-meta { font-size: .8rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- grade de habilidades / atividades ---------- */
.hab-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.hab-ic {
  width: 52px; height: 52px; border-radius: 17px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep);
}
.atv-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.atv {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
  position: relative; overflow: hidden;
}
.atv::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--grape));
}
.atv:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.atv:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.atv h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.atv p { margin: 0; font-size: .83rem; color: var(--ink-soft); }
.atv-pe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.atv.bloq { opacity: .55; }
.atv.bloq::before { background: var(--line); }

/* ================= PELE KIDS ================= */
body.kids { overflow-x: hidden; }
.kids-cena { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kids-frente { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; }

.cena-bg { position: absolute; inset: 0; background: linear-gradient(170deg, var(--ceu1), var(--ceu2)); }
.cena-chao {
  position: absolute; left: -5%; right: -5%; bottom: -8%; height: 34%;
  background: var(--solo); border-radius: 50% 50% 0 0 / 34% 34% 0 0; opacity: .85;
}
.cena-item { position: absolute; animation: flutuar linear infinite; }
@keyframes flutuar {
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(22px,-16px) rotate(6deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.cena-chuva .cena-item { animation: cair linear infinite; }
@keyframes cair {
  0%   { transform: translateY(-120%); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translateY(700%); opacity: 0; }
}
.cena-caverna .cena-item { animation: piscar ease-in-out infinite; }
@keyframes piscar { 0%,100% { opacity: .2; } 50% { opacity: .85; } }
.cena-bg.tocando .cena-item { animation-duration: 5s; }
.cena-bg.acertou { animation: brilho .9s ease; }
.cena-bg.errou { animation: tremer .5s ease; }
@keyframes brilho { 50% { filter: brightness(1.22) saturate(1.2); } }
@keyframes tremer { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* ---------- cenario do mar ---------- */
.cena-mar { background: none; }
.mar-ceu { position: absolute; inset: 0 0 42% 0; background: linear-gradient(175deg, #bdeaf8 0%, #7fd3ee 60%, #5ec4e8 100%); }
.mar-sol {
  position: absolute; right: 12%; top: 12%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle, #fff3b8, #ffd45e);
  box-shadow: 0 0 46px 18px rgba(255,212,94,.45); animation: pulsar 5s ease-in-out infinite;
}
@keyframes pulsar { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.mar-gaivota { position: absolute; width: 46px; opacity: .85; }
.mar-gaivota.g1 { top: 16%; animation: voar 26s linear infinite; }
.mar-gaivota.g2 { top: 26%; width: 32px; animation: voar 34s linear infinite 6s; }
@keyframes voar {
  0%   { left: -12%; transform: translateY(0); }
  50%  { transform: translateY(-22px); }
  100% { left: 108%; transform: translateY(0); }
}
.mar-agua { position: absolute; inset: 58% 0 0 0; background: linear-gradient(180deg, #41b2da, #0f6f96); overflow: hidden; }
.mar-camada { position: absolute; bottom: 0; left: 0; width: 200%; height: 62px; }
.mar-camada.c3 { animation: ondular 15s linear infinite; opacity: .55; bottom: 34px; }
.mar-camada.c2 { animation: ondular 11s linear infinite reverse; opacity: .7; bottom: 18px; }
.mar-camada.c1 { animation: ondular 8s linear infinite; }
@keyframes ondular { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* A onda-alvo: MESMA travessia com ou sem quebra. A espuma so aparece
   no feedback — se aparecesse durante o som, a crianca responderia
   olhando, e a tarefa deixaria de ser auditiva. */
.mar-onda {
  position: absolute; bottom: 30%; left: -34%; width: clamp(180px, 34vw, 300px);
  aspect-ratio: 1.6; opacity: 0; will-change: transform, left;
}
.mar-onda.passando { animation: travessia var(--trav, 1.6s) ease-in-out forwards; }
@keyframes travessia {
  0%   { left: -34%; opacity: 0; transform: translateY(26px) scale(.72); }
  14%  { opacity: 1; }
  48%  { transform: translateY(-14px) scale(1.06); }
  86%  { opacity: 1; }
  100% { left: 96%; opacity: 0; transform: translateY(20px) scale(.78); }
}
.onda-forma { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(10,60,80,.3)); }
.mar-heroi {
  position: absolute; left: 46%; top: 6%; width: 27%; transform: translateX(-50%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.28));
}
.mar-onda.passando .mar-heroi { animation: surfar var(--trav, 1.6s) ease-in-out; }
@keyframes surfar {
  0%,100% { transform: translateX(-50%) rotate(-6deg); }
  50%     { transform: translateX(-50%) rotate(8deg) translateY(-6px); }
}
.onda-espuma { position: absolute; inset: 0; opacity: 0; }
.onda-espuma i {
  position: absolute; border-radius: 50%; background: #fff;
  width: 14px; height: 14px; top: 26%; left: 58%;
}
.onda-espuma i:nth-child(2) { width: 10px; height: 10px; top: 16%; left: 68%; }
.onda-espuma i:nth-child(3) { width: 18px; height: 18px; top: 36%; left: 72%; }
.onda-espuma i:nth-child(4) { width: 8px;  height: 8px;  top: 12%; left: 52%; }
.onda-espuma i:nth-child(5) { width: 12px; height: 12px; top: 46%; left: 64%; }
.onda-espuma i:nth-child(6) { width: 15px; height: 15px; top: 22%; left: 80%; }
.onda-espuma i:nth-child(7) { width: 9px;  height: 9px;  top: 40%; left: 84%; }
.onda-espuma i:nth-child(8) { width: 11px; height: 11px; top: 8%;  left: 62%; }
.mar-onda.quebrando .onda-espuma { animation: espumar 1.1s ease-out .35s; }
.mar-onda.quebrando .onda-crista { animation: desabar 1.1s ease-out .35s; }
@keyframes espumar {
  0%   { opacity: 0; transform: scale(.4); }
  30%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(2.1) translateY(18px); }
}
@keyframes desabar {
  0%   { transform: none; }
  40%  { transform: rotate(16deg) translate(10px, 12px); }
  100% { transform: rotate(28deg) translate(22px, 30px); opacity: .5; }
}
.mar-onda.inteira .onda-forma { animation: deslizar 1.1s ease-out .3s; }
@keyframes deslizar { 50% { transform: translateY(-8px) scale(1.04); } }

/* ---------- barra e miolo kids ---------- */
.kids-bar { padding: 12px 0; }
.kids-bar .wrap { display: flex; align-items: center; gap: 12px; }
.kids-bar .btn { background: rgba(255,255,255,.82); color: #16313d; border-color: transparent; backdrop-filter: blur(6px); }
.progress { height: 11px; border-radius: 999px; background: rgba(255,255,255,.5); overflow: hidden; width: 170px; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .35s; }
.kids-contador {
  background: rgba(255,255,255,.82); color: #16313d; padding: 4px 12px;
  border-radius: 999px; font-weight: 800; font-size: .84rem; backdrop-filter: blur(6px);
}
.kids-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 10px 16px 36px; text-align: center;
}
.kids-cue {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.84); backdrop-filter: blur(8px);
  padding: 12px 22px; border-radius: var(--r-lg); color: #16313d; box-shadow: var(--shadow);
  max-width: min(520px, 94vw);
}
.kids-cue p { margin: 0; font-size: .92rem; font-weight: 700; }
.ear-badge {
  padding: 7px 18px; border-radius: 999px; font-weight: 800; font-size: 1rem;
  display: inline-flex; align-items: center; gap: 9px;
}
.ear-badge .ic { width: 24px; height: 24px; }
.ear-badge svg[viewBox="0 0 48 24"] { width: 44px; height: 22px; }
.ear-badge.l { background: var(--ear-l-soft); color: var(--ear-l); }
.ear-badge.r { background: var(--ear-r-soft); color: var(--ear-r); }
.ear-badge.b { background: var(--brand-soft); color: var(--brand-deep); }

.play-orb {
  width: clamp(112px, 24vw, 158px); aspect-ratio: 1; border-radius: 50%; border: none;
  background: linear-gradient(150deg, #23b6c4, #6a5ae0); color: #fff; cursor: pointer;
  box-shadow: 0 10px 30px rgba(10,50,70,.32); display: grid; place-items: center;
  transition: transform .15s;
}
.play-orb .ic { width: 46%; height: 46%; }
.play-orb:hover { transform: scale(1.05); }
.play-orb:active { transform: scale(.96); }
.play-orb[disabled] { opacity: .55; pointer-events: none; }
.play-orb.pulsando { animation: pulso 1.5s ease-in-out infinite; }
@keyframes pulso {
  0%,100% { box-shadow: 0 10px 30px rgba(10,50,70,.32), 0 0 0 0 rgba(255,255,255,.55); }
  50%     { box-shadow: 0 10px 30px rgba(10,50,70,.32), 0 0 0 24px rgba(255,255,255,0); }
}
.play-orb.tocando { animation: tocar .8s ease-in-out infinite; }
@keyframes tocar { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- respostas ---------- */
.opts { display: grid; gap: 13px; grid-template-columns: repeat(2, 1fr); width: min(620px, 100%); }
@media (min-width: 700px) { .opts { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } }
.opt, .escolha {
  background: rgba(255,255,255,.93); border: 3px solid transparent; border-radius: var(--r-lg);
  padding: 13px 9px 10px; cursor: pointer; font: inherit; color: #16313d;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .13s, border-color .16s, background .16s;
  box-shadow: 0 4px 14px rgba(10,50,70,.16); animation: entrar .3s ease backwards;
}
@keyframes entrar { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.opt:nth-child(2) { animation-delay: .05s; }
.opt:nth-child(3) { animation-delay: .1s; }
.opt:nth-child(4) { animation-delay: .15s; }
.opt:nth-child(5) { animation-delay: .2s; }
.opt:nth-child(6) { animation-delay: .25s; }
.opt-fig { width: clamp(54px, 11vw, 74px); height: clamp(54px, 11vw, 74px); }
.opt .lb, .escolha .lb { font-weight: 800; font-size: .92rem; }
.opt:hover, .escolha:hover { transform: translateY(-4px); border-color: var(--brand); }
.opt:focus-visible, .escolha:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.opt[disabled], .escolha[disabled] { pointer-events: none; }
.opt.marcada { border-color: var(--brand); background: var(--brand-soft); }
.opt.certa, .escolha.certa { border-color: var(--ok); background: #dff6ec; animation: pular .45s ease; }
.opt.errada, .escolha.errada { border-color: var(--bad); background: #fce2e2; animation: negar .4s ease; }
@keyframes pular { 30% { transform: translateY(-12px) scale(1.06); } }
@keyframes negar { 25%,75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }

.escolhas { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; width: min(620px, 100%); }
.escolha { min-width: 128px; padding: 16px 20px; flex: 1 1 128px; }
.escolha-fig { width: clamp(50px, 10vw, 66px); height: clamp(50px, 10vw, 66px); }

.casas { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.casa {
  width: clamp(62px, 14vw, 84px); aspect-ratio: 1; border-radius: var(--r-md);
  border: 3px dashed rgba(255,255,255,.75); background: rgba(255,255,255,.3);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.5rem;
}
.casa svg { width: 74%; height: 74%; }
.casa.cheia { border-style: solid; border-color: var(--brand); background: rgba(255,255,255,.93); }

/* Pilula opaca: o texto fica sobre a cena animada, e so sombra nao
   garante leitura em cima de ceu claro ou mar escuro. */
.feedback { font-size: 1.1rem; font-weight: 800; min-height: 1.6em; }
.feedback.ok, .feedback.bad {
  padding: 8px 20px; border-radius: 999px; box-shadow: var(--shadow);
  animation: entrar .28s ease;
}
.feedback.ok { background: #0d7a52; color: #fff; }
.feedback.bad { background: #a82d2d; color: #fff; }

/* ---------- escolha de personagem ---------- */
.pers { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.pers button {
  background: var(--surface); border: 3px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 8px; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: .86rem;
}
.pers button svg { width: 58px; height: 58px; }
.pers button[aria-pressed=true] { border-color: var(--brand); background: var(--brand-soft); }
.pers button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

footer.site {
  margin-top: 44px; padding: 24px 0 38px; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: .82rem;
}

@media (max-width: 620px) {
  .wrap, .wrap-narrow { width: calc(100% - 26px); }
  .progress { width: 96px; }
  .so-md { display: none; }
  .btn { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}