/* ======================================================================
   SECTION 1 - DESIGN TOKENS
   Font faces and CSS custom properties shared across the whole file.
   ====================================================================== */

/* @font-face declarations are defined in the inline <style> block inside index.html
 * so that Unity's template processor can apply ?v=2.5-c375599d99f99dfe to the
 * .ttf URLs. The font-family names are unchanged; all rules below continue to work. */

/* Single source of truth for the player background color.
 * Default is transparent so transparent_background=1 works from first paint
 * without waiting for JS. SetNormalBackground() overrides this to #0D0D0D
 * via document.documentElement.style.setProperty() when transparency is off. */
:root {
    --bg-color: transparent;
}


/* ======================================================================
   SECTION 2 - RESET & BASE STYLES
   Global element resets and utility classes used throughout the layout.
   ====================================================================== */

a {
    outline: none !important;
    cursor: pointer;
    text-decoration: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
    background-color: var(--bg-color);
}

form,
.fullscreen {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

/* #webgl_container must be position:absolute so it is removed from normal
 * document flow. Without this, when shown it occupies 100vh in the flow and
 * pushes #web_player_cover off-screen (clipped by body overflow:hidden),
 * producing a black panel after the play button is clicked.
 * position:absolute makes it underlaythe cover (z-index 20) correctly. */
#webgl_container {
    position: absolute;
    top: 0;
    left: 0;
}


/* ======================================================================
   SECTION 3 - FULLSCREEN API
   Normalizes layout and background across all vendor-prefixed fullscreen
   pseudo-classes and the ::backdrop element.
   ====================================================================== */

/* All vendor-prefixed variants are required for cross-browser coverage. */
body:-webkit-full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #000;
}
body:-moz-full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #000;
}
body:-ms-fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #000;
}
body:fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #000;
}

/* Suppress the browser default white backdrop behind the fullscreen element. */
::backdrop {
    background: #000;
}


/* ======================================================================
   SECTION 4 - WEB PLAYER COVER
   #web_player_cover is the full-screen HTML layer that is visible before
   and during Unity load. It displays the vue thumbnail + play button.
   Hidden by embed.js once createUnityInstance().then() resolves.
   z-index 20 keeps it above all WebGL/AR canvas layers.
   ====================================================================== */

#web_player_cover {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 20;
    /* background-image is set by the inline <style> block in index.html with the
     * versioned url(). It is not set here because url() inside a CSS custom property
     * (var()) resolves relative to this file (css/embed.css), producing a wrong
     * css/img/... path. The longhands below apply independently without a shorthand. */
    background-color: var(--bg-color);
    background-size: min(27vw, 27vh);
    background-position: center;
    background-repeat: no-repeat;
}

/* Play button: full-cover clickable area that sits above the thumbnail. */
.play-btn-container {
    /* background-image is set by the inline <style> block in index.html. */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
}


/* ======================================================================
   SECTION 5 - COVER LOADING BAR
   Shown after the play button is clicked; hidden when Unity is ready.
   All values derived from exact Unity Rect Transform data:
     ProgressBar : Width=500  Height=20  PosY=35  Anchor=bottom-center  Pivot Y=0
     LoadingText : Left=100   Right=100  PosY=75  Height=150  Font=50
   Reference resolution: 1920x1080 (Canvas Scaler - Scale With Screen Size).
   ALL dimensions use the same vw-based formula: Unity_value / 1920 * 100vw.
   Proof: CSS_px = Unity_units * CSS_viewport_width / 1920 (dpr cancels out
   in the canvas pipeline: buffer_px/dpr = Unity_units * vw_px / 1920).
   This is exact for 16:9 viewports at any resolution or devicePixelRatio.
     bottom       = 35  / 1920 * 100vw = 1.823vw
     bar height   = 20  / 1920 * 100vw = 1.042vw
     margin-below = 20  / 1920 * 100vw = 1.042vw
     bar width    = 500 / 1920 * 100vw = 26.04vw
     font-size    = 50  / 1920 * 100vw = 2.604vw
   border-radius: 999px on both track and fill produces pill-shaped
   rounded caps. overflow: hidden on the track clips the fill exactly
   to the pill boundary at all intermediate progress values.
   ====================================================================== */

