/* ==============================
   CSS VARIABLES & ROOT CONFIGURATION
   ============================== */
/* Victory cutscene overlay */
#cutscene-overlay {
  position: fixed;
  inset: 0;
  display: none; /* toggled via JS */
  opacity: 0;
  transition: opacity 2500ms ease-out;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 10000; /* above theatre/gallery */
}
#victory-video.cutscene {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill for any ratio */
  background: #000;
}

/* Code clue and eye icon on the final photobook page.
   Both share one position so the eye lands exactly where the code was. */
/* Selector must out-specify `.photo-page img` (styles.css ~1402), which sets
   display:block + width:100% and would otherwise force these icons visible. */
.photo-page img.final-page-icon {
  position: absolute;
  left: 47%;              /* nudged 1% to the right */
  transform: translateX(-50%);
  bottom: 23%;            /* lowered by an additional 1% */
  width: 10%;             /* half the previous size */
  max-width: 80px;
  opacity: 0.4;           /* ~60% transparent */
  display: none; /* revealed via JS at the right beat */
  z-index: 5; /* above SVG overlay */
  pointer-events: none;
}
.photo-page img.final-page-icon.show {
  display: block;
}
/* Code clue only: sized up slightly so it doesn't get missed/misread at the
   11th-photo beat. The eye icon keeps the base size above. */
.photo-page img.final-page-icon.code-icon {
  width: 13%;
  max-width: 104px;
}

/* End-of-game scrollable gallery */
#end-gallery-overlay {
  position: fixed;
  inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 800ms ease-out;
  z-index: 1200; /* above radio/table, below cutscene */
  pointer-events: none;
}
#end-gallery-overlay.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
#end-gallery {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 64px 5vw 96px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.end-gallery-section {
  width: 100%;
  display: grid;
  gap: 32px;
  justify-content: center;
}
#end-gallery-portrait {
  /* Portraits: flex rows so the last row always centers nicely */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
#end-gallery-landscape {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.end-gallery-item {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  transition:
    opacity 900ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 900ms cubic-bezier(0.19, 1, 0.22, 1);
}
/* Until its image has loaded an item has zero height, which would collapse it to
   no area - IntersectionObserver never reports a zero-area target as intersecting,
   so the loader would deadlock and nothing would ever load. Reserving space also
   stops the list from jumping around as images arrive during a fast scroll. */
.end-gallery-item:not(.loaded) {
  min-height: 50vh;
}
.end-gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
}
.end-gallery-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* Make landscape items larger on desktop */
#end-gallery-landscape .end-gallery-item {
  max-width: 900px;
}

@media (max-width: 768px) {  
  #end-gallery {
    padding: 48px 4vw 80px;
    gap: 24px;
    display: flex;
    flex-direction: column;
  }
  #end-gallery-portrait,
  #end-gallery-landscape {
    display: flex;
    flex-direction: column;
  }
}

/* Global smooth scrolling */
html, body {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  background-color: #000;
}

/* Mobile-specific theatre tweaks for end-gallery */
@media (max-width: 768px) {
  #theatre-overlay.from-end-gallery #theatre-content {
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    gap: 12px;
    padding: 16px;
    align-items: center;
    justify-content: center; /* center vertically */
  }
  #theatre-overlay.from-end-gallery #theatre-photo {
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    max-width: 92vw;
    /* Same cap with or without a caption, so every end-gallery photo reads at a
       consistent size instead of the captioned ones looking smaller. */
    max-height: 55vh;
    margin: 0 auto;
  }
  /* Empty end-gallery descriptions are hidden at every width now - see the
     `.from-end-gallery:not(.has-caption)` rule near the end of this file. */
}
:root {
    /* Color Palette */
    --glow-white: rgba(255, 255, 255, 0.8);
    --glow-yellow: rgba(255, 255, 0, 0.7);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(255, 255, 255, 0.3);
    
    /* Transition Durations */
    --transition-fast: 0.1s;
    --transition-medium: 0.2s;
    --transition-slow: 0.5s;
    --transition-page: 0.4s;
    
    /* Drop Shadow Effects */
    --glow-small: drop-shadow(0 0 6px var(--glow-white));
    --glow-medium: drop-shadow(0 0 10px white);
    --glow-large: drop-shadow(0 0 12px rgba(255, 250, 205, 1)) drop-shadow(0 0 24px rgba(255, 224, 102, 1));
    
    /* Sizing Constants */
    --button-size: 31.26px;
    --power-button-size: 180px;
}

/* ==============================
   BASE LAYOUT & BODY
   ============================== */
body {
    background: url('assets/frequencies/Table.webp') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    overflow: hidden; /* Prevents scrollbars */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body.intro-lock {
    overflow: hidden;
    touch-action: none;
}

#intro-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #f0f0f0;
    z-index: 10001;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

#intro-overlay.show {
    display: flex;
}

#intro-overlay .intro-content {
    max-width: 360px;
}

#intro-overlay .intro-title {
    font-size: 28px;
    letter-spacing: 1px;
}

#intro-overlay .intro-text {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.85;
}

#intro-overlay .intro-description {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
    white-space: pre-line;
    opacity: 0.75;
}

#intro-overlay .intro-tip {
    margin-top: 18px;
    font-size: 12px;
    font-style: italic;
    opacity: 0.7;
    text-align: center;
}

#intro-progress {
    margin-top: 16px;
    font-size: 13px;
    opacity: 0.75;
}

#intro-hint {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
}

@media (min-width: 769px) {
    #intro-overlay .intro-title {
        font-size: 31px;
    }
    #intro-overlay .intro-text {
        font-size: 16px;
    }
    #intro-overlay .intro-description {
        font-size: 15px;
    }
    #intro-overlay .intro-tip {
        font-size: 14px;
    }
    #intro-progress {
        font-size: 15px;
    }
    #intro-hint {
        font-size: 14px;
    }
}

/* ==============================
   KEYFRAME ANIMATIONS
   ============================== */

/* General Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* First-Time Glow Effect (Slow & Subtle) */
@keyframes subtleGlow {
    0% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); }
    50% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)); }
    100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0)); }
}

/* Fast Glow Effect for Hover */
@keyframes fastGlow {
    0% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)); }
    100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
}

