/*Consolidated Font Imports for Tide*/
@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-100LilBunny-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-100LilBunny-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-100LilBunny.ttf') format('ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-100LilBunnyItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-100LilBunnyItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-100LilBunnyItalic.ttf') format('ttf');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-200LilMondo-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-200LilMondo-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-200LilMondo.ttf') format('ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-200LilMondoItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-200LilMondoItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-200LilMondoItalic.ttf') format('ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-300LilKahuna-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-300LilKahuna-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-300LilKahuna.ttf') format('ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-300LilKahunaItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-300LilKahunaItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-300LilKahunaItalic.ttf') format('ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-400LilDude-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-400LilDude-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-400LilDude.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-400LilDudeItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-400LilDudeItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-400LilDudeItalic.ttf') format('ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-500Dudette-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-500Dudette-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-500Dudette.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-500DudetteItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-500DudetteItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-500DudetteItalic.ttf') format('ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-600Bunny-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-600Bunny-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-600Bunny.ttf') format('ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-600BunnyItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-600BunnyItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-600BunnyItalic.ttf') format('ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-700Mondo-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-700Mondo-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-700Mondo.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-700MondoItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-700MondoItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-700MondoItalic.ttf') format('ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-800Kahuna-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-800Kahuna-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-800Kahuna.ttf') format('ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-800KahunaItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-800KahunaItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-800KahunaItalic.ttf') format('ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-900Dude-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-900Dude-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-900Dude.ttf') format('ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-900DudeItalic-webfont.woff2') format('woff2'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-900DudeItalic-webfont.woff') format('woff'), url('/wp-content/themes/whoi-bb-blue-main/fontface/TideSans-900DudeItalic.ttf') format('ttf');
    font-weight: 900;
    font-style: italic;
}


html, body {
    margin: 0;
    padding: 0;
    font-family: 'TideSans','Red Hat Display', 'Helvetica', Arial, Tahoma, sans-serif;
}

html {
    background-color: #000;
    overflow-x: hidden;
}

/* === Lenis smooth-scroll reset (do not reintroduce `scroll-behavior: smooth`) ===
   Lenis drives the scroll position itself, one value per animation frame. Native
   CSS smooth scrolling animates toward each of those values in parallel, so the two
   fight and the page "skips ahead" by a tick or two during slow scrolls. Guaranteed
   fix: (1) never set `scroll-behavior: smooth` in our own base CSS, and (2) hard-
   override it through Lenis's runtime classes (added to <html>) in case any inherited
   or WordPress-chrome stylesheet sets it. All in-page jumps use lenis.scrollTo(), which
   stays smooth regardless of this property, so no UX is lost. */
.lenis,
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'TideSans','Red Hat Display', 'Helvetica', Arial, Tahoma, sans-serif;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
}
.fl-page-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #041E42;
}
    .fl-page-bar .col-md-6.col-sm-6.text-left {
        max-width: 430px;
        width: 100%;
    }
#whoibrand svg {
    width: 100%;
}
    .fl-page-bar .fl-page-bar-container.container {
        width: 100%;
        margin: auto;
        max-width: 100%;
        padding: 7px 25px;
    }

/* Logo on the left, credits/give actions on the right */
.fl-page-bar .fl-page-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fl-page-bar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

/* Small text-only credits link — opens the credits modal */
.page-bar-credits-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: color 0.15s ease;
    margin-right: 10px;
}

.page-bar-credits-link:hover,
.page-bar-credits-link:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* GIVE button — scaled-down version of the footer's WHOI GIVE NOW pill */
.page-bar-give-btn {
    display: inline-block;
    background-color: #00a9e0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 7px 16px;
    border: 1px solid #009dd4;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.page-bar-give-btn:hover,
.page-bar-give-btn:focus-visible {
    background-color: #008fc2;
    border-color: #008fc2;
    color: #ffffff;
    text-decoration: none;
}

/* GPU acceleration for smooth scrolling */
#ocean-container,
.creature-marker,
.zone-video-container,
#depth-ruler {
    will-change: transform;
    transform: translateZ(0);
}

body.night-mode #ocean-container #sunlight-zone-zone::before {
    content: "";
    background-image: url('../img/Migration.png');
    position: absolute;
    width: 100%;
    height: 3944px;
    z-index: 2;
    background-position: center center;
    top: 0;
}

/* Loading Splash Screen */
#loading-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#loading-splash.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    animation: fadeInUp 0.8s ease-out;
}

/* Splash screen styles matching intro-section */
.splash-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    animation-delay: 0.3s;
}

.splash-title {
    font-size: 8.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.8),
                 0 0 60px rgba(59, 130, 246, 0.4);
    margin-bottom: 3rem;
    animation-delay: 0.6s;
    line-height: .9;
}

.splash-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation-delay: 1.2s;
}

.loading-text {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* Scroll prompt styles (shared between splash and intro) */
.splash-action .scroll-text,
#scroll-indicator .scroll-text {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.splash-action .scroll-arrow,
#scroll-indicator .scroll-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
    animation: bounce 2s infinite;
}

#scroll-indicator .scroll-arrow {
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease, color 0.2s ease;
}

#scroll-indicator .scroll-arrow:hover {
    transform: translateY(5px) scale(1.1);
    color: #60a5fa;
}

/* Back to Top + Jump to Bottom Buttons */
#back-to-top,
#jump-to-bottom {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

#back-to-top.visible,
#jump-to-bottom.visible {
    opacity: 1;
    pointer-events: auto;
}

#back-to-top:hover,
#jump-to-bottom:hover {
    transform: translateY(-3px);
}

/* Day/Night Toggle */
.day-night-toggle {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}
#day-night-toggle-header {
    width: 75px;
    height: 75px;
    overflow: hidden;
}

.day-night-toggle:hover {
    transform: scale(1.05);
}

.toggle-icon {
    width: 300px;
    height: 300px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    object-fit: contain;
    max-width: none;
}

#day-night-toggle-header .toggle-icon {
    width: 115px !important;
    height: 115px !important;
}

.toggle-icon.hidden {
    display: none;
}

.day-night-toggle:hover .toggle-icon {
    transform: scale(1.1);
}

/* Intro toggle needs pointer events since intro-section has pointer-events: none */
#day-night-toggle-intro {
    pointer-events: auto;
}

/* Hide header toggle initially, show when pinned */
#day-night-toggle-header {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#main-header.is-pinned #day-night-toggle-header {
    opacity: 1;
    transform: translateY(0);
}

/* Audio Toggle */
.audio-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    background: none;
    border: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

#main-header.is-pinned .audio-toggle {
    opacity: 0.7;
    transform: translateY(0);
}

.audio-toggle:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}

.audio-icon.hidden {
    display: none;
}

/* Progress Bar */
.progress-bar-container {
    width: 300px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 1.5rem auto 0;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
    border-radius: 2px;
    width: 0%;
    animation: fillProgress 2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes fillProgress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

#ocean-container {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 20;
    background: linear-gradient(to bottom,
        #0DB7BD 0%,
        #0E7DB6 1%,
        #1861AC 4%,
        #29439A 8%,
        #030409 9%,
        #020306 82%,
        #010203 90%,
        #000 100%
    );
    transition: background 0.8s ease;
}

