: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;
  --fg-image-opacity: 1.0;
  --viewport-scale: 1;
  --mask-temperature: 0deg;
  --mask-contrast: 1;
  --mask-brightness: 1;
  --mask-saturation: 0.3;
  --eyes-opacity: 1;
  --skin-glow-color: 0, 163, 255;
}

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);
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
}

h1{margin:0 0 16px;font-weight:600}

/* removed .visual styles to visualizer.css */
/* removed .rings styles to visualizer.css */
/* removed #primaryRing styles to visualizer.css */
/* removed #accentRing styles to visualizer.css */
/* removed .beat-ring styles to visualizer.css */
/* removed .pulse styles to visualizer.css */
/* removed #bpmDisplay styles to visualizer.css */

/* removed .bottom-actions styles to buttons.css */
/* removed .volume-control-group styles to buttons.css */
/* removed #volumeToggle styles to buttons.css */
/* removed .volume-popup styles to buttons.css */
/* removed #volumeSlider styles to buttons.css */
/* removed #settingsToggle styles to buttons.css */
/* removed #playRound styles to buttons.css */
/* removed .bpm-stepper styles to buttons.css */
/* removed #fullscreenToggle styles to buttons.css */
/* removed .corner-actions styles to buttons.css */
/* removed #helpToggle styles to buttons.css */
/* removed .help-popup styles to buttons.css */

.bg-image{
  position:fixed; inset:0;
  background:url('/sleepstack3 hd.png') center center / 100% auto no-repeat;
  opacity:var(--bg-image-opacity);
  transition: opacity 2s ease;
  pointer-events:none; z-index:4;
}

.bg-image-overlay{
  position:fixed; inset:0;
  background:url('/sleepstack4.png') center center / 100% auto no-repeat;
  opacity:var(--fg-image-opacity);
  pointer-events:none; z-index:3;
}

.mask-image{
  position:fixed; inset:0;
  background:url('/enik-mask (2).png') center center / 100% auto no-repeat;
  opacity:1;
  pointer-events:none; z-index:999;
  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 / 100% auto no-repeat;
  opacity:var(--eyes-opacity);
  pointer-events:none; z-index:1000;
}

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; }
body.ui-visible .desktop-bottom-row { opacity: 1; pointer-events: auto; }

body.inactive-ui .bottom-actions { opacity: 0.1; }
body.inactive-ui .corner-actions { opacity: 0.1; } 
body.inactive-ui .bpm-stepper { opacity: 0.1; }

body.no-cursor {
  cursor: none;
}

body.screensaver-active .bottom-actions,
body.screensaver-active .corner-actions,
body.screensaver-active .bpm-stepper,
body.screensaver-active .mobile-bottom-row,
body.screensaver-active .desktop-bottom-row,
body.screensaver-active #helpToggle {
  opacity: 0.05 !important;
}

@media (max-width: 600px) {
  body { background:#000; padding:12px; }
  .app { width:100vw; max-width:100vw; height:100vh; }

  .bg-image, .bg-image-overlay {
    background-size: 100% auto;
    background-position: center center;
    background-color: #000;
  }

  .bg-image { 
    z-index: 1;
    opacity: 0.5 !important;
  }
  .bg-image-overlay { z-index: 0; }

  .mask-image,
  .eyes-image {
    background-size: 100% auto;
    background-position: center center;
  }

  /* removed mobile visualizer styles to visualizer.css */
  /* removed mobile bottom row styles to buttons.css */
}