/* Radio Case Glow Animation */
@keyframes radioGlowPulse {
    0% { filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0)); }
    50% { filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.7)); }
    100% { filter: drop-shadow(0px 0px 5px rgba(255, 255, 0, 0)); }
}

@keyframes powerHintPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25)); }
    50% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.75)); }
}

@keyframes photobookHintPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.28)); }
    50% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.7)); }
}

@keyframes tapHintPulse {
    0%, 100% { opacity: 0.2; transform: scale(0.98); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

@keyframes slotPop {
    0% { transform: scale(0.96); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ==============================
   SVG PHOTO OVERLAY TRANSFORMS
   ============================== */

/* Default: bottom-center pivot for all slots */
svg.photo-overlay g[data-slot-group] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.15s ease-in-out;
}

/* Override for bottom-row slots — pivot at top middle instead */
svg.photo-overlay g[data-slot-group="photo-slot-3"],
svg.photo-overlay g[data-slot-group="photo-slot-12"],
svg.photo-overlay g[data-slot-group="photo-slot-21"],
svg.photo-overlay g[data-slot-group="photo-slot-30"],
svg.photo-overlay g[data-slot-group="photo-slot-37"],
svg.photo-overlay g[data-slot-group="photo-slot-41"] {
  transform-origin: 50% 0%;
}

/* ==============================
   RADIO PLAYER CONTAINER & LAYOUT
   ============================== */

/* Wrapper to Scale Everything Proportionally */
#radio-wrapper {
    width: 900px;
    height: 506.25px; /* 16:9 aspect ratio of 900px */
    position: relative;
    left: 0%;
    top: 0%;
    transform: translate(0%, -50%);
}

/* Main Radio Container */
#radio-container {
    width: 200%;
    height: 200%;
    position: relative;
    top: 0%;
    left: -50%;
    background: url('assets/frequencies/FreqCase.webp') no-repeat center;
    background-size: contain;
    display: flex;
    justify-content: center;
    pointer-events: none; /* Disable pointer on the oversized container */
}

/* Clickable overlay for closed radio */
#radio-container::before {
    content: '';
    position: absolute;
    top: 51%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 40%;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
}

/* Remove clickable overlay after radio is opened */
#radio-container.opened::before {
    display: none;
}

/* Radio Glow Effect */
.radioGlow {
    animation: radioGlowPulse 3s infinite;
    filter: drop-shadow(0px 0px 10px var(--glow-yellow));
}

/* Clickable area for closed radio - restricts pointer to visible radio only */
.radioGlow::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    cursor: pointer;
    z-index: 1;
}

/* Opened Radio */
#radio-open {
    display: none;
    opacity: 0;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: url('assets/frequencies/FreqOff.webp') no-repeat center;
    background-size: contain;
    transition: opacity 0.4s ease-in-out;
    pointer-events: auto;
}

/* ==============================
   RADIO COMPONENTS (BATTERIES, DISPLAY, etc.)
   ============================== */

/* Empty Case (Fades in) */
#empty-case {
    display: none;
    position: absolute;
    left: 70%;
    bottom: 40%;
    width: 480px;
    height: auto;
    animation: fadeIn var(--transition-slow) ease-out forwards;
    /* Opens the audio settings panel - same affordance as the batteries */
    cursor: pointer;
    pointer-events: auto;
    transition: transform var(--transition-medium), filter var(--transition-medium);
}

#empty-case:hover {
    transform: scale(1.05);
    filter: var(--glow-medium);
}

/* Batteries */
#batteries {
    display: none;
    opacity: 0;
    position: absolute;
    left: 20%;
    bottom: 40%;
    width: 120px; /* fixed size to match fixed radio */
    height: auto;
    cursor: pointer;
    pointer-events: auto;
    transition: transform var(--transition-medium), filter var(--transition-medium), opacity var(--transition-slow) ease-in-out;
    animation: fadeIn var(--transition-slow) ease-out forwards;
}

#batteries:hover {
    transform: scale(1.1);
    filter: var(--glow-medium);
}

/* Frequency Display */
#display {
    position: absolute;
    top: 0%;
    left: 50.2%;
    transform: translateX(-50%);
    width: 100%;
    aspect-ratio: 16 / 9;
}

#display img {
    width: 100%;
    height: auto;
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

#display-img {
    position: relative;
    transform: translateX(-0.4px); /* sub-pixel precision for fine-tuning */
}

/* ==============================
   CONTROL BUTTONS (TUNE, POWER)
   ============================== */

/* Tuning Buttons */
#tune-up-btn, #tune-down-btn {
    position: absolute;
    width: 31.14px; /* 1.73% of 1800px container */
    height: auto;
    cursor: pointer;
    pointer-events: auto;
    transition: filter 0.1s ease-in-out, transform 0.1s ease-in-out;
    opacity: 0; 
}

/* Remove Extra Clickable Space */
#tune-up-btn img, #tune-down-btn img {
    display: block;
    width: 100%;
    object-fit: contain;
    padding: 0;
    margin: 0;
}

/* Adjust Positioning to Match Your Radio Layout */
#tune-up-btn {
    left: 960.57px; /* 53.365% of 1800px */
    top: 457.16px; /* 45.14% of 1012.5px */
}

#tune-down-btn {
    left: 960.57px; /* 53.365% of 1800px */
    top: 494.61px; /* 48.85% of 1012.5px */
}

/* Make Buttons Fade In When Powered On */
.btn.show {
    opacity: 1;
    pointer-events: auto;
}

/* Apply the Animation */
.subtleGlow {
    animation: subtleGlow 2.5s ease-in-out forwards; /* Ensures it doesn’t suddenly cut off */
}

.hint-glow {
    animation: subtleGlow 2.8s ease-in-out infinite;
    will-change: filter;
}

/* Glow Effect on Hover */
#tune-up-btn:hover, #tune-down-btn:hover {
    filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.6));
    transition: filter 0.1s ease-in-out;
}

/* Press Animation */
#tune-up-btn:active, #tune-down-btn:active {
    transform: scale(0.95);
}

/* Power Button (Hidden Initially, Fades in on First Battery Install) */
#power-btn {
    position: absolute;
    right: 44.96%;
    bottom: 69.6%;
    width: 9%; /* scales with radio container */
    height: auto;
    cursor: pointer;
    opacity: 0; 
    pointer-events: none;
    transition: opacity 0.5s ease-out, transform 0.2s ease-in-out;
}

