/* ================= As Aventuras da Tingu — estilo ================= */
:root{
  --rosa:#d6336c; --azul:#2784c4; --laranja:#ce6c18; --roxo:#6e48ba;
  --verde:#189474; --bg:#fffaf2; --card:#ffffff; --tinta:#2a2833;
  --tinta2:#6b6580; --linha:#efe6da; --realce:#ffe8a3; --sombra:rgba(90,70,40,.13);
  --fsz:1.06rem;
}
html[data-noite="1"]{
  --bg:#171a26; --card:#212533; --tinta:#eceaf3; --tinta2:#a7a2bb;
  --linha:#2e3346; --realce:#4a4320; --sombra:rgba(0,0,0,.45);
  --rosa:#ff86ae; --azul:#7fc2f2; --laranja:#ffb163; --roxo:#b79bf0; --verde:#66d3b4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55; overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
button,select,input{font:inherit; color:inherit}
.screen{max-width:820px; margin:0 auto; padding:0 16px 40px}
h1,h2{font-family:"Comic Sans MS","Segoe Print",var(--bg),cursive}

/* -------------------------------- capa -------------------------------- */
.hero{text-align:center; padding:26px 0 6px}
.hero-kicker{margin:0; color:var(--azul); font-weight:700; font-size:1.15rem;
  font-family:"Comic Sans MS",cursive}
.hero-title{margin:.02em 0 .06em; color:var(--rosa); font-size:3.6rem; letter-spacing:.03em}
.hero-sub{margin:0 0 16px; color:var(--tinta2); font-style:italic}
.hero-img{border-radius:20px; box-shadow:0 8px 26px var(--sombra); width:100%}
.hero-for{margin:16px 0 0; color:var(--laranja); font-weight:700; font-size:1.15rem;
  font-family:"Comic Sans MS",cursive}

.actions{display:flex; flex-direction:column; gap:10px; margin:22px 0 8px}
.btn{
  border:2px solid var(--linha); background:var(--card); color:var(--tinta);
  border-radius:16px; padding:15px 18px; font-size:1.05rem; font-weight:700;
  cursor:pointer; box-shadow:0 3px 0 var(--linha); transition:transform .06s;
}
.btn:active{transform:translateY(2px); box-shadow:none}
.btn-primary{background:var(--rosa); border-color:var(--rosa); color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn-ghost{background:transparent}

.dedic{background:var(--card); border:2px solid var(--linha); border-radius:20px;
  padding:16px 18px; margin:22px 0; box-shadow:0 4px 14px var(--sombra)}
.dedic h2{margin:.1em 0 .5em; color:var(--roxo); font-size:1.3rem}
.dedic p{margin:.5em 0; color:var(--tinta2)}

.grid-title{color:var(--rosa); text-align:center; font-size:1.7rem; margin:26px 0 14px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.card{
  background:var(--card); border:2px solid var(--linha); border-radius:18px;
  padding:10px; text-align:center; cursor:pointer; position:relative;
  box-shadow:0 3px 10px var(--sombra); transition:transform .08s;
}
.card:active{transform:scale(.97)}
.card img{border-radius:50%; width:78px; margin:2px auto 6px}
.card .n{font-family:"Comic Sans MS",cursive; font-weight:700; font-size:.85rem}
.card .t{font-size:.92rem; font-weight:700; line-height:1.25}
.card.lido::after{
  content:"✓"; position:absolute; top:7px; right:9px; color:#fff; background:var(--verde);
  width:22px; height:22px; border-radius:50%; font-size:.8rem; line-height:22px;
}

.rodape{text-align:center; margin-top:34px}
.rodape img{border-radius:18px; box-shadow:0 6px 18px var(--sombra)}
.rodape p{color:var(--tinta2)}
.msg{font-size:.9rem; color:var(--tinta2); min-height:1.2em}

/* ------------------------------- leitor ------------------------------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  background:var(--bg); border-bottom:2px solid var(--linha);
  margin:0 -16px; padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top));
}
#top-title{flex:1; text-align:center; font-weight:700; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon-btn{
  border:2px solid var(--linha); background:var(--card); border-radius:14px;
  width:46px; height:46px; font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.story{padding-bottom:120px}
.story-n{margin:16px 0 0; color:var(--laranja); font-weight:700;
  font-family:"Comic Sans MS",cursive}
.story-title{margin:.05em 0 .1em; color:var(--rosa); font-size:2rem; line-height:1.15}
.story-sub{margin:0 0 14px; color:var(--tinta2); font-style:italic}
.story-img{border-radius:18px; box-shadow:0 6px 20px var(--sombra); width:100%}
.story-text{margin-top:18px; font-size:var(--fsz)}
.story-text p{margin:0 0 .85em}
.s{cursor:pointer; border-radius:6px; padding:1px 0}
.s.lendo{background:var(--realce); box-shadow:0 0 0 4px var(--realce)}
.pager{display:flex; gap:10px; margin-top:26px}
.pager .btn{flex:1}

/* ------------------------------- player ------------------------------- */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--card); border-top:2px solid var(--linha);
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px var(--sombra);
}
.player-bar{height:6px; background:var(--linha); border-radius:99px; overflow:hidden;
  max-width:790px; margin:0 auto 10px}
#player-fill{height:100%; width:0; background:var(--azul); transition:width .25s}
.player-row{display:flex; gap:10px; align-items:center; max-width:790px; margin:0 auto}
.play-btn{
  flex:1; border:none; background:var(--rosa); color:#fff; border-radius:16px;
  padding:15px; font-size:1.1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.play-btn:active{transform:translateY(2px)}
.play-btn span{font-size:1rem}

/* ------------------------------ ajustes ------------------------------- */
.sheet-bg{position:fixed; inset:0; background:rgba(20,16,30,.45); z-index:40}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card);
  border-radius:24px 24px 0 0; padding:8px 20px calc(24px + env(safe-area-inset-bottom));
  max-width:820px; margin:0 auto; max-height:88vh; overflow:auto;
  box-shadow:0 -8px 30px rgba(0,0,0,.3);
}
.sheet-grip{width:44px; height:5px; background:var(--linha); border-radius:99px; margin:6px auto 10px}
.sheet h2{margin:.2em 0 .8em; color:var(--roxo)}
.field{display:block; margin:16px 0}
.field>span{display:block; margin-bottom:7px; font-weight:700; font-size:.98rem}
select,input[type=range]{width:100%}
select{padding:12px; border-radius:14px; border:2px solid var(--linha); background:var(--bg)}
input[type=range]{accent-color:var(--rosa); height:34px}
.seg{display:flex; gap:8px}
.seg button{flex:1; border:2px solid var(--linha); background:var(--bg); border-radius:14px;
  padding:12px; cursor:pointer; font-weight:700}