#cover-loading-bar {
    display: none;
    position: absolute;
    /* PosY=35, Pivot Y=0: bottom edge of bar is 35 Unity units above canvas bottom.
     * 35 / 1920 * 100vw = 1.823vw (exact for all 16:9 viewports).              */
    bottom: 1.823vw;
    /* Anchor X=0.5, PosX=0: horizontally centered on the canvas.               */
    left: 50%;
    transform: translateX(-50%);
    /* Width=500 at 1920px reference = 26.04vw.
     * clamp() applies a 120px floor on very narrow portrait viewports.          */
    width: clamp(120px, 26.04vw, 500px);
    text-align: center;
    pointer-events: none;
    z-index: 50;
}

#cover-loading-label {
    display: block;
    color: #ffffff;
    font-family: Roboto-Medium;
    /* Font size 50 at 1920px reference = 2.604vw.
     * Fallback for Safari < 13.1 / iOS < 13.4 which lack clamp() support.      */
    font-size: 2.604vw;
    font-size: clamp(14px, 2.604vw, 50px);
    /* Gap = PosY_text - (PosY_bar + Height_bar) = 75 - (35+20) = 20 Unity units.
     * 20 / 1920 * 100vw = 1.042vw. max() prevents sub-pixel collapse.          */
    margin-bottom: max(4px, 1.042vw);
    letter-spacing: 0;
    /* Text-shadow preserves readability on bright thumbnails without a scrim.   */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.5);
}

/* Track: pill shape. overflow:hidden clips fill exactly to the pill boundary.  */
#cover-progress-track {
    width: 100%;
    /* Height=20 at 1920px reference = 1.042vw. Consistent with the width formula.
     * max() prevents the bar from collapsing below 4px on tiny viewports.      */
    height: max(4px, 1.042vw);
    /* Black with alpha 100/255 = 0.392, matching the Unity Image component Color. */
    background-color: rgba(0, 0, 0, 0.392);

    border-radius: 999px;
    overflow: hidden;
}

/* Fill: VueXR red with GPU-composited width transition for 60fps animation.    */
#cover-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #ED3237;
    border-radius: 999px;
    transition: width 0.25s ease-out;
    will-change: width;
}




/* ======================================================================
   SECTION 6 - CONTENT INFO PANEL
   Metadata row displayed at the top of #web_player_cover: creator
   avatar, vue title, channel name, and content-mode icon badges.
   ====================================================================== */

.top-info-container {
    display: flex;
    flex-direction: row;
    padding: 25px;
    position: relative;
    z-index: 100;
}

.content-info-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 15px;
    padding: 25px 0 25px 25px;
    position: relative;
    z-index: 100;
    margin-right: 75px;
}

.creator-profile-pic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-img {
    width: 55px;
    border-radius: 50%;
}

.content-info-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content-info {
    margin-top: 3px;
}

.content-title {
    font-size: 24px;
    font-family: Roboto-Medium;
    color: white;
    text-decoration: none;
    overflow: hidden;
}

.creator-info {
    font-size: 14px;
    font-family: Roboto-Light;
    color: white;
    text-decoration: none;
    overflow: hidden;
    margin-top: 3px;
}

.content-mode {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.content-mode .icon-bg-style {
    padding: 5px;
    line-height: 1;
    margin-right: 10px;
    background-color: #00000060;
    border-radius: 15%;
}

.icon-bg-style .img {
    width: 25px;
    vertical-align: inherit;
}


/* ======================================================================
   SECTION 7 - APP ICON & QR CODE PANEL
   The VueXR app icon pinned to the top-right corner of the cover,
   and the QR code popup that appears when the icon is clicked on desktop.
   ====================================================================== */

.app-icon-container {
    position: absolute;
    /* Exact Unity Canvas Scaler values computed by SyncUnityScaledUI() in embed.js.
     * Formula: Unity_units * (cssW/1920)^0.25 * (cssH/1080)^0.75  (blend=0.75).
     * Fallback vw values activate only if JS has not yet executed.
     * WatchInXRPanel: PosX=-50, PosY=-50 -> right/top = 50 units.
     * WatchInXRPanel: Width=100, Height=100 -> size = 100 units.              */
    right:  var(--unity-icon-offset, 2.604vw);
    top:    var(--unity-icon-offset, 2.604vw);
    width:  var(--unity-icon-size,   clamp(40px, 5.208vw, 100px));
    height: var(--unity-icon-size,   clamp(40px, 5.208vw, 100px));
    z-index: 100;
}

/* The anchor must fill the container exactly so the clickable hit area
 * equals the visible icon area. display:block removes inline whitespace;
 * width/height:100% fills the container; border-radius clips the corners. */
.app-icon-container #a_app_icon {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15%;
    /* Clip both the image and the border to the rounded corner boundary. */
    overflow: hidden;
    /* Visual border matches Unity Image component border style. */
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
}

