:root {
  --bg-dark: #050607;
  --panel-dark: rgba(5, 8, 10, 0.76);
  --panel-glass: rgba(10, 14, 18, 0.72);
  --text-main: #d8e6ee;
  --text-muted: #7e8c96;
  --blue: #61a8ff;
  --purple: #b46dff;
  --cyan: #63f4ff;
  --green: #72ff9d;
  --gold: #ffe56b;
  --pink: #ff7cae;
  --orange: #ff9d3f;
  --font-head: 'Chakra Petch', Arial, Helvetica, sans-serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  overscroll-behavior: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hamlet-desk-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, #0c1014 0%, #030405 75%);
}

/* ============ DESK SHELL ============ */
/* Size + centring are handled by the shared interactive-scene (.iscene-stage):
   a fixed 1600x1000 design canvas scaled by ONE uniform transform to fit any
   screen, so the deck art and every control move together and stay aligned. */
.desk-shell {
  border-radius: 18px;
  overflow: visible;
  box-shadow: 0 30px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(120,160,220,0.08);
}

.desk-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  border-radius: 18px;
}

.overlay { position: absolute; }

.brand-strip {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.brand-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(0.65rem, 1.4cqw, 1.1rem);
  color: #9fb4c4;
}
.brand-sub {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(0.5rem, 0.8cqw, 0.65rem);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ============ GENERIC PANEL LOOK ============ */
.input-panel, .send-panel {
  left: 5.6%;
  top: 5%;
  width: 27%;
  height: 20%;
  background: var(--panel-dark);
  border: 1px solid rgba(120,180,255,0.22);
  border-radius: 10px;
  padding: 0.5% 1%;
  backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 10px rgba(0,0,0,0.6), 0 0 18px rgba(70,120,200,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.send-panel {
  left: auto;
  right: 5.6%;
}

.panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.panel-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.55rem, 0.95cqw, 0.8rem);
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(99,244,255,0.4);
}

.tabs {
  display: flex;
  gap: 3px;
}
.tab-btn {
  font-family: var(--font-head);
  font-size: clamp(0.45rem, 0.72cqw, 0.65rem);
  padding: 2px 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(120,160,220,0.25);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
  min-height: 20px;
}
.tab-btn:hover { color: var(--text-main); border-color: rgba(120,180,255,0.5); }
.tab-btn.active {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(99,244,255,0.4);
}
.tab-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-top: 2px;
}
.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(120,160,220,0.3); border-radius: 3px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.upload-row { display: flex; }
.btn-embed {
  font-family: var(--font-head);
  font-size: clamp(0.5rem, 0.78cqw, 0.72rem);
  background: rgba(0,0,0,0.5);
  color: var(--text-main);
  border: 1px solid rgba(120,160,220,0.35);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: box-shadow .15s, border-color .15s, transform .08s;
  min-height: 24px;
}
.btn-embed:hover { border-color: var(--blue); box-shadow: 0 0 10px rgba(97,168,255,0.45); }
.btn-embed:active { transform: scale(0.96); }
.btn-embed:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-upload { width: 100%; justify-content: center; color: var(--blue); border-color: rgba(97,168,255,0.4); }
.btn-save-draft { width: 100%; justify-content: center; color: var(--green); border-color: rgba(114,255,157,0.4); margin-top: 4px; }
.btn-save-draft:hover { box-shadow: 0 0 10px rgba(114,255,157,0.45); }

.hidden-file-input { display: none; }

.or-divider {
  text-align: center;
  font-size: clamp(0.45rem, 0.6cqw, 0.6rem);
  color: var(--text-muted);
  margin: 3px 0;
  letter-spacing: 0.1em;
}

.embed-input {
  width: 100%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(120,180,255,0.28);
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.8);
  color: var(--text-main);
  border-radius: 6px;
  padding: 4px 7px;
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 0.82cqw, 0.75rem);
  outline: none;
}
.embed-input::placeholder { color: var(--text-muted); }
.embed-input:focus { border-color: var(--cyan); box-shadow: 0 0 8px rgba(99,244,255,0.4), inset 0 1px 6px rgba(0,0,0,0.8); }
.embed-input.sm { padding: 3px 6px; font-size: clamp(0.5rem, 0.75cqw, 0.68rem); }

