:root{
  --bg: #050507;
  --fg: #e6f0ff;
  --muted: #9fb4ff;
  --accent: #ff3b3b;
  --accent-accent: #ff3b3b;
  --glow: 1;
  --ring-scale: 1;
  --ring-size-base: 120px;
  --pulse-size-base: 80px;
  --bg-image-opacity: 0; /* start hidden, will fade to visible */
  --fg-image-opacity: 1.0; /* New variable for foreground image opacity */
  --viewport-scale: 1; /* viewport-relative scale for circles */
  --mask-temperature: 0deg;
  --mask-contrast: 1;
  --mask-brightness: 1;
  --mask-saturation: 0.3; /* Default 30% */
  --eyes-opacity: 1;
  --skin-glow-color: 0, 163, 255; /* Default RGB for glow */
}
/* Reveal background when this class is added */
body.bg-visible{
  --bg-image-opacity: 0.3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#040408 0%, var(--bg) 60%);
  color:var(--fg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.app{
  width:720px;
  max-width:calc(100% - 32px);
  /* center visual vertically in viewport */
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  /* z-index:1; */
}
h1{margin:0 0 16px;font-weight:600}

/* Controls: make a fixed centered bottom bar */
.controls{
  display:none;
  gap:8px;
  align-items:stretch;
  position:fixed;
  left:24px;
  top:100px;
  transform:none;
  background: rgba(0,10,20,0.45);
  padding:12px 14px;
  border-radius:12px; z-index:1004;
  box-shadow: 0 8px 30px rgba(0,163,255,0.06);
  width: min(360px, 44vw);
  max-height: 70vh;
  overflow:auto;
}
.controls.open{
  display:block;
}
.controls h2{
  margin:0 0 6px; font-size:18px; color:var(--fg);
  cursor: grab;
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.settings-title{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content: center;         /* Center logo + title horizontally */
  text-align: center;              /* Center the text itself */
  width: 100%;                     /* Take full width of the title bar */
}
.settings-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:4px;
}
/* Hide the unstyled close button to remove the tiny line in the upper-left corner */
.closeSettings{
  display:none;
}
.controls label{display:block; margin-top:8px; color:var(--muted)}
.controls input[type="number"],
.controls select,
.controls input[type="color"],
.controls input[type="range"]{width:100%}
.control-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
}
.control-row label{
  flex: 0 0 44%;
  font-size: 12px;
  display: flex; /* Make label a flex container */
  justify-content: space-between; /* push value to the right */
  align-items: center;
}
.control-row label span {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg);
  opacity: 0.7;
  padding-left: 8px; /* space between label text and value */
  flex-shrink: 0;
}
.control-row label .color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: transparent; /* Color set by JS */
    margin-left: 6px;
    padding-left: 0; /* Override default span padding */
    opacity: 1;
    flex-shrink: 0;
}
/* Adjust padding on the value span when it follows a color swatch for better spacing */
.control-row label .color-swatch + span {
    padding-left: 4px; 
}
.control-row input[type="number"],
.control-row select,
.control-row input[type="color"],
.control-row input[type="range"],
.control-row input[type="checkbox"]{
  flex:1 1 auto;
}
.control-row input[type="color"]{
  width:42px;
  height:28px;
  padding:2px;
  border:1px solid #ddd;
  border-radius:6px;
  cursor:pointer;
}
.control-row input[type="range"]{
  width:100%;
}
.control-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.control-actions button{
  flex:1 1 0;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color:var(--fg);
  cursor:pointer;
  box-shadow:0 6px 30px rgba(0,163,255,0.08), 0 1px 0 rgba(255,255,255,0.02) inset;
}
.controls button:disabled{opacity:0.5;cursor:default}
.visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:16px; margin-bottom: 24px;
  position:relative; /* Must be positioned to use z-index */
  z-index: 2; /* Between background (1) and foreground overlay (3) */
}
.rings{display:flex; gap:-85px; align-items:center; justify-content:center; margin-top:-260px}

/* Adjust horizontal positions of the two circles */
#primaryRing {
  position: fixed;
  left: 50%;
  top: calc(50% - 160px);
  transform: translate(-50%, -50%) translateX(-360px);
}

#accentRing {
  position: fixed;
  left: 50%;
  top: calc(50% - 170px);
  transform: translate(-50%, -50%) translateX(370px);
}

