/* SARG AR runtime shell — mobile-first, full-bleed camera.
   The camera canvas (injected by the engine adapter into #container) owns the
   whole viewport; everything else is a floating overlay. PNRCo palette. */
/* PNRCo kit typography — Raleway (primary/display) + Overpass (numerals),
   self-hosted variable fonts (OFL), latin subset. */
@font-face {
    font-family: 'Raleway';
    src: url('/assets/fonts/raleway-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Overpass';
    src: url('/assets/fonts/overpass-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --accent: #f2c87e;      /* PNRCo warmth (scene.brand.accent overrides) */
    --brick: #912d2f;
    --ink: #f7f2e9;
    --scrim: rgba(12, 8, 6, 0.55);
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #000;
    color: var(--ink);
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overscroll-behavior: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Camera surface. Ported from the proven MVP page (legacy/ar-xr.html):
   the canvas is FIXED and full-viewport in *viewport units* (100vw/100vh),
   NOT % of #container — on mobile a percentage height collapses and the feed
   renders "compacted"/letterboxed. No !important: the adapter's sizeCanvas()
   sets exact px on top, and XR8 resizes the canvas after start, so CSS must
   not out-rank either. No object-fit: XR8 fits the camera into the canvas. */
#container { position: fixed; inset: 0; background: #000; }
#container canvas {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: block;
}

/* HUD pill — bottom center, clear of home indicators. */
#hud {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    z-index: 5;
    max-width: min(86vw, 420px);
}
#hud p {
    margin: 0;
    padding: 11px 20px;
    background: var(--scrim);
    color: var(--ink);
    font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
    text-align: center; text-wrap: balance;
    border: 1px solid rgba(242, 200, 126, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Tap-to-unmute — appears only when the scene's content carries audio. */
#unmute {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 6;
    width: 46px; height: 46px;
    display: none;
    align-items: center; justify-content: center;
    background: var(--scrim);
    border: 1px solid rgba(242, 200, 126, 0.45);
    border-radius: 50%;
    font-size: 19px; line-height: 1;
    color: var(--ink);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
}
#unmute.show { display: flex; }
#unmute:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Error card — centered, actionable. */
#error {
    position: fixed; inset: 0;
    z-index: 20;
    display: grid; place-items: center;
    padding: 28px;
    background: rgba(0, 0, 0, 0.82);
}
#error[hidden] { display: none; }
#error .card {
    max-width: 380px;
    background: #1c1512;
    border: 1px solid rgba(242, 200, 126, 0.25);
    border-top: 4px solid var(--brick);
    border-radius: 14px;
    padding: 22px 24px;
    text-align: center;
}
#error .card h2 { margin: 0 0 8px; font-size: 17px; color: var(--accent); }
#error .card p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: #d8cfc2; overflow-wrap: anywhere; }
#error .card button {
    background: var(--brick); color: var(--ink);
    border: 0; border-radius: 999px;
    padding: 11px 26px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
}

/* ── PNRCo skin for the XRExtras screens (loader / permissions / almost-there).
   Element IDs are XRExtras' own; we restyle, never restructure. ── */
#loadBackground {
    background: radial-gradient(ellipse at 50% 38%, #4a1210 0%, #350503 62%) !important;
}
#loadImage {
    width: 92px !important; height: 92px !important;
    border-radius: 22% !important;
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.8);
}
#loadingContainer .prompt-box-8w, #requestingCameraPermissions {
    background: #350503 !important;
    color: #f2c87e !important;
    font-family: 'Raleway', -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
#almostthereContainer {
    background: #350503 !important;
    color: #f7f2e9 !important;
}
#almostthereContainer a { color: #f2c87e !important; }
.button-primary-8w { background: #912d2f !important; }

/* Phone gate — desktops get guidance, not an infinite camera wait. */
#phonegate {
    position: fixed; inset: 0; z-index: 40;
    display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 38%, #4a1210 0%, #350503 62%);
    padding: 28px;
}
#phonegate[hidden] { display: none; }
.gate-card { max-width: 400px; text-align: center; color: #f7f2e9; }
.gate-card img { border-radius: 22%; box-shadow: 0 10px 40px -12px rgba(0,0,0,0.8); margin-bottom: 18px; }
.gate-card h2 { margin: 0 0 10px; font-size: 20px; color: var(--accent); text-wrap: balance; }
.gate-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #e8ddcd; }
.gate-card .gate-url {
    font-family: 'Overpass', ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums; font-size: 13px;
    color: var(--accent); word-break: break-all;
    background: rgba(0,0,0,0.35); border-radius: 8px; padding: 9px 12px;
    user-select: all; -webkit-user-select: all;
}
.gate-card button {
    margin-top: 10px;
    background: transparent; color: #d8cfc2;
    border: 1px solid rgba(242,200,126,0.4); border-radius: 999px;
    padding: 10px 22px; font-size: 13px; cursor: pointer;
}
.gate-card button:hover { color: var(--accent); }

/* Debug overlay — ?debug=1 or 4 taps on the HUD. */
#debug {
    position: fixed; left: 0; right: 0;
    top: env(safe-area-inset-top, 0px);
    z-index: 30;
    display: none;
    margin: 0; padding: 8px 10px;
    max-height: 46vh; overflow-y: auto;
    background: rgba(0, 0, 0, 0.72);
    color: #ffd24d;
    font: 10px/1.45 ui-monospace, Menlo, monospace;
    white-space: pre-wrap; word-break: break-all;
    pointer-events: none;
}
body.debug-on #debug { display: block; }