@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/* Reference UI: dark teal travel-app shell, warm editorial serif and restrained gold. */
:root {
    --ref-void: #061215;
    --ref-ink: #0a171a;
    --ref-panel: rgba(12, 27, 30, .88);
    --ref-panel-solid: #102226;
    --ref-line: rgba(210, 235, 231, .15);
    --ref-text: #f2f1e9;
    --ref-muted: #a6b8b8;
    --ref-cyan: #caa361;
    --ref-cyan-deep: #9b7039;
    --ref-gold: #caa361;
    --ref-gold-soft: #e9cf9d;
    --ref-radius: 1.15rem;
    --ref-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .43);
}

.app-page {
    min-width: 0;
    color: var(--ref-text);
    background: var(--ref-void);
    font-family: 'DM Sans', sans-serif;
}

/* Fixed navigation reproduces the translucent, pill-like dock from the reference. */
.app-bottom-nav.mobile-nav {
    left: 50%;
    bottom: max(.55rem, env(safe-area-inset-bottom));
    width: min(calc(100% - 1.35rem), 31rem);
    height: 4.15rem;
    padding: 0 .2rem;
    transform: translateX(-50%);
    background: rgba(5, 14, 16, .9);
    border: 1px solid rgba(203, 234, 230, .13);
    border-radius: 1.28rem;
    box-shadow: 0 .8rem 2.3rem rgba(0, 0, 0, .45);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
}
.app-bottom-nav .nav-item {
    width: 25%;
    gap: .18rem;
    color: #819394;
    border-radius: .92rem;
}
.app-bottom-nav .nav-item i { margin: 0; font-size: 1rem; }
.app-bottom-nav .nav-item span { font-family: 'DM Sans', sans-serif; font-size: .59rem; font-weight: 500; letter-spacing: 0; }
.app-bottom-nav .nav-item.active { color: var(--ref-cyan); background: rgba(112, 213, 210, .09); text-shadow: 0 0 .9rem rgba(112, 213, 210, .22); }
.app-bottom-nav .nav-item.active::before { top: auto; bottom: .31rem; width: .28rem; height: .28rem; background: var(--ref-cyan); border-radius: 50%; box-shadow: 0 0 .6rem var(--ref-cyan); }

