/* 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); }

/* touch-action: manipulation = rolar e pinçar continuam, mas dois toques
   rápidos NÃO dão zoom — no jogo a criança toca várias vezes seguidas e a
   tela aproximava. Vale para a página toda; sem realce azul de toque. */
html, body { touch-action: manipulation; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, .btn, .opt, .escolha, .play-orb, .seg button, .pers-op, .atv, .casas .casa {
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
svg, img, video { max-width: 100%; }
.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 de botões — a ÚNICA forma de agrupar botões no site.
   Ordem fixa: o botão principal vem primeiro, os secundários depois.
   Em tela larga ficam lado a lado, alinhados à esquerda e com a mesma
   altura; em tela estreita viram uma coluna de botões de largura cheia,
   na mesma ordem. Nunca um lado empilhado e o outro em linha. */
.linha-btn { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 18px; }
.linha-btn > .btn { flex: 0 1 auto; }
.linha-btn-cheia > .btn { flex: 1 1 160px; }
.linha-btn-centro { justify-content: center; }
/* cabeçalho de página: título à esquerda, ação à direita */
.pag-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pag-cab > .pag-titulo { flex: 1 1 240px; min-width: 0; }
.pag-cab h1 { margin: 0; }
.pag-cab p { margin: 0; }

/* ---------- 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; }
.marca img { display: block; height: 100%; width: auto; }
.marca-br { display: none !important; }
.brand-name { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-theme="dark"] .marca-az { display: none; }
:root[data-theme="dark"] .marca-br { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca-az { display: none; }
  :root:not([data-theme="light"]) .marca-br { display: block !important; }
}

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; text-align: center; line-height: 1.2; max-width: 100%;
  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; min-height: 40px; 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(--brand); }
.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; -webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px; }
.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; touch-action: pan-y; }   /* sem pinca/zoom na tela do jogo: a crianca "beliscava" e a tela ficava cortada */
html:has(body.kids) { touch-action: pan-y; }
.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); } }

/* ---------- cenário do mar ---------- */
/* Profundidade por camadas: quanto mais longe, mais claro, menor e
   mais lento. Perspectiva de verdade só no surfista (rotateY/rotateX)
   — é onde o olho procura volume. */
.cena-mar { background: none; }
.mar-ceu { position: absolute; inset: 0 0 44% 0; background: linear-gradient(178deg, #8fd6f4 0%, #c9eefb 55%, #eaf8ff 100%); }
.mar-sol {
  position: absolute; right: 14%; top: 10%; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffbe0, #ffd45e 70%);
  box-shadow: 0 0 60px 24px 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-nuvem {
  position: absolute; height: 26px; border-radius: 999px; background: #fff; opacity: .9;
  filter: drop-shadow(0 6px 8px rgba(30,90,120,.12));
}
.mar-nuvem::before, .mar-nuvem::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.mar-nuvem::before { width: 44%; height: 190%; left: 16%; bottom: 30%; }
.mar-nuvem::after  { width: 34%; height: 150%; left: 50%; bottom: 30%; }
.mar-nuvem.n1 { width: 150px; top: 14%; animation: nuvem 70s linear infinite -20s; }
.mar-nuvem.n2 { width: 96px;  top: 30%; opacity: .75; animation: nuvem 95s linear infinite -60s; }
.mar-nuvem.n3 { width: 120px; top: 6%;  opacity: .6;  animation: nuvem 120s linear infinite -5s; }
@keyframes nuvem { from { left: -20%; } to { left: 110%; } }
.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-horizonte {
  position: absolute; left: 0; right: 0; top: 52%; height: 8%;
  background: linear-gradient(180deg, rgba(234,248,255,0), #b8e6f7 60%, #7fcfeb);
}
.mar-agua {
  /* overflow visível de propósito: o salto do acerto e a prancha voando
     saem da água; quem recorta é o .kids-cena (tela inteira) */
  position: absolute; inset: 56% 0 0 0; overflow: visible;
  background: linear-gradient(180deg, #6fcbe7 0%, #2b9fcb 35%, #0f6f96 100%);
}
.mar-camada { position: absolute; bottom: 0; left: 0; width: 200%; height: 62px; }
.mar-camada.c4 { animation: ondular 26s linear infinite; opacity: .45; bottom: 52%; height: 40px; }
.mar-camada.c3 { animation: ondular 19s linear infinite reverse; opacity: .6; bottom: 40%; height: 48px; }
.mar-camada.c2 { animation: ondular 13s linear infinite; opacity: .85; bottom: 22%; height: 58px; }
.mar-camada.c1 { animation: ondular 9s linear infinite reverse; bottom: 6%; height: 66px; }
.mar-camada.c0 { animation: ondular 7s linear infinite; bottom: 0; height: 54px; }
@keyframes ondular { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* a onda grande atrás do surfista: rola devagar parada, rola forte
   enquanto toca — em ambos os casos igual com ou sem quebra */
.mar-ondona {
  position: absolute; right: -6%; bottom: 14%; width: clamp(280px, 56vw, 620px);
  aspect-ratio: 1.75; transform-origin: 50% 100%;
  filter: drop-shadow(0 14px 18px rgba(6,60,90,.35));
  animation: rolar 4.6s ease-in-out infinite;
}
.mar-ondona svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes rolar {
  0%,100% { transform: translateX(0) scaleY(1); }
  50%     { transform: translateX(-2.5%) scaleY(1.04); }
}
@keyframes rolar-forte {
  0%,100% { transform: translateX(0) scaleY(1) skewX(0); }
  50%     { transform: translateX(-4%) scaleY(1.09) skewX(-3deg); }
}
.ondona-lip { transform-origin: 40% 30%; }
.ondona-espuma { position: absolute; inset: 0; pointer-events: none; }
.ondona-espuma i {
  position: absolute; border-radius: 50%; background: #fff; opacity: 0;
  width: 14px; height: 14px; top: 16%; left: 58%;
}
.ondona-espuma i:nth-child(2)  { width: 10px; height: 10px; top: 10%; left: 70%; }
.ondona-espuma i:nth-child(3)  { width: 20px; height: 20px; top: 26%; left: 64%; }
.ondona-espuma i:nth-child(4)  { width: 8px;  height: 8px;  top: 8%;  left: 48%; }
.ondona-espuma i:nth-child(5)  { width: 13px; height: 13px; top: 34%; left: 52%; }
.ondona-espuma i:nth-child(6)  { width: 16px; height: 16px; top: 14%; left: 82%; }
.ondona-espuma i:nth-child(7)  { width: 9px;  height: 9px;  top: 30%; left: 86%; }
.ondona-espuma i:nth-child(8)  { width: 11px; height: 11px; top: 4%;  left: 62%; }
.ondona-espuma i:nth-child(9)  { width: 18px; height: 18px; top: 22%; left: 40%; }
.ondona-espuma i:nth-child(10) { width: 7px;  height: 7px;  top: 40%; left: 74%; }
.ondona-espuma i:nth-child(11) { width: 12px; height: 12px; top: 12%; left: 90%; }
.ondona-espuma i:nth-child(12) { width: 15px; height: 15px; top: 36%; left: 30%; }
.quebrou .ondona-espuma i { animation: espumar 1.2s ease-out .25s; }
.quebrou .ondona-lip { animation: desabar 1.2s ease-out .25s; }
@keyframes espumar {
  0%   { opacity: 0; transform: scale(.3); }
  30%  { opacity: 1; transform: scale(1.4) translateY(-10px); }
  100% { opacity: 0; transform: scale(2.4) translateY(30px); }
}
@keyframes desabar {
  0%   { transform: none; }
  45%  { transform: rotate(14deg) translate(10px, 14px); }
  100% { transform: rotate(26deg) translate(24px, 34px); opacity: .4; }
}

/* rastro de espuma que só aparece surfando */
.mar-rastro {
  position: absolute; left: 4%; bottom: 24%; width: 36%; height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85));
  filter: blur(3px); opacity: 0; transition: opacity .35s;
}
@keyframes rastro { from { transform: translateX(-6%) scaleX(.96); } to { transform: translateX(0) scaleX(1); } }

/* ================= PALCO DO HERÓI (todas as cenas) ================= */
/* Faixa reservada no pé da tela: o miolo do jogo (.kids-main) deixa
   esse espaço livre, então nenhuma informação passa por cima do
   personagem. Estados na raiz da cena: fora, entrando, esperando,
   saindo, caiu. */
.heroi-rig {
  position: absolute; left: 26%; bottom: 5%; width: clamp(150px, 24vw, 230px);
  aspect-ratio: 1.05; perspective: 700px; pointer-events: none; z-index: 2;
  will-change: transform;
}
.rig-corpo { position: absolute; inset: 0; transform-style: preserve-3d; }
.rig-sombra {
  position: absolute; left: 12%; right: 12%; bottom: -2%; height: 11%; border-radius: 50%;
  background: rgba(4,30,50,.32); filter: blur(5px);
}
.veiculo { position: absolute; left: 0; right: 0; bottom: 0; }
.veiculo svg { width: 100%; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.v-tras { bottom: var(--pe); z-index: 0; }
.v-frente { z-index: 2; transform-origin: 50% 60%; }
.rig-guardachuva .v-tras { bottom: 62%; }
.rig-asadelta .v-tras { bottom: 30%; left: -8%; right: -8%; }
.rig-balao .v-tras { bottom: 40%; }
.heroi-rig .heroi {
  position: absolute; left: 50%; bottom: var(--pe, 30%); width: 58%; height: auto; z-index: 1;
  transform: translateX(-50%); transform-origin: 50% 90%;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
}
.rig-poeira { position: absolute; inset: 0; z-index: 3; }
.rig-poeira i {
  position: absolute; left: 12%; bottom: 8%; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; opacity: 0;
}
.rig-chao .rig-poeira i { background: rgba(255,255,255,.7); }
.rig-ar .rig-poeira { display: none; }

/* entrando / saindo: a travessia. --trav vem do JS (duração do som) */
.fora .heroi-rig { opacity: 0; transform: translateX(-90vw); }
.entrando .heroi-rig { animation: chegar var(--trav, 1.2s) cubic-bezier(.2,.7,.3,1) forwards; }
.saindo .heroi-rig { animation: partir 1.25s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes chegar { from { opacity: 1; transform: translateX(-90vw); } to { opacity: 1; transform: translateX(0); } }
@keyframes partir { from { opacity: 1; transform: translateX(0); } to { opacity: 1; transform: translateX(95vw); } }

/* movimento do corpo em cada estado, por tipo de veículo */
.esperando .rig-corpo { animation: boiar 3.2s ease-in-out infinite; }
.esperando .rig-sombra { animation: sombra-boia 3.2s ease-in-out infinite; }
@keyframes boiar {
  0%,100% { transform: translateY(0) rotateZ(-1.5deg); }
  50%     { transform: translateY(-7px) rotateZ(2deg); }
}
@keyframes sombra-boia {
  0%,100% { transform: scaleX(1); opacity: .9; }
  50%     { transform: scaleX(.86); opacity: .6; }
}
/* água: desliza inclinando em 3D, prancha tomba pra frente, borrifo */
.entrando .rig-agua .rig-corpo, .saindo .rig-agua .rig-corpo { animation: surfar3d 1.1s ease-in-out infinite; }
.entrando .rig-agua .v-frente, .saindo .rig-agua .v-frente { animation: prancha-inclina 1.1s ease-in-out infinite; }
@keyframes surfar3d {
  0%,100% { transform: translate(0, 0) rotateY(-16deg) rotateZ(-9deg); }
  50%     { transform: translate(14px, -16px) rotateY(16deg) rotateZ(7deg); }
}
@keyframes prancha-inclina {
  0%,100% { transform: rotateX(28deg) rotateZ(-4deg); }
  50%     { transform: rotateX(46deg) rotateZ(5deg); }
}
/* chão: rodas giram, corpo sacode como em piso irregular */
.entrando .rig-chao .rig-corpo, .saindo .rig-chao .rig-corpo { animation: rolar-chao .5s ease-in-out infinite; }
.entrando .rig-chao .roda, .saindo .rig-chao .roda { animation: roda .45s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rolar-chao {
  0%,100% { transform: translateY(0) rotateZ(-1deg); }
  50%     { transform: translateY(-4px) rotateZ(1.5deg); }
}
@keyframes roda { to { transform: rotate(360deg); } }
/* ar: flutua alto, inclina de leve pra frente ao voar */
.entrando .rig-ar .rig-corpo, .saindo .rig-ar .rig-corpo { animation: voar-corpo 1.4s ease-in-out infinite; }
@keyframes voar-corpo {
  0%,100% { transform: translateY(0) rotateZ(4deg) rotateY(-10deg); }
  50%     { transform: translateY(-18px) rotateZ(-3deg) rotateY(10deg); }
}
/* partículas enquanto anda (borrifo na água, poeira no chão) */
.entrando .rig-poeira i, .saindo .rig-poeira i { animation: borrifo .75s ease-out infinite; }
.rig-poeira i:nth-child(2) { left: 22%; width: 6px; height: 6px; animation-delay: .1s !important; }
.rig-poeira i:nth-child(3) { left: 8%;  width: 12px; height: 12px; animation-delay: .2s !important; }
.rig-poeira i:nth-child(4) { left: 30%; width: 7px; height: 7px; animation-delay: .3s !important; }
.rig-poeira i:nth-child(5) { left: 16%; width: 10px; height: 10px; animation-delay: .42s !important; }
.rig-poeira i:nth-child(6) { left: 84%; width: 8px; height: 8px; animation-delay: .15s !important; }
.rig-poeira i:nth-child(7) { left: 90%; width: 6px; height: 6px; animation-delay: .35s !important; }
.rig-poeira i:nth-child(8) { left: 76%; width: 11px; height: 11px; animation-delay: .5s !important; }
.rig-poeira i:nth-child(9) { left: 26%; width: 5px; height: 5px; animation-delay: .6s !important; }
@keyframes borrifo {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-30px, -60px) scale(1.3); }
}

/* ---- errou: cada veículo cai do seu jeito ---- */
.caiu .heroi-rig { opacity: 1; transform: none; }
.caiu .rig-corpo { animation: none; }
/* --cai: quanto o personagem desce (em % da própria altura) até o chão */
.caiu .heroi-rig .heroi { --cai: 0%; }

/* prancha: tomba na água; a prancha vira o arremesso (JS) */
.caiu .rig-prancha .veiculo { opacity: 0; }
.caiu .rig-prancha .heroi { animation: tombo 1.4s cubic-bezier(.4,0,.7,.6) forwards; }
@keyframes tombo {
  0%   { transform: translateX(-50%) rotate(0); }
  30%  { transform: translate(-30%, -30px) rotate(-60deg); }
  70%  { transform: translate(-10%, 50px) rotate(-130deg); opacity: 1; }
  100% { transform: translate(0, 90px) rotate(-160deg); opacity: 0; }
}

/* skate: dispara sozinho pelo chão; ele cai sentado */
.caiu .rig-skate .v-frente { animation: dispara-chao 1.1s cubic-bezier(.3,0,.7,.2) forwards; }
.caiu .rig-skate .roda { animation: roda .18s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dispara-chao { to { transform: translateX(130vw); } }
.caiu .rig-skate .heroi { --cai: 56%; animation: cai-sentado 1s cubic-bezier(.3,0,.6,1) forwards; }
@keyframes cai-sentado {
  0%   { transform: translateX(-50%) rotate(0); }
  35%  { transform: translate(-64%, -14%) rotate(-22deg); }
  75%  { transform: translate(-74%, var(--cai)) rotate(-34deg); }
  88%  { transform: translate(-74%, calc(var(--cai) - 5%)) rotate(-30deg); }
  100% { transform: translate(-74%, var(--cai)) rotate(-32deg); }
}

/* patinete: tomba pra frente e fica deitado; ele cai sentado atrás */
.caiu .rig-patinete .v-frente { transform-origin: 82% 100%; animation: tomba-frente .9s cubic-bezier(.5,0,.8,.5) forwards; }
@keyframes tomba-frente { 70% { transform: rotate(78deg); } 82% { transform: rotate(70deg); } 100% { transform: rotate(76deg); } }
.caiu .rig-patinete .heroi { --cai: 40%; animation: cai-sentado 1s cubic-bezier(.3,0,.6,1) forwards; }

/* bicicleta: perde o equilíbrio e cai de lado, ele junto */
.caiu .rig-bicicleta .rig-corpo { transform-origin: 18% 100%; animation: cai-lado 1.1s cubic-bezier(.45,0,.75,.6) forwards; }
@keyframes cai-lado {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(6deg); }
  85%  { transform: rotate(-78deg) translateX(-6%); }
  100% { transform: rotate(-74deg) translateX(-6%); }
}
.caiu .rig-bicicleta .roda { animation: roda .6s linear 3; transform-box: fill-box; transform-origin: center; }

/* carrinho de mina e trem: solavanco; ele voa em arco por cima e cai à frente */
.caiu .rig-mina .v-frente { transform-origin: 78% 100%; animation: tomba-carrinho 1s cubic-bezier(.5,0,.8,.5) forwards; }
@keyframes tomba-carrinho { 15% { transform: translateX(-6%) rotate(-8deg); } 70% { transform: rotate(48deg); } 100% { transform: rotate(44deg); } }
.caiu .rig-trem .v-frente { animation: solavanco .6s ease; }
@keyframes solavanco { 20% { transform: translateX(-8%) rotate(-5deg); } 50% { transform: translateX(4%) rotate(3deg); } 100% { transform: none; } }
.caiu .rig-mina .heroi, .caiu .rig-trem .heroi { --cai: 78%; animation: voa-arco 1.25s cubic-bezier(.35,0,.65,1) forwards; }
@keyframes voa-arco {
  0%   { transform: translateX(-50%) rotate(0); }
  45%  { transform: translate(60%, -130%) rotate(190deg); }
  85%  { transform: translate(150%, var(--cai)) rotate(350deg); }
  100% { transform: translate(150%, var(--cai)) rotate(345deg); }
}

/* balão: o cacho escapa voando; ele fica no cesto, que dá um baque */
.caiu .rig-balao .v-tras { animation: escapa-ceu 1.5s cubic-bezier(.4,0,.8,.6) forwards; }
@keyframes escapa-ceu { 30% { transform: translate(6%, -10%) rotate(8deg); } 100% { transform: translate(40vw, -130vh) rotate(30deg); } }
.caiu .rig-balao .v-frente, .caiu .rig-balao .heroi { animation: baque .7s cubic-bezier(.3,1.4,.5,1) .3s; }
.caiu .rig-balao .heroi { animation-name: baque-heroi; }
@keyframes baque { 30% { transform: translateY(8%) scaleY(.88); } 100% { transform: none; } }
@keyframes baque-heroi { 30% { transform: translateX(-50%) translateY(10%) scaleY(.86); } 100% { transform: translateX(-50%); } }

/* guarda-chuva: o vento vira ele do avesso e leva; o personagem despenca */
.caiu .rig-guardachuva .v-tras { animation: vira-vento 1.4s cubic-bezier(.4,0,.8,.5) forwards; transform-origin: 50% 40%; }
@keyframes vira-vento {
  25%  { transform: scaleY(-1) rotate(-10deg); }
  100% { transform: scaleY(-1) translate(60vw, -110vh) rotate(-60deg); }
}
.caiu .rig-guardachuva .heroi { --cai: 30%; animation: cai-sentado 1s cubic-bezier(.3,0,.6,1) .15s forwards; }

/* asa-delta: perde o vento, despenca girando; ele cai sentado */
.caiu .rig-asadelta .v-tras { animation: despenca-asa 1.5s cubic-bezier(.5,0,.8,.5) forwards; transform-origin: 50% 20%; }
@keyframes despenca-asa {
  30%  { transform: rotate(35deg) translate(-10%, 8%); }
  100% { transform: rotate(-260deg) translate(-70vw, 30vh); opacity: .9; }
}
.caiu .rig-asadelta .heroi { --cai: 14%; animation: cai-sentado .9s cubic-bezier(.3,0,.6,1) .2s forwards; }

/* nuvem (reserva): some em chuva; ele cai sentado */
.caiu .rig-nuvem .v-frente { animation: dissolve .8s ease forwards; }
@keyframes dissolve { to { opacity: 0; transform: scale(1.4); } }
.caiu .rig-nuvem .heroi { --cai: 44%; animation: cai-sentado 1s cubic-bezier(.3,0,.6,1) forwards; }
.caiu .rig-carrinho .heroi { --cai: 66%; animation: voa-arco 1.25s cubic-bezier(.35,0,.65,1) forwards; }
.caiu .rig-carrinho .v-frente { animation: solavanco .6s ease; }
/* o veículo arremessado: sai do lugar dele, gira e cresce até bater na tela */
.arremesso {
  position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, -50%);
  animation: arremesso .78s cubic-bezier(.35,0,.85,.45) forwards;
}
.arremesso svg { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes arremesso {
  0%   { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(760deg) scale(7); opacity: 1; }
}
/* impacto: a tela treme e dá um clarão */
body.impacto .kids-frente, body.impacto .kids-cena { animation: tremer .5s ease; }
body.impacto::after {
  content: ''; position: fixed; inset: 0; z-index: 69; pointer-events: none;
  background: #fff; animation: clarao .5s ease-out forwards;
}
@keyframes clarao { 0% { opacity: .85; } 100% { opacity: 0; } }

/* splash no mar: partículas na posição do palco */
.mar-splash { position: absolute; left: 26%; bottom: 5%; width: clamp(150px, 24vw, 230px); aspect-ratio: 1.05; pointer-events: none; z-index: 3; }
.mar-splash i {
  position: absolute; left: 50%; bottom: 10%; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; opacity: 0;
}
.caiu .mar-splash i { animation: splash .9s ease-out .55s forwards; }
.mar-splash i:nth-child(2)  { --sx: -70px; --sy: -110px; width: 10px; height: 10px; }
.mar-splash i:nth-child(3)  { --sx: 60px;  --sy: -120px; width: 18px; height: 18px; }
.mar-splash i:nth-child(4)  { --sx: -110px; --sy: -70px; width: 8px; height: 8px; }
.mar-splash i:nth-child(5)  { --sx: 100px; --sy: -60px; width: 12px; height: 12px; }
.mar-splash i:nth-child(6)  { --sx: -30px; --sy: -140px; width: 16px; height: 16px; }
.mar-splash i:nth-child(7)  { --sx: 30px;  --sy: -150px; width: 9px; height: 9px; }
.mar-splash i:nth-child(8)  { --sx: -90px; --sy: -30px; width: 11px; height: 11px; }
.mar-splash i:nth-child(9)  { --sx: 85px;  --sy: -25px; width: 13px; height: 13px; }
.mar-splash i:nth-child(10) { --sx: -50px; --sy: -90px; width: 20px; height: 20px; }
.mar-splash i:nth-child(11) { --sx: 45px;  --sy: -95px; width: 7px; height: 7px; }
.mar-splash i:nth-child(12) { --sx: 0px;   --sy: -170px; width: 12px; height: 12px; }
.mar-splash i:nth-child(13) { --sx: -130px; --sy: -10px; width: 9px; height: 9px; }
.mar-splash i:nth-child(14) { --sx: 130px; --sy: -5px; width: 10px; height: 10px; }
@keyframes splash {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -100px)) scale(1.2); }
}
/* o mar reage à travessia: onda grande rola forte, rastro aparece */
.entrando .mar-ondona, .saindo .mar-ondona { animation: rolar-forte 1.3s ease-in-out infinite; }
.entrando .mar-rastro, .saindo .mar-rastro { opacity: 1; animation: rastro .5s linear infinite; }

@media (max-width: 620px) {
  .heroi-rig, .mar-splash { left: 14%; bottom: 4%; width: clamp(140px, 44vw, 190px); }
  .mar-ondona { right: -14%; bottom: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .mar-camada, .mar-ondona, .rig-corpo, .rig-sombra, .mar-nuvem { animation: none !important; }
}

/* ---------- 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;
}
/* a faixa de baixo é do personagem: nada de interface passa por cima */
body.perfil-crianca .kids-main { padding-bottom: clamp(230px, 36vh, 340px); }
@media (max-width: 620px) { body.perfil-crianca .kids-main { padding-bottom: clamp(200px, 32vh, 280px); gap: 14px; } }
.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); height: clamp(112px, 24vw, 158px); aspect-ratio: 1; flex: none;   /* altura explicita: no celular o grid esticava a bola em ovo */
  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); } }