.beat-ring{
  width: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
  height: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
  border-radius:50%;
  border:none;
  display:grid;
  place-items:center;
  position:relative;
  background: radial-gradient(circle at 30% 30%, rgba(0,163,255,0.04), transparent 30%);
  box-shadow: 0 8px 40px rgba(0,163,255,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
}
.beat-ring.accent{
  border:none;
  background: radial-gradient(circle at 70% 70%, rgba(255,59,59,0.04), transparent 30%);
  box-shadow: 0 8px 40px rgba(255,59,59,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
}
.pulse{
  width: calc(var(--pulse-size-base) * var(--ring-scale) * var(--viewport-scale));
  height: calc(var(--pulse-size-base) * var(--ring-scale) * var(--viewport-scale));
  border-radius:50%;
  background:var(--accent);
  opacity:0.0;
  transform:scale(0.7);
  transition:transform 0.12s linear, opacity 0.12s linear;
  box-shadow:0 6px calc(30px * var(--glow)) rgba(0,163,255,calc(0.28 * var(--glow))), 0 0 calc(40px * var(--glow)) rgba(0,163,255,calc(0.18 * var(--glow)));
}
.pulse.on{
  opacity:1;
  transform:scale(1);
  transition:transform 0.04s linear, opacity 0.04s linear;
  filter:drop-shadow(0 0 calc(14px * var(--glow)) rgba(0,163,255,calc(0.8 * var(--glow))));
}
/* accent pulse uses separate color variable */
.pulse.accent{
  background:var(--accent-accent);
  box-shadow:0 6px calc(30px * var(--glow)) rgba(255,59,59,calc(0.28 * var(--glow))), 0 0 calc(40px * var(--glow)) rgba(255,59,59,calc(0.18 * var(--glow)));
}
.pulse.accent.on{
  filter:drop-shadow(0 0 calc(14px * var(--glow)) rgba(255,59,59,calc(0.8 * var(--glow))));
}
.pulse.fill{
  width: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
  height: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
}
.controls input[type="color"]{
  /* removed color picker sizing in favor of sliders */
}
.controls input[type="range"]{
  width:100%;
}

#bpmDisplay{
  /* position:fixed; bottom:20px; left:50%; transform:translateX(-50%); */
  font-family:"Cal Sans","Space Mono",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  font-size:32px; font-weight:700; letter-spacing:0.5px;
  color:var(--fg); pointer-events:none; text-shadow:0 2px 18px rgba(0,0,0,0.35);
  z-index: 4; /* Above the new image overlay */
  opacity: 1; /* Make visible */
  font-size: 28px;
  margin-right: 0;
  line-height: 1;
  transition: opacity 2.0s ease; /* Added transition */
}

/* NEW: Default BPM label hidden */
#bpmDisplay #bpmLabel {
    display: none;
}

.bottom-actions{
  position:fixed; /* fixed so it's tied to viewport like BPM readout */
  z-index: 1002; /* Above all layers for constant accessibility */
  left:50%;
  transform: translateX(-50%);
  bottom:110px; /* center and slightly higher than BPM display */
  margin-top:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0; /* Removed gap */
  opacity: 0; /* hidden initially */
  pointer-events: none;
  width: 300px;
  max-width: 80vw;
  transition: opacity 2.0s ease;
}

/* Add spacing between the volume toggle and play button */
.volume-control-group {
    position: relative; /* Context for popup */
    margin-right: 12px; /* Space between volume group and play button */
    display: flex;
    align-items: center;
}

#volumeToggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.81 5 3.52 5 6.71s-2.11 5.9-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>') center center / 60% no-repeat;
    box-shadow:
        inset 6px 6px 14px rgba(255,255,255,0.06),
        inset -10px -14px 22px rgba(0,0,0,0.5),
        0 0 16px rgba(var(--skin-glow-color), 0.7), 
        0 10px 22px rgba(0,0,0,0.35);
    flex-shrink: 0;
    opacity: 0.65; /* 35% transparent by default */
}
#volumeToggle:active {
    transform: translateY(1px);
}

.volume-popup {
    position: absolute;
    bottom: 75px; /* Position above the toggle button */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 10, 20, 0.75);
    backdrop-filter: blur(8px);
    padding: 10px 14px;
    border-radius: 12px;
    width: 140px; /* Fixed width for the slider popup */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--skin-glow-color), 0.3);
    z-index: 1005;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.volume-popup[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

#volumeSlider {
    width: 100%;
    margin: 0;
}

#settingsToggle,
#playRound{
  width:75px; height:75px; border-radius:50%;
  border:none; cursor:pointer;
  /* solid black */
  background:#000;
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 16px rgba(var(--skin-glow-color), 0.7), /* Added dynamic glow */
    0 10px 22px rgba(0,0,0,0.35);
  position:relative;
  opacity: 0.65; /* 35% transparent by default */
}
/* New BPM stepper */
.bpm-stepper{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  display: flex;
  gap: 12px;
  z-index: 1100; /* top layer */
  opacity: 0; /* hidden initially */
  pointer-events: none;
  transition: opacity 2.0s ease;
}
.bpm-stepper button{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background:#000;
  color: var(--fg);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 16px rgba(var(--skin-glow-color), 0.7), /* Added dynamic glow */
    0 10px 22px rgba(0,0,0,0.35);
  opacity: 0.65; /* 35% transparent by default */
}
.bpm-stepper button:active{
  transform: translateY(1px);
}

