/* Revisão de 2026-10-24: Termômetro das Emoções, Roleta do E se...?, Organizando as Histórias,
   cartões sem ícone e opção "Reduzir efeitos". Carregada por último. */

.rv-img { display: block; width: 100%; height: 100%; object-fit: contain }
.rv-ic { width: 1.2em; height: 1.2em; vertical-align: -.22em }
.rv-nota { color: var(--ink2); font-size: .95rem; margin: 6px 0 }
.rv-nota.center, .center .rv-nota { text-align: center }
.rv-chip { display: inline-block; background: color-mix(in srgb, var(--c) 30%, var(--card)); border: 2px solid var(--c); color: var(--ink); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .85rem }
.rv-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 12px }
.rv-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px }
.rv-cabeca h3 { margin: 0; font-size: clamp(1.15rem, 3.4vw, 1.5rem) }
.rv-pergunta { font-weight: 700; font-size: 1.15rem; text-align: center; margin: 14px 0 8px }
.rv-repetir { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--lilas); background: var(--card); color: var(--roxo); font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--tk-sombra) }
.rv-repetir:focus-visible, .rv-ideia:focus-visible, .rv-emocao:focus-visible, .rv-termo-faixa:focus-visible, .rv-quadro:focus-visible, .rv-slot:focus-visible { outline: 4px solid var(--roxo); outline-offset: 3px }

/* ---------- cartões que ainda não têm ilustração: só o texto, sem buraco vazio ---------- */
.rv-sem-icone { display: none !important }
body .rv-so-texto.cartao, body .rv-so-texto.opcao, body button.rv-so-texto { justify-content: center; min-height: 88px }
body .rv-so-texto .em, body .fig-emo.rv-so-texto { display: none }
body .opcao.rv-so-texto > span:last-child, body .cartao.rv-so-texto { font-size: 1.08rem; font-weight: 700 }
body .quadro-cena.rv-so-texto { justify-content: center; padding-block: 18px }

/* ---------- demonstração inicial ---------- */
.rv-demo { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--tk-creme), var(--tk-lilas)); border-radius: var(--tk-r-g); padding: clamp(16px, 3vw, 28px); box-shadow: var(--tk-sombra) }
.rv-demo-tico { aspect-ratio: 3/5 } .rv-demo-corpo h3 { margin: 6px 0 }
.rv-demo-tag { font-size: .8rem; font-weight: 700; color: var(--roxo); background: var(--card); border-radius: 999px; padding: 3px 10px }
.rv-demo-corpo > p { font-size: 1.1rem; font-weight: 600 }
.rv-demo-seq { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap }
.rv-demo-seq > span { width: 96px; height: 96px; background: var(--card); border-radius: 18px; padding: 10px; box-shadow: var(--tk-sombra); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px }
.rv-demo-seq small { font-weight: 700; color: var(--ink2) }
.rv-demo-seq .rv-demo-mao { background: none; box-shadow: none; font-size: 2rem; width: auto; color: var(--roxo) }
.rv-slot-demo { border: 3px dashed var(--roxo) !important; font-size: 1.6rem; font-weight: 800; color: var(--roxo) }
@media (max-width: 640px) { .rv-demo { grid-template-columns: 1fr; text-align: center } .rv-demo-tico { width: 120px; margin: 0 auto } }

