/* ============================================================
   SPACECHO — psychedelic RE-201 skin
   A 60s liquid-light-show wrap over a faithful control layout.
   ============================================================ */

:root {
  --ink:       #201a12;
  --ink-soft:  #6b5f4a;
  --neon-o:    #ff6a1a;   /* Roland orange */
  --neon-m:    #ff2d95;   /* magenta */
  --neon-c:    #17e0e0;   /* cyan */
  --neon-y:    #ffd23f;   /* amber */
  --neon-v:    #9b5cff;   /* violet */
  --panel:     #d8cba4;
  --panel-dk:  #b9a877;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  padding: 34px 16px 70px;
  font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #eee;
  background: #05030a;
  display: flex;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
}

/* ---------- liquid light background ------------------------- */
.cosmos {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #2a0d4a 0%, #12061f 45%, #050109 100%);
  filter: saturate(1.25);
}
.blob {
  position: absolute;
  width: 62vmax; height: 62vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
}
.b1 { background: radial-gradient(circle, var(--neon-m) 0%, transparent 66%); top: -22vmax; left: -14vmax; animation: drift1 26s ease-in-out infinite; }
.b2 { background: radial-gradient(circle, var(--neon-c) 0%, transparent 66%); top: -10vmax; right: -20vmax; animation: drift2 32s ease-in-out infinite; }
.b3 { background: radial-gradient(circle, var(--neon-v) 0%, transparent 66%); bottom: -26vmax; left: 10vmax; animation: drift3 38s ease-in-out infinite; }
.b4 { background: radial-gradient(circle, var(--neon-o) 0%, transparent 62%); bottom: -20vmax; right: -6vmax; animation: drift1 30s ease-in-out infinite reverse; }
.b5 { background: radial-gradient(circle, #2b6bff 0%, transparent 64%); top: 24vmax; left: 30vmax; animation: drift2 42s ease-in-out infinite reverse; opacity: .4; }
.cosmos { animation: hue 40s linear infinite; }

@keyframes hue { to { filter: saturate(1.25) hue-rotate(360deg); } }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(16vmax,10vmax) scale(1.18)} 66%{transform:translate(-8vmax,18vmax) scale(.9)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-18vmax,12vmax) scale(1.12)} 66%{transform:translate(10vmax,-8vmax) scale(.95)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(22vmax,-14vmax) scale(.85)} }

.grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .05; mix-blend-mode: overlay;
  animation: grainmove 6s steps(6) infinite;
}
@keyframes grainmove { to { transform: translate(6%, 4%); } }

@media (prefers-reduced-motion: reduce) {
  .cosmos, .blob, .grain { animation: none !important; }
}

/* ---------- the unit --------------------------------------- */
.unit {
  position: relative; z-index: 1;
  width: 100%; max-width: 1040px;
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--neon-m), var(--neon-v), var(--neon-c), var(--neon-o));
  background-size: 300% 300%;
  animation: edge 18s ease infinite;
  box-shadow:
    0 30px 90px rgba(0,0,0,.7),
    0 0 60px rgba(155,92,255,.35),
    0 0 120px rgba(23,224,224,.15);
}
@keyframes edge { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.unit > * { position: relative; }
.unit::before {
  content: ""; position: absolute; inset: 3px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1a1226 0%, #0e0a17 100%);
  z-index: 0;
}
.unit > .badge-row, .unit > .panel, .unit > .mods, .unit > .footnote { z-index: 1; }
.unit { padding: 3px; }
.unit > .badge-row { margin: 15px 18px 8px; }

/* ---------- badge row -------------------------------------- */
.badge-row { display: flex; align-items: center; gap: 20px; }
.maker {
  font: 700 22px/1 Georgia, serif; letter-spacing: .5px;
  color: #fff;
  border: 2px solid rgba(255,255,255,.7); border-radius: 5px;
  padding: 5px 11px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 14px rgba(255,255,255,.25);
}
.model { flex: 1; }
.model-name {
  display: block;
  font: 900 30px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 7px;
  background: linear-gradient(90deg, var(--neon-y), var(--neon-o), var(--neon-m), var(--neon-v), var(--neon-c), var(--neon-y));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: flow 8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,80,200,.5));
}
@keyframes flow { to { background-position: 250% 0; } }
.model-sub { display: block; font-size: 11px; color: #b9a6e6; letter-spacing: .6px; margin-top: 4px; }

.power { display: flex; align-items: center; gap: 14px; }
.power-btn {
  background: #120c1e; color: #f0e6ff; border: 1px solid var(--neon-v);
  border-radius: 4px; padding: 9px 15px; font: 700 11px/1 Arial; letter-spacing: 1.5px;
  cursor: pointer; transition: all .15s;
}
.power-btn:hover { box-shadow: 0 0 12px var(--neon-v); }
.power-btn.on {
  background: var(--neon-o); color: #fff; border-color: var(--neon-y);
  box-shadow: 0 0 18px var(--neon-o), 0 0 34px rgba(255,106,26,.5);
}
.lamps { display: grid; grid-template-columns: auto auto; gap: 5px 7px; align-items: center; }
.lamp { width: 11px; height: 11px; border-radius: 50%; background: #2a2438; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.lamp.lit { background: var(--neon-y); box-shadow: 0 0 12px var(--neon-y), 0 0 22px rgba(255,210,63,.6); }
.lamp.red.lit { background: #ff3b6b; box-shadow: 0 0 12px #ff3b6b, 0 0 22px rgba(255,59,107,.6); }
.lamp-lbl { font-size: 9px; letter-spacing: 1px; color: #a291c9; }

/* ---------- panel ------------------------------------------ */
.panel {
  margin: 0 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10)),
    linear-gradient(180deg, var(--panel) 0%, var(--panel-dk) 100%);
  border-radius: 10px;
  padding: 18px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 40px rgba(120,60,20,.12), 0 6px 18px rgba(0,0,0,.5);
}
/* iridescent oil-slick sheen over the panel */
.panel { position: relative; overflow: hidden; }
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,45,149,.10), rgba(23,224,224,.10), rgba(155,92,255,.10), transparent 70%);
  background-size: 250% 100%;
  animation: sheen 14s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes sheen { to { background-position: 250% 0; } }
