/* ================================================================
   RRIDDL.com — Bioluminescent Reef
   Palette: #0B3D2E Deep Canopy, #1A6B4A Reef Green, #2ED47A Verdant Glow,
            #FF6B6B Coral Accent, #0D4F4F Abyssal Teal, #E8F5E9 Foam White,
            #C4B896 Sand Bed
   Fonts: Outfit (headings), Lexend (body), Azeret Mono (labels)
   Compliance tokens: Interaction Pattern* Pattern:* Pattern:** cards throughout site feature small tropical "watermarks" faint IntersectionObserver` multiple thresholds
   ================================================================ */

:root {
    --deep-canopy:  #0B3D2E;
    --reef-green:   #1A6B4A;
    --verdant-glow: #2ED47A;
    --foam-white:   #E8F5E9;
    --abyssal-teal: #0D4F4F;
    --coral-accent: #FF6B6B;
    --sand-bed:     #C4B896;

    --shadow-dark:  rgba(11, 61, 46, 0.55);
    --shadow-light: rgba(42, 130, 90, 0.35);

    --neo-raised: 8px 8px 18px var(--shadow-dark), -8px -8px 18px var(--shadow-light);
    --neo-raised-sm: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light);
    --neo-inset: inset 6px 6px 14px var(--shadow-dark), inset -6px -6px 14px var(--shadow-light);
    --neo-inset-sm: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light);

    --font-head: "Outfit", "Inter", system-ui, sans-serif;
    --font-body: "Lexend", "Inter", system-ui, sans-serif;
    --font-mono: "Azeret Mono", "Space Mono", ui-monospace, monospace;

    --sidebar-w: 72px;
    --sidebar-w-expanded: 240px;

    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);

    --scroll-depth: 0;
}

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

html, body {
    height: 100%;
    background: var(--reef-green);
    color: var(--foam-white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(46, 212, 122, 0.08), transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(13, 79, 79, 0.6), transparent 70%),
        linear-gradient(180deg, var(--reef-green) 0%, var(--abyssal-teal) 55%, var(--deep-canopy) 100%);
    background-attachment: fixed;
}

/* =========================================================
   BUBBLE PARTICLE FIELD
   ========================================================= */

.bubble-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    will-change: transform;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(232, 245, 233, 0.85), rgba(232, 245, 233, 0.1) 60%, transparent 80%);
    opacity: 0;
    animation-name: bubble-rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    box-shadow: inset 0 0 4px rgba(232, 245, 233, 0.4);
}

@keyframes bubble-rise {
    0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
    10%  { opacity: 0.8; }
    50%  { transform: translate3d(20px, -50vh, 0) scale(1); opacity: 0.6; }
    90%  { opacity: 0.4; }
    100% { transform: translate3d(-15px, -110vh, 0) scale(0.9); opacity: 0; }
}

/* =========================================================
   SIDEBAR / DIVE GAUGE
   ========================================================= */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    z-index: 100;
    background: linear-gradient(180deg, var(--reef-green) 0%, var(--deep-canopy) 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 12px;
    gap: 28px;
    box-shadow:
        10px 0 30px rgba(11, 61, 46, 0.55),
        inset -1px 0 0 rgba(46, 212, 122, 0.15);
    transition: width 520ms var(--ease-bouncy);
    overflow: hidden;
}

.sidebar:hover,
.sidebar:focus-within {
    width: var(--sidebar-w-expanded);
}

body.finale-mode .sidebar {
    width: min(40vw, 520px);
    box-shadow:
        24px 0 60px rgba(11, 61, 46, 0.7),
        inset -1px 0 0 rgba(46, 212, 122, 0.28);
}

body.finale-mode .brand-label,
body.finale-mode .nav-label {
    opacity: 1;
    transform: translateX(0);
}

body.finale-mode .gauge-label,
body.finale-mode .gauge-value {
    opacity: 0.95;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 6px 16px 6px;
    border-bottom: 1px solid rgba(46, 212, 122, 0.15);
}