/* mobile tweaks */
@media (max-width: 600px) {
  .bpm-stepper{
    bottom: 24px;
    gap: 10px;
    left: 12px;            /* Move to left corner */
    transform: none;       /* Remove centering transform */
    justify-content: flex-start;
  }
}

#settingsToggle {
    width: 60px;
    height: 60px;
    background: #000;
    display: flex; /* Ensure content is centered */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#fullscreenToggle {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Make it round */
    background: #000;
    display: flex; /* Ensure content is centered */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.65; /* 35% transparent by default */
}

#fullscreenToggle::before{
    content: 'F';
    font-size: 28px;
    font-weight: 700;
    color: var(--fg);
    line-height: 1;
    /* No background image needed, relies on text content */
}

#settingsToggle {
    /* Using a standard SVG gear icon for settings */
    background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.38-1.09-.69-1.7-.93L13.9 3.19c-.04-.2-.22-.34-.41-.34h-4c-.19 0-.37.14-.41.34L8.09 6.27c-.6.24-1.18.55-1.7.93l-2.49-1c-.23-.09-.49-.01-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.38 1.09.69 1.7.93l.35 3.09c.04.2.22.34.41.34h4c.19 0 .37-.14.41-.34l.35-3.09c.6-.24 1.18-.55 1.7-.93l2.49 1c.23.09.49.01.61-.22l2-3.46c.13-.22.07-.49-.12-.64l-2.11-1.65zm-4.47-2.92c-.59.59-.59 1.54 0 2.12.59.59 1.54.59 2.12 0 .59-.59.59-1.54 0-2.12-.59-.59-1.54-.59-2.12 0z"/></svg>') center center / 60% no-repeat;
}

/* Style for the new centered, longer play/pause button */
#playRound{
    width: 250px;
    max-width: 100%;
    height: 60px;
    border-radius: 30px; 
    opacity: 0.65;  /* 35% transparent by default */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fg);
    transition: background 0.1s ease;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
    box-shadow:
        inset 6px 6px 14px rgba(255,255,255,0.06),
        inset -10px -14px 22px rgba(0,0,0,0.5),
        0 0 16px rgba(var(--skin-glow-color), 0.7), /* Added dynamic glow */
        0 10px 22px rgba(0,0,0,0.35);
}

#playRound::before{
  content:'START'; /* Default state text */
  position: static;
}
#playRound.playing::before{
  content:'Pause'; /* Playing state text */
}

#playRound.playing{
    background: rgba(var(--skin-glow-color), 0.5); /* Use darker skin color for playing state */
    background-image: none;
    box-shadow:
        inset 6px 6px 14px rgba(0,0,0,0.2),
        inset -10px -14px 22px rgba(0,0,0,0.5),
        0 0 8px rgba(var(--skin-glow-color), 0.4), /* Adjusted glow for playing state */
        0 4px 12px rgba(0,0,0,0.5);
}

#settingsToggle::before{
  content:none;
}

/* Existing desktop background layers */
.bg-image{
  position:fixed; inset:0;
  background:url('/sleepstack3 hd.png') center center / 1920px 1080px no-repeat; /* Fixed size centered */
  opacity:var(--bg-image-opacity);
  transition: opacity 2s ease; /* fade in when variable changes */
  pointer-events:none; z-index:4; /* Raised above circles */
}

.bg-image-overlay{
  position:fixed; inset:0;
  background:url('/sleepstack4.png') center center / 1920px 1080px no-repeat; /* Fixed size centered */
  opacity:var(--fg-image-opacity); /* Apply new variable */
  pointer-events:none; z-index:3; /* Foreground overlay, above visualizer */
}

.sleepstack-overlay{
  position: fixed;
  inset: 0;
  background: url('/sleepstackhd.jpg') center center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 2; /* default below visual on desktop */
}

.mask-image{
  position:fixed; inset:0;
  background:url('/enik-mask (2).png') center center / 1920px 1080px no-repeat;
  opacity:1;
  pointer-events:none; z-index:999; /* Ensure top-most layer */
  filter: sepia(1) hue-rotate(var(--mask-temperature)) saturate(var(--mask-saturation)) contrast(var(--mask-contrast)) brightness(var(--mask-brightness));
}

.eyes-image{
  position:fixed; inset:0;
  background:url('/lens.png') center center / 1920px 1080px no-repeat;
  opacity:var(--eyes-opacity);
  pointer-events:none; z-index:1000;
}