/* ---------- termômetro ---------- */
.rv-termo-area { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(14px, 3vw, 28px); align-items: center; margin-top: 10px }
.rv-termo { position: relative; padding: 12px 12px 54px; background: var(--card); border-radius: 36px; box-shadow: var(--tk-sombra-forte) }
.rv-termo-tubo { display: flex; flex-direction: column; gap: 8px }
.rv-termo-faixa { display: grid; grid-template-columns: 34px 56px 1fr; align-items: center; gap: 8px; min-height: 66px; padding: 5px 12px 5px 8px; border-radius: 20px; border: 3px solid transparent; background: color-mix(in srgb, var(--c) 30%, var(--card)); color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: transform .15s, background .2s, border-color .2s }
.rv-termo-faixa:hover { transform: translateX(3px) }
.rv-termo-faixa.cheia { background: color-mix(in srgb, var(--c) 70%, var(--card)) }
.rv-termo-faixa.visto { background: color-mix(in srgb, var(--c) 55%, var(--card)) }
.rv-termo-faixa.sel { border-color: var(--ink); background: var(--c); transform: scale(1.03); box-shadow: 0 6px 16px -8px rgba(0,0,0,.4) }
.rv-termo-num { width: 32px; height: 32px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-weight: 800 }
.rv-termo-rosto { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.75); overflow: hidden; padding: 3px }
.rv-termo-nome { font-size: 1rem; line-height: 1.15 }
.rv-termo-bulbo { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--c); border: 6px solid var(--card); box-shadow: 0 0 0 2px var(--line) }
.rv-termo-info { background: var(--card); border-radius: var(--tk-r); padding: clamp(16px, 3vw, 26px); box-shadow: var(--tk-sombra); text-align: center }
.rv-termo-info h3 { margin: 8px 0 4px; font-size: 1.5rem }
.rv-termo-info p { font-size: 1.05rem }
.rv-termo-figura { width: clamp(120px, 22vw, 180px); height: clamp(120px, 22vw, 180px); margin: 0 auto 8px }
.rv-contador { font-weight: 700; color: var(--roxo) }
.rv-situacao { display: grid; grid-template-columns: clamp(96px, 18vw, 150px) 1fr auto; gap: 16px; align-items: center; background: linear-gradient(135deg, var(--tk-creme), var(--tk-pessego)); border-radius: var(--tk-r); padding: 14px 18px; box-shadow: var(--tk-sombra); margin-top: 8px }
.rv-situacao-fig { aspect-ratio: 1; background: var(--card); border-radius: 20px; padding: 8px }
.rv-situacao p { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 700; margin: 0 }
.rv-emocoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px }
.rv-emocao { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: var(--tk-r); border: 3px solid transparent; background: var(--card); box-shadow: var(--tk-sombra); font: inherit; color: var(--ink); cursor: pointer; transition: transform .15s }
.rv-emocao span { width: 100px; height: 100px } .rv-emocao b { font-size: 1.1rem }
.rv-emocao:hover, .rv-emocao.sel { transform: translateY(-3px); border-color: var(--roxo) }
.rv-estado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--tk-r); background: color-mix(in srgb, var(--c) 25%, var(--card)); border-left: 10px solid var(--c); box-shadow: var(--tk-sombra) }
.rv-estado > .rv-img { width: 74px; height: 74px }
.rv-estado > div { flex: 1; min-width: 160px; display: flex; flex-direction: column } .rv-estado b { font-size: 1.25rem } .rv-estado span { color: var(--ink2) }
.rv-ideias { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px }
.rv-ideias.mini { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 }
.rv-ideia { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 16px; border-radius: var(--tk-r); border: 3px solid transparent; background: var(--card); box-shadow: var(--tk-sombra); font: inherit; color: var(--ink); cursor: pointer; transition: transform .15s, border-color .15s }
.rv-ideia:hover { transform: translateY(-3px); border-color: var(--roxo) }
.rv-ideia-fig { width: 112px; height: 112px; background: var(--tk-creme); border-radius: 50%; padding: 8px }
.rv-ideia-txt { font-weight: 700; font-size: 1.02rem; text-align: center; line-height: 1.2 }
.rv-ideias.mini .rv-ideia { padding: 8px 6px; cursor: default; box-shadow: none; background: var(--tk-creme) } .rv-ideias.mini .rv-ideia-fig { width: 64px; height: 64px; background: var(--card) } .rv-ideias.mini .rv-ideia-txt { font-size: .85rem }
.rv-fazer { text-align: center; background: linear-gradient(135deg, var(--tk-creme), var(--tk-lilas)); border-radius: var(--tk-r-g); padding: clamp(18px, 4vw, 34px); box-shadow: var(--tk-sombra) }
.rv-fazer-fig { width: clamp(150px, 30vw, 220px); height: clamp(150px, 30vw, 220px); margin: 0 auto; background: var(--card); border-radius: 50%; padding: 14px }
.rv-fazer h3 { font-size: 1.6rem; margin: 12px 0 4px }
.rv-contar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 }
.rv-contar i { font-style: normal; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 800; transition: background .2s, transform .2s }
.rv-contar i.on { background: var(--amarelo); border-color: var(--mostarda); transform: scale(1.08) }
@media (max-width: 720px) {
  .rv-termo-area { grid-template-columns: 1fr }
  .rv-termo { max-width: 420px; width: 100%; margin: 0 auto }
  .rv-situacao { grid-template-columns: 92px 1fr; } .rv-situacao .rv-repetir { grid-column: 1 / -1; justify-self: center }
  .rv-ideia-fig { width: 92px; height: 92px }
  .rv-emocoes { grid-template-columns: repeat(2, 1fr) } .rv-ideias { grid-template-columns: repeat(2, 1fr) }
}

