/* ============ Base / Background ============ */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ height:auto; }

/* fallback first */
body{ min-height:100vh; }
/* prefer dvh on modern mobile */
@supports (min-height: 100dvh){
  body{ min-height:100dvh; }
}

body{
  position:relative;              /* so .floaties (absolute) anchors to the page */
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* panel is no longer fixed, so no big bottom padding needed */
  padding-bottom:0;

  /* visuals */
  color:#fff;
  font-family:system-ui, sans-serif;
  background:linear-gradient(120deg,#ff004c,#ff7a00,#ffd400,#39ff14,#00eaff,#7a5cff,#ff00e5,#ff004c);
  background-size:400% 400%;
  animation:bgshift 18s ease infinite;
}

@keyframes bgshift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ============ Floaties (stickers) ============ */
/* Scroll WITH the page now (not fixed) */
.floaties{
  position:absolute;              /* was: fixed */
  inset:0;
  z-index:0;
  pointer-events:none;
}
.floaties img{
  position:absolute;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px #0008);
  will-change:transform;
}

/* ============ Site header ============ */
.site-header{
  position:relative; z-index:15; width:100%; text-align:center;
  margin:16px 0 28px; pointer-events:none;
}
.site-header img{
  display:block; margin:0 auto; max-width:90vw; height:auto;
  filter: drop-shadow(0 6px 12px #000a); user-select:none;
}
.site-header.fallback img{ display:none; }
.site-header.fallback::after{
  content: attr(data-fallback);
  display:block; font-weight:900; letter-spacing:.04em;
  font-size: clamp(28px, 7vw, 96px);
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

/* ============ Control panel (scrolls with page) ============ */
.panel{
  /* was: fixed at bottom — now part of normal flow */
  position:relative;
  margin:0 auto 16px;             /* center + bottom space */
  width:min(1200px, 94vw);
  padding:10px; border-radius:16px;
  background:linear-gradient(to top,#000c,#0007,#0000);
  backdrop-filter:blur(6px);
  z-index:20;
}
.topbar{
  display:flex; justify-content:center; align-items:center;
  gap:14px; margin-bottom:12px;
}
.stopall{ width:165px; cursor:pointer; user-select:none; transition:transform .1s ease; }
.stopall:active{ transform:scale(0.96); }
.record{ width:200px; cursor:pointer; user-select:none; transition: filter .15s ease, transform .1s ease; }
.record:active{ transform: scale(.96); }

/* BRIGHT RED glow while recording */
.record.rec-on{
  filter:
    drop-shadow(0 0 10px #ff1744)
    drop-shadow(0 0 24px #ff1744)
    drop-shadow(0 0 48px #ff1744)
    saturate(1.25) brightness(1.2);
}

/* ============ Tracks row ============ */
.tracks{
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center; align-items:flex-start;
}

.track{
  position:relative; width:220px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px; border-radius:12px; background:#ffffff14;
  box-shadow:0 4px 14px #0006 inset, 0 1px 6px #0005;
}

/* Buttons / headers */
.track img.no{
  width:90px; cursor:pointer; user-select:none; transition:transform .08s ease;
}
.track img.no:active{ transform:scale(0.92); }

.track img.header{
  width:min(200px, 100%); height:auto;
  cursor:pointer; user-select:none;
  filter:drop-shadow(0 6px 12px #0006);
  transition:transform .08s ease;
}
.track img.header:active{ transform:scale(0.96); }

/* header click flash */
.header.flash{ animation:glow 500ms ease-out; }
@keyframes glow{
  0%{filter:brightness(1) drop-shadow(0 0 0px #fff)}
  35%{filter:brightness(3) drop-shadow(0 0 40px #fff)}
  100%{filter:brightness(1) drop-shadow(0 0 0px #fff)}
}

/* NO & STOP ALL red flash */
.no.flash,
.stopall.flash{
  animation: noglow 500ms ease-out;
}
@keyframes noglow{
  0%   { filter: drop-shadow(0 0 0px #ff1744) brightness(1); }
  30%  { filter: drop-shadow(0 0 30px #ff1744) brightness(2); }
  100% { filter: drop-shadow(0 0 0px #ff1744) brightness(1); }
}

/* ============ FX dropdown (vertical) ============ */
.fx-toggle{
  background:#ffffff22; border:1px solid #ffffff44; color:#fff;
  border-radius:8px; padding:6px 10px; cursor:pointer; user-select:none;
  font-weight:600; letter-spacing:.5px;
}

/* floating dropdown */
.fx{
  position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%);
  width:320px; max-width:92vw;
  display:none; flex-direction:column; gap:10px;
  z-index:50; pointer-events:auto;

  background:rgba(0,0,0,.28);
  border:1px solid #ffffff33; padding:10px; border-radius:10px;
  box-shadow:0 20px 40px #0008, inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(6px);

  /* internal scroll if tall */
  max-height: min(70vh, 520px);
  overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.fx.open{ display:flex; }
.fx.fx-up{ top:auto; bottom:calc(100% + 10px); }

/* FX blocks and sliders */
.ctrl{
  width:100%;
  display:flex; flex-direction:column; gap:6px;
  background:#00000033;
  border:1px solid #ffffff22; padding:10px; border-radius:8px;
}
.ctrl h4{ margin:0; font-size:12px; font-weight:700; opacity:.9; }
.row{ display:flex; align-items:center; gap:10px; }
.row label{ font-size:11px; opacity:.85; min-width:64px; }
.row input[type=range]{ flex:1; pointer-events:auto; }

select, input[type=range]{
  -webkit-appearance:none; appearance:none;
  accent-color:#ffd400; background:#111; color:#fff;
  border-radius:6px; border:1px solid #ffffff33;
}
input[type=range]{ height:14px; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid #000; box-shadow:0 0 6px #0007;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid #000; box-shadow:0 0 6px #0007;
}

/* ============ Mobile tweaks ============ */
@media (max-width:600px){
  /* panel now scrolls with page; spacing can be a touch bigger if desired */
  .panel{ margin:0 auto 20px; }
}