/* Power Button Appears Smoothly */
#power-btn.show {
    opacity: 1; 
    pointer-events: auto; 
    transform: scale(1);
}

/* Glow Effect When Hovering Over Power Button */
#power-btn:hover {
    transform: scale(1);
    filter: var(--glow-medium);
}

#power-btn.final-hint {
    animation: powerHintPulse 2.4s ease-in-out infinite;
}

/* ==============================
   PHOTOBOOK BUTTON & GALLERY
   ============================== */

#open-photobook {
    position: absolute;
    top: 50%;
    left: -8%;
    width: 500px;
    height: auto;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow) ease-in-out, transform var(--transition-medium) ease-in-out, filter var(--transition-medium) ease-in-out, left 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: none;
    background: none;
    padding: 0;
    /* Promote to its own compositor layer to prevent first-time flicker */
    transform: translate3d(0, -50%, 0) rotate(45deg);
    transform-origin: center;
    will-change: left, transform, opacity;
    backface-visibility: hidden;
    z-index: 20; /* Ensure it renders above transient overlays during auto-open */
    user-select: none; /* Prevent text/element selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    outline: none; /* Remove focus outline */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    touch-action: manipulation; /* Eliminate 300ms tap delay on mobile */
}

#open-photobook:focus {
    outline: none; /* Remove focus outline */
}

#open-photobook:active {
    outline: none; /* Remove active state outline */
}

#open-photobook.final-hint img {
    animation: photobookHintPulse 2.8s ease-in-out infinite;
}

/* Slide-in animation when photobook becomes available */
@keyframes slideInFromLeft {
    from {
        /* Move from well off-screen using transform for GPU compositing */
        transform: translate3d(-40vw, -50%, 0) rotate(45deg);
        opacity: 0;
    }
    to {
        transform: translate3d(0, -50%, 0) rotate(45deg);
        opacity: 1;
    }
}

#open-photobook.slide-in {
    animation: slideInFromLeft 1.1s cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

/* Re-entry slide-in (after closing gallery) — revert to classic left-based motion */
@keyframes slideInFromLeftReenter {
    from { left: -35%; }
    to   { left: -8%; }
}

#open-photobook.slide-in-reenter {
    animation: slideInFromLeftReenter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Slide-out animations (transform-based + subtle fade) */
@keyframes slideOutToLeft {
    from {
        transform: translate3d(0, -50%, 0) rotate(45deg);
        opacity: 1;
    }
    to {
        transform: translate3d(-40vw, -50%, 0) rotate(45deg);
        opacity: 0.0;
    }
}

#open-photobook.slide-out {
    animation: slideOutToLeft 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
    pointer-events: none;
}

/* Variant: if user clicks while hovering (cover slightly extended + scaled) */
@keyframes slideOutToLeftFromHover {
    from {
        transform: translate3d(0, -50%, 0) rotate(45deg) scale(1.02);
        opacity: 1;
    }
    to {
        transform: translate3d(-40vw, -50%, 0) rotate(45deg);
        opacity: 0.0;
    }
}

#open-photobook.slide-out-from-hover {
    animation: slideOutToLeftFromHover 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
    pointer-events: none;
}

#open-photobook img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none; /* Prevent image selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none; /* Prevent image dragging in Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* Reveal when a memory is found */
#open-photobook.show {
    opacity: 1;
    pointer-events: auto !important; /* Force override */
    left: -8%; /* Set final position after animation */
}

/* Keep a consistent computed 'left' during slide-in to avoid a one-frame jump.
   Transform now drives the visual slide; left remains static. */
#open-photobook.show.slide-in {
    left: -8%;
    pointer-events: none !important; /* Disable interaction during slide-in to prevent hover queue */
}

/* Disable hover transitions entirely while any animation is running */
#open-photobook.animating {
    transition: none !important;
}

/* Photobook Open Button Glow Effect - only apply when NOT animating */
#open-photobook.show:hover:not(.slide-in):not(.slide-in-reenter):not(.slide-out):not(.animating) {
    left: 0%;
    transform: translateY(-50%) rotate(45deg) scale(1.02);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

/* Gallery radio "Back to Radio" button (mirrors photobook cover from the right) */
#gallery-radio-btn {
    position: absolute;
    top: 50%;
    right: -38%;
    width: 1800px;
    height: auto;
    cursor: default;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--transition-slow) ease-in-out,
        right 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: none;
    background: none;
    padding: 0;
    transform: translate3d(0, -50%, 0);
    transform-origin: center;
    will-change: right, transform, opacity;
    backface-visibility: hidden;
    z-index: 30;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}


#gallery-radio-btn .gallery-radio-art {
    position: relative;
    width: 100%;
    height: auto;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform var(--transition-medium) ease-in-out, filter var(--transition-medium) ease-in-out;
    will-change: transform, filter;
    pointer-events: none;
}

#gallery-radio-btn .gallery-radio-hitbox,
.gallery-radio-hitbox {
    position: absolute;
    width: 16%;
    height: 20%;
    left: 42%;
    top: 40%;
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: 60;
    cursor: pointer;
    background: transparent;
    pointer-events: auto;
}

#gallery-radio-base {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* Display overlay for the miniature radio screen */
#gallery-display {
    position: absolute;
    top: 0%;
    left: 50.2%;
    transform: translateX(-50%);
    width: 100%;
    aspect-ratio: 16 / 9;
    pointer-events: none;
}

#gallery-display img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

/* Slide-in from the right when the photobook gallery opens */
@keyframes gallerySlideInFromRight {
    from {
        transform: translate3d(40vw, -50%, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, -50%, 0);
        opacity: 1;
    }
}

#gallery-radio-btn.gallery-slide-in {
    animation: gallerySlideInFromRight 1.1s cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

/* Slide-out to the right when closing the gallery */
@keyframes gallerySlideOutToRight {
    from {
        transform: translate3d(0, -50%, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(40vw, -50%, 0);
        opacity: 0;
    }
}

#gallery-radio-btn.gallery-slide-out {
    animation: gallerySlideOutToRight 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
    pointer-events: none;
}