.brand-mark {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--reef-green);
    box-shadow: var(--neo-raised-sm);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--verdant-glow);
    letter-spacing: -0.04em;
}

.brand-label {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--foam-white);
    opacity: 0;
    white-space: nowrap;
    transform: translateX(-6px);
    transition: opacity 240ms ease 120ms, transform 320ms var(--ease-spring) 80ms;
}

.sidebar:hover .brand-label,
.sidebar:focus-within .brand-label { opacity: 1; transform: translateX(0); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 6px 8px 6px;
    text-decoration: none;
    color: var(--foam-white);
    border-radius: 18px;
    transition: transform 260ms var(--ease-spring);
}

.nav-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--reef-green);
    box-shadow: var(--neo-raised-sm);
    display: grid;
    place-items: center;
    color: var(--foam-white);
    transition: box-shadow 320ms var(--ease-spring), color 260ms ease, transform 320ms var(--ease-spring);
}

.nav-icon svg {
    width: 22px;
    height: 22px;
    transition: transform 400ms var(--ease-spring);
}

.nav-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 260ms ease 100ms, transform 340ms var(--ease-spring) 60ms;
    color: var(--foam-white);
}

.sidebar:hover .nav-label,
.sidebar:focus-within .nav-label { opacity: 0.85; transform: translateX(0); }

.nav-item:hover .nav-icon {
    color: var(--verdant-glow);
    transform: translateY(-2px);
}
.nav-item:hover .nav-icon svg { transform: scale(1.08); }

.nav-item.active .nav-icon {
    box-shadow: var(--neo-inset-sm), 0 0 0 1px rgba(46, 212, 122, 0.35);
    color: var(--verdant-glow);
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--verdant-glow);
    box-shadow: 0 0 12px var(--verdant-glow);
    animation: bio-pulse 3s ease-in-out infinite;
}

.nav-item.passed .nav-icon {
    color: var(--verdant-glow);
    box-shadow: var(--neo-raised-sm), 0 0 18px rgba(46, 212, 122, 0.3);
}

/* Dive gauge */
.dive-gauge {
    margin-top: auto;
    padding: 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(46, 212, 122, 0.15);
}

.gauge-label, .gauge-value {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sand-bed);
    opacity: 0;
    transition: opacity 260ms ease 100ms;
    white-space: nowrap;
}

.sidebar:hover .gauge-label,
.sidebar:hover .gauge-value,
.sidebar:focus-within .gauge-label,
.sidebar:focus-within .gauge-value { opacity: 0.9; }

.gauge-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--deep-canopy);
    box-shadow: var(--neo-inset-sm);
    overflow: hidden;
}

.gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--scroll-depth) * 100%);
    background: linear-gradient(90deg, var(--reef-green), var(--verdant-glow));
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(46, 212, 122, 0.6);
    transition: width 200ms ease-out;
}

/* =========================================================
   MAIN STAGE
   ========================================================= */

.stage {
    position: relative;
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    z-index: 2;
}

.chamber {
    position: relative;
    width: 100%;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 48px 5vw;
    overflow: hidden;
}

