/* Biblia Infantil. Design tokens first, every rule below derives from them. */
:root {
  --bg: #000; --fg: #fff;
  --display: "Baloo 2", "Trebuchet MS", sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --col-w: 430px;
  --touch: 44px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-pop: cubic-bezier(.3, 1.8, .5, 1);
  color-scheme: dark;
}
html[data-style=papel] { --ink: #3b2a20; --paper: #fbe7c8; --paper-rgb: 251,231,200; }
html[data-style=brillo] { --ink: #ece9ff; --night-rgb: 3,4,12; }
html[data-style=plast] { --ink: #fff; --plum: #3a1745; --plum-rgb: 58,23,69; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font-family: var(--body); font-size: 15px; line-height: 1.5; overflow: hidden; }
button { font: inherit; }

/* phone column: fills a phone, centered on black on desktop */
.phone { position: relative; width: 100%; max-width: var(--col-w); height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: #111; isolation: isolate; }
@media (min-width: 500px) { .phone { box-shadow: 0 0 0 1px #1d1b24; } }
.feed { position: absolute; inset: 0; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.slide canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slide canvas:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* top bar */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: calc(10px + var(--safe-t)) 12px 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.styles, .tools { display: flex; gap: 8px; align-items: center; }
.bar button { pointer-events: auto; }
.bub { width: var(--touch); height: var(--touch); border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; position: relative; transition: transform .18s var(--ease-pop); }
.bub:active { transform: scale(.88); }
.bub:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bub i { display: block; width: 18px; height: 18px; border-radius: 50%; }
.bub[aria-pressed=true] { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.35); }
.bub[data-key=papel] { background: #fbe7c8; border: 2px solid #3b2a20; box-shadow: 2px 3px 0 rgba(70,35,10,.3); }
.bub[data-key=papel] i { background: #d65a3a; border-radius: 3px 8px 4px 9px; }
.bub[data-key=brillo] { background: #141c45; border: 1px solid rgba(190,200,255,.5); }
.bub[data-key=brillo] i { background: #fff3c4; width: 14px; height: 14px; box-shadow: 0 0 10px 3px #fff3c4; }
.bub[data-key=plast] { background: #7ee081; border: 3px solid #3a1745; box-shadow: 0 3px 0 #3a1745; }
.bub[data-key=plast] i { background: #ff5c8a; border: 2.5px solid #3a1745; width: 19px; height: 19px; }
.bub[aria-pressed=true][data-key=papel] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.35), 2px 3px 0 rgba(70,35,10,.3); }
.bub[aria-pressed=true][data-key=plast] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.35), 0 3px 0 #3a1745; }

/* overlay copy */
.ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 66px calc(20px + var(--safe-b)) 16px; pointer-events: none; z-index: 3; color: var(--ink); }
.chip { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; }
.ttl { margin: 8px 0 6px; line-height: 1.02; font-weight: 400; }
.verse { font-size: 12.5px; line-height: 1.38; margin: 0; }
.status { font-size: 12.5px; font-weight: 800; margin-top: 8px; min-height: 1.3em; }
.status.bump { animation: bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.rail { position: absolute; right: 10px; bottom: calc(26px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 5; color: var(--ink); }
.rbtn { pointer-events: auto; width: var(--touch); height: var(--touch); border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .18s var(--ease-pop); }
.rbtn:active { transform: scale(.85); }
.rbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rbtn svg { width: 22px; height: 22px; }
.rcount { font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.bar .rbtn { color: var(--ink); }
.bar #mute .cross { display: none; }
.bar #mute[aria-pressed=true] .cross { display: block; }
.bar #mute[aria-pressed=true] .waves { display: none; }

.hint { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.hint[hidden] { display: none; }
.hint i { width: 46px; height: 46px; border-radius: 50%; border: 3px solid currentColor; animation: tap 1.3s ease-out infinite; }
@keyframes tap { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.hint span { padding: 5px 11px; border-radius: 99px; }
.pop { position: absolute; pointer-events: none; z-index: 7; font-weight: 800; white-space: nowrap; transform: translate(-50%, -50%); animation: rise 1s ease-out forwards; }
@keyframes rise { 0% { transform: translate(-50%, -30%) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -180%) scale(1); opacity: 0; } }

/* papel */
html[data-style=papel] .ov { background: linear-gradient(rgba(var(--paper-rgb), 0), rgba(var(--paper-rgb), .92) 45%); }
html[data-style=papel] .ttl { font-family: "Caveat Brush", cursive; font-size: 32px; }
html[data-style=papel] .chip { background: #3b2a20; color: #fbe7c8; }
html[data-style=papel] .rbtn { background: #fff7ea; color: #3b2a20; box-shadow: 3px 4px 0 rgba(70,35,10,.25); }
html[data-style=papel] .hint { color: #3b2a20; }
html[data-style=papel] .hint span { background: #fff7ea; box-shadow: 3px 4px 0 rgba(70,35,10,.2); }
html[data-style=papel] .pop { font-family: "Caveat Brush", cursive; font-size: 30px; color: #d65a3a; font-weight: 400; }

/* brillo */
html[data-style=brillo] .ov { background: linear-gradient(rgba(var(--night-rgb), 0), rgba(var(--night-rgb), .85) 45%); }
html[data-style=brillo] .ttl { font-family: "Comfortaa", sans-serif; font-weight: 700; font-size: 25px; text-shadow: 0 0 18px rgba(170,180,255,.8); }
html[data-style=brillo] .chip { background: rgba(160,170,255,.18); color: #d9dcff; border: 1px solid rgba(190,200,255,.35); }
html[data-style=brillo] .rbtn { background: rgba(20,28,69,.55); color: #ece9ff; border: 1px solid rgba(190,200,255,.3); box-shadow: 0 0 16px rgba(140,150,255,.35); }
html[data-style=brillo] .hint { color: #fff3c4; }
html[data-style=brillo] .hint span { background: rgba(20,28,69,.75); border: 1px solid rgba(255,243,196,.35); }
html[data-style=brillo] .pop { font-family: "Comfortaa", sans-serif; color: #fff3c4; font-size: 18px; text-shadow: 0 0 12px #fff3c4; }

/* plastilina */
html[data-style=plast] .ov { background: linear-gradient(rgba(var(--plum-rgb), 0), rgba(var(--plum-rgb), .78) 45%); }
html[data-style=plast] .ttl { font-family: "Lilita One", sans-serif; font-size: 31px; text-shadow: 0 3px 0 #3a1745, 0 -1px 0 #3a1745, 2px 0 0 #3a1745, -2px 0 0 #3a1745; }
html[data-style=plast] .chip { background: #ffe066; color: #3a1745; border: 2.5px solid #3a1745; }
html[data-style=plast] .rbtn { background: #fff; color: #3a1745; border: 3px solid #3a1745; box-shadow: 0 4px 0 #3a1745; }
html[data-style=plast] .hint { color: #fff; }
html[data-style=plast] .hint span { background: #ff5c8a; border: 2.5px solid #3a1745; font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 15px; }
html[data-style=plast] .pop { font-family: "Lilita One", sans-serif; font-size: 28px; color: #ffe066; text-shadow: 0 3px 0 #3a1745, 2px 0 0 #3a1745, -2px 0 0 #3a1745; }

@media (prefers-reduced-motion: reduce) { .hint i, .pop, .status.bump { animation-duration: .01s; } }
.rbtn.say.on { animation: talk 0.9s ease-in-out infinite; }
@keyframes talk { 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .rbtn.say.on { animation: none; outline: 3px solid currentColor; } }