/* =========================================================
   ROLAND TR-808 Rhythm Composer — Web Tribute
   Pure HTML/CSS/JS, mobile responsive.
   Visual reference: original Roland TR-808 (1980)
   ========================================================= */

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

html, body {
  width: 100%;
  min-height: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #0d0d0d;
  overflow-x: hidden;
}

/* ---------- Stage / Backdrop ---------- */
.stage {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 14px 28px;
  background:
    radial-gradient(circle at 50% 0%, #2a2a2a 0%, #161616 60%, #0a0a0a 100%);
}

/* =========================================================
   CABINET (the dark wood side panels + cream panel inside)
   ========================================================= */
.cabinet {
  width: 100%;
  max-width: 1180px;
  background: #1a1a1a;
  border-radius: 10px;
  padding: 14px 18px 12px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.85),
    inset 0 1px 1px rgba(255,255,255,0.08);
  position: relative;
  border: 1px solid #000;
}

/* Wood-grain side accents using gradients */
.cabinet::before, .cabinet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background:
    repeating-linear-gradient(0deg, #2a1a0c 0px, #3a2412 2px, #2a1a0c 4px, #1a0e06 6px),
    linear-gradient(90deg, #1a0e06, #3a2412, #1a0e06);
  border-radius: 10px 0 0 10px;
}
.cabinet::after {
  right: 0;
  border-radius: 0 10px 10px 0;
  left: auto;
}
.cabinet::before {
  left: 0;
}

/* =========================================================
   TOP STRIPE (Power + Brand + Model info)
   ========================================================= */
.top-stripe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 10px;
  border-bottom: 1px solid #000;
  margin-bottom: 10px;
}

/* Power */
.power {
  display: flex;
  align-items: center;
  gap: 8px;
}
.power-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: #ccc;
  font-weight: 700;
}
.power-switch {
  width: 38px;
  height: 18px;
  background: #000;
  border: 1px solid #555;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.power-toggle {
  width: 16px;
  height: 14px;
  background: linear-gradient(180deg, #888, #444);
  border-radius: 1px;
  position: absolute;
  top: 1px;
  left: 1px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.6);
  transition: left .2s;
}
.power-switch.on .power-toggle { left: 19px; }
.power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a0000;
  box-shadow: inset 0 0 2px #000;
  transition: all .2s;
}
.power-switch.on ~ .power-led,
.power-led.on {
  background: #ff3030;
  box-shadow: 0 0 8px #ff3030, inset 0 0 2px #600;
}

/* Brand */
.brand {
  text-align: center;
  flex: 1;
}
.brand-logo {
  font-family: 'Arial Black', 'Helvetica', sans-serif;
  font-size: 38px;
  font-weight: 900;
  color: #e65c22;
  letter-spacing: -1px;
  text-shadow: 0 2px 2px rgba(0,0,0,.5);
  line-height: 1;
}
.brand-tag {
  font-size: 10px;
  color: #aaa;
  letter-spacing: 2px;
  margin-top: 2px;
  text-transform: uppercase;
}