/* Walkie: radio + botao no MEIO da tela; progresso em 12 patinhas */
body.perfil-crianca.ui-walkie .kids-main { padding-bottom: 10px; justify-content: center; }
/* a tela do jogo nunca rola nem corta: tudo cabe na altura visivel */
body.kids .kids-frente { height: 100dvh; min-height: 0; overflow: hidden auto; }   /* se mesmo assim nao couber, rola em vez de cortar */
body.kids .kids-main { min-height: 0; }
/* Walkie: as 4 cartas SEMPRE numa fila so (nunca uma segunda fila escondida embaixo) */
body.ui-walkie .opts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: min(620px, 100%); gap: clamp(6px, 1.4vw, 13px); }
/* carta do Walkie: desenho numa caixa propria, palavra numa faixa SEPARADA embaixo
   (nada de texto em cima do desenho, em navegador nenhum) */
/* sem animacao/transform/transition nas cartas do Walkie: com "zoom da pagina" no Chrome Android,
   a camada animada ganhava um recorte menor que a carta (desenho cortado embaixo, palavra cortada
   na direita) */
body.ui-walkie .opt { padding: 10px 4px 0; gap: 0; overflow: visible; display: flex; flex-direction: column; align-items: center; contain: none;
  animation: none !important; transform: none !important; transition: background .16s, border-color .16s; will-change: auto; backface-visibility: visible; }
body.ui-walkie .opt:hover, body.ui-walkie .opt:active { transform: none !important; }
body.ui-walkie .opts { animation: none; transform: none; will-change: auto; }
body.ui-walkie .opt.certa, body.ui-walkie .opt.errada { animation: none !important; }
body.ui-walkie .opt .opt-fig, body.ui-walkie .opt .lb { transform: none; will-change: auto; }
/* desenho: caixa QUADRADA fixa em px (sem %, sem aspect-ratio, sem max-width), imagem inteira dentro */
body.ui-walkie .opt .opt-fig { display: block; width: 76px; height: 76px; min-width: 76px; min-height: 76px; max-width: none; max-height: none;
  margin: 0 auto; object-fit: contain; object-position: center; flex: none; overflow: visible; }
body.ui-walkie .opt .lb { display: block; width: 100%; margin-top: 8px; padding: 6px 2px 8px; border-top: 1px solid rgba(22,49,61,.12); text-align: center;
  font-size: clamp(.68rem, 1.9vw, .9rem); line-height: 1.15; white-space: nowrap; overflow: visible; letter-spacing: -.01em; }
