/* ==========================================================================
   Drill Simulados 2.0 — Modo Kids (dono: front-kids)
   Identidade Drill (azul #0C4CA3 + amarelo #FEF102, Rino da logo como mascote),
   alvos de toque >= 64 px, letra grande, 1 pergunta por tela.
   ========================================================================== */

.kids {
  --k-azul: var(--drill-azul);
  --k-azul-escuro: var(--drill-azul-900);
  --k-amarelo: var(--drill-amarelo);
  --k-amarelo-borda: #C9BD00;
  --k-ceu: #E6F0FF;
  --k-ceu-2: #F7FBFF;
  --k-card: #FFFFFF;
  --k-text: #10233F;
  --k-muted: #4A5D7A;
  --k-line: #C9D8F0;
  --k-ok: #0A7A3D;
  --k-ok-bg: #E2F6E9;
  --k-chosen: #B45309;
  --k-chosen-bg: #FFF4E0;
  --k-s1: #0C4CA3;
  --k-s2: #E0A800;
  --k-s3: #12863F;
  --k-s4: #D9480F;
  --k-r: 22px;
  --k-fs-q: calc(1.375rem * var(--fs-scale));
  --k-fs-opt: calc(1.125rem * var(--fs-scale));
  color: var(--k-text);
}
:root[data-theme="dark"] .kids {
  --k-ceu: #0B1A3A; --k-ceu-2: #0E2048; --k-card: #142a57; --k-text: #F1F5FF; --k-muted: #A9BCE0;
  --k-line: #2A4580; --k-ok: #4ADE80; --k-ok-bg: #0F3A25; --k-chosen: #FDBA74; --k-chosen-bg: #3A2410;
  --k-s1: #6FA0FF; --k-s2: #FFD43B; --k-s3: #4ADE80; --k-s4: #FF8A4C;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .kids {
    --k-ceu: #0B1A3A; --k-ceu-2: #0E2048; --k-card: #142a57; --k-text: #F1F5FF; --k-muted: #A9BCE0;
    --k-line: #2A4580; --k-ok: #4ADE80; --k-ok-bg: #0F3A25; --k-chosen: #FDBA74; --k-chosen-bg: #3A2410;
    --k-s1: #6FA0FF; --k-s2: #FFD43B; --k-s3: #4ADE80; --k-s4: #FF8A4C;
  }
}

.kids-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

/* ---------------------------------------------------------------- mascote */
.kids-mascot {
  display: inline-block; flex: none; border-radius: 50%;
  background: #0C4CA3 url(../img/logo-drill.jpg) 56% 7% / 150% auto no-repeat;
  box-shadow: 0 0 0 4px var(--drill-amarelo), 0 6px 16px rgba(6, 31, 69, .25);
}
.kids-mascot--md { width: 56px; height: 56px; }
.kids-mascot--lg { width: 80px; height: 80px; }
.kids-mascot--xl { width: 120px; height: 120px; box-shadow: 0 0 0 6px var(--drill-amarelo), 0 10px 28px rgba(6, 31, 69, .3); }
.kids-bounce { animation: kids-bounce 1.6s var(--ease) infinite; }
@keyframes kids-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-8px) rotate(-3deg); } 60% { transform: translateY(-4px) rotate(2deg); } }

