/* Effect pedals: powder-coated enclosures, jacks on the sides (IN left, OUT
   right, so a chain reads left to right), knobs on top, footswitch below. */

.fx {
  --enc: #4da3c7;
  --enc-dark: #2c7393;
  --ink: #0d2531;
  --ink-dim: #2f5a6b;
  --line: rgba(13, 37, 49, 0.45);
  --plate: rgba(255, 255, 255, 0.18);

  display: flex;
  align-items: stretch;
  width: max-content;
  border-radius: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 60% at 40% 15%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(180deg, var(--enc), var(--enc-dark));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 22px 28px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.4);
  color: var(--ink);
}

.fx-flanger {
  --enc: #7550b5;
  --enc-dark: #4b2f80;
  --ink: #f4eefd;
  --ink-dim: #c8b8e6;
  --line: rgba(244, 238, 253, 0.5);
}
.fx-phaser {
  --enc: #e2762b;
  --enc-dark: #a8491a;
  --ink: #2a1206;
  --ink-dim: #6b3214;
  --line: rgba(42, 18, 6, 0.45);
}
.fx-distortion {
  --enc: #b5232b;
  --enc-dark: #6e1218;
  --ink: #fff0ee;
  --ink-dim: #f0b9b3;
  --line: rgba(255, 240, 238, 0.5);
}
.fx-fuzz {
  --enc: #d9a521;
  --enc-dark: #9a6f0e;
  --ink: #241a04;
  --ink-dim: #5e4710;
  --line: rgba(36, 26, 4, 0.45);
}
.fx-autopan {
  --enc: #c9cdd2;
  --enc-dark: #8c9298;
  --ink: #15191d;
  --ink-dim: #4a5158;
  --line: rgba(21, 25, 29, 0.45);
}
.fx-octaver {
  --enc: #34363d;
  --enc-dark: #1b1c20;
  --ink: #eef0f4;
  --ink-dim: #9aa0aa;
  --line: rgba(238, 240, 244, 0.45);
}
.fx-delay {
  --enc: #2f7552;
  --enc-dark: #1b4a33;
  --ink: #eef6ef;
  --ink-dim: #b2cfbb;
  --line: rgba(238, 246, 239, 0.5);
}
.fx-reverb {
  --enc: #232d63;
  --enc-dark: #11173a;
  --ink: #e9edff;
  --ink-dim: #a9b2e0;
  --line: rgba(233, 237, 255, 0.45);
}
/* a few stars on the reverb */
.fx-reverb .fx-face {
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 14%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 86% 48%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 9% 63%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 55% 72%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 33% 88%, rgba(255, 255, 255, 0.5), transparent 60%);
}

.fx-side {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06));
}
.fx-side-in { border-radius: 16px 0 0 16px; }
.fx-side-out { border-radius: 0 16px 16px 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06)); }
/* The outputs in one column: MIX, WET, DRY (and the octaver's V1, V2). */
.fx-side-out {
  flex-direction: column;
  gap: 8px;
}
.fx-side-out .jack-socket { width: 32px; height: 32px; }

.fx-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 14px 18px;
}

.screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f4f6, #9aa0a6 60%, #5d6267);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 4px;
  height: 1.2px;
  background: #4a4e53;
  transform: rotate(35deg);
}
.screw.tl { top: 8px; left: 2px; }
.screw.tr { top: 8px; right: 2px; }
.screw.bl { bottom: 8px; left: 2px; }
.screw.br { bottom: 8px; right: 2px; }

/* The preset block on the face: ◀ display ▶, then SAVE · SAVE AS · DELETE · PUBLIC. */
.fx-presets { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 228px; }
.fx-preset-row { display: flex; align-items: center; gap: 4px; }
.fx-preset-row .vfd-wrap { flex: 1; min-width: 0; }
.fx .vfd {
  width: 100%;
  height: 32px;
  padding: 3px 7px;
  column-gap: 6px;
  font-size: 11px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 0 1.5px #1d1f21, 0 1px 0 1.5px rgba(255, 255, 255, 0.25);
}
.fx .vfd-num { font-size: 14px; }
.fx .vfd-cat { font-size: 7px; }
.fx .vfd-edited { font-size: 6.5px; padding: 0 3px; }
.fx-preset-btns { display: flex; justify-content: center; gap: 4px; }
.fx .pbtn { height: 18px; min-width: 0; padding: 0 6px; font-size: 7px; letter-spacing: 0.1em; }
.fx .pbtn.arrow { height: 26px; padding: 0 6px; font-size: 8px; }

.fx-knobs {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  justify-items: center;
  row-gap: 4px;
}
.fx-row {
  /* a partial row of knobs, centred under the full ones */
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.fx-switches {
  display: flex;
  gap: 8px;
  align-self: center;
}
.fx-switches ws-switch { min-width: 0; }

/* Controls the current mode does not use are dimmed. */
.fx-delay .knob-division,
.fx-delay.is-sync .knob-time,
.fx-autopan .knob-division,
.fx-autopan.is-sync .knob-rate,
.fx-fuzz .knob-bias,
.fx-reverb .knob-shimmer { opacity: 0.38; transition: opacity 0.15s; }
.fx-delay.is-sync .knob-division,
.fx-autopan.is-sync .knob-division,
.fx-fuzz.is-face .knob-bias,
.fx-reverb.is-shimmer .knob-shimmer { opacity: 1; }

.fx-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 224px;
  padding: 7px 12px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #0a201c, var(--vfd-bg));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(0, 0, 0, 0.35), 0 1px 0 2px rgba(255, 255, 255, 0.12);
  color: var(--vfd);
  font-family: var(--mono);
  text-shadow: 0 0 6px rgba(125, 255, 224, 0.7);
}
.fx-readout b { font-size: 16px; font-weight: 600; }
.fx-readout span { font-size: 10px; letter-spacing: 0.06em; opacity: 0.75; white-space: nowrap; }

.fx-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 18px 5px;
  border-radius: 4px;
  background: var(--plate);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.fx-name { font: 800 22px/1 var(--logo-font); letter-spacing: 0.14em; color: var(--ink); }
.fx-sub { font: 700 7.5px var(--font); letter-spacing: 0.3em; color: var(--ink-dim); }

/* --------------------------------------------------------------- footswitch */

ws-footswitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fs-led {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a35a52, #4d0e08 70%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 1px 0 2px rgba(255, 255, 255, 0.15);
  transition: background 0.1s, box-shadow 0.1s;
}
ws-footswitch.is-on .fs-led {
  background: radial-gradient(circle at 35% 30%, #fff0ea, #ff4b2b 40%, #b3170a);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 12px 3px rgba(255, 75, 43, 0.65);
}
.fs-button {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3c4045 55%, #24272a 72%, #121314);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
.fs-cap {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 38% 30%, #ffffff, #c9ced3 35%, #868c92 75%, #5c6166);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.06s;
}
.fs-button:active .fs-cap { transform: translateY(1.5px) scale(0.97); }
.fs-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }