/* ── Yard Master design tokens & page shell ──────────────────────────────
   Follows the portfolio house theme: dark slate, translucent glass cards,
   Outfit for headings and Inter for body. Component styles live in hud.css
   (in-play readouts) and menu.css (overlays and panels).
*/
:root {
    --bg-dark: #0f172a;
    --bg-card: rgba(15, 23, 42, 0.74);
    --bg-panel: rgba(15, 23, 42, 0.92);
    --glass-border: rgba(255, 255, 255, 0.12);

    --text-main: #f8fafc;
    --text-sub: #94a3b8;
    --text-muted: #64748b;

    --accent-cyan: #38bdf8;
    --accent-indigo: #6366f1;
    --accent-green: #10b981;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --accent-pink: #f472b6;

    --gold: #fbbf24;
    --silver: #cbd5e1;
    --bronze: #d97706;

    --font-heading: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --radius: 14px;
    --shadow: 0 10px 36px rgba(0, 0, 0, 0.42);

    /* Display cutouts and gesture bars. Zero everywhere else, so the calc()s
       that use them are safe to write unconditionally. */
    --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);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* A swipe that runs out of content stops there — no pull-to-refresh, no
       overscroll glow, and nothing for a nested scroller to chain into. */
    overscroll-behavior: none;
    background-color: var(--bg-dark);
}

/*
 * The shell is taken out of flow on purpose.
 *
 * `overflow: hidden` hides the scrollbar and refuses direct gestures, but it
 * does not make a box unscrollable: a swipe that begins inside a nested
 * scroller — the control bar, which has `overflow-y: auto` — still chains out
 * to the document and drags it. And on a phone there is always something to
 * drag, because `height: 100%` measures the layout viewport (browser chrome
 * hidden) while the player is looking at the smaller visual one. The result was
 * the whole UI sliding off the bottom of the screen, scrollbar and all.
 *
 * A fixed box has no scrollable overflow at all, so there is nothing to chain
 * into, and `100dvh` keeps it the height of the viewport that is actually
 * visible as the browser chrome comes and goes.
 */
body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: var(--bg-dark);
    font-family: var(--font-body);
    color: var(--text-main);
}

#canvas-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* The camera controls own every gesture over the yard. Without this the
       browser also gets a say — one-finger pan, pinch-zoom and double-tap
       zoom all fight the orbit controls for the same drag. */
    touch-action: none;
}

#canvas-container canvas { display: block; touch-action: none; }

.hidden { display: none !important; }

kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72em;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    margin: 0 1px;
    color: var(--text-main);
}

/* ── top bar ─────────────────────────────────────────────────────────── */

.top-nav {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 52px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-sub);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease;
}

.back-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.08);
}

.header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-title h1 {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge {
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(56, 189, 248, 0.3);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 36px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

/*
 * Which build is live. Deliberately dim — it is a diagnostic, not a feature —
 * but it sits in the top bar rather than a screen corner so it survives the
 * mobile layout, where the control bar owns the whole bottom edge.
 */
.build-stamp {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
}

.build-stamp:hover { color: var(--text-sub); background: rgba(255, 255, 255, 0.1); }

.icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.icon-btn.muted { color: var(--text-muted); }

/* ── shared buttons ──────────────────────────────────────────────────── */

.primary-btn, .ghost-btn {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease;
    border: 1px solid transparent;
}

.primary-btn {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));
    color: #07131f;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.28);
}

.primary-btn:hover { transform: translateY(-1px); }

.ghost-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--glass-border);
    color: var(--text-main);
}

.ghost-btn:hover { background: rgba(255, 255, 255, 0.13); }
.ghost-btn.small { font-size: 0.8rem; padding: 7px 13px; }

.close-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.close-btn:hover { color: var(--text-main); }

.btn-sm {
    flex: 1;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-sm:hover { background: rgba(255, 255, 255, 0.17); }

.btn-sm.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

/* ── top bar on a phone ──────────────────────────────────────────────────
   Five items priced for a desktop do not fit 360 CSS pixels: the title wrapped
   to two lines, the badge to three, and the menu button — the only way out of
   a mode — was pushed off the right edge. Drop what the page already tells you
   (the badge repeats the strapline in the menu), reduce the back link to its
   arrow, and hold the title to one line so the two buttons keep their place.
*/
@media (max-width: 820px), (max-height: 500px) {
    .top-nav {
        top: calc(8px + var(--safe-top));
        left: calc(8px + var(--safe-left));
        right: calc(8px + var(--safe-right));
        height: 46px;
        padding: 0 8px;
        gap: 8px;
        border-radius: 12px;
    }

    .back-btn { padding: 8px; gap: 0; }
    .back-btn span { display: none; }

    .header-title { flex: 1; justify-content: center; gap: 8px; }

    .header-title h1 {
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .badge { display: none; }

    .header-actions { gap: 6px; }
    /* As tall as the bar allows: these two are the only way out of a mode. */
    .icon-btn { width: 38px; height: 38px; font-size: 0.95rem; }
    /* Kept — the title ellipsises before the stamp costs anyone a button, and
       knowing which build is live is the whole point of putting it up here. */
    .build-stamp { font-size: 0.62rem; padding: 3px 5px; }
}

/*
 * Landscape phones are not short on width — 700-930px of it — they are short
 * on height: 340-430px between a notch and a home indicator. The rules above
 * solve the wrong axis here (a full-width bar is cheap on a dimension there is
 * plenty of), so this block spends the height budget back: every fixed band
 * shrinks a second time, and the glass panels lean more transparent so the
 * yard still reads through the strip of screen they're allowed to keep.
 */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --bg-card: rgba(15, 23, 42, 0.52);
        --bg-panel: rgba(15, 23, 42, 0.74);
    }

    .top-nav {
        top: calc(6px + var(--safe-top));
        height: 38px;
        padding: 0 7px;
        gap: 6px;
    }

    .header-title { gap: 6px; }
    .header-title h1 { font-size: 0.94rem; }
    .icon-btn { width: 32px; height: 32px; font-size: 0.86rem; }
    .back-btn { padding: 6px; }
    .build-stamp { padding: 2px 4px; }
}