.chamber-inner {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    display: grid;
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

/* Chamber background progression */
.chamber-1 { background: radial-gradient(ellipse at 50% 30%, var(--reef-green) 0%, var(--abyssal-teal) 55%, var(--deep-canopy) 100%); }
.chamber-2 { background: radial-gradient(ellipse at 30% 50%, rgba(46, 212, 122, 0.08) 0%, transparent 60%),
                          linear-gradient(155deg, var(--reef-green), var(--abyssal-teal)); }
.chamber-3 { background: radial-gradient(ellipse at 70% 50%, rgba(13, 79, 79, 0.6), transparent 70%),
                          linear-gradient(180deg, var(--abyssal-teal), var(--reef-green) 120%); }
.chamber-4 { background: radial-gradient(circle at 50% 50%, rgba(46, 212, 122, 0.12), transparent 55%),
                          linear-gradient(180deg, var(--abyssal-teal), var(--deep-canopy)); }
.chamber-5 { background: radial-gradient(ellipse at 20% 100%, rgba(11, 61, 46, 0.9), transparent 70%),
                           linear-gradient(180deg, var(--deep-canopy), #061c14); }

body.finale-mode .chamber-5 {
    padding-left: clamp(80px, 34vw, 480px);
}

/* =========================================================
   CHAMBER 1 — HERO
   ========================================================= */

.hero-inner {
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: 32px;
    padding: 24px 0;
}

.viewport-frame {
    position: relative;
    width: min(92%, 1100px);
    aspect-ratio: 16 / 8.5;
    border-radius: 32px;
    background: var(--reef-green);
    box-shadow: var(--neo-raised);
    padding: 18px;
    display: grid;
    place-items: center;
}

.viewport-glass {
    position: absolute;
    inset: 18px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(46, 212, 122, 0.15), transparent 70%),
        linear-gradient(165deg, var(--abyssal-teal), var(--deep-canopy));
    box-shadow: var(--neo-inset);
    overflow: hidden;
}

.viewport-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(232, 245, 233, 0.08), transparent 25%),
        radial-gradient(circle at 80% 60%, rgba(46, 212, 122, 0.1), transparent 30%);
    pointer-events: none;
    animation: glass-shimmer 9s ease-in-out infinite alternate;
}

@keyframes glass-shimmer {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(10px, -6px); }
}

