/* ============================================================
 * tiko-mobile.css — full-screen, device-adaptive layout
 * ------------------------------------------------------------
 * Linked AFTER each page's inline <style> so it overrides it.
 * Works with the classes and --app-h variable set by
 * tiko-viewport.js (see that file for the class meanings).
 * Every rule degrades safely: if a feature is unsupported the
 * page keeps its original styling.
 * ============================================================ */

/* ---------- 1. True full-height app on every browser ----------
 * --app-h is the real visible height, so the bottom buttons are
 * never hidden behind the browser's URL bar (100vh bug), and it
 * works on browsers without dvh support. */
html, body { height: 100%; }
body { min-height: 100vh; min-height: var(--app-h, 100vh); }
#app-container {
    height: 100vh;
    height: var(--app-h, 100vh);
}

/* ---------- 2. Use the whole screen on tablets / big phones ----------
 * The app was a fixed 430px column; on wider screens it now fills
 * the width up to a comfortable reading size. */
@media (min-width: 431px) {
    #app-container { max-width: 100%; box-shadow: none; }
}
@media (min-width: 900px) {
    #app-container { max-width: 900px; box-shadow: 0 0 40px rgba(0,0,0,0.1); }
}
/* Keep slide text a readable width when the container is wide */
.vp-lg .slide > *:not(.hero-area):not(.scene-hero) {
    max-width: 720px; margin-left: auto; margin-right: auto; width: 100%;
}

/* ---------- 2b. Slides never cut off content ----------
 * Start/end screens centre their content with justify-content:center,
 * which on short screens pushes the top AND the button off-screen with
 * no way to scroll. Auto margins centre when there's room and collapse
 * to 0 when there isn't, so the slide can scroll instead ("safe" centring
 * that also works on old browsers). */
.slide { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.slide.start-screen, .slide.completion-screen { justify-content: flex-start; }
.slide.start-screen > :first-child, .slide.completion-screen > :first-child { margin-top: auto; }
.slide.start-screen > :last-child, .slide.completion-screen > :last-child { margin-bottom: auto; }
/* Chapter-title slides are styled inline (overflow:hidden + centred), so
 * they need !important to get the same safe centring and scrolling. */
.slide[style*="justify-content: center"] {
    overflow-y: auto !important;
    justify-content: flex-start !important;
}
.slide[style*="justify-content: center"] > :first-child { margin-top: auto; }
.slide[style*="justify-content: center"] > :last-child { margin-bottom: auto; }
.is-short .slide[style*="justify-content: center"] {
    padding-top: 12px !important; padding-bottom: 12px !important;
}
/* Section-transition slides: let the centred block shrink and scroll itself */
.slide > .transition-content {
    min-height: 0; max-height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ---------- 3. Bottom sheets & modals always fit and scroll ---------- */
#duo-modal, #lang-modal, #int-modal, #detail-modal {
    max-height: 92%;
    max-height: calc(var(--app-h, 100vh) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#lang-modal, #duo-modal { box-sizing: border-box; }

/* ---------- 4. Notches / gesture bars (needs viewport-fit=cover) ---------- */
.topbar {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    height: calc(48px + env(safe-area-inset-top, 0px));
}
#track-wrap { margin-top: calc(48px + env(safe-area-inset-top, 0px)); }
#duo-modal, #lang-modal, #int-modal, #detail-modal {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 5. Bigger tap targets without changing the look ----------
 * An invisible 8px halo makes 28px buttons ~44px to the finger. */
.close-btn, .topbar-icon-btn { position: relative; }
.close-btn::after, .topbar-icon-btn::after {
    content: ''; position: absolute;
    top: -8px; right: -8px; bottom: -8px; left: -8px;
}

/* ---------- 6. Minimum readable text ---------- */
.topbar-title .tt-eyebrow,
.hero-area .hero-badge { font-size: 10px; }

/* ---------- 7. Small / old phones (320–359px wide or < 600px tall) ---------- */
.vp-xs .hero-area { padding: 6px 12px; min-height: 44px; gap: 8px; }
.vp-xs .hero-area .hero-title { font-size: 16px; }
.vp-xs .hero-area .hero-icon { font-size: 24px; }
.vp-xs .topbar-points { padding: 2px 6px; font-size: 11px; }

/* ---------- 8. Landscape phones (short screens) ---------- */
.is-short .hero-area { padding: 4px 16px; min-height: 40px; border-radius: 0 0 14px 14px; }
.is-short .hero-area .hero-title { font-size: 15px; }
.is-short .hero-area .hero-sub { display: none; }
.is-short .scene-hero, .is-short .scene-hero.short { height: 110px; }
.is-short .phone-screen { min-height: 0; }

/* ---------- 9. Low-end devices: drop expensive effects ---------- */
.low-end *, .legacy * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.low-end #track { transition-duration: 0.3s; }
@media (prefers-reduced-motion: reduce) {
    #track { transition: none !important; }
}