.seg button:nth-child(1){font-size:.95rem}
.seg button:nth-child(2){font-size:1.2rem}
.seg button:nth-child(3){font-size:1.5rem}
.seg button[aria-pressed=true]{background:var(--rosa); color:#fff; border-color:var(--rosa)}
.switch{display:flex; align-items:center; gap:12px; margin:16px 0; font-weight:700}
.switch input{width:26px; height:26px; accent-color:var(--rosa); flex:none}
#btn-fechar{width:100%; margin-top:18px}

/* ------------------------- voz do papai ------------------------------ */
.play-btn.papai{background:var(--verde)}
.card .mic{font-size:.9rem}
.creditos{margin-top:26px; font-size:.85rem}
.creditos a{color:var(--tinta2); text-decoration:none; border-bottom:1px dotted var(--tinta2)}

/* ------------------------- tela de gravação -------------------------- */
.grava-box{margin-top:16px; background:var(--card); border:2px solid var(--linha);
  border-radius:20px; padding:16px; box-shadow:0 4px 14px var(--sombra)}
.crono{margin:0 0 4px; text-align:center; font-size:2.4rem; font-weight:700;
  font-family:"Comic Sans MS",cursive; color:var(--azul)}
.grava-btns{display:flex; flex-direction:column; gap:10px; margin-top:12px}
body.gravando .crono{color:#d6336c}
body.gravando .crono::after{content:" ●"; animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
#teleprompter p{margin:0 0 .7em}

@media (min-width:700px){
  .actions{flex-direction:row}
  .actions .btn{flex:1}
  .hero-title{font-size:4.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}