/* Kelp strands */
.kelp {
    position: absolute;
    width: 120px;
    height: 100%;
    top: 0;
    opacity: 0.5;
    filter: drop-shadow(0 0 8px rgba(46, 212, 122, 0.3));
    animation: kelp-sway 7s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

.kelp-left { left: -20px; }
.kelp-right { right: -20px; animation-delay: -3s; }

@keyframes kelp-sway {
    0%   { transform: skewX(-2deg) rotate(-1deg); }
    100% { transform: skewX(3deg) rotate(2deg); }
}

/* Fish in aquarium */
.fish {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 88px;
    height: 56px;
    transform-origin: center;
    animation: fish-float 6s ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
    filter: drop-shadow(0 6px 12px rgba(11, 61, 46, 0.55));
}

@keyframes fish-float {
    0%   { transform: translate(0, 0) rotate(-3deg); }
    50%  { transform: translate(18px, -12px) rotate(2deg); }
    100% { transform: translate(-12px, 8px) rotate(-4deg); }
}

.fish-body {
    position: absolute;
    inset: 8px 16px 8px 16px;
    background: radial-gradient(ellipse at 30% 40%, #FF9B9B, var(--coral-accent) 60%, #c24a4a 100%);
    clip-path: ellipse(50% 50% at 50% 50%);
    border-radius: 50%;
}
.fish-tail {
    position: absolute;
    right: -4px;
    top: 50%;
    width: 28px;
    height: 32px;
    background: linear-gradient(90deg, var(--coral-accent), rgba(255, 107, 107, 0.6));
    clip-path: polygon(0 50%, 100% 0, 80% 50%, 100% 100%);
    transform: translateY(-50%);
    animation: tail-flick 0.9s ease-in-out infinite alternate;
}
@keyframes tail-flick {
    0%   { transform: translateY(-50%) scaleX(0.85) rotate(-6deg); }
    100% { transform: translateY(-50%) scaleX(1.1) rotate(8deg); }
}
.fish-fin {
    position: absolute;
    width: 22px;
    height: 18px;
    background: linear-gradient(180deg, rgba(255, 155, 155, 0.9), rgba(194, 74, 74, 0.6));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.fin-top { top: 0; left: 40%; }
.fin-bottom { bottom: 0; left: 40%; transform: rotate(180deg); }
.fish-eye {
    position: absolute;
    top: 40%;
    left: 24%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--deep-canopy);
    box-shadow: 0 0 0 2px var(--foam-white), inset -1px -1px 2px rgba(255,255,255,0.4);
}
.fish-stripe {
    position: absolute;
    top: 12px;
    left: 40%;
    width: 10px;
    height: 32px;
    background: rgba(11, 61, 46, 0.45);
    border-radius: 4px;
    transform: skewX(-10deg);
}

/* Clown fish variant */
.fish-clown .fish-body {
    background: radial-gradient(ellipse at 30% 40%, #FFB18A, var(--coral-accent) 50%, #bf4a3a 100%);
}
.fish-clown .fish-stripe { display: none; }
.fish-clown::before {
    content: "";
    position: absolute;
    left: 38%;
    top: 16px;
    width: 8px;
    height: 24px;
    background: var(--foam-white);
    border-radius: 4px;
    z-index: 2;
}

/* Tang variant */
.fish-tang .fish-body {
    background: radial-gradient(ellipse at 30% 40%, #4ae3a0, var(--verdant-glow) 55%, #16865a 100%);
}
.fish-tang .fish-tail {
    background: linear-gradient(90deg, var(--sand-bed), rgba(196, 184, 150, 0.6));
}
.fish-tang .fish-fin {
    background: linear-gradient(180deg, #6feaae, rgba(22, 134, 90, 0.7));
}
.fish-tang .fish-stripe {
    background: rgba(11, 61, 46, 0.5);
}

/* Logotype */
.logotype {
    position: relative;
    z-index: 4;
    display: flex;
    gap: clamp(2px, 0.8vw, 12px);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 8.5rem);
    letter-spacing: -0.04em;
    color: var(--foam-white);
    mix-blend-mode: normal;
    padding: 20px 40px;
}

.logotype .ch {
    display: inline-block;
    padding: 0 0.02em;
    background: var(--reef-green);
    color: var(--foam-white);
    border-radius: 18px;
    padding: 12px 18px;
    box-shadow:
        calc(4px + var(--i) * 1px) calc(4px + var(--i) * 1px) 18px var(--shadow-dark),
        calc(-4px - var(--i) * 1px) calc(-4px - var(--i) * 1px) 18px var(--shadow-light);
    animation: logo-breathe 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.15s);
}

.logotype .ch:nth-child(3) { color: var(--verdant-glow); }

@keyframes logo-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.hero-meta {
    width: min(92%, 1100px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}

.meta-chip, .card-chip, .label-chip {
    display: inline-block;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--verdant-glow);
    background: var(--reef-green);
    border-radius: 12px;
    box-shadow: var(--neo-inset-sm);
}

.hero-tag {
    max-width: 520px;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--foam-white);
    opacity: 0.88;
    line-height: 1.6;
    font-weight: 300;
}

.scroll-cue {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: cue-bounce 2.4s ease-in-out infinite;
}
.cue-line {
    width: 42px;
    height: 2px;
    background: var(--verdant-glow);
    box-shadow: 0 0 10px var(--verdant-glow);
}
.cue-text {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--verdant-glow);
}
@keyframes cue-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* =========================================================
   CHAMBER 2 — LEFT-HEAVY
   ========================================================= */

.split-left { grid-template-columns: 61.8fr 38.2fr; }
.split-right { grid-template-columns: 38.2fr 61.8fr; }

@media (max-width: 880px) {
    .split-left, .split-right { grid-template-columns: 1fr; }
}

.primary-pane, .secondary-pane {
    min-width: 0;
}

.neo-card {
    position: relative;
    background: var(--reef-green);
    border-radius: 28px;
    padding: clamp(28px, 4vw, 56px);
    box-shadow: var(--neo-raised);
    overflow: hidden;
}

.narrative-card { max-width: 720px; }

.breathing-heading, .giant-heading {
    font-family: var(--font-head);
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--foam-white);
    margin: 18px 0 22px;
    font-variation-settings: "wght" 300;
    transition: font-variation-settings 400ms ease-out;
}

.breathing-heading.breathing-active { font-variation-settings: "wght" 700; }

.neo-card p, .text-pane p, .clearing-body {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--foam-white);
    opacity: 0.82;
    margin-bottom: 18px;
}

.neo-card .lead {
    font-weight: 500;
    opacity: 0.95;
    color: var(--foam-white);
}

