/* mobile.css — overrides for mobile landscape */

:root.is-mobile-landscape {
  --ui-scale: 1.2;
  --padding: 10px;
  --ball-size: 22px;
  --lane-height: 220px;
  --tick-width: 2px;
}

.is-mobile-landscape body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.is-mobile-landscape .app { transform-origin: top left; }

.is-mobile-landscape .sidebar {
  width: 260px;
  overflow-y: auto;
}

.is-mobile-landscape .field label { font-size: clamp(12px, 1.6vw, 14px); }

.is-mobile-landscape .btn {
  font-size: clamp(12px, 1.8vw, 14px);
  padding: 10px 14px;
  border-radius: 10px;
}

.is-mobile-landscape input[type="range"] { height: 6px; }
.is-mobile-landscape input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
.is-mobile-landscape input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }

.is-mobile-landscape .stage-wrap {
  width: 100vw;
  overflow-x: hidden;
  border-radius: 14px;
}

.is-mobile-landscape .stage {
  min-width: 0;
  height: var(--lane-height);
}

.is-mobile-landscape #lane { height: calc(var(--lane-height) - 60px); }

.is-mobile-landscape #markers .tick { width: var(--tick-width); }

.is-mobile-landscape #ballQuarter,
.is-mobile-landscape #ballEighth {
  width: var(--ball-size);
  height: var(--ball-size);
  border-width: 2px;
}

.is-mobile-landscape #transport.docked {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  gap: 10px;
  z-index: 50;
}

.is-mobile-landscape #transport .handle { padding: 6px 10px; font-size: 14px; }
.is-mobile-landscape #transport .volumes { gap: 10px; }

.is-mobile-landscape #hud { font-size: clamp(12px, 1.8vw, 14px); }

.is-mobile-landscape #startStop,
.is-mobile-landscape #tapBtn {
  min-width: 44px;
  min-height: 44px;
}