.dropdown-results {
  margin-top: 4px;
  max-height: 90px;
  overflow-y: auto;
  border-radius: 6px;
}
.dropdown-item {
  padding: 4px 7px;
  border: 1px solid rgba(120,160,220,0.15);
  border-top: none;
  cursor: pointer;
  transition: background .12s;
  font-size: clamp(0.5rem, 0.75cqw, 0.68rem);
}
.dropdown-item:first-child { border-top: 1px solid rgba(120,160,220,0.15); border-radius: 6px 6px 0 0; }
.dropdown-item:last-child { border-radius: 0 0 6px 6px; }
.dropdown-item:hover, .dropdown-item:focus-visible { background: rgba(97,168,255,0.14); outline: none; }
.dd-primary { color: var(--text-main); font-weight: 600; display: block; }
.dd-secondary { color: var(--text-muted); font-size: 0.85em; display: block; }

.meta-preview {
  margin-top: 5px;
  border: 1px solid rgba(180,109,255,0.35);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: clamp(0.48rem, 0.72cqw, 0.65rem);
  color: var(--purple);
  background: rgba(180,109,255,0.06);
}
.meta-preview strong { color: var(--text-main); }

.local-note {
  margin-top: 4px;
  font-size: clamp(0.42rem, 0.6cqw, 0.58rem);
  color: var(--text-muted);
  font-style: italic;
}