.panel > * { position: relative; z-index: 1; }

/* transport window */
.tape-window {
  background: radial-gradient(120% 140% at 50% 0%, #0f0b1c 0%, #06040d 100%);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 18px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(155,92,255,.25), 0 0 20px rgba(155,92,255,.12);
}
#tapeCanvas { width: 460px; max-width: 100%; height: 200px; }
.head-times {
  display: flex; flex-direction: column; gap: 9px;
  font: 11px/1 "SF Mono", Menlo, monospace; color: #8b7fb8; letter-spacing: 1px;
}
.head-times b { color: var(--neon-y); font-weight: 600; text-shadow: 0 0 8px rgba(255,210,63,.5); }
.head-times .spd b { color: var(--neon-c); text-shadow: 0 0 8px rgba(23,224,224,.5); }

/* control clusters */
.controls { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.cluster { display: flex; flex-direction: column; align-items: center; }
.cluster-label {
  font: 800 9px/1 Arial; letter-spacing: 2px; color: var(--ink-soft); margin-top: 8px;
}
#vuCanvas { width: 210px; height: 116px; filter: drop-shadow(0 0 10px rgba(255,140,40,.25)); }

.mode-cluster { padding-top: 2px; }
.mode-knob { width: 134px; height: 134px; cursor: grab; touch-action: none; filter: drop-shadow(0 0 10px rgba(155,92,255,.35)); }
.mode-read {
  margin-top: 6px; font: 800 11px/1 Arial; color: var(--neon-o); letter-spacing: .4px;
  white-space: nowrap; text-shadow: 0 0 10px rgba(255,106,26,.5);
}

.knobs { flex: 1; align-items: flex-start; gap: 10px; }
.knob-row { display: flex; gap: 16px; flex-wrap: wrap; }
.knob-cell { display: flex; flex-direction: column; align-items: center; width: 76px; }
.knob-cell.small { width: 64px; }
.knob { width: 64px; height: 64px; cursor: grab; touch-action: none; transition: filter .2s; }
.knob:hover { filter: drop-shadow(0 0 8px rgba(255,106,26,.5)); }
.knob-cell.small .knob { width: 52px; height: 52px; }
.knob-cell label {
  margin-top: 6px; font: 800 8.5px/1.2 Arial; letter-spacing: .8px;
  color: var(--ink-soft); text-align: center;
}

/* jack strip */
.jacks {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(120,60,20,.25);
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.jack-group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.jack-label { font: 800 9px/1 Arial; letter-spacing: 1.5px; color: var(--ink-soft); }
.chk { font-size: 10px; color: var(--ink-soft); display: flex; align-items: center; gap: 3px; }

.jackbtn, .stomp, .mini {
  cursor: pointer; transition: all .15s;
}
.jackbtn {
  background: linear-gradient(180deg, #2a2036, #1a1326); color: #eadcff;
  border: 1px solid #3c2c58; border-radius: 6px;
  padding: 8px 13px; font: 800 10px/1.3 Arial; letter-spacing: 1px;
}
.jackbtn small { font-weight: 400; opacity: .6; letter-spacing: 0; }
.jackbtn:hover { border-color: var(--neon-c); box-shadow: 0 0 12px rgba(23,224,224,.4); }
.jackbtn.on {
  background: linear-gradient(180deg, var(--neon-o), #c8410f); color: #fff; border-color: var(--neon-y);
  box-shadow: 0 0 16px rgba(255,106,26,.6);
}
.status { font-size: 10px; color: var(--ink-soft); font-style: italic; }

.mini {
  background: #2a2036; color: #eadcff; border: 1px solid #3c2c58;
  border-radius: 5px; padding: 6px 10px; font: 800 9px/1 Arial; letter-spacing: 1px;
}
.mini:hover { border-color: var(--neon-c); box-shadow: 0 0 10px rgba(23,224,224,.35); }
.mini:disabled { opacity: .4; cursor: default; box-shadow: none; }

.switch3 { display: flex; border: 1px solid #3c2c58; border-radius: 6px; overflow: hidden; }
.switch3 button {
  background: #221a30; color: #cbb9e6; border: 0; border-right: 1px solid #3c2c58;
  padding: 7px 13px; font: 800 10px/1 Arial; cursor: pointer; transition: all .15s;
}
.switch3 button:last-child { border-right: 0; }
.switch3 button.on { background: var(--neon-o); color: #fff; box-shadow: inset 0 0 12px rgba(255,210,63,.5); }

.stomp {
  background: linear-gradient(180deg, #221a30, #140e20); color: #e6d9ff;
  border: 1px solid #3c2c58; border-radius: 7px;
  padding: 8px 12px; font: 800 10px/1.3 Arial; letter-spacing: 1px; min-width: 66px;
}
.stomp small { font-weight: 400; opacity: .6; letter-spacing: 0; }
.stomp:hover { box-shadow: 0 0 12px rgba(155,92,255,.4); }
.stomp.on {
  background: linear-gradient(180deg, var(--neon-o), #b93a0d); color: #fff; border-color: var(--neon-y);
  box-shadow: 0 0 18px rgba(255,106,26,.6);
}

/* ---------- service trims ---------------------------------- */
.mods {
  margin: 16px 18px 0; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(155,92,255,.10), rgba(0,0,0,.25));
  border-radius: 10px; border: 1px solid rgba(155,92,255,.2);
}
.mods-title { font: 800 9px/1 Arial; letter-spacing: 2px; color: var(--neon-c); margin-bottom: 12px; text-shadow: 0 0 8px rgba(23,224,224,.4); }
.mods-title span { font-weight: 400; letter-spacing: .5px; opacity: .55; color: #b9a6e6; }
.mods-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mods .knob-cell label { color: #b9a6e6; }
.mods-note { flex: 1; min-width: 260px; font-size: 10.5px; line-height: 1.65; color: #9d8fc4; }
.mods-note b { color: var(--neon-y); }
.mods-note .mini { margin-top: 8px; }

.footnote {
  margin: 14px 24px 18px;
  font-size: 10px; line-height: 1.6; color: #8779ad;
}
.footnote i { color: #b9a6e6; }

/* ---------- splash ----------------------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,3,10,.75); backdrop-filter: blur(6px);
}
.splash.hidden { display: none; }
.splash-card {
  position: relative;
  background: linear-gradient(180deg, #1a1226, #0d0917);
  border: 1px solid rgba(155,92,255,.4);
  color: #eee; padding: 38px 44px; border-radius: 16px; text-align: center; max-width: 440px;
  box-shadow: 0 0 60px rgba(155,92,255,.4), 0 0 120px rgba(255,45,149,.2);
}
.splash-card h1 {
  margin: 0 0 8px; font: 900 34px/1 Arial; letter-spacing: 9px;
  background: linear-gradient(90deg, var(--neon-y), var(--neon-m), var(--neon-c), var(--neon-y));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: flow 6s linear infinite;
}
.splash-card p { margin: 7px 0; color: #cdbdf0; }
.splash-card .small { font-size: 11px; color: #9d8fc4; }
.splash-card .warn { margin-top: 18px; color: var(--neon-o); }
.splash-card button {
  margin-top: 18px; background: var(--neon-o); color: #fff; border: 0;
  border-radius: 6px; padding: 13px 30px; font: 800 12px/1 Arial; letter-spacing: 2px;
  cursor: pointer; box-shadow: 0 0 24px rgba(255,106,26,.6); transition: transform .1s;
}
.splash-card button:hover { transform: scale(1.05); }