/* Variant: clicked while hovering (slightly extended) */
@keyframes gallerySlideOutToRightFromHover {
    from {
        transform: translate3d(0, -50%, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(40vw, -50%, 0);
        opacity: 0;
    }
}

#gallery-radio-btn.gallery-slide-out-from-hover {
    animation: gallerySlideOutToRightFromHover 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
    pointer-events: none;
}

#gallery-radio-btn.show {
    opacity: 1;
    right: -38%;
}

/* Keep a consistent computed 'right' during slide-in */
#gallery-radio-btn.show.gallery-slide-in {
    right: -38%;
    pointer-events: none;
}

/* Disable hover transitions while any animation is running */
#gallery-radio-btn.animating {
    transition: none !important;
}

/* Hover behaviour mirrors the photobook cover but on the right side */
#gallery-radio-btn.show.hovered:not(.gallery-slide-in):not(.gallery-slide-out):not(.gallery-slide-out-from-hover):not(.animating) {
    right: -30%;
}

#gallery-radio-btn.show.hovered:not(.gallery-slide-in):not(.gallery-slide-out):not(.gallery-slide-out-from-hover):not(.animating) .gallery-radio-art {
    transform: rotate(-45deg) scale(1.02);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

#gallery-radio-btn.gallery-slide-out-from-hover .gallery-radio-art {
    transform: rotate(-45deg) scale(1.02);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

/* Show Photobook (Only after unlocking) */
#photobook-container.show {
    display: block;
    opacity: 1;
}

/* Page Transition Effect */
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Ensure first page is visible by default */
.page.active {
    opacity: 1;
    z-index: 10;
}

/* 🔄 Page Flipping Navigation */

/* Invisible clickable zones for immersive page navigation */
.page-nav-zone {
    position: absolute;
    left: 48%; /* Shifted left to account for photobook offset */
    transform: translateX(-50%);
    width: 90%; /* Extended width to better cover photobook edges */
    max-width: 850px; /* Larger max-width */
    height: 5%; /* Thinner zones - directly on edges */
    cursor: pointer;
    z-index: 15; /* Above pages but below close button */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: absolute;
    overflow: visible; /* allow soft fades to extend */
}

/* Centered arrow icon inside nav zones */
.page-nav-zone .nav-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    opacity: 0.8;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
    pointer-events: none; /* Let the zone capture the click */
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
    z-index: 1; /* ensure icon sits above gradient fades */
}

/* Nudge icons away from the seam so they don't sit dead-center on the edges */
#page-nav-top-zone .nav-icon {
    top: 58%; /* push a bit lower into the page */
}

#page-nav-bottom-zone .nav-icon {
    top: 62%; /* nudge slightly lower toward bottom */
}

/* Top zone for previous page */
#page-nav-top-zone {
    top: 2%;
    border-bottom: 2px solid transparent; /* kept transparent; gradient handles emphasis */
    border-radius: 18px 15px 0 0; /* Asymmetric: left 18px, right 15px */
}

/* Bottom zone for next page */
#page-nav-bottom-zone {
    bottom: 2%;
    border-top: 2px solid transparent; /* kept transparent; gradient handles emphasis */
    border-radius: 0 0 15px 18px; /* Asymmetric: right 15px, left 18px */
}

/* Clear hover feedback - obvious clickable area */
.page-nav-zone:hover {
    background-color: transparent; /* avoid bright bar across the zone */
}

.page-nav-zone:hover .nav-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

/* Remove hard line on hover; rely on soft gradient highlights below */
#page-nav-top-zone:hover { border-bottom-color: transparent; box-shadow: none; }
#page-nav-bottom-zone:hover { border-top-color: transparent; box-shadow: none; }

/* Unified rounded-rect hover surface that avoids hard seam lines */
#page-nav-top-zone::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* cover whole zone */
    pointer-events: none;
    /* Keep outer corners as before; add rounded inner corners */
    border-radius: 18px 15px 12px 12px; /* TL TR BR BL */
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.04) 100%
    );
    box-shadow: inset 0 -10px 18px rgba(255,255,255,0.14);
    z-index: 0;
    opacity: 0; /* appear only on hover */
    transition: opacity 150ms ease;
}

#page-nav-bottom-zone::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* cover whole zone */
    pointer-events: none;
    /* Add rounded inner corners while keeping outer corners */
    border-radius: 12px 12px 15px 18px; /* TL TR BR BL */
    background: linear-gradient(
        to top,
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.04) 100%
    );
    box-shadow: inset 0 10px 18px rgba(255,255,255,0.14);
    z-index: 0;
    opacity: 0; /* appear only on hover */
    transition: opacity 150ms ease;
}

/* Show the soft rounded-rect on hover */
#page-nav-top-zone:hover::after { opacity: 1; }
#page-nav-bottom-zone:hover::before { opacity: 1; }

/* Attention flash when photobook auto-opens (first time) */
@keyframes navSurfaceFlash {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.9; }
}

@keyframes navIconPulse {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.0);
        filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
        filter: drop-shadow(0 0 14px rgba(255,255,255,0.7));
    }
}

/* Triggered via JS once: adds a short flashing cue */
#page-nav-top-zone.nav-attention::after {
    opacity: 0.55;
    animation: navSurfaceFlash 900ms ease-in-out 0s 3;
}
#page-nav-bottom-zone.nav-attention::before {
    opacity: 0.55;
    animation: navSurfaceFlash 900ms ease-in-out 0s 3;
}
.page-nav-zone.nav-attention .nav-icon {
    animation: navIconPulse 900ms ease-in-out 0s 3;
}

/* Original navigation buttons - now visual indicators on the right side */
.nav-btn {
    position: absolute; /* Position relative to parent container */
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease;
    pointer-events: auto; /* Enable clicks on buttons */
    opacity: 0.7; /* More visible */
    z-index: 14; /* Below clickable zones */
    left: auto !important;
    right: -60px !important; /* Position to the right of the photobook */
    border: none;
    background: none;
    font-size: 30px;
}

/* Previous page button - right side, upper position */
#prev-page {
    top: 40% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

/* Next page button - right side, lower position */
#next-page {
    top: 60% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

/* 📷 Photo Placement (Dynamic Image Slots) */
.photo-slot {
    position: absolute;
    top: 0px; /* Adjust based on actual sleeve positions */
    left: 0px; /* Adjust based on actual sleeve positions */
    width: 480px;  /* Adjust based on actual sleeve sizes */
    height: 325px;
    background-size: cover;
    background-position: center;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Mobile-only focus cues */
.photo-slot.tap-hint::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    opacity: 0;
    animation: tapHintPulse 1.2s ease-in-out 0s 2;
    pointer-events: none;
}

.photo-slot.slot-pop {
    animation: slotPop 520ms ease-out;
}

/* Show Photos Once Collected */
.photo-slot.show {
    opacity: 1;
    display: block;
    top: 410px; /* Adjust based on actual sleeve positions */
    left: 49px; /* Adjust based on actual sleeve positions */
}

/* Glow Effect for Photo Slots */
.photo-glow {
    filter: drop-shadow(0 0 12px #fffacd) drop-shadow(0 0 24px #ffe066);
    transition: filter 0.2s;
}

/* 🔍 Click to Zoom */
.photo-slot img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

/* Click to Zoom Effect */
.photo-page img {
      pointer-events: none; /* Prevent interaction with the image */
    }

.photo-overlay {
    position: absolute; /* Position relative to the .photo-page container */
    bottom: 3%;
    left: 0;
    width: 100%; /* Match the width of the .photo-page */
    height: 100%; /* Match the height of the .photo-page */
    scale: 1;
    pointer-events: none; /* Prevent interaction with the SVG */
}

.photo-overlay image {
    transform: scale(1); /* Ensure no scaling issues */
}

/* 🏠 Back to Radio Button */
#close-photobook {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 10px 15px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out, filter 0.3s ease-in-out;
    z-index: 1100;
}

/* Glow Effect */
#close-photobook:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8));
}

/* 🏠 Back Button Always Visible */
#photobook-container.show #close-photobook {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Photobook Gallery */
#photobook-gallery {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    background-image: url('assets/frequencies/Photobook-table.webp');
    /* mobile variant applied in the media query at the end of this file */
    background-size: cover;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    user-select: none; /* Prevent selection in gallery */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ==============================
   THEATRE / READING MODE OVERLAY
   ============================== */
#theatre-overlay {
    position: fixed;
    inset: 0;
    display: flex; /* keep in flow so fade-out can animate */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6); /* stronger dim for readability */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease-out, visibility 0s linear 250ms;
    z-index: 2000; /* Above close button */
}

#theatre-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 250ms ease-out;
}

#theatre-content {
    display: flex;
    gap: 24px;
    width: min(92vw, 1300px);
    height: min(86vh, 820px);
    align-items: center;
    justify-content: flex-start; /* Desktop: anchor content to the left */
}

#theatre-photo {
    /* Desktop: consistent bounding box so photos appear uniform */
    width: min(52vw, 720px);
    height: min(78vh, 720px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: none; /* remove outline */
    opacity: 0;
    transform: scale(calc(0.9 * var(--theatre-zoom, 1)));
    transition: opacity 320ms ease-in-out, transform 320ms ease-in-out;
    cursor: default; /* closing now happens by clicking outside the photo */
    touch-action: none;
    transform-origin: center;
}

#theatre-overlay.show #theatre-photo {
    opacity: 1;
    transform: scale(calc(1 * var(--theatre-zoom, 1)));
}

#theatre-description {
    flex: 1 1 auto;
    color: #f5f5f5;
    font-size: 16px;
    line-height: 1.6;
    max-height: 86vh;
    overflow: auto;
    padding: 24px;
    display: flex;
    align-items: center;   /* vertical center */
    justify-content: center; /* horizontal center */
    text-align: center;
}

/* Block interactions on gallery while a reveal is animating */
#photobook-wrapper.busy {
    pointer-events: none;
}
/* Mobile layout: photo and description split halves.
   placement-top => photo on top half, description bottom.
   placement-bottom => photo on bottom half, description top. */
@media (max-width: 768px) {
    #theatre-content {
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        gap: 12px;
        padding: 12px;
        align-items: center;
        justify-content: center;
    }
    #theatre-photo {
        /* Center the photo within its half */
        flex: 0 0 auto;
        width: auto !important;
        height: auto !important;
        max-width: 92vw;
        max-height: 60vh;
        margin: 0 auto;
        transform: scale(calc(0.9 * var(--theatre-zoom, 1)));
    }
    #theatre-overlay.placement-top #theatre-content {
        flex-direction: column; /* photo then description */
    }
    #theatre-overlay.placement-bottom #theatre-content {
        flex-direction: column; /* keep centered on mobile */
    }
    #theatre-description {
        /* Center the text within its half */
        flex: 0 0 auto;
        width: 92vw;
        color: #fff;
        font-size: 15px;
        max-height: 28vh;
        padding: 0 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

#photobook-gallery * {
    user-select: none; /* Prevent selection of all child elements */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#photobook-gallery.show {
    opacity: 1;
}

/* Photobook Wrapper */
#photobook-wrapper {
    position: relative;
    width: 60%; /* Adjust width as needed */
    max-width: 600px; /* Limit maximum width */
    height: auto; /* Maintain aspect ratio */
    overflow: hidden;
    border-radius: 10px; /* Optional: Add rounded corners */
}

/* OFFSCREEN LOADING PAGE FOR BBOX */
.photo-page.offscreen {
    position: absolute;
    top: -9999px; /* Move the page off-screen */
    left: -9999px;
    visibility: visible; /* Ensure it is rendered */
    opacity: 0; /* Keep it invisible */
}

.photo-page {
    position: absolute;
    left: -9999px; /* Move off-screen to the left */
    top: 0;
    width: 600px;
    height: 835.390625px;
}

.photo-page.active {
    position: relative; /* or static */
    left: auto;
    top:auto;
    display:block; /* You can use display:block for the active page */
}

/* Photobook Background Images */
.photo-page img {
    width: 100%; /* Scale the background image to fit the page */
    height: auto; /* Maintain aspect ratio */
    display: block;
    background-color: transparent; /* Ensure no background color is applied */
}

.photo-slot img.placeholder {
    opacity: 0.5; /* Make the placeholder semi-transparent */
    filter: grayscale(100%); /* Apply a grayscale filter */
}

.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.photo-slot.show img {
    opacity: 1; /* Make the image fully visible when found */
    filter: none; /* Remove grayscale filter */
}

svg image[data-slot$="-overlay"] {
    pointer-events: none; /* Ensure the overlay doesn’t block interactions */
    opacity: 0.45; /* Adjust transparency for the plastic effect */
    mix-blend-mode:screen; /* Optional: Blend the overlay with the photo */
}

/* FINAL PHOTO */

.photo-slot[data-slot="final"] {
    display: none; /* Hide the slot by default */
}

.photo-slot[data-slot="final"].show {
    display: block; /* Show the slot when the 'show' class is added */
}

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

@media (max-width: 768px) {  
    html, body {
        overscroll-behavior: none;
        touch-action: none;
        width: 100%;
        height: 100%;
    }

    body {
        min-height: 100svh;
        height: 100dvh;
        background-attachment: scroll;
        -webkit-text-size-adjust: 100%;
    }

    /* Remove mobile tap highlight/focus glow on interactive elements. */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    button,
    a,
    [role="button"],
    .interactive,
    .btn,
    #open-photobook,
    #gallery-radio-btn,
    .gallery-radio-hitbox {
        outline: none;
    }
    button:focus,
    button:active,
    a:focus,
    a:active,
    [role="button"]:focus,
    [role="button"]:active {
        outline: none;
    }

    /* Prevent sticky hover/glow states on touch devices. */
    #tune-up-btn:hover,
    #tune-down-btn:hover,
    #batteries:hover,
    #power-btn:hover {
        transform: none;
        filter: none;
    }

    /* Keep power button above the case hitbox on mobile. */
    #radio-container::before {
        z-index: 1;
    }
    #radio-open {
        z-index: 2;
    }
    #power-btn {
        z-index: 3;
    }

    #photobook-gallery,
    #theatre-overlay,
    #cutscene-overlay {
        min-height: 100svh;
        height: 100dvh;
    }

    /* Reposition batteries for mobile - bottom left corner */
    #batteries {
        left: -2% !important;
        right: auto !important;
        bottom: -4% !important;
        top: auto !important;
        transform: none !important;
        width: 150px !important; /* Larger for mobile */
        z-index: 100 !important; /* Ensure they appear above everything */
    }

    #empty-case {
        left: 50% !important;
        right: auto !important;
        transform: translateX(15%) !important;
        bottom: auto !important;
        top: -140px !important; /* Keep in top corner */
    }

    /* Photobook Responsive */
    #photobook-wrapper {
        width: auto !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 0 auto !important;
        position: relative !important;
        left: auto !important;
        transform: translateY(-10%) !important;
        transform-origin: center center !important;
    }
    
    #photobook-container {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    #photobook-gallery {
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Scale down the SVG pages to fit */
    .photo-page {
        max-width: 95vw !important;
        height: auto !important;
    }
    
    #open-photobook {
        top: auto !important;
        left: 50%;
        width: 350px !important;
        bottom: -30% !important; /* position lower to avoid radio overlap */
        transform: translateX(-50%) rotate(0deg) !important;
        transform-origin: center !important;
        /* Faster, snappier fades on mobile */
        transition: opacity 250ms ease-out, filter 180ms ease-out !important;
        /* Hint that we will animate transform via WA API */
        will-change: transform, opacity !important;
    }

    /* One-time slower intro fade for first auto-open on mobile.
       Using !important so it can override the base mobile transition above. */
    #open-photobook.first-intro {
        transition: opacity 500ms ease-out, filter 180ms ease-out !important;
    }
    
    #open-photobook.slide-in {
        /* Keep desktop slide-in disabled on mobile */
        animation: none !important;
    }

    #open-photobook.show:not(.slide-in) {
        left: 50% !important;
        opacity: 1; /* allow JS inline opacity animations to take effect */
    }
    
    #open-photobook.show.slide-in {
        opacity: 1; /* allow JS inline opacity animations to take effect */
        left: 50% !important;
    }
    
    #open-photobook.show:hover:not(.slide-in):not(.slide-in-reenter):not(.slide-out):not(.animating) {
        left: 50% !important;
        filter: none !important;
    }

    #open-photobook.slide-out {
        /* Keep desktop slide-out disabled on mobile; use mobile variant below */
        animation: none !important;
    }

    /* Speed up gallery fade on mobile and promote to its own layer */
    #photobook-gallery {
        transition: none !important;
        will-change: opacity !important;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    /* Reduce motion on mobile for smoother, point-and-click feel */
    #open-photobook,
    #gallery-radio-btn,
    #gallery-radio-btn .gallery-radio-art,
    #photobook-gallery,
    #photobook-wrapper,
    #photobook,
    #close-photobook,
    #theatre-overlay,
    #theatre-photo {
        transition: none !important;
        animation: none !important;
    }

    #photobook-gallery {
        background-color: #1b1b1b;
    }

    .radioGlow,
    .subtleGlow {
        animation: none !important;
        filter: none !important;
    }

    #radio-open {
        transition: none !important;
    }

    #display img {
        height: 100% !important;
        object-fit: contain;
    }

    #empty-case {
        /* Tappable on mobile so it can open the audio settings, same as desktop.
           This was pointer-events:none, which made the settings unreachable on
           phones. Safe to enable: the case only becomes visible once the radio has
           been taken out (script.js), and #radio-container's click handler under it
           is a no-op from that point on (it early-returns when playerTakenOut).
           z-index sits above the radio layers but well below the photobook gallery
           (1200) and the settings panel itself (1500). */
        z-index: 30 !important;
        pointer-events: auto !important;
    }

    #power-btn {
        transition: none !important;
    }

    /* Mobile-specific slide animations for the photobook cover */
    @keyframes mobileSlideOutDown {
        from {
            transform: translate3d(-50%, 0, 0) rotate(0deg);
            opacity: 1;
        }
        to {
            transform: translate3d(-50%, 80vh, 0) rotate(0deg);
            opacity: 0;
        }
    }

    @keyframes mobileSlideInUp {
        from {
            transform: translate3d(-50%, 80vh, 0) rotate(0deg);
            opacity: 0;
        }
        to {
            transform: translate3d(-50%, 0, 0) rotate(0deg);
            opacity: 1;
        }
    }

    #open-photobook.slide-out-mobile {
        animation: mobileSlideOutDown 500ms cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
        will-change: transform, opacity !important;
        pointer-events: none !important;
    }

    #open-photobook.slide-in-mobile {
        animation: mobileSlideInUp 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
        will-change: transform, opacity !important;
    }

    /* Gallery radio on mobile: bottom placement, no rotation, fade-only */
    #gallery-radio-btn {
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(-66% + env(safe-area-inset-bottom)) !important;
        transform: translate3d(-50%, 0, 0) !important;
        transition: opacity 0.3s ease-in-out;
        z-index: 40;
    }

    #gallery-radio-btn.show {
        left: 50% !important;
        visibility: visible;
    }

    #gallery-radio-btn.show.gallery-slide-in {
        left: 50% !important;
    }

    #gallery-radio-btn .gallery-radio-art {
        transform: rotate(0deg) !important;
        transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
    }

    #gallery-radio-btn .gallery-radio-hitbox,
    .gallery-radio-hitbox {
        transform: rotate(0deg) !important;
        transform-origin: center !important;
    }

    #gallery-radio-btn.show.hovered:not(.gallery-slide-in):not(.gallery-slide-out):not(.gallery-slide-out-from-hover):not(.animating) .gallery-radio-art {
        transform: rotate(0deg) scale(1) !important;
        filter: none !important;
    }

    @keyframes gallerySlideInFromRight {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes gallerySlideOutToRight {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes gallerySlideOutToRightFromHover {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    #open-photobook.first-hint img {
        animation: photobookHintPulse 2.2s ease-in-out 0s 2;
    }

    #photobook-gallery {
        will-change: opacity;
    }

    #open-photobook.mobile-fade {
        transition: opacity 80ms ease-out !important;
    }

    #photobook-gallery.mobile-fade {
        transition: opacity 80ms ease-out !important;
    }

    #gallery-radio-btn.mobile-fade {
        transition: opacity 180ms ease-out !important;
    }

    .photo-slot {
        will-change: transform, opacity;
    }
}

    .page-nav {
        width: 40px;
        height: 40px;
    }

    .photo-slot {
        width: 150px;
        height: 100px;
    }