/* Home: full-screen, editorial launch screen inspired by the left phone. */
.app-route-home .home-shell.homepage-container {
    min-height: 100svh;
    padding: max(1.15rem, env(safe-area-inset-top)) 1.35rem calc(5.65rem + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, rgba(2, 16, 19, .12), rgba(3, 14, 16, .9) 76%, #050d0f),
        radial-gradient(circle at 78% 16%, rgba(93, 194, 193, .2), transparent 24%),
        url('/dist/assets/img/background.png') center / cover no-repeat;
}
.app-route-home .home-shell::before {
    inset: 0;
    opacity: .56;
    background-image:
        radial-gradient(ellipse 120% 34% at 12% 4%, transparent 55%, rgba(107, 204, 198, .2) 56%, transparent 57%),
        radial-gradient(ellipse 110% 35% at 16% 8%, transparent 57%, rgba(107, 204, 198, .16) 58%, transparent 59%),
        radial-gradient(circle at 84% 10%, rgba(209, 241, 235, .9) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(209, 241, 235, .6) 0 1px, transparent 2px);
    background-size: auto, auto, 6rem 6rem, 8rem 8rem;
}
.app-route-home .home-shell::after { border-color: rgba(202, 163, 97, .24); box-shadow: 0 0 0 2.4rem rgba(202, 163, 97, .035), 0 0 0 4.7rem rgba(202, 163, 97, .02); }
.app-route-home .home-hero {
    width: min(100%, 27rem);
    min-height: calc(100svh - 7rem);
    grid-template-rows: auto 1fr auto auto;
    gap: 1.1rem;
}
.app-route-home .home-topbar { align-self: start; min-height: 2.5rem; }
.app-route-home .app-time { color: var(--ref-text); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.app-route-home .current-language { margin-left: auto; color: var(--ref-cyan); font-size: .64rem; }
.app-route-home .lang-select { color: var(--ref-text); background: rgba(6, 22, 25, .72); border-color: rgba(190, 232, 228, .18); }
.app-route-home .home-intro { align-self: center; padding: 1.5rem 0 1rem; }
.app-route-home .home-eyebrow { color: var(--ref-cyan); font-size: .61rem; letter-spacing: .18em; }
.app-route-home .main-title { max-width: 19rem; }
.app-route-home .title-small {
    max-width: 13rem;
    color: var(--ref-text);
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.15rem, 10vw, 3.5rem);
    line-height: .92;
    letter-spacing: -.06em;
}
.app-route-home .title-large {
    margin-top: .28rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(4.7rem, 22vw, 7.3rem);
    background: linear-gradient(135deg, #f2e8d7 5%, var(--ref-gold-soft) 42%, #a87940 88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.app-route-home .typewriter-text { color: #d9e1dc; font-size: .88rem; max-width: 16rem; }
.app-route-home .typewriter-text::after { color: var(--ref-cyan); }
.app-route-home .home-actions { gap: .62rem; }
.app-route-home .btn { min-height: 3.45rem; border-radius: .92rem; font-family: 'DM Sans', sans-serif; font-size: .79rem; text-transform: none; }
.app-route-home .btn-primary { color: #21170a; background: linear-gradient(110deg, #f0d69c, var(--ref-gold) 52%, #a9793f); border-color: rgba(255, 239, 205, .7); box-shadow: 0 .65rem 1.8rem rgba(147, 102, 38, .24); }
.app-route-home .btn-secondary { background: rgba(5, 20, 23, .7); border-color: rgba(190, 232, 228, .2); }
.app-route-home .home-extras { margin-top: .2rem; }
.app-route-home .home-escape-link { background: rgba(5, 20, 23, .62); border-color: rgba(190, 232, 228, .16); }
.app-route-home .home-escape-link i { color: var(--ref-cyan); }
.app-route-home .btn-facebook { color: var(--ref-text); background: rgba(5, 20, 23, .72); border-color: rgba(190, 232, 228, .16); }

/* Episodes: the middle phone's compact discovery page and horizontal cards. */
.app-route-episode .episode-selection-page.episodes-container {
    max-width: none;
    min-height: 100svh;
    overflow-x: clip;
    padding: max(1.1rem, env(safe-area-inset-top)) 0 calc(5.65rem + env(safe-area-inset-bottom)) 1.1rem;
    background:
        radial-gradient(circle at 76% 0, rgba(77, 178, 177, .15), transparent 15rem),
        linear-gradient(180deg, #071619, #061113);
}
.app-route-episode { overflow-x: hidden; }
.app-route-episode .episode-page-header,
.app-route-episode .episode-section-heading { width: calc(100% - 1.1rem); margin-left: 0; padding-right: 1.1rem; }
.app-route-episode .episode-page-header { gap: .8rem; margin-bottom: 1.3rem; }
.app-route-episode .page-kicker { color: var(--ref-cyan); font-family: 'DM Sans', sans-serif; font-size: .61rem; letter-spacing: .15em; }
.app-route-episode .app-greeting { color: var(--ref-text); font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 500; }
.app-route-episode .app-icon-button { width: 2.25rem; height: 2.25rem; color: var(--ref-text); background: rgba(184, 229, 224, .08); border-color: var(--ref-line); }
.app-route-episode .app-search-shell { min-height: 2.55rem; color: #8fa4a4; background: rgba(184, 229, 224, .08); border-radius: .72rem; font-size: .69rem; }
.app-route-episode .app-search-shell i { color: var(--ref-muted); }
.app-route-episode .app-search-shell input { width: 100%; min-width: 0; color: var(--ref-text); background: transparent; border: 0; outline: 0; font: inherit; }
.app-route-episode .app-search-shell input::placeholder { color: #8fa4a4; opacity: 1; }
.app-route-episode .explore-chips { gap: .36rem; }
.app-route-episode .explore-chip { flex: 0 0 auto; padding: .39rem .58rem; color: #c7d6d3; background: rgba(184, 229, 224, .07); border: 1px solid rgba(184, 229, 224, .13); border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: .62rem; line-height: 1; cursor: pointer; }
.app-route-episode .explore-chip.active { color: #21170a; background: var(--ref-gold-soft); border-color: var(--ref-gold-soft); }
.app-route-episode .episode-section-heading { margin-bottom: .72rem; }
.app-route-episode .episode-section-heading .page-title { color: var(--ref-text); font-family: 'Playfair Display', serif; font-size: 1.48rem; font-weight: 500; }
.app-route-episode .episode-rail-hint { color: var(--ref-cyan); font-size: .64rem; }
.app-route-episode .episodes-list { gap: .72rem; width: calc(100% + 1.1rem); margin: 0; padding: 0 1.1rem 1rem 0; }
.app-route-episode .episode-card {
    flex-basis: min(78vw, 18.7rem);
    height: 29.4rem;
    min-height: 29.4rem;
    border-color: rgba(181, 230, 225, .17);
    border-radius: 1.05rem;
    background: #0a191c;
    box-shadow: var(--ref-shadow);
}
.app-route-episode .card-bg { opacity: .62; background-position: center top; }
.app-route-episode .episode-card::after { background: linear-gradient(180deg, rgba(2, 13, 16, .08), rgba(5, 17, 19, .48) 36%, #0a191c 76%); }
.app-route-episode .card-content { height: 100%; padding: 1rem; overflow-y: auto; scrollbar-width: thin; }
.app-route-episode .episode-number { color: var(--ref-cyan); font-size: .61rem; letter-spacing: .13em; }
.app-route-episode .episode-title { color: var(--ref-text); font-family: 'Playfair Display', serif; font-size: 1.4rem; line-height: 1.06; }
.app-route-episode .available-badge { color: #91e5cd; background: rgba(52, 178, 142, .15); border-color: rgba(101, 223, 182, .24); }
.app-route-episode .quick-meta { color: #d0dcda; font-size: .67rem; }
.app-route-episode .quick-meta i { color: var(--ref-gold-soft); }
.app-route-episode .card-divider { background: rgba(184, 229, 224, .13); }
.app-route-episode .subtitle-text,
.app-route-episode .gps-info { color: #a7bbb9; font-size: .72rem; }
.app-route-episode .btn-gps,
.app-route-episode .btn-start-adventure { min-height: 3rem; border-radius: .75rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; text-transform: none; }
.app-route-episode .btn-gps { color: var(--ref-cyan); background: rgba(112, 213, 210, .08); border-color: rgba(112, 213, 210, .45); }
.app-route-episode .btn-start-adventure { color: #21170a; background: linear-gradient(110deg, #f0d69c, var(--ref-gold), #a9793f); border-color: rgba(255, 239, 205, .7); }
.app-route-episode .help-link { color: #acc8c4; }

/* Game routes use the same phone-app system; old generic stylesheet cannot leak here. */
.app-route-step_orientation .orientation-container,
.app-route-step_orientation .game-riddle-page,
.app-route-game_start .orientation-container {
    color: var(--ref-text);
    font-family: 'DM Sans', sans-serif;
}

@media (min-width: 48rem) {
    .app-bottom-nav.mobile-nav { bottom: 1rem; }
    .app-route-home .home-hero { width: min(100%, 32rem); }
    .app-route-episode .episode-selection-page.episodes-container { padding-left: clamp(2rem, 8vw, 7rem); padding-right: clamp(2rem, 8vw, 7rem); }
    .app-route-episode .episode-page-header,
    .app-route-episode .episode-section-heading { width: 100%; padding-right: 0; }
    .app-route-episode .episodes-list { display: grid; width: 100%; padding-right: 0; overflow: visible; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .app-route-episode .episode-card { min-width: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .app-route-home .home-intro,
    .app-route-episode .episode-card { animation: ref-rise .55s ease both; }
    .app-route-episode .episode-card:nth-child(2) { animation-delay: .08s; }
    .app-route-episode .episode-card:nth-child(3) { animation-delay: .16s; }
}
@keyframes ref-rise { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: translateY(0); } }