/* Tema por variáveis: conteudo.json → marca.tema sobrescreve qualquer uma delas. */
:root {
  --fundo: #151C36;
  --cartao: #1F2A4D;
  --cartao2: #2A3763;
  --borda: #35447A;
  --texto: #FFF8F1;
  --suave: #AEB7D9;
  --cor: #FF6B4A;
  --cor2: #7FC8B2;
  --cor3: #F5B841;
  --btn-texto: #1B2440;
  --ok: #5FD6A8;
  --erro: #FF5C7A;
  --raio: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; word-break: keep-all; /* não quebra palavra em hangul no meio */ }
body {
  font-family: "Plus Jakarta Sans", "Noto Sans KR", system-ui, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--cor2) 16%, transparent), transparent 60%),
    radial-gradient(80% 40% at 100% 100%, color-mix(in srgb, var(--cor3) 12%, transparent), transparent 70%),
    var(--fundo);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--cor3); }
.app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }

/* topo */
.topo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.voltar, .musica { background: var(--cartao); border: 2px solid var(--borda); width: 38px; height: 38px; border-radius: 12px; font-size: 18px; color: var(--suave); cursor: pointer; flex: none; }
.barra { flex: 1; height: 12px; background: var(--cartao2); border-radius: 99px; overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.3,1.4,.6,1);
  background: linear-gradient(90deg, var(--cor2), var(--cor3)); box-shadow: 0 0 12px color-mix(in srgb, var(--cor3) 60%, transparent); }
.barra.cresce { animation: barraPula .5s .15s; }
.xp { background: var(--cor); color: var(--btn-texto); font-weight: 900; font-size: 13px; padding: 6px 10px; border-radius: 99px; flex: none; }
.musica.on { color: var(--cor); border-color: color-mix(in srgb, var(--cor) 50%, var(--borda)); }
.musica.flutuante { position: fixed; top: 14px; right: max(14px, calc(50% - 226px)); z-index: 40; }

/* capa */
.capa { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
.chapeu { display: inline-block; align-self: center; font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--btn-texto); background: var(--cor); padding: 6px 12px; border-radius: 8px; transform: rotate(-1.5deg); }
.capa h1 { font-family: "Fraunces", Georgia, serif; font-size: 32px; line-height: 1.1; font-weight: 900; letter-spacing: -.01em; }
.capa p { color: var(--suave); font-size: 17px; }
.mascote-grande { font-size: 84px; line-height: 1; }
.mascote-grande img { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.capa.com-imagem { margin: -16px -16px 16px; padding: 48px 20px 28px; justify-content: flex-end; min-height: 64vh; border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--fundo) 96%, transparent) 82%), var(--img) center/cover; }
.capa.com-imagem h1 { text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.capa.com-imagem p { color: color-mix(in srgb, var(--texto) 86%, transparent); }

/* falas */
.fala { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; animation: entra .35s ease; }
.fala .m { font-size: 40px; line-height: 1; flex: none; }
.fala .m img { width: 52px; height: 52px; object-fit: contain; }
.fala.pers .m img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 3px solid var(--cor); }
.balao { background: var(--cartao); border: 2px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; font-weight: 700; font-size: 17px; line-height: 1.45; display: grid; gap: 6px; flex: 1; }
.quem { color: var(--cor); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.jp { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 0 10px; background: var(--cartao2); border: 0; border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.jp-txt { font-family: "Noto Sans KR", sans-serif; font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--cor); }
.jp-rom { grid-column: 1; color: var(--suave); font-size: 14px; }
.jp-som { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 22px; }
.retrato { height: 38vh; max-height: 340px; border-radius: 22px; margin-bottom: 14px; padding: 14px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, transparent 55%, rgba(15,20,42,.75)), var(--img) center 20%/cover; border: 2px solid var(--borda); animation: entra .4s ease; }
.retrato + .fala .m, .mascote-medio + .fala .m { display: none; }
.mascote-medio { text-align: center; margin: 4px 0 12px; }
.mascote-medio img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.dica { background: color-mix(in srgb, var(--cor) 12%, var(--cartao)); border: 2px solid color-mix(in srgb, var(--cor) 40%, var(--borda)); color: var(--texto); border-radius: 14px; padding: 10px 12px; font-weight: 700; margin-bottom: 12px; }