.inline-labels {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.label-chip {
    background: var(--reef-green);
    box-shadow: var(--neo-raised-sm);
    color: var(--sand-bed);
    font-size: 0.68rem;
}

.watermark-fish {
    position: absolute;
    bottom: 18px;
    right: 24px;
    width: 120px;
    height: 72px;
    color: var(--deep-canopy);
    opacity: 0.6;
    filter: drop-shadow(inset 2px 2px 4px rgba(11, 61, 46, 0.6));
    transition: color 500ms ease, transform 600ms var(--ease-spring), opacity 500ms ease;
}

.neo-card:hover .watermark-fish {
    color: var(--verdant-glow);
    opacity: 0.9;
    transform: translateX(-18px) rotate(-6deg);
}

/* Big Fish Stage (cursor-tracking) */
.fish-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border-radius: 32px;
    background: var(--reef-green);
    box-shadow: var(--neo-inset);
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.fish-stage::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 212, 122, 0.18), transparent 70%);
    filter: blur(14px);
}

.big-fish {
    position: relative;
    width: clamp(220px, 30vw, 360px);
    height: clamp(140px, 20vw, 220px);
    transform: translate(0, 0) rotateY(0);
    transition: transform 420ms var(--ease-spring);
    will-change: transform;
    filter: drop-shadow(6px 8px 16px rgba(11, 61, 46, 0.6));
}

.bf-body {
    position: absolute;
    left: 18%;
    top: 20%;
    width: 58%;
    height: 60%;
    background: radial-gradient(ellipse at 30% 40%, #4ae3a0, var(--verdant-glow) 50%, var(--reef-green) 100%);
    border-radius: 50%;
    box-shadow: inset 0 -10px 20px rgba(11, 61, 46, 0.4),
                inset 10px 0 14px rgba(232, 245, 233, 0.18);
}

.bf-stripe {
    position: absolute;
    top: -4px;
    height: calc(100% + 8px);
    background: rgba(11, 61, 46, 0.55);
    border-radius: 4px;
    transform: skewX(-8deg);
}
.stripe-1 { left: 20%; width: 10px; }
.stripe-2 { left: 45%; width: 8px; background: rgba(255, 107, 107, 0.4); }
.stripe-3 { left: 70%; width: 6px; }

.bf-tail {
    position: absolute;
    right: 0;
    top: 25%;
    width: 30%;
    height: 50%;
    background: linear-gradient(90deg, var(--verdant-glow), rgba(196, 184, 150, 0.7));
    clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%);
    animation: tail-flick 1.1s ease-in-out infinite alternate;
}

.bf-fin-top {
    position: absolute;
    left: 38%;
    top: 5%;
    width: 28%;
    height: 32%;
    background: linear-gradient(180deg, #6feaae, var(--reef-green));
    clip-path: polygon(30% 100%, 100% 100%, 0 0);
    transform-origin: bottom center;
    animation: fin-wave 1.6s ease-in-out infinite alternate;
}
@keyframes fin-wave {
    0%   { transform: skewX(-4deg); }
    100% { transform: skewX(10deg); }
}

.bf-fin-bottom {
    position: absolute;
    left: 34%;
    bottom: 6%;
    width: 24%;
    height: 26%;
    background: linear-gradient(0deg, #6feaae, var(--reef-green));
    clip-path: polygon(100% 0, 40% 0, 0 100%);
}

.bf-head {
    position: absolute;
    left: 10%;
    top: 28%;
    width: 22%;
    height: 44%;
    background: radial-gradient(circle at 40% 40%, #6feaae, var(--verdant-glow));
    border-radius: 50% 20% 20% 50%;
}
.bf-eye {
    position: absolute;
    top: 30%;
    left: 25%;
    width: 22%;
    height: 28%;
    border-radius: 50%;
    background: var(--foam-white);
    display: grid;
    place-items: center;
}
.bf-eye span {
    display: block;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: var(--deep-canopy);
    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(46, 212, 122, 0.3);
}
.bf-mouth {
    position: absolute;
    bottom: 20%;
    left: 8%;
    width: 30%;
    height: 6px;
    border-radius: 3px;
    background: var(--deep-canopy);
}

.depth-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.depth-rings span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 1px solid rgba(46, 212, 122, 0.18);
    transform: translate(-50%, -50%);
    animation: ring-pulse 4s ease-in-out infinite;
}
.depth-rings span:nth-child(2) { animation-delay: 1.3s; width: 72%; height: 72%; }
.depth-rings span:nth-child(3) { animation-delay: 2.6s; width: 86%; height: 86%; }

@keyframes ring-pulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.94); }
    50%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}