/* Night mode for ocean */
body.night-mode #ocean-container {
    background: linear-gradient(to bottom,
        #2B409A 0%,
        #13183C 4%,
        #0B1122 8%,
        #04050c 10%,
        #030409 58%,
        #020306 82%,
        #010203 90%,
        #000 100%
    );
}
.digit-container {
    padding: 4px 1px;
    min-width: 14px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: white;
    font-family: Source Sans Pro,sans-serif;
}

    .digit-container.unit {
        background-color: #374151; /* Different color for the 'm' unit */
        border-color: #6b7280;
    }

.digit {
    display: inline-block;
    line-height: 1;
}
/* Depth ruler vertical line */
#depth-ruler::before {
    content: "";
    position: absolute;
    left: 74px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.3);
}

.ruler-tick {
    position: absolute;
    left: 50px;
    width: 40px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
}

.ruler-label {
    position: absolute;
    left: 8px;
    font-size: 0.65rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
}
#ocean-container::before {
    background-image: url('../img/grid-pattern.png');
    background-repeat: repeat;
    width: 100%;
    content: "";
    position: absolute;
    height: 100%;
    opacity: 1;
    background-size: 4% auto;
}
#ocean-container {
    margin-top: 100vh;
    /* Clip creatures that extend past the sides (e.g. whale tails) at the
       container edge. `clip` (not `hidden`) is deliberate: `hidden` would
       coerce overflow-y to `auto`, turning this very tall container into a
       nested vertical scroller; `clip` clips X only and leaves Y `visible`,
       so the top/bottom halves of edge-of-range creatures aren't trimmed. */
    overflow-x: clip;
    overflow-y: visible;
}

#ocean-container h1 {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

#main-header {
    /*backdrop-filter: blur(10px);*/
    position: absolute;
    top: calc(100vh - 100px);
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 50;
}

#main-header.is-pinned {
    position: fixed;
    top: 40px;
    background-color: #2272AB;
}

#zone-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Hide counters when header is unpinned (in intro) */
#depth-hud, .depth-row, .pressure-row, .temp-row {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show counters when header is pinned */
#main-header.is-pinned #depth-hud,
#main-header.is-pinned .depth-row,
#main-header.is-pinned .pressure-row,
#main-header.is-pinned .temp-row {
    opacity: 1;
    transform: translateY(0);
}

.digit-container.unit-small {
    /* Hug the unit text (ft / m / ATM / PSI / °F / °C) instead of reserving
       29px — unit strings are static per row, so no width jitter. */
    min-width: auto;
    padding: 4px 1px;
}

.digit-small {
    display: inline-block;
    line-height: 1;
    font-size: 11px;
    font-weight: bold;
}

/* Tighter digit spacing in the HUD readouts (overrides Tailwind's gap-1
   on the row markup) */
#main-header .depth-row,
#main-header .pressure-row,
#main-header .temp-row {
    gap: 1px;
}

/* Right-align the pressure and temperature readouts so the shorter row
   (e.g. 3-digit ATM above 4-digit PSI) shares a right edge with the longer
   one instead of leaving a ragged gap. */
#main-header .pressure-row,
#main-header .temp-row {
    justify-content: flex-end;
}

#zone-nav button {
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#zone-nav button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

#main-header.is-pinned #zone-nav button.active {
    background-color: #041e42;
    color: #ffffff;
}

/* Character Chooser */
#main-header.is-pinned ~ #ocean-container #character-chooser {
    position: sticky;
}

#character-chooser {
    /*
    border: 1px solid rgba(255, 255, 255, 0.1);*/
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: fit-content;
}

#character-chooser.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.character-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99999px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.character-btn:hover {
    transform: scale(1.05);
}

    .character-btn.active {
        background-color: rgba(59, 130, 246, 0.4);
        border-color: transparent;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        border-radius: 9999px;
    }

.char-icon-img {
    width: 106px;
    height: 106px;
    object-fit: contain;
}

/* Character Display */
#character-display {
    position: sticky;
    top: 50%;
    left: 1.2rem;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 9999;
    width: fit-content;

}

#character-avatar {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    backdrop-filter: blur(10px);
    border-radius: 9999px;
    border: 3px solid #fff;
}

/* Beach Ball SVG with pressure distortion */
.beach-ball-svg {
    width: 110px;
    height: 110px;
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.beach-ball-svg image {
    transform-origin: center center;
}

#character-label {
    font-weight: 400;
}

/* Character Display Wrapper */
.character-display-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Alt Picker - slides out horizontally */
.character-alt-picker {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding-left: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-50%) translateX(-20px);
}

.character-alt-picker.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.alt-picker-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.alt-picker-btn:hover {
    background-color: rgba(59, 130, 246, 0.5);
    border-color: rgba(59, 130, 246, 0.8);
    transform: scale(1.1);
}

.alt-picker-btn.active {
    background-color: rgba(59, 130, 246, 0.7);
    border-color: rgb(59, 130, 246);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.alt-picker-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Disabled state for characters beyond their depth limit */
.character-btn.depth-disabled,
.alt-picker-btn.depth-disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
    pointer-events: none;
}

.character-btn.depth-disabled:hover,
.alt-picker-btn.depth-disabled:hover {
    transform: none;
    background-color: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

.zone-label-wrapper {
display:none;
}
/* Alt picker groups */
.alt-picker-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.alt-picker-group[style*="display: none"] {
    display: none !important;
}

/* Make avatar clickable when chooser is hidden */
#character-display.picker-enabled #character-avatar,
#character-display.picker-enabled #beach-ball-svg {
    cursor: pointer;
    pointer-events: auto;
}

/* Milestone Markers - Horizontal line with text */
.milestone-marker {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    pointer-events: none;
    text-align: center;
}
    .milestone-marker.left-align.offset .milestone-content {
        left: 180px;
        right: initial;
        width: max-content !important;
        text-align: left;
    }
    .milestone-marker.left-align.offset .milestone-line {
        left: 80px;
    }

/* Dashed line spans the marker width. `top: 18px` aligns its 2px stroke
   with the vertical centerline of the label so the line appears to pass
   through (and out the sides of) the name. */
.milestone-line {
    position: absolute;
    top: 18px;
    left: 90px;
    right: 20px;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.6) 0px,
        rgba(255, 255, 255, 0.6) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 1;
}

/* Content flows from top of marker so the label box overlaps the line. */
.milestone-content {
    position: relative;
    max-width: 550px;
    margin: 0 auto;
    pointer-events: auto;
    z-index: 2;
    padding: 0 20px;
}

/* Label sits ON the dashed line. `backdrop-filter: blur` softens whatever
   is rendered behind the label (= the dashed line), so the line appears
   to dissolve into a soft halo where it overlaps the name — making the
   line look like it "comes out of the sides" of the label cleanly. */