/* Splash screen */
.splash{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  z-index:1003;
  opacity:0;
  animation: splashSeq 6s ease forwards; /* 6s total */
}
.splash-content{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.splash img.splash-logo{
  width:min(300px, 60vw);
  height:auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.splash-title{
  margin-top: 50px; /* Position title 50px below the final logo */
  font-size: clamp(18px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  opacity: 0; /* hidden until animated in */
}

/* Override the logo animation to match new sequence */
.logo-anim{
  animation:
    logoIntro 2s ease-out forwards,       /* 0s-2s: fade-in at 20%, then shoot to 100% starting at 1s */
    logoHover 2.4s ease-in-out 2s infinite; /* after 2s: subtle vertical hover */
}

@keyframes logoIntro{
  0%   { opacity: 0; transform: translateY(0) scale(0.20); }
  40%  { opacity: 1; transform: translateY(0) scale(0.20); } /* fade in at 20% size */
  50%  { opacity: 1; transform: translateY(0) scale(0.20); } /* hold until 1s */
  100% { opacity: 1; transform: translateY(0) scale(1.00); } /* shoot to full size by 2s */
}

@keyframes logoHover{
  0%   { transform: translateY(-2px) scale(1.00); }
  50%  { transform: translateY(3px) scale(1.00); }
  100% { transform: translateY(-2px) scale(1.00); }
}

/* Title flies in centered to its final position (50px below the logo) */
.title-anim{
  animation: titleFly 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

@keyframes titleFly{
  0%   { opacity: 0; transform: translateY(180px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1.00); }
}

/* Remove old title timing (override previous keyframes if present) */
@keyframes titleAppear{
  0%   { opacity: 0; transform: translateY(180px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1.00); }
}

/* Reflections under logo and title */
.splash-reflections{
  position: absolute;
  top: 50%;
  transform: translateY(calc(100% + 10px)); /* place just below originals */
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}

.splash-logo-reflect{
  width:min(300px, 60vw);
  height:auto;
  transform: scaleY(-1);
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  mask-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  animation: reflectFade 0.6s ease forwards;
  animation-delay: 3s; /* fades in fast after first 3 seconds */
  filter: blur(0.3px);
}

.splash-title-reflect{
  margin-top: 8px;
  font-size: clamp(18px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  transform: scaleY(-1);
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  mask-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  animation: reflectFade 0.6s ease forwards;
  animation-delay: 3s; /* fades in fast after first 3 seconds */
  filter: blur(0.3px);
}

@keyframes reflectFade{
  from { opacity: 0; }
  to   { opacity: 0.35; }
}

/* Container fade timing for splash lifecycle */
@keyframes splashSeq{
  0%   { opacity:0; transform:scale(0.98); }
  10%  { opacity:1; transform:scale(1); }
  85%  { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.01); }
}

.blackout{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1001;
  opacity: 1;
  pointer-events: none;
  transition: opacity 2s ease;
}

@media (max-width: 600px) {
  body { background:#000; padding:12px; }
  .app { width:100vw; max-width:100vw; height:100vh; }
}
@media (max-width: 600px) {
  .controls { width:92vw; left:50%; top:16px; transform:translateX(-50%); font-size:12px; }
  .controls h2 { font-size:12px; margin-bottom:6px; }
  .control-row { gap:6px; margin:4px 0; }
  .control-row label { font-size:9px; }
  .control-actions button { padding:8px 10px; font-size:12px; }
}
@media (max-width: 600px) {
  .bg-image, .bg-image-overlay {
    background-size: 100% auto;
    background-position: center center;
    background-color: #000;
  }
  /* Keep same stacking order as desktop for consistent visuals */
  .bg-image { 
    z-index: 1004;
    opacity: 1 !important; /* Ensure visible as foreground layer on mobile */
  }
  .bg-image-overlay { z-index: 3; }
  .visual { z-index: 1002; } /* Circles remain visible but under .bg-image now */
}
@media (max-width: 600px) {
  .mask-image,
  .eyes-image {
    background-size: 100% auto;
    background-position: center center;
  }
}
@media (max-width: 600px) {
  .rings { 
    margin-top: -26vh; /* closer to desktop spacing, viewport-relative */
  }
  #primaryRing {
    top: calc(50% - 30px); /* moved 15px higher from previous -15px */
    transform: translate(-50%, -50%) translateX(-70px); /* was -50px: move 20px closer to left edge */
  }
  #accentRing {
    top: calc(50% - 30px); /* moved 15px higher from previous -15px */
    transform: translate(-50%, -50%) translateX(70px); /* was 50px: move 20px closer to right edge */
  }
  
  /* Removed fixed 100px sizing so circles scale with slider and viewport */
}
@media (max-width: 600px) {
  .bottom-actions { 
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:110px;
    width: 90vw;
  }
  .volume-control-group {
    margin-right: 10px; /* Slightly tighter spacing on mobile */
  }
  #settingsToggle { 
    /* Ensure settings toggle remains round */
    width: 60px;
    height: 60px; 
    border-radius:50%; 
  }
  #playRound {
      width: 106px; /* 15% smaller than 125px (106.25px) */
      height: 43px; /* 15% smaller than 50px (42.5px) */
      border-radius: 22px; /* Match new height / 2 */
      font-size: 18px; /* 6 points smaller than 24px */
  }
  #volumeToggle {
    width: 50px; /* Make slightly smaller on mobile */
    height: 50px;
  }
  .volume-popup {
    bottom: 60px; /* Adjust popup position for smaller button */
    width: 120px;
    padding: 8px 10px;
  }
  .corner-actions {
      right: 12px;
      bottom: 24px;
      gap: 10px;
  }
  #bpmDisplay {
      font-size: 22px;
  }
  #settingsToggle {
      width: 50px;
      height: 50px;
  }
  #fullscreenToggle {
      display: none; /* Hide fullscreen button on mobile */
  }
}

