*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0A0C1B;
}

/* ── Outside Layer — always visible, full viewport ───────────────────────── */

#outside-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
}

#noise-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Star canvas — sits between noise and saturn */
#star-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#star-canvas.loaded { opacity: 1; }

/* Saturn — bumped to z-index 2 to stay above stars */
#saturn {
    position: absolute;
    width: clamp(360px, 48vw, 720px);
    max-height: 45vh;
    object-fit: contain;
    visibility: hidden;          /* hidden until JS positions and reveals it */
    will-change: transform;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

/* ── Star tooltip ────────────────────────────────────────────────────────── */

#star-tooltip {
    position: fixed;
    display: none;           /* shown by JS on hover */
    z-index: 20;
    pointer-events: none;
    /* no border-radius — sharp rectangular panel */
}

#tooltip-wood {
    position: absolute;
    inset: 0;
    display: block;
    /* no border-radius */
}

#tooltip-glass {
    position: absolute;
    /* width/height/left/top set by JS: 70 % wide, 80 % tall, centered */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 248, 235, 0.14);       /* more transparent than read/write default */
    border: 1px solid rgba(255, 240, 200, 0.40); /* warm amber border */
    border-radius: 6px;                          /* rounded glass only, wood stays sharp */
    display: flex;
    align-items: center;
    justify-content: center;
}

#tooltip-label {
    font-family: 'Courier New', monospace;
    font-size: clamp(11px, 1.1vw, 16px);
    color: #000;
    letter-spacing: 0.08em;
    user-select: none;
}

/* ── Cabin — sits between outside and inside layers ─────────────────────── */

#cabin-container {
    position: fixed;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

#cabin {
    display: block;
    width: 30vw;
    min-width: 220px;
    max-width: 480px;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Inside Layer ────────────────────────────────────────────────────────── */
/* background: transparent so the cleared window hole in the wood canvas
   lets the outside layer show through underneath.                          */

#inside-layer {
    position: fixed;
    inset: 0;
    z-index: 5;
    visibility: hidden;
    pointer-events: none;
    background: transparent;     /* MUST be transparent — not #1a0f00 */
}

/* Wood canvas — oversized and offset by JS for parallax headroom */
#wood-canvas {
    position: absolute;
    display: block;
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

/* ── Overlay items (window + icons) ──────────────────────────────────────── */
/* Position with left/top only — ParallaxSystem owns transform.             */

.overlay-item {
    position: absolute;
    display: block;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    cursor: pointer;
    pointer-events: auto;
}

/* Drawn window glass — same footprint as the old demo_window.png */
#window-glass {
    width: 44vw;
    min-width: 280px;
    max-width: 600px;
    aspect-ratio: 3 / 2;
    left: calc(50% - 22vw);
    top: 8vh;
    z-index: 2;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;             /* clicking the window exits to outside */
}

/* Wood frame — sized and positioned by JS around #window-glass */
#window-frame-canvas {
    z-index: 3;
    pointer-events: none;
    image-rendering: high-quality;
}

/* Icon container — hidden until contract data arrives */
#icon-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#icon-container.loaded { opacity: 1; }

/* Icons (positions match original layout by contract order: listen, paint, hi) */
#icon-listen {
    width: 28vw;
    min-width: 220px;
    max-width: 400px;
    left: calc(50% - 14vw);
    top: 58vh;
    z-index: 3;
    pointer-events: auto;
}

#icon-paint {
    width: 28vw;
    min-width: 220px;
    max-width: 400px;
    left: 5vw;
    top: 32vh;
    z-index: 3;
    pointer-events: auto;
}

#icon-hi {
    width: 24.5vw;
    min-width: 193px;
    max-width: 350px;
    left: calc(100% - 5vw - 24.5vw);
    top: 14vh;
    z-index: 3;
    pointer-events: auto;
}

/* ── Tap overlay (mobile gyro prompt) ───────────────────────────────────── */

#tap-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

#tap-overlay.hidden { display: none; }

.tap-msg {
    color: #fff;
    font-family: sans-serif;
    font-size: clamp(1rem, 3vw, 1.6rem);
    letter-spacing: 0.08em;
    opacity: 0.9;
}