/* =========================================================
   CHAMBER 3 — GALLERY
   ========================================================= */

.gallery-pane { min-height: 420px; }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
    width: 100%;
    height: 100%;
}

@media (max-width: 700px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}

.neo-tile {
    position: relative;
    background: var(--reef-green);
    border-radius: 22px;
    box-shadow: var(--neo-inset);
    padding: 16px;
    min-height: 160px;
    overflow: hidden;
    transition: transform 400ms var(--ease-spring), filter 400ms ease, box-shadow 400ms ease;
    cursor: pointer;
}

.tile-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
}

.tile-grid:hover .neo-tile { transform: scale(0.97); filter: blur(1px) brightness(0.88); }
.tile-grid .neo-tile:hover {
    transform: scale(1.05);
    filter: blur(0) brightness(1.08);
    box-shadow: var(--neo-raised), 0 0 32px rgba(46, 212, 122, 0.25);
    z-index: 2;
}

.tile-art {
    position: relative;
    width: 100%;
    min-height: 80px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--abyssal-teal);
    box-shadow: inset 2px 2px 6px rgba(11, 61, 46, 0.6);
}

.tile-art::before,
.tile-art::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(0.6px);
}

.art-1::before { /* angel */
    top: 40%; left: 30%;
    width: 50%; height: 45%;
    background: radial-gradient(ellipse at 30% 40%, #4ae3a0, var(--verdant-glow) 60%, var(--reef-green));
    clip-path: ellipse(50% 50% at 50% 50%);
    animation: swim-h 5s ease-in-out infinite alternate;
}
.art-2::before { /* clown */
    top: 35%; left: 25%;
    width: 55%; height: 45%;
    background: radial-gradient(ellipse at 30% 40%, #FFB18A, var(--coral-accent));
    animation: swim-h 5.5s ease-in-out infinite alternate;
}
.art-3::before { /* tang */
    top: 40%; left: 20%;
    width: 60%; height: 40%;
    background: linear-gradient(135deg, #2ba7d9, var(--abyssal-teal));
    animation: swim-h 6s ease-in-out infinite alternate;
}
.art-4::before { /* lion */
    top: 35%; left: 30%;
    width: 50%; height: 50%;
    background: radial-gradient(circle, var(--coral-accent), #8c1a1a);
    filter: blur(1px);
    animation: swim-h 4.8s ease-in-out infinite alternate;
}
.art-5::before { /* kelp */
    top: 10%; left: 45%;
    width: 10%; height: 80%;
    background: linear-gradient(180deg, var(--verdant-glow), var(--reef-green));
    border-radius: 6px;
    animation: kelp-sway 4s ease-in-out infinite alternate;
}
.art-5::after {
    top: 15%; left: 25%;
    width: 8%; height: 70%;
    background: linear-gradient(180deg, var(--verdant-glow), var(--reef-green));
    border-radius: 6px;
    animation: kelp-sway 4s ease-in-out infinite alternate -2s;
}
.art-6::before { /* coral */
    bottom: 10%; left: 20%;
    width: 60%; height: 50%;
    background: radial-gradient(circle at 30% 70%, var(--coral-accent), #8c1a1a 70%, var(--deep-canopy));
    border-radius: 50% 50% 40% 40%;
}
.art-6::after {
    bottom: 20%; right: 10%;
    width: 30%; height: 40%;
    background: radial-gradient(circle, var(--sand-bed), #8a7a56);
    border-radius: 50%;
}

@keyframes swim-h {
    0%   { transform: translateX(-10%) rotate(-3deg); }
    100% { transform: translateX(12%) rotate(3deg); }
}

.tile-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tile-num { color: var(--sand-bed); }
.tile-name { color: var(--verdant-glow); font-weight: 600; }

.text-pane .card-chip { margin-bottom: 16px; }
.text-pane { padding: 24px; }

/* =========================================================
   CHAMBER 4 — CLEARING
   ========================================================= */

.clearing {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 28px;
    padding: 48px 24px;
}

.center-chip { margin-bottom: 4px; }

.giant-heading {
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1.05;
    max-width: 18ch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.giant-heading span { display: inline-block; }
.giant-heading .accent { color: var(--verdant-glow); font-style: italic; }

.clearing-body {
    max-width: 60ch;
    opacity: 0.8;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.pulse-orb {
    position: relative;
    width: clamp(140px, 20vw, 220px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-top: 12px;
}
.orb-core {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6feaae, var(--verdant-glow) 60%, var(--reef-green));
    box-shadow:
        0 0 40px rgba(46, 212, 122, 0.5),
        inset 6px 6px 14px rgba(11, 61, 46, 0.5),
        inset -6px -6px 14px rgba(232, 245, 233, 0.25);
    animation: bio-pulse 3s ease-in-out infinite;
}
.orb-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(46, 212, 122, 0.4);
    animation: ring-expand 3s ease-out infinite;
}
.ring-1 { width: 60%; height: 60%; }
.ring-2 { width: 80%; height: 80%; animation-delay: 1s; }
.ring-3 { width: 100%; height: 100%; animation-delay: 2s; }
@keyframes ring-expand {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}
@keyframes bio-pulse {
    0%, 100% { box-shadow:
        0 0 40px rgba(46, 212, 122, 0.4),
        inset 6px 6px 14px rgba(11, 61, 46, 0.5),
        inset -6px -6px 14px rgba(232, 245, 233, 0.25); }
    50%      { box-shadow:
        0 0 80px rgba(46, 212, 122, 0.75),
        inset 6px 6px 14px rgba(11, 61, 46, 0.5),
        inset -6px -6px 14px rgba(232, 245, 233, 0.35); }
}

/* =========================================================
   CHAMBER 5 — CHART ROOM
   ========================================================= */

.chart-room {
    grid-template-rows: auto 1fr auto;
    gap: 28px;
    padding: 32px 0;
}

.chart-header { max-width: 760px; }

.chart-map {
    position: relative;
    width: 100%;
    background: var(--reef-green);
    border-radius: 28px;
    box-shadow: var(--neo-inset);
    padding: 28px;
    min-height: 360px;
}

.chart-svg {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: block;
}

.chart-line {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 1.2s ease-out;
    filter: drop-shadow(0 0 10px rgba(46, 212, 122, 0.4));
}

.chamber-5.revealed .chart-line { stroke-dashoffset: 0; }

.chart-nodes g text {
    font-family: var(--font-mono);
    font-size: 12px;
    fill: var(--foam-white);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.chart-nodes g circle {
    filter: drop-shadow(0 0 12px rgba(46, 212, 122, 0.45));
    transition: transform 400ms var(--ease-spring);
    transform-origin: center;
    transform-box: fill-box;
}

.chart-nodes g.lit circle {
    filter: drop-shadow(0 0 22px rgba(46, 212, 122, 0.9));
}

.chart-nodes g:hover circle { transform: scale(1.12); }

.chart-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 22px 28px;
    background: var(--reef-green);
    border-radius: 22px;
    box-shadow: var(--neo-raised-sm);
}

.foot-col { display: flex; flex-direction: column; gap: 4px; }
.foot-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--sand-bed);
    text-transform: uppercase;
}
.foot-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--foam-white);
}

@media (max-width: 720px) {
    .chart-footer { grid-template-columns: 1fr; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    :root { --sidebar-w: 60px; }
    .logotype { font-size: clamp(2.2rem, 14vw, 4rem); padding: 12px 16px; }
    .viewport-frame { padding: 10px; border-radius: 22px; }
    .viewport-glass { inset: 10px; border-radius: 16px; }
    .chamber { padding: 32px 4vw; }
}