*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #111;
  color: #eee;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  height: 100dvh;
  width: 100vw;
}

/* --- Phone --- */
#tap-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #111; z-index: 100;
}

#start-btn {
  background: #222;
  border: 2px solid #444;
  color: #aaa;
  /* vw caps keep the button inside the tiny phones of /preview */
  font-size: min(1.4rem, 5.7vw);
  padding: min(24px, 6vw) min(48px, 12vw);
  border-radius: min(16px, 4vw);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#start-btn:active {
  background: #333;
  border-color: #666;
  transform: scale(0.96);
}

#start-btn.connecting {
  color: #665;
  border-color: #553;
}

#start-btn.error {
  color: #a55;
  border-color: #733;
}

#light {
  position: fixed; inset: 0;
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Oversized so the blur's faded edge stays off screen */
#viz {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  filter: blur(6vmin);
}

#symbol {
  position: relative;
  font-size: 20vw;
  opacity: 0.25;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}


/* --- Controller --- */
.ctrl-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
  height: 100dvh;
  overflow-y: auto;
}

.ctrl-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.phone-badge {
  background: #333;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 1.2rem;
  min-width: 60px;
  text-align: center;
}

.phone-badge span { color: #0f0; font-weight: bold; font-size: 1.4rem; }

.mode-btns, .wave-btns {
  display: flex; gap: 6px;
}

.mode-btns button, .wave-btns button {
  background: #333;
  border: 2px solid #555;
  color: #ccc;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
}

.mode-btns button.active, .wave-btns button.active {
  background: #0a6;
  border-color: #0c8;
  color: #fff;
}

.panic-btn {
  background: #411;
  border: 2px solid #733;
  color: #e99;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.panic-btn:active { background: #a22; color: #fff; }

.ctrl-status {
  font-size: 0.8rem;
  color: #888;
  margin-left: auto;
}

.ctrl-status.warn { color: #e99; }

.ctrl-section {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 16px;
}

.ctrl-section h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.slider-group {
  display: flex;
  gap: 12px;
  justify-content: space-around;
}

.slider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.slider-item label {
  font-size: 0.7rem;
  color: #aaa;
  text-transform: uppercase;
}

.slider-item input[type="range"] {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 120px;
  accent-color: #0a6;
}

.slider-item .val {
  font-size: 0.75rem;
  color: #0a6;
  font-variant-numeric: tabular-nums;
}

.held-notes {
  grid-column: 1 / -1;
  min-height: 32px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.held-note {
  background: #0a6;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: bold;
}

.lfo-section { grid-column: 1 / -1; }

.lfo-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.randomize-btn {
  background: #333;
  border: 2px solid #555;
  color: #ccc;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
  margin-left: auto;
}

.randomize-btn.active {
  background: #a06;
  border-color: #c08;
  color: #fff;
}

.url-override {
  display: flex;
  gap: 8px;
}

.url-override input {
  flex: 1;
  background: #222;
  border: 1px solid #555;
  color: #eee;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
}

.url-override button {
  background: #333;
  border: 2px solid #555;
  color: #ccc;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}

.url-override button:hover { border-color: #0c8; color: #fff; }

#density-section { display: none; }
#density-section.visible { display: block; }

/* --- Preview --- */
.preview {
  display: flex;
  flex-direction: column;
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.preview-bar label { display: flex; align-items: center; gap: 8px; }

.preview-bar input[type="number"] {
  width: 64px;
  background: #222;
  border: 1px solid #555;
  color: #eee;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
}

.preview-bar input[type="range"] { accent-color: #0a6; }

.preview-bar button, .preview-bar a {
  background: #333;
  border: 2px solid #555;
  color: #ccc;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

.preview-bar button { background: #0a6; border-color: #0c8; color: #fff; }
.preview-bar button[hidden] { display: none; }
.preview-bar a { margin-left: auto; }

.preview-hint { text-transform: none; letter-spacing: 0; }
.preview-hint.warn { color: #e99; }
.preview-bar a:hover { border-color: #0c8; color: #fff; }

.preview-grid {
  flex: 1;
  min-height: 0;
  margin: 0 16px 16px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--tile, 100px));
  gap: 10px;
  justify-content: center;
  align-content: center;
}

.preview-grid iframe {
  width: var(--tile, 100px);
  aspect-ratio: 9 / 19.5;
  border: 0;
  border-radius: calc(var(--tile, 100px) * 0.12);
  outline: 2px solid #262626;
  background: #111;
  pointer-events: none; /* a click must not move keyboard focus into a phone */
}

/* --- QR --- */
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 24px;
}

.qr-container canvas, .qr-container img {
  border-radius: 12px;
  max-width: 80vw;
  max-height: 60vh;
}

.qr-url {
  font-size: 1.2rem;
  color: #888;
  word-break: break-all;
  text-align: center;
  padding: 0 20px;
}