/* Control panel styles for colors and effects */

body[data-controller="page"] {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Layout grid for controller */
.controller-grid { display: grid; grid-template-columns: 1fr 420px; gap: 1rem; align-items: start }
.controls-panel { padding: 0.6rem }
.preview-panel { padding: 0.6rem }

.panel-title { font-size: 1.05rem; font-weight:700; margin-bottom:0.6rem; display:flex; align-items:center; gap:0.6rem }
.panel-title .primary-indicator { width:20px; height:20px; border-radius:6px; border:2px solid rgba(255,255,255,0.12); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset }

/* swatch selected */
.swatch-selected { outline: 3px solid rgba(0,122,255,0.9); transform: translateY(-2px) }

/* make panels collapsible visually */
.panel { border-radius:8px; padding:0.6rem; background:#fff; box-shadow:0 4px 12px rgba(12,12,20,0.04); margin-bottom:0.6rem }

h1 {
  margin-bottom: 0.5rem;
}

.controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.swatches {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.swatch {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset;
  cursor: pointer;
}

.swatch[title="Red"]{ background:#ff3b30 }
.swatch[title="Orange"]{ background:#ff9500 }
.swatch[title="Yellow"]{ background:#ffcc00 }
.swatch[title="Green"]{ background:#4cd964 }
.swatch[title="Cyan"]{ background:#00c7be }
.swatch[title="Blue"]{ background:#007aff }
.swatch[title="Purple"]{ background:#5856d6 }
.swatch[title="Pink"]{ background:#ff2d55 }
.swatch[title="White"]{ background:#ffffff }
.swatch[title="Off"]{ background:#000000 }

.effect {
  padding: 0.6rem 1rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg,#fff,#f2f4f7);
  cursor: pointer;
  font-weight: 600;
  min-width: 96px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

#show_screen { 
  width: 100%;
  height: 60vh;
  overflow: hidden;
  position: relative;
  background: #000;
}

#screen { 
  width: 100%;
  height: 100%;
  transition: background 400ms linear;
}

/* Pulse effect */
.pulse {
  animation: pulse-bg 2s ease-in-out infinite;
}
@keyframes pulse-bg {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

/* Strobe effect: duration controlled via --strobe-speed (e.g. 180ms) */
.strobe {
  animation: strobe var(--strobe-speed, 180ms) steps(1, end) infinite;
}
@keyframes strobe {
  0% { opacity: 1 }
  50% { opacity: 0 }
  100% { opacity: 1 }
}

/* Additional effects */
.lensflare::after { content: ''; position:absolute; inset: -20%; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 20%), radial-gradient(circle at 80% 80%, rgba(255,200,60,0.1), transparent 30%); mix-blend-mode: screen; pointer-events:none }
.stardust .star { box-shadow: 0 0 10px rgba(255,255,255,0.9); transform-origin:center }
.twirl { animation: twirl 8s linear infinite; }
@keyframes twirl { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
.grid { background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; }
.neon { box-shadow: 0 0 24px rgba(0,255,200,0.12) inset; filter: saturate(1.6) }
.glitch { position: relative; overflow: hidden }
.glitch::before, .glitch::after { content: ''; position: absolute; inset:0; mix-blend-mode: screen; opacity:0.12; transform: translateX(0) }
.glitch { animation: glitch-anim 2s infinite }
@keyframes glitch-anim { 0% { transform: none } 10% { transform: translateX(2px) skewX(1deg) } 20% { transform: none } 30% { transform: translateX(-2px) skewX(-1deg) } 100% { transform: none } }
.vibrate { animation: vibrate 120ms linear infinite }
@keyframes vibrate { 0% { transform: translateX(0) } 50% { transform: translateX(2px) } 100% { transform: translateX(0) } }
.bloom { filter: blur(6px) saturate(1.2); }
.sunburst::before { content: ''; position:absolute; inset:0; background: radial-gradient(circle at 50% 30%, rgba(255,200,60,0.12), transparent 20%); mix-blend-mode: screen }
.holo { background: linear-gradient(120deg, rgba(200,255,255,0.04), rgba(255,200,255,0.03)); animation: holo 12s linear infinite }
@keyframes holo { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }
.meteor::after { content: ''; position:absolute; left:-20%; top:10%; width:20%; height:120%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0)); transform: rotate(12deg); animation: meteor 1.4s linear infinite }
@keyframes meteor { 0% { left:-40% } 100% { left:120% } }
.ripple { background: radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 30%); animation: ripple 3s ease-in-out infinite }
@keyframes ripple { 0% { transform: scale(0.98) } 50% { transform: scale(1.02) } 100% { transform: scale(0.98) } }

/* Rainbow animated background */
.rainbow {
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
  background-size: 400% 100%;
  animation: rainbow 6s linear infinite;
}
@keyframes rainbow {
  0% { background-position: 0% 50% }
  100% { background-position: 100% 50% }
}

/* Stars effect */
.stars {
  background: radial-gradient(ellipse at bottom, rgba(10,10,20,0.8) 0%, rgba(0,0,10,1) 70%);
}
.stars .star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(0) scale(0.8);
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0% { opacity: 0; transform: translateY(0) scale(0.6) }
  50% { opacity: 1; transform: translateY(-6px) scale(1) }
  100% { opacity: 0; transform: translateY(0) scale(0.6) }
}

/* Flicker effect: random brightness via css variable */
.flicker { animation: flicker 1.2s infinite; }
@keyframes flicker {
  0% { filter: brightness(0.8) }
  20% { filter: brightness(1.6) }
  40% { filter: brightness(0.9) }
  60% { filter: brightness(1.3) }
  100% { filter: brightness(1) }
}

/* Comet: moving diagonal streak */
.comet {
  position: relative;
  overflow: hidden;
}
.comet::after {
  content: '';
  position: absolute;
  left: -30%;
  top: -10%;
  width: 40%;
  height: 120%;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.6), rgba(255,255,255,0.0));
  transform: rotate(20deg);
  animation: comet 1.6s linear infinite;
}
@keyframes comet { 0% { left: -40% } 100% { left: 120% } }

/* Confetti pieces */
.confetti { position: relative; overflow: hidden }
.confetti .confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  opacity: 0.95;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes confetti-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1 }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.95 }
}

/* Waves: layered gradients moving */
.waves {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  background-size: 200% 200%;
  animation: waves 8s linear infinite;
}
@keyframes waves { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }

/* Color cycle: rotate hue */
.colorcycle { animation: colorcycle 6s linear infinite; filter: hue-rotate(0deg); }
@keyframes colorcycle { 0% { filter: hue-rotate(0deg) } 100% { filter: hue-rotate(360deg) } }

.star-controls { margin-top: 0.6rem; display:flex; gap:1rem; align-items:center }
.star-controls label { font-size: 0.9rem }

.multi-effects { margin-top: 0.8rem }
.multi-effects h3 { margin: 0 0 0.4rem 0 }
.effect-options { display:flex; flex-wrap:wrap; gap:0.6rem }
.effect-options label { display:flex; gap:0.4rem; align-items:center; background:#fbfbfc; padding:0.25rem 0.5rem; border-radius:6px }
.presets { margin-top:0.6rem; display:flex; gap:0.5rem }
.presets button { padding:0.35rem 0.6rem; border-radius:6px; cursor:pointer }
.presets button#apply_effects { background: linear-gradient(90deg,#007aff,#005ce6); color: white; padding: 0.6rem 1rem; font-weight:700; border:none }
.presets button { box-shadow: 0 2px 6px rgba(0,0,0,0.08) }

/* Countdown overlay on visitor screen */
.countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
}
.count-number {
  font-size: clamp(36px, 8vw, 96px);
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* effect groups */
.effects { display:flex; gap:1rem; margin-top:0.6rem }
.effect-group { background:#fff; padding:0.6rem; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,0.04) }
.effect-group h4 { margin:0 0 0.4rem 0; font-size:0.95rem }
.effect-group .effect { margin:0.2rem }

.help { margin: 0.25rem 0 0.8rem 0; color: #333; font-size: 0.95rem }
.help-small { margin: 0.2rem 0 0.6rem 0; color:#666; font-size:0.85rem }

/* make swatches easier to tap on touch devices */
.swatch { width: 56px; height: 56px; }

/* full-screen rules for the visitor show area only (when #show_screen is on the body)
   Control page uses a div#show_screen preview and should not be fullscreen. */
body#show_screen, body#show_screen > #screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* control page preview: small window on the right */
.control-preview {
  position: fixed;
  right: 1rem;
  top: 1rem;
  width: 360px;
  height: 210px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  background: #000;
  z-index: 1000;
}
.control-preview #screen { width:100%; height:100%; }

/* quick flash used by beat detection for preview */
.beat-flash {
  animation: beat-flash 120ms ease-in-out 1;
  box-shadow: 0 0 40px rgba(255,255,255,0.22) inset;
  filter: brightness(1.8) saturate(1.2);
}
@keyframes beat-flash { 0% { transform: scale(1) } 50% { transform: scale(1.02) } 100% { transform: scale(1) } }

/* nebula layers */
.nebula { overflow: hidden }
.nebula .nebula-layer { position:absolute; inset:0; background: radial-gradient(circle at 20% 30%, rgba(255,120,180,0.06), transparent), radial-gradient(circle at 80% 60%, rgba(100,180,255,0.04), transparent); mix-blend-mode: screen; animation: nebula-move 18s linear infinite }
@keyframes nebula-move { 0% { transform: translate(0,0) } 50% { transform: translate(-6%, 4%) } 100%{ transform: translate(0,0) } }

/* sparkle effect */
.sparkle .spark { position:absolute; width:2px; height:2px; background: #fff; border-radius:50%; box-shadow:0 0 6px rgba(255,255,255,0.8); opacity:0; animation: sparkle 1.2s linear infinite }
@keyframes sparkle { 0% { transform: scale(0.6); opacity:0 } 40% { opacity:1; transform: scale(1.2) } 100% { opacity:0; transform: scale(0.6) } }

/* Aurora: flowing soft gradients */
.aurora { background: linear-gradient(120deg, rgba(0,255,204,0.06), rgba(0,68,255,0.06)); animation: aurora 10s ease-in-out infinite; }
@keyframes aurora { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }

/* Shimmer: white shimmering stars overlay */
.shimmer::after { content: ''; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.06), transparent); mix-blend-mode: screen; animation: shimmer 4s linear infinite }
@keyframes shimmer { 0% { transform: translateX(-10%) } 100% { transform: translateX(10%) } }

/* Plasma: moving colorful gradient */
.plasma { background: radial-gradient(circle at 10% 20%, rgba(255,0,120,0.08), transparent), radial-gradient(circle at 80% 80%, rgba(0,120,255,0.06), transparent); animation: plasma 12s linear infinite; }
@keyframes plasma { 0% { transform: scale(1) } 50% { transform: scale(1.02) } 100% { transform: scale(1) } }

/* Kaleidoscope: rotating mirrored shapes */
.kaleidoscope { background: conic-gradient(from 0deg, rgba(255,0,120,0.06), rgba(0,255,180,0.06), rgba(0,120,255,0.06)); animation: kaleido 8s linear infinite; }
@keyframes kaleido { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }

/* Vortex: swirl blur */
.vortex { background: radial-gradient(circle, rgba(255,255,255,0.02), rgba(0,0,0,0.3)); animation: vortex 6s linear infinite; }
@keyframes vortex { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }

/* Fireworks: bursts via pseudo elements */
.fireworks::before, .fireworks::after { content: ''; position:absolute; inset:0; pointer-events:none }
.fireworks { overflow: visible }

/* Snow: falling flakes */
.snow::after { content: ''; position:absolute; inset:0; background-image: radial-gradient(white 1px, transparent 1px); background-size: 6px 6px; animation: snow-fall 10s linear infinite; opacity:0.9 }
@keyframes snow-fall { 0% { transform: translateY(-10%) } 100% { transform: translateY(110%) } }

/* Rain: streaks */
.rain::after { content: ''; position:absolute; inset:0; background-image: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 50%, transparent 50%); background-size: 2px 12px; animation: rain 1s linear infinite; opacity:0.9 }
@keyframes rain { 0% { transform: translateY(-10%) } 100% { transform: translateY(100%) } }

/* Confetti continuous: many falling pieces via JS on visitor if supported */
.confetti_cont { /* fallback visuals */ }

/* Matrix rain effect */
.matrix { background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.95)); color: #0f0; font-family: monospace }

/* Laser beams: animated linear gradients */
.laser { background: radial-gradient(circle at 20% 10%, rgba(255,0,0,0.06), transparent), radial-gradient(circle at 80% 90%, rgba(0,255,0,0.04), transparent); animation: laser 0.8s linear infinite }
@keyframes laser { 0% { background-position: 0% 0% } 100% { background-position: 100% 100% } }

/* Glow wash: soft bloom pulses */
.glowwash { animation: glowwash 3s ease-in-out infinite; filter: blur(6px) saturate(1.1) }
@keyframes glowwash { 0% { opacity: 0.6 } 50% { opacity: 1 } 100% { opacity: 0.6 } }

/* Heartbeat : pulse with strong beat */
.heartbeat { animation: heartbeat 0.6s ease-in-out infinite }
@keyframes heartbeat { 0% { transform: scale(1) } 30% { transform: scale(1.18) } 60% { transform: scale(0.98) } 100% { transform: scale(1) } }

/* small utility: intensity via CSS variable */
.intensity-100 { filter: brightness(1); }
.intensity-150 { filter: brightness(1.5); }
.intensity-200 { filter: brightness(2); }