/* cenas */
.cena { position: relative; min-height: 46vh; border-radius: 22px; overflow: hidden; margin-bottom: 16px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; color: #fff;
  background: linear-gradient(180deg, transparent 35%, rgba(15,20,42,.92)), var(--img) center/cover; border: 2px solid var(--borda); animation: entraCena .6s cubic-bezier(.2,1,.3,1); }
.cena.baixa { min-height: 150px; }
.cena .chapeu { align-self: flex-start; }
.cena h2 { font-family: "Fraunces", Georgia, serif; font-size: 27px; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; }
.narra { font-size: 17px; font-weight: 700; line-height: 1.5; margin-bottom: 12px; }

/* palco (destaques) */
.palco { background: var(--cartao2); border: 2px solid var(--borda); border-radius: 22px; padding: 26px 18px; text-align: center; margin-bottom: 16px; position: relative; overflow: hidden; }
.palco::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cor2) 35%, transparent), transparent); pointer-events: none; }
.palco > * { position: relative; }
.palco .grande { font-family: "Black Han Sans", "Noto Sans KR", sans-serif; font-size: 46px; font-weight: 400; margin-top: 10px; color: var(--texto); animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.romaji { color: var(--cor); font-weight: 800; letter-spacing: .05em; margin-top: 4px; }
.palco .legenda { color: var(--suave); font-weight: 700; margin-top: 4px; }
.som { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--cor); color: var(--btn-texto); font-size: 30px; cursor: pointer; box-shadow: 0 0 0 10px color-mix(in srgb, var(--cor) 22%, transparent); animation: pulsaSom 1.6s ease-in-out infinite; }

/* opções */
.opcoes { display: grid; gap: 10px; margin-bottom: 16px; }
.opcoes.grade { grid-template-columns: 1fr 1fr; }
.opcao { text-align: left; background: var(--cartao); border: 2px solid var(--borda); border-bottom-width: 5px; border-radius: 14px; padding: 14px 16px; font: inherit; font-weight: 800; font-size: 16px; color: var(--texto); cursor: pointer; transition: transform .08s, border-color .15s, background .15s; animation: entra .3s ease backwards; }
.opcao:nth-child(2) { animation-delay: .05s; } .opcao:nth-child(3) { animation-delay: .1s; } .opcao:nth-child(4) { animation-delay: .15s; } .opcao:nth-child(5) { animation-delay: .2s; }
.opcao:active, .peca:active, .ep:active { animation: none; transform: translateY(3px) scale(.97); border-bottom-width: 2px; }
.opcao.sel { border-color: var(--cor3); background: color-mix(in srgb, var(--cor3) 12%, var(--cartao)); animation: quica .4s cubic-bezier(.2,1.6,.4,1); }
.opcao.certa { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--cartao)); animation: pop .35s; }
.opcao.errada { border-color: var(--erro); background: color-mix(in srgb, var(--erro) 18%, var(--cartao)); }
.explica { border-radius: 14px; padding: 12px 14px; font-weight: 700; margin-bottom: 16px; animation: entra .3s; }
.explica.ok { background: color-mix(in srgb, var(--ok) 16%, var(--cartao)); border: 2px solid color-mix(in srgb, var(--ok) 50%, transparent); }
.explica.no { background: color-mix(in srgb, var(--erro) 16%, var(--cartao)); border: 2px solid color-mix(in srgb, var(--erro) 50%, transparent); }

