:root {
    color-scheme: dark;
    --accent: #ffd24d;
    --accent-deep: #d49a00;
    --bg: #0b0b0c;
    --fg: #f3f0e7;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    overscroll-behavior: none;
}

/* ============== LANDING ============== */
body.landing {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(ellipse at top, #1a2a32 0%, #0b0b0c 60%);
}
body.landing main { max-width: 420px; text-align: center; }
body.landing h1 { font-size: 56px; letter-spacing: 8px; margin: 0 0 4px; }
body.landing .tag { margin: 0 0 28px; color: #aab1b8; letter-spacing: 4px; text-transform: uppercase; font-size: 13px; }
body.landing .copy { color: #d4d8de; line-height: 1.55; margin-bottom: 28px; }
body.landing .cta {
    display: inline-block;
    background: var(--accent); color: #1b1b1b;
    padding: 16px 36px; border-radius: 999px;
    font-weight: 700; text-decoration: none; letter-spacing: 1px;
    box-shadow: 0 10px 30px -10px var(--accent-deep);
}
body.landing .cta:active { transform: translateY(1px); }
body.landing .hint { margin-top: 28px; color: #888; font-size: 12px; }

/* ============== AR PAGE ============== */
body.ar {
    overflow: hidden;
    background: #000;
    height: 100svh;
    margin: 0; padding: 0;
}

#container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    overflow: hidden !important;
    background: #000;
}

#container video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    display: block !important;
    visibility: visible !important;
}

#container canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background: transparent !important;
}

#hud {
    position: fixed;
    left: 0; right: 0;
    top: calc(12px + env(safe-area-inset-top));
    z-index: 5;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
#hud-text {
    margin: 0;
    background: rgba(0,0,0,0.45);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#hud-text b { color: var(--accent); }

#error {
    position: fixed; inset: 24px;
    z-index: 9;
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    padding: 22px;
    color: #fff;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Debug bar — hidden in production. Append ?debug=1 to URL to show. */
#debug {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.85);
    color: #7CFC00;
    font: 11px/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    pointer-events: none;
    max-height: 50vh;
    overflow-y: auto;
    display: none;
}
body.debug-on #debug { display: block; }