.milestone-label {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    padding: 6px 18px;
    border-radius: 4px;
    background: rgba(179, 179, 179, 0);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    z-index: 3;
    /* Force the label to its own compositing context so backdrop-filter
       renders consistently — regardless of any ancestor's opacity,
       transform, or scroll-in animation. */
    isolation: isolate;
    will-change: backdrop-filter;
}

/* Depth now appears UNDER the name (supplementary, smaller). */
.milestone-depth {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace;
    margin-top: 8px;
    margin-bottom: 8px;
}

.milestone-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 14px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive milestone adjustments. Text keeps its desktop rem sizes —
   the html root font-size bump (see RESPONSIVE BREAKPOINTS at the bottom
   of this file) is what makes rem text physically larger on mobile, so
   shrinking it here would fight that. */
@media (max-width: 768px) {
    .milestone-content {
        max-width: 250px;
    }
}

/* ============================================================
   Zone markers — banner-style "chapter heading" callouts for
   the five ocean zones (Sunlit, Twilight, Midnight, Abyssal, Hadal).
   Larger and more prominent than milestone markers because they
   announce a major transition in the experience.
   ============================================================ */
.zone-marker {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 30;        /* above creatures (25), below header (50) */
    pointer-events: none;
    text-align: center;
    padding: 24px 0;
}

.zone-marker .zone-content {
    display: inline-block;
    max-width: 720px;
    padding: 20px 36px;
    background: rgba(4, 30, 66, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(32, 159, 215, 0.45);
    border-radius: 6px;
    pointer-events: auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.zone-marker .zone-depth {
    font-size: 0.75rem;
    font-weight: 500;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.zone-marker .zone-label {
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.15;
    margin-bottom: 10px;
}

.zone-marker .zone-description {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 8px;
}

.zone-marker .zone-source {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 10px;
}

.zone-marker .zone-source a {
    color: rgba(120, 200, 255, 0.85);
    text-decoration: none;
}
.zone-marker .zone-source a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Responsive zone adjustments */
@media (max-width: 1024px) {
    .zone-marker .zone-label { font-size: 1.45rem; }
    .zone-marker .zone-content { max-width: 540px; padding: 18px 28px; }
}
@media (max-width: 768px) {
    .zone-marker { padding: 16px 0; }
    .zone-marker .zone-content {
        max-width: 86vw;
        padding: 14px 18px;
    }
    /* Sizes only mildly reduced from desktop — combined with the mobile
       html root font-size bump these stay comfortably readable. */
    .zone-marker .zone-label {
        font-size: 1.3rem;
        letter-spacing: 0.06em;
        margin-bottom: 6px;
    }
    .zone-marker .zone-depth { font-size: 0.7rem; letter-spacing: 0.18em; }
    .zone-marker .zone-description { font-size: 0.9rem; }
}

/* Intro Section */
#intro-section {
    text-align: center;
    z-index: 10;
    top: 40px;
    height: calc(100vh + 15px);
    pointer-events: none;
    display: flex;
    justify-content: center;
    background: #0DB7BD;
    opacity: 0;
    transition: opacity 1s ease-in, background 0.8s ease;
    background-image: url(../img/day-sky.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 47%;
}

body.night-mode #intro-section.night-mode {
    background-image: url(../img/night-sky.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 47%;
}


#intro-section.visible {
    opacity: 1;
}

/* Night mode for intro */
#intro-section.night-mode {
    background: #2B409A;
}

.intro-text {
    opacity: 0;
    animation: fadeInUp 1.2s ease-out forwards;
}

#intro-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 1rem;
    animation-delay: 0.3s;
}

#intro-title {
    font-size: 8.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.8),
                 0 0 60px rgba(59, 130, 246, 0.4);
    margin-bottom: 15rem;
    animation-delay: 0.6s;
    line-height: .9;
}

#scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation-delay: 1.2s;
    position: absolute;
    bottom: 16vh;
}

.scroll-text {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.scroll-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
    animation: bounce 2s infinite;
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Marine Snow Multi-Layer Particle System */
.continental-shelf-bg {
    position: absolute;
    width: 100%;
    height: 8362px;
    object-fit: cover;
    object-position: top center;
    pointer-events: none;
    z-index: 0;
}

/* Seamount background — top + height set in main.js from depthToPixels(1650/1800).
   Width is 100% so it scales to any viewport; cover/center keeps the peak in
   frame on both mobile and desktop without distortion. */
.seamount-bg {
    position: absolute;
    width: 100%;
    object-position: center center;
    pointer-events: none;
    z-index: 0;
}

/* Natural-aspect-ratio background images. Top set in main.js from
   depthToPixels(start). Width: 100% with height: auto keeps them
   mobile-friendly: image scales proportionally with viewport, no
   distortion, no cropping. */
.mid-ocean-ridge-bg,
.hydrothermal-vents-bg,
.deep-sea-coral-garden-bg,
.whale-fall-bg,
.hot-tub-of-despair-bg,
.abyssal-plain-bg,
.titanic-bg,
.hadalpelagic-bg,
.trench-bg,
.trench-pt2-bg,
.trench-pt3-bg,
.trench-pt4-bg,
.challenger-deep-bg {
    position: absolute;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 0;
}


.marine-snow-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Hidden until the JS capability gate enables effects; .snow-on fades it in. */
    opacity: 0;
    transition: opacity 1.2s ease;
}

.marine-snow-container.snow-on {
    opacity: 1;
}

/* Scroll tracking happens on these wrappers — main.js sets one translate3d
   per layer per scroll frame (compositor-only: no layout, no repaint). This
   replaces the old per-frame style.top + background-position-y writes, which
   forced a full re-raster of every gradient layer on each scroll frame.
   Height = 100vh + 2200px: room for the 700px viewport buffer, the modulo
   wrap (≤700px), and the drift animation's ±(400–700px) travel. */
.marine-snow-layer-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 2200px);
    will-change: transform;
}

/* Layer 1: Background - Small, sharp particles, slow drift */
.marine-snow-layer-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 2200px);
    will-change: transform;
    background-image:
        radial-gradient(1px 1px at 5% 10%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 15% 35%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 45% 20%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 65% 70%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 75% 95%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 30% 5%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50% 90%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 20% 65%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 40% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 8% 48%, rgba(255,255,255,0.6), transparent);
    background-size: 100% 600px;
    background-repeat: repeat-y;
    opacity: 0.4;
    animation: marineSnowFallSlow 45s linear infinite;
}

/* Layer 2: Mid - Medium particles, medium speed */
.marine-snow-layer-mid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 2200px);
    will-change: transform;
    background-image:
        radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 22% 38%, rgba(255,255,255,0.6), transparent),
        radial-gradient(3px 3px at 38% 62%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 52% 88%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 68% 18%, rgba(255,255,255,0.6), transparent),
        radial-gradient(3px 3px at 82% 42%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 12% 68%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 28% 92%, rgba(255,255,255,0.5), transparent),
        radial-gradient(3px 3px at 42% 8%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 58% 32%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 72% 58%, rgba(255,255,255,0.5), transparent),
        radial-gradient(3px 3px at 88% 82%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 18% 28%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 48% 52%, rgba(255,255,255,0.5), transparent),
        radial-gradient(3px 3px at 78% 78%, rgba(255,255,255,0.7), transparent);
    background-size: 100% 500px;
    background-repeat: repeat-y;
    opacity: 0.35;
    animation: marineSnowFallMedium 30s linear infinite;
}