/* pares e montar */
.pares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pares > div { display: grid; gap: 10px; }
.par { text-align: center; }
.par[data-lado="d"] { font-size: 18px; }
.grande-jp { font-family: "Noto Sans KR", sans-serif; font-size: 24px; }
.par.certa { opacity: .5; transform: scale(.95); animation: salto .45s; }
.montagem { min-height: 64px; border-bottom: 2px dashed var(--borda); display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; margin-bottom: 16px; }
.montagem.ok { border-color: var(--ok); } .montagem.no { border-color: var(--erro); }
.pecas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.peca { background: var(--cartao); border: 2px solid var(--borda); border-bottom-width: 5px; border-radius: 12px; padding: 10px 14px; font-family: "Noto Sans KR", "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; color: var(--texto); cursor: pointer; animation: pop .3s; }

/* botões */
.espaco { flex: 1; min-height: 12px; }
.btn { width: 100%; border: 0; border-bottom: 5px solid rgba(0,0,0,.3); border-radius: 16px; padding: 16px; font: inherit; font-weight: 900; font-size: 17px; color: var(--btn-texto); background: var(--cor); cursor: pointer; transition: transform .08s; }
/* entra quicando, dá um pulinho de tempos em tempos e amassa no toque (ao soltar, quica de novo) */
.btn:not(:disabled) { animation: quica .55s cubic-bezier(.2,1.5,.4,1) backwards, chama 2.8s 2.4s ease-in-out infinite; }
.btn.sec:not(:disabled) { animation: quica .55s .08s cubic-bezier(.2,1.5,.4,1) backwards; }
.btn:not(:disabled):active { animation: none; transform: translateY(4px) scale(.96, .9); border-bottom-width: 1px; }
.btn:disabled { opacity: .35; cursor: default; }
.btn.certo { background: var(--ok); color: var(--btn-texto); }
.btn.errado { background: var(--erro); color: #fff; }
.btn.salto:not(:disabled) { animation: salto .6s cubic-bezier(.3,1.4,.5,1); }
.btn.sec { background: var(--cartao); color: var(--texto); border: 2px solid var(--borda); border-bottom-width: 5px; }
.nota { text-align: center; color: var(--suave); font-size: 13px; margin-top: 10px; }
#saida .nota { margin: 14px 0 16px; }

/* lista de episódios */
.lista { display: grid; gap: 12px; }
.ep { display: flex; align-items: center; gap: 14px; background: var(--cartao); border: 2px solid var(--borda); border-bottom-width: 5px; border-radius: var(--raio); padding: 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; animation: entra .35s ease backwards; }
.ep .n { width: 44px; height: 44px; border-radius: 12px; background: var(--cor2); color: var(--btn-texto); display: grid; place-items: center; font-weight: 900; flex: none; }
.ep.trancado { opacity: .75; } .ep.trancado .n { background: var(--cartao2); color: var(--suave); }
.ep.feito .n { background: var(--ok); color: var(--btn-texto); }
.ep b { display: block; }
.ep small { color: var(--suave); font-weight: 700; }

/* oferta */
.oferta h2 { font-family: "Fraunces", Georgia, serif; font-size: 28px; font-weight: 900; line-height: 1.15; margin-bottom: 8px; }
.beneficios { list-style: none; display: grid; gap: 10px; margin: 18px 0; }
.beneficios li { background: var(--cartao); border: 2px solid var(--borda); border-radius: 14px; padding: 12px 14px; font-weight: 700; animation: entra .35s ease backwards; }
.beneficios li::before { content: "✓ "; color: var(--ok); font-weight: 900; }
.preco { text-align: center; margin: 8px 0 16px; }
.preco s { color: var(--suave); }
.preco strong { display: block; font-family: "Fraunces", Georgia, serif; font-size: 46px; font-weight: 900; color: var(--cor3); }
.preco small { display: block; color: var(--suave); font-weight: 700; }
.campo { width: 100%; padding: 14px; border-radius: 14px; border: 2px solid var(--borda); background: var(--cartao); color: var(--texto); font: inherit; font-size: 16px; margin-bottom: 10px; }
.campo:focus { outline: none; border-color: var(--cor3); }

/* nome em coreano */
.nome-card { margin: 18px 0 8px; border-radius: 22px; padding: 24px 16px; text-align: center; background: var(--cartao2); border: 2px solid var(--borda); animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.nome-card small { color: var(--cor3); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.nome-kana { font-family: "Black Han Sans", "Noto Sans KR", sans-serif; font-size: 60px; font-weight: 400; line-height: 1.2; margin-top: 8px; color: var(--cor3); }
.silabas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.silabas span { background: var(--cartao); border-radius: 10px; padding: 6px 10px; display: grid; font-size: 12px; color: var(--suave); }
.silabas b { font-family: "Noto Sans KR", sans-serif; font-size: 22px; color: var(--texto); }

/* fim do episódio */
.estrelas { display: flex; justify-content: center; gap: 6px; font-size: 46px; line-height: 1; }
.estrelas span { color: var(--cartao2); animation: estrela .5s cubic-bezier(.2,1.8,.4,1) backwards; }
.estrelas span.on { color: var(--cor); text-shadow: 0 0 18px color-mix(in srgb, var(--cor) 60%, transparent), 0 3px 0 rgba(0,0,0,.3); }
.estrelas span:nth-child(2) { transform: translateY(-8px) scale(1.15); }

/* animações */
.flutua { animation: flutua 3s ease-in-out infinite; }
.xp.pula { animation: pula .5s ease; }
.treme { animation: treme .35s; }
.pulsa { animation: pulsa 1.8s ease-in-out infinite; }
.btn.pulsa:not(:disabled) { animation: quica .55s cubic-bezier(.2,1.5,.4,1) backwards, pulsa 1.8s .6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes pula { 40% { transform: scale(1.4) rotate(-6deg); } }
@keyframes treme { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes pulsa { 50% { transform: scale(1.03); box-shadow: 0 0 0 8px color-mix(in srgb, var(--cor) 22%, transparent); } }
@keyframes pulsaSom { 50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--cor) 10%, transparent); } }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes entraCena { from { opacity: 0; transform: scale(1.08); filter: blur(6px); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.confete { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confete i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: cai 1.6s linear forwards; }
@keyframes cai { to { transform: translateY(110vh) rotate(720deg); } }
.xp-voa { position: fixed; z-index: 60; font-weight: 900; color: var(--cor); font-size: 22px; pointer-events: none; animation: voa .9s ease-out forwards; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
@keyframes voa { to { transform: translateY(-80px) scale(1.3); opacity: 0; } }

/* toque gamificado */
.fala .m.comemora { animation: comemora .7s cubic-bezier(.3,1.4,.5,1); }
.faisca { position: fixed; z-index: 70; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); pointer-events: none; animation: faisca .65s cubic-bezier(.1,.7,.3,1) forwards; }
.faisca.estrela { width: auto; height: auto; margin: -11px 0 0 -8px; background: none; color: var(--c); font-size: 18px; font-style: normal; line-height: 1; }
.onda { position: fixed; z-index: 69; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid var(--cor); pointer-events: none; animation: onda .45s ease-out forwards; }
.sequencia { position: fixed; z-index: 70; top: 74px; left: 50%; padding: 8px 16px; border-radius: 99px; font-weight: 900; font-size: 17px; color: var(--btn-texto); white-space: nowrap; pointer-events: none;
  background: linear-gradient(90deg, var(--cor3), var(--cor)); box-shadow: 0 5px 0 rgba(0,0,0,.3); animation: sequencia 1.4s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes quica { 0% { transform: translateY(26px) scale(.9, 1.1); opacity: 0; } 55% { transform: translateY(-7px) scale(1.03, .97); opacity: 1; } 78% { transform: translateY(2px) scale(.99, 1.02); } }
@keyframes chama { 0%, 72%, 100% { transform: none; } 78% { transform: translateY(2px) scale(1.03, .94); } 85% { transform: translateY(-9px) scale(.98, 1.04); } 92% { transform: translateY(0) scale(1.02, .97); } 96% { transform: translateY(-3px); } }
@keyframes salto { 0% { transform: scale(1.06, .86); } 35% { transform: translateY(-14px) scale(.95, 1.08); } 60% { transform: translateY(0) scale(1.05, .93); } 80% { transform: translateY(-4px); } }
@keyframes comemora { 30% { transform: translateY(-16px) rotate(-10deg) scale(1.15); } 55% { transform: translateY(0) rotate(6deg) scale(.96, 1.04); } 78% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes barraPula { 40% { transform: scaleY(1.5); } }
@keyframes estrela { 0% { transform: scale(0) rotate(-120deg); opacity: 0; } }
@keyframes faisca { to { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(140deg); opacity: 0; } }
@keyframes onda { to { transform: scale(3.4); opacity: 0; } }
@keyframes sequencia { 0% { transform: translate(-50%, -30px) scale(.5); opacity: 0; } 18%, 72% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -24px) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}