:root {
  color-scheme: dark;
  --dock-height: 118px;
  --text: #f6f7ff;
  --panel: rgba(9, 12, 28, 0.94);
  --line: rgba(255,255,255,0.12);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #050610;
}
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(69, 84, 190, 0.18), transparent 42%),
    linear-gradient(180deg, #0a0c15 0%, #05060c 100%);
}
button, select, input { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }

#appShell {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.topbar {
  min-height: 84px;
  padding: 13px 24px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 18, 0.74);
  backdrop-filter: blur(14px);
  z-index: 5;
}
.brand-block { min-width: 180px; }
.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  color: #d1ad69;
  font-weight: 900;
}
h1 {
  margin: 2px 0 0;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1;
  letter-spacing: .02em;
}
.status-cluster { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.status-pill {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  color: #d9ddf3;
}

.stage-wrap { position: relative; min-height: 0; overflow: hidden; }
#playSurface { width: 100%; height: 100%; display: block; min-height: 0; }
.guide-copy { pointer-events: none; }
.stage-title {
  font-size: 31px;
  font-weight: 900;
  letter-spacing: .16em;
  fill: rgba(255,248,232,.93);
}
.stage-subtitle {
  font-size: 18px;
  font-weight: 600;
  fill: rgba(214,204,185,.74);
}
.stage-help {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
  fill: rgba(218, 211, 195, .62);
}

/* console */
.console-shadow {
  fill: rgba(0,0,0,.45);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.4));
}
.console-frame {
  fill: url(#consoleFrameGrad);
  stroke: rgba(244,220,168,.55);
  stroke-width: 4;
}
.console-trim.outer,
.console-trim.inner {
  fill: none;
  stroke: url(#consoleTrimGrad);
  stroke-width: 11;
  opacity: .96;
}
.console-bed {
  fill: url(#consoleFrameGrad);
  stroke: rgba(26,18,12,.68);
  stroke-width: 2;
}
.console-inner {
  fill: url(#consoleBedGrad);
  stroke: rgba(248,220,164,.18);
  stroke-width: 1.8;
}
.console-grille {
  fill: url(#speakerGrille);
  stroke: rgba(255,211,145,.15);
  stroke-width: 1.4;
  opacity: .95;
}
.console-reflection { fill: rgba(255,239,198,.08); }
.rivet-row circle {
  fill: #a27848;
  stroke: #f2d8a4;
  stroke-width: 1.6;
}
.ornament-ring {
  fill: rgba(86,57,26,.88);
  stroke: url(#consoleTrimGrad);
  stroke-width: 7;
}
.ornament-core {
  fill: rgba(21,24,29,.95);
  stroke: rgba(255,221,163,.42);
  stroke-width: 2;
}
.spotlight-sweep,
.spotlight-spark {
  mix-blend-mode: screen;
  pointer-events: none;
}

/* jewels */
.jewel-shadow {
  fill: rgba(0,0,0,.34);
  filter: blur(6px);
  pointer-events: none;
}
.jewel-glow {
  fill: hsl(var(--hue) 96% 60% / .82);
  opacity: 0;
  filter: blur(15px);
  pointer-events: none;
  transition: opacity 120ms linear;
}
.gem-image {
  pointer-events: none;
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.35))
    drop-shadow(0 0 1px rgba(255,255,255,.32));
  transition: filter 120ms linear, transform 120ms linear;
}
.jewel-trace {
  fill: none;
  stroke: rgba(255,241,212,.42);
  stroke-width: 1.2;
  pointer-events: none;
}
.jewel-hit {
  fill: rgba(255,255,255,.001);
  stroke: transparent;
  pointer-events: auto;
}
.note-plaque {
  fill: rgba(46, 32, 18, .92);
  stroke: rgba(243, 219, 166, .55);
  stroke-width: 1.1;
  pointer-events: none;
}
.note-label {
  pointer-events: none;
  fill: rgba(255,247,230,.98);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
}
.slot-label {
  pointer-events: none;
  fill: rgba(243,234,206,.70);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
.jewel.active .jewel-glow { opacity: .92; }
.jewel.active .gem-image {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.55))
    drop-shadow(0 0 20px hsl(var(--hue) 100% 65% / .75))
    brightness(1.10)
    saturate(1.08);
}
.jewel.active .jewel-trace {
  stroke: rgba(255,255,255,.85);
  stroke-width: 1.8;
}
.jewel.active .note-plaque {
  fill: rgba(80, 58, 31, .98);
  stroke: rgba(255, 236, 182, .85);
}

/* fingers */
.finger-marker { transform-box: fill-box; transform-origin: center; }
.finger-marker.hidden { display: none; }
.finger-halo { fill: none; stroke-width: 7; filter: url(#softGlow); opacity: .96; }
.finger-left { stroke: #50d9ff; }
.finger-right { stroke: #ff67e7; }
.finger-core { fill: white; stroke: rgba(5,8,20,.75); stroke-width: 5; }

/* start overlay */
.start-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 35%, rgba(31, 42, 103, .34), rgba(4,5,12,.72));
  z-index: 10;
}
.start-overlay.hidden { display: none; }
.start-card {
  width: min(520px, 92vw);
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(10, 13, 31, .90);
  box-shadow: 0 30px 80px rgba(0,0,0,.48);
  backdrop-filter: blur(18px);
}
.start-card h2 { margin: 12px 0 8px; font-size: 30px; }
.start-card p { color: #c5cae0; line-height: 1.55; margin: 0 auto 22px; max-width: 420px; }
.start-gem {
  margin: 0 auto;
  width: 96px;
  height: 76px;
  clip-path: polygon(18% 0%, 82% 0%, 100% 25%, 100% 75%, 82% 100%, 18% 100%, 0% 75%, 0% 25%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,0) 24%),
    linear-gradient(315deg, rgba(255,255,255,.40), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 42% 26%, #d8f3ff 0 10%, #7bc4ff 17%, #1746d0 56%, #08185f 100%);
  border: 2px solid rgba(255,255,255,.54);
  box-shadow: 0 0 30px rgba(82,128,255,.7), inset 0 0 0 2px rgba(255,255,255,.20);
  transform: rotate(-6deg);
}
.primary-button {
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  color: #080812;
  background: linear-gradient(180deg, #ffffff, #cdd6ff);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(145,163,255,.28);
}
.primary-button:disabled { opacity: .55; cursor: wait; }
.start-status { min-height: 20px; margin-top: 13px; color: #9ea8d3; font-size: 12px; }

/* controls */
.control-dock {
  position: relative;
  z-index: 20;
  min-height: var(--dock-height);
  padding: 14px 20px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 2fr) minmax(170px, .8fr) auto;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: var(--panel);
  box-shadow: 0 -16px 50px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.dock-copy { min-width: 0; }
.dock-label { display: block; font-size: 10px; color: #c8a96d; font-weight: 900; letter-spacing: .18em; margin-bottom: 5px; }
#patchReadout { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.instrument-picker { min-width: 0; display: grid; gap: 6px; }
.instrument-label {
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .14em;
  color: #f0e2bf;
}
.instrument-controls { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; }
.dock-button, .lock-button, #instrumentSelect {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #f5f6ff;
  border-radius: 14px;
  min-height: 46px;
}
#instrumentSelect {
  min-height: 50px;
  padding: 0 42px 0 15px;
  border: 2px solid rgba(199, 211, 255, .78);
  background: #f4f6ff;
  color: #11162b;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(90,110,190,.18);
}
#instrumentSelect option, #instrumentSelect optgroup { color: #111; background: white; }
#instrumentSelect:hover,
#instrumentSelect:focus {
  border-color: white;
  outline: 3px solid rgba(118, 145, 255, .33);
  outline-offset: 2px;
}
.dock-button {
  min-height: 50px;
  border: 2px solid rgba(255,255,255,.19);
  background: rgba(255,255,255,.11);
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
}
.volume-control { display: grid; gap: 7px; font-size: 12px; color: #c6cbe2; }
.volume-control input { width: 100%; }
.lock-button { padding: 0 16px; cursor: pointer; white-space: nowrap; font-weight: 800; }
.lock-button.locked { border-color: rgba(255,196,103,.42); background: rgba(162,104,16,.18); color: #ffd993; }
.control-dock.controls-locked select,
.control-dock.controls-locked .dock-button { opacity: .45; }
.safety-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.panic-button {
  min-height: 50px;
  padding: 0 16px;
  border: 2px solid rgba(255, 116, 116, .72);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(145, 28, 39, .92), rgba(92, 14, 24, .96));
  color: #fff3f3;
  font-weight: 950;
  letter-spacing: .055em;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.14);
}
.panic-button:hover,
.panic-button:focus-visible {
  border-color: #ffd2d2;
  outline: 3px solid rgba(255, 93, 93, .22);
  outline-offset: 2px;
}
.panic-button.fired {
  background: linear-gradient(180deg, rgba(30, 137, 88, .96), rgba(18, 93, 60, .98));
  border-color: rgba(142, 255, 195, .86);
}

footer {
  height: 30px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  color: #777f9f;
  background: #050610;
}

/* coffee */
.coffee-drawer {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
}
.coffee-tab {
  width: 40px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.12);
  border-left: none;
  border-radius: 0 14px 14px 0;
  background: rgba(16, 18, 36, .82);
  color: rgba(255,255,255,.82);
  cursor: pointer;
  backdrop-filter: blur(10px);
  font-size: 20px;
}
.coffee-panel {
  overflow: hidden;
  width: 0;
  opacity: 0;
  transition: width .22s ease, opacity .18s ease;
}
.coffee-panel a { display: block; }
.coffee-panel img { display: block; }
.coffee-drawer.open .coffee-panel { width: 230px; opacity: 1; }

#cameraSource {
  position: fixed;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  left: -10px;
  top: -10px;
}

@media (max-width: 1250px) and (min-width: 761px) {
  .control-dock {
    grid-template-columns: minmax(180px, .8fr) minmax(360px, 1.7fr) minmax(145px, .65fr) minmax(300px, 1fr);
  }
  .safety-controls { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .topbar { align-items: flex-start; }
  .status-cluster { max-width: 56%; }
  .control-dock { grid-template-columns: 1fr 2fr auto; }
  .volume-control { display: none; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  #appShell { min-height: 100svh; grid-template-rows: auto minmax(430px, 1fr) auto auto; }
  .topbar { padding: 10px 14px; display: block; }
  .status-cluster { margin-top: 10px; max-width: none; justify-content: flex-start; }
  .stage-title { font-size: 26px; }
  .stage-subtitle { font-size: 16px; }
  .control-dock { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .dock-copy { text-align: center; }
  .lock-button { min-height: 42px; }
  .safety-controls { grid-template-columns: 1fr; }
  footer { height: auto; min-height: 36px; padding: 8px 14px; flex-direction: column; justify-content: center; gap: 3px; text-align: center; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .topbar {
    min-height: 68px;
    padding-top: 9px;
    padding-bottom: 8px;
  }
  .control-dock {
    min-height: 102px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  footer { height: 24px; }
}