/* The page around the browser build of the app: the first tap, the web reader over the app, the "turn your phone"
   notice. The app itself draws everything else. */
@font-face { font-family: Vollkorn; src: url(assets/assets/fonts/Vollkorn.ttf) format('truetype'); font-weight: 400 900; font-display: swap; }
[hidden] { display: none !important; }
html, body { position: fixed; inset: 0; width: 100%; margin: 0; height: 100%; background: #120d0a; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

/* the app's box: its size and scale come from seifli_host.js */
#seifli-app { position: fixed; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }

/* the first tap: browsers let sound start only after one, so it comes before the app starts */
#seifli-gate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; cursor: pointer; background: #120d0a; color: #fff2d8;
  font-family: Vollkorn, Georgia, serif; transition: opacity .5s; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#seifli-gate.gone { opacity: 0; pointer-events: none; }
#seifli-gate-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
#seifli-gate-go { position: relative; display: flex; align-items: center; gap: .55em; padding: .35em 1.2em .35em .4em; border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, #ffd77a, #e4a21e); color: #3b2306; font: 800 clamp(20px, 3.4vmin + 8px, 40px) Vollkorn, Georgia, serif;
  box-shadow: 0 0 40px rgba(255, 196, 80, .55), 0 6px 16px rgba(0, 0, 0, .5); animation: seifli-breathe 2.2s ease-in-out infinite; }
#seifli-gate-go svg { width: 1.8em; height: 1.8em; fill: #fff6df; background: #8a4b10; border-radius: 50%; padding: .38em; box-sizing: border-box; }
#seifli-gate-wait { position: relative; font: italic 600 clamp(18px, 2.4vmin + 8px, 30px) Vollkorn, Georgia, serif; text-shadow: 0 1px 4px #000; }
@keyframes seifli-breathe { 50% { transform: scale(1.05); } }

/* the open book, over the app */
#seifli-reader { position: fixed; inset: 0; z-index: 20; background: #000; }
#seifli-stage { position: absolute; inset: 0; }
#seifli-loading { position: absolute; inset: 0; display: grid; place-items: center; font: italic 600 clamp(18px, 2.4vmin + 8px, 30px) Vollkorn, Georgia, serif; color: #ffe3a6; }
#seifli-end { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 8, 5, .62); z-index: 5; font-family: Vollkorn, Georgia, serif; }
#seifli-end .card { width: min(92vw, 560px); box-sizing: border-box; background: linear-gradient(#fbf1dc, #efdcb4); color: #3a2a1b; border-radius: 18px;
  padding: clamp(14px, 3.4vmin, 30px); text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, .6); border: 3px solid #c9a25a; }
#seifli-end h2 { margin: 0 0 .3em; font-size: clamp(22px, 5vmin, 34px); font-weight: 800; }
#seifli-end p { margin: 0 0 1em; font-size: clamp(15px, 3vmin, 19px); line-height: 1.35; font-weight: 500; }
#seifli-end .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
#seifli-end a, #seifli-end button { font: 700 clamp(15px, 3vmin, 18px) Vollkorn, Georgia, serif; text-decoration: none; border-radius: 999px; padding: .5em 1.3em; cursor: pointer; border: 0; }
#seifli-end .primary { background: #f3b319; color: #2b2d65; }
#seifli-end .secondary { background: #2b2d65; color: #fff; }
#seifli-end .plain { background: transparent; color: #3a2a1b; border: 2px solid #b88d48; }
#seifli-end .note { margin: 12px 0 0; font-style: italic; }

/* a phone held upright: the app and the book are landscape */
#seifli-turn { position: fixed; inset: 0; z-index: 40; background: #120d0a; color: #fff2d8; display: grid; place-items: center; text-align: center; padding: 24px; font-family: Vollkorn, Georgia, serif; }
#seifli-turn svg { width: 72px; height: 72px; fill: none; stroke: #f3c46b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: seifli-tilt 2.4s ease-in-out infinite; }
#seifli-turn p { font-weight: 700; font-size: 22px; margin: 16px 0 0; }
@keyframes seifli-tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #seifli-gate-go, #seifli-turn svg { animation: none; } }