/* Photobook table background: 3840x2160 is a 31MB bitmap on a phone.
   assets/mobile/ holds a 1920x1080 copy. Desktop keeps the original. */
/* CSS backgrounds cannot go through the JS redirect in mobile-assets.js, so the
   mobile variants are selected here instead. Selectors mirror the originals so
   they match and win on source order. Desktop is unaffected. */
@media (max-width: 768px) {
    /* Must be the ID selector to match (and out-specify) the #photobook-gallery
       rule that sets the full-size background. */
    #photobook-gallery {
        background-image: url('assets/mobile/frequencies/Photobook-table.webp');
    }
    body {
        background-image: url('assets/mobile/frequencies/Table.webp');
    }
    #radio-container {
        background-image: url('assets/mobile/frequencies/FreqCase.webp');
    }
    #radio-open {
        background-image: url('assets/mobile/frequencies/FreqOff.webp');
    }
}


/* ==============================
   AUDIO SETTINGS PANEL
   Opened by clicking the empty case.
   ============================== */
#settings-panel {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1500; /* above the radio and photobook, below the cutscene */
    opacity: 0;
    transition: opacity 220ms ease-out;
}
#settings-panel.show {
    display: flex;
    opacity: 1;
}

#settings-inner {
    width: min(88vw, 380px);
    padding: 28px 26px 22px;
    border-radius: 10px;
    background: rgba(24, 22, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    color: #f1ece4;
    font-family: inherit;
    transform: translateY(10px) scale(0.98);
    transition: transform 220ms cubic-bezier(0.19, 1, 0.22, 1);
}
#settings-panel.show #settings-inner {
    transform: translateY(0) scale(1);
}

.settings-title {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    text-align: center;
}

.settings-row {
    display: grid;
    grid-template-columns: 68px 1fr 38px;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    cursor: pointer;
}
.settings-label {
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    opacity: 0.9;
}
.settings-value {
    font-size: 0.78rem;
    text-align: right;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.settings-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
    outline: none;
    cursor: pointer;
}
.settings-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #f1ece4;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.settings-row input[type="range"]::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #f1ece4;
    border: none;
    cursor: pointer;
}

.settings-close {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: transparent;
    color: #f1ece4;
    font: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 180ms ease-out, border-color 180ms ease-out;
}
.settings-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.36);
}

@media (max-width: 768px) {
    #settings-inner {
        padding: 24px 20px 18px;
    }
    /* Touch targets need more room than a mouse pointer does */
    .settings-row input[type="range"]::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }
    .settings-row {
        margin-bottom: 22px;
    }
}


/* ==============================
   END GALLERY CAPTIONS + SHARE YOUR STORY
   ============================== */
/* Descriptions are deliberately NOT rendered in the scrolling gallery - they only
   appear inside theatre mode. See #theatre-description near the end of this file. */

.share-story-title {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(241, 236, 228, 0.86);
    letter-spacing: 0.01em;
    text-align: left;
}

.share-story {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Sits inside a gallery item whose image opens theatre mode on tap; this needs
       its own pointer handling so typing never triggers the lightbox. */
    cursor: auto;
}

.share-story-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: #f1ece4;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 76px;
    transition: border-color 180ms ease-out, background 180ms ease-out;
}
.share-story-input::placeholder {
    color: rgba(241, 236, 228, 0.38);
}
.share-story-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);
}
.share-story-input:disabled {
    opacity: 0.55;
}

.share-story-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.share-story-count {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(241, 236, 228, 0.42);
    font-variant-numeric: tabular-nums;
}

.share-story-send {
    padding: 9px 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: transparent;
    color: #f1ece4;
    font: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 180ms ease-out, border-color 180ms ease-out, opacity 180ms ease-out;
}
.share-story-send:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}
.share-story-send:disabled {
    opacity: 0.35;
    cursor: default;
}

.share-story-status {
    margin: 0;
    min-height: 1.2em;
    font-size: 0.84rem;
    letter-spacing: 0.03em;
    color: rgba(241, 236, 228, 0.75);
    text-align: center;
}

/* Once sent, fold the controls away and leave only the thank-you */
.share-story.sent .share-story-input,
.share-story.sent .share-story-row {
    display: none;
}