.top-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 90px;
}
.meta-line {
  font-family: 'Arial Black', sans-serif;
  font-size: 16px;
  color: #e65c22;
  letter-spacing: 1px;
}
.meta-sub {
  font-size: 8px;
  color: #888;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =========================================================
   PANEL — the cream colored face
   ========================================================= */
.panel {
  display: grid;
  grid-template-columns: 200px 1fr 130px;
  gap: 0;
  background:
    linear-gradient(180deg, #efe8d2 0%, #e0d6b8 100%);
  border-radius: 6px;
  padding: 14px 0;
  border: 1px solid #6a5a36;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.15);
  position: relative;
}

/* Section dividers between columns */
.left-col, .right-col {
  position: relative;
}
.left-col::after, .right-col::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #8a7a4a;
}
.left-col::after { right: 0; }
.right-col::before { left: 0; }

/* =========================================================
   LEFT COLUMN
   ========================================================= */
.left-col {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-block {
  background: #1a1a1a;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4);
}
.block-title {
  font-size: 9px;
  color: #ddd;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #444;
  width: 100%;
  padding-bottom: 3px;
}

/* Knob sizes */
.knob-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.small-knob { padding: 8px 0; }
.huge-knob { padding: 0; }

.knob {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #4a4a4a 0%, #2a2a2a 50%, #0c0c0c 100%);
  border: 2px solid #000;
  position: relative;
  cursor: grab;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.15),
    inset -2px -2px 3px rgba(0,0,0,.7),
    0 2px 4px rgba(0,0,0,.5);
  touch-action: none;
  transition: transform .04s;
}
.knob:active { cursor: grabbing; }

/* Indicator line on knob */
.knob-indicator {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 3px;
  height: 32%;
  background: linear-gradient(180deg, #fff, #ccc 60%, #888);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 1px #000;
  transform-origin: 50% 100%;
}
/* Knob tick marks (cosmetic ring around huge knobs) */
.huge-knob::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 225deg,
      transparent 0deg,
      transparent 3deg, rgba(255,255,255,.2) 4deg, transparent 5deg,
      transparent 30deg, rgba(255,255,255,.2) 31deg, transparent 32deg,
      transparent 60deg, rgba(255,255,255,.2) 61deg, transparent 62deg,
      transparent 90deg, rgba(255,255,255,.2) 91deg, transparent 92deg,
      transparent 120deg, rgba(255,255,255,.2) 121deg, transparent 122deg,
      transparent 150deg, rgba(255,255,255,.2) 151deg, transparent 152deg,
      transparent 180deg, rgba(255,255,255,.2) 181deg, transparent 182deg,
      transparent 210deg, rgba(255,255,255,.2) 211deg, transparent 212deg,
      transparent 240deg, rgba(255,255,255,.2) 241deg, transparent 242deg,
      transparent 270deg, rgba(255,255,255,.2) 271deg, transparent 272deg,
      transparent 315deg
    );
  pointer-events: none;
}

.knob.small { width: 26px; height: 26px; }
.knob.medium { width: 36px; height: 36px; }
.knob.large { width: 54px; height: 54px; }
.knob.huge { width: 88px; height: 88px; }

/* Mode labels */
.mode-labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 6px;
  width: 100%;
  margin-top: 2px;
}
.mode-labels span {
  font-size: 7px;
  text-align: center;
  color: #888;
  letter-spacing: .5px;
  line-height: 1.1;
  padding: 1px 0;
  border-radius: 2px;
  transition: all .15s;
}
.mode-labels span.active {
  color: #e65c22;
  background: #2a1a0c;
  font-weight: 700;
}

/* Instrument grid */
.inst-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  width: 100%;
  margin-top: 4px;
}
.inst-grid span {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  background: #0a0a0a;
  border: 1px solid #333;
  text-align: center;
  padding: 3px 0;
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s;
}
.inst-grid span:hover {
  color: #ccc;
  border-color: #555;
}
.inst-grid span.active {
  color: #fff;
  background: #e65c22;
  border-color: #ff8040;
  box-shadow: 0 0 4px rgba(230,92,34,.6);
}

