/* Tema por variáveis: conteudo.json → marca.tema sobrescreve qualquer uma delas. */
:root {
  --fundo: #0d0e1c;
  --cartao: #181a33;
  --cartao2: #22254a;
  --borda: #2d3060;
  --texto: #f5f3ff;
  --suave: #a3a2cf;
  --cor: #ffd23f;
  --cor2: #7b61ff;
  --cor3: #3fe0ff;
  --btn-texto: #1b1500;
  --ok: #36e09b;
  --erro: #ff5577;
  --raio: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Nunito", "M PLUS Rounded 1c", system-ui, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--cor2) 35%, 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 .45s 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); }
.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-size: 30px; line-height: 1.12; font-weight: 900; }
.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: #dcdaf5; }

/* 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: "M PLUS Rounded 1c", 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(8,8,20,.7)), 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(8,8,20,.88)), 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-size: 25px; font-weight: 900; line-height: 1.15; }
.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: "M PLUS Rounded 1c", "Nunito", sans-serif; font-size: 40px; font-weight: 800; margin-top: 10px; color: #fff; 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 { transform: translateY(3px); border-bottom-width: 2px; }
.opcao.sel { border-color: var(--cor3); background: color-mix(in srgb, var(--cor3) 12%, var(--cartao)); }
.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: "M PLUS Rounded 1c", sans-serif; font-size: 24px; }
.par.certa { opacity: .5; transform: scale(.95); }
.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: "M PLUS Rounded 1c", 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; }
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn:disabled { opacity: .35; cursor: default; }
.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; }

/* 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: #fff; 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: #062b1c; }
.ep b { display: block; }
.ep small { color: var(--suave); font-weight: 700; }

/* oferta */
.oferta h2 { font-size: 26px; font-weight: 900; line-height: 1.2; 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-size: 42px; font-weight: 900; color: var(--cor); }
.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 japonês */
.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: "M PLUS Rounded 1c", sans-serif; font-size: 56px; font-weight: 800; line-height: 1.2; margin-top: 8px; color: var(--cor); }
.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: "M PLUS Rounded 1c", sans-serif; font-size: 22px; color: #fff; }

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