/* New collapsible section styles */
.section-group {
    margin-top: 2px; /* Slightly tighter spacing than before */
}

.section-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;                            /* More padding for button feel */
    cursor: pointer;
    border-top: none;                             /* Remove top border line */
    border-radius: 8px;                           /* Rounded corners like a button */
    background: linear-gradient(180deg,           /* Subtle button background */
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );
    box-shadow:
        0 1px 3px rgba(0,0,0,0.8),
        inset 0 0 0 1px rgba(255,255,255,0.06);
    transition: background 0.15s ease,           /* Smooth hover feedback */
                box-shadow 0.15s ease,
                transform 0.08s ease;
}

/* Hover/active states to reinforce clickability */
.section-titlebar:hover {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.04)
    );
    box-shadow:
        0 2px 6px rgba(0,0,0,0.9),
        inset 0 0 0 1px rgba(255,255,255,0.12);
}

.section-titlebar:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.7),
        inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Redefine section title appearance */
.section-titlebar .section-title {
    margin-top: 0;
    padding-top: 0;
    font-size: 11px; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--fg);
    opacity: 0.85;
    flex-grow: 1;
}

/* Add an indicator icon */
.section-titlebar::after {
    content: '▾'; /* Down arrow (open state) */
    font-size: 16px;
    color: var(--muted);
    transition: transform 0.2s ease;
    padding-left: 10px;
    line-height: 1;
}

/* Content container and collapse logic */
.section-content {
    max-height: 500px; /* Large enough initial height */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-bottom: 4px; /* Small padding after content */
    padding-left: 10px;
    padding-right: 10px;
}

.section-group.collapsed .section-content {
    max-height: 0;
}

.section-group.collapsed .section-titlebar::after {
    content: '▸'; /* Right arrow (closed state) */
}

/* Reveal bottom UI once logo has been showing for 3s (app adds .ui-visible to body) */
body.ui-visible .bottom-actions { opacity: 1; pointer-events: auto; }
body.ui-visible .corner-actions { opacity: 1; pointer-events: auto; }
body.ui-visible .bpm-stepper { opacity: 1; pointer-events: auto; }
/* Add desktop bottom row reveal */
body.ui-visible .desktop-bottom-row { opacity: 1; pointer-events: auto; }
body.ui-visible .mobile-bottom-row { opacity: 1; pointer-events: auto; }

/* Inactivity fade */
body.inactive-stage-1 .bottom-actions,
body.inactive-stage-1 .corner-actions,
body.inactive-stage-1 .bpm-stepper,
body.inactive-stage-1 .mobile-bottom-row,
body.inactive-stage-1 .desktop-bottom-row { opacity: 0.5; }

body.inactive-stage-2 .bottom-actions,
body.inactive-stage-2 .corner-actions,
body.inactive-stage-2 .bpm-stepper,
body.inactive-stage-2 .mobile-bottom-row,
body.inactive-stage-2 .desktop-bottom-row { opacity: 0.1; }

/* Hide cursor on inactivity */
body.no-cursor {
    cursor: none;
}

/* Styles for animated title letters */
.splash-title span.title-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    animation: titleIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(2s + (var(--index) * 0.05s)); /* start after 2s */
}

@keyframes titleIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.corner-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    z-index: 1002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2.0s ease;
}