/* ---------------------------------------------------------------- entrada (Início / Estudar) */
.kids-entry {
  display: flex; align-items: center; gap: var(--sp-4); min-height: 88px;
  padding: var(--sp-4); margin: var(--sp-3) 0; border-radius: 20px; text-decoration: none;
  background: linear-gradient(120deg, var(--drill-amarelo) 0%, #FFF86B 55%, #FFFFFF 140%);
  color: var(--drill-azul-900); box-shadow: inset 0 -4px 0 var(--k-amarelo-borda, #C9BD00), var(--sh-1);
  border: 3px solid var(--drill-azul);
}
.kids-entry:hover { filter: brightness(1.02); }
.kids-entry:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #C9BD00; }
.kids-entry__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kids-entry__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.15rem, 5.4vw, 1.5rem); white-space: nowrap; line-height: 1.1; color: var(--drill-azul); }
.kids-entry__sub { font-size: var(--fs-sm); font-weight: 600; color: var(--drill-azul-900); }
.kids-entry__go { width: 48px; height: 48px; border-radius: 50%; background: var(--drill-azul); color: #fff; display: grid; place-items: center; font-size: 24px; flex: none; }
.kids-entry-mini__icon { color: var(--drill-azul); font-size: 24px; }
:root[data-theme="dark"] .kids-entry-mini__icon { color: var(--drill-amarelo); }

/* ---------------------------------------------------------------- página (fundo "céu") */
.main:has(> .kids-play), .main:has(> .kids-hub) { background: linear-gradient(180deg, var(--k-ceu-2, #F7FBFF) 0%, var(--k-ceu, #E6F0FF) 100%); }
.main:has(> .kids-play) { min-height: 100vh; min-height: 100dvh; }
.screen.kids-play { max-width: 640px; padding: 0 var(--sp-4) calc(112px + var(--safe-b)); background: linear-gradient(180deg, var(--k-ceu-2) 0%, var(--k-ceu) 100%); min-height: 100vh; min-height: 100dvh; }
.screen.kids-hub { background: transparent; }
.kids-play--intro, .kids-play--end { padding-bottom: calc(var(--sp-6) + var(--safe-b)); }

/* ---------------------------------------------------------------- barra do topo */
.kids-top {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: calc(var(--sp-2) + var(--safe-t)) 0 var(--sp-2); min-height: 64px;
  position: sticky; top: 0; z-index: 5; background: var(--k-ceu-2);
}
.kids-top__title { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 900; color: var(--k-azul); font-size: var(--fs-lg); }
:root[data-theme="dark"] .kids-top__title { color: var(--drill-amarelo); }
.kids-top__sp { width: 48px; flex: none; }
.kids-iconbtn {
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--k-line); background: var(--k-card);
  color: var(--k-text); display: grid; place-items: center; font-size: 22px; cursor: pointer; flex: none; text-decoration: none;
}
.kids-dots { flex: 1; display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: nowrap; min-width: 0; }
.kids-dot {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--k-line); background: var(--k-card);
  display: grid; place-items: center; flex: 0 1 16px; font-size: 14px; color: var(--k-amarelo-borda);
  transition: transform var(--dur) var(--ease);
}
.kids-dot.is-now { border-color: var(--k-azul); box-shadow: 0 0 0 3px rgba(12, 76, 163, .2); transform: scale(1.2); }
.kids-dot.is-done { background: var(--k-s1); border-color: var(--k-s1); }
.kids-dot.is-ok { background: transparent; border-color: transparent; color: #F2C200; font-size: 20px; transform: scale(1.15); }
.kids-dot.is-ok .kids-svg { filter: drop-shadow(0 1px 0 #B8860B); }
.kids-auto {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border-radius: 999px;
  border: 3px solid var(--k-line); background: var(--k-card); color: var(--k-text); font: inherit; font-weight: 800;
  font-size: var(--fs-sm); cursor: pointer; flex: none;
}
.kids-auto .kids-svg { font-size: 20px; }
.kids-auto[aria-pressed="true"] { background: var(--k-azul); border-color: var(--k-azul); color: #fff; }
@media (max-width: 380px) { .kids-auto span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kids-auto { width: 48px; padding: 0; justify-content: center; } }

/* ---------------------------------------------------------------- pergunta */
.kids-stage { display: flex; flex-direction: column; gap: var(--sp-3); }
.kids-q__card {
  background: var(--k-card); border-radius: var(--k-r); padding: var(--sp-4); border: 3px solid var(--k-azul);
  box-shadow: 0 6px 0 rgba(12, 76, 163, .18); transition: box-shadow var(--dur) var(--ease);
}
:root[data-theme="dark"] .kids-q__card { border-color: var(--k-s1); }
.kids-q__meta { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--k-muted); }
.kids-q__row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.kids-q__text { flex: 1; margin: 0; font-size: var(--k-fs-q); line-height: 1.35; font-weight: 800; outline: none; }
.kids-q__text:focus-visible { outline: 3px dashed var(--k-azul); outline-offset: 4px; border-radius: 6px; }

/* alto-falante */
.kids-speak {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 3px solid var(--k-azul); background: var(--k-card); color: var(--k-azul); font-size: 24px; padding: 0;
  transition: transform var(--dur) var(--ease), background var(--dur);
}
:root[data-theme="dark"] .kids-speak { color: var(--drill-amarelo); border-color: var(--drill-amarelo); }
.kids-speak--big {
  width: 64px; height: 64px; font-size: 32px; background: var(--drill-amarelo); color: var(--drill-azul-900);
  border-color: var(--k-amarelo-borda); box-shadow: inset 0 -4px 0 var(--k-amarelo-borda);
}
:root[data-theme="dark"] .kids-speak--big { color: var(--drill-azul-900); border-color: var(--k-amarelo-borda); }
.kids-speak:active { transform: scale(.94); }
.kids-speak__off { display: none; }
.kids-speak.is-playing .kids-speak__on { display: none; }
.kids-speak.is-playing .kids-speak__off { display: inline-block; }
.kids-speak.is-playing { animation: kids-pulse 1.1s ease-in-out infinite; }
@keyframes kids-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(254, 241, 2, .9); } 50% { box-shadow: 0 0 0 10px rgba(254, 241, 2, 0); } }

/* alternativas */
.kids-opts { display: flex; flex-direction: column; gap: var(--sp-3); }
.kids-opt { display: flex; gap: var(--sp-2); align-items: center; border-radius: 20px; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.kids-opt__btn {
  flex: 1; min-width: 0; min-height: 72px; display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 14px; border-radius: 20px; border: 3px solid var(--k-line); background: var(--k-card); color: var(--k-text);
  font: inherit; font-size: var(--k-fs-opt); line-height: 1.3; font-weight: 700; text-align: left; cursor: pointer;
  box-shadow: 0 4px 0 var(--k-line); transition: transform 120ms var(--ease), box-shadow 120ms, border-color var(--dur), background var(--dur);
}
.kids-opt__btn:hover:not(:disabled) { border-color: var(--k-azul); }
.kids-opt__btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-line); }
.kids-opt__btn:disabled { cursor: default; }
.kids-opt__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kids-opt__mark { width: 32px; height: 32px; flex: none; display: none; place-items: center; border-radius: 50%; background: var(--k-ok); color: #fff; font-size: 20px; }
.kids-shape { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 26px; background: var(--k-ceu); }
.kids-shape--1 { color: var(--k-s1); }
.kids-shape--2 { color: var(--k-s2); }
.kids-shape--3 { color: var(--k-s3); }
.kids-shape--4 { color: var(--k-s4); }

/* lendo agora (narração) */
.kids-opt.is-reading .kids-opt__btn, .kids-q__card.is-reading { border-color: var(--drill-amarelo); box-shadow: 0 0 0 5px rgba(254, 241, 2, .75), 0 4px 0 var(--k-amarelo-borda); }
.kids-opt.is-reading { transform: scale(1.02); }
.kids-fb__exp.is-reading { box-shadow: 0 0 0 4px rgba(254, 241, 2, .75); }

/* depois de responder */
.kids-opt.is-right .kids-opt__btn { border-color: var(--k-ok); background: var(--k-ok-bg); box-shadow: 0 4px 0 var(--k-ok); }
.kids-opt.is-right .kids-opt__mark { display: grid; }
.kids-opt.is-right { animation: kids-pop 420ms var(--ease); }
.kids-opt.is-chosen .kids-opt__btn { border-color: var(--k-chosen); background: var(--k-chosen-bg); box-shadow: 0 4px 0 var(--k-chosen); border-style: dashed; }
.kids-opt.is-dim .kids-opt__btn { opacity: .5; box-shadow: none; }
@keyframes kids-pop { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- feedback */
.kids-fb-wrap:empty { display: none; }
.kids-fb { position: relative; border-radius: var(--k-r); padding: var(--sp-4); overflow: hidden; }
.kids-fb--ok { background: #FFFBD1; border: 3px solid var(--k-amarelo-borda); color: #2B2600; }
.kids-fb--learn { background: var(--k-card); border: 3px solid var(--k-s1); }
:root[data-theme="dark"] .kids-fb--ok { background: #3A3505; color: #FFF9B0; border-color: #8A8100; }
.kids-fb__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: calc(1.5rem * var(--fs-scale)); line-height: 1.15; display: flex; align-items: center; gap: 8px; outline: none; }
.kids-fb--ok .kids-fb__title { color: var(--drill-azul); }
:root[data-theme="dark"] .kids-fb--ok .kids-fb__title { color: var(--drill-amarelo); }
.kids-fb__star { color: #F2C200; font-size: 1.3em; filter: drop-shadow(0 2px 0 #B8860B); }
.kids-fb__right { margin: var(--sp-2) 0 0; font-size: var(--fs-md); }
.kids-fb__ans { display: inline-block; margin-top: 4px; font-weight: 800; font-size: var(--k-fs-opt); color: var(--k-ok); }
.kids-fb__exp { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 16px; background: rgba(12, 76, 163, .07); }
:root[data-theme="dark"] .kids-fb__exp { background: rgba(255, 255, 255, .06); }
.kids-fb__exp p { flex: 1; margin: 0; font-size: calc(1.0625rem * var(--fs-scale)); line-height: 1.5; }
.kids-burst { position: absolute; inset: 0; pointer-events: none; }
.kids-burst__s { position: absolute; color: #F2C200; font-size: 22px; opacity: 0; animation: kids-star 1.1s var(--ease) forwards; }
.kids-burst__s--1 { left: 70%; top: 18px; animation-delay: 0ms; }
.kids-burst__s--2 { left: 82%; top: 40px; font-size: 16px; animation-delay: 90ms; }
.kids-burst__s--3 { left: 90%; top: 10px; font-size: 28px; animation-delay: 160ms; }
.kids-burst__s--4 { left: 60%; top: 44px; font-size: 14px; animation-delay: 230ms; }
.kids-burst__s--5 { left: 78%; top: 6px; font-size: 12px; animation-delay: 300ms; }
@keyframes kids-star { 0% { opacity: 0; transform: translateY(14px) scale(.3) rotate(0); } 40% { opacity: 1; transform: translateY(-4px) scale(1.15) rotate(25deg); } 100% { opacity: .9; transform: translateY(-10px) scale(1) rotate(40deg); } }

/* ---------------------------------------------------------------- botões grandes */
.kids-btn {
  --kb-bg: var(--drill-amarelo); --kb-fg: var(--drill-azul-900); --kb-edge: var(--k-amarelo-borda, #C9BD00);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 28px;
  border-radius: 999px; border: 0; background: var(--kb-bg); color: var(--kb-fg); font: inherit;
  font-family: var(--font-display); font-weight: 900; font-size: calc(1.25rem * var(--fs-scale)); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 -5px 0 var(--kb-edge), 0 6px 16px rgba(6, 31, 69, .18); transition: transform 120ms var(--ease), box-shadow 120ms;
}
.kids-btn .kids-svg { font-size: 1.2em; }
.kids-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--kb-edge), 0 2px 6px rgba(6, 31, 69, .18); }
.kids-btn:disabled { opacity: .6; cursor: progress; }
.kids-btn--light { --kb-bg: var(--k-card); --kb-fg: var(--k-azul); --kb-edge: var(--k-line); border: 3px solid var(--k-line); font-size: calc(1.0625rem * var(--fs-scale)); }
:root[data-theme="dark"] .kids-btn--light { --kb-fg: #fff; }
.kids-btn--block { display: flex; width: 100%; }
.kids-btn--xl { min-height: 76px; font-size: calc(1.5rem * var(--fs-scale)); padding: 0 40px; }
.kids-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; color: var(--link); font-weight: 700; }
.kids-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--k-ceu) 35%); display: flex; justify-content: center;
}
.kids-bottom > .kids-btn { max-width: 608px; animation: kids-rise 260ms var(--ease); }
.kids-bottom[hidden] { display: none; }
@keyframes kids-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- abertura / final / carregando */
.kids-intro, .kids-end, .kids-loading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding-top: var(--sp-4); }
.kids-loading { min-height: 70vh; justify-content: center; font-weight: 800; color: var(--k-muted); font-size: var(--fs-lg); }
.kids-intro__title, .kids-end__title { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-weight: 900; font-size: calc(2rem * var(--fs-scale)); line-height: 1.1; color: var(--k-azul); outline: none; }
:root[data-theme="dark"] .kids-intro__title, :root[data-theme="dark"] .kids-end__title { color: var(--drill-amarelo); }
.kids-intro__belt { max-width: 100%; }
.kids-intro__sub { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--k-muted); }
.kids-intro .kids-btn--xl { margin: var(--sp-2) 0; }
.kids-intro .kids-card, .kids-end__actions { width: 100%; }
.kids-pill-line { margin: 0; }
.kids-end__score { margin: 0; font-size: var(--fs-xl); }
.kids-end__text { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--k-muted); max-width: 30ch; }
.kids-end__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); align-items: stretch; }
.kids-stars { display: flex; gap: var(--sp-2); justify-content: center; font-size: 64px; color: var(--k-line); }
.kids-stars__s { display: inline-block; }
.kids-stars__s.is-on { color: #F2C200; filter: drop-shadow(0 3px 0 #B8860B); animation: kids-starpop 600ms var(--ease) both; animation-delay: var(--d, 0ms); }
.kids-stars__s:nth-child(2) { transform: translateY(-14px); font-size: 1.2em; }
.kids-stars__s:nth-child(2).is-on { animation-name: kids-starpop2; }
@keyframes kids-starpop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes kids-starpop2 { 0% { transform: translateY(-14px) scale(0) rotate(-40deg); } 70% { transform: translateY(-14px) scale(1.25) rotate(8deg); } 100% { transform: translateY(-14px) scale(1) rotate(0); } }

/* ---------------------------------------------------------------- cartões, etiquetas, interruptores */
.kids-card { background: var(--k-card); border: 2px solid var(--k-line); border-radius: 20px; padding: var(--sp-4); text-align: left; }
.kids-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 800;
  background: var(--drill-azul-50); color: var(--drill-azul);
}
:root[data-theme="dark"] .kids-tag { color: #CFE0FF; }
.kids-bank .kids-tag { font-size: var(--fs-xs); padding: 3px 10px; white-space: nowrap; }
.kids-tag--alvo { background: var(--drill-amarelo); color: var(--drill-azul-900); }
.kids-tag--ok { background: var(--k-ok-bg); color: var(--k-ok); }
.kids-tag--muted { background: var(--surface-2); color: var(--text-muted); }
.kids-off__text { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.45; }
.kids-off__text--ok { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--k-ok); }
.kids-off__text--ok .kids-svg { font-size: 22px; }
.kids-off__muted { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--k-muted); }
.kids-meter { height: 12px; border-radius: 999px; background: var(--k-ceu); overflow: hidden; margin-top: var(--sp-3); }
.kids-meter span { display: block; height: 100%; width: 0; background: var(--k-azul); border-radius: inherit; transition: width 300ms var(--ease); }

