body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; transform: none }
#unity-canvas { width: 100%; height: 100%; background: #FFFFFF }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('halocline-logo-light.png') no-repeat center }
#unity-progress-bar-empty { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-light.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-light.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* ===========================================
   RESPONSIVE BREAKPOINT SYSTEM

   Breakpoints:
   - Mobile Portrait (< 576px): Full width
   - Tablet (576px - 767px): maxWidth = 360px
   - Desktop (>= 768px): maxWidth = 480px

   All spacing: 12px (0.75rem)
   =========================================== */

:root {
    /* Breakpoint variables */
    --panel-min: 22.5rem;      /* 360px - minimum width */
    --panel-max: 30rem;        /* 480px - maximum for >= 768px */

    /* Computed panel width (defined once, reused everywhere) */
    --panel-width: clamp(var(--panel-min), 25vw, var(--panel-max));

    /* Spacing */
    --spacing-edge: 0.75rem;   /* 12px - edge margin */

    /* Header/Toolbar height – fixed height for all viewports */
    --header-height: 4.5rem;
}

/* Tablet: smaller max width */
@media (max-width: 767px) {
    :root {
        --panel-max: 22.5rem;  /* 360px */
    }
}

/* Mobile Portrait: full width */
@media (max-width: 575px) {
    :root {
        --panel-min: calc(100vw - 1.5rem);  /* Full width minus 2x edge margin */
        --panel-max: calc(100vw - 1.5rem);
    }
}

/* ===== Visibility toggle ===== */
.is-hidden    { display: none !important; }
.is-block     { display: block !important; }
.is-inline    { display: inline !important; }
.is-invisible { visibility: hidden !important; }
.is-visible   { visibility: visible !important; }

/* ===== Home Window Fullscreen (no space loaded) ===== */
.homewindow-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border: none !important;
    transform: none !important;
    background: transparent;
    pointer-events: auto;
    z-index: 2147483000;
}

/* ===== Home Window Docked (space loaded) ===== */
/* top = spacing + header + spacing */
/* height = 100vh - top - spacing */
.homeWindowDocked {
    position: fixed !important;
    top: calc(var(--header-height) + var(--spacing-edge) + var(--spacing-edge)) !important;
    left: var(--spacing-edge) !important;
    width: var(--panel-width) !important;
    height: calc(100vh - var(--header-height) - var(--spacing-edge) - var(--spacing-edge) - var(--spacing-edge)) !important;
    border: none !important;
    border-radius: calc(var(--panel-width) * 12 / 333) !important; /* Responsive radius matching SpaceEditingMenu (12px at 333px reference width) */
    overflow: hidden !important; /* Clip content at corners */
    transform: none !important;
    background: transparent;
    pointer-events: auto;
    z-index: 2147483000 !important;
}

/* ===== Space Editing Toolbar (Header) ===== */
.spaceEditing {
    position: fixed !important;
    top: var(--spacing-edge) !important;
    left: var(--spacing-edge) !important;
    width: var(--panel-width) !important;
    height: var(--header-height) !important;
    border: none !important;
    transform: none !important;
    background: transparent;
    pointer-events: auto;
    z-index: 2147483001;
    box-sizing: border-box;
    overflow: hidden;
}

/* ===== Context Menu ===== */
.context {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: var(--spacing-edge) !important;
    bottom: var(--spacing-edge) !important;
    width: 333px !important;
    height: 248px !important;
    max-width: calc(100vw - 2 * var(--spacing-edge)) !important;
    border: none !important;
    transform: none !important;
    background: transparent;
    pointer-events: auto;
    z-index: 2147482999 !important;
}

/* Mobile Portrait: ContextMenu full width */
@media (max-width: 575px) {
    .context {
        left: var(--spacing-edge) !important;
        width: calc(100vw - 2 * var(--spacing-edge)) !important;
        height: 10rem !important;
    }
}