/* Image fills the anchor entirely. object-fit:cover handles any aspect-ratio
 * mismatch between the container and the source image without distortion.  */
.app-icon-container .app-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.qrcode-container {
    width: 250px;
    outline: 0px;
    position: absolute;
    top: 0;
    right: 0;
}

.qrcode-container .qrcode-border-style {
    background-color: #ED3237;
    width: 100%;
    border-radius: 5%;
    border-style: solid;
    border-color: #ED3237;
    border-width: 5px;
    text-align: center;
}

.qrcode-container .qrcode-img {
    border-radius: 5%;
    width: 100%;
}

.qrcode-container .content-mode-label {
    width: 100%;
    color: white;
    font-size: 14px;
    font-family: Roboto-Medium;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* ======================================================================
   SECTION 8 - ERROR & UNAVAILABLE PANELS
   Shown inside #web_player_cover when content cannot be loaded:
   unavailable, private, suspended, processing, or unsupported browser.
   .tint is applied to web_player_not_supported for an overlay effect.
   ====================================================================== */

/* --- Base error panel layout --- */

.error-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

.error-panel .app-info-main-container {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.error-panel .app-info-sub-container {
    width: 250px;
    border-radius: 5%;
    border-style: solid;
    border-color: #ED3237;
    border-width: 5px;
    text-align: center;
    background-color: #ED3237;
}

.error-panel .app-info-qrcode-img {
    text-align: center;
    width: 100%;
    border-radius: 5%;
}

.error-panel .app-info-text {
    color: white;
    font-size: 24px;
    font-family: Roboto-Medium;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.error-panel .app-info-msg {
    position: relative;
    text-align: center;
    width: 100%;
}

.error-panel .app-info-banner-img {
    width: 100%;
    height: 100%;
    margin: 0px;
    object-fit: cover;
}

.error-panel .title-label {
    color: #ffffff;
    font-size: 32px;
    font-family: Roboto-Medium;
    text-align: center;
}

.error-panel .sub-title-label {
    color: dimgray;
    font-size: 32px;
    font-family: Roboto-Light;
    text-align: center;
}

/* --- Per-panel message width overrides --- */

#content_unavailable .app-info-msg {
    width: 400px;
}

#suspended_content_unavailable .app-info-msg {
    width: 50%;
}

#processing_content .app-info-msg {
    width: 50%;
}

#private_content_unavailable .app-info-msg {
    width: 300px;
}

/* --- Content unavailable variant --- */

.content-unavailable {
    gap: 15px;
    background: rgb(0 0 0);
}

.content-unavailable .app-info-msg {
    display: flex;
    flex-direction: column;
}

.content-unavailable .info-icon {
    position: relative;
    width: 150px;
}

.content-unavailable .title-label {
    text-align: left;
}

.content-unavailable .sub-title-label {
    text-align: left;
}

/* --- Tint overlay (used by web_player_not_supported) --- */

.tint {
    position: relative;
    float: left;
}

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(0 0 0 / 65%);
    transition: background .3s linear;
}


/* ======================================================================
   SECTION 8 - PLAYER OVERLAY ELEMENTS
   Full-viewport overlays layered above the Unity canvas.
   z-index stack reference:
     #camera-feed              :  0
     #unity-loading-overlay    :  5
     #unity-canvas             : 10
     #permission-popup-overlay : 50
   ====================================================================== */

/* 8TH WALL CAMERA FEED */
#camera-feed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    background-color: #000000;
}

/* UNITY WEBGL CANVAS overrides */
#unity-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent !important;
    pointer-events: auto;
}

/* UNITY LOADING OVERLAY
 * Sits at z-index 5, between #camera-feed (z:0) and #unity-canvas (z:10).
 * Shows a dark loading screen + app icon while Unity initialises.
 * Hidden by embed.js once createUnityInstance() resolves.
 * This lets #unity-canvas be transparent from creation without revealing
 * an empty background during the load phase. */
#unity-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#unity-loading-overlay img {
    width: min(27vw, 27vh);
    height: auto;
}