.kids-switch {
  display: flex; width: 100%; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kids-switch + .kids-switch { border-top: 1px solid var(--k-line); }
.kids-switch__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kids-switch__title { font-weight: 800; font-size: var(--fs-md); }
.kids-switch__sub { font-size: var(--fs-sm); color: var(--k-muted); }
.kids-switch__track { width: 56px; height: 32px; border-radius: 999px; background: var(--k-line); position: relative; flex: none; transition: background var(--dur); }
.kids-switch__thumb { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease); }
.kids-switch[aria-checked="true"] .kids-switch__track { background: var(--k-azul); }
.kids-switch[aria-checked="true"] .kids-switch__thumb { transform: translateX(24px); background: var(--drill-amarelo); }

/* ---------------------------------------------------------------- hub (#/kids) */
.kids-hello { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-4); }
.kids-hello__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: calc(1.75rem * var(--fs-scale)); color: var(--k-azul); line-height: 1.1; }
:root[data-theme="dark"] .kids-hello__title { color: var(--drill-amarelo); }
.kids-hello__text { margin: 4px 0 0; font-size: var(--fs-md); font-weight: 600; color: var(--k-muted); }
.kids-h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); color: var(--k-text); }
.kids-banks { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .kids-banks { grid-template-columns: 1fr 1fr; } }
.kids-bank {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 88px; padding: var(--sp-3) var(--sp-4);
  border-radius: 20px; border: 3px solid var(--k-line); background: var(--k-card); color: var(--k-text); text-decoration: none;
  box-shadow: 0 5px 0 var(--k-line); transition: transform 120ms var(--ease), box-shadow 120ms, border-color var(--dur);
}
.kids-bank:hover { border-color: var(--k-azul); }
.kids-bank:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--k-line); }
.kids-bank.is-featured { border-color: var(--k-azul); box-shadow: 0 5px 0 var(--k-azul); }
.kids-bank__belt { flex: none; display: grid; place-items: center; width: 68px; }
.kids-bank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kids-bank__title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); line-height: 1.15; }
.kids-bank__sub { font-size: var(--fs-sm); font-weight: 600; color: var(--k-muted); }
.kids-bank__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kids-bank__go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--drill-amarelo); color: var(--drill-azul-900); font-size: 22px; box-shadow: inset 0 -3px 0 var(--k-amarelo-borda); }
.kids-bank .belt { --belt-w: 64px; --belt-h: 16px; }
.kids-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--k-muted); line-height: 1.5; }

/* ---------------------------------------------------------------- foco visível */
.kids :is(button, a):focus-visible, .kids-entry:focus-visible {
  outline: 4px solid var(--drill-amarelo); outline-offset: 3px; box-shadow: 0 0 0 7px var(--drill-azul);
}

/* ---------------------------------------------------------------- telas baixas (360x640) */
@media (max-height: 680px) {
  .kids-top { min-height: 56px; padding-top: calc(4px + var(--safe-t)); padding-bottom: 4px; }
  .kids-q__card { padding: var(--sp-3); }
  .kids-stage, .kids-opts { gap: 10px; }
  .kids-opt__btn { min-height: 64px; padding: 8px 12px; }
  .kids-shape { width: 36px; height: 36px; font-size: 22px; }
  .kids-mascot--xl { width: 96px; height: 96px; }
}

/* ---------------------------------------------------------------- menos movimento */
@media (prefers-reduced-motion: reduce) {
  .kids-bounce, .kids-speak.is-playing, .kids-opt.is-right, .kids-bottom > .kids-btn, .kids-stars__s.is-on { animation: none !important; }
  .kids-burst { display: none; }
  .kids-opt.is-reading { transform: none; }
  .kids-stars__s:nth-child(2).is-on { transform: translateY(-14px); }
}