.collection-list { list-style: none; margin: 0; padding: 0; max-height: 140px; overflow-y: auto; }
.collection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(120,160,220,0.15);
  font-size: clamp(0.5rem, 0.75cqw, 0.68rem);
}
.collection-item span { color: var(--text-main); }
.load-btn {
  font-family: var(--font-head);
  font-size: clamp(0.42rem, 0.6cqw, 0.58rem);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 20px;
}
.load-btn:hover { box-shadow: 0 0 8px rgba(114,255,157,0.5); }
.load-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.field-row { margin-bottom: 4px; display: flex; flex-direction: column; gap: 1px; }
.field-row label { font-size: clamp(0.42rem, 0.58cqw, 0.56rem); color: var(--text-muted); letter-spacing: 0.04em; }
.two-col { flex-direction: row; gap: 6px; }
.two-col > div { flex: 1; display: flex; flex-direction: column; gap: 1px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.chip {
  font-family: var(--font-head);
  font-size: clamp(0.48rem, 0.7cqw, 0.65rem);
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(120,160,220,0.3);
  color: var(--text-main);
  border-radius: 14px;
  padding: 3px 9px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  min-height: 22px;
}
.chip:hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(255,229,107,0.4); }
.chip.active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(255,229,107,0.5); }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ============ VINYL PREVIEWS ============ */
.left-vinyl, .right-vinyl {
  left: 6.2%;
  top: 30%;
  width: 25.5%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.right-vinyl { left: auto; right: 6.2%; }

.vinyl-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.vinyl-img[hidden] { display: none; }

.vinyl-label {
  position: relative;
  z-index: 2;
  padding: 6%;
  font-family: var(--font-head);
  color: var(--text-main);
  text-shadow: 0 0 6px rgba(0,0,0,0.9);
}
.vinyl-line-1 {
  display: block;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: clamp(0.6rem, 1.5cqw, 1.15rem);
}
.vinyl-line-2 {
  display: block;
  font-size: clamp(0.45rem, 0.85cqw, 0.68rem);
  color: var(--text-muted);
  margin-top: 4px;
  font-family: var(--font-body);
}
.vinyl-line-1.small { font-size: clamp(0.5rem, 1.1cqw, 0.85rem); }

/* ============ CENTRE CONTROLS ============ */
.centre-controls {
  left: 37.5%;
  top: 24%;
  width: 25%;
  height: 24%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4%;
}
.magg-btn {
  background: rgba(0,0,0,0.55);
  border: 1.5px solid var(--btn-color, rgba(120,160,220,0.4));
  border-radius: 8px;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: clamp(0.42rem, 0.68cqw, 0.62rem);
  letter-spacing: 0.04em;
  transition: box-shadow .15s, transform .08s, border-color .15s;
  min-height: 36px;
}
.magg-btn i { font-size: clamp(0.8rem, 1.6cqw, 1.15rem); }
.magg-btn:hover { box-shadow: 0 0 14px var(--btn-glow, rgba(120,160,220,0.5)); }
.magg-btn:active { transform: scale(0.94); }
.magg-btn:focus-visible { outline: 2px solid var(--btn-color, #fff); outline-offset: 2px; }
.magg-analyse   { --btn-color: var(--blue);   --btn-glow: rgba(97,168,255,0.6); color: var(--blue); }
.magg-categorise{ --btn-color: var(--green);  --btn-glow: rgba(114,255,157,0.6); color: var(--green); }
.magg-connect   { --btn-color: var(--gold);   --btn-glow: rgba(255,229,107,0.6); color: var(--gold); }
.magg-archive   { --btn-color: var(--purple); --btn-glow: rgba(180,109,255,0.6); color: var(--purple); }
.magg-insight   { --btn-color: var(--cyan);   --btn-glow: rgba(99,244,255,0.6); color: var(--cyan); }
.magg-share     { --btn-color: var(--pink);   --btn-glow: rgba(255,124,174,0.6); color: var(--pink); }

/* ============ SYSTEM STATUS ============ */
.system-status {
  left: 37.5%;
  top: 50%;
  width: 25%;
  height: 6.5%;
}
.status-screen {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(99,244,255,0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.9);
  overflow: hidden;
}
.fake-waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
}
.fake-waveform polyline {
  fill: none;
  stroke: var(--green);
  stroke-width: 1;
  animation: waveform-pulse 2.6s ease-in-out infinite;
}
@keyframes waveform-pulse { 0%,100% { opacity: 0.15; } 50% { opacity: 0.5; } }
.status-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  text-shadow: 0 0 10px rgba(114,255,157,0.75), 0 0 2px rgba(114,255,157,0.9);
  font-size: clamp(0.5rem, 1cqw, 0.85rem);
  animation: status-glow 2s ease-in-out infinite;
  text-align: center;
  padding: 0 4px;
}
@keyframes status-glow { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

/* ============ HOT CUES ============ */
.left-hot-cues, .right-hot-cues {
  left: 6.5%;
  bottom: 5.5%;
  width: 22%;
  height: 15%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3%;
}
.right-hot-cues { left: auto; right: 6.5%; }

.cue-pad {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(120,160,220,0.35);
  border-radius: 5px;
  color: var(--text-muted);
  font-family: var(--font-head);
  font-size: clamp(0.38rem, 0.6cqw, 0.58rem);
  cursor: pointer;
  transition: box-shadow .15s, color .15s, border-color .15s, transform .08s;
  min-height: 24px;
}
.cue-pad:hover { color: var(--text-main); border-color: var(--blue); box-shadow: 0 0 8px rgba(97,168,255,0.4); }
.cue-pad:active { transform: scale(0.92); }
.cue-pad:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cue-pad.flash { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(255,229,107,0.6); }

/* ============ MIXER ============ */
.mixer-overlay {
  left: 39%;
  bottom: 3%;
  width: 22%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
}
.mixer-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.mixer-col label {
  font-size: clamp(0.4rem, 0.55cqw, 0.55rem);
  color: var(--text-muted);
  font-family: var(--font-head);
  letter-spacing: 0.05em;
}
.mixer-fader-col { flex-direction: row; align-items: center; gap: 4px; flex: 1.6; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(120,160,220,0.25);
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(99,244,255,0.7);
  cursor: pointer;
  border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(99,244,255,0.7);
  cursor: pointer;
  border: none;
}
input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.crossfade-slider { flex: 1; }
.mixer-nav {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(120,160,220,0.4);
  color: var(--text-main);
  border-radius: 50%;
  width: 22px; height: 22px;
  min-width: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  flex-shrink: 0;
}
.mixer-nav:hover { border-color: var(--cyan); box-shadow: 0 0 8px rgba(99,244,255,0.5); }
.mixer-nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ============ OUTPUT PANEL ============ */
.output-panel {
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
  width: 34%;
  min-width: 220px;
  background: var(--panel-glass);
  border: 1px solid rgba(180,109,255,0.35);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 0 24px rgba(0,0,0,0.7);
  z-index: 20;
  font-size: clamp(0.5rem, 0.78cqw, 0.7rem);
}
.output-title {
  font-family: var(--font-head);
  color: var(--purple);
  font-size: clamp(0.6rem, 0.9cqw, 0.78rem);
  margin: 0 0 6px 0;
  letter-spacing: 0.05em;
}
.output-row { display: flex; gap: 6px; margin-bottom: 3px; }
.output-key { color: var(--text-muted); flex-shrink: 0; }
.output-boundary {
  margin-top: 6px;
  padding: 6px 8px;
  border-left: 2px solid var(--gold);
  color: var(--gold);
  font-style: italic;
  background: rgba(255,229,107,0.06);
  border-radius: 4px;
}
.output-close {
  position: absolute;
  top: 6px; right: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  min-width: 24px; min-height: 24px;
}
.output-close:hover { color: var(--text-main); }
.output-close:focus-visible { outline: 2px solid var(--purple); }
.output-panel[hidden] { display: none; }

/* ============ MODALS ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  position: relative;
  background: var(--panel-dark);
  border: 1px solid rgba(120,180,255,0.35);
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
  max-height: 80vh;
  overflow-y: auto;
}
.modal-card h3 { font-family: var(--font-head); color: var(--cyan); margin: 0 0 8px 0; font-size: 1rem; }
.modal-card h4 { font-family: var(--font-head); color: var(--text-muted); font-size: 0.75rem; margin: 10px 0 4px 0; }
.modal-close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(120,160,220,0.4);
  color: var(--text-main);
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
}
.modal-close:hover { border-color: var(--pink); color: var(--pink); }
.modal-close:focus-visible { outline: 2px solid var(--pink); }
.insight-sub { color: var(--text-muted); font-size: 0.75rem; margin: 8px 0 4px; }
.insight-list { margin: 0 0 6px 18px; padding: 0; font-size: 0.82rem; color: var(--orange); }
.insight-action { color: var(--cyan); font-size: 0.85rem; }
.notes-textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(120,180,255,0.28);
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.8);
  color: var(--text-main);
  border-radius: 6px;
  padding: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}
.notes-textarea:focus { border-color: var(--cyan); outline: none; }

/* ============ TOAST ============ */
.toast {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--pink);
  color: var(--pink);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: clamp(0.55rem, 0.85cqw, 0.75rem);
  font-family: var(--font-head);
  z-index: 50;
  box-shadow: 0 0 20px rgba(255,124,174,0.5);
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ BOUNDARY COPY ============ */
.boundary-copy {
  margin-top: 10px;
  font-size: clamp(0.55rem, 0.85cqw, 0.7rem);
  color: var(--text-muted);
  text-align: center;
  max-width: 900px;
  padding: 0 10px;
}

/* ============ ROTATE OVERLAY ============ */
.rotate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,3,4,0.96);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rotate-card {
  text-align: center;
  max-width: 320px;
}
.rotate-icon {
  font-size: 3rem;
  color: var(--cyan);
  margin-bottom: 16px;
  animation: rotate-hint 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes rotate-hint { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
.rotate-card p {
  color: var(--text-main);
  font-family: var(--font-head);
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 1.4;
}
.btn-continue {
  font-family: var(--font-head);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  min-height: 40px;
}
.btn-continue:hover { box-shadow: 0 0 14px rgba(99,244,255,0.5); }
.btn-continue:focus-visible { outline: 2px solid var(--cyan); }

.rotate-overlay[hidden] { display: none; }

/* Default: hide rotate overlay unless portrait-mobile JS shows it */
@media (min-width: 901px) {
  .rotate-overlay { display: none !important; }
}

/* ============ MOBILE LANDSCAPE ============ */
/* The interactive-scene now scales the whole deck uniformly, so we no longer
   resize the shell per breakpoint (that was what broke alignment). */
@media (orientation: landscape) and (max-width: 1000px) {
  .boundary-copy { display: none; }
}

/* ============ MOBILE PORTRAIT (fallback if continue anyway) ============ */
@media (orientation: portrait) and (max-width: 900px) {
  .boundary-copy { display: none; }
}

.brand-strip { display: none !important; }

/* MAGG Hamlet Arc correction: centre is output screen, not button controls */
.centre-output-screen {
  left: 41.65%;
  top: 28.35%;
  width: 16.85%;
  height: 20.25%;
  border: 1px solid rgba(70, 255, 210, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0, 12, 16, 0.88), rgba(0, 0, 0, 0.78)),
    repeating-linear-gradient(0deg, rgba(72,255,214,0.035) 0 1px, transparent 1px 5px);
  box-shadow:
    inset 0 0 20px rgba(0, 255, 210, 0.12),
    0 0 18px rgba(0, 255, 210, 0.08);
  overflow: hidden;
  padding: 0.55cqw;
  font-family: "Chakra Petch", system-ui, sans-serif;
  /* Column layout so the body can scroll instead of clipping text. */
  display: flex;
  flex-direction: column;
}

.centre-output-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4cqw;
  font-size: clamp(6px, 0.55cqw, 12px);
  letter-spacing: 0.08em;
  color: rgba(107, 255, 229, 0.95);
  border-bottom: 1px solid rgba(107, 255, 229, 0.18);
  padding-bottom: 0.3cqw;
  margin-bottom: 0.4cqw;
  text-transform: uppercase;
}

.centre-output-state {
  color: #63ff76;
  text-shadow: 0 0 8px rgba(99, 255, 118, 0.75);
}

.centre-output-body {
  color: rgba(220, 255, 250, 0.88);
  font-size: clamp(6px, 0.52cqw, 11px);
  line-height: 1.35;
  /* Never clip the AI text — scroll if it outgrows the screen. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.output-line {
  margin: 0 0 0.35cqw;
}

.output-line.strong {
  color: #ffffff;
  font-weight: 700;
}

.output-line.muted,
.output-line .muted {
  color: rgba(190, 220, 220, 0.62);
  font-style: italic;
}

.mix-option-card {
  border: 1px solid rgba(107, 255, 229, 0.18);
  border-radius: 6px;
  padding: 0.35cqw;
  margin-bottom: 0.35cqw;
  background: rgba(0, 0, 0, 0.35);
}

.mix-option-title {
  color: #63ff76;
  font-weight: 700;
  margin-bottom: 0.15cqw;
}

.mix-option-detail {
  color: rgba(225, 245, 245, 0.78);
}

/* Alignment pass: centre output screen covers the full middle module bay */
.centre-output-screen {
  left: 37.25% !important;
  top: 23.25% !important;
  width: 25.65% !important;
  height: 24.25% !important;
  padding: 0.75cqw !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(0, 13, 17, 0.96), rgba(0, 0, 0, 0.94)),
    repeating-linear-gradient(0deg, rgba(72,255,214,0.045) 0 1px, transparent 1px 5px) !important;
  z-index: 50 !important;
}

.centre-output-head {
  font-size: clamp(8px, 0.72cqw, 14px) !important;
  margin-bottom: 0.55cqw !important;
}

.centre-output-body {
  font-size: clamp(9px, 0.78cqw, 15px) !important;
  line-height: 1.45 !important;
}

/* Hide old centre button layer completely if any CSS/HTML keeps it alive */
.centre-controls,
.magg-btn,
.magg-analyse,
.magg-categorise,
.magg-connect,
.magg-archive,
.magg-insight,
.magg-share {
  display: none !important;
  pointer-events: none !important;
}

/* Alignment pass: snap overlay panels/buttons to the black hardware bays */

/* Top left Track 1 input screen */
.input-panel {
  left: 6.55% !important;
  top: 6.15% !important;
  width: 24.95% !important;
  height: 20.65% !important;
  border-radius: 12px !important;
}

/* Top right Track 2 input screen */
.send-panel {
  left: 68.25% !important;
  top: 6.15% !important;
  width: 24.95% !important;
  height: 20.65% !important;
  border-radius: 12px !important;
}

/* Bottom left user control pads */
.left-hot-cues {
  left: 7.45% !important;
  top: 73.55% !important;
  width: 20.55% !important;
  height: 13.85% !important;
}

/* Bottom right user control pads */
.right-hot-cues {
  left: 72.1% !important;
  top: 73.55% !important;
  width: 20.55% !important;
  height: 13.85% !important;
}

/* Make cue pads sit cleaner inside their hardware bays */
.left-hot-cues,
.right-hot-cues {
  gap: 0.35cqw !important;
}

.cue-pad {
  font-size: clamp(6px, 0.48cqw, 10px) !important;
  padding: 0.15cqw !important;
  border-radius: 5px !important;
}

/* Tighten top panel internals so they stay inside the black screens */
.input-panel,
.send-panel {
  padding: 0.55cqw !important;
}

.panel-head {
  margin-bottom: 0.35cqw !important;
}

.panel-title {
  font-size: clamp(8px, 0.62cqw, 13px) !important;
}

.tab-btn {
  font-size: clamp(5px, 0.42cqw, 9px) !important;
  padding: 0.12cqw 0.25cqw !important;
}

.embed-input {
  height: 1.25cqw !important;
  min-height: 16px !important;
  font-size: clamp(6px, 0.5cqw, 10px) !important;
}

.local-note,
.or-divider {
  font-size: clamp(5px, 0.42cqw, 9px) !important;
}

/* Centre output keeps its current corrected position for now */
.centre-output-screen {
  /* Fill the deck's built-in centre screen bezel so the AI text reads as
     part of the hardware, not an overlay floating on top of it. */
  left: 38.9% !important;
  top: 25.2% !important;
  width: 22.2% !important;
  height: 34.5% !important;
  /* Native-screen look: no glowing box edge, corners match the bezel. */
  border: 1px solid rgba(70, 255, 210, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 26px rgba(0, 255, 210, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(2, 10, 12, 0.97), rgba(0, 0, 0, 0.96)),
    repeating-linear-gradient(0deg, rgba(72,255,214,0.03) 0 1px, transparent 1px 5px) !important;
}

/* Alignment pass 2: tighten lower deck control banks into hardware pads */
.left-hot-cues {
  left: 9.15% !important;
  top: 70.95% !important;
  width: 16.8% !important;
  height: 12.2% !important;
}

.right-hot-cues {
  left: 74.05% !important;
  top: 70.95% !important;
  width: 16.8% !important;
  height: 12.2% !important;
}

.left-hot-cues,
.right-hot-cues {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 0.42cqw !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.cue-pad {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: clamp(5px, 0.42cqw, 9px) !important;
}

/* TOP PANEL ALIGNMENT ONLY - move both top boxes inward and slightly down */

/* Track 1 top screen: right + down */
.input-panel {
  left: 8.85% !important;
  top: 7.45% !important;
}

/* Track 2 top screen: left + down */
.send-panel {
  left: 66.95% !important;
  top: 7.45% !important;
}

/* TOP PANEL MICRO ALIGNMENT ONLY */

/* Track 1: tiny move toward centre + slightly down */
.input-panel {
  left: 9.25% !important;
  top: 7.95% !important;
}

/* Track 2: double tiny move toward centre + slightly down */
.send-panel {
  left: 66.15% !important;
  top: 7.95% !important;
}

/* TOP RIGHT PANEL ONLY - move Track 2 toward centre */
.send-panel {
  left: 65.35% !important;
}

/* BOTTOM BUTTON ALIGNMENT ONLY - move both banks down */
.left-hot-cues {
  top: 75.95% !important;
}

.right-hot-cues {
  top: 75.95% !important;
}

/* BOTTOM BUTTON MICRO ALIGNMENT ONLY - move both banks further down */
.left-hot-cues {
  top: 78.25% !important;
}

.right-hot-cues {
  top: 78.25% !important;
}

/* BOTTOM BUTTON MICRO ALIGNMENT ONLY - move both banks inward */
.left-hot-cues {
  left: 11.25% !important;
}

.right-hot-cues {
  left: 71.95% !important;
}

/* BOTTOM RIGHT ONLY - move inward toward centre */
.right-hot-cues {
  left: 69.85% !important;
}

/* BOTTOM BUTTON SCALE ONLY - enlarge both banks to match background pads */
.left-hot-cues,
.right-hot-cues {
  width: 19.25% !important;
  height: 13.95% !important;
  gap: 0.48cqw !important;
}

.cue-pad {
  font-size: clamp(6px, 0.48cqw, 10px) !important;
  border-radius: 6px !important;
}

/* BOTTOM LEFT ONLY - move outward slightly */
.left-hot-cues {
  left: 10.45% !important;
}

/* BOTTOM LEFT ONLY - move outward slightly */
.left-hot-cues {
  left: 10.45% !important;
}

/* BOTTOM LEFT ONLY - move outward slightly more */
.left-hot-cues {
  left: 9.65% !important;
}

/* BOTTOM LEFT ONLY - outward a touch more and up tiny bit */
.left-hot-cues {
  left: 9.15% !important;
  top: 77.85% !important;
}

/* BOTTOM LEFT ONLY - up a little more */
.left-hot-cues {
  top: 77.25% !important;
}

/* BUTTON VISUAL CLEANUP ONLY - remove glass boxes/gradients, keep text over hardware */
.left-hot-cues,
.right-hot-cues {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cue-pad {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(190, 230, 255, 0.82) !important;
  text-shadow: 0 0 6px rgba(80, 170, 255, 0.55) !important;
}

.right-hot-cues .cue-pad {
  color: rgba(235, 190, 255, 0.86) !important;
  text-shadow: 0 0 6px rgba(190, 80, 255, 0.6) !important;
}

.cue-pad:hover,
.cue-pad:focus,
.cue-pad:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* BOTTOM RIGHT ONLY - mirror locked bottom-left placement */
.right-hot-cues {
  left: 71.60% !important;
  top: 77.25% !important;
  width: 19.25% !important;
  height: 13.95% !important;
}

/* BOTTOM RIGHT ONLY - pull further toward centre */
.right-hot-cues {
  left: 69.85% !important;
}

/* BOTTOM RIGHT ONLY - tiny bit further toward centre */
.right-hot-cues {
  left: 68.95% !important;
}

/* TOP INPUT PANEL VISUAL CLEANUP ONLY - remove glass container/filter */
.input-panel,
.send-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the actual input controls visible, but stop the outer panel looking like a glass box */
.input-panel::before,
.input-panel::after,
.send-panel::before,
.send-panel::after {
  display: none !important;
  content: none !important;
}

/* Make the inner controls sit naturally on the hardware screen */
.input-panel .panel-body,
.send-panel .panel-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep fields readable but lighter */
.embed-input,
.btn-embed,
.tab-btn {
  background: rgba(0, 0, 0, 0.38) !important;
  box-shadow: none !important;
}

/* THEME PICKER - small deck skin selector */
.theme-picker {
  left: 43.2% !important;
  top: 2.6% !important;
  width: 13.6% !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35cqw;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(120, 255, 230, 0.24);
  border-radius: 8px;
  padding: 0.28cqw 0.4cqw;
  box-shadow: 0 0 12px rgba(0, 255, 220, 0.12);
  z-index: 90;
  font-family: "Chakra Petch", system-ui, sans-serif;
}

.theme-picker label {
  color: rgba(145, 255, 235, 0.9);
  font-size: clamp(6px, 0.48cqw, 10px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.theme-picker select {
  min-width: 0;
  width: 6.2cqw;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(235, 255, 252, 0.92);
  border: 1px solid rgba(120, 255, 230, 0.35);
  border-radius: 5px;
  font-size: clamp(6px, 0.48cqw, 10px);
  font-family: "Chakra Petch", system-ui, sans-serif;
  outline: none;
}

/* Theme picker removed - original aligned deck only */
.theme-picker {
  display: none !important;
}

/* Deck skin picker */
.deck-skin-picker {
  left: 44.1% !important;
  top: 2.55% !important;
  width: 11.8% !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35cqw;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(120, 255, 230, 0.2);
  border-radius: 7px;
  padding: 0.25cqw 0.35cqw;
  z-index: 100;
  font-family: "Chakra Petch", system-ui, sans-serif;
}

.deck-skin-picker label {
  color: rgba(145, 255, 235, 0.9);
  font-size: clamp(5px, 0.42cqw, 9px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.deck-skin-picker select {
  width: 5.8cqw;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(235, 255, 252, 0.92);
  border: 1px solid rgba(120, 255, 230, 0.3);
  border-radius: 5px;
  font-size: clamp(5px, 0.42cqw, 9px);
  font-family: "Chakra Petch", system-ui, sans-serif;
}

/* VINYL SKIN OVERLAY MAP ONLY */
/* These do not touch the original aligned deck map. */

.skin-vinyl .input-panel {
  left: 8.1% !important;
  top: 9.15% !important;
  width: 24.25% !important;
  height: 20.2% !important;
}

.skin-vinyl .send-panel {
  left: 67.65% !important;
  top: 9.15% !important;
  width: 24.25% !important;
  height: 20.2% !important;
}

.skin-vinyl .centre-output-screen {
  left: 41.25% !important;
  top: 27.7% !important;
  width: 18.25% !important;
  height: 21.85% !important;
}

.skin-vinyl .left-hot-cues {
  left: 9.15% !important;
  top: 75.75% !important;
  width: 19.25% !important;
  height: 13.95% !important;
}

.skin-vinyl .right-hot-cues {
  left: 68.95% !important;
  top: 75.75% !important;
  width: 19.25% !important;
  height: 13.95% !important;
}

/* TOP LEFT ARC UTILITY BUTTONS */
.arc-top-utility {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 9999;
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "Chakra Petch", system-ui, sans-serif;
}

.arc-top-utility button {
  background: rgba(0, 0, 0, 0.78);
  color: rgba(210, 255, 250, 0.95);
  border: 1px solid rgba(100, 255, 230, 0.35);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 255, 220, 0.16);
}

.arc-top-utility button:hover,
.arc-top-utility button:focus {
  color: #ffffff;
  border-color: rgba(130, 255, 240, 0.75);
  box-shadow: 0 0 16px rgba(0, 255, 220, 0.26);
}

/* READY STATUS REPOSITION - top centre bridge status slot */
.system-status {
  left: 38.95% !important;
  top: 13.15% !important;
  width: 22.1% !important;
  height: 4.85% !important;
  z-index: 80 !important;
}

.status-screen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 7px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  border: 1px solid rgba(120, 255, 230, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.75) !important;
}

.fake-waveform {
  display: none !important;
}

.status-text {
  position: static !important;
  transform: none !important;
  font-family: "Chakra Petch", system-ui, sans-serif !important;
  font-size: clamp(9px, 0.78cqw, 15px) !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* readiness colours */
.status-empty .status-text {
  color: #ff4b4b !important;
  text-shadow: 0 0 10px rgba(255, 50, 50, 0.8) !important;
}

.status-one .status-text {
  color: #ffd84a !important;
  text-shadow: 0 0 10px rgba(255, 210, 60, 0.8) !important;
}

.status-two .status-text {
  color: #63ff76 !important;
  text-shadow: 0 0 10px rgba(99, 255, 118, 0.8) !important;
}

/* Quick CDJ / VINYL toggle beside skin selector */
.deck-skin-picker {
  width: 16.8% !important;
}

.deck-skin-toggle {
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 230, 145, 0.95);
  border: 1px solid rgba(255, 210, 80, 0.38);
  border-radius: 5px;
  font-size: clamp(5px, 0.42cqw, 9px);
  font-family: "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.08em;
  padding: 0.12cqw 0.35cqw;
  cursor: pointer;
  text-transform: uppercase;
}