/* ---------------------------------------------------------------
 * Permission Popup Overlay
 * Unified full-screen overlay for:
 *   - Camera permission requests  (JSUtil.jslib ShowHtmlCameraPermissionPopup)
 *   - Sensor permission requests  (JSUtil.jslib ShowHtmlSensorPermissionPopup)
 *   - Camera stream failure       (embed.js showCameraPermissionError)
 * Covers the full viewport in portrait and landscape on all
 * browsers (iOS Safari, Android Chrome, desktop).
 * z-index 50 places it above all other player elements.
 * All content and button handlers are set dynamically by JS.
 * --------------------------------------------------------------- */
#permission-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg,
        #0d1b2a 0%, #0e2233 35%, #0a1a1a 70%, #050d0d 100%);
    overflow: hidden;
    box-sizing: border-box;
    /* iOS safe-area: keeps content clear of notch and home bar */
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}

#permission-popup-close {
    position: absolute;
    top: calc(clamp(8px, 2vh, 20px) + env(safe-area-inset-top, 0px));
    right: calc(clamp(8px, 2vw, 20px) + env(safe-area-inset-right, 0px));
    width: clamp(36px, 8vmin, 56px);
    height: clamp(36px, 8vmin, 56px);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: clamp(8px, 2vmin, 14px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

#permission-popup-close:active {
    background: rgba(255, 255, 255, 0.24);
}

#permission-popup-close img {
    width: clamp(16px, 4vmin, 28px);
    height: clamp(16px, 4vmin, 28px);
    object-fit: contain;
}

#permission-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(48px, 10vh, 80px) clamp(16px, 4vw, 32px) clamp(16px, 5vh, 48px);
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#permission-popup-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif;
    font-size: clamp(16px, min(4.5vw, 4vh), 26px);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 clamp(6px, 1.5vh, 28px) 0;
    line-height: 1.3;
}

#permission-popup-icon {
    width: clamp(48px, min(20vw, 18vh), 108px);
    height: auto;
    margin: 0 0 clamp(8px, 2vh, 32px) 0;
    object-fit: contain;
}

#permission-popup-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif;
    font-size: clamp(11px, min(3.5vw, 3vh), 17px);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0;
    max-width: 340px;
}

#permission-popup-sub {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif;
    font-size: clamp(10px, min(3vw, 2.5vh), 14px);
    color: rgba(255, 255, 255, 0.5);
    margin: clamp(4px, 1.2vh, 12px) 0 0 0;
    max-width: 300px;
    line-height: 1.5;
}

#permission-popup-btn {
    margin-top: clamp(12px, 3vh, 36px);
    background: #e53935;
    color: #ffffff;
    border: none;
    border-radius: 32px;
    padding: clamp(8px, 2vh, 16px) clamp(24px, 6vw, 56px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif;
    font-size: clamp(13px, min(3.5vw, 2.8vh), 18px);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.45);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    letter-spacing: 0.3px;
}

#permission-popup-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 10px rgba(229, 57, 53, 0.3);
}

/* Compact mode for very short viewports (<=240px tall, e.g. small iframes).
 * Keeps the standard vertical column layout. The icon minimum shrinks from
 * 48px to 28px to recover the vertical space needed to show all five elements
 * (title, icon, body, sub, button) without hiding or reordering anything.
 * All margins are zeroed and replaced by a uniform gap on the flex container.
 * overflow-y: auto on #permission-popup-content is the final safety net. */
@media (max-height: 240px) {
    #permission-popup-content {
        padding-top: clamp(44px, 10vh, 56px);
        padding-bottom: clamp(6px, 2.5vh, 14px);
        flex-direction: column;
        gap: clamp(3px, 1vh, 7px);
    }
    #permission-popup-icon {
        width: clamp(28px, min(10vw, 13vh), 48px);
        margin: 0;
    }
    #permission-popup-title {
        font-size: clamp(11px, min(3.5vw, 3.5vh), 18px);
        margin: 0;
    }
    #permission-popup-body {
        font-size: clamp(10px, min(3.2vw, 2.8vh), 15px);
        line-height: 1.4;
        margin: 0;
        max-width: 100%;
    }
    #permission-popup-sub {
        font-size: clamp(10px, min(2.8vw, 2.4vh), 12px);
        margin: 0;
        max-width: 100%;
    }
    #permission-popup-btn {
        margin-top: 0;
        padding: clamp(5px, 1.8vh, 10px) clamp(16px, 5vw, 36px);
        font-size: clamp(11px, min(3.2vw, 2.6vh), 16px);
    }
}