/* ---------- roleta ---------- */
.rv-roleta-palco { display: grid; grid-template-columns: minmax(280px, 460px) minmax(220px, 1fr); gap: clamp(16px, 4vw, 40px); align-items: center; margin-top: 10px }
.rv-roleta-area { position: relative; width: 100%; aspect-ratio: 1; max-width: 460px; margin: 0 auto }
.rv-roleta { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 8px var(--card), 0 0 0 12px var(--mostarda), var(--tk-sombra-forte); will-change: transform }
.rv-roleta svg { width: 100%; height: 100%; display: block }
.rv-fatia-txt { font: 700 8.6px var(--fonte); fill: #3a2a1a; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 2.6px }
.rv-centro-txt { font: 800 8px var(--fonte); fill: var(--roxo) }
.rv-fatia { transition: opacity .3s }
.rv-roleta:has(.vence) .rv-fatia:not(.vence) { opacity: .6 }
.rv-fatia.vence path { stroke: #4B3A2A; stroke-width: 3.5 }
.rv-roleta-ponteiro { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 36px solid var(--roxo); z-index: 3; filter: drop-shadow(0 3px 0 #fff) }
.rv-roleta-lado { display: flex; flex-direction: column; align-items: center; gap: 14px }
.rv-roleta-tico { width: 140px; height: 180px }
.rv-roleta-legenda { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; width: 100% }
.rv-roleta-legenda li { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; background: color-mix(in srgb, var(--c) 22%, var(--card)); border-radius: 12px; padding: 4px 8px }
.rv-roleta-legenda .rv-img { width: 34px; height: 34px; flex-shrink: 0 }
.rv-sorteio { display: grid; grid-template-columns: clamp(110px, 22vw, 180px) 1fr; gap: 18px; align-items: center; background: color-mix(in srgb, var(--c) 22%, var(--card)); border: 3px solid var(--c); border-radius: var(--tk-r-g); padding: 16px 20px; box-shadow: var(--tk-sombra); margin: 8px 0 }
.rv-sorteio-fig { aspect-ratio: 1; background: var(--card); border-radius: 24px; padding: 10px }
.rv-sorteio p { font-size: clamp(1.15rem, 3.2vw, 1.5rem); font-weight: 700; margin: 8px 0 0 }
@media (max-width: 760px) { .rv-roleta-palco { grid-template-columns: 1fr } .rv-roleta-tico { display: none } .rv-roleta-area { max-width: 360px } }
@media (max-width: 480px) { .rv-sorteio { grid-template-columns: 90px 1fr; padding: 12px } .rv-roleta-legenda { font-size: .8rem } }

/* ---------- organizando as histórias ---------- */
.rv-trilha { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px }
.rv-trilha li { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.rv-trilha-rot { font-weight: 800; font-size: .85rem; color: var(--roxo); text-align: center }
.rv-slot { aspect-ratio: 3/4; width: 100%; border-radius: 20px; border: 3px dashed var(--line); background: var(--tk-bege); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, transform .15s }
.rv-slot.alvo, .rv-slot.sobre { border-color: var(--roxo); background: var(--tk-lilas) } .rv-slot.sobre { transform: scale(1.04) }
.rv-slot.cheio { border-style: solid; border-color: var(--line); background: var(--card); box-shadow: var(--tk-sombra) }
.rv-slot.revisar { border-color: var(--terracota); background: var(--terr-bg) }
.rv-slot.certo { border-color: var(--ok); background: var(--ok-bg) }
.rv-slot-num { font-size: 2rem; font-weight: 800; color: color-mix(in srgb, var(--ink2) 55%, transparent) }
.rv-monte { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 170px)); justify-content: center; gap: 12px }
.rv-quadro { aspect-ratio: 3/4; border-radius: 20px; border: 3px solid transparent; background: var(--card); box-shadow: var(--tk-sombra); display: flex; flex-direction: column; align-items: center; padding: 10px; font: inherit; color: var(--ink); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .15s, border-color .15s }
.rv-quadro:hover { transform: translateY(-3px) } .rv-quadro.sel { border-color: var(--roxo); transform: translateY(-4px) scale(1.03); box-shadow: var(--tk-sombra-forte) }
.rv-quadro.arrastando { opacity: .35 } .rv-quadro.certa { border-color: var(--ok); background: var(--ok-bg) } .rv-quadro.tentou { opacity: .5 }
.rv-quadro-fig, .rv-slot .rv-quadro-fig { flex: 1; width: 100%; min-height: 0; background: var(--tk-creme); border-radius: 14px; padding: 8px }
.rv-quadro-txt { font-size: .9rem; font-weight: 700; line-height: 1.2; text-align: center; margin-top: 8px; min-height: 2.4em }
.rv-slot .rv-quadro-txt { font-size: .8rem }
.rv-fantasma { position: fixed; z-index: 1000; pointer-events: none; transform: rotate(-3deg) scale(1.05); box-shadow: var(--tk-sombra-forte); opacity: .95 }
.rv-reconto, .rv-dica { background: var(--card); border-radius: var(--tk-r); padding: 16px 20px; box-shadow: var(--tk-sombra); margin-top: 12px; text-align: center }
.rv-reconto p { font-size: 1.08rem } .rv-dica { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--tk-creme) } .rv-dica .rv-img { width: 72px; height: 72px; flex-shrink: 0 }
.rv-depois { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)) } .rv-depois .rv-quadro { cursor: pointer; touch-action: auto }
@media (max-width: 640px) {
  .rv-trilha { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)) }
  .rv-slot { aspect-ratio: 4/5 } .rv-slot .rv-quadro-txt { display: none }
  .rv-monte { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ---------- reduzir efeitos ---------- */
body.tk-efeitos-reduzidos *, body.tk-efeitos-reduzidos *::before, body.tk-efeitos-reduzidos *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
body.tk-efeitos-reduzidos .rv-roleta { transition-duration: .6s !important }
body.tk-efeitos-reduzidos .confete, body.tk-efeitos-reduzidos #confete { display: none !important }
.rv-termo-rosto .rv-img { transform: scale(var(--s, 1)) }
.rv-saiu { background: color-mix(in srgb, var(--c) 35%, var(--card)); border: 3px solid var(--c); border-radius: 20px; padding: 10px 18px; text-align: center; animation: rv-pop .35s ease-out }
.rv-saiu small { display: block; font-weight: 700; color: var(--ink2) } .rv-saiu b { font-size: 1.3rem }
@keyframes rv-pop { from { transform: scale(.85); opacity: 0 } to { transform: none; opacity: 1 } }
/* O giro deixa a caixa da roleta maior que a tela; o recorte evita rolagem lateral no celular. */
.rv-roleta-area { overflow: clip; overflow-clip-margin: 0; border-radius: 0 }
.rv-roleta { inset: 16px }
.rv-roleta-ponteiro { top: 0 }

/* ---------- Jogo da Memória: cartas viradas escondem a figura (antes todas apareciam abertas) ---------- */
body .grade-memoria .carta-par { position: relative; aspect-ratio: 3/4; border-radius: 16px; border: 0; padding: 6px; background: linear-gradient(135deg, #B58ACB, #8D3F95); box-shadow: 0 3px 0 #6E2F75, var(--tk-sombra); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s }
body .grade-memoria .carta-par .frente { display: none }
body .grade-memoria .carta-par .verso { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 12px; border: 2px dashed rgba(255,255,255,.55) }
body .grade-memoria .carta-par .verso .ic { width: 46%; height: 46%; opacity: .85; color: #fff }
body .grade-memoria .carta-par.aberta { background: var(--card); box-shadow: 0 3px 0 var(--line), var(--tk-sombra) }
body .grade-memoria .carta-par.aberta .verso { display: none }
body .grade-memoria .carta-par.aberta .frente { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--tk-creme); border-radius: 12px; padding: 4px }
body .grade-memoria .carta-par.achada { background: var(--ok-bg); box-shadow: 0 3px 0 var(--ok), var(--tk-sombra) }
body .grade-memoria .carta-par .frente img { width: 100%; height: 100%; object-fit: contain }
body .grade-memoria .carta-par:hover { transform: translateY(-2px) }
body button.rv-so-texto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center }
.rv-onda { display: block; width: 54px; height: 54px; background: var(--tk-lilas); border-radius: 50%; padding: 8px }
.rv-onda svg { width: 100%; height: 100% }
.rv-mini { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: 4px } .rv-mini svg { width: 100%; height: 100% }
.chips-sel:has(.rv-chip) { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
body label.chip-sel.rv-chip { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; min-height: 64px; border-radius: 18px; margin: 0; text-align: left; line-height: 1.25 }
body label.chip-sel.rv-chip input { flex: none; width: 20px; height: 20px; margin: 0 }
.rv-chip-arte { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden }
.rv-chip-arte img { width: 40px; height: 40px; object-fit: contain }

/* Roleta (2026-10-25): figuras em círculos iguais, em pé e dentro da fatia. */
.rv-fig { transform-box: fill-box; transform-origin: center }
.rv-fig-roleta { --t: 40px; width: var(--t); height: var(--t); flex: none; border-radius: 50%; overflow: hidden; background: #fff; border: 3px solid var(--c, #fff); box-shadow: 0 2px 6px rgba(75, 58, 42, .15); display: block }
.rv-fig-roleta .rv-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; max-width: none; max-height: none }
.rv-fig-roleta.pose .rv-img { object-position: center top }
.rv-fig-roleta.grande { --t: 104px; border-width: 5px }
.rv-roleta-legenda .rv-fig-roleta { --t: 38px }
.rv-chip-arte.rv-fig-roleta { --t: 44px }
.rv-saiu { display: flex; align-items: center; gap: 12px; text-align: left }
.rv-saiu .rv-fig-roleta.grande { --t: 84px }
.rv-sorteio-fig:has(.rv-fig-roleta) { background: none; padding: 0; display: flex; align-items: center; justify-content: center }
.rv-sorteio-fig .rv-fig-roleta.grande { width: 100%; height: auto; aspect-ratio: 1 }
.rv-chip-arte.rv-fig-roleta img { width: 100%; height: 100%; object-fit: cover }
.rv-chip-arte.rv-fig-roleta.pose img { object-position: center top }

/* Roleta só de frases (2026-10-25): nome curto em cada fatia, bolinha de cor na legenda. */
.rv-cor { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--c) 60%, #4B3A2A) }
.rv-roleta-legenda li { min-height: 40px; line-height: 1.2 }
.rv-roleta-legenda { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.rv-fatia-txt { font-weight: 800 }
.rv-sorteio.so-texto { grid-template-columns: 1fr }
.rv-saiu.so-texto { background: color-mix(in srgb, var(--c) 25%, var(--card)); border: 3px solid var(--c); border-radius: 16px; padding: 8px 14px; font-size: 1.1rem }
.rv-saiu.so-texto small { display: block }

/* Nenhuma figura é esticada: sem regra própria, ela cabe inteira no espaço (2026-10-25). */
:where(img.learning-art, img.rv-img) { object-fit: contain }

/* Login próprio (2026-10-25): senha com botão Mostrar, "manter conectado" e atalhos grandes para o toque. */
.linha-senha { display: flex; gap: 8px; align-items: stretch }
.linha-senha input { flex: 1; min-width: 0 }
.linha-senha .ver-senha { flex: none; min-height: 48px }
.check-lembrar { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; cursor: pointer; margin: 4px 0 8px }
.check-lembrar input { width: 24px; height: 24px; accent-color: var(--roxo) }
.acoes-login { display: grid; gap: 8px; margin: 14px 0 6px; justify-items: center }
.acoes-login .link { min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; font: inherit; color: var(--roxo); text-decoration: underline; cursor: pointer }

/* Siga o que o Tico disse (2026-10-25): figuras do acervo nos botões, arrastar sem rolar a tela. */
.obj-tocar .learning-art, .obj-siga .learning-art { width: 100%; height: 100%; object-fit: contain; display: block }
.obj-tocar { min-height: 72px }
.obj-siga { touch-action: none; cursor: grab }
.obj-siga.arrastando { opacity: .35 }
.fantasma-arraste { filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); transform: scale(1.1) }
.zona-siga.alvo-sobre { outline: 3px dashed var(--roxo); outline-offset: 2px; border-radius: 10px; background: color-mix(in srgb, var(--lilas) 55%, transparent) }
.cachorro-cena .learning-art { width: 100%; height: 100%; object-fit: contain }
.pedido-escrito { margin-top: 8px; font-size: 1.05rem }
.obj-siga img, .obj-siga svg, .obj-tocar img, .obj-tocar svg { pointer-events: none; -webkit-user-drag: none; user-select: none }
.cena-siga, .bandeja-siga { user-select: none; -webkit-user-select: none }
.zona-siga { position: absolute; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; z-index: 2 }
.zona-siga .obj-siga { width: clamp(30px, 7vw, 50px); height: clamp(30px, 7vw, 50px) }
/* A cozinha e a bandeja cabem juntas na tela, para arrastar sem precisar rolar. */
.cena-siga { max-width: min(680px, calc((100dvh - 250px) * 1.43)); min-width: min(100%, 300px) }

/* botão de som e vinheta */
.topo .tk-som{color:var(--roxo,#8D3F95)}
.topo .tk-som.desligado{color:var(--ink2,#6b5b6e);opacity:.85}
.topo .tk-som svg{display:block;margin:auto}
#tk-vinheta-card #tk-ouvir-vinheta{margin-top:12px}
#tk-vinheta-card input[type=range]{accent-color:var(--roxo,#8D3F95)}

/* opção "Outro" */
.opcao-outro{border:3px dashed var(--roxo,#8D3F95)!important;background:#F7EEF8!important;color:var(--roxo,#8D3F95);font-weight:700;min-height:64px}
.opcao-outro .outro-mais{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--roxo,#8D3F95);color:#fff;font-size:1.6rem;line-height:1;flex:none}
.outro-fundo{position:fixed;inset:0;z-index:60;background:rgba(40,25,45,.55);display:grid;place-items:center;padding:12px}
.outro-painel{background:var(--card,#fff);border-radius:24px;max-width:720px;width:100%;max-height:calc(100dvh - 24px);overflow:auto;padding:18px 16px 16px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.outro-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.outro-topo h2{margin:0;font-size:1.4rem}
.outro-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
@media (min-width:640px){.outro-grade{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.outro-grade{grid-template-columns:repeat(4,1fr)}}
.outro-cartao{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;min-height:150px;padding:10px 8px;border:3px solid var(--line,#eadfce);border-radius:18px;background:#fff;font:inherit;font-weight:700;font-size:1.02rem;color:var(--ink,#3d2c25);cursor:pointer;text-align:center}
.outro-cartao img.learning-art{width:96px;height:96px;object-fit:contain}
.outro-cartao .outro-icone{font-size:3rem;line-height:1}
.outro-cartao.sel{border-color:var(--roxo,#8D3F95);background:#F3E6F5;box-shadow:0 0 0 4px rgba(141,63,149,.25);transform:translateY(-2px)}
.outro-cartao:not(.sel){opacity:.96}
.outro-grade:has(.sel) .outro-cartao:not(.sel){opacity:.6}
.outro-check{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--roxo,#8D3F95);color:#fff;display:none;place-items:center;font-size:1.1rem}
.outro-cartao.sel .outro-check{display:grid}
.outro-minha{border-style:dashed}
.outro-jeitos{grid-template-columns:1fr!important}
.outro-jeitos .outro-cartao{min-height:76px;grid-auto-flow:column;justify-content:start;gap:14px;padding-left:18px}
.outro-nota{display:grid;gap:4px;margin:6px 0 10px}
.outro-nota input{font:inherit;padding:10px 12px;border-radius:12px;border:2px solid var(--line,#eadfce)}
.outro-acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.outro-acoes .btn{min-height:52px;min-width:130px}
.outro-acoes .btn[disabled]{opacity:.45;cursor:not-allowed}
.outro-final img.learning-art{width:160px;height:160px;object-fit:contain}
.outro-msg{font-size:1.15rem;font-weight:600;margin:10px 4px 16px}

/* histórias sociais em cenas */
.hc-titulo-lista{text-align:center;margin:28px 0 4px}
.hc-capas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.hc-capa{display:grid;gap:6px;padding:8px;border:2px solid var(--line,#eadfce);border-radius:18px;background:#fff;font:inherit;text-align:center;cursor:pointer;color:var(--ink,#3d2c25)}
.hc-capa b{font-size:.98rem;line-height:1.25;padding:2px 4px 6px}
.hc-capa .hc-cena .fo-cena{height:110px;border-radius:12px}
.hc-capa .hc-ilustra img{height:110px}
.hc-capa .fo-pose-cena{max-height:96px}
.hc-leitor{max-width:760px;margin:0 auto}
.hc-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hc-etapa{font-weight:700;color:var(--roxo,#8D3F95)}
.hc-barra{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0 12px}
.hc-barra i{height:8px;border-radius:8px;background:var(--line,#eadfce)}
.hc-barra i.feito{background:#C9A8CD}.hc-barra i.agora{background:var(--roxo,#8D3F95)}
.hc-cena{border-radius:20px;overflow:hidden;margin-bottom:10px}
.hc-cena .fo-cena{height:230px;border-radius:20px}
.hc-cena .fo-pose-cena{max-height:210px}
.hc-ilustra{background:#FFF9EC;display:grid;place-items:center;padding:8px}
.hc-ilustra img{width:100%;height:240px;object-fit:contain;border-radius:14px}
.hc-reflexao{display:grid;place-items:center;background:#FFF9EC;padding:10px}
.hc-reflexao img.learning-art{width:150px;height:150px;object-fit:contain}
.hc-texto{font-size:1.25rem;font-weight:600;line-height:1.45;text-align:center;margin:8px 4px 12px}
.hc-pergunta{text-align:center;margin:10px 0}
.hc-opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hc-op{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;min-height:132px;padding:10px 6px;border:3px solid var(--line,#eadfce);border-radius:18px;background:#fff;font:inherit;font-weight:700;color:var(--ink,#3d2c25);cursor:pointer;text-align:center;line-height:1.25}
.hc-op img.learning-art{width:84px;height:84px;object-fit:contain}
.hc-op img.learning-art[src*="cena_"]{border-radius:12px;object-fit:contain}
.hc-op.sel{border-color:var(--roxo,#8D3F95);background:#F3E6F5;box-shadow:0 0 0 4px rgba(141,63,149,.25)}
.hc-op.sel::after{content:"✓";position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--roxo,#8D3F95);color:#fff;display:grid;place-items:center;font-size:.95rem}
.hc-opcoes .opcao-outro{min-height:132px;display:grid;justify-items:center;align-content:center;gap:6px;border-radius:18px;font:inherit;font-weight:700}
.hc-estr{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.hc-estr{grid-template-columns:repeat(4,1fr)}}
.hc-ret{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:#FFF4D6;font-size:1.05rem}
.hc-ret.ok{background:#E3F4E1}
.hc-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.hc-nav .btn{min-height:52px}
@media (max-width:420px){.hc-cena .fo-cena{height:190px}.hc-ilustra img{height:200px}.hc-texto{font-size:1.12rem}.hc-op{min-height:118px}.hc-op img.learning-art{width:70px;height:70px}}
.hc-cena .fo-pose-cena{object-fit:contain}
.hc-capa .hc-cena .fo-pose-cena{height:96px;max-height:96px;max-width:72px}
.hc-capa .hc-cena .fo-decor{width:56px;height:56px;margin-bottom:10px}
.hc-capa .hc-cena .fo-decor .learning-art{width:42px;height:42px}
.hc-capa .hc-cena{margin-bottom:0}
@media (max-width:430px){.topo{gap:6px}.topo .icone-btn{width:40px;height:40px;min-width:40px;padding:0}.topo .estrelas-chip{padding:4px 10px}.topo .titulo{min-width:0}.topo .titulo,.topo .titulo small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.cp-termos img{object-fit:contain}
@media (max-width:350px){.topo .titulo{display:none}}
#palco .original-scene{display:grid;place-items:center;aspect-ratio:auto;padding:8px}
#palco .original-scene img.learning-art{width:auto!important;height:auto!important;max-width:100%;max-height:min(40vh,340px);object-fit:contain}
/* Organizando as histórias: todos os quadrinhos do mesmo tamanho; a figura cabe inteira dentro do quadro. */
.rv-quadro, .rv-slot { min-height: 0; overflow: hidden }
.rv-quadro-fig, .rv-slot .rv-quadro-fig { position: relative; overflow: hidden }
.rv-quadro-fig > img, .rv-quadro-fig .rv-img, .rv-quadro-fig .learning-art { position: absolute; inset: 8px; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; max-width: none; object-fit: contain; padding: 0 }

/* Jogos da memória: a figura entra virando e sai com um fade, sem cortes. */
.memory-card .memory-front{display:none}
.memory-card.aberta .memory-back,.memory-card.matched .memory-back{display:none}
.memory-card.aberta .memory-front,.memory-card.matched .memory-front{display:flex;align-items:center;justify-content:center;animation:memVirar .3s ease-out both}
body .grade-memoria .carta-par.aberta .frente{animation:memVirar .3s ease-out both}
.memory-card.fechando .memory-front,body .grade-memoria .carta-par.fechando .frente{animation:memFechar .32s ease-in both}
@keyframes memVirar{from{opacity:0;transform:perspective(500px) rotateY(80deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes memFechar{from{opacity:1;transform:none}to{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.memory-card .memory-front,body .grade-memoria .carta-par .frente{animation:none!important}}