/* Tempo block */
.tempo-block {
  background: linear-gradient(180deg, #0d0d0d, #1a1a1a);
}
.tempo-readout {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #ff8030;
  font-weight: 700;
  letter-spacing: 1px;
  background: #000;
  padding: 2px 8px;
  border: 1px solid #553;
  border-radius: 2px;
  margin-top: 2px;
  min-width: 80px;
  text-align: center;
  text-shadow: 0 0 4px rgba(255,128,48,.5);
}
.tempo-scale {
  display: flex;
  justify-content: space-between;
  width: 80%;
  font-size: 7px;
  color: #888;
  margin-top: 2px;
}

/* Fine tune */
.fine-tune {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.fine-label {
  font-size: 9px;
  color: #ddd;
  letter-spacing: 1px;
  font-weight: 700;
}

/* =========================================================
   CENTER RACK (instrument knobs + labels)
   ========================================================= */
.center-rack {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rack-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 2px;
}
.row-label {
  font-size: 9px;
  font-weight: 700;
  color: #4a3a1a;
  width: 40px;
  text-align: right;
  padding-right: 6px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.knob-set {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  flex: 1;
  min-width: 0;
}
.knob-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}
.knob-cell .knob {
  width: 36px;
  height: 36px;
}
.cell-label {
  font-size: 7px;
  color: #4a3a1a;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Instrument labels (cream buttons) */
.inst-labels {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-top: 10px;
  padding: 0 0 0 44px;
}
.inst-label {
  background: linear-gradient(180deg, #f5efde, #e0d6b8);
  color: #1a1a1a;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  padding: 4px 2px;
  border-radius: 2px;
  border: 1px solid #6a5a36;
  box-shadow: 0 1px 1px rgba(0,0,0,.3);
  cursor: pointer;
  line-height: 1.1;
  transition: all .1s;
  letter-spacing: .3px;
  text-transform: uppercase;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inst-label:hover {
  background: linear-gradient(180deg, #fff8e8, #efe5cc);
}
.inst-label.active {
  background: linear-gradient(180deg, #ff8030, #c63a00);
  color: #fff;
  border-color: #802200;
  box-shadow: 0 0 6px rgba(255,128,48,.7), 0 1px 1px rgba(0,0,0,.3);
}

/* Name plate */
.name-plate {
  text-align: center;
  margin-top: 12px;
  padding: 4px 0;
}
.name-1 {
  font-size: 13px;
  color: #4a3a1a;
  letter-spacing: 1px;
  font-style: italic;
}
.name-2 {
  font-family: 'Arial Black', sans-serif;
  font-size: 28px;
  color: #e65c22;
  letter-spacing: 1px;
  line-height: 1;
  margin: 2px 0;
  text-shadow: 0 2px 2px rgba(0,0,0,.3);
}
.name-3 {
  font-size: 10px;
  color: #6a5a36;
  letter-spacing: 1px;
  font-style: italic;
}

/* =========================================================
   RIGHT COLUMN
   ========================================================= */
.right-col {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.master-vol {
  background: #1a1a1a;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.05);
}
.scale-section {
  background: #1a1a1a;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.scale-led-row {
  display: flex;
  gap: 6px;
}
.scale-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #200;
  border: 1px solid #000;
  box-shadow: inset 0 0 2px #000;
  cursor: pointer;
}
.scale-led.active {
  background: #ff3030;
  box-shadow: 0 0 6px #ff3030, inset 0 0 2px #600;
}

/* =========================================================
   SEQUENCER (bottom panel)
   ========================================================= */
.sequencer {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  background: #1f1f1f;
  border: 2px solid #000;
  border-radius: 6px;
  padding: 12px;
  gap: 12px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.7);
}

.seq-left, .seq-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* AB switches */
.switch-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.switch-title {
  font-size: 8px;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 1px;
  text-align: center;
}
.ab-switch {
  width: 50px;
  height: 18px;
  background: #000;
  border: 1px solid #555;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.ab-handle {
  width: 22px;
  height: 14px;
  background: linear-gradient(180deg, #999, #555);
  border-radius: 7px;
  position: absolute;
  top: 1px;
  left: 1px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.6);
  transition: left .2s;
}
.ab-switch.b .ab-handle { left: 25px; }
.ab-labels {
  display: flex;
  justify-content: space-between;
  width: 50px;
  font-size: 9px;
  color: #aaa;
  font-weight: 700;
}

/* Sequencer buttons */
.seq-btn {
  background: linear-gradient(180deg, #f5efde, #d8cfb0);
  color: #111;
  border: 1px solid #6a5a36;
  border-radius: 3px;
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 #6a5a36, 0 4px 5px rgba(0,0,0,.5);
  transition: all .05s;
  width: 100%;
  line-height: 1.1;
}
.seq-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #6a5a36, 0 2px 3px rgba(0,0,0,.5);
}
.seq-btn.playing {
  background: linear-gradient(180deg, #80ff80, #40b040);
  color: #fff;
  box-shadow: 0 0 8px rgba(128,255,128,.6), 0 3px 0 #2a5a2a, 0 4px 5px rgba(0,0,0,.5);
}
.seq-btn-l1 { display: block; font-size: 10px; }
.seq-btn-l2 { display: block; font-size: 10px; }

.seq-btn-small {
  background: linear-gradient(180deg, #f5efde, #d8cfb0);
  color: #111;
  border: 1px solid #6a5a36;
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #6a5a36, 0 3px 4px rgba(0,0,0,.5);
  flex: 1;
}
.seq-btn-small:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #6a5a36;
}
.step-write-block {
  display: flex;
  gap: 6px;
  width: 100%;
}

/* Sequencer center */
.seq-center {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.prescale-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prescale-label {
  font-size: 8px;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 1px;
}
.prescale-track {
  flex: 1;
  height: 10px;
  background: #000;
  border-radius: 5px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
  cursor: pointer;
}
.prescale-handle {
  width: 20px;
  height: 10px;
  background: linear-gradient(180deg, #999, #555);
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.prescale-val {
  font-size: 9px;
  color: #ff8030;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}

/* Step buttons */
.step-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
  align-items: end;
}
.step-btn {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  border: 1px solid #000;
  cursor: pointer;
  position: relative;
  box-shadow: 0 3px 0 #000, 0 4px 4px rgba(0,0,0,.5);
  transition: transform .05s, box-shadow .05s, filter .1s;
  min-height: 28px;
}
.step-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #000, 0 2px 2px rgba(0,0,0,.5);
}
.step-btn.red    { background: linear-gradient(180deg, #ff5050, #aa0000); }
.step-btn.orange { background: linear-gradient(180deg, #ff9e40, #cc5500); }
.step-btn.yellow { background: linear-gradient(180deg, #ffe040, #aa8800); }
.step-btn.white  { background: linear-gradient(180deg, #ffffff, #b0b0b0); }

.step-btn.active {
  filter: brightness(1.5) saturate(1.5);
  box-shadow: 0 0 8px rgba(255,255,255,.7), 0 3px 0 #000, 0 4px 4px rgba(0,0,0,.5);
}
.step-btn.current {
  outline: 2px solid #fff;
  outline-offset: -1px;
  filter: brightness(1.3);
}

.step-numbers {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
  font-size: 8px;
  color: #aaa;
  font-weight: 700;
  text-align: center;
  font-family: 'Courier New', monospace;
}

.step-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #888;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* =========================================================
   FOOTER BAR
   ========================================================= */
.footer-bar {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px 0;
  margin-top: 8px;
  border-top: 1px solid #000;
  font-size: 8px;
  color: #666;
  letter-spacing: 1px;
}
.footer-text { font-weight: 700; }
#statusText {
  color: #ff8030;
  text-shadow: 0 0 3px rgba(255,128,48,.4);
}

/* =========================================================
   MOBILE HINT OVERLAY
   ========================================================= */
.mobile-hint {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 1;
  transition: opacity .3s;
}
.mobile-hint.hidden {
  opacity: 0;
  pointer-events: none;
}
.hint-box {
  background: linear-gradient(180deg, #efe8d2, #d8cfb0);
  border: 2px solid #6a5a36;
  border-radius: 8px;
  padding: 24px 20px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.hint-title {
  font-family: 'Arial Black', sans-serif;
  font-size: 24px;
  color: #e65c22;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-shadow: 0 2px 2px rgba(0,0,0,.3);
}
.hint-text {
  font-size: 12px;
  color: #2a2a2a;
  line-height: 1.5;
  margin-bottom: 16px;
}
#hintCloseBtn {
  background: linear-gradient(180deg, #ff8030, #c63a00);
  color: #fff;
  border: 1px solid #802200;
  border-radius: 4px;
  padding: 8px 24px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 2px 0 #802200;
}
#hintCloseBtn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #802200;
}

/* =========================================================
   RESPONSIVE — Tablet & Mobile
   ========================================================= */

/* Tablet (<= 900px) */
@media (max-width: 900px) {
  .panel {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .left-col, .right-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  .left-col::after, .right-col::before { display: none; }
  .section-block { flex: 0 0 auto; min-width: 160px; }
  .knob.huge { width: 70px; height: 70px; }
  .knob.large { width: 44px; height: 44px; }
  .master-vol { min-width: 140px; }

  .center-rack { padding: 10px 8px; }
  .knob-cell .knob { width: 30px; height: 30px; }
  .cell-label { font-size: 6px; }
  .inst-label { font-size: 7px; padding: 3px 1px; min-height: 18px; }

  .sequencer { grid-template-columns: 1fr; gap: 8px; }
  .seq-left, .seq-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .seq-btn, .switch-block, .seq-btn-small { flex: 0 0 auto; min-width: 90px; }
}

/* Mobile (<= 600px) */
@media (max-width: 600px) {
  .stage { padding: 8px 4px 14px; }
  .cabinet { padding: 10px 8px 8px; border-radius: 8px; }
  .cabinet::before, .cabinet::after { width: 6px; }

  .top-stripe { padding: 4px 6px 8px; flex-wrap: wrap; gap: 6px; }
  .brand { order: 0; flex: 1 1 100%; }
  .brand-logo { font-size: 28px; }
  .brand-tag { font-size: 8px; }
  .top-meta { min-width: 60px; }
  .meta-line { font-size: 12px; }
  .meta-sub { font-size: 7px; }

  .panel { padding: 10px 0; border-radius: 4px; }

  .left-col, .right-col {
    padding: 8px;
    gap: 8px;
  }
  .section-block { padding: 8px 6px; min-width: 130px; gap: 4px; }
  .block-title { font-size: 8px; }
  .knob.huge { width: 60px; height: 60px; }
  .knob.large { width: 38px; height: 38px; }
  .knob.small { width: 22px; height: 22px; }
  .mode-labels span { font-size: 6px; }
  .inst-grid span { font-size: 8px; padding: 2px 0; }
  .tempo-readout { font-size: 10px; min-width: 70px; padding: 1px 6px; }

  /* Rack */
  .center-rack { padding: 6px 4px; gap: 2px; }
  .row-label { width: 26px; font-size: 7px; padding-right: 3px; }
  .knob-cell .knob { width: 22px; height: 22px; }
  .knob-indicator { width: 2px; height: 32%; }
  .cell-label { display: none; }
  .inst-labels { padding-left: 30px; gap: 2px; }
  .inst-label { font-size: 6px; padding: 2px 0; min-height: 16px; letter-spacing: 0; }
  .name-2 { font-size: 20px; }
  .name-1, .name-3 { font-size: 9px; }

  /* Sequencer */
  .sequencer { padding: 8px; gap: 8px; border-radius: 4px; }
  .seq-left, .seq-right { gap: 6px; }
  .seq-btn, .switch-block { min-width: 80px; }
  .seq-btn { padding: 6px 3px; font-size: 9px; }
  .seq-btn-small { padding: 5px 6px; font-size: 8px; }

  .step-row { gap: 2px; }
  .step-btn { min-height: 22px; border-radius: 2px; }
  .step-numbers { gap: 2px; font-size: 6px; }
  .step-labels { font-size: 7px; }
  .prescale-val { font-size: 8px; min-width: 32px; }

  .footer-bar { font-size: 7px; padding: 4px 6px 0; }
}

/* Very small phones (<= 380px) */
@media (max-width: 380px) {
  .knob-cell .knob { width: 18px; height: 18px; }
  .inst-label { font-size: 5px; }
  .inst-labels { padding-left: 24px; gap: 1px; }
  .row-label { width: 22px; font-size: 6px; padding-right: 2px; }
  .step-btn { min-height: 18px; }
  .step-numbers { font-size: 5px; }
  .seq-btn { padding: 5px 2px; font-size: 8px; }
}

/* Landscape phone — keep cabinet reasonably tall */
@media (max-width: 740px) and (orientation: landscape) and (max-height: 480px) {
  .stage { padding: 6px 4px; align-items: flex-start; }
  .top-stripe { padding: 2px 6px 4px; }
  .brand-logo { font-size: 22px; }
  .sequencer { margin-top: 6px; padding: 6px; }
  .step-btn { min-height: 18px; }
}