/* Hora do Terço · "Relicário à luz do dia"
   O terço fotográfico é a peça central; a página veste a mesma cor do fundo da foto (#F9F4F6),
   para o objeto parecer pousado na tela, não colado num cartão. */
@font-face{font-family:"Cormorant";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --marfim:#F9F4F6;          /* fundo = fundo da fotografia */
  --tinta:#1F2233;           /* texto, botão primário (14,5:1) */
  --tinta-2:#3E3A48;         /* texto secundário (10:1), escurecido para leitura de idosos */
  --ceu:#A8C6E6;             /* só luz: auréola da conta ativa, brilho do fecho */
  --ceu-tinta:#3B5B82;       /* céu legível: contador, foco, seleção (6,4:1) */
  --rosa-tinta:#9A4A5E;      /* detalhe raro (5,5:1) */
  --line:rgba(31,34,51,.14);
  --veil:rgba(31,34,51,.05);
  --f-display:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Spectral",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:16px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--marfim)}
html,body{margin:0}
body{
  min-height:100svh;background:var(--marfim);color:var(--tinta);
  font:400 1.1875rem/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--ceu-tinta);outline-offset:3px;border-radius:6px}

/* ---------- Layout: mobile primeiro ---------- */
main{
  position:relative;max-width:1180px;margin:0 auto;min-height:100svh;
  display:grid;grid-template-rows:auto auto 1fr;
  padding:max(8px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
}
body[data-screen="pray"] main{height:100svh;min-height:0}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.wordmark{font:italic 500 1.3rem/1 var(--f-display);letter-spacing:.01em}
body[data-screen="pray"] .wordmark{display:none}

/* ---------- Terço ---------- */
.stage{display:flex;justify-content:center;align-items:center;height:clamp(240px,38svh,420px);margin:0 0 6px}
body[data-screen="choose"] .stage{height:clamp(130px,20svh,240px)}
body[data-screen="pray"] .stage{height:clamp(280px,55svh,560px);transition:height .5s var(--ease)}
body[data-screen="pray"][data-reader="open"] .stage{height:clamp(150px,28svh,300px)}
body[data-screen="done"] .stage{height:clamp(280px,46svh,520px)}
.rosary{position:relative;height:100%;aspect-ratio:var(--ratio,560 / 1370);max-width:100%}
.rosary svg{display:block;width:100%;height:100%;overflow:hidden}

/* Revelação: a máscara mostra a camada original por cima da esmaecida. */
.rv{opacity:0;transition:opacity .6s var(--ease)}
.rv.on{opacity:1}
.rv.slow{transition-duration:1.2s}
.halo{opacity:0;transition:opacity .55s var(--ease)}
.halo.on{opacity:1;animation:breathe 5s ease-in-out .6s infinite}
.halo.soft{opacity:.38;transition-duration:1.4s}
.rosary.is-complete .halo.soft{opacity:.26}
@keyframes breathe{50%{opacity:.7}}

/* Uma única área de toque: a conta ativa. Contas futuras não recebem toque (não há salto acidental). */
.bead-hit{
  position:absolute;transform:translate(-50%,-50%);
  width:max(48px,var(--d,16%));aspect-ratio:1;border-radius:50%;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.bead-hit:focus-visible{outline:2px solid var(--ceu-tinta);outline-offset:2px;border-radius:50%}

.panel{display:flex;flex-direction:column;min-height:0}
.screen{display:flex;flex-direction:column;flex:1;min-height:0;animation:rise .8s var(--ease) both}
.screen[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Tipografia ---------- */
/* Rótulos em caixa normal e corpo legível: nada de caixa-alta miúda e espaçada. */
.eyebrow,.label,.counter{
  font:500 1.0625rem/1.4 var(--f-body);color:var(--tinta-2);margin:0
}
.display{font-family:var(--f-display);font-style:italic;font-weight:500;line-height:1.02;letter-spacing:-.005em;margin:.2em 0 .15em;text-wrap:balance}
#home-title{font-size:clamp(2.2rem,9.5vw,3.2rem)}
#prayer-title,#done-title{font-size:clamp(2rem,8.5vw,3.2rem)}
.counter{color:var(--ceu-tinta);margin-top:.3rem;display:flex;justify-content:space-between;gap:12px;max-width:36rem}
.counter span{white-space:nowrap}
.hint{color:var(--tinta-2);margin:.7rem 0 0;font-size:.95rem}
.hint.small{font-size:.85rem;margin:.4rem 0 0}
.quote{font:italic 400 1.2rem/1.5 var(--f-body);margin:0 0 1.8rem;max-width:30ch}

/* ---------- Botões ---------- */
.primary{
  appearance:none;border:0;border-radius:999px;cursor:pointer;
  background:var(--tinta);color:var(--marfim);
  font:500 1.0625rem/1.2 var(--f-body);letter-spacing:.01em;
  min-height:64px;padding:.9rem 1.6rem;
  box-shadow:0 0 0 0 rgba(168,198,230,0);
  transition:transform .25s var(--ease),box-shadow .5s var(--ease);
}
@media (hover:hover){.primary:hover{box-shadow:0 0 0 7px rgba(168,198,230,.45)}}
.primary:active{transform:scale(.98)}
.secondary{
  appearance:none;cursor:pointer;border-radius:999px;min-height:64px;padding:.8rem 1.6rem;
  background:transparent;color:var(--tinta);border:1.5px solid rgba(31,34,51,.42);
  font:500 1.1875rem/1.2 var(--f-body);transition:background .3s,border-color .3s;
}
@media (hover:hover){.secondary:hover{background:var(--veil);border-color:rgba(31,34,51,.6)}}
.secondary:active{transform:scale(.98)}
.link{
  appearance:none;background:none;border:0;cursor:pointer;color:var(--tinta-2);
  font:400 1.0625rem/1.2 var(--f-body);padding:.7rem .3rem;min-height:48px;
  display:inline-flex;align-items:center;gap:.3rem;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.3em;
  transition:color .3s,text-decoration-color .3s;
}
.link:hover{color:var(--tinta);text-decoration-color:currentColor}
.topbar .link,.back-home{text-decoration:none}
.danger:hover{color:var(--rosa-tinta)}
.icon{
  appearance:none;width:64px;height:64px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--tinta);
  display:grid;place-items:center;transition:border-color .3s,background .3s;
}
@media (hover:hover){.icon:hover{border-color:rgba(31,34,51,.35);background:var(--veil)}}
.icon:disabled{opacity:.3;cursor:default}
#sound .off{display:none}
#sound[aria-pressed="false"] .on{display:none}
#sound[aria-pressed="false"] .off{display:block}
#sound[aria-pressed="false"]{color:var(--tinta-2)}

/* ---------- Início ("Duas portas") ---------- */
fieldset{border:0;margin:0;padding:0;min-width:0}
.day{font-size:1.125rem;line-height:1.4;color:var(--tinta-2);margin:0}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:1.2rem}
.door{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center}
.primary.door{min-height:72px}
.door small{font-size:1rem;font-weight:400;opacity:.85}
.resume-box{border:1.5px solid var(--ceu-tinta);background:rgba(168,198,230,.18);border-radius:22px;padding:14px 18px;margin-top:.4rem}
.resume-where{margin:0;font-size:1.125rem;color:var(--ceu-tinta)}
.resume-where:focus{outline:none}
.resume-pos{margin:.2rem 0 0;font-size:1.375rem;line-height:1.3;font-weight:500;color:var(--tinta)}
.home-foot{padding-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:1.6rem}
.home-foot p{margin:0;color:var(--tinta-2);font-size:1.125rem}

/* Ajustes: controles segmentados grandes. */
.seg{margin-bottom:.4rem}
.seg + .seg{margin-top:1.2rem}
.seg .label{margin-bottom:.5rem;padding:0}
.seg-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:999px;padding:4px}
.seg-track.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{position:relative;min-width:0}
.seg span{
  display:grid;place-items:center;min-height:52px;border-radius:999px;cursor:pointer;text-align:center;
  font-size:1.0625rem;line-height:1.15;color:var(--tinta-2);transition:background .35s var(--ease),color .35s;padding:0 .3rem;
}
.seg input:checked+span{background:#fff;color:var(--tinta);box-shadow:0 1px 2px rgba(31,34,51,.08),inset 0 0 0 1px rgba(31,34,51,.16)}
.seg input:focus-visible+span{outline:2px solid var(--ceu-tinta);outline-offset:3px}

/* ---------- Escolha do mistério ---------- */
#choose-title{font-size:clamp(2rem,8.5vw,2.6rem)}
.mystery-list{display:flex;flex-direction:column;gap:10px;margin:.6rem 0 1rem}
.mystery-option{
  appearance:none;cursor:pointer;text-align:left;min-height:64px;padding:.65rem 1.1rem;border-radius:18px;
  border:1.5px solid var(--line);background:transparent;color:var(--tinta);font:inherit;
  display:flex;flex-direction:column;gap:.1rem;transition:border-color .3s,background .3s;
}
@media (hover:hover){.mystery-option:hover{border-color:rgba(31,34,51,.4)}}
.mystery-option[aria-current="true"]{border-color:var(--ceu-tinta);background:rgba(168,198,230,.18)}
.mo-n{font-size:1rem;color:var(--tinta-2)}
.mo-t{font:italic 500 1.5rem/1.15 var(--f-display)}

/* ---------- Oração ("Terço primeiro") ---------- */
.context{font-size:1.125rem;line-height:1.35;color:var(--tinta-2);margin:.1rem 0 0;max-width:36rem}
#prayer-title{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.6rem;margin:.05em 0 .1em}
#prayer-name{font-size:clamp(2.4rem,10.5vw,2.9rem)}
#prayer-pos{font:500 1.25rem/1 var(--f-body);font-style:normal;color:var(--ceu-tinta);white-space:nowrap}
.intention{margin:0 0 .2rem;font-style:italic;font-size:1.125rem;color:var(--tinta-2)}
.chip{
  appearance:none;align-self:flex-start;min-height:56px;padding:.55rem 1.4rem;margin-top:.5rem;cursor:pointer;
  border-radius:999px;border:1.5px solid rgba(31,34,51,.35);background:transparent;font:inherit;font-size:1.125rem;color:var(--tinta);
  transition:border-color .3s,background .3s;
}
@media (hover:hover){.chip:hover{background:var(--veil);border-color:rgba(31,34,51,.55)}}
.reader{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;margin-top:.3rem;border-top:1px solid var(--line)}
.reader:focus{outline:none}
/* Rolagem visível e sem máscara: o fim do texto nunca some sem aviso. */
.prayer-text{
  flex:1 1 auto;min-height:3rem;overflow-y:auto;max-width:36ch;padding-right:.5rem;
  font-size:clamp(1.375rem,5.6vw,1.5rem);line-height:1.6;transition:opacity .45s var(--ease);
  scrollbar-width:thin;scrollbar-color:var(--tinta-2) transparent;
}
.prayer-text::-webkit-scrollbar{width:6px}
.prayer-text::-webkit-scrollbar-thumb{background:var(--tinta-2);border-radius:3px}
.prayer-text p{margin:0 0 .7em}
/* Texto aberto: a página inteira rola (uma rolagem só, mais fácil para idosos) e os botões ficam presos no rodapé. */
body[data-screen="pray"][data-reader="open"] main{height:auto;min-height:100svh}
body[data-screen="pray"][data-reader="open"] .reader,
body[data-screen="pray"][data-reader="open"] .prayer-text{flex:0 0 auto;overflow:visible}
.reader .link{align-self:flex-end;min-height:44px;padding:.3rem .2rem;font-size:1rem}
#pray-context.swap,#prayer-title.swap,#prayer-intention.swap,.prayer-text.swap{opacity:0}
#pray-context,#prayer-title,#prayer-intention{transition:opacity .45s var(--ease)}
.controls{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:12px;align-items:center;padding:10px 0 4px;margin-top:auto;position:sticky;bottom:0;background:var(--marfim);box-shadow:0 -14px 14px -8px var(--marfim)}
.controls .primary{min-height:68px;font-size:1.1875rem;line-height:1.15;padding-inline:.8rem;min-width:0;overflow-wrap:anywhere}
@media (max-width:359px){.controls{gap:8px;grid-template-columns:56px minmax(0,1fr) 56px}.controls .icon{width:56px;height:56px}}

/* ---------- Concluída ---------- */

/* ---------- Dialogs ---------- */
dialog{
  border:1px solid var(--line);border-radius:22px;padding:0;color:var(--tinta);max-height:calc(100svh - 24px);overflow:auto;
  background:#FFFDFD;width:min(440px,calc(100vw - 2*var(--gutter)));
  box-shadow:0 30px 80px rgba(31,34,51,.18);
}
dialog::backdrop{background:rgba(31,34,51,.32);backdrop-filter:blur(3px)}
dialog[open]{animation:rise .5s var(--ease) both}
.sheet{padding:26px 24px 18px}
.sheet-title{font-size:2rem;margin:0 0 1.2rem}
.toggle{display:flex;align-items:center;gap:14px;min-height:56px;cursor:pointer;margin-top:1rem}
.toggle input{appearance:none;flex:none;width:44px;height:26px;border-radius:999px;background:var(--veil);border:1px solid rgba(31,34,51,.3);position:relative;cursor:pointer;transition:background .3s;margin:0}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--tinta-2);transition:transform .35s var(--ease),background .3s}
.toggle input:checked{background:var(--ceu-tinta);border-color:var(--ceu-tinta)}
.toggle input:checked::after{transform:translateX(18px);background:#fff}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:1.2rem}
.sheet-foot .primary{min-height:56px;padding:.7rem 1.6rem}
.credits-body{font-size:.95rem;color:var(--tinta-2)}
.credits-body h3{font:500 1.0625rem/1.4 var(--f-body);color:var(--ceu-tinta);margin:1.2em 0 .3em}
.credits-body h3:first-child{margin-top:0}
.credits-body p{margin:0 0 .5em}
.credits-body a{color:var(--tinta)}

/* ---------- Telas maiores ---------- */
@media (min-width:900px){
  :root{--gutter:48px}
  main,body[data-screen="pray"] main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;height:auto;min-height:100svh
  }
  .topbar{grid-column:1/-1}
  .stage,body[data-screen="pray"] .stage,body[data-screen="done"] .stage{height:min(86svh,820px);margin:0;align-self:center}
  .panel{align-self:center;padding:24px 0;max-height:calc(100svh - 80px)}
  body[data-screen="pray"] .panel{height:min(640px,calc(100svh - 96px))}
}
@media (max-height:680px) and (max-width:899px){
  body[data-screen="pray"] .stage{height:36svh}
  #home-title{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
@media (prefers-contrast:more){
  :root{--tinta-2:#3E3A48;--line:rgba(31,34,51,.4)}
}
@media (forced-colors:active){
  .primary{border:2px solid ButtonText}
  .bead-hit{border:2px solid Highlight}
}
[tabindex="-1"]:focus{outline:none}