/* Cuento para dormir — base: tokens, marco de teléfono (escritorio) con la recámara alrededor, escenario (3D).
   Todo vive dentro de .app (100dvh, sin scroll del documento). Los colores del tema llegan como variables CSS
   (themes.js → applyThemeCss: --theme, --theme-2, --theme-accent, --theme-gold, --theme-hi, --theme-lo, --theme-ink). */
:root {
  --ink: #2E2A5A; --ink-2: #3B2A7A; --cream: #FFF7EC; --paper: #FBF3E4; --paper-2: #F3E6CE; --night: #1A1640; --lav: #B9A2FF; --amber: #FFB45E;
  --theme: #3D6BE0; --theme-2: #45C4D9; --theme-accent: #FF9A4D; --theme-gold: #F2C94C; --theme-hi: #92ADEE; --theme-lo: #2F54B3; --theme-ink: #253270; --on-theme: #FFFFFF;
  --ui-bottom: 190px; /* franja de abajo: notita de la página + puntitos (el encuadre del libro la respeta) */
  --font-head: "Fredoka", "Figtree", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --ease-soft: cubic-bezier(.3, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (max-height: 700px) { :root { --ui-bottom: 178px; } }
/* (todo bajo .cu, la clase de <html> de esta invitación: nada global que afecte a otras páginas) */
.cu *, .cu *::before, .cu *::after { box-sizing: border-box; }
.cu, .cu body { margin: 0; height: 100%; overflow: hidden; background: #120E30; color: var(--cream); font-family: var(--font-text); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
:where(.cu) button { font: inherit; color: inherit; }
.cu [hidden] { display: none !important; }
.cu, .cu * { scrollbar-width: none; }
.cu ::-webkit-scrollbar { display: none; }
.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; }
.noscript { position: fixed; inset: auto 16px 16px; padding: 16px; border-radius: 16px; background: var(--night); font-size: 16px; }

/* ---------- Fondo de escritorio: la recámara de noche alrededor del teléfono ---------- */
.room-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(40% 35% at 18% 78%, rgba(255, 180, 94, .22), transparent 70%),
    radial-gradient(30% 30% at 84% 22%, rgba(220, 228, 255, .16), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #2B2266 0%, #1A1640 55%, #0E0B26 100%); }
.room-bg::before { content: ""; position: absolute; inset: -50%;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #FFF7EC, transparent), radial-gradient(1px 1px at 90px 80px, #DCD2FF, transparent), radial-gradient(2px 2px at 160px 40px, #D9F7B0, transparent), radial-gradient(1px 1px at 60px 150px, #BFEFFF, transparent);
  background-size: 200px 200px; opacity: .45; }

/* ---------- La app: pantalla completa en el teléfono; marco de teléfono centrado en escritorio ---------- */
.app { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--night); isolation: isolate; }
@media (min-width: 560px) and (min-height: 560px) {
  .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%);
    border-radius: 38px; box-shadow: 0 0 0 10px #2A2256, 0 0 0 12px rgba(255, 247, 236, .12), 0 30px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(255, 180, 94, .16); }
}
.stage { position: absolute; inset: 0; overflow: hidden; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.fade { position: absolute; inset: 0; pointer-events: none; background: var(--night); opacity: 0; transition: opacity .35s ease; }
.fade.is-on { opacity: 1; }
.ui { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.ui > * { pointer-events: auto; }
.ui > .pass { pointer-events: none; }
.ui > .pass > * { pointer-events: auto; }

/* vitrina (home, imagen OG): a sangre, sin marco ni interfaz */
.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.is-showcase .ui { display: none !important; }

/* ---------- Versión sin WebGL (libro ilustrado en SVG/CSS) ---------- */
.fb-book { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 16px 10px calc(var(--ui-bottom) + 40px); overflow: hidden;
  background: radial-gradient(60% 40% at 18% 58%, rgba(255, 180, 94, .3), transparent 70%), linear-gradient(180deg, #6F68AE 0, #7E76C0 55%, #9A6440 55.3%, #7A4E30); }
.fb-room { position: absolute; left: 0; right: 0; top: 0; height: 55%; opacity: .95; }
.fb-room svg { width: 100%; height: 100%; display: block; }
.fb-cover { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(78%, 300px); aspect-ratio: 1.05 / 1.44; padding: 26px 18px 16px; border: 0; border-radius: 6px 14px 14px 6px; cursor: pointer; background: linear-gradient(90deg, #141B45 0 6%, #1F2A5E 6%); box-shadow: inset 0 0 0 3px rgba(242, 201, 76, .7), 0 18px 34px rgba(0, 0, 0, .45); color: #F2C94C; transform: rotate(-3deg); margin-bottom: auto; margin-top: 18%; }
.fb-title { font: 600 26px/1.1 var(--font-head); text-align: center; text-shadow: 0 2px 0 #8A5A10; }
.fb-cover-art { width: 100%; flex: 1; } .fb-cover-art svg { width: 100%; height: 100%; }
.fb-tap { padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 16px/1.1 var(--font-head); }
.fb-spread { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 560px; aspect-ratio: 2 / 1.36; border-radius: 6px; background: #1F2A5E; padding: 5px; box-shadow: 0 18px 34px rgba(0, 0, 0, .45); perspective: 1400px; transition: opacity .22s; }
.fb-spread.is-fading { opacity: 0; }
.fb-page { position: relative; overflow: hidden; padding: 10px 10px 18px; background: linear-gradient(90deg, var(--paper), #F6EAD3); color: var(--ink); }
.fb-left { border-radius: 4px 0 0 4px; box-shadow: inset -14px 0 18px -14px rgba(90, 60, 30, .45); }
.fb-right { border-radius: 0 4px 4px 0; box-shadow: inset 14px 0 18px -14px rgba(90, 60, 30, .45); display: flex; flex-direction: column; gap: 6px; }
.fb-h { margin: 0 0 4px; font: 600 18px/1.1 var(--font-head); color: var(--theme); }
.fb-text { margin: 0 0 6px; font: 500 16px/1.25 var(--font-head); }
.fb-text.is-first::first-letter { float: left; margin: 2px 4px 0 0; font: 600 36px/.8 var(--font-head); color: var(--theme); }
.fb-dress { display: grid; gap: 2px; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #FFF2B8; font: 700 16px/1.15 var(--font-hand); transform: rotate(-1.5deg); }
.fb-dress strong { font: 600 14px/1.1 var(--font-head); }
.fb-small { margin: 4px 0 0; font-size: 14px; color: #6A5A9C; }
.fb-num { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font: 600 12px/1 var(--font-head); color: #8C7AB8; }
.fb-art svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.fb-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fb-photo { position: relative; padding: 3px 3px 12px; border: 0; background: #FFFDF8; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transform: rotate(var(--r)); cursor: pointer; min-height: 44px; }
.fb-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fb-photo span { position: absolute; left: 2px; right: 2px; bottom: 1px; font: 600 8px/1.1 var(--font-head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-notebook { padding: 6px 8px; border-radius: 6px; background: repeating-linear-gradient(180deg, #FFFDF6 0 22px, rgba(111, 160, 220, .45) 22px 23px); }
.fb-notebook .itin li { display: block; padding: 2px 0; background: none; font: 700 16px/1.1 var(--font-hand); }
.fb-notebook .itin .time { font: 700 16px/1.1 var(--font-hand); color: var(--theme); margin-right: 4px; }
.fb-gift-top { display: grid; gap: 2px; justify-items: center; padding: 10px; border-radius: 10px; background: linear-gradient(180deg, #FFF1C6, #FFE8A0); text-align: center; font-size: 14px; }
.fb-gift-top strong { font: 600 16px/1.1 var(--font-head); }
.fb-guest strong { display: block; text-align: center; font: 600 14px/1.1 var(--font-head); margin-bottom: 4px; }
.fb-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; align-items: end; }
.fb-sigs img { width: 100%; height: 28px; object-fit: contain; border-bottom: 1px dashed rgba(120, 100, 170, .35); }
.fb-sigs img.is-mine { grid-column: 1 / -1; height: 40px; border: 2px dashed #F2C94C; border-radius: 6px; }
.fb-leaf { position: absolute; top: 5px; bottom: 5px; left: 50%; width: calc(50% - 5px); transform-origin: 0 50%; transform-style: preserve-3d; pointer-events: none; visibility: hidden; }
.fb-leaf > div { position: absolute; inset: 0; backface-visibility: hidden; padding: 10px; background: linear-gradient(90deg, #F6EAD3, var(--paper)); overflow: hidden; color: var(--ink); }
.fb-leaf-back { transform: rotateY(180deg); }
.fb-leaf.is-next { visibility: visible; animation: fb-turn .72s cubic-bezier(.4, .1, .3, 1) forwards; }
.fb-leaf.is-prev { visibility: visible; left: 5px; transform-origin: 100% 50%; animation: fb-turn-back .72s cubic-bezier(.4, .1, .3, 1) forwards; }
@keyframes fb-turn { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes fb-turn-back { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.fb-ribbon { left: 50%; top: calc(55% - 20px); }