@media (max-width: 600px) {
  .bg-image { 
    z-index: 1;
    opacity: 0.5 !important;
  }
  .bg-image-overlay { z-index: 0; }
  .visual { z-index: 1005; }
  .bottom-actions, .corner-actions { opacity: 0; pointer-events: none; } /* was forcing visible; now hidden until ui-visible */
}
/* Hide visualizer on mobile until UI becomes visible to prevent early blue/red glow */
@media (max-width: 600px) {
  .visual {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  body.ui-visible .visual {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 600px) {
  :root{
    --ring-size-base: 96px;  /* 20% smaller than 120px */
    --pulse-size-base: 64px; /* 20% smaller than 80px */
  }
}

@media (max-width: 600px) {
  .splash img.splash-logo { width: min(180px, 36vw); }
  .splash-content { transform: translateY(-100px); }
}

/* Mobile-only unified bottom row */
@media (max-width: 600px) {
  /* Hide original separate containers on mobile */
  .bottom-actions,
  .bpm-stepper,
  .corner-actions {
    display: none !important;
  }

  .mobile-bottom-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center; /* was space-evenly */
    align-items: center;
    padding: 0 12px;
    gap: 15px; /* uniform spacing between buttons */
    z-index: 1100;
    opacity: 0; /* hidden until ui-visible */
    pointer-events: none;
    transition: opacity 2.0s ease;
  }
  body.ui-visible .mobile-bottom-row { opacity: 1; pointer-events: auto; }

  /* 10% smaller controls on mobile bottom row */
  /* BPM stepper buttons */
  .mobile-bottom-row #bpmDown,
  .mobile-bottom-row #bpmUp {
    width: 45px; /* 10% smaller than 50px */
    height: 45px;
    font-size: 26px; /* slight proportional adjustment */
    border-radius: 50%;
    background: #000; /* Apply black background */
    filter: none;
    box-shadow: inset 6px 6px 14px rgba(255,255,255,0.06), inset -10px -14px 22px rgba(0,0,0,0.5), 0 0 16px rgba(var(--skin-glow-color),0.49), 0 10px 22px rgba(0,0,0,0.35);
  }

  /* Update Play button background on mobile to match skin color (Goal 1 for Mobile) */
  .mobile-bottom-row #playRound {
    background-color: #000; /* Apply black background */
    filter: none;
    background-image: none;
  }

  /* Ensure Volume Toggle and Settings Toggle are also black background (Total 5 buttons) */
  .mobile-bottom-row #volumeToggle,
  .mobile-bottom-row #settingsToggle {
      background-color: #000;
      filter: none;
  }
}

/* mobile tweaks */
@media (max-width: 600px) {
  .bottom-actions,
  .bpm-stepper,
  .corner-actions {
    display: none !important;
  }
}

/* Desktop-only unified bottom row (matches mobile look, plus fullscreen second from end) */
@media (min-width: 601px) {
  /* Hide original separate containers on desktop */
  .bottom-actions,
  .bpm-stepper,
  .corner-actions {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .desktop-bottom-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center; /* Even spacing like screenshot */
    align-items: center;
    padding: 0;
    gap: 20px;
    z-index: 1100;
    opacity: 0; /* hidden until ui-visible */
    pointer-events: none;
    transition: opacity 2.0s ease;
  }

  /* Sizes styled to resemble screenshot */
  .desktop-bottom-row #bpmDown,
  .desktop-bottom-row #bpmUp {
    width: 60px;
    height: 60px;
    font-size: 30px;
    border-radius: 50%;
    /* 1. Apply circular gradient shading (like mobile BPM buttons) */
    background: radial-gradient(circle, rgba(var(--skin-glow-color),0.95) 0%, rgba(var(--skin-glow-color),0.7) 55%, rgba(0,0,0,1) 100%);
    filter: saturate(var(--mask-saturation));
    /* 2. Apply complex shadow */
    box-shadow: 
      0 0 16px rgba(var(--skin-glow-color), 0.7), 
      0 10px 22px rgba(0,0,0,0.35);
    border: none;     /* ensure no border */
    outline: none;    /* ensure no outline */
    color: var(--fg);
    font-weight: 800;
    line-height: 1;
  }

  .desktop-bottom-row #playRound {
    width: 180px;
    height: 60px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fg);
    /* Set background to skin color (Goal 1 for Desktop) */
    background: rgb(var(--skin-glow-color)); 
    filter: saturate(var(--mask-saturation));
    background-image: none; 
    box-shadow:
      inset 6px 6px 14px rgba(255,255,255,0.06),
      inset -10px -14px 22px rgba(0,0,0,0.5),
      0 0 16px rgba(var(--skin-glow-color), 0.7),
      0 10px 22px rgba(0,0,0,0.35);
  }

  .desktop-bottom-row #volumeToggle,
  .desktop-bottom-row #settingsToggle,
  .desktop-bottom-row #fullscreenToggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #000;
    box-shadow:
      inset 6px 6px 14px rgba(255,255,255,0.06),
      inset -10px -14px 22px rgba(0,0,0,0.5),
      0 0 16px rgba(var(--skin-glow-color), 0.7),
      0 10px 22px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Set skin-based background for volume and settings */
  .desktop-bottom-row #volumeToggle,
  .desktop-bottom-row #settingsToggle,
  .desktop-bottom-row #fullscreenToggle {
    background-color: #000;
    filter: none; /* Ensure no residual background image */
  }

  /* Make icons white over the skin-colored background */
  .desktop-bottom-row #volumeToggle {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.81 5 3.52 5 6.71s-2.11 5.9-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
  }

  .desktop-bottom-row #settingsToggle {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.38-1.09-.69-1.7-.93L13.9 3.19c-.04-.2-.22-.34-.41-.34h-4c-.19 0-.37.14-.41.34L8.09 6.27c-.6.24-1.18.55-1.7.93l-2.49-1c-.23-.09-.49-.01-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.38 1.09.69 1.7.93l.35 3.09c.04.2.22.34.41.34h4c.19 0 .37-.14.41-.34l.35-3.09c.6-.24 1.18-.55 1.7-.93l2.49 1c.23.09.49.01.61-.22l2-3.46c.13-.22.07-.49-.12-.64l-2.11-1.65zm-4.47-2.92c-.59.59-.59 1.54 0 2.12.59.59 1.54.59 2.12 0 .59-.59.59-1.54 0-2.12-.59-.59-1.54-.59-2.12 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
  }

  /* Fullscreen button label "F" */
  #fullscreenToggle::before{
    content: 'F';
    font-size: 28px;
    font-weight: 700;
    color: var(--fg);
    line-height: 1;
  }
}

