:root{
  --txt:#111;
  --muted:#60656e;
  --gold:#caa24a;
  --green:#3dff7a;

  --led-x: 66.63%;
  --led-y: 10.50%;

  --screen-x: 27.21%;
  --screen-y: 21.78%;
  --screen-w: 45.51%;
  --screen-h: 38.38%;

  --fs-x: 49.91%;
  --fs-y: 67.90%;

  --fs-hit: clamp(120px, 18vw, 170px);
  --ring: rgba(202,162,74,.28);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  background:#fff;
  color:var(--txt);
}

.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  gap: 10px;
  padding: clamp(12px, 3vw, 24px);
  background:#fff;
}

.pedal{
  position:relative;
  width: min(980px, 94vw);
  aspect-ratio: 3 / 2;
  background: url("pedal.jpg") center/contain no-repeat;
}

.below-status{
  font-size: 13px;
  color: var(--muted);
  user-select:none;
}

/* LED */
.led{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:999px;
  left: var(--led-x);
  top: var(--led-y);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #fff6, #0000 38%),
              radial-gradient(circle at 50% 50%, #ffcc66, #6b3e00);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 10px rgba(255,180,60,.25);
  transition: all .15s ease;
  pointer-events:none;
}
.led.on{
  background: radial-gradient(circle at 35% 35%, #fff7, #0000 38%),
              radial-gradient(circle at 50% 50%, #b8ffd0, #0b5a25);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 14px rgba(61,255,122,.55);
}

/* Screen OFF empty, ON shows */
.screen{
  position:absolute;
  left: var(--screen-x);
  top: var(--screen-y);
  width: var(--screen-w);
  height: var(--screen-h);

  background: transparent;
  border: none;
  box-shadow: none;
  padding: clamp(8px, 1.2vw, 12px);
  display:flex;
  pointer-events:none;

  font-size: clamp(9px, 1.12vw, 13px);
}

.pedal.on .screen{
  border-radius: 1.35em;
  background: linear-gradient(180deg, rgba(12,14,18,.92), rgba(6,7,10,.90));
  border: 2px solid rgba(202,162,74,.60);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  pointer-events:auto;
}

.screen-inner{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap: 0.75em;

  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 1s ease, transform 1s ease;
}
.pedal.on .screen-inner.show{
  opacity: 1;
  transform: translateY(0);
}

.screen-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.8em;
}
.brand{
  font-weight:900;
  letter-spacing:.14em;
  color: rgba(202,162,74,.95);
  font-size: 1em;
}
.fxname{
  font-weight:900;
  letter-spacing:.22em;
  color:#f2f2f2;
  font-size: 1em;
  padding: 0.45em 0.75em;
  border-radius: 0.8em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.controls{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8em;
}

.control{
  border-radius: 1.05em;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 0.75em;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 0.55em;
  min-height: 0;
}

.control label{
  font-size: 0.85em;
  letter-spacing: .12em;
  color: rgba(230,235,240,.72);
  font-weight: 800;
  white-space: nowrap;
}

.control input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height: 2.1em;
  background: transparent;
  margin:0;
}
.control input[type="range"]::-webkit-slider-runnable-track{
  height: 0.72em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(202,162,74,.85), rgba(255,255,255,.06));
  border: 1px solid rgba(0,0,0,.35);
}
.control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 999px;
  margin-top: -0.40em;
  background: radial-gradient(circle at 30% 30%, #fff8, #0000 42%),
              radial-gradient(circle at 50% 50%, #f0f0f0, #8f8f8f);
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 0.35em 0.9em rgba(0,0,0,.35);
}

.readout{
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  color: rgba(255,255,255,.82);
  display:flex;
  justify-content:flex-end;
}

/* ===== Center vertical slider-style toggles (match your slider look) ===== */
.toggles{
  border-radius: 1.05em;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 0.75em;
  min-height: 0;
}

/* two toggles side-by-side in the middle card */
.toggles-vertical{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.8em;
}

.vtoggle{
  flex: 1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap: 0.55em;
}

.vtoggle-label{
  font-size: 0.85em;
  letter-spacing: .12em;
  color: rgba(230,235,240,.72);
  font-weight: 900;
  text-align:center;
  white-space: nowrap;
}

/* Vertical slider switch */
.vslider{
  position: relative;
  width: clamp(26px, 3.2vw, 34px);
  height: clamp(68px, 7.2vw, 88px);
  display:block;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.vslider input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* Track background (dark) */
.vtrack{
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* Gold “active rail” like your slider bar */
.vtrack::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 14%;
  bottom: 14%;
  width: 54%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(202,162,74,.95), rgba(202,162,74,.28));
  filter: saturate(1.05);
  opacity: .55;
  transition: opacity .18s ease;
}

/* Knob (silver ball) */
.vknob{
  position:absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  /* silver sphere similar to slider thumb */
  background:
    radial-gradient(circle at 30% 30%, #fff9, #0000 44%),
    radial-gradient(circle at 50% 50%, #f0f0f0, #8f8f8f);
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 0.35em 0.9em rgba(0,0,0,.35);
  transition: top .18s ease, filter .18s ease;
  pointer-events:none;

  /* OFF position (bottom) */
  top: calc(100% - (78% + 6%));
}

/* ON position (top) + brighter rail */
.vslider input:checked ~ .vknob{
  top: 6%;
}
.vslider input:checked ~ .vtrack::after{
  opacity: .95;
}

/* Focus ring */
.vslider input:focus-visible ~ .vtrack{
  outline: 2px solid rgba(202,162,74,.55);
  outline-offset: 2px;
}

/* ===== Footswitch ===== */
.footswitch{
  position:absolute;
  left: var(--fs-x);
  top: var(--fs-y);
  transform: translate(-50%, -50%);
  width: var(--fs-hit);
  height: var(--fs-hit);

  background: transparent;
  border: none;
  cursor:pointer;

  display:grid;
  place-items:center;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.footswitch:focus{ outline:none; }

.fs-cap{
  width: min(64px, 7.5vw);
  height: min(64px, 7.5vw);
  min-width: 46px;
  min-height: 46px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: transform .08s ease, box-shadow .10s ease;
  pointer-events:none;
}
.footswitch.pressing .fs-cap{
  transform: translateY(2px);
  box-shadow: 0 0 0 4px var(--ring);
}

.fs-label{
  position:absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing:.14em;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  user-select:none;
  pointer-events:none;
}

@media (max-width:520px){
  .below-status{ font-size: 12px; }
}