/* Story wall: the reveal after a note is sent - a curated archive of notes from
   the people who were there. Off until STORY_WALL.enabled. Hidden until .sent,
   then .show fades it in a beat after "thank you <3". Stays hidden entirely if
   there are no entries, so it never appears as an empty frame. */
.share-story-wall {
    display: none;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.share-story.sent .share-story-wall {
    display: block;
}
.share-story.sent .share-story-wall.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.share-story-wall-title {
    margin: 0 0 10px;
    font-size: 0.84rem;
    letter-spacing: 0.03em;
    color: rgba(241, 236, 228, 0.6);
    text-align: center;
}
.share-story-wall-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 38vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}
.share-story-wall-item {
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.share-story-wall-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.share-story-wall-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 8px;
}
.share-story-wall-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(241, 236, 228, 0.82);
    white-space: pre-wrap;
    text-align: left;
}
.share-story-wall-date {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(241, 236, 228, 0.42);
}

@media (max-width: 768px) {
    .share-story-title {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }
    .share-story-input {
        /* 16px keeps iOS from zooming the viewport when the field is focused */
        font-size: 16px;
    }
    .share-story-send {
        padding: 12px 24px; /* larger touch target */
    }
    .share-story-wall-list {
        max-height: 32vh;
    }
}


/* --- The share photo glows faintly so it reads as interactive while scrolling --- */
.end-gallery-item.has-share img {
    animation: shareGlowPulse 3.6s ease-in-out infinite;
}
@keyframes shareGlowPulse {
    0%, 100% {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6),
                    0 0 14px rgba(255, 236, 214, 0.18);
    }
    50% {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6),
                    0 0 26px rgba(255, 236, 214, 0.42);
    }
}
/* Respect users who ask for less motion - keep a steady glow, drop the pulse */
@media (prefers-reduced-motion: reduce) {
    .end-gallery-item.has-share img {
        animation: none;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6),
                    0 0 20px rgba(255, 236, 214, 0.32);
    }
}

/* --- Share form inside theatre mode --- */
#theatre-share {
    display: none;
    width: min(92vw, 460px);
    margin: 18px auto 0;
    /* The photo above closes the overlay when clicked; this must not inherit that. */
    cursor: auto;
}
#theatre-overlay.has-share #theatre-share {
    display: block;
}

/* End-gallery captions are white text sitting beside the photo over the dim, so
   push the backdrop darker here than in the main photobook theatre for contrast. */
#theatre-overlay.from-end-gallery {
    background: rgba(0, 0, 0, 0.9);
}

/* An end-gallery photo with no description must not leave the box sitting there:
   #theatre-description is `flex: 1 1 auto` with 24px padding, so an empty one still
   claims a column and pushes the photo off to one side. */
#theatre-overlay.from-end-gallery:not(.has-caption) #theatre-description {
    display: none;
}
/* ...and with nothing in the right column, centre the photo instead of leaving it
   anchored left against empty space. */
#theatre-overlay.from-end-gallery:not(.has-caption):not(.has-share) #theatre-content {
    justify-content: center;
}

/* Re-show the description when the entry actually has a caption, so theatre mode
   can carry the text.

   `flex: 1 1 auto` + `min-width: 0` is what makes the text wrap. With the previous
   `flex: 0 0 auto` the box sized itself to max-content, so a description rendered
   as one endless line running off the screen instead of filling the column. */
#theatre-overlay.from-end-gallery.has-caption #theatre-description {
    /* Block, NOT flex. As a flex container with align-items:center, a description
       taller than its box gets centred on the overflow, which pushes the first line
       up out of view and clips it in half - and scrolling cannot recover it, because
       overflow past the start edge of a flex container is unreachable. In block
       layout the text simply starts at the top and scrolls normally.
       The box itself is still vertically centred, by #theatre-content's align-items. */
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* Never taller than the content area, so long text scrolls instead of spilling */
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 0 0;
    font-size: 1rem;
    /* Generous leading: the return sweep to the next line is what makes or breaks
       readability on a long paragraph. */
    line-height: 1.75;
    /* Flush-left, ragged-right. Centred body text forces the eye to hunt for the
       start of every line - fine for a label, punishing for a paragraph. */
    text-align: left;
    /* Cap the measure near 60 characters; past ~75 the return sweep gets unreliable. */
    max-width: 34rem;
    /* Soft grey rather than pure white - less glare against the dark dim. */
    color: #b9b9b9;
    /* Honour \n / \n\n authored in gallery.json descriptions while still wrapping
       long lines normally. Set here (not on the base rule) so the main photobook
       captions are unaffected. */
    white-space: pre-wrap;
}

#theatre-overlay.has-share #theatre-content {
    justify-content: flex-start;
    overflow-y: auto;
}
#theatre-overlay.has-share #theatre-photo {
    cursor: default; /* not a click-to-close target while the form is open */
}
/* Desktop: the form is the right-hand column beside the photo, so it aligns to the
   left edge of that column rather than floating centred in the leftover space. */
#theatre-overlay.has-share #theatre-share {
    flex: 0 1 460px;
    min-width: 0;
    margin: 0;
}

@media (max-width: 768px) {
    #theatre-share {
        width: 92vw;
        margin-top: 14px;
        padding-bottom: 24px;
    }
    /* Column layout on mobile: the form sits under the photo, so the photo yields */
    #theatre-overlay.has-share #theatre-photo {
        max-height: 40vh;
    }
    #theatre-overlay.has-share #theatre-share {
        flex: 0 0 auto;
        margin: 14px auto 0;
    }
    #theatre-overlay.from-end-gallery.has-caption #theatre-description {
        padding: 14px 18px 0;
        /* The base rule sets width: 92vw on a content-box, so this padding would
           otherwise add 36px on top and overhang the right edge of a narrow phone. */
        box-sizing: border-box;
        max-width: 100%;
        font-size: 0.95rem;
        line-height: 1.7;
        color: #b9b9b9;
        /* Flush-left even on a phone: a hunting eye on centred lines is the main
           thing that made this caption hard to read. */
        text-align: left;
        /* flex-grow must be 0 in this column: with 1 the box would stretch to the
           full 30vh even for one short line, stranding it against the top edge. */
        flex: 0 1 auto;
        max-height: 32vh;
    }
}