/* Hover glow flips to black */
#volumeToggle:hover,
#settingsToggle:hover,
#playRound:hover,
#bpmDown:hover,
#bpmUp:hover,
#fullscreenToggle:hover {
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 16px rgba(0,0,0,0.8),
    0 10px 22px rgba(0,0,0,0.35);
}

/* NEW: Vertical Hover Animation for Play Button */
@keyframes playRoundHover {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* Class to apply the animation */
.hovering-attention {
    animation: playRoundHover 3s ease-in-out infinite; /* 3 seconds cycle */
}

@media (max-width: 600px) {
  .controls { 
    width:92vw; 
    left:50%; 
    top:16px; 
    transform:translateX(-50%); 
    font-size:12px; 
    z-index: 1102; /* ensure above overlays */
  }
  .control-row { gap:10px; margin:8px 0; }
  .control-row label { font-size:11px; }

  /* Touch-friendly sliders */
  .control-row input[type="range"] {
    height: 36px;                /* Larger tap target */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    touch-action: manipulation;   /* Prevent scroll hijack while sliding */
  }
  .control-row input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .control-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #000;
    box-shadow:
      inset 6px 6px 14px rgba(255,255,255,0.06),
      inset -10px -14px 22px rgba(0,0,0,0.5),
      0 0 12px rgba(var(--skin-glow-color), 0.6);
    margin-top: -8px; /* center on 10px track */
  }
  .control-row input[type="range"]::-moz-range-track {
    height: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
  }
  .control-row input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #000;
    box-shadow:
      inset 6px 6px 14px rgba(255,255,255,0.06),
      inset -10px -14px 22px rgba(0,0,0,0.5),
      0 0 12px rgba(var(--skin-glow-color), 0.6);
    border: none;
  }

  /* Ensure inputs sit above any overlapping elements */
  .controls .section-content {
    position: relative;
    z-index: 1;
  }

  /* Reduce label width a bit to give sliders more space */
  .control-row label {
    flex: 0 0 42%;
  }
}

@media (max-width: 600px) {
  #bpmDisplay {
      position: fixed;
      top: 120px;
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      text-align: center;
      color: #fff;
      opacity: 0; /* start hidden on mobile */
      transition: opacity 2.0s ease; /* fade in with bottom buttons */
      z-index: 1101;
      pointer-events: none;
  }
  #bpmDisplay #bpmNumber {
      font-size: 70pt;
      line-height: 1;
  }
}
/* Ensure BPM appears with UI on mobile */
@media (max-width: 600px) {
  body.ui-visible #bpmDisplay {
    opacity: 0.2; /* show default 90 BPM at UI reveal */
  }
}

/* Apply desktop BPM positioning and visibility logic */
@media (min-width: 601px) {
  #bpmDisplay {
    position: fixed;
    top: auto; /* Reset mobile top positioning */
    left: 50%;
    transform: translateX(-50%);
    /* bottom: 134px is 50px above the 60px START button, which is 24px from bottom */
    bottom: 134px; 
    text-align: center;
    opacity: 0; /* Start hidden */
    z-index: 1101; 
    
    /* Layout change for number and label */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #bpmDisplay #bpmNumber {
      font-size: 90pt;
      line-height: 1;
  }
  
  #bpmDisplay #bpmLabel {
      display: block; /* Show label on desktop */
      font-size: 40pt; /* 40 points in size */
      font-weight: 700;
      line-height: 1;
      margin-top: 10px; /* 10 pixels spacing */
  }
  
  body.ui-visible #bpmDisplay {
    opacity: 0.8; /* Show default 90 BPM at UI reveal on desktop, 80% transparency */
  }
  
  body.inactive-stage-2 #bpmDisplay {
      opacity: 0.5;
  }
}

