/* Base reset + app shell ("big iPhone" on desktop). Theme-agnostic. */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --global-topbar-height: 78px;
}

/* Capacitor WKWebView sometimes reports 0 — ensure status bar clearance on native iOS.
 * 47px / 24px match notched iPhones. Wider native viewports are iPad (portrait
 * iPhones top out around 430pt); using the iPhone floors there left a large
 * empty band and looked unoptimized (App Store guideline 4). */
@supports (padding: max(0px, 1px)) {
    @media (max-width: 599px) {
        html.ios.native-ios {
            --safe-top: max(env(safe-area-inset-top, 0px), 47px);
            --safe-bottom: 24px;
        }
    }

    @media (min-width: 600px) {
        html.ios.native-ios {
            --safe-top: max(env(safe-area-inset-top, 0px), 24px);
            --safe-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
        }
    }
}

body {
    height: 100%;
    font-family: var(--font-ui);
    color: var(--text-primary);
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    touch-action: auto;
}

/* Desktop backdrop behind the phone frame. */
.backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--backdrop-bg);
    padding: 0;
    overflow-x: auto;
}

/* --backdrop-bg is the desktop area *behind* the phone frame. On a phone the
 * shell covers it - but if 100dvh ever under-reports (viewport-fit=cover,
 * standalone), the lilac stop would flash along an edge. Match the shell so
 * any exposure is invisible. */
@media (max-width: 500px) {
    .backdrop {
        background: var(--app-bg);
    }
}

/* The phone frame: full browser height, width follows iPhone aspect ratio. */
.app-shell {
    position: relative;
    height: 100dvh;
    width: clamp(375px, min(100vw, calc(100dvh * 9 / 19.5)), 460px);
    max-width: 460px;
    background: var(--app-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* On real phones the frame fills the screen with no visible border. */
@media (max-width: 500px) {
    .app-shell {
        width: max(100vw, 375px);
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* On larger screens, show a device-like rounded frame. */
@media (min-width: 501px) {
    .app-shell {
        border-radius: 28px;
        box-shadow: var(--shadow-frame);
        outline: 1px solid var(--frame-outline);
        /* Above the ground layer below. */
        position: relative;
        z-index: 1;
    }

    /* The landing page's own hero ground, reused so the web build and the
     * marketing site read as one product rather than two. The letter field is
     * the same artwork, lifted to /assets/img so none of its ~22KB of markup
     * ships inside index.html - the native shell loads that file too.
     *
     * Two veils over it: a top highlight for depth, then a near-opaque cream
     * wash. The wash is deliberately flat rather than centre-weighted - the
     * phone already covers the middle, so a centre-heavy veil would hide the
     * letters exactly where they are not visible anyway and leave them loudest
     * at the edges, which is backwards. */
    html:not(.native-shell) .backdrop::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
            linear-gradient(180deg, rgba(255, 250, 243, 0.88) 0%, rgba(250, 238, 224, 0.92) 100%),
            url('/assets/img/letter-field.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* Native iPhone, iPad, and Android: fill the device. The 501px "phone in a
 * frame" above is desktop-web only. A universal iPad binary that keeps that
 * frame fails App Store guideline 4 (screen sizes / iPad). */
html.native-shell .backdrop {
    display: block;
    background: var(--app-bg);
    padding: 0;
    overflow: hidden;
}

html.native-shell .app-shell {
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    min-height: 100%;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

/* Tablet / large-phone native: keep chrome and the scrollbar edge-to-edge.
 * Content stays a readable column via --screen-col padding, so the bar is not
 * inset in a gap of empty cream. Play uses the full board (game.css). */
@media (min-width: 600px) and (min-height: 600px) {
    html.native-shell .screen-scroll {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        --screen-col: 900px;
        padding-left: max(24px, calc((100% - var(--screen-col)) / 2));
        padding-right: max(24px, calc((100% - var(--screen-col)) / 2));
    }

    html.native-shell {
        --global-topbar-height: 138px;
    }

    html.native-shell #screen-list .screen-scroll,
    html.native-shell #screen-cascade-list .screen-scroll,
    html.native-shell #screen-difficulty .screen-scroll,
    html.native-shell #screen-achievements .screen-scroll,
    html.native-shell #screen-custom-list .screen-scroll,
    html.native-shell #screen-stats .screen-scroll,
    html.native-shell #screen-settings .screen-scroll {
        --screen-col: 980px;
    }

    html.native-shell #screen-custom-create .screen-scroll,
    html.native-shell #screen-custom-share .screen-scroll {
        --screen-col: 760px;
    }

    html.native-shell #screen-play .screen-scroll {
        padding-left: 24px;
        padding-right: 24px;
    }

    html.native-shell .global-topbar {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* --- Desktop product rail ---------------------------------------------------
 *
 * Hidden by default so it can only ever appear where it is explicitly turned
 * on. 1040px is the first width that fits a 460px shell, a 360px rail and the
 * gap between them without the backdrop needing to scroll. */
.desktop-rail {
    display: none;
}

.desktop-rail-spacer {
    display: none;
}

/* 1200px rather than 1040: the row is symmetric now, so it has to fit rail +
 * gap + shell + gap + spacer. At 1200 that is 288 + 60 + 460 + 60 + 288 = 1156,
 * which clears without the backdrop scrolling. Below it the phone sits alone on
 * the field, which is a fine narrow-desktop state. */
@media (min-width: 1200px) {
    html:not(.native-shell) .desktop-rail {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: min(340px, 24vw);
        margin-right: clamp(32px, 5vw, 72px);
    }

    /* Same box, no content. Without it the rail and phone are centred together
     * as a group, which pushed the phone right of the viewport centre. Mirroring
     * beats a fixed offset here: the shell's width clamps against viewport
     * HEIGHT, so any hardcoded number would drift on short screens. */
    html:not(.native-shell) .desktop-rail-spacer {
        display: block;
        flex: none;
        width: min(340px, 24vw);
        margin-left: clamp(32px, 5vw, 72px);
        pointer-events: none;
    }
}

.desktop-rail-mark {
    width: 60px;
    height: 60px;
    border-radius: 22.5%;
    box-shadow: 0 10px 26px rgba(120, 90, 60, 0.18);
}

.desktop-rail-title {
    margin: 0;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    text-wrap: balance;
}

.desktop-rail-lede {
    margin: 0;
    max-width: 34ch;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-soft);
}

.desktop-rail-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Beside the button, never inside it: that button imitates Apple's badge, and
 * badge artwork is not ours to add wording to. */
.desktop-rail-free {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.desktop-rail-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 15px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.desktop-rail-store:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.22);
}

.desktop-rail-store-glyph svg {
    display: block;
    width: 22px;
    height: 26px;
}

.desktop-rail-store-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.desktop-rail-store-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.desktop-rail-store-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.desktop-rail-note {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
}

/* Screen container: each "screen" is a full-height flex column. */
.screen {
    position: absolute;
    top: var(--safe-top);
    right: var(--safe-right);
    bottom: var(--safe-bottom);
    left: var(--safe-left);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.screen.active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.app-shell.topbar-visible .screen {
    top: calc(var(--safe-top) + var(--global-topbar-height));
}

.screen-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* Utility */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hidden {
    display: none !important;
}

.spacer {
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .screen {
        transition: none;
    }
}