/* Layer 3: Foreground - Large, blurry particles, faster drift */
.marine-snow-layer-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 2200px);
    will-change: transform;
    background-image:
        radial-gradient(6px 6px at 10% 20%, rgba(255,255,255,0.4), transparent),
        radial-gradient(8px 8px at 30% 50%, rgba(255,255,255,0.3), transparent),
        radial-gradient(5px 5px at 50% 80%, rgba(255,255,255,0.35), transparent),
        radial-gradient(7px 7px at 70% 15%, rgba(255,255,255,0.3), transparent),
        radial-gradient(6px 6px at 90% 45%, rgba(255,255,255,0.4), transparent),
        radial-gradient(8px 8px at 15% 70%, rgba(255,255,255,0.3), transparent),
        radial-gradient(5px 5px at 35% 95%, rgba(255,255,255,0.35), transparent),
        radial-gradient(7px 7px at 55% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(6px 6px at 75% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(8px 8px at 95% 85%, rgba(255,255,255,0.3), transparent);
    background-size: 100% 400px;
    background-repeat: repeat-y;
    opacity: 0.25;
    /* blur(2px) removed — expensive per-frame filter. Radial gradients
       are already soft enough via their alpha falloff. */
    animation: marineSnowFallFast 18s linear infinite;
}

/* Layer 4: Extra depth - Very small distant particles */
.marine-snow-layer-distant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 2200px);
    will-change: transform;
    background-image:
        radial-gradient(0.5px 0.5px at 3% 7%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 13% 27%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 23% 47%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 33% 67%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 43% 87%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 53% 17%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 63% 37%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 73% 57%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 83% 77%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 93% 97%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 7% 42%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 27% 62%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 47% 82%, rgba(200,220,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 67% 12%, rgba(200,220,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 87% 32%, rgba(200,220,255,0.5), transparent);
    background-size: 100% 700px;
    background-repeat: repeat-y;
    opacity: 0.5;
    animation: marineSnowFallVerySlow 60s linear infinite;
}

@keyframes marineSnowFallSlow {
    0% {
        transform: translateY(-600px);
    }
    100% {
        transform: translateY(600px);
    }
}

@keyframes marineSnowFallMedium {
    0% {
        transform: translateY(-500px);
    }
    100% {
        transform: translateY(500px);
    }
}

@keyframes marineSnowFallFast {
    0% {
        transform: translateY(-400px);
    }
    100% {
        transform: translateY(400px);
    }
}

@keyframes marineSnowFallVerySlow {
    0% {
        transform: translateY(-700px);
    }
    100% {
        transform: translateY(700px);
    }
}

/* === Marine snow "clumps" — depth-anchored emphasis layer ===
   Positioned by JS to span 1200–1350m, where the Marine Snow fact card
   sits at 1275m. Larger, soft, low-opacity flakes that drift gently —
   visually supporting "tiny flake = clump of detritus." Edges are masked
   so the layer fades in/out across its depth band. */
.marine-snow-clumps {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    will-change: transform;
    background-image:
        radial-gradient(14px 14px at  8% 12%, rgba(255,255,255,0.32), transparent 70%),
        radial-gradient(18px 18px at 22% 35%, rgba(255,255,255,0.28), transparent 70%),
        radial-gradient(12px 12px at 38% 18%, rgba(255,255,255,0.36), transparent 70%),
        radial-gradient(20px 20px at 55% 48%, rgba(255,255,255,0.26), transparent 70%),
        radial-gradient(16px 16px at 70% 25%, rgba(255,255,255,0.30), transparent 70%),
        radial-gradient(22px 22px at 86% 42%, rgba(255,255,255,0.24), transparent 70%),
        radial-gradient(13px 13px at 12% 68%, rgba(255,255,255,0.34), transparent 70%),
        radial-gradient(17px 17px at 32% 82%, rgba(255,255,255,0.28), transparent 70%),
        radial-gradient(15px 15px at 48% 60%, rgba(255,255,255,0.32), transparent 70%),
        radial-gradient(19px 19px at 64% 88%, rgba(255,255,255,0.26), transparent 70%),
        radial-gradient(11px 11px at 82% 75%, rgba(255,255,255,0.36), transparent 70%),
        radial-gradient(21px 21px at 95% 92%, rgba(255,255,255,0.24), transparent 70%);
    background-size: 100% 900px;
    background-repeat: repeat-y;
    opacity: 0.85;
    animation: marineSnowClumpDrift 40s linear infinite;
    /* Soft entry/exit at the depth-band edges. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
}

@keyframes marineSnowClumpDrift {
    0%   { transform: translateY(-450px); }
    100% { transform: translateY(450px); }
}

/* Creature Markers - Modern Design */
.creature-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: max-content;
    z-index: 25;
    isolation: isolate;
}

.creature-marker.active {
    z-index: 50;
}

/* Night-only creatures - hidden by default, visible in night mode */
.creature-marker.night-only {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body.night-mode .creature-marker.night-only {
    opacity: 1;
    visibility: visible;
}

.creature-marker:hover {
    transform: translate(-50%, -50%);
}

.creature-image {
    display: block;
    position: relative;
}

/* Responsive creature scaling. NOTE: these scale the whole marker (artwork
   AND label) on top of the VIEWPORT_SCALE applied to image widths in
   main.js. The label text is counter-scaled back to full size in the
   RESPONSIVE BREAKPOINTS section at the bottom of this file — if you tune
   these factors, update the inverse factors there too. */
@media (max-width: 1024px) {
    .creature-marker {
        transform: translate(-50%, -50%) scale(0.7);
    }

    .creature-marker:hover {
        transform: translate(-50%, -50%) scale(0.7);
    }
}

@media (max-width: 768px) {
    .creature-marker {
        transform: translate(-50%, -50%) scale(0.7);
    }

    .creature-marker:hover {
        transform: translate(-50%, -50%) scale(0.7);
    }
}

/* Creature Name - Expands to show info on hover */
.creature-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    margin-top: 0px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    transition: all 0.2s ease-out;
    max-width: 240px;
    overflow: hidden;
    cursor: pointer;
    width: max-content;
}

.creature-name-text {
    display: block;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

.creature-marker.active .creature-name-text {
  font-size: 21px;
}

.creature-marker.active .creature-name {
    white-space: normal;
    max-width: 280px;
    padding: 12px 14px;
    border-radius: 14px;
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(96, 165, 250, 0.15);
    z-index: 100;
}

/* Creature Info Flyout - now positioned within creature-name area */
.creature-info-flyout {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out, margin-top 0.25s ease-out;
    margin-top: 0;
}

.creature-marker.active .creature-info-flyout {
    max-height: 300px;
    opacity: 1;
    margin-top: 10px;
}

.flyout-content {
    padding: 0;
}

.flyout-scientific-name {
  display: none;
  font-size: 13px;
  font-style: italic;
  color: #fff;
  margin: 2px 0 0 0;
  text-align: center;
  font-weight: 400;
}

.creature-marker.active .flyout-scientific-name {
    display: block;
}

.flyout-length {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 6px 0;
}

.flyout-tags {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 6px 0;
}

.flyout-depth {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
}

.night-mode .flyout-depth {
    color: #60a5fa;
}

    .flyout-title {
        display: none; /* Hide title since name is already shown */
    }

.flyout-description {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-weight: 400;
}

    .flyout-content {
        user-select: text;
        -webkit-user-select: text;
        cursor: text;
    }

    .flyout-source {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.35);
        margin: 8px 0 0 0;
        line-height: 1.4;
        word-break: break-all;
    }

    .flyout-source a {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }

    .flyout-source a:hover {
        color: #fff;
        text-decoration: underline;
    }

    .milestone-source a {
  color: rgb(190, 190, 190);
  font-size: 12px;
}
.milestone-source {
  font-size: 12px;
  color: rgb(190, 190, 190);
  margin-top: 6px;
  word-break: break-all;
}

    .milestone-source a {
  color: rgb(190, 190, 190);
  font-size: 12px;
        text-decoration: none;
    }

    .milestone-source a:hover {
        color: #fff;
        text-decoration: underline;
    }

/* ============================================================
   Fact Markers — subtler "did you know?" style notes along the column.
   Visually quieter than milestones; optional click-to-reveal flyout.
   ============================================================ */
.fact-marker {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    pointer-events: none;
    text-align: center;
}



.fact-content {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 700px;
    pointer-events: auto;
    z-index: 25;
    text-align: center;
    width: 100% !important;
}

/* When a fact has a `position` value in JSON, anchor the content's CENTER
   at that horizontal % (mirrors the creature-marker convention). */
.fact-marker.has-position .fact-content {
    right: auto;
    margin: 0;
    transform: translateX(-50%);
}

.fact-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.fact-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(150, 200, 255, 0.7);
    border-radius: 50%;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
    color: rgba(150, 200, 255, 0.95);
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.fact-depth {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
    margin-bottom: 6px;
}

.fact-description {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
}

.fact-source {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 6px;
    word-break: break-all;
}

.fact-source a {
    color: rgba(96, 165, 250, 0.6);
    text-decoration: none;
}

.fact-source a:hover {
    color: #fff;
    text-decoration: underline;
}

.fact-image {
    display: block;
    margin: 0 auto 8px;
    max-width: 100%;
    pointer-events: none;
    user-select: none;
}

/* Flyout mode: hide image, description, and source until the label is clicked */
.fact-marker.has-flyout .fact-image,
.fact-marker.has-flyout .fact-description,
.fact-marker.has-flyout .fact-source {
    display: none;
}

.fact-marker.has-flyout .fact-label {
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.fact-marker.has-flyout .fact-label:hover {
    transform: translateY(-1px);
    color: #fff;
}

.fact-marker.has-flyout .fact-label::after {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 700;
    color: rgba(150, 200, 255, 0.7);
    transition: transform 0.25s ease;
}

.fact-marker.has-flyout.active .fact-label::after {
    transform: rotate(45deg);
    color: rgba(255, 255, 255, 0.9);
}

.fact-marker.has-flyout.active .fact-image,
.fact-marker.has-flyout.active .fact-description,
.fact-marker.has-flyout.active .fact-source {
    display: block;
    animation: factFadeIn 0.25s ease-out;
}

@keyframes factFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

    /* Glow line at top of expanded info */
    .creature-info-flyout::before {
        content: '';
        display: block;
        height: 1px;
        margin-bottom: 10px;
        background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5), transparent);
    }