/* COMPACT SETTINGS + ENHANCED SLIDERS */
.controls{
  width: min(300px, 38vw);
  padding: 10px 12px;
  background: rgba(0,10,20,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
}
.controls h2{
  margin:0 0 6px; font-size:18px; color:var(--fg);
  cursor: grab;
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.section-group { margin-top: 2px; }
.section-titlebar { padding: 6px 10px; }
.section-titlebar .section-title { font-size: 11px; letter-spacing: 1.2px; }

.control-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
}
.control-row label{
  flex: 0 0 44%;
  font-size: 12px;
}
.control-row label span { font-size: 10px; }

/* Unified compact slider styling with live fill */
.controls input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
  padding: 10px 0; /* vertical breathing room */
}
.controls input[type="range"].styled-range{
  --track-height: 8px;
  --thumb-size: 18px;
  --track-radius: 999px;
  --fill-color: var(--accent);
  --track-bg: rgba(255,255,255,0.15);
  --track-border: rgba(255,255,255,0.08);
  --fill: 0%;
  background:
    linear-gradient(var(--fill-color), var(--fill-color)) left center / var(--fill) var(--track-height) no-repeat,
    linear-gradient(var(--track-bg), var(--track-bg)) left center / 100% var(--track-height) no-repeat;
  border-radius: var(--track-radius);
  box-shadow: inset 0 0 0 1px var(--track-border);
}

/* WebKit thumb */
.controls input[type="range"].styled-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #000;
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 12px rgba(var(--skin-glow-color), 0.6);
  margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
  border: none;
}

/* Firefox track & thumb */
.controls input[type="range"].styled-range::-moz-range-track{
  height: var(--track-height);
  background: var(--track-bg);
  border-radius: var(--track-radius);
  box-shadow: inset 0 0 0 1px var(--track-border);
}
.controls input[type="range"].styled-range::-moz-range-progress{
  height: var(--track-height);
  background: var(--fill-color);
  border-radius: var(--track-radius);
}
.controls input[type="range"].styled-range::-moz-range-thumb{
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #000;
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 12px rgba(var(--skin-glow-color), 0.6);
  border: none;
}

/* Hover effect subtle */
.controls input[type="range"].styled-range:hover{
  box-shadow:
    inset 0 0 0 1px var(--track-border),
    0 0 10px rgba(0,0,0,0.2);
}

/* Mobile-specific compactness and touch size */
@media (max-width: 600px) {
  .controls { width: 75vw; padding: 10px; }
  .controls h2 { font-size: 14px; }
  .control-row { gap:8px; margin:6px 0; }
  .control-row label { font-size: 11px; flex: 0 0 42%; }
  .controls input[type="range"].styled-range{
    --track-height: 10px;
    --thumb-size: 24px;
  }
}
/* END COMPACT SETTINGS + ENHANCED SLIDERS */

/* Help button base style */
#helpToggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: #000;
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 16px rgba(var(--skin-glow-color), 0.7),
    0 10px 22px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  opacity: 0.65; /* 35% transparent by default */
}
#helpToggle::before {
  content: '?';
  font-size: 28px;
  font-weight: 800;
  color: white;
  line-height: 1;
}

/* Desktop bottom row integration: skin-colored background with white icon */
@media (min-width: 601px) {
  .desktop-bottom-row #helpToggle {
    background-color: rgb(var(--skin-glow-color));
    filter: saturate(var(--mask-saturation));
  }
}

/* Mobile: place help button in upper-right corner */
@media (max-width: 600px) {
  #helpToggle.mobile-help {
    position: fixed;
    top: 16px;
    right: 12px;
    width: 50px;
    height: 50px;
    z-index: 1102;
    background-color: #000; /* Change background to black */
    filter: none; /* Remove saturation/brightness filter */
    opacity: 0; /* hidden until ui-visible */
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  body.ui-visible #helpToggle.mobile-help {
    opacity: 0.6; /* was 1; set to 60% transparency on mobile */
    pointer-events: auto;
  }
  
  #helpToggle.mobile-help::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url('/l3-100.png') center center / 60% no-repeat;
    opacity: 0.5; /* 50% transparency requirement */
    transition: opacity 0.3s ease;
  }
  
  body.inactive-stage-1 #helpToggle.mobile-help {
    opacity: 0.5;
  }
  body.inactive-stage-2 #helpToggle.mobile-help {
    opacity: 0.1;
  }
}

/* Hover effect consistent with other buttons */
#helpToggle:hover {
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5),
    0 0 16px rgba(0,0,0,0.8),
    0 10px 22px rgba(0,0,0,0.35);
}

/* Help popup modal */
.help-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.help-popup[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.help-content {
  background: rgba(0,10,20,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  width: min(420px, 86vw);
  max-height: 70vh;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 12px rgba(var(--skin-glow-color), 0.3);
  padding: 14px 16px;
  color: var(--fg);
}
.help-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #000;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 6px 6px 14px rgba(255,255,255,0.06),
    inset -10px -14px 22px rgba(0,0,0,0.5);
}
.help-body h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.help