@media (max-width: 560px) { body.ui-walkie .opt .opt-fig { width: 60px; height: 60px; min-width: 60px; min-height: 60px; } }
@media (max-height: 720px) { body.perfil-crianca.ui-walkie .kids-main { gap: 8px; } }
@media (max-height: 560px) { body.perfil-crianca.ui-walkie .kids-main { padding-top: 4px; gap: 4px; } }
body.ui-patas .kids-contador, body.ui-patas .progress { display: none; }
.patas { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto;
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); padding: 6px 9px; border-radius: 999px; }
/* 12 patinhas SEMPRE numa linha so: encolhem juntas quando falta espaco */
.patas .pata { flex: 0 1 22px; min-width: 0; width: 22px; aspect-ratio: 1; display: block; color: #7a4a21; transition: color .6s, transform .3s; }
.patas .pata svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; overflow: visible; transition: fill .5s; }
/* por fazer = so o CONTORNO marrom; acertou/errou = preenche de cor */
.patas .pata.ok svg, .patas .pata.erro svg { fill: currentColor; }
.patas .pata.atual { animation: pata-pisca 1.4s ease-in-out infinite; }
.patas .pata.ok { color: #2e9e5b !important; animation: pata-pop .5s ease-out; }   /* !important: vence a cor do icone de cada cena (Pizzaria, Estacao) */
.patas .pata.erro { color: #d8453a !important; animation: pata-pop .5s ease-out; }
@keyframes pata-pisca { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
@keyframes pata-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
@media (max-width: 620px) {
  /* celular: as patinhas descem para uma linha propria, de ponta a ponta, sem quebrar */
  body.ui-patas .kids-bar .wrap { flex-wrap: wrap; row-gap: 8px; }
  body.ui-patas .patas { flex: 1 1 100%; order: 9; justify-content: space-between; gap: 3px; padding: 5px 8px; }
  .patas .pata { flex: 1 1 0; width: auto; max-width: 24px; }
  /* celular em pe: o menino ocupa o pe da tela, entao o radio sobe um pouco e encolhe */
  body.perfil-crianca.ui-walkie .kids-main { padding-bottom: 30vh; }
  body.ui-walkie .play-orb { width: clamp(90px, min(36vw, 30vh), 220px); }
}

/* ---------- menu do jogo (Walkie vai a escola) ---------- */
.mj { position: fixed; inset: 0; z-index: 84; display: grid; place-items: center; padding: 16px; }
.mj .mj-painel { animation: tuto-entra .45s ease both; }
.mj.hidden { display: none; }
body.em-menu .kids-frente { visibility: hidden; }
.mj-fundo { position: absolute; inset: 0; background: #e9e2cf center / cover no-repeat; }
.mj-fundo::after { content: ''; position: absolute; inset: 0; background: rgba(40, 30, 10, .22); }
.mj-painel { position: relative; width: min(760px, 100%); padding: 44px 34px 28px 58px; color: #2b2b2b;
  /* folha de caderno: papel amarelado, pauta azul, margem vermelha, topo rasgado */
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(120,150,200,.45) 29px 30px),
    linear-gradient(90deg, transparent 0 44px, rgba(220,80,80,.55) 44px 46px, transparent 46px),
    linear-gradient(180deg, #fff9e0, #fdf3cf);
  background-position: 0 14px, 0 0, 0 0;
  clip-path: polygon(0.0% 0.3%, 3.8% 2.0%, 7.7% 0.4%, 11.5% 2.2%, 15.4% 0.8%, 19.2% 0.8%, 23.1% 0.0%, 26.9% 2.8%, 30.8% 0.3%, 34.6% 1.2%, 38.5% 1.2%, 42.3% 1.8%, 46.2% 1.0%, 50.0% 1.8%, 53.8% 0.8%, 57.7% 1.0%, 61.5% 0.8%, 65.4% 2.9%, 69.2% 0.6%, 73.1% 2.5%, 76.9% 0.8%, 80.8% 0.8%, 84.6% 0.9%, 88.5% 2.1%, 92.3% 0.4%, 96.2% 0.7%, 100.0% 1.0%, 100% 100%, 0 100%);
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.35));
}
.mj-painel::before { content: ''; position: absolute; left: 14px; top: 60px; bottom: 30px; width: 14px;
  background: radial-gradient(circle, #d9d2b8 0 5px, transparent 6px) 0 0 / 14px 60px repeat-y; opacity: .9; }
.mj-cab p { margin: 0; color: #1f2a44; font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 600;
  font-size: clamp(1.45rem, 3.4vw, 1.9rem); line-height: 30px; }
.mj-btn { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 700; }
.mj-btn b { font-size: clamp(1.5rem, 3.2vw, 1.9rem); letter-spacing: .02em; }
.mj-como span { font-size: clamp(1.4rem, 3vw, 1.75rem); }
.mj-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.mj-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; border-radius: 18px;
  border: 3px solid transparent; font-weight: 800; color: #fff; background: #3f8f2f; box-shadow: 0 6px 0 #2d6a22; transition: transform .12s, box-shadow .12s; }
.mj-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.mj-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #2d6a22; }
.mj-como { background: #b9762f; box-shadow: 0 6px 0 #8a5620; }
.mj-como:active { box-shadow: 0 3px 0 #8a5620; }
@media (max-width: 620px) {
  .mj-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mj-painel { padding: 36px 18px 20px 46px; }
}

/* ---------- "Como jogar": telinha + texto ---------- */
.cj { position: fixed; inset: 0; z-index: 85; background: #efe6cf; display: flex; flex-direction: column; align-items: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); overflow: auto; }
.cj.hidden { display: none; }
.cj-topo { width: min(900px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 10px; }
.cj-topo h2 { margin: 0; font-family: var(--font); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #2c3e50; font-size: clamp(1.2rem, 3.4vw, 1.8rem); }
.cj-voltar { justify-self: start; background: rgba(255,255,255,.9); color: #16313d; display: inline-flex; gap: 6px; align-items: center; }
.cj-voltar .ic { width: 18px; height: 18px; }
.cj-tela { width: min(860px, 100%); aspect-ratio: 2 / 1; border: 10px solid #1e1e1e; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 16px 40px rgba(0,0,0,.3); position: relative; flex: none; }
.cj-cena { position: absolute; inset: 0; background: center / cover no-repeat; }
.cj-livros { position: absolute; top: 3%; right: 2%; display: flex; gap: 2px; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.6); }
.cj-livros i { width: 5.5%; aspect-ratio: 1; min-width: 9px; display: block; border-radius: 2px; border: 1.5px solid #7a4a21; }
.cj-livros i.ok { background: #2e9e5b; border-color: #2e9e5b; } .cj-livros i.erro { background: #d8453a; border-color: #d8453a; }
.cj-anel { position: absolute; left: 15%; top: 39.5%; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.4); opacity: .9; }
.cj-anel.pulsa { animation: cj-pulsa 1.4s ease-out infinite; }
@keyframes cj-pulsa { 0% { transform: translate(-50%, -50%) scale(.9); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.cj-sons i { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,230,80,.9), rgba(255,230,80,0) 68%); mix-blend-mode: screen; animation: esc-som 1.1s ease-in-out infinite; }
.cj-sons i:nth-child(1) { left: 27%; top: 42%; } .cj-sons i:nth-child(2) { left: 41%; top: 43%; animation-delay: .3s; }
.cj-sons i:nth-child(3) { left: 70%; top: 46%; animation-delay: .6s; } .cj-sons i:nth-child(4) { left: 78%; top: 41%; animation-delay: .15s; }
.cj-sons i:nth-child(5) { left: 89%; top: 43%; animation-delay: .45s; } .cj-sons i:nth-child(6) { left: 96%; top: 36%; animation-delay: .75s; }
.cj-grade { position: absolute; right: 5%; top: 16%; width: 32%; display: grid; grid-template-columns: 1fr 1fr; gap: 4%; padding: 3%; border-radius: 10px;
  background: rgba(255,255,255,.4); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.cj-opt { aspect-ratio: 1; background: #fff; border: 2px solid #d9d9d9; border-radius: 8px; display: grid; place-items: center; padding: 6%; }
.cj-opt.alvo { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.3); }
.cj-opt.certa { border-color: var(--ok); background: #dff6ec; }
.cj-fig { width: 100%; height: 100%; object-fit: contain; }
.cj-mao { position: absolute; right: 22%; top: 36%; width: 8%; animation: tuto-aponta 1s ease-in-out infinite; }
.cj-mao svg { width: 100%; height: auto; display: block; }
.cj-fb { position: absolute; right: 16%; top: 76%; background: #0d7a52; color: #fff; font-weight: 800; padding: 3px 12px; border-radius: 999px; font-size: clamp(.7rem, 1.6vw, 1rem); }
.cj-destaque { position: absolute; top: 1%; right: 1%; width: 28%; height: 11%; border: 3px solid #ffd24d; border-radius: 999px; animation: cj-pulsa-borda 1.2s ease-in-out infinite; }
@keyframes cj-pulsa-borda { 50% { box-shadow: 0 0 0 6px rgba(255,210,77,.35); } }
.cj-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 4px; }
.cj-seta { width: 48px; height: 48px; border-radius: 50%; border: none; background: #fff; color: #1e1e1e; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.cj-seta svg { width: 22px; height: 22px; fill: currentColor; }
.cj-seta[disabled] { opacity: .3; pointer-events: none; }
.cj-pontos { display: flex; gap: 10px; }
.cj-pontos i { width: 14px; height: 14px; border-radius: 50%; background: #fff; display: block; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); transition: transform .2s; }
.cj-pontos i.on { transform: scale(1.5); background: #3f8f2f; }
.cj-texto { width: min(860px, 100%); margin: 8px 0 0; font-size: clamp(1.05rem, 2.6vw, 1.45rem); line-height: 1.4; color: #2c2c2c; font-weight: 600; text-align: left; }
.cj-fim { min-height: 64px; display: flex; align-items: center; margin-top: 8px; }
@media (max-width: 620px) { .cj-tela { border-width: 6px; } .cj-topo h2 { font-size: 1.1rem; } .cj-voltar span { display: none; } }

/* ---------- explicacao em telas (tutorial) ---------- */
.tuto { position: fixed; inset: 0; z-index: 84; display: flex; flex-direction: column; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.tuto.hidden { display: none; }
.tuto > * { pointer-events: auto; }
body.em-tutorial .kids-frente { visibility: hidden; }
.tuto-cab { display: flex; align-items: center; gap: 14px; background: var(--tuto-cor, #fff3c4); border: 3px solid rgba(255,255,255,.9);
  border-radius: 22px; padding: 12px 18px; box-shadow: 0 10px 28px rgba(0,0,0,.25); max-width: 760px; align-self: center; width: 100%;
  animation: tuto-entra .4s ease; }
.tuto-num { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #1d4ed8; color: #fff; font-weight: 900; font-size: 1.5rem;
  display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.tuto-texto { margin: 0; font-family: var(--font); font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.35rem); line-height: 1.35; color: #1a1a1a; }
.tuto-demo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.tuto-opts { width: min(380px, 70vw); gap: 10px; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.6);
  box-shadow: 0 12px 30px rgba(0,0,0,.28); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuto-opts .opt { position: relative; aspect-ratio: 1; padding: 8px; background: #fff; border: 3px solid #d9d9d9; border-radius: 14px; display: grid; place-items: center; }
.tuto-opts .opt .opt-fig { width: 100%; height: 100%; }
.tuto-opts .opt.tuto-alvo { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29,78,216,.25); }
.tuto-opts .opt.certa { border-color: var(--ok); background: #dff6ec; }
/* sem filter aqui: drop-shadow + animacao numa camada fixed fazia o Chrome borrar o tutorial inteiro */
.tuto-mao { position: absolute; right: -8px; bottom: -12px; width: 44px; height: 44px; animation: tuto-aponta 1s ease-in-out infinite; }
.tuto-mao svg { width: 100%; height: 100%; display: block; }
.tuto-check { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--ok); color: #fff;
  display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.25); animation: pular .45s ease; }
.tuto-check svg { width: 20px; height: 20px; }
.tuto-fb { margin-top: 12px; }
.tuto-demo > .feedback { display: inline-block; }
.tuto .tuto-demo { flex-direction: column; }
.tuto-btns { display: flex; gap: 12px; justify-content: center; }
.tuto-btns .btn { min-width: 150px; }
.tuto-btns .btn-ghost { background: rgba(255,255,255,.88); color: #16313d; }
@keyframes tuto-entra { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tuto-aponta { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,-8px); } }
@media (max-width: 620px) { .tuto-btns { flex-direction: column; } .tuto-btns .btn { width: 100%; } .tuto-num { width: 40px; height: 40px; font-size: 1.2rem; } }

/* ---------- Walkie vai na escola: fundo parado, botao = balao da imagem ---------- */
.cena-escola { background: #e9e2cf; }
.esc-fundo { position: absolute; inset: 0; background-size: cover; background-position: left center; background-repeat: no-repeat; }
.esc-blur { position: absolute; inset: 0; background: center / cover no-repeat; display: none; }

/* video animado da sala, mesmo enquadramento (cover ancorado a esquerda) da imagem atras */
.esc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .esc-video { display: none; } }
/* celular em pe: video vertical da fono cobre a tela inteira, ancorado a esquerda (classe posta pelo JS) */
.cena-escola.esc-retrato .esc-blur { display: none; }
.cena-escola.esc-retrato .esc-fundo { background-image: url(../img/escola/fundo_retrato.webp?v=20261031) !important; background-size: cover; background-position: left center; }
.cena-escola.esc-retrato .esc-video { object-fit: cover; object-position: left center; }
/* raios de som dos colegas: brilhos amarelos que pulsam so enquanto o som toca */
.esc-sons i { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,230,80,.85), rgba(255,230,80,0) 68%); mix-blend-mode: screen; }
.esc-tocando .esc-sons i { animation: esc-som 1.1s ease-in-out infinite; }
.esc-sons i:nth-child(2n) { animation-delay: .25s; } .esc-sons i:nth-child(3n) { animation-delay: .5s; } .esc-sons i:nth-child(5n) { animation-delay: .8s; }
@keyframes esc-som { 0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.7); } 50% { opacity: .9; transform: translate(-50%,-50%) scale(1.15); } }
/* anel chamando o toque no balao (so enquanto espera) */
.esc-anel { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,.9); }
.esc-espera .esc-anel { animation: esc-anel 1.8s ease-in-out infinite; }
@keyframes esc-anel { 0%, 100% { opacity: 0; } 50% { opacity: .75; box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 0 24px 10px rgba(255,255,255,.55); } }
/* o #orb vira um alvo invisivel em cima do balao (a cena posiciona por JS) */
body.ui-escola .play-orb { background: none; box-shadow: none; border-radius: 50%; animation: none !important; z-index: 6; transition: transform .15s; height: auto; }
body.ui-escola .play-orb:active { transform: scale(.94); }
body.ui-escola .play-orb[disabled] { opacity: 1; }
/* escola: o play e o desenhado na imagem; nada por cima, nada se mexendo (pedido da fono) */
body.ui-escola .play-orb.tocando { animation: none !important; }
body.ui-escola .play-orb:active { transform: none; }
body.ui-escola .play-orb.tocando { animation: tocar .8s ease-in-out infinite !important; }
body.perfil-crianca.ui-escola .kids-main { padding: 0 4vw 4vh; justify-content: flex-end; }
/* vinheta suave: escurece as bordas e o chao para as figuras saltarem */
.cena-escola::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(20,15,5,.35) 100%),
              linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(20,15,5,.28) 100%); }
/* moldura das figuras: "lousa" translucida com cantos redondos */
body.ui-escola #resp { width: auto; max-width: 100%; }
body.ui-escola .opts { gap: 12px; padding: 12px; border-radius: 22px; background: rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 12px 34px rgba(0,0,0,.28); }
/* tela larga: figuras a direita, o Walkie e o balao ficam a vista a esquerda */
@media (min-width: 900px) {
  body.perfil-crianca.ui-escola .kids-main { justify-content: center; padding-right: 4vw; }
  body.ui-escola .opts { width: min(440px, 40vw); }
}
/* figuras das frases: so o desenho, sem nome embaixo (igual as cartelas da fono) */
body.ui-escola .opt .lb { display: none; }
body.ui-escola .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(440px, 100%); }
body.ui-escola .opt { aspect-ratio: 1; padding: 10px; background: rgba(255,255,255,.94); border: 3px solid #d9d9d9; border-radius: 16px; }
body.ui-escola .opt .opt-fig { width: 100%; height: 100%; }
body.ui-escola .opt.certa { border-color: var(--ok); background: #dff6ec; }
body.ui-escola .opt.errada { border-color: var(--bad); background: #fce2e2; }

/* ---------- Padaria: videos (movimento) encaixados nas imagens em alta (nitidez) ---------- */
.cena-padaria { background: #f3e3c8; }
.pd-fundo { position: absolute; inset: 0; background: center / cover no-repeat; }
.pd-palco { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 6px; }
.pd-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; transition: opacity .35s; }
.pd-img.on { opacity: 1; }
.pd-vazia { opacity: 1; transition: none; }           /* a padaria vazia fica sempre por baixo */
.pd-video { position: absolute; left: 0; top: 0; object-fit: fill; display: none; pointer-events: none; }
.pd-video.on { display: block; }
.pd-video { transition: opacity .3s; }
.pd-video.sai { opacity: 0; }
/* sino da Padaria (SVG animado, scenes.js sinoPadaria): left/top = centro da base no balcao */
.pd-sino-anim { position: absolute; z-index: 4; aspect-ratio: 240 / 190; transform: translate(-50%, -94%); opacity: 0; pointer-events: none; }
.pd-sino-anim svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgba(50,25,5,.25)); }
.pd-sino-anim .sn-corpo { transform-box: view-box; transform-origin: 120px 172px; }
.pd-sino-anim .sn-botao { transform-box: view-box; transform-origin: 120px 60px; }
.pd-sino-anim .sn-onda { fill: none; stroke: #f2a81d; stroke-width: 9; stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 120px 98px; }
.pd-sino-anim.on { animation: pdsn-vem 1.45s ease-out forwards; }
.pd-sino-anim.on .sn-botao { animation: pdsn-aperta 1.45s linear forwards; }
.pd-sino-anim.on .sn-corpo { animation: pdsn-balanca 1.45s ease-out forwards; }
.pd-sino-anim.on .sn-onda.o1 { animation: pdsn-onda 1.45s ease-out forwards; }
.pd-sino-anim.on .sn-onda.o2 { animation: pdsn-onda2 1.45s ease-out forwards; }
@keyframes pdsn-vem { 0% { opacity: 0; transform: translate(-50%, -88%) scale(.7); } 11% { opacity: 1; transform: translate(-50%, -94%) scale(1.04); }
  16% { transform: translate(-50%, -94%) scale(1); } 82% { opacity: 1; transform: translate(-50%, -94%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -94%) scale(.96); } }
@keyframes pdsn-aperta { 0%, 13% { transform: translateY(0); } 17% { transform: translateY(9px) scaleY(.92); } 24% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes pdsn-balanca { 0%, 15% { transform: rotate(0) scale(1); } 18% { transform: rotate(0) scale(1.03, .96); } 26% { transform: rotate(5deg); }
  36% { transform: rotate(-4deg); } 46% { transform: rotate(2.6deg); } 56% { transform: rotate(-1.5deg); } 66% { transform: rotate(.7deg); } 76%, 100% { transform: rotate(0); } }
@keyframes pdsn-onda { 0%, 16% { opacity: 0; transform: scale(.75); } 22% { opacity: 1; } 52% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; } }
@keyframes pdsn-onda2 { 0%, 22% { opacity: 0; transform: scale(.8); } 30% { opacity: .9; } 64% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pd-sino-anim.on, .pd-sino-anim.on * { animation-duration: .01s !important; } }
@media (prefers-reduced-motion: reduce) { .pd-video { display: none !important; } }
/* Padaria no celular em pe: videos verticais em tela cheia (scenes.js, cenaPadariaRetrato) */
.cena-padaria.pd-retrato { background: #f3e3c8 center 50% / cover no-repeat; }
.pdr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; display: none; pointer-events: none; }
.pdr-video.on { display: block; }
.pdr-video.topo { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .pdr-video { display: none !important; } }
/* cardapio: placa de madeira no MEIO da tela, igual ao exemplo da fono */
body.perfil-crianca.ui-padaria .kids-main { padding: 10px 16px; justify-content: center; }
/* quando o cardapio esta na tela, a bolha/botao saem do caminho (o som ja tocou) */
body.ui-padaria .kids-main:has(.opts) .kids-cue, body.ui-padaria .kids-main:has(.opts) .play-orb, body.ui-padaria .kids-main:has(.opts) #btn-repetir { display: none; }
body.ui-padaria .opt .opt-fig { display: none; }
body.ui-padaria .opts { grid-template-columns: 1fr 1fr; width: min(680px, 94vw); gap: clamp(10px, 2.2vw, 18px); position: relative;
  margin-top: clamp(44px, 6vw, 62px); padding: clamp(62px, 9vw, 96px) clamp(16px, 3vw, 30px) clamp(16px, 3vw, 30px);
  border-radius: 18px; background: #f9e9c4; border: 10px solid #8a4a1e; outline: 4px solid #e39a2a; outline-offset: -20px;
  box-shadow: 0 20px 44px rgba(0,0,0,.45), inset 0 0 0 6px #7a4019; }
body.ui-padaria .opts::before { content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%, -58%);
  width: 72%; aspect-ratio: 1056 / 220; background: url(../video/padaria/cardapio_banner.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); pointer-events: none; }
body.ui-padaria .opts::after { content: none; }
body.ui-padaria .opt { background: linear-gradient(180deg, #fff3cf, #f3d58f); border: 4px solid #7a4019; border-radius: 16px; padding: 14px 10px; min-height: clamp(64px, 11vw, 96px);
  justify-content: center; align-items: center; box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 4px 0 #5c2f10; }
body.ui-padaria .opt::before { content: none; }
body.ui-padaria .opt .lb { font-family: var(--font); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: #3b1f0a;
  font-size: clamp(1.05rem, 3.2vw, 1.7rem); line-height: 1.1; text-align: center; }
body.ui-padaria .opt:hover { transform: translateY(-2px); filter: brightness(1.04); }
body.ui-padaria .opt.certa { background: linear-gradient(180deg, #4fd27f, #2e9e5b); border-color: #1f7a43; box-shadow: 0 4px 0 #165c31; } body.ui-padaria .opt.certa .lb { color: #fff; }
body.ui-padaria .opt.errada { background: linear-gradient(180deg, #ef6b60, #d8453a); border-color: #a82d2d; box-shadow: 0 4px 0 #7e1f1f; } body.ui-padaria .opt.errada .lb { color: #fff; }
body.ui-padaria .kids-cue { display: none; }   /* a orelha acesa nas laterais ja diz qual lado (pedido da fono) */
@media (max-width: 620px) { body.ui-padaria .opts { border-width: 7px; outline-offset: -15px; box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 0 0 4px #7a4019; } body.ui-padaria .opt { border-width: 3px; } }

/* jogos do Walkie/Padaria: cartas sem animacao de entrada (transform animado + backdrop-filter
   deixava cartas invisiveis em alguns Chromes) */
body.ui-patas .opt { animation: none !important; }
/* ================= CELULAR EM PE (retrato): cada jogo arrumado para caber bonito ================= */
@media (orientation: portrait) and (max-width: 620px) {
  /* orelhas-guia: nos jogos com patinhas/livros/paezinhos a fila fica no alto, entao as orelhas
     descem para a altura do botao de tocar (nao cobrem nada) */
  body.perfil-crianca.ui-patas .orelhas-guia { top: 30vh; }
  /* escola e padaria: a cena ocupa o alto (largura toda); as orelhas ficam logo ABAIXO dela */
  /* escola e padaria: orelhas e padding do miolo vem do JS (encaixaAbaixo), medindo a cena */
  /* padaria: botao de tocar logo abaixo da cena (nao no meio do vazio); cardapio centralizado quando aparece */
  body.kids.perfil-crianca.ui-padaria .kids-main { justify-content: flex-start; padding: 0 16px 16px; }
  /* videos verticais em tela cheia: o cardapio e o botao ficam embaixo, por cima do balcao */
  body.kids.perfil-crianca.ui-padaria.pd-retrato .kids-main { justify-content: flex-end; padding: 0 12px 14px; }
  body.perfil-crianca .og { width: 52px; height: 52px; }
  /* personagem dos jogos genericos um pouco menor para nao encostar nos botoes */
  .heroi-rig { width: clamp(120px, 34vw, 170px); bottom: 2%; }
  /* Walkie na Floresta: radio em cima, cartas 2x2 grandes embaixo, menino na estrada */
  body.kids.perfil-crianca.ui-walkie .kids-main { justify-content: flex-start; padding: 6px 16px 0; gap: 10px; }
  body.ui-walkie .play-orb { width: clamp(120px, 40vw, 160px); }
  body.ui-walkie .opts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: min(330px, 92vw); gap: 10px; }
  body.ui-walkie .opt .opt-fig { width: 78px; height: 78px; min-width: 78px; min-height: 78px; }
  body.ui-walkie .opt .lb { font-size: .95rem; }
  /* Walkie vai a escola: sala inteira em cima (contain), figuras 2x2 embaixo */
  body.kids.perfil-crianca.ui-escola .kids-main { justify-content: flex-start; padding: 0 16px 16px; }
  body.ui-escola .opts { width: min(340px, 92vw); gap: 10px; padding: 10px; }
}
/* ---------- Walkie (criança): rádio + balão de madeira no lugar da bolha ---------- */
body.ui-walkie .kids-cue, body.ui-escola .kids-cue { display: none; }
body.ui-walkie .play-orb {
  width: clamp(90px, min(42vw, 36vh), 300px); height: auto; aspect-ratio: 822 / 862; border-radius: 0;   /* em tela baixa o radio encolhe para as cartas caberem */
  background: none; box-shadow: none; position: relative; overflow: visible;
  display: block; animation: none !important; transition: none;
}
body.ui-walkie .play-orb:hover, body.ui-walkie .play-orb:active { transform: none; }
body.ui-walkie .play-orb[disabled] { opacity: 1; }
body.ui-walkie .play-orb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
body.ui-walkie .ow-radio { filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
body.ui-walkie .ow-balao { transform-origin: 72% 28%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
body.ui-walkie .play-orb.pulsando .ow-balao { animation: balao-pulsa 1.5s ease-in-out infinite; }
body.ui-walkie .play-orb.tocando .ow-balao { animation: balao-toca .8s ease-in-out infinite; }
body.ui-walkie .play-orb[disabled]:not(.tocando) .ow-balao { filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)) saturate(.6) brightness(.85); }
@keyframes balao-pulsa {
  0%,100% { transform: scale(1); filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%     { transform: scale(1.06); filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)) drop-shadow(0 0 14px rgba(255,255,255,.75)); }
}
@keyframes balao-toca { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { body.ui-walkie .ow-balao { animation: none !important; } }

/* ---------- respostas ---------- */
.opts { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(620px, 100%); max-width: 100%; }
@media (min-width: 700px) { .opts { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); } }
.opt { min-width: 0; }
.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: 74px; height: 74px; width: clamp(54px, 11vw, 74px); height: clamp(54px, 11vw, 74px); flex: none; max-width: 100%; }   /* 1a linha = fallback p/ navegador sem clamp() */
.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 { overflow: visible; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.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; }
.casas .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;
}
.casas .casa svg { width: 74%; height: 74%; }
.casas .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; }
/* sem texto (crianca errou) nao mostra a pilula vazia */
.feedback:empty { display: none; }

/* ---------- 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;
}

/* ================= CELULAR E TABLET ================= */
/* Vale para qualquer largura de tela, retrato ou paisagem: o que decide
   é o espaço disponível, não o aparelho. */
@media (max-width: 620px) {
  .wrap, .wrap-narrow { width: calc(100% - 26px); }
  .progress { width: 96px; }
  .so-md { display: none; }
  .btn { padding: 10px 14px; }
  /* toda linha de botões vira coluna, mesma ordem, largura cheia */
  .linha-btn { flex-direction: column; align-items: stretch; }
  .linha-btn > .btn { flex: none; width: 100%; }
  /* cabeçalho de página: a ação desce e ocupa a largura toda */
  .pag-cab > .btn { width: 100%; }
  .pag-cab > .spacer { display: none; }
  /* abas/segmentos dividem a linha por igual */
  .seg button { flex: 1 1 auto; }
  /* cartões e modais ganham respiro lateral menor */
  .card { padding: 16px; }
  .modal-bg { padding: 10px; align-items: end; }
  .modal { max-height: 94dvh; }
  .modal-corpo { padding: 16px; }
  h1 { font-size: 1.55rem; }
  /* stats do relatório: três números lado a lado ainda cabem, mas menores */
  .stat b { font-size: 1.35rem; }
}
/* tablet e celular deitado: barra da atividade com respiro e os cartões
   de resposta nunca mais largos que a tela */
@media (max-width: 900px) {
  .topbar .wrap, .kids-bar .wrap { gap: 8px; }
  .opts, .escolhas { width: 100%; }
}
/* recorte do iPhone (notch / barra inferior) */
@supports (padding: max(0px)) {
  .wrap, .wrap-narrow { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .kids-main { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
  .toast { bottom: max(26px, env(safe-area-inset-bottom)); }
}

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

/* ---------- teste dos fones ---------- */
/* Duas colunas iguais; dentro de cada uma, chip em cima e os dois
   botões um embaixo do outro, esticados. Em tela estreita as colunas
   se empilham, mantendo a mesma ordem interna. */
.fones { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fone-col {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--r-md); background: var(--surface-2);
}
.fone-col .chip { align-self: flex-start; }
.fone-col .btn { width: 100%; }

/* ações dentro do jogo (Apagar / Pronto): mesma linha, centradas */
.escolhas .btn { flex: 1 1 140px; max-width: 240px; }

/* ================= TELAS DE ACESSO ================= */
/* Login, criar conta e acesso do cliente. Tela inteira, cartao unico,
   nenhum enfeite que dispute com o formulario. */
.auth {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 30px 16px 44px;
  background:
    radial-gradient(760px 420px at 50% -8%, var(--brand-soft), transparent 70%),
    radial-gradient(620px 380px at 88% 104%, var(--grape-soft), transparent 68%),
    var(--bg);
}
.auth-topo { text-align: center; margin-bottom: 22px; }
.auth-topo .brand { justify-content: center; margin-bottom: 10px; }
.auth-topo .brand-name { font-size: 1.9rem; }
.auth-topo p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.auth-card {
  width: min(420px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.32rem; margin: 0 0 3px; }
.auth-card > .sub { margin: 0 0 20px; color: var(--ink-soft); font-size: .88rem; }
.auth-card .btn-lg { width: 100%; margin-top: 4px; }
.auth-pe {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  text-align: center; font-size: .86rem; color: var(--ink-soft);
}
.auth-pe a { font-weight: 800; text-decoration: none; }
.auth-pe a:hover { text-decoration: underline; }
.auth-fora { margin-top: 20px; font-size: .84rem; color: var(--ink-faint); text-align: center; }
.auth-fora a { color: var(--ink-soft); }
.auth-erro {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--bad-soft); color: var(--bad); font-size: .86rem; font-weight: 700;
}

/* ---------- campo de codigo (modal do cliente) ---------- */
.codigo-campo {
  width: 100%; text-align: center; font-weight: 900;
  font-size: clamp(1.7rem, 7vw, 2.3rem); letter-spacing: .3em; text-indent: .3em;
  padding: 16px 10px; border-radius: var(--r-md); border: 2px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: var(--font);
  text-transform: uppercase;
}
.codigo-campo:focus {
  outline: none; border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.codigo-campo::placeholder { color: var(--ink-faint); letter-spacing: .3em; font-weight: 700; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.passos li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; }
.passos .num {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid;
  place-items: center; background: var(--brand-soft); color: var(--brand-deep);
  font-weight: 900; font-size: .84rem;
}
.passos b { display: block; }
.passos span { color: var(--ink-soft); }

/* ================= PÁGINA DO CLIENTE ================= */
/* Landing propria de quem vem treinar. Tom mais quente que o lado
   profissional e nenhuma palavra tecnica: quem le aqui e o paciente
   ou a familia, nao o fono. */
.cli-page { background: var(--bg); }
.cli-topbar {
  position: sticky; top: 0; z-index: 30; padding: 12px 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.cli-topbar .wrap { display: flex; align-items: center; gap: 10px; }

.cli-hero {
  padding: 44px 0 30px;
  background:
    radial-gradient(760px 420px at 10% 0%, var(--brand-soft), transparent 64%),
    radial-gradient(700px 420px at 94% 14%, var(--grape-soft), transparent 62%);
}
.cli-hero .wrap { display: grid; gap: 30px; align-items: center; }
@media (min-width: 860px) { .cli-hero .wrap { grid-template-columns: 1.05fr .95fr; gap: 44px; } }
.cli-hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 10px 0 12px; }
.cli-hero .lead { font-size: 1.06rem; color: var(--ink-soft); margin: 0 0 22px; max-width: 46ch; }

.hero-arte {
  width: 100%; max-width: 440px; margin-inline: auto; display: block;
  filter: drop-shadow(0 16px 34px rgba(12,60,84,.22));
}

.cli-sec { padding: 40px 0; }
.cli-sec h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: 6px; }
.cli-sec .sub { color: var(--ink-soft); margin: 0 0 24px; max-width: 54ch; }

.passo {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow); position: relative;
}
.passo .n {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 900; font-size: 1.05rem; margin-bottom: 12px;
  background: var(--brand-soft); color: var(--brand-deep);
}
.passo h3 { margin: 0 0 5px; font-size: 1.05rem; }
.passo p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.brinc {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
}
.brinc .ico {
  width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid;
  place-items: center; background: var(--surface-2); color: var(--brand);
}
.brinc b { display: block; font-size: .97rem; }
.brinc span { font-size: .87rem; color: var(--ink-soft); }

.faixa-fones {
  border-radius: var(--r-lg); padding: 26px 28px;
  background: linear-gradient(135deg, var(--brand), var(--grape)); color: #fff;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.faixa-fones .ic-hab { width: 46px; height: 46px; flex: none; }
.faixa-fones h3 { margin: 0 0 4px; color: #fff; font-size: 1.15rem; }
.faixa-fones p { margin: 0; opacity: .92; font-size: .92rem; max-width: 60ch; }

.cli-cta {
  text-align: center; padding: 46px 0 56px;
  background: radial-gradient(660px 340px at 50% 100%, var(--brand-soft), transparent 66%);
}
.cli-cta h2 { margin-bottom: 8px; }
.cli-cta p { color: var(--ink-soft); margin: 0 0 22px; }

/* ================= ÁREA DO PROFISSIONAL ================= */
.nav-prof { border-bottom: 1px solid var(--line); background: var(--surface); }
.nav-prof .wrap { display: flex; gap: 4px; overflow-x: auto; }
.nav-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px;
  text-decoration: none; color: var(--ink-soft); font-weight: 800; font-size: .92rem;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.nav-item:hover { color: var(--ink); }
.nav-item.on { color: var(--brand); border-bottom-color: var(--brand); }
.nav-item:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

/* campo de busca com lupa embutida */
.busca { position: relative; }
.busca .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }
.busca input { padding-left: 42px; }

/* ---------- permissões: consulta x casa ---------- */
.perm-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.perm-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--ink-soft); }
.perm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.perm-ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.perm-ponto.consulta { background: var(--brand); }
.perm-ponto.casa { background: var(--ok); }
.tbl td.col-sw { width: 58px; }
.tbl th.col-sw { width: 58px; font-size: .68rem; }
.switch.sw-casa input:checked + i { background: var(--ok); }
.switch input:disabled + i { opacity: .35; cursor: not-allowed; }

/* ---------- evolução: consulta x casa ---------- */
.origem-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.origem-card {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px;
  background: var(--surface); border-left: 5px solid var(--brand);
}
.origem-card.casa { border-left-color: var(--ok); }
.origem-card .top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.origem-card .top b { font-size: 1rem; }
.origem-card .num { display: flex; gap: 22px; }
.origem-card .num div span { display: block; font-size: .72rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em; }
.origem-card .num div b { font-size: 1.45rem; }
.origem-card .vazio { color: var(--ink-faint); font-size: .86rem; }

.chip-casa { background: var(--ok-soft); color: var(--ok); }
.chip-consulta { background: var(--brand-soft); color: var(--brand-deep); }

/* ---------- configurações ---------- */
.cfg-sec { margin-bottom: 18px; }
.cfg-sec > h2 { font-size: 1.12rem; margin: 0 0 4px; }
.cfg-sec > .sub { color: var(--ink-soft); font-size: .86rem; margin: 0 0 16px; }
.dupla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dupla .field + .field { margin-top: 0; }
.campo-erro { border-color: var(--bad) !important; }
.msg-erro { color: var(--bad); font-size: .8rem; font-weight: 700; margin: 6px 0 0; }

.plano-card {
  border: 2px solid var(--line); border-radius: var(--r-md); padding: 18px;
  background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.plano-card.atual { border-color: var(--brand); background: var(--brand-soft); }
.plano-card.plano-top { border: 2px solid var(--brand); }
.plano-card h3 { margin: 0; font-size: 1.05rem; }
.plano-card .preco { font-size: 1.5rem; font-weight: 900; }
.plano-card .preco small { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.plano-card ul { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; color: var(--ink-soft); }
.plano-card li { margin-bottom: 4px; }

/* assinatura: barra de filtros e janela de pagamento */
.pg-barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.pg-resumo {
  background: var(--brand-soft); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px;
}
.pg-resumo > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-resumo span { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-deep); }
.pg-resumo #pg-valor { font-size: 1.05rem; }
.pg-resumo #pg-valor b { font-size: 1.45rem; font-weight: 900; color: var(--ink); }
.pg-resumo p { margin: 4px 0 0; font-size: .84rem; color: var(--ink-soft); }
.pg-rot { font-size: .86rem; font-weight: 700; margin-bottom: 8px; }
.pg-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.pg-formas button {
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; color: var(--ink);
}
.pg-formas button small { font-size: .74rem; color: var(--ink-soft); }
.pg-formas button[aria-pressed=true] { border-color: var(--brand); background: var(--brand-soft); }
.pg-formas button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pg-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pg-grade .field { margin: 0; }
.pg-grade .pg-cheio { grid-column: 1 / -1; }
.pg-ir { margin-top: 6px; width: 100%; }
.pg-seg { text-align: center; margin: 10px 0 0; }

/* ================= PELE ADULTA DA ATIVIDADE ================= */
/* Sem cenário, sem personagem, sem cartão gigante. O adulto não precisa
   ser seduzido a ficar — precisa entender a tarefa e executar. Então:
   fundo neutro, tipografia sóbria, alvos de toque ainda generosos. */
body.perfil-adulto #play { background: var(--bg); }
body.perfil-adulto .kids-cena { display: none; }
body.perfil-adulto .kids-frente { min-height: 100dvh; }

body.perfil-adulto .kids-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
body.perfil-adulto .kids-bar .btn {
  background: transparent; color: var(--ink-soft);
  border: 1.5px solid var(--line); backdrop-filter: none;
}
body.perfil-adulto .kids-contador {
  background: var(--surface-2); color: var(--ink-soft); backdrop-filter: none;
}
body.perfil-adulto .progress { background: var(--surface-2); }

body.perfil-adulto .kids-main { gap: 26px; padding-top: 28px; }
body.perfil-adulto .kids-cue {
  background: transparent; box-shadow: none; backdrop-filter: none;
  padding: 0; color: var(--ink); gap: 10px;
}
body.perfil-adulto .kids-cue p { color: var(--ink-soft); font-weight: 600; font-size: 1rem; }

body.perfil-adulto .play-orb {
  /* altura explicita: como item de flex em coluna, o aspect-ratio
     sozinho deixava o circulo virar oval */
  width: 104px; height: 104px; flex: none;
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(14, 124, 134, .28);
}
body.perfil-adulto .play-orb .ic { width: 40%; height: 40%; }
body.perfil-adulto .play-orb.pulsando { animation: none; }

/* Respostas em texto: sem figura, sem animação de entrada. */
body.perfil-adulto .opts {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; width: min(560px, 100%);
}
body.perfil-adulto .opt,
body.perfil-adulto .escolha {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); box-shadow: none; animation: none;
  padding: 15px 14px; color: var(--ink);
}
body.perfil-adulto .opt .lb { font-size: 1rem; font-weight: 700; }
body.perfil-adulto .opt:hover,
body.perfil-adulto .escolha:hover { transform: none; border-color: var(--brand); background: var(--brand-soft); }
body.perfil-adulto .opt.marcada { background: var(--brand-soft); border-color: var(--brand); border-width: 2px; }
body.perfil-adulto .opt.certa,
body.perfil-adulto .escolha.certa { background: var(--ok-soft); border-color: var(--ok); animation: none; }
body.perfil-adulto .opt.errada,
body.perfil-adulto .escolha.errada { background: var(--bad-soft); border-color: var(--bad); animation: none; }

body.perfil-adulto .escolha-fig { width: 38px; height: 38px; }
body.perfil-adulto .escolha { min-width: 118px; flex: 0 1 auto; }

body.perfil-adulto .casas .casa {
  width: 66px; border-color: var(--line); background: var(--surface); color: var(--ink-soft);
}
body.perfil-adulto .casas .casa.cheia { background: var(--brand-soft); border-color: var(--brand); }

body.perfil-adulto .ear-badge { font-size: .95rem; padding: 6px 14px; }
body.perfil-adulto .feedback { font-size: 1rem; }

/* ================= GRADE INFANTIL ANIMADA ================= */
/* Aqui a animação é bem-vinda: o menu faz parte da brincadeira. No
   perfil adulto nada disto se aplica — lá o sóbrio é proposital. */
body.perfil-crianca {
  background:
    radial-gradient(900px 500px at 8% -6%, var(--sun-soft), transparent 62%),
    radial-gradient(800px 480px at 96% 8%, var(--brand-soft), transparent 60%),
    radial-gradient(700px 460px at 50% 104%, var(--grape-soft), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* bolhas flutuando ao fundo, atrás de tudo */
.bolhas { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bolhas i {
  position: absolute; border-radius: 50%; opacity: .16;
  background: linear-gradient(140deg, var(--brand), var(--grape));
  animation: subir linear infinite;
}
@keyframes subir {
  0%   { transform: translateY(20vh) scale(.6); opacity: 0; }
  12%  { opacity: .18; }
  88%  { opacity: .18; }
  100% { transform: translateY(-110vh) scale(1.15); opacity: 0; }
}
body.perfil-crianca main, body.perfil-crianca header { position: relative; z-index: 1; }

/* saudação com o personagem */
.ola {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-xl); padding: 18px 22px;
  box-shadow: var(--shadow); border: 3px solid var(--brand-soft);
}
.ola-heroi {
  width: clamp(120px, 18vw, 170px); height: clamp(120px, 18vw, 170px); flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, var(--sun-soft), var(--brand-soft) 72%);
  display: grid; place-items: center; position: relative;
  box-shadow: inset 0 -8px 18px rgba(10,60,80,.12);
  perspective: 520px;                     /* dá profundidade real ao giro */
}
.ola-heroi .pj { width: 84%; height: 84%; animation: pj-gira 6s cubic-bezier(.4,0,.6,1) infinite; }

/* ---------- personagem articulado ----------
   As três camadas se movem em tempos diferentes: o corpo respira com
   squash/stretch, a cabeça acompanha atrasada (follow-through) e o que
   está atrás — cabelo, asa, tentáculo — vem por último. É esse atraso
   entre as partes que faz parecer vivo; girar tudo junto parecia adesivo. */
.pj { display: block; overflow: visible; }
/* personagem em FOTO (Walkie): bolinha no cabecalho/escolha, corpo inteiro nas cenas */
.pj-foto { display: block; }
.pj-foto img, .pj-foto video { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.ola-heroi .pj-foto { border-radius: 50%; overflow: hidden; animation: none; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.ola-heroi .pj-foto { width: 100%; height: 100%; }
.ola-heroi .pj-foto img, .ola-heroi .pj-foto video { object-fit: cover; border-radius: 50%; }
.pers-op .pj-foto img, .pers-op .pj-foto video { border-radius: 50%; }
.pers-op .pj-foto { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
.pj-tras, .pj-corpo, .pj-cabeca { transform-box: fill-box; }
.pj-corpo  { transform-origin: 50% 100%; }
.pj-cabeca { transform-origin: 50% 94%; }
.pj-tras   { transform-origin: 50% 82%; }

.pj-vivo .pj-corpo  { animation: pj-respira 2.8s cubic-bezier(.45,0,.55,1) infinite; }
.pj-vivo .pj-cabeca { animation: pj-cabeca  2.8s cubic-bezier(.45,0,.55,1) infinite .1s; }
.pj-vivo .pj-tras   { animation: pj-tras    2.8s cubic-bezier(.45,0,.55,1) infinite .22s; }

@keyframes pj-respira {
  0%, 100% { transform: translateY(0)    scale(1, 1); }
  35%      { transform: translateY(-3px) scale(.985, 1.03); }
  70%      { transform: translateY(1px)  scale(1.035, .968); }
}
@keyframes pj-cabeca {
  0%, 100% { transform: translateY(0)    rotate(-2.5deg); }
  35%      { transform: translateY(-5px) rotate(1deg); }
  70%      { transform: translateY(1px)  rotate(3deg); }
}
@keyframes pj-tras {
  0%, 100% { transform: rotate(-3deg) scaleY(1); }
  35%      { transform: rotate(2deg)  scaleY(1.04); }
  70%      { transform: rotate(4deg)  scaleY(.97); }
}
@keyframes pj-gira {
  0%, 100% { transform: rotateY(-13deg) rotateX(3deg)  translateY(0); }
  50%      { transform: rotateY(13deg)  rotateX(-3deg) translateY(-6px); }
}

/* comemoração: agacha, salta, estica no ar e amortece na queda */
.pj-festa .pj-corpo  { animation: pj-pulo .88s cubic-bezier(.3,1.3,.5,1); }
.pj-festa .pj-cabeca { animation: pj-pulo-cab .88s cubic-bezier(.3,1.3,.5,1) .05s; }
@keyframes pj-pulo {
  0%   { transform: translateY(0)     scale(1, 1); }
  14%  { transform: translateY(4px)   scale(1.16, .84); }
  42%  { transform: translateY(-24px) scale(.88, 1.18); }
  64%  { transform: translateY(-13px) scale(1, 1); }
  84%  { transform: translateY(3px)   scale(1.12, .9); }
  100% { transform: translateY(0)     scale(1, 1); }
}
@keyframes pj-pulo-cab {
  0%   { transform: translateY(0)     rotate(0); }
  14%  { transform: translateY(5px)   rotate(-4deg); }
  42%  { transform: translateY(-27px) rotate(9deg); }
  64%  { transform: translateY(-14px) rotate(-4deg); }
  100% { transform: translateY(0)     rotate(0); }
}

.ola-heroi::after {
  content: ''; position: absolute; bottom: -10px; left: 50%; width: 56px; height: 10px;
  transform: translateX(-50%); border-radius: 50%;
  background: rgba(12, 60, 80, .2); filter: blur(4px);
  animation: sombra 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes sombra {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: .22; }
  35%      { transform: translateX(-50%) scale(.78);  opacity: .12; }
  70%      { transform: translateX(-50%) scale(1.06); opacity: .26; }
}

.ola h1 { margin: 0 0 2px; font-size: clamp(1.4rem, 4vw, 2rem); }
.ola p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.btn-heroi { margin-left: auto; }
@media (max-width: 620px) {
  .ola { padding: 16px; }
  .btn-heroi { margin-left: 0; width: 100%; }
}

/* escolha de personagem */
.pers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.pers-op {
  background: var(--surface); border: 3px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 8px; cursor: pointer; font: inherit; color: inherit; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .15s, border-color .15s, background .15s;
}
.pers-op svg { width: 66px; height: 66px; }
.pers-op .pj { overflow: visible; }
.pers-op:hover { transform: translateY(-4px) scale(1.03); border-color: var(--brand); }
.pers-op:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.pers-op[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.pers-op { animation: brota .4s cubic-bezier(.22,1.3,.4,1) backwards; }
.pers-op:nth-child(2) { animation-delay: .05s; }
.pers-op:nth-child(3) { animation-delay: .1s; }
.pers-op:nth-child(4) { animation-delay: .15s; }
.pers-op:nth-child(5) { animation-delay: .2s; }
.pers-op:nth-child(6) { animation-delay: .25s; }
.pers-op:nth-child(7) { animation-delay: .3s; }
.pers-op:nth-child(8) { animation-delay: .35s; }
/* o escolhido ganha vida; os outros ficam parados para nao competir */
.pers-op[aria-pressed="true"] { transform: translateY(-3px); }

/* cartões entram em cascata e reagem ao toque */
body.perfil-crianca .atv {
  animation: brota .42s cubic-bezier(.22,1.2,.4,1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes brota {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
}
body.perfil-crianca .atv:hover { transform: translateY(-6px) rotate(-.6deg) scale(1.02); }
body.perfil-crianca .atv:active { transform: translateY(-2px) scale(.99); }
body.perfil-crianca .hab-ic { animation: balanca 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .bolhas { display: none; }
  .ola-heroi, .pers-op[aria-pressed="true"] svg, body.perfil-crianca .hab-ic { animation: none; }
}

/* brilho passando no cartão ao tocar */
body.perfil-crianca .atv::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .6s ease;
}
body.perfil-crianca .atv:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  body.perfil-crianca .atv::after { display: none; }
  .ola-heroi .pj, .ola-heroi::after, .pers-op,
  .pj-vivo .pj-corpo, .pj-vivo .pj-cabeca, .pj-vivo .pj-tras { animation: none; }
}

/* ================= TROFÉUS ================= */
/* Contador que aparece na saudação da criança e no fim de toda atividade. */
.trofeu-caixa {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px;
  border-radius: 999px; background: linear-gradient(135deg, #fff2c2, #ffd45e);
  color: #6b4a06; font-weight: 900; box-shadow: 0 6px 16px rgba(230,170,20,.28);
  border: 2px solid #ffe9a3;
}
.trofeu-caixa .ic { width: 26px; height: 26px; color: #b8770a; }
.trofeu-caixa .num { font-size: 1.35rem; line-height: 1; min-width: 1.4ch; text-align: right; }
.trofeu-caixa small { font-weight: 800; font-size: .78rem; opacity: .85; }
.trofeu-caixa.pulsa { animation: trofeu-pulsa .6s cubic-bezier(.3,1.4,.4,1); }
@keyframes trofeu-pulsa { 40% { transform: scale(1.14) rotate(-3deg); } }
.ola .trofeu-caixa { margin-top: 8px; }

.trofeus-fim { text-align: center; }
.trofeus-fim .ganhos { display: flex; justify-content: center; gap: 8px; min-height: 58px; margin: 6px 0 4px; }
.trofeus-fim .ganhos i {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6cf, #ffc531 65%, #d98f04);
  color: #7a4d03; box-shadow: 0 6px 14px rgba(220,150,10,.35);
  animation: trofeu-pop .55s cubic-bezier(.3,1.5,.4,1) both;
}
.trofeus-fim .ganhos i .ic { width: 30px; height: 30px; }
.trofeus-fim .ganhos i:nth-child(2) { animation-delay: .25s; }
.trofeus-fim .ganhos i:nth-child(3) { animation-delay: .5s; }
@keyframes trofeu-pop {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.trofeus-fim .txt { font-weight: 800; margin: 0 0 10px; }
.trofeus-fim .txt b { color: #b8770a; }
.trofeus-fim .nada { color: var(--ink-soft); font-size: .9rem; margin: 0; }
body.perfil-adulto .trofeus-fim .ganhos i { width: 40px; height: 40px; animation: none; box-shadow: none; }
body.perfil-adulto .trofeus-fim .ganhos i .ic { width: 22px; height: 22px; }

/* ---------- troféus ao vivo (barra do jogo) ---------- */
.kids-trofeus {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px;
  border-radius: 999px; background: linear-gradient(135deg, #fff2c2, #ffd45e);
  color: #6b4a06; font-weight: 900; font-size: .9rem; border: 2px solid #ffe9a3;
  box-shadow: 0 4px 12px rgba(230,170,20,.28);
}
.kids-trofeus .ic { width: 18px; height: 18px; color: #b8770a; }
.kids-trofeus.pulsa { animation: trofeu-pulsa .55s cubic-bezier(.3,1.4,.4,1); }
body.perfil-adulto .kids-trofeus { background: var(--surface-2); color: var(--ink-soft); border-color: var(--line); box-shadow: none; }
body.perfil-adulto .kids-trofeus .ic { color: var(--ink-soft); }
/* troféu que voa da resposta certa até a barra */
.trofeu-voa {
  position: fixed; z-index: 75; pointer-events: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #7a4d03;
  background: radial-gradient(circle at 35% 30%, #fff6cf, #ffc531 65%, #d98f04);
  box-shadow: 0 6px 14px rgba(220,150,10,.4); transform: translate(-50%, -50%);
  animation: trofeu-voa .8s cubic-bezier(.3,0,.5,1) forwards;
}
.trofeu-voa .ic { width: 24px; height: 24px; }
@keyframes trofeu-voa {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.5); opacity: 1; }
}
/* fim da atividade para o cliente: só troféus, sem placar */
.fim-cliente { text-align: center; }
.fim-cliente .grande {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6cf, #ffc531 65%, #d98f04); color: #7a4d03;
  box-shadow: 0 10px 26px rgba(220,150,10,.35); animation: trofeu-pop .7s cubic-bezier(.3,1.5,.4,1) both;
}
.fim-cliente .grande .ic { width: 60px; height: 60px; }
.fim-cliente .ganhou { font-size: 1.5rem; font-weight: 900; margin: 0; }
.fim-cliente .ganhou b { color: #b8770a; }
.fim-cliente .bonus { margin: 4px 0 12px; color: var(--ink-soft); font-weight: 700; }
.fim-cliente .bonus b { color: #0d7a52; }
body.perfil-adulto .fim-cliente .grande { width: 72px; height: 72px; animation: none; box-shadow: none; }
body.perfil-adulto .fim-cliente .grande .ic { width: 38px; height: 38px; }
body.perfil-adulto .fim-cliente .ganhou { font-size: 1.15rem; }

/* ---------- orelhas-guia (criança) ---------- */
/* Uma orelha de cada lado da tela; a do lado pedido acende com brilho
   e ondas. Só no perfil criança e só enquanto há pista de orelha. */
.orelhas-guia { display: none; }
body.perfil-crianca .orelhas-guia {
  display: block; position: fixed; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 3; pointer-events: none; transition: opacity .3s;
}
body.perfil-crianca .orelhas-guia.some { opacity: 0; }
.og {
  position: absolute; top: 0; width: clamp(56px, 9vw, 96px); height: clamp(56px, 9vw, 96px);
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.55); color: #8aa3b3; border: 3px solid rgba(255,255,255,.7);
  transition: transform .25s, background .25s, color .25s, box-shadow .25s;
}
.og svg { width: 58%; height: 58%; }
.og img { width: 66%; height: 66%; object-fit: contain; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.ear-badge .ear-img { height: 28px; width: auto; vertical-align: middle; }
.og-l { left: clamp(8px, 2vw, 24px); }
.og-r { right: clamp(8px, 2vw, 24px); }
.og.on {
  background: #fff; color: var(--ear-l); border-color: var(--ear-l);
  box-shadow: 0 0 0 6px rgba(47,128,237,.22), 0 8px 22px rgba(10,50,70,.25);
  transform: scale(1.12); animation: og-pulsa 1.2s ease-in-out infinite;
}
.og-r.on { color: var(--ear-r); border-color: var(--ear-r); box-shadow: 0 0 0 6px rgba(226,87,76,.22), 0 8px 22px rgba(10,50,70,.25); }
.og.on::before, .og.on::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid currentColor; opacity: 0; animation: og-onda 1.6s ease-out infinite;
}
.og.on::after { animation-delay: .8s; }
@keyframes og-pulsa { 50% { transform: scale(1.2); } }
@keyframes og-onda { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (max-width: 620px) {
  /* no celular as orelhas ficam na linha acima do cartão de pista, que desce um pouco */
  body.perfil-crianca .orelhas-guia { top: calc(68px + env(safe-area-inset-top, 0px)); }
  body.perfil-crianca .kids-main { padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) { .og.on, .og.on::before, .og.on::after { animation: none; } }

/* ================= ABERTURA COM HISTORINHA ================= */
.intro { position: fixed; inset: 0; z-index: 85; background: #000; opacity: 0; transition: opacity .8s; overflow: hidden; }
.intro.on { opacity: 1; }
.intro.imediato { transition: none; }
/* capa PARADA: nenhuma animacao, nenhum filtro (pedido da fono) */
.intro-capa { position: absolute; inset: 0; background: #000 center / cover no-repeat; }
.intro-capa-foco { display: none; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; background: transparent; }
.intro-video.hidden { display: none; }
/* celular em pe: a capa e larga, entao mostra ela inteira (contain) sobre uma copia desfocada */
@media (orientation: portrait) and (max-width: 820px) {
  .intro-capa { filter: blur(18px) brightness(.72); transform: scale(1.12); }
  .intro-capa-foco { display: block; position: absolute; inset: 0; background: transparent center 24% / contain no-repeat; }
  .intro-video { object-fit: contain; object-position: center 24%; }
  /* video vertical proprio para o celular: preenche a tela, sem copia desfocada */
  .intro.video-retrato .intro-video { object-fit: cover; object-position: center; }
  .intro.video-retrato .intro-capa { filter: none; transform: none; }
  .intro.video-retrato .intro-capa-foco { display: none; }
}
/* cartao branco translucido, canto inferior direito, letra preta */
.intro-cartao {
  position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 32px)); max-height: 62%; overflow: auto;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 22px; padding: 18px 22px 20px; color: #000; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s;
}
.intro.on .intro-cartao { opacity: 1; transform: none; }
.intro-instrucao { margin: 0; font-family: var(--font); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.35; color: #000; }
.intro-texto { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.15); }
.intro.sem-texto .intro-texto { display: none; }
.intro.sem-cartao .intro-cartao { display: none; }
.intro-texto p { margin: 0 0 8px; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.45; color: #000;
  opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.intro-texto p.on { opacity: 1; transform: none; }
/* capa em camadas: base parada + Walkie que entra na bolinha e pisca */
.intro-arte { position: absolute; }
.intro-arte.hidden { display: none; }
.intro.com-arte .intro-capa-foco { display: none; }
.ia-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ia-cabeca { position: absolute; transform-origin: 54% 53%; animation: ia-entra 1.15s cubic-bezier(.2,.9,.25,1.05) .55s both; }
.ia-cabeca img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes ia-entra {
  0%   { opacity: 0; transform: translate(-2%, 46%) scale(.15) rotate(-14deg); }
  35%  { opacity: 1; }
  62%  { opacity: 1; transform: translate(0, -3%) scale(1.09) rotate(3deg); }
  82%  { transform: translate(0, 1%) scale(.97) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
/* capa animada por quadros: atlas 5x4, um quadro por vez */
.intro-sprite { left: 50%; top: 3vh; transform: translateX(-50%); width: min(106vw, 134vh); aspect-ratio: 3 / 2; }
.is-quadro { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 500% 400%; }
@media (orientation: portrait) and (max-width: 820px) { .intro-sprite { top: 14vh; width: 112vw; } }
.intro.com-arte .intro-capa { filter: none; transform: none; }
/* aro que "estoura" na bolinha quando ele chega */
.ia-anel { position: absolute; width: 27%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.8);
  border: 6px solid rgba(255,255,255,.95); opacity: 0; animation: ia-anel .75s ease-out 1.25s both; pointer-events: none; }
@keyframes ia-anel { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.9); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); } }
/* pálpebras: duas pelotas cor de pele que fecham de cima para baixo */
.ia-palpebra { position: absolute; display: block; border-radius: 50%; background: linear-gradient(180deg, #f6a971, #fba669 60%, #ef9456);
  border-bottom: 3px solid #4a2410; transform: scaleY(0); transform-origin: 50% 0; animation: ia-pisca 3.8s linear 2.6s infinite; }
.ia-pe { left: 13.2%; top: 39.6%; width: 17%; height: 16.5%; }
.ia-pd { left: 38.8%; top: 46.4%; width: 20%; height: 17.5%; transform: scaleY(0) rotate(-9deg); animation-name: ia-pisca-d; }
@keyframes ia-pisca   { 0%, 90%, 100% { transform: scaleY(0); } 92.5% { transform: scaleY(1.04); } 95% { transform: scaleY(0); }
                        96.5% { transform: scaleY(1.04); } 98.5% { transform: scaleY(0); } }
@keyframes ia-pisca-d { 0%, 90%, 100% { transform: scaleY(0) rotate(-9deg); } 92.5% { transform: scaleY(1.04) rotate(-9deg); } 95% { transform: scaleY(0) rotate(-9deg); }
                        96.5% { transform: scaleY(1.04) rotate(-9deg); } 98.5% { transform: scaleY(0) rotate(-9deg); } }
@media (prefers-reduced-motion: reduce) { .ia-cabeca, .ia-anel, .ia-palpebra { animation: none; } .ia-cabeca { opacity: 1; } }
/* notinhas musicais flutuando (abertura com musiquinha) */
.intro-notas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.intro-notas i { position: absolute; bottom: -60px; width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); color: rgba(255,255,255,.92);
  opacity: 0; animation: nota-sobe 7s linear infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.intro-notas i:nth-child(3n) { color: #ffe27a; } .intro-notas i:nth-child(3n+1) { color: #bfe9ff; }
.intro-notas i svg { width: 100%; height: 100%; fill: currentColor; display: block; }
@keyframes nota-sobe {
  0%   { transform: translateY(0) rotate(-8deg) scale(.8); opacity: 0; }
  10%  { opacity: .95; }
  50%  { transform: translateY(-45vh) translateX(18px) rotate(8deg) scale(1); }
  90%  { opacity: .9; }
  100% { transform: translateY(-92vh) translateX(-10px) rotate(-6deg) scale(1.05); opacity: 0; }
}
.intro.fechando .intro-notas { opacity: 0; transition: opacity 1.2s; }
@media (prefers-reduced-motion: reduce) { .intro-notas { display: none; } }
.intro-pular { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; background: rgba(255,255,255,.85); color: #16313d; }
/* escurece da BORDA para o CENTRO: um circulo transparente com sombra preta
   em volta que vai encolhendo ate fechar */
.intro-iris { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
  border-radius: 50%; box-shadow: 0 0 60px 200vmax #000; pointer-events: none;
  transition: width 2.2s cubic-bezier(.6,0,.8,.4), height 2.2s cubic-bezier(.6,0,.8,.4), margin 2.2s cubic-bezier(.6,0,.8,.4); }
.intro-iris.on { width: 0; height: 0; margin: 0; }
.intro-preto { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .4s; pointer-events: none; }
.intro-preto.on { opacity: 1; }
@media (max-width: 640px) {
  .intro-cartao { right: 12px; left: 12px; width: auto; bottom: 12px; padding: 14px 16px 16px; border-radius: 18px; max-height: 55%; }
}
@media (prefers-reduced-motion: reduce) { .intro-iris.on { transition-duration: .4s; } }

/* ================= CENA DO WALKIE ================= */
.cena-walkie { background: none; }
/* fundo PARADO: sem brisa, sem luz pulsando; so a nevoa no pe da cachoeira se mexe */
.wk-fundo { position: absolute; inset: 0; background-size: cover; background-position: center center; }
/* video da floresta: mesmo cover centrado do fundo, por baixo do menino e da nevoa */
.wk-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; z-index: 0; }
@media (prefers-reduced-motion: reduce) { .wk-video { display: none; } }
.wk-espuma { position: absolute; pointer-events: none; }
.wk-espuma i { position: absolute; bottom: 10%; width: 22%; height: 40%; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(6px);
  animation: wk-nevoa 2.4s ease-in-out infinite; opacity: 0; }
.wk-espuma i:nth-child(1) { left: 4%; }
.wk-espuma i:nth-child(2) { left: 24%; animation-delay: .5s; }
.wk-espuma i:nth-child(3) { left: 44%; animation-delay: 1s; }
.wk-espuma i:nth-child(4) { left: 62%; animation-delay: 1.5s; }
.wk-espuma i:nth-child(5) { left: 78%; animation-delay: .8s; }
@keyframes wk-nevoa { 0% { opacity: 0; transform: translateY(10%) scale(.8); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-70%) scale(1.5); } }
.wk-palco {
  position: absolute; left: 6%; bottom: 3%; height: clamp(220px, 36vh, 420px); aspect-ratio: .62;
  z-index: 2; pointer-events: none; transform-origin: 50% 100%;
}
.wk-corpo { position: absolute; inset: 0; transform-origin: 50% 100%; }
.wk-heroi { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 10px rgba(10,40,20,.35)); opacity: 0; transition: opacity .16s ease; will-change: opacity; }
.wk-heroi.on { opacity: 1; }
.wk-sombra { position: absolute; left: 15%; right: 15%; bottom: -2%; height: 5%; border-radius: 50%; background: rgba(10,40,20,.35); filter: blur(5px); transition: transform .3s; }
/* parado e ouvindo: NENHUM movimento (pedido da fono 06/10/2026) */
.wk-parado .wk-corpo, .wk-ouvindo .wk-corpo { animation: none; }
/* acertou: agacha, pula esticando, aterrissa amortecendo */
.wk-festa .wk-corpo { animation: wk-pula 1.35s cubic-bezier(.3,1.25,.5,1); }
.wk-festa .wk-sombra { animation: wk-sombra-pulo 1.35s ease-in-out; }
@keyframes wk-pula {
  0%   { transform: scale(1, 1); }
  14%  { transform: scale(1.12, .86); }
  42%  { transform: translateY(-72px) scale(.94, 1.1) rotate(-4deg); }
  64%  { transform: translateY(-28px) rotate(3deg); }
  82%  { transform: scale(1.08, .92); }
  100% { transform: scale(1, 1); }
}
@keyframes wk-sombra-pulo { 42% { transform: scale(.7); opacity: .5; } }
/* errou */
.wk-cai .wk-corpo { animation: none; }
/* susto: recua o tronco e volta */
.wk-palco[data-cai="2"] .wk-corpo { animation: wk-susto .38s cubic-bezier(.2,.9,.3,1); }
@keyframes wk-susto { 35% { transform: translateY(-9px) translateX(3%) rotate(3deg) scale(1.03); } 100% { transform: none; } }
/* impacto: tela treme, poeira sobe do chao */
.wk-palco[data-cai="3"] { animation: wk-baque .5s ease-out; }
@keyframes wk-baque { 15%,55% { transform: translate(-4px, 2px); } 35%,75% { transform: translate(4px, -1px); } }
.wk-poeira { position: absolute; left: 20%; right: 20%; bottom: 0; height: 30%; pointer-events: none; }
.wk-poeira i { position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: rgba(230,214,180,.85); opacity: 0; }
.wk-palco[data-cai="3"] .wk-poeira i { animation: wk-po .7s ease-out forwards; }
.wk-poeira i:nth-child(1) { --dx: -46px; --dy: -22px; }
.wk-poeira i:nth-child(2) { --dx: -26px; --dy: -40px; width: 9px; height: 9px; animation-delay: .05s; }
.wk-poeira i:nth-child(3) { --dx: 0px;   --dy: -46px; width: 14px; height: 14px; }
.wk-poeira i:nth-child(4) { --dx: 26px;  --dy: -38px; width: 10px; height: 10px; animation-delay: .04s; }
.wk-poeira i:nth-child(5) { --dx: 48px;  --dy: -20px; }
.wk-poeira i:nth-child(6) { --dx: 12px;  --dy: -30px; width: 7px; height: 7px; animation-delay: .08s; }
@keyframes wk-po { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.6); } }
/* ajoelha em camera lenta: o corpo desce e se recolhe */
.wk-palco[data-cai="4"] .wk-corpo { animation: wk-ajoelha .62s cubic-bezier(.4,0,.6,1) forwards; }
.wk-palco[data-cai="5"] .wk-corpo { animation: wk-triste 1s ease-in-out infinite; transform: translateY(2%) scale(.98); }
@keyframes wk-ajoelha { 0% { transform: translateY(-2%) scale(1.02, .98); } 100% { transform: translateY(2%) scale(.98); } }
@keyframes wk-triste { 50% { transform: translateY(2.6%) scale(.975); } }
@media (max-width: 620px) {
  .wk-palco { left: 3%; height: clamp(190px, 30vh, 300px); }
}

/* cartas ilustradas (imagem) no lugar do SVG */
.fig-carta { object-fit: contain; border-radius: 0; }   /* nada de canto arredondado cortando o desenho */

/* ================= Estacao (integracao binaural, dígitos dicóticos) =================
   Abertura: capa da fono com zoom lento e o botao JOGAR desenhado ganhando um
   brilho; menu de niveis como painel de partidas; megafone fixo no canto
   superior esquerdo; painel de numeros (1 a 9) por cima da cena esmaecida. */
.intro.anima-estacao .intro-capa { animation: est-kb 16s ease-in-out infinite alternate; }
@keyframes est-kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.intro-botao { position: absolute; z-index: 5; background: none; border: 0; border-radius: 30px; cursor: pointer; padding: 0;
  animation: est-jogar 1.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.intro-botao.hidden { display: none; }
@keyframes est-jogar { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 225, 80, .8); transform: scale(1); } 50% { box-shadow: 0 0 0 18px rgba(255, 225, 80, 0); transform: scale(1.04); } }

.mj-estacao .mj-fundo::after { background: rgba(10, 20, 60, .5); }
.mj-estacao .mj-painel { background: #0f1d4d; color: #fff; border: 4px solid #2a3f8f; border-radius: 18px; padding: 26px 28px 28px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); width: min(640px, 100%); }
.mj-estacao .mj-painel::before { display: none; }
.mj-estacao .mj-cab p { color: #ffd23f; font-family: var(--font); font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.mj-estacao .mj-btns.sem-como { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mj-estacao .mj-btn { font-family: var(--font); background: #16255f; color: #ffd23f; border: 2px solid #3550a8; border-radius: 12px; min-height: 76px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25); }
.mj-estacao .mj-btn b { font-size: clamp(1.2rem, 2.6vw, 1.55rem); }
.mj-estacao .mj-btn:hover { background: #1f3380; filter: none; }

.cena-estacao { background: #0f1d4d; overflow: hidden; }
.est-blur { position: absolute; inset: 0; background: #1a2a5e center / cover no-repeat; }   /* imagem ja desfocada: nada de filter (pesado no celular) */
.est-palco { position: absolute; overflow: hidden; }
.est-img, .est-video { position: absolute; display: none; max-width: none; max-height: none; }   /* o img global tem max-width:100% e espremia a cena no celular */
.est-img.on, .est-video.on { display: block; }
.est-video.on { z-index: 2; }
.est-sombra { position: absolute; inset: 0; background: rgba(8, 14, 40, 0); transition: background .5s; pointer-events: none; }
.cena-estacao.est-escolha .est-sombra { background: rgba(8, 14, 40, .5); }

/* o botao e o INTERFONE desenhado no video; o #orb e um alvo invisivel em cima dele (a cena posiciona por JS).
   Esperando o toque: anel amarelo pulsando e um balanco leve; tocando: brilho continuo */
body.ui-estacao .play-orb { background: none; box-shadow: none; border: 0; border-radius: 50%; z-index: 7; transition: none; height: auto; }
body.ui-estacao .play-orb[disabled] { opacity: 1; }
body.ui-estacao .play-orb.pulsando { animation: est-mega 1.6s ease-in-out infinite; }
@keyframes est-mega {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .95), 0 0 0 0 rgba(255, 255, 255, .6); transform: rotate(-4deg) scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(255, 210, 63, 0), 0 0 32px 12px rgba(255, 220, 90, .6); transform: rotate(4deg) scale(1.05); }
}
body.ui-estacao .play-orb.tocando { animation: est-mega-toca .7s ease-in-out infinite; }
@keyframes est-mega-toca { 0%, 100% { box-shadow: 0 0 18px 6px rgba(255, 220, 90, .6); } 50% { box-shadow: 0 0 36px 14px rgba(255, 220, 90, .9); } }
body.ui-estacao .play-orb.esgotado { opacity: .35; animation: none; }

body.ui-estacao #cue, body.ui-estacao .kids-cue, body.ui-estacao .tiny { display: none !important; }
body.ui-estacao .orelhas-guia, body.ui-estacao #orelhas { display: none !important; }   /* sempre nas duas orelhas: sem desenho de orelha */
body.kids.perfil-crianca.ui-estacao .kids-main { justify-content: center; padding: 70px 16px 24px; gap: 12px; }
body.ui-estacao .opts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: min(400px, 92vw); gap: 10px; padding: 48px 14px 14px; position: relative;
  background: #0f1d4d; border: 4px solid #2a3f8f; border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
body.ui-estacao .opts::before { content: 'Números'; position: absolute; left: 0; right: 0; top: 0; height: 34px; line-height: 34px; text-align: center;
  background: #ffd23f; color: #0f1d4d; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; border-radius: 12px 12px 0 0; }
body.ui-estacao .opt { background: #16255f; border: 2px solid #3550a8; border-radius: 10px; color: #ffd23f; padding: 0; aspect-ratio: 1; justify-content: center;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25); animation: none; position: relative; overflow: hidden; gap: 0; }
body.ui-estacao .opt::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .35); }
body.ui-estacao .opt .lb { font-size: clamp(1.9rem, 8vw, 2.7rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
body.ui-estacao .opt:hover { transform: none; border-color: #ffd23f; }
body.ui-estacao .opt.marcada { background: #ffd23f; color: #0f1d4d; border-color: #fff; }
body.ui-estacao .opt.certa { background: #2e9e5b; color: #fff; border-color: #fff; }
body.ui-estacao .opt.errada { background: #d8453a; color: #fff; border-color: #fff; }
body.ui-estacao .opt[disabled] { opacity: 1; }
body.ui-estacao .patas .pata { color: #2a3f8f; }
body.ui-estacao .feedback { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

@media (orientation: portrait) and (max-width: 620px) {
  body.kids.perfil-crianca.ui-estacao .kids-main { justify-content: flex-end; padding: 0 16px 18px; }   /* painel embaixo, por cima do video inteiro */
  body.ui-estacao .opts { width: min(240px, 72vw); gap: 7px; padding: 34px 8px 8px; }
  body.ui-estacao .opts::before { height: 28px; line-height: 28px; font-size: .7rem; }
  body.ui-estacao .opt .lb { font-size: 1.6rem; }
  body.kids.perfil-crianca.ui-estacao .kids-main { gap: 6px; }
  .mj-estacao .mj-painel { padding: 20px 14px 18px; }
  .mj-estacao .mj-btns { gap: 8px; }
  .mj-estacao .mj-btn { min-height: 62px; }
  .mj-estacao .mj-btn b { white-space: nowrap; font-size: clamp(.95rem, 4.4vw, 1.3rem); }
}
/* estacao, tela deitada: megafone no canto alto esquerdo, orelhas mais para baixo (nao cobrem o megafone) */
body.perfil-crianca.ui-estacao .orelhas-guia { top: 42vh; }

/* abertura da estacao: botao JOGAR proprio (amarelo com borda azul, como na capa da fono), embaixo no centro */
.intro-botao.intro-jogar { left: 50%; top: auto; bottom: max(26px, 6vh); transform: translateX(-50%); width: min(440px, 72vw); height: clamp(74px, 12vh, 112px);
  border-radius: 999px; background: linear-gradient(#ffe45c, #f4b400); border: 5px solid #1b3b8f; box-shadow: 0 10px 0 #0f1d4d, 0 18px 34px rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; gap: 20px; color: #0f1d4d; font-family: var(--font); font-weight: 900;
  font-size: clamp(1.7rem, 5vw, 2.7rem); letter-spacing: .05em; -webkit-text-stroke: 1px #0f1d4d; animation: est-jogar-pulsa 1.4s ease-in-out infinite; }
.intro-jogar .ij-play { width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 30px solid #1b3b8f; }
@keyframes est-jogar-pulsa { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
.intro-botao.intro-jogar:active { transform: translateX(-50%) translateY(5px); box-shadow: 0 5px 0 #0f1d4d, 0 10px 20px rgba(0, 0, 0, .4); animation: none; }

/* menu de niveis com video de fundo (estacao: trem passando por montanhas) */
.mj-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; }
.mj-estacao .mj-fundo::after { background: rgba(10, 20, 60, .32); }

/* ============ Pizzaria (figura-fundo, 29/10/2026) ============
   Cena = videos da pizzaria em tela cheia. O #orb e o BALAO do cliente (alvo invisivel, posicionado por JS);
   o #resp vira a TELA DO TABLET (posicionado por JS em cima da arte da fono) e recebe a comanda. */
.cena-pizzaria { background: #3b2412; overflow: hidden; }
.pz-blur { position: absolute; inset: 0; background: #3b2412 center / cover no-repeat; }
.pz-palco { position: absolute; inset: 0; overflow: hidden; }
.pz-palco .pz-video, .pz-palco .pz-tablet { position: absolute; max-width: none; display: block; object-fit: cover; }
.pz-palco { position: absolute; inset: 0; }
.pz-tablet { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.pz-sino { opacity: 0; transition: opacity .3s ease; }
/* tablet: so aparece (sem deslizar nem dar zoom) */
.cena-pizzaria.pz-tablet-on .pz-tablet { opacity: 1; }
.cena-pizzaria.pz-sino-on .pz-sino { opacity: 1; }

body.ui-pizzaria .play-orb { background: none; box-shadow: none; border: 0; border-radius: 50%; z-index: 7; transition: none; height: auto; }
body.ui-pizzaria .play-orb[disabled] { opacity: 1; }
body.ui-pizzaria .play-orb.esgotado { opacity: .35; animation: none; }
/* botao de play azul em cima do balao (como a referencia da fono): cobre o rabisco, raios amarelos e um vai-e-vem pequeno */
body.ui-pizzaria .play-orb, body.ui-pizzaria .play-orb.pulsando, body.ui-pizzaria .play-orb.tocando { display: grid; place-items: center; animation: none !important; box-shadow: none !important; transform: none !important; }   /* sem anel nem pulso no balao inteiro */
body.ui-pizzaria.jogo-auto .play-orb { display: none; }
body.ui-padaria.jogo-auto .play-orb { display: none; }   /* Padaria: depois do 1o play, a sequencia segue sozinha (sino e proximo cliente) */
.pz-cobre { position: absolute; left: 50%; top: 50%; width: 82%; height: 58%; transform: translate(-50%, -50%); border-radius: 50%; background: #fdf6ea; transition: opacity .2s; }
.pz-raios { position: absolute; left: 50%; top: 50%; width: 94%; transform: translate(-50%, -50%); overflow: visible; fill: none; stroke: #f4b72c; stroke-width: 3; stroke-linecap: round; transition: opacity .2s; animation: pz-raios 1.4s ease-in-out infinite; }
.pz-play { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  background: radial-gradient(circle at 50% 22%, #7fcbff 0%, #2d8ff2 48%, #1565d8 100%); border: max(2px, .45vmin) solid #fff;
  box-shadow: 0 0 0 max(1.5px, .3vmin) #2b6fc4, 0 max(3px, .8vmin) max(6px, 1.2vmin) rgba(0, 40, 100, .38); animation: pz-vaiem 1.4s ease-in-out infinite; transition: opacity .2s; }
.pz-play::before { content: ''; position: absolute; left: 14%; right: 14%; top: 7%; height: 36%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.pz-play svg { position: relative; width: 50%; height: 50%; fill: #fff; margin-left: 8%; filter: drop-shadow(0 1px 1px rgba(0, 30, 90, .35)); }
/* o balao do video em pe e maior em relacao ao botao: o disco creme precisa cobrir o rabisco inteiro */
.play-orb[data-fmt="p"] .pz-cobre { width: 86%; height: 62%; }
.play-orb[data-fmt="r"] .pz-cobre { width: 92%; height: 66%; }
.play-orb[data-fmt="r"] .pz-raios { width: 82%; }
.play-orb[data-fmt="r"] .pz-play { width: 44%; }
@keyframes pz-vaiem { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.12); } }
@keyframes pz-raios { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
body.ui-pizzaria .play-orb.tocando .pz-play, body.ui-pizzaria .play-orb.tocando .pz-cobre, body.ui-pizzaria .play-orb.tocando .pz-raios { opacity: 0; }   /* enquanto o pedido toca o balao volta a mostrar o rabisco */
body.ui-pizzaria .play-orb:hover .pz-play { filter: brightness(1.07); }

body.ui-pizzaria #cue, body.ui-pizzaria .kids-cue, body.ui-pizzaria .tiny, body.ui-pizzaria #fb { display: none !important; }
body.ui-pizzaria .orelhas-guia, body.ui-pizzaria #orelhas { display: none !important; }
body.ui-pizzaria.orelha-lateral .orelhas-guia, body.ui-pizzaria.orelha-lateral #orelhas { display: block !important; }   /* so quando o pedido vem so de um lado */
body.perfil-crianca.ui-pizzaria .kids-main { justify-content: center; padding: 70px 16px 24px; }
body.ui-pizzaria .patas .pata { color: #8a3b1e; }

/* tela do tablet (#resp) */
body.ui-pizzaria #resp { z-index: 8; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; pointer-events: none; }
body.ui-pizzaria #resp > * { pointer-events: auto; }
.pz-comanda { --u: calc(var(--tw, 330px) / 100); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%;
  padding: calc(var(--u) * 3) calc(var(--u) * 3.4); gap: calc(var(--u) * 1.7); color: #3a2414; box-sizing: border-box; animation: pz-entra .45s ease .1s backwards; }
@keyframes pz-entra { from { opacity: 0; } }
@keyframes pz-item { from { opacity: 0; } }
.pz-titulo { margin: 0; text-align: center; font-weight: 800; font-size: max(12px, calc(var(--u) * 4.2)); line-height: 1.15; color: #7a3f16; }
.pz-ouvir { flex: none; align-self: center; display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 4.4); border: 0; border-radius: 999px;
  cursor: pointer; font: inherit; font-weight: 800; font-size: max(12px, calc(var(--u) * 3.9)); color: #fff; background: #2d8ff2; box-shadow: inset 0 calc(var(--u) * -.7) 0 rgba(0, 0, 0, .2); }
.pz-ouvir svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; }
.pz-ouvir:hover { filter: brightness(1.07); }
.pz-lista { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); flex: 1 1 auto; min-height: 0; justify-content: center; }
.pz-comanda .opt { animation: pz-item .3s ease backwards; box-shadow: none; flex-direction: row; justify-content: center; text-align: center; padding: 0 calc(var(--u) * 2);
  background: #fffaf0; border: calc(var(--u) * .5) solid #d8c4a0; border-radius: calc(var(--u) * 2.4); color: #3a2414;
  flex: 1 1 0; min-height: max(30px, calc(var(--u) * 9)); max-height: calc(var(--u) * 14); transition: background .15s, border-color .15s; }
.pz-comanda .opt .lb { font-weight: 800; font-size: max(12px, calc(var(--u) * 4.3)); line-height: 1.12; }
.pz-comanda .opt:hover { transform: none; border-color: #c8431f; }
.pz-comanda .opt.marcada { background: #ffe08a; border-color: #e0a526; }
.pz-comanda .opt.certa { background: #34a566; border-color: #1f7a43; color: #fff; animation: none; }
.pz-comanda .opt.errada { background: #d8453a; border-color: #a82d2d; color: #fff; animation: none; }
.pz-comanda .opt.certa .lb, .pz-comanda .opt.errada .lb { color: #fff; }
.pz-onde { display: flex; gap: calc(var(--u) * 2); }
.pz-onde .opt { flex: 1 1 0; }
.pz-enviar { flex: none; min-height: max(32px, calc(var(--u) * 9.5)); border: 0; border-radius: calc(var(--u) * 2.4); cursor: pointer; font: inherit; font-weight: 900;
  font-size: max(13px, calc(var(--u) * 4.6)); color: #fff; background: #2e9e5b; box-shadow: inset 0 calc(var(--u) * -.9) 0 rgba(0, 0, 0, .2); transition: opacity .15s, filter .15s; }
.pz-enviar:hover:not(:disabled) { filter: brightness(1.07); }
.pz-enviar:disabled { opacity: .4; cursor: default; }
/* perfil profissional (sem cena): a comanda e um cartao simples */
body:not(.ui-pizzaria) .pz-comanda { --u: 5px; max-width: 460px; margin: 0 auto; background: #fffaf0; border: 2px solid #d8c4a0; border-radius: 14px; }
body:not(.ui-pizzaria) .pz-comanda .opt { flex: none; min-height: 44px; }

/* menu de niveis */
.mj-pizzaria .mj-fundo::after { background: rgba(40, 14, 4, .42); }
.mj-pizzaria .mj-painel { background: #fff4de; color: #3a2414; border: 4px solid #8b3a1a; border-radius: 18px; padding: 26px 28px 28px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); width: min(640px, 100%); clip-path: none; filter: none; }
.mj-pizzaria .mj-painel::before { display: none; }
.mj-pizzaria .mj-cab p { color: #7a3a14; font-family: var(--font); font-weight: 800; font-size: clamp(1.1rem, 2.6vw, 1.4rem); text-align: center; line-height: 1.3; }
.mj-pizzaria .mj-btns.sem-como { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mj-pizzaria .mj-btn { font-family: var(--font); background: #c8431f; color: #fff; border: 2px solid #8b2a10; border-radius: 12px; min-height: 76px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2); }
.mj-pizzaria .mj-btn b { font-size: clamp(1.2rem, 2.6vw, 1.55rem); }
.mj-pizzaria .mj-btn:hover { background: #d9522d; filter: none; }
@media (max-width: 620px) {
  .mj-pizzaria .mj-painel { padding: 20px 14px 18px; }
  .mj-pizzaria .mj-btns { gap: 8px; }
  .mj-pizzaria .mj-btn { min-height: 62px; }
  .mj-pizzaria .mj-btn b { white-space: nowrap; font-size: clamp(.95rem, 4.4vw, 1.3rem); }
}

/* ================= LAYOUT DA ÁREA DO PROFISSIONAL (02/11/2026) =================
   Topo branco fixo (logo | Profissional ... Ajuda, conta) e barra lateral azul-marinho.
   Ativado por U.navProf(), que poe body.app-prof. */
body.app-prof {
  --brand: #0d4a8b; --brand-deep: #0e244e; --brand-soft: #dde9f7;
  --app-topo: 72px; --app-lado: 250px;
  padding-top: var(--app-topo); padding-left: var(--app-lado);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23a9c8ee' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23a9c8ee' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23a9c8ee' stop-opacity='.48'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%239bbde8' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%239bbde8' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%239bbde8' stop-opacity='.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='320' fill='url(%23v)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M300 320 C600 260 760 60 940 60 S1120 90 1200 50 V320 Z' fill='url(%23f)'/%3E%3Cpath d='M380 0 C620 60 760 170 930 165 S1130 120 1200 150 V320 H500 C700 280 760 210 600 120 Z' fill='url(%23f)' opacity='.6'/%3E%3Cpath d='M300 320 C600 260 760 60 940 60 S1120 90 1200 50' fill='none' stroke='url(%23l)' stroke-width='1.5'/%3E%3Cpath d='M380 0 C620 60 760 170 930 165 S1130 120 1200 150' fill='none' stroke='url(%23l)' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") top right / 100% 320px no-repeat,
    linear-gradient(180deg, #eef4fb 0, var(--bg) 340px);
}
:root[data-theme="dark"] body.app-prof { --brand: #5b9be0; --brand-deep: #a9cbf2; --brand-soft: #16273f; background: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.app-prof { --brand: #5b9be0; --brand-deep: #a9cbf2; --brand-soft: #16273f; background: var(--bg); } }

body.app-prof { min-height: 100vh; }
body.app-prof main.wrap { width: min(1140px, 100% - 56px); }
body.app-prof h1 { color: var(--brand-deep); }
body.app-prof .topbar-app {
  position: fixed; top: 0; left: 0; right: 0; height: var(--app-topo); padding: 0; z-index: 40;
  border-bottom: 0; box-shadow: 0 2px 14px rgba(14,36,78,.08);
}
.topbar-app .wrap { width: 100%; height: 100%; padding: 0 28px; gap: 18px; }
.topbar-app .brand { padding-right: 18px; border-right: 1px solid var(--line); height: 38px; }
.app-tag { color: var(--brand-deep); font-weight: 700; font-size: 1.05rem; }
.app-ajuda { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; padding: 8px 16px; border-right: 1px solid var(--line); }
.app-ajuda:hover { color: var(--brand); }
.app-ajuda .ic { width: 24px; height: 24px; }
.app-btn { padding: 8px 14px; }
.app-conta { position: relative; }
.app-conta summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--brand-deep); }
.app-conta summary::-webkit-details-marker { display: none; }
.app-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--brand-deep); display: grid; place-items: center; }
.app-avatar .ic { width: 24px; height: 24px; }
.app-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; }
.app-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 700; }
.app-menu a:hover { background: var(--surface-2); }

body.app-prof .nav-prof {
  position: fixed; top: var(--app-topo); left: 0; bottom: 0; width: var(--app-lado); z-index: 35;
  border: 0; overflow-y: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 180' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C70 10 170 20 250 90' fill='none' stroke='%232a69b0' stroke-width='3'/%3E%3Cpath d='M0 110 C80 50 170 70 250 140' fill='none' stroke='%232a69b0' stroke-width='3' opacity='.7'/%3E%3C/svg%3E") bottom / 100% 180px no-repeat,
    linear-gradient(180deg, #13457f 0, #0d3466 60%, #0b2c58 100%);
}
body.app-prof .nav-prof .wrap { width: auto; display: flex; flex-direction: column; gap: 6px; padding: 26px 12px; overflow: visible; }
body.app-prof .nav-item {
  color: rgba(255,255,255,.92); border: 0; border-radius: 12px; padding: 14px 18px; gap: 16px; font-size: 1.05rem; font-weight: 700;
}
body.app-prof .nav-item .ic { width: 26px; height: 26px; }
body.app-prof .nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
body.app-prof .nav-item.on { color: #fff; background: rgba(120,170,230,.32); }
body.app-prof .nav-item:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* tela estreita: a barra lateral vira uma faixa horizontal embaixo do topo */
@media (max-width: 900px) {
  body.app-prof { --app-topo: 62px; padding-left: 0; }
  body.app-prof main.wrap { width: calc(100% - 24px); }
  .topbar-app .wrap { padding: 0 14px; gap: 10px; }
  .topbar-app .brand { padding-right: 10px; }
  .app-tag { font-size: .95rem; }
  .app-ajuda { padding: 6px 8px; }
  .app-avatar { width: 38px; height: 38px; }
  body.app-prof .nav-prof { position: sticky; top: var(--app-topo); bottom: auto; width: auto; }
  body.app-prof .nav-prof .wrap { flex-direction: row; overflow-x: auto; padding: 8px 10px; }
  body.app-prof .nav-item { padding: 10px 14px; font-size: .95rem; gap: 8px; white-space: nowrap; }
  body.app-prof .nav-item .ic { width: 20px; height: 20px; }
}
@media (max-width: 420px) { .app-tag { display: none; } }
@media print { body.app-prof { padding: 0 !important; background: #fff !important; } }

/* barra lateral recolhivel (so computador) */
body.app-prof { transition: padding-left .2s; }
body.app-prof .nav-prof { transition: width .2s; }
.nav-recolher {
  margin-top: 18px; display: flex; align-items: center; gap: 16px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; background: transparent; color: rgba(255,255,255,.85); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.nav-recolher:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-recolher .ic { width: 22px; height: 22px; transition: transform .2s; }
@media (min-width: 901px) {
  body.app-prof.lado-min { --app-lado: 78px; }
  body.app-prof.lado-min .nav-item, body.app-prof.lado-min .nav-recolher { justify-content: center; padding-left: 0; padding-right: 0; }
  body.app-prof.lado-min .nav-item span, body.app-prof.lado-min .nav-recolher span { display: none; }
  body.app-prof.lado-min .nav-recolher .ic { transform: rotate(180deg); }
}
@media (max-width: 900px) { .nav-recolher { display: none; } }

/* Bloqueio por pagamento em atraso (ui.js checaBloqueio) */
.bloqueio-pag { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(14, 36, 78, .6); }
.bloqueio-pag .card { width: 100%; max-width: 440px; text-align: center; }
.bloqueio-pag .card p { margin: 8px 0 14px; }
.bloqueio-pag .card .btn { margin: 6px 4px 0; }

/* janela aberta: o botao de atendimento nao fica por cima */
body:has(.modal-bg) #atd-btn { display: none; }

/* tela de carregamento com o logo se desenhando (jogo.js logoCarregando) */
.logo-carregando { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .5s ease; }
.logo-carregando .lc-logo { width: min(78vw, 560px); }
.logo-carregando svg { display: block; width: 100%; height: auto; }
.logo-carregando.saindo { opacity: 0; pointer-events: none; }

/* plano de um produto so: esconde a area que nao faz parte do plano (Filipe, 05/11/2026) */
body.sem-pac [data-prod="pac"], body.sem-laudo [data-prod="laudo"], body.sem-evo [data-prod="evo"] { display: none !important; }

/* ================= COFRE (separacao binaural, 08/11/2026; 09/11 digitar no proprio cofre) =================
   Video da sala com o cofre; na hora de jogar a camera chega perto (.cf-mundo com transform) e a crianca toca nas teclas
   desenhadas no cofre (.cf-tecla, camada .cf-frente por cima da interface). O teclado do jogo (#resp) fica escondido e
   recebe os toques. Orelhas-guia nos cantos de cima: a orelha alvo acende antes do som. Maçaneta = ouvir de novo. */
.mj-cofre .mj-fundo::after { background: rgba(10, 8, 4, .45); }
.mj-cofre .mj-painel { width: min(560px, 100%); padding: 22px 26px 26px; border-radius: 22px; color: #fff; clip-path: none; filter: none;
  background: linear-gradient(160deg, #55585e 0%, #34363b 55%, #26282c 100%); border: 4px solid #1b1c1f;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .35); }
.mj-cofre .mj-painel::before { display: block; content: ''; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; width: auto;
  background-image: radial-gradient(circle, #8d9096 0 3px, transparent 4px), radial-gradient(circle, #8d9096 0 3px, transparent 4px),
                    radial-gradient(circle, #8d9096 0 3px, transparent 4px), radial-gradient(circle, #8d9096 0 3px, transparent 4px);
  background-size: 10px 10px; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%; opacity: .9; pointer-events: none; }
.mj-cofre .mj-cab p { margin: 0 auto; width: fit-content; max-width: 100%; padding: 10px 22px; border-radius: 8px; background: #0b1a10; color: #6dff9a;
  font-family: 'Courier New', monospace; font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.35rem); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(109, 255, 154, .8); box-shadow: inset 0 0 10px rgba(0, 0, 0, .9); }
.mj-cofre .mj-btns { gap: 14px; margin-top: 22px; }
.mj-cofre .mj-btn { font-family: var(--font); min-height: 92px; border-radius: 14px; color: #2a2620; border: 2px solid #b9a682;
  background: linear-gradient(180deg, #f6ecd9, #e2d3b6); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), 0 5px 0 #15161a; }
.mj-cofre .mj-btn::before { content: ''; width: 26px; height: 26px; margin-bottom: 4px; background: center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a1e' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2' fill='%23ffd36a'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.mj-cofre .mj-btn b { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 900; }
.mj-cofre .mj-btn:hover { filter: none; border-color: #ffd36a; }
.mj-cofre .mj-btn:active { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 2px 0 #15161a; }

.cena-cofre { background: #1b1410; overflow: hidden; }
.cf-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.3s cubic-bezier(.45, .05, .25, 1); }
.cf-video { position: absolute; inset: 0; width: 100%; height: 100%; display: none; max-width: none; max-height: none; }
.cf-video.on { display: block; z-index: 2; }
.cf-visor { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; border-radius: 3px; opacity: 0;
  background: #0b1a10; color: #6dff9a; font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: .12em; white-space: nowrap;
  text-shadow: 0 0 4px rgba(109, 255, 154, .8); box-shadow: inset 0 0 4px rgba(0, 0, 0, .8); transition: opacity .2s; pointer-events: none; }
.cf-visor.on { opacity: 1; }
.cf-visor.ok { opacity: 1; background: #0e3a1c; animation: cf-pisca .3s 3; }
.cf-visor.erro { opacity: 1; background: #3a0e0e; color: #ff7a6d; text-shadow: 0 0 4px rgba(255, 122, 109, .8); animation: cf-pisca .3s 2; }
@keyframes cf-pisca { 50% { filter: brightness(1.8); } }
.cf-frente { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cf-tecla { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; pointer-events: none;
  -webkit-tap-highlight-color: transparent; transition: background .15s, box-shadow .15s; }
.cf-frente.cf-perto .cf-tecla { pointer-events: auto; }
body.cf-intro .cf-tecla, body.cf-final .cf-tecla { pointer-events: none !important; }
.cf-tecla.afunda { animation: cf-afunda .18s ease; }
@keyframes cf-afunda { 50% { background: rgba(0, 0, 0, .28); } }
.cf-tecla.marcada { background: rgba(255, 211, 106, .55); box-shadow: 0 0 0 1px #fff, 0 0 6px 1px rgba(255, 211, 106, .9); }
.cf-tecla.certa { background: rgba(46, 158, 91, .7); box-shadow: 0 0 0 1px #fff; }
.cf-tecla.errada { background: rgba(216, 69, 58, .7); box-shadow: 0 0 0 1px #fff; }
/* erro: as teclas certas dao um leve zoom (Marilise, 09/11/2026); sem verde/vermelho nas teclas */
.cf-tecla.dica { animation: cf-dica .55s ease-in-out 3; background: linear-gradient(#f7f0e2, #ddd1bb); z-index: 2;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 0 1px #2a2724; }
.cf-tecla.dica::after { content: attr(data-n); display: grid; place-items: center; width: 100%; height: 100%; color: #1d1b19;
  font-family: var(--font); font-weight: 800; line-height: 1; }
@keyframes cf-dica { 50% { transform: scale(1.18); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .45); } }
body.em-menu .cf-frente { visibility: hidden; }

/* o teclado do jogo existe (regras, acertos), mas escondido no meio da tela: quem recebe o toque e o cofre */
body.ui-cofre #resp { position: fixed !important; left: 50%; top: 50%; width: 10px !important; height: 10px; overflow: hidden; opacity: 0; pointer-events: none; }
/* maçaneta = ouvir de novo: brilho dourado quando da para repetir */
body.ui-cofre .play-orb { background: none; box-shadow: none; border: 0; border-radius: 50%; z-index: 7; transition: none; height: auto; }
body.ui-cofre .play-orb[disabled] { opacity: 1; }
body.ui-cofre .play-orb.pulsando { animation: none; }   /* sem brilho na macaneta (Marilise, 09/11/2026) */
@keyframes cf-orb { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 90, .9); } 50% { box-shadow: 0 0 0 10px rgba(255, 210, 90, 0), 0 0 24px 8px rgba(255, 220, 120, .5); } }
body.ui-cofre .play-orb.tocando { animation: none; box-shadow: none; }
body.ui-cofre .play-orb.esgotado { animation: none; }
body.ui-cofre .play-orb:focus, body.ui-cofre .play-orb:focus-visible { outline: none; }
/* 'Ouvir de novo' embaixo do cofre: tecla creme com letras escuras, igual as do teclado do cofre */
.cf-ouvir { position: fixed; transform: translateX(-50%); display: none; align-items: center; gap: 12px; pointer-events: auto; cursor: pointer;
  padding: 12px 24px; border: 0; border-radius: 10px; background: #0b1a10; color: #6dff9a;
  font-family: 'Courier New', monospace; font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.35rem); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 8px rgba(109, 255, 154, .8); box-shadow: inset 0 0 10px rgba(0, 0, 0, .9), 0 0 0 4px #34363b, 0 6px 14px rgba(0, 0, 0, .4); -webkit-tap-highlight-color: transparent; }
.cf-ouvir svg { width: 1.2em; height: 1.2em; filter: drop-shadow(0 0 4px rgba(109, 255, 154, .8)); }
.cf-ouvir:active { transform: translateX(-50%) translateY(2px); background: #0e3a1c; }
.cf-ouvir[disabled] { opacity: 1; cursor: default; }   /* sempre o mesmo fundo escuro (Marilise, 09/11/2026) */
.cf-frente.cf-perto .cf-ouvir.on { display: inline-flex; }
body.cf-intro .cf-ouvir, body.cf-final .cf-ouvir { display: none !important; }
body.ui-cofre #cue, body.ui-cofre .kids-cue, body.ui-cofre .tiny { display: none !important; }
body.perfil-crianca.ui-cofre .orelhas-guia { top: calc(70px + env(safe-area-inset-top, 0px)); }
body.ui-cofre .og { width: clamp(70px, 10vw, 112px); height: clamp(70px, 10vw, 112px); }
/* orelhas no estilo do cofre (Marilise, 09/11/2026): disco de metal escuro com aro e rebites, fundo de visor;
   apagada = orelha escurecida; acesa = aro de LED na cor da orelha (azul esquerda, vermelho direita) */
body.ui-cofre .og { background: radial-gradient(circle at 50% 50%, #0b1a10 0 54%, transparent 55%),
    radial-gradient(circle at 35% 30%, #6a6c72, #3a3c41 55%, #222327);
  border: 3px solid #1a1b1e; color: #4a4c52;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .18), inset 0 -3px 4px rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .45); }
body.ui-cofre .og::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; opacity: 1; animation: none; transform: none;
  border: 0; background:
    radial-gradient(circle, #c9cbd0 0 45%, #55575c 60%, transparent 62%) 50% 0 / 9% 9% no-repeat,
    radial-gradient(circle, #c9cbd0 0 45%, #55575c 60%, transparent 62%) 50% 100% / 9% 9% no-repeat,
    radial-gradient(circle, #c9cbd0 0 45%, #55575c 60%, transparent 62%) 0 50% / 9% 9% no-repeat,
    radial-gradient(circle, #c9cbd0 0 45%, #55575c 60%, transparent 62%) 100% 50% / 9% 9% no-repeat; }
body.ui-cofre .og img { width: 52%; height: 52%; position: relative; z-index: 1; filter: grayscale(.85) brightness(.5); transition: filter .25s; }
body.ui-cofre .og.on { background: radial-gradient(circle at 50% 50%, #0e2a18 0 54%, transparent 55%),
    radial-gradient(circle at 35% 30%, #6a6c72, #3a3c41 55%, #222327);
  color: #4aa3ff; border-color: #4aa3ff; transform: scale(1.1);
  box-shadow: 0 0 0 3px #1a1b1e, 0 0 16px 4px rgba(74, 163, 255, .75), inset 0 0 14px rgba(74, 163, 255, .45); }
body.ui-cofre .og-r.on { color: #ff5a4e; border-color: #ff5a4e;
  box-shadow: 0 0 0 3px #1a1b1e, 0 0 16px 4px rgba(255, 90, 78, .75), inset 0 0 14px rgba(255, 90, 78, .45); }
body.ui-cofre .og.on img { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)); }
body.ui-cofre .og.on::after { inset: -6px; border: 3px solid currentColor; }
body.cf-intro .orelhas-guia, body.cf-final .orelhas-guia { opacity: 0 !important; }
body.cf-final .play-orb, body.cf-intro .play-orb { visibility: hidden; }
body.kids.perfil-crianca.ui-cofre .kids-main { justify-content: flex-end; padding: 70px 16px 22px; }
body.ui-cofre .patas .pata { color: #8a6a1e; }
/* Cofre (Marilise, 09/11/2026): sem 'Isso!' no acerto; progresso em numero (1 / 12) com a letra do visor, no lugar das chaves */
body.ui-cofre #fb { display: none !important; }
body.ui-cofre #patas { display: none !important; }
/* placar de trofeus e botao Encerrar no estilo do visor do cofre (Marilise, 09/11/2026) */
body.ui-cofre .kids-trofeus, body.ui-cofre .kids-bar #btn-sair { background: #0b1a10; color: #6dff9a; border: 0; border-radius: 8px; backdrop-filter: none;
  font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(109, 255, 154, .8); box-shadow: inset 0 0 10px rgba(0, 0, 0, .9), 0 0 0 3px #34363b; }
body.ui-cofre .kids-trofeus { font-size: clamp(1rem, 2.4vw, 1.2rem); padding: 6px 14px; }
body.ui-cofre .kids-trofeus .ic { color: #6dff9a; filter: drop-shadow(0 0 4px rgba(109, 255, 154, .8)); }
body.ui-cofre .kids-bar #btn-sair { padding: 8px 16px; }
body.ui-cofre .kids-bar #btn-sair:active { background: #0e3a1c; }
body.ui-cofre .kids-contador { display: inline-block !important; padding: 6px 14px; border-radius: 8px; background: #0b1a10; color: #6dff9a; backdrop-filter: none;
  font-family: 'Courier New', monospace; font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.2rem); letter-spacing: .1em; white-space: nowrap;
  text-shadow: 0 0 8px rgba(109, 255, 154, .8); box-shadow: inset 0 0 10px rgba(0, 0, 0, .9), 0 0 0 3px #34363b; }
body.ui-cofre .feedback { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
@media (orientation: portrait) and (max-width: 620px) {
  body.perfil-crianca.ui-cofre .orelhas-guia { top: calc(118px + env(safe-area-inset-top, 0px)); }   /* abaixo da faixa das chaves */
  .mj-cofre .mj-painel { padding: 18px 14px 18px; }
  .mj-cofre .mj-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mj-cofre .mj-btn { min-height: 78px; }
  .mj-cofre .mj-btn b { white-space: nowrap; font-size: clamp(.9rem, 4.2vw, 1.15rem); }
}
body.cf-final .cf-frente { visibility: hidden; }
.mj.mj-cofre { place-items: end center; padding-bottom: max(24px, 7vh); }

/* ======== Lanchonete (integracao binaural, 09/11/2026) ========
   Food truck visto de dentro: a crianca marca o pedido na comanda de papel, "Montar o lanche" -> nuvem de confusao e o
   lanche pronto no papel. Interface com as cores do toldo (vermelho e creme).
   Sem trofeu: barra de reputacao no topo. */
.mj-lanchonete .mj-fundo::after { background: rgba(30, 10, 4, .32); }
.mj.mj-lanchonete { place-items: end center; padding-bottom: max(22px, 6vh); }
.mj-lanchonete .mj-painel { background: #fff6e3; color: #3a1a10; border: 4px solid #c9302c; border-radius: 20px; padding: 22px 26px 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); width: min(620px, 100%); clip-path: none; filter: none; }
.mj-lanchonete .mj-painel::before { display: none; }
.mj-lanchonete .mj-cab p { color: #8f1e1a; font-family: var(--font); font-weight: 800; font-size: clamp(1.02rem, 2.4vw, 1.3rem); text-align: center; line-height: 1.32; }
.mj-lanchonete .mj-btns.sem-como { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.mj-lanchonete .mj-btn { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; background: #c9302c; color: #fff; border: 2px solid #8f1e1a; border-radius: 14px; min-height: 72px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2); }
.mj-lanchonete .mj-btn b { font-size: clamp(1.6rem, 3.4vw, 2rem); font-weight: 700; }
.mj-lanchonete .mj-btn:hover { background: #db3b36; filter: none; }
@media (max-width: 620px) {
  .mj-lanchonete .mj-painel { padding: 18px 14px 16px; }
  .mj-lanchonete .mj-btns { gap: 8px; }
  .mj-lanchonete .mj-btn { min-height: 60px; }
  .mj-lanchonete .mj-btn b { white-space: nowrap; font-size: clamp(1.35rem, 6vw, 1.7rem); }
}

.cena-lanchonete { background: #1d1410; overflow: hidden; }
.cena-lanchonete .lc-blur { position: absolute; inset: 0; background: center top / cover no-repeat; transform: scale(1.08); }
.cena-lanchonete .lc-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .45s ease; }
.cena-lanchonete .lc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; }   /* troca seca: a dissolvencia duplicava o rosto (expressoes diferentes entre os videos) */
.cena-lanchonete .lc-video.on { opacity: 1; }
.cena-lanchonete .lc-braco { position: absolute; left: 0; max-width: none; pointer-events: none; }   /* braco nitido sobre o video (tablet) */
.cena-lanchonete .lc-tabua { position: absolute; transition: transform .6s ease, opacity .6s ease; }
.cena-lanchonete .lc-pilha { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); transition: opacity .2s; }
.cena-lanchonete .lc-retrato .lc-pilha, .cena-lanchonete.lc-retrato .lc-pilha { bottom: 22%; }
.cena-lanchonete .lc-p { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .28)); }
.cena-lanchonete .lc-molho { left: 9%; width: 82%; }
.cena-lanchonete .lc-pao-cima { animation: lcCai .35s ease-out both; }
.cena-lanchonete .lc-lado { position: absolute; bottom: 15%; display: flex; align-items: flex-end; gap: 4%; }   /* mesma base do lanche (nao em cima dos dedos) */
.cena-lanchonete.lc-retrato .lc-lado { bottom: 20%; }
.cena-lanchonete .lc-lado-e { left: 1%; width: 26%; }
.cena-lanchonete .lc-lado-d { right: 1%; width: 26%; justify-content: flex-end; }
.cena-lanchonete .lc-copo { width: 100%; height: auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.cena-lanchonete .lc-batata { width: 100%; height: auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.cena-lanchonete .cai { animation: lcCai .38s cubic-bezier(.3, 1.4, .6, 1) both; }
@keyframes lcCai { from { transform: translateY(-160%); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.cena-lanchonete .lc-embrulho { position: absolute; left: 50%; bottom: 12%; width: 34%; transform-origin: 50% 100%; transform: translateX(-50%) scale(.6); opacity: 0; transition: transform .35s cubic-bezier(.3, 1.5, .6, 1), opacity .2s; }
.cena-lanchonete .lc-retrato .lc-embrulho, .cena-lanchonete.lc-retrato .lc-embrulho { width: 40%; bottom: 18%; }
.cena-lanchonete .lc-embrulho svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); }
.cena-lanchonete .lc-tabua.embrulhado .lc-pilha { opacity: 0; }
.cena-lanchonete .lc-tabua.embrulhado .lc-embrulho { opacity: 1; transform: translateX(-50%) scale(1); }
.cena-lanchonete .lc-tabua.escondida .lc-pilha, .cena-lanchonete .lc-tabua.escondida .lc-lado { opacity: 0; }
.cena-lanchonete .lc-tabua.entrega .lc-pilha, .cena-lanchonete .lc-tabua.entrega .lc-lado, .cena-lanchonete .lc-tabua.entrega .lc-embrulho { transition: transform .6s ease-in, opacity .6s ease-in; opacity: 0; transform: translate(-50%, -70%) scale(.7); }
.cena-lanchonete .lc-tabua.entrega .lc-lado { transform: translateY(-70%) scale(.7); }
/* nuvem de confusao (desenho da Marilise): so as linhas, varias camadas girando aos trancos, sem fundo; cobre as maos e a tabua */
.cena-lanchonete .lc-nuvem { position: absolute; left: 600px; top: 650px; width: 720px; height: 380px; opacity: 0; transform: scale(.4); pointer-events: none; }
.cena-lanchonete.lc-retrato .lc-nuvem { left: 110px; top: 800px; width: 500px; height: 400px; overflow: hidden; }  /* celular: nenhuma linha da nuvem sai da caixa do lanche (iPhone, 10/11/2026) */
.cena-lanchonete .lc-nuvem.on { opacity: 1; transform: scale(1); transition: opacity .15s, transform .3s cubic-bezier(.3, 1.6, .6, 1); }
.cena-lanchonete .lc-nuvem.sai { opacity: 0; transform: scale(1.2); transition: opacity .35s, transform .35s; }
.cena-lanchonete .lc-nuvem img { position: absolute; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .35)); }
.cena-lanchonete .lc-nuvem .n1 { left: 4%; top: 2%; width: 92%; height: 96%; }
.cena-lanchonete .lc-nuvem .n2 { left: 0; top: 10%; width: 62%; height: 84%; transform: rotate(160deg); }
.cena-lanchonete .lc-nuvem .n3 { left: 38%; top: 8%; width: 62%; height: 86%; transform: scaleX(-1) rotate(20deg); }
.cena-lanchonete .lc-nuvem .n4 { left: 18%; top: 0; width: 64%; height: 70%; transform: rotate(-35deg); }
.cena-lanchonete .lc-nuvem .n5 { left: 20%; top: 30%; width: 60%; height: 70%; transform: scaleY(-1) rotate(70deg); }
.cena-lanchonete .lc-nuvem.on img { animation: lcGira 1.1s ease-in-out infinite alternate; }
.cena-lanchonete .lc-nuvem.on .n2 { animation-name: lcGira2; animation-duration: 1.3s; }
.cena-lanchonete .lc-nuvem.on .n3 { animation-name: lcGira3; animation-duration: .9s; }
.cena-lanchonete .lc-nuvem.on .n4 { animation-name: lcGira2; animation-duration: 1.5s; animation-direction: alternate-reverse; }
.cena-lanchonete .lc-nuvem.on .n5 { animation-name: lcGira3; animation-duration: 1.2s; animation-direction: alternate-reverse; }
@keyframes lcGira { from { transform: rotate(-4deg) translate(-1%, 1%); } to { transform: rotate(4deg) translate(1%, -1%) scale(1.03); } }
@keyframes lcGira2 { from { transform: rotate(152deg) translate(1%, 0); } to { transform: rotate(168deg) translate(-1%, 1%) scale(1.04); } }
@keyframes lcGira3 { from { transform: scaleX(-1) rotate(12deg) translate(0, 1%); } to { transform: scaleX(-1) rotate(28deg) translate(1%, -1%) scale(1.03); } }
/* maos que se aproximam na hora de embalar: recorte das maos do video por cima do fundo sem elas */
/* maos sempre por cima (a faixa do braco nao tem mais as maos): se mexem para buscar cada item (scenes.js pedeMao) */
.cena-lanchonete .lc-maos { position: absolute; inset: 0; pointer-events: none; }
.cena-lanchonete .lc-maos img { position: absolute; max-width: none; }
.cena-lanchonete .lc-maos .lc-me, .cena-lanchonete .lc-maos .lc-md { will-change: transform; transition: rotate .35s cubic-bezier(.3, 1.3, .6, 1), scale .35s ease, translate .35s ease; }
.cena-lanchonete .lc-maos .lc-leva { display: none; height: auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.cena-lanchonete .lc-maos.vai .lc-me { scale: 1.07; }
.cena-lanchonete .lc-maos.vai .lc-md { scale: 1.07; }
.cena-lanchonete .lc-maos.mexe .lc-me { animation: lcMexeE .16s ease-in-out infinite alternate; }
.cena-lanchonete .lc-maos.mexe .lc-md { animation: lcMexeD .14s ease-in-out infinite alternate; }
@keyframes lcMexeE { from { scale: 1.05; } to { scale: 1.09; } }
@keyframes lcMexeD { from { scale: 1.09; } to { scale: 1.05; } }
/* reputacao: +3 / -1,5 sobe ao lado da barra a cada pedido */
.lc-rep .lc-rep-delta { position: absolute; left: 100%; top: 50%; margin-left: 8px; font-weight: 900; font-size: 1.1rem; white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255, 255, 255, .8); animation: lcDelta 1.6s ease-out forwards; }
.lc-rep .lc-rep-delta.mais { color: #1f7a43; }
.lc-rep .lc-rep-delta.menos { color: #b3261e; }
@keyframes lcDelta { 0% { opacity: 0; transform: translateY(-20%) scale(.6); } 15% { opacity: 1; transform: translateY(-50%) scale(1.15); } 70% { opacity: 1; transform: translateY(-90%); } 100% { opacity: 0; transform: translateY(-140%); } }

/* papel sob o lanche pronto (comer aqui) */
.cena-lanchonete .lc-papel { position: absolute; left: 50%; bottom: 8%; width: 50%; height: 34%; transform: translateX(-50%) perspective(400px) rotateX(48deg) scale(.6); opacity: 0;
  background: repeating-linear-gradient(90deg, #fffaf0 0 18px, #f6ead2 18px 36px); border: 3px solid #d9c49c; border-radius: 6px; box-shadow: 0 6px 10px rgba(0, 0, 0, .3); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.5, .6, 1); }
.cena-lanchonete.lc-retrato .lc-papel { width: 70%; bottom: 14%; }
.cena-lanchonete .lc-tabua.no-papel .lc-papel { opacity: 1; transform: translateX(-50%) perspective(400px) rotateX(48deg); }
.cena-lanchonete .lc-tabua.escondida .lc-papel, .cena-lanchonete .lc-tabua.entrega .lc-papel { opacity: 0; }

/* comanda de papel (Marilise, 09/11/2026): itens escritos a mao (Caveat), por cima da cena, no #resp */
body.ui-lanchonete #resp { position: fixed !important; inset: 0; width: 100% !important; height: 100%; display: block !important; z-index: 6; pointer-events: none; }
body.ui-lanchonete .lc-resp { position: absolute; inset: 0; pointer-events: none; }
body.ui-lanchonete .lc-comanda { position: absolute; right: 18px; top: 50%; transform: translateY(-46%) rotate(1deg); width: min(430px, 36vw); max-height: calc(100% - 84px); overflow-y: auto;
  pointer-events: auto; padding: 14px 18px 16px; border-radius: 4px 4px 10px 10px; color: #23324f; font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  background: #fffdf4 repeating-linear-gradient(180deg, transparent 0 29px, #cfe0f2 29px 30px); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .06);
  border-top: 10px solid #c9302c; transition: transform .45s ease, opacity .35s ease; }
body.ui-lanchonete .lc-comanda::-webkit-scrollbar { width: 6px; }
body.ui-lanchonete .lc-comanda::-webkit-scrollbar-thumb { background: #d6c8a8; border-radius: 3px; }
body.ui-lanchonete .lc-com-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 2px dashed #c9b994; padding-bottom: 4px; margin-bottom: 4px; }
body.ui-lanchonete .lc-com-cab b { font-size: 2rem; font-weight: 700; color: #8f1e1a; line-height: 1; }
body.ui-lanchonete .lc-cont { font-size: 1.3rem; font-weight: 700; color: #4a3a2a; white-space: nowrap; }
body.ui-lanchonete .lc-cont b { font-size: 1.5rem; color: #c9302c; }
body.ui-lanchonete .lc-cont.treme { display: inline-block; animation: negar .4s ease; }
body.ui-lanchonete .lc-com-sec { margin-top: 4px; }
body.ui-lanchonete .lc-com-tit { margin: 0; font-size: 1.35rem; font-weight: 700; color: #8f1e1a; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.ui-lanchonete .lc-com-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
body.ui-lanchonete .lc-sec-refricola .lc-com-grade, body.ui-lanchonete .lc-sec-batata .lc-com-grade, body.ui-lanchonete .lc-onde .lc-com-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ui-lanchonete .lc-item { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 3px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 1.38rem; font-weight: 700; color: #23324f; line-height: 1; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
body.ui-lanchonete .lc-item span { overflow-wrap: anywhere; }
body.ui-lanchonete .lc-item i { flex: none; position: relative; width: 20px; height: 20px; border: 2.5px solid #23324f; border-radius: 4px 6px 3px 7px; transform: rotate(-4deg); }
body.ui-lanchonete .lc-item:hover { background: rgba(201, 48, 44, .07); }
body.ui-lanchonete .lc-item:focus-visible { outline: 3px solid #c9302c; outline-offset: 1px; }
body.ui-lanchonete .lc-item.marcada span { color: #c9302c; }
body.ui-lanchonete .lc-item.marcada i::after, body.ui-lanchonete .lc-item.certa i::after, body.ui-lanchonete .lc-item.errada i::after {
  content: ''; position: absolute; left: 3px; top: -9px; width: 9px; height: 20px; border: solid #c9302c; border-width: 0 4px 4px 0; transform: rotate(40deg); }
body.ui-lanchonete .lc-item.certa { background: rgba(46, 158, 91, .16); }
body.ui-lanchonete .lc-item.certa span { color: #1f7a43; }
body.ui-lanchonete .lc-item.certa i { border-color: #1f7a43; }
body.ui-lanchonete .lc-item.certa i::after { border-color: #1f7a43; }
body.ui-lanchonete .lc-item.faltou i::after { display: none; }
body.ui-lanchonete .lc-item.faltou span { text-decoration: underline wavy #1f7a43 2px; text-underline-offset: 4px; }
body.ui-lanchonete .lc-item.errada { background: rgba(216, 69, 58, .16); }
body.ui-lanchonete .lc-item.errada span { color: #b3261e; text-decoration: line-through 3px; }
body.ui-lanchonete .lc-item.errada i { border-color: #b3261e; }
body.ui-lanchonete .lc-item.errada i::after { border-color: #b3261e; }
body.ui-lanchonete .lc-resp.lc-corrigido .lc-item { pointer-events: none; }
body.ui-lanchonete .lc-com-acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
body.ui-lanchonete .lc-com-acoes.some { display: none; }
body.ui-lanchonete .lc-btn { flex: 1 1 auto; justify-content: center; font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 700; font-size: clamp(1.45rem, 2.2vw, 1.7rem); line-height: 1; padding: 10px 14px; min-height: 50px; border-radius: 14px; cursor: pointer;
  background: #fff6e3; color: #8f1e1a; border: 3px solid #c9302c; box-shadow: 0 4px 0 #8f1e1a; display: inline-flex; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
body.ui-lanchonete .lc-btn .ic { width: 20px; height: 20px; }
body.ui-lanchonete .lc-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f1e1a; }
body.ui-lanchonete .lc-btn:disabled { opacity: .55; cursor: default; transform: none; }
body.ui-lanchonete .lc-pronto { background: #c9302c; color: #fffdf4; border-color: #8f1e1a; box-shadow: 0 4px 0 #6e1512; }
body.ui-lanchonete .lc-pronto:disabled { background: #9aa39d; border-color: #7d857f; box-shadow: 0 4px 0 #5f6661; opacity: .8; }
body.ui-lanchonete .lc-ouvir.some { display: none; }
/* montando: a comanda sai de cena enquanto a nuvem trabalha */
body.ui-lanchonete .lc-resp.lc-montando .lc-comanda { transform: translate(115%, -46%) rotate(6deg); opacity: 0; pointer-events: none; }
@media (orientation: portrait) {
  body.ui-lanchonete .lc-comanda { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100% - 250px); transform: none; padding: 10px 12px 12px; }
  body.ui-lanchonete .lc-com-cab b { font-size: 1.6rem; }
  body.ui-lanchonete .lc-com-tit { font-size: 1.15rem; }
  body.ui-lanchonete .lc-com-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  body.ui-lanchonete .lc-item { font-size: 1.22rem; min-height: 30px; gap: 6px; padding: 0 2px; }
  body.ui-lanchonete .lc-item i { width: 16px; height: 16px; border-width: 2px; }
  body.ui-lanchonete .lc-item.marcada i::after, body.ui-lanchonete .lc-item.certa i::after, body.ui-lanchonete .lc-item.errada i::after { left: 2px; top: -8px; width: 7px; height: 16px; border-width: 0 3px 3px 0; }
  body.ui-lanchonete .lc-btn { min-height: 46px; padding: 8px 10px; }
  body.ui-lanchonete .lc-resp.lc-montando .lc-comanda { transform: translateY(110%); }
  body.ui-lanchonete .lc-resp.lc-corrigido .lc-comanda { max-height: 46%; }
}
/* barra de reputacao (topo, em cima do toldo) */
.lc-rep { position: fixed; z-index: 7; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px; background: rgba(40, 16, 10, .78); color: #fff4d6; font-weight: 900; font-size: .85rem; pointer-events: none; }
.lc-rep b { display: block; width: clamp(110px, 22vw, 260px); height: 16px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.lc-rep i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .7s ease, background .4s; background: #e5483d; }
.lc-rep.regular i { background: #f39a22; }
.lc-rep.boa i { background: #34c26a; }
.lc-rep.sobe { animation: lcSobe .6s ease; }
.lc-rep.desce { animation: negar .4s ease; }
@keyframes lcSobe { 50% { transform: translateX(-50%) scale(1.08); } }
body.ui-lanchonete .kids-trofeus, body.ui-lanchonete #prog, body.ui-lanchonete .orelhas-guia, body.ui-lanchonete #cue,
body.ui-lanchonete #fb, body.ui-lanchonete .play-orb, body.ui-lanchonete #btn-repetir { display: none !important; }
body.ui-lanchonete .kids-bar #btn-sair, body.ui-lanchonete .kids-contador { background: #fff6e3; color: #8f1e1a; border: 2px solid #c9302c; backdrop-filter: none; font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 700; font-size: 1.45rem; line-height: 1; }
body.ui-lanchonete .kids-contador { display: inline-block !important; padding: 6px 12px; border-radius: 10px; }
@media (max-width: 620px) { .lc-rep { top: calc(64px + env(safe-area-inset-top, 0px)); } }
/* fim do jogo: a lanchonete desfocada ao fundo + reputacao */
body.lc-fim #report { position: relative; isolation: isolate; }
body.lc-fim #report::before { content: ''; position: fixed; inset: -20px; z-index: -1; background: #2a1810 url(../../assets/video/lanchonete/fundo.webp?v=20261109) center / cover no-repeat; filter: blur(14px) brightness(.8); }
@media (orientation: portrait) { body.lc-fim #report::before { background-image: url(../../assets/video/lanchonete/fundo_retrato.webp?v=20261109); } }
body.lc-fim #report .center h1, body.lc-fim #report .center p { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.lc-rep-fim { text-align: center; background: #fff6e3; border: 4px solid #c9302c; border-radius: 22px; padding: 22px 20px 24px; }
.lc-rep-fim .lc-genial { margin: 0 0 6px; font-size: clamp(2.2rem, 7vw, 3.2rem); font-weight: 900; color: #2e9e5b; letter-spacing: .01em; animation: pular .6s ease; }
.lc-rep-fim .lc-rf-tit { margin: 0; font-weight: 800; color: #8f1e1a; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.lc-rep-fim .lc-rf-placar { margin: 6px 0 12px; font-size: 1.4rem; font-weight: 800; color: #3a1a10; }
.lc-rep-fim .lc-rf-placar b { font-size: 2.6rem; }
.lc-rep-fim .lc-rf-placar small { display: block; font-size: .85rem; font-weight: 700; color: #7a5a4a; }
.lc-rep-fim .lc-rf-barra { height: 20px; border-radius: 999px; background: #ead9c4; overflow: hidden; max-width: 360px; margin: 0 auto; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); }
.lc-rep-fim .lc-rf-barra i { display: block; height: 100%; border-radius: 999px; background: #e5483d; }
.lc-rep-fim .lc-rf-barra.regular i { background: #f39a22; }
.lc-rep-fim .lc-rf-barra.excelente i { background: #34c26a; }
.lc-rep-fim .lc-rf-nivel { margin: 12px 0 0; font-size: 1.6rem; font-weight: 900; }
.lc-rep-fim .lc-rf-nivel.ruim { color: #c9302c; }
.lc-rep-fim .lc-rf-nivel.regular { color: #d97a0a; }
.lc-rep-fim .lc-rf-nivel.excelente { color: #2e9e5b; }

/* Lanchonete (Marilise, 09/11/2026): todo botao e rotulo do jogo em letra cursiva, no papel da comanda */
.lc-rep { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-size: 1.35rem; font-weight: 700; }
body.ui-lanchonete.lc-fim button, body.ui-lanchonete.lc-fim .btn { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 700; font-size: 1.45rem; }
.lc-rep-fim, .lc-rep-fim .lc-rf-tit, .lc-rep-fim .lc-rf-placar small { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; }
.lc-rep-fim .lc-rf-tit { font-size: 1.4rem; text-transform: none; letter-spacing: 0; }