/* ============================================================
   Bubble Trail — rising bubbles emitted from the character avatar
   ============================================================ */
.bubble-trail {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 110px;
    pointer-events: none;
    z-index: 5;
}

.bubble {
    position: absolute;
    /* Spawn point: ~35px from top of the 110px avatar, roughly the
       head/regulator area for diver characters. */
    bottom: 75px;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(200, 230, 255, 0.6) 55%,
        rgba(140, 200, 255, 0.2) 100%);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4),
                inset 0 0 2px rgba(255, 255, 255, 0.7);
    animation: bubble-rise 1.8s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    --bubble-wobble: 0px;
    will-change: transform, opacity;
}

@keyframes bubble-rise {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    15%  { opacity: 0.85; }
    50%  { transform: translate(var(--bubble-wobble), -65px) scale(1.05); opacity: 0.7; }
    100% { transform: translate(0, -135px) scale(1.1); opacity: 0; }
}

/* ============================================================
   Spectrum Meter — vertical visible-light bands at current depth
   ============================================================ */
.spectrum-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Inherit the same hide-until-pinned behavior as the depth rows */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#main-header.is-pinned .spectrum-column {
    opacity: 1;
    transform: translateY(0);
}

.spectrum-meter {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 14px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.spectrum-cell {
    height: 7px;
    width: 100%;
    border-radius: 1px;
    transition: opacity 0.25s ease-out;
    opacity: 1;
}

.spectrum-cell[data-band="red"]    { background: #ff3b30; }
.spectrum-cell[data-band="orange"] { background: #ff9500; }
.spectrum-cell[data-band="yellow"] { background: #ffcc00; }
.spectrum-cell[data-band="green"]  { background: #34c759; }
.spectrum-cell[data-band="blue"]   { background: #0a84ff; }
.spectrum-cell[data-band="violet"] { background: #af52de; }

.spectrum-label {
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

/* ============================================================
   WHOI Footer — matches whoi.edu's authored CSS exactly.
   Markup is the actual Beaver Builder structure pasted from
   whoi.edu (uses `fl-*` framework classes). This block recreates
   the WHOI styling without requiring Beaver Builder's runtime CSS.

   Colors pulled directly from whoi.edu's layout bundle:
     Navy bg:      #041E42
     Cyan accent:  #209FD7  (top rail)
     Link text:    #b8bcc2  (light gray-blue)
     Give Now bg:  #00a9e0  (lighter cyan)
     Give Now bdr: #009dd4
   ============================================================ */

footer {
  position: relative;
  z-index: 99;
}

footer.fl-builder-content {
    color: #ffffff;
    font-family: "TideSans", "Red Hat Display", "Helvetica", Arial, Tahoma, sans-serif;
    line-height: 1.5;
}

footer.fl-builder-content .fl-row {
    position: relative;
}

footer.fl-builder-content .fl-row-content-wrap {
    padding-left: 24px;
    padding-right: 24px;
}

footer.fl-builder-content .fl-row-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Main row — navy background + 6px cyan top rail */
footer.fl-builder-content .fl-node-edl29gj5o8bs > .fl-row-content-wrap {
    background-color: #041E42;
    border-top: 6px solid #209FD7;
    border-bottom: 1px solid #209FD7;
    padding-top: 40px;
    padding-bottom: 20px;
}

/* Legal row */
footer.fl-builder-content .fl-node-n678ecrium1j > .fl-row-content-wrap {
    background-color: #041E42;
    border-top: 1px solid #209FD7;
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Column group */
footer.fl-builder-content .fl-col-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* WHOI column widths (desktop): 30 / 20 / 20 / 30 */
footer.fl-builder-content .fl-node-1uv079cxa8pz { width: 30%; }
footer.fl-builder-content .fl-node-0mw2ctv5ajxh { width: 20%; }
footer.fl-builder-content .fl-node-msq6b9pjayle { width: 20%; }
footer.fl-builder-content .fl-node-75w4ro1czeu0 { width: 30%; }
footer.fl-builder-content .fl-node-loamcupswg26 { width: 100%; }

footer.fl-builder-content .fl-col-content {
    padding: 0 15px;
    box-sizing: border-box;
}

/* Photo / logo */
footer.fl-builder-content .fl-photo {
    text-align: left;
}
footer.fl-builder-content .fl-photo-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Rich text base */
footer.fl-builder-content .fl-rich-text p {
    margin: 0 0 10px;
}
footer.fl-builder-content .fl-rich-text p:last-child {
    margin-bottom: 0;
}

/* Address block: light gray-blue, 12px, indented under the logo */
footer.fl-builder-content .fl-node-d38nmrhl6vyw,
footer.fl-builder-content .fl-node-d38nmrhl6vyw p,
footer.fl-builder-content .fl-node-d38nmrhl6vyw * {
    color: #b8bcc2;
    font-size: 12px;
}
footer.fl-builder-content .fl-node-d38nmrhl6vyw {
    margin: 12px 0 10px 98px;
}

/* Footer link blocks (Research / Around WHOI / Academics / Resources) */
footer.fl-builder-content .fl-node-jvem9naoduh1,
footer.fl-builder-content .fl-node-jvem9naoduh1 *,
footer.fl-builder-content .fl-node-314c6hnjse5r,
footer.fl-builder-content .fl-node-314c6hnjse5r *,
footer.fl-builder-content .fl-node-5vex2jnkiwzl,
footer.fl-builder-content .fl-node-5vex2jnkiwzl *,
footer.fl-builder-content .fl-node-b0fsr2ncgomx,
footer.fl-builder-content .fl-node-b0fsr2ncgomx * {
    color: #b8bcc2;
    font-size: 14px;
    line-height: 1.5;
}

/* Privacy disclaimer below newsletter */
footer.fl-builder-content .fl-node-58dbnivrogaz,
footer.fl-builder-content .fl-node-58dbnivrogaz * {
    font-size: 10px;
}
footer.fl-builder-content .fl-node-58dbnivrogaz {
    margin-top: 10px;
}

/* Bottom legal row */
footer.fl-builder-content .fl-node-ac21te3qoy0z,
footer.fl-builder-content .fl-node-ac21te3qoy0z p,
footer.fl-builder-content .fl-node-ac21te3qoy0z * {
    color: #b8bcc2;
    font-size: 12px;
    text-align: left;
}
footer.fl-builder-content .fl-node-ac21te3qoy0z {
    margin: 10px 0 0;
}

/* Section headings (Research / Around WHOI / Academics / Resources) */
footer.fl-builder-content .fl-heading {
    padding: 0 !important;
    margin: 0 !important;
}
footer.fl-builder-content .fl-node-56jqvytb2loh,
footer.fl-builder-content .fl-node-5scth92zaqr1,
footer.fl-builder-content .fl-node-6eqcsfbwxda1,
footer.fl-builder-content .fl-node-agxuvo47zl9j {
    font-size: 14px !important;
    text-align: left;
    text-transform: uppercase;
    color: #ffffff !important;
    font-weight: 700;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}
/* First heading in each column shouldn't have top margin */
footer.fl-builder-content .fl-col-content > h4.fl-heading:first-child,
footer.fl-builder-content .fl-col-content > h3.fl-heading:first-child {
    margin-top: 0 !important;
}

/* Newsletter heading + Connect heading */
footer.fl-builder-content .fl-node-5lhxtnarkcg4,
footer.fl-builder-content .fl-node-icwn9ax3vtz0 {
    color: #ffffff !important;
    text-align: left;
    font-size: 18px !important;
    font-weight: 700;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}
footer.fl-builder-content .fl-col-content > h3.fl-heading:first-child {
    margin-top: 0 !important;
}

/* All links in footer — light gray-blue, hover brightens to white */
footer.fl-builder-content a {
    color: #b8bcc2;
    text-decoration: none;
    transition: color 0.15s ease;
}
footer.fl-builder-content a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* GIVE NOW button — cyan pill */
footer.fl-builder-content .fl-node-xceoyzbinmud {
    margin: 16px 0 0 100px;
}
footer.fl-builder-content .fl-node-xceoyzbinmud,
footer.fl-builder-content .fl-node-xceoyzbinmud .fl-button-wrap {
    text-align: left;
}
footer.fl-builder-content .fl-node-xceoyzbinmud a.fl-button {
    display: inline-block;
    background-color: #00a9e0;
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1;
    padding: 10px 14px;
    border: 1px solid #009dd4;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 500;
    transition: background-color 0.15s ease;
}
footer.fl-builder-content .fl-node-xceoyzbinmud a.fl-button:hover {
    background-color: #008fc2;
    border-color: #008fc2;
    text-decoration: none !important;
}
footer.fl-builder-content .fl-node-xceoyzbinmud a.fl-button:hover,
footer.fl-builder-content .fl-node-xceoyzbinmud a.fl-button:hover .fl-button-text {
    color: #ffffff !important;
}
footer.fl-builder-content .fl-node-xceoyzbinmud .fl-button-text {
    color: #ffffff;
}

/* Social icons (.footerIcons) — 20px max height, 24px gap */
footer.fl-builder-content .footerIcons {
    margin-top: 10px;
}
footer.fl-builder-content .footerIcons a {
    display: inline-block;
    vertical-align: middle;
}
footer.fl-builder-content .footerIcons a img {
    max-height: 20px;
    width: auto;
    margin-right: 24px;
    vertical-align: middle;
}
footer.fl-builder-content .footerIcons a:last-child img {
    margin-right: 0;
}
footer.fl-builder-content .footerIcons a:hover img {
    opacity: 0.8;
}

/* HubSpot newsletter form inside footer — dark theme tweaks */
footer.fl-builder-content .hbspt-form .hs-input {
    background: #ffffff;
    color: #041E42;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    padding: 8px 10px;
    font-size: 14px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}
footer.fl-builder-content .hbspt-form .hs-button {
    background-color: #00a9e0;
    color: #ffffff;
    border: 1px solid #009dd4;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
}
footer.fl-builder-content .hbspt-form .hs-button:hover {
    background-color: #008fc2;
    border-color: #008fc2;
}
footer.fl-builder-content .hbspt-form .hs-form-field > label {
    color: #b8bcc2;
    font-size: 12px;
}

/* Suppress BB editor-only chrome if it leaks through */
footer.fl-builder-content .fl-builder-row-settings,
footer.fl-builder-content .fl-builder-edit {
    display: none;
}

/* Responsive — match WHOI's 767px breakpoint */
@media (max-width: 767px) {
    footer.fl-builder-content .fl-col-group {
        flex-direction: column;
    }
    footer.fl-builder-content .fl-col,
    footer.fl-builder-content .fl-node-1uv079cxa8pz,
    footer.fl-builder-content .fl-node-0mw2ctv5ajxh,
    footer.fl-builder-content .fl-node-msq6b9pjayle,
    footer.fl-builder-content .fl-node-75w4ro1czeu0 {
        width: 100%;
    }
    footer.fl-builder-content .fl-node-d38nmrhl6vyw {
        margin-left: 20px;
    }
    footer.fl-builder-content .fl-node-xceoyzbinmud {
        margin-left: 20px;
    }
    footer.fl-builder-content .fl-photo {
        text-align: center;
    }
}

/* Old .whoi-footer-* class names were removed when the footer was
   replaced with the actual Beaver Builder markup from whoi.edu.
   The fl-* selectors above are now the canonical footer styles. */

/* SEO-only crawlable content layer (visually hidden, exposed to crawlers + screen readers) */
.seo-content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   CREDITS — top-bar link (see .fl-page-bar-actions near the top of
   this file) + viewport modal. The modal lives outside
   #ocean-container (position: fixed is broken inside it by the
   translateZ(0) stacking context).
   ============================================================ */
.credits-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;                     /* above header (50) and all page chrome */
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.credits-modal.open {
    display: flex;
}

.credits-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 16, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.credits-modal-panel {
    position: relative;
    width: min(843px, 92vw);
    max-height: 92vh;
    overflow-y: auto;
    padding: 32px 36px;
    background: rgba(4, 10, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(96, 165, 250, 0.15);
    animation: factFadeIn 0.25s ease-out;
}

.credits-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.credits-modal-close:hover,
.credits-modal-close:focus-visible {
    color: #fff;
    border-color: rgba(96, 165, 250, 0.45);
}

.credits-modal-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 6px;
}

.credits-modal-subtitle {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 22px;
}

.credits-group {
    margin-bottom: 22px;
}

.credits-group:last-child {
    margin-bottom: 0;
}

.credits-group-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(120, 200, 255, 0.85);
    margin-bottom: 10px;
}

.credits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .credits-list li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }

.credits-list li:last-child {
    border-bottom: none;
}

.credits-name {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.credits-role {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
}

/* Special acknowledgment line — set apart from the name lists by a
   divider, centered and slightly emphasized. */
.credits-acknowledgment {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.55;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
    .credits-modal-panel {
        padding: 24px 20px;
    }

    .credits-modal-title {
        font-size: 1.3rem;
    }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Companion to VIEWPORT_SCALE in src/js/main.js. The JS handles depth
   scaling (page height, creature/background positions); CSS handles
   layout, chrome, and font scaling.

   - ≤ 480px : phones (portrait) — JS scale 0.50
   - ≤ 768px : phones (landscape) + small tablets — JS scale 0.60
   - ≤ 1024px: tablets — JS scale 0.75
   - ≤ 1440px: laptops — JS scale 0.90
   - > 1440px: desktops — JS scale 1.00 (base styles)
   ============================================================ */

/* Safety net: no creature/fact image may overflow its viewport */
.creature-image,
.fact-image {
    max-width: 95vw;
    height: auto;
}

/* Continental Shelf: was hardcoded to 8362px tall — convert to natural
   aspect ratio so it scales sensibly on narrow viewports. */
.continental-shelf-bg {
    height: auto;
}

/* === Tablet and below (≤ 1024px) === */
@media (max-width: 1024px) {
    .splash-title,
    #intro-title {
        font-size: clamp(3rem, 11vw, 8.8rem);
    }

    #zone-nav {
        gap: 0.5rem;
        font-size: 0.875rem;
    }

    /* Counter-scale the creature label/flyout so TEXT stays full size while
       the marker artwork shrinks (marker is scale(0.7) at this width —
       0.7 × 1.429 ≈ 1.0 net). Keep in sync with the "Responsive creature
       scaling" blocks mid-file. */
    .creature-marker .creature-name {
        transform: translateX(-50%) scale(1.429);
        transform-origin: top center;
    }
}

/* === Phone-large + small tablet portrait (≤ 768px) === */
@media (max-width: 768px) {
    /* Global mobile text scale-up. Images compress via VIEWPORT_SCALE in
       main.js, but text must stay readable, so it scales the OTHER way.
       Nearly all marker/card text is rem-based — including the per-entry
       inline fontSize overrides from creatures.json, which media queries
       cannot override directly — so raising the root font size enlarges
       every one of them proportionally in a single rule. */
    html {
        font-size: 17px;
    }

    /* WHOI page bar — stacked layout: full-width logo row, then a
       centered credits/give row below it. The bar also stops pinning on
       mobile (position: static overrides the base sticky). */
    .fl-page-bar {
        position: relative;
    }

    .fl-page-bar .fl-page-bar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fl-page-bar .col-md-6.col-sm-6.text-left {
        max-width: 100%;
    }

    .fl-page-bar-actions {
        justify-content: center;
        width: 100%;
    }

    /* With the bar no longer pinned, the pinned main header moves to the
       very top (its desktop top: 40px exists only to clear the sticky bar).
       Pad the content below the device status bar / notch so the top row of
       each readout (ft / ATM / °F) isn't tucked underneath. safe-area-inset
       is 0 on devices without a notch (needs viewport-fit=cover in the meta),
       so the small base keeps a consistent gap everywhere. Tune the base if
       more breathing room is wanted. */
    #main-header.is-pinned {
        top: 0;
        padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
        width: calc(100% - 32px);
    }

    /* Depth ruler — pull the vertical line in to make room on small screens */
    #depth-ruler::before {
        left: 50px;
    }

    #hs-web-interactives-top-anchor {
        width: calc(100% - 32px);
    }

    #hs-web-interactives-bottom-anchor {
        width: calc(100% - 32px);
    }

    /* Counter-scale the creature label/flyout: marker is scale(0.7) here,
       so 0.7 × 1.5 ≈ 1.0 net — creature text renders at ~full size while
       the artwork stays small.
       --card-shift (opened card) and --rest-shift (resting label) are
       tooltip-style viewport clamps set by JS (clampCreatureCard /
       layoutMobileCreatures in main.js). They sit AFTER the scale in the
       transform list, so 1px of shift = ~1px on screen. Only one is ever
       non-zero at a time (open clears --rest-shift; close clears --card-shift). */
    .creature-marker .creature-name {
        transform: translateX(-50%) scale(1.5)
                   translateX(calc(var(--card-shift, 0px) + var(--rest-shift, 0px)));
        transform-origin: top center;
    }

    /* Edge-smart resting labels: anchor the label to the screen-near edge so
       the counter-scale grows it TOWARD center, never further off-screen.
       Anchor classes are assigned in JS (layoutMobileCreatures) from each
       creature's on-screen X. */
    .creature-marker.anchor-left .creature-name {
        left: 0;
        transform: translateX(0) scale(1.5)
                   translateX(calc(var(--card-shift, 0px) + var(--rest-shift, 0px)));
        transform-origin: top left;
        text-align: left;
    }

    .creature-marker.anchor-right .creature-name {
        left: auto;
        right: 0;
        transform: translateX(0) scale(1.5)
                   translateX(calc(var(--card-shift, 0px) + var(--rest-shift, 0px)));
        transform-origin: top right;
        text-align: right;
    }

    /* Resting (closed) labels wrap to 2 lines with a narrow cap, so boxes are
       physically smaller and collide/overflow less. */
    .creature-marker:not(.active) .creature-name {
        white-space: normal;
        max-width: 150px;
        line-height: 1.15;
    }

    .creature-marker:not(.active) .creature-name-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Opened card: full visual size, capped to the viewport, and always
       re-centered + clamped (overriding any anchor class on the marker). */
    .creature-marker.active .creature-name {
        left: 50%;
        max-width: min(280px, 75vw);
        transform: translateX(-50%) scale(1.5)
                   translateX(calc(var(--card-shift, 0px) + var(--rest-shift, 0px)));
        transform-origin: top center;
        text-align: center;
    }

    /* Px-based text that doesn't respond to the root font-size bump */
    .creature-name {
        font-size: 12px;
    }

    .creature-name-text {
        font-size: 14px;
    }

    .flyout-description {
        font-size: 12px;
        font-weight: 400;
    }

    .flyout-source,
    .fact-source {
        font-size: 10px;
    }

    .milestone-source {
        font-size: 13px;
    }

    /* Hide zone-nav on mobile — too cramped; users scroll to zones via the
       depth ruler and back-to-top button. */
    #zone-nav {
        display: none;
    }

    /* Tighten header padding */
    #main-header {
        padding: 6px 10px;
    }

    /* Mobile header row: #zone-nav is display:none here, leaving the depth
       HUD and the pressure/temp/toggle group. space-between pins the HUD to
       the left edge and that group to the right edge. flex-wrap is a safety
       net (drops the right group to a second line rather than overflowing on
       an unusually narrow/large-text device); the gap is the min spacing
       when wrapped. */
        #main-header > div {
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
        }

    /* Drop the audio toggle on mobile to save room. */
    #audio-toggle {
        display: none;
    }

    #main-header .gap-3 {
        gap: 6px;
    }

    #depth-hud {
        gap: 6px;
    }

    /* Shrink HUD odometers */
    .digit-container {
        font-size: 14px;
        min-width: 14px;
        padding: 2px 1px;
    }

    .digit-container.unit-small {
        min-width: auto;
    }

    .digit-small {
        font-size: 10px;
    }

    /* Day/night intro toggle — smaller */
    .day-night-toggle {
        width: 80px;
        height: 80px;
    }

    #day-night-toggle-intro {
        top: 1rem;
        right: 1rem;
    }

    /* Header toggle */
    #day-night-toggle-header {
        width: 48px;
        height: 48px;
    }

    #day-night-toggle-header .toggle-icon {
        width: 70px !important;
        height: 70px !important;
    }

    .toggle-icon {
        width: 180px;
        height: 180px;
    }

    /* Audio toggle stays small — no override needed */

    /* Character chooser — smaller icons, repositioned to avoid header overlap */
    #character-chooser {
        top: 90px;
    }

    .char-icon-img {
        width: 60px;
        height: 60px;
    }

    /* Character display — smaller avatar */
    #character-avatar,
    .beach-ball-svg {
        width: 70px;
        height: 70px;
    }

    /* Back-to-top + jump-to-bottom buttons */
    #back-to-top,
    #jump-to-bottom {
        width: 44px;
        height: 44px;
        right: 16px;
    }

    #jump-to-bottom {
        bottom: 16px;
    }

    #back-to-top {
        bottom: 72px;
    }

    /* Splash + intro typography */
    .splash-subtitle {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .splash-title,
    #intro-title {
        font-size: clamp(2.5rem, 14vw, 5rem);
        margin-bottom: 1.5rem;
    }

    .loading-text {
        font-size: 0.75rem;
    }

    /* Progress bar narrower */
    .progress-bar-container {
        width: 200px;
    }

    /* Spectrum column — fits in tighter header */
    .spectrum-column {
        display: none;
    }
}

/* === Very small phones (≤ 480px) === */
@media (max-width: 480px) {
    /* Slightly stronger text scale-up — images are at half scale here
       (VIEWPORT_SCALE 0.5), so text needs the extra step. */
    html {
        font-size: 18px;
    }

    .fact-marker {
        display: none;
    }


    .digit-container {
        font-size: 12px;
        min-width: 12px;
    }
    .zone-marker .zone-content {
        display: none;
    }
    #main-header.is-pinned {
        top: 0;
        padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
        width: 100%;
    }
    #intro-section {
        top: 20px;
        padding-top: 20vh;
        justify-content: start;
        height: calc(100vh + 50px);
        overflow-x: hidden;
    }

    #back-to-top, #jump-to-bottom {
        display: none;
    }

        #main-header {
            padding: 4px 6px;
        }

        .splash-title,
        #intro-title {
            font-size: clamp(2rem, 16vw, 3rem);
            margin-bottom: 1rem;
        }

        .char-icon-img {
            width: 48px;
            height: 48px;
        }

        #character-chooser {
            top: 80px;
            padding: 6px;
        }
        /* Pressure + temp columns get tighter */
        #main-header .pressure-row,
        #main-header .temp-row {
            gap: 1px;
        }

        #character-display {
            left: 0.4rem;
        }

        #character-display {
            display: none;
        }

        #character-chooser {
            display: none;
        }

        .ruler-tick {
            left: 18px;
            width: 10px;
        }

        #depth-ruler::before {
            left: 15px;
        }

        .ruler-label {
            left: 28px;
        }

        .zone-marker .zone-label {
            font-size: 1rem;
        }

        .zone-marker .zone-description {
            font-size: 0.8rem;
        }

        .zone-marker .zone-description {
            display: none;
            position: relative;
        }

        .zone-marker {
            position: relative;
            margin-top: -230px;
        }

        .creature-name {
            max-width: 200px;
        }

        .creature-marker.active .creature-name-text {
            font-size: 18px;
        }
    }

/* === No-hover devices: kill stuck hover states === */
@media (hover: none) {
    .day-night-toggle:hover {
        transform: none;
    }
    .day-night-toggle:hover .toggle-icon {
        transform: none;
    }
    .audio-toggle:hover {
        transform: none;
    }
    #back-to-top:hover,
    #jump-to-bottom:hover {
        transform: none;
    }
    #scroll-indicator .scroll-arrow:hover {
        transform: none;
        color: rgba(255, 255, 255, 0.9);
    }
    footer.fl-builder-content a:hover,
    footer.fl-builder-content .fl-node-xceoyzbinmud a.fl-button:hover,
    footer.fl-builder-content .footerIcons a:hover img {
        background: inherit;
        color: inherit;
        text-decoration: none;
        opacity: 1;
    }
}

/* === Reduced motion preference === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .splash-action .scroll-arrow,
    #scroll-indicator .scroll-arrow {
        animation: none;
    }
}