:root {
  --bg:#0f0f12;
  --panel:#17171d;
  --text:#f3f3f3;
  --muted:#9aa0a6;
  --accent:#e3142e;
  --q:#00c853;
  --e:#ffbb33;
  --border:#3e4b59;
  --glass:rgba(18,18,24,.82);
}

.container {
    background-color: #0f0f12 !important;
}	
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

.app { display:grid; grid-template-columns:290px 1fr; min-height:100vh; padding-bottom:68px; }

.sidebar { background:var(--panel); padding:16px; border-right:1px solid var(--border); overflow:auto; }
.sidebar h2 { font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px; }
.sidebar .row { display:flex; align-items:center; gap:8px; margin:6px 0; }
.sidebar .small { font-size:13px; color:var(--muted); }
.sidebar input[type="number"] { width:90px; background:#0d0d11; color:var(--text); border:1px solid #2a2a33; border-radius:8px; padding:6px; }
.sidebar input[type="range"] { width:140px; }
.sidebar select { flex:1; min-width:0; padding:8px; border-radius:8px; border:1px solid #2a2a33; background:#0d0d11; color:var(--text); }
.sidebar button { background:var(--accent); color:#fff; border:none; padding:10px 12px; border-radius:10px; cursor:pointer; }
.sidebar button:hover { filter:brightness(1.05); }
.sidebar .tap { background:#333; }

main { padding:18px; display:flex; flex-direction:column; gap:12px; }

.stage-wrap { width:100%; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#0c0c10; box-shadow: inset 0 0 0 1px var(--border); }


.stage { position:relative; min-height:200px; height:260px; min-width:720px; }
.stage .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.9; pointer-events:none; z-index:1; }

.lane { position:absolute; left:40px; top:50%; transform:translateY(-50%); height:80px; border-radius:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); z-index:2; }
.ball { position:absolute; bottom:6px; width:22px; height:22px; border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,.4); transform:translate(-50%,0); z-index:4; }
.ball-quarter { background:var(--q); }
.ball-eighth { background:var(--e); bottom:40px; }

.markers { position:absolute; left:40px; top:12px; height:16px; z-index:3; pointer-events:none; }
.markers .tick { position:absolute; top:0; width:2px; height:16px; background:#3a3a46; }
.markers .tick.accent { height:22px; background:#5e7186; }

.legend { display:flex; align-items:center; gap:16px; color:var(--muted); }
.legend .dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.legend .q { background:var(--q); }
.legend .e { background:var(--e); }

.hud { color:#c9ced8; display:flex; gap:14px; font-weight:600; }
.hud span { background:#121218; padding:6px 10px; border-radius:8px; border:1px solid #232331; }

/* Transport (dockable + draggable) */
.transport {
  position:fixed;
  left:0; right:0; bottom:0;
  backdrop-filter:saturate(120%) blur(8px);
  background:var(--glass);
  border-top:1px solid var(--border);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:10px 16px;
  z-index:1000;
  user-select:none;
}
.transport button {
  background:#2b2b36; color:#fff; border:1px solid #3a3a46;
  padding:10px 14px; border-radius:10px; cursor:pointer;
}
.transport button.primary { background:var(--accent); border-color:transparent; }
.transport button.ghost { background:transparent; color:#c9ced8; border:1px solid #3a3a46; }
.transport label { display:flex; align-items:center; gap:8px; color:#c9ced8; font-size:14px; }
.transport input[type="range"] { width:140px; }
.transport .sep { width:1px; height:28px; background:#373744; margin:0 4px; }

.transport .handle {
  font-weight:700; color:#8a8fa1; padding:6px 8px; cursor:grab; border:1px dashed #3a3a46; border-radius:8px;
}

.transport.floating {
  width:auto; left:var(--tx); top:var(--ty); right:auto; bottom:auto;
  border:1px solid var(--border);
  border-radius:12px;
}
.transport.floating .handle { cursor:grab; }
.transport.floating:active .handle { cursor:grabbing; }

.logo img {
    height: 50px; /* Adjust height as needed */
	padding-left: 30px;
}

/* Transport sliders with red fill to the left of the thumb */
.transport input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:140px; height:6px; border-radius:3px; cursor:pointer;
  background:linear-gradient(to right, #e3142e 0%, #e3142e var(--val,0%), #ddd var(--val,0%), #ddd 100%);
}

/* WebKit: make track transparent so the input background shows */
.transport input[type="range"]::-webkit-slider-runnable-track{
  height:6px; background:transparent; border-radius:3px;
}
.transport input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%; background:#e3142e; border:1px solid #660000;
  margin-top:-4px;
}

/* Firefox: use progress/track */
.transport input[type="range"]::-moz-range-track{
  height:6px; background:#ddd; border-radius:3px;
}
.transport input[type="range"]::-moz-range-progress{
  height:6px; background:#e3142e; border-radius:3px;
}
.transport input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#e3142e; border:1px solid #660000;
}

/* Tempo slider styled red like the volume sliders */
#tempo {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  background: linear-gradient(to right, #e3142e 0%, #e3142e var(--val,0%), #ddd var(--val,0%), #ddd 100%);
}

#tempo::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;  /* <-- important */
}


#tempo::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e3142e;
  border: 1px solid #660000;
  margin-top: -4px;
}

#tempo::-moz-range-track {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}
#tempo::-moz-range-progress {
  height: 6px;
  background: #e3142e;
  border-radius: 3px;
}
#tempo::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e3142e;
  border: 1px solid #660000;
}

/* Custom red checkboxes for sidebar */
.sidebar input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #e3142e;
  border-radius: 4px;
  background: #0d0d11;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.sidebar input[type="checkbox"]:checked {
  background: #e3142e;
  border-color: #e3142e;
}

.sidebar input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Red-themed dropdowns */
.sidebar select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #0d0d11;
  border: 1px solid #5e7186;
  border-radius: 6px;
  padding: 8px 30px 8px 10px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #5e7186 50%),
                    linear-gradient(135deg, #5e7186 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px),
                       calc(100% - 15px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.sidebar select:focus {
  outline: none;
  border-color: #5e7186;
}

.sidebar select option {
  background: #0d0d11;
  color: #fff;
}

#tempo::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right,
    #e3142e 0%,
    #e3142e var(--tempoVal, 0%),
    #ddd     var(--tempoVal, 0%),
    #ddd     100%
  );
}

/* Remove default blue highlight and use red theme */
.sidebar select option:hover,
.sidebar select option:focus,
.sidebar select option:checked {
  background: #e3142e;
  color: #fff;
}

#miniTimer.mt-flash {
  animation: mtFlash 0.8s ease-in-out 1;
}
@keyframes mtFlash {
  0%,100% { box-shadow:0 6px 18px rgba(0,0,0,.35); }
  50%     { box-shadow:0 0 0 2px #ff4444, 0 10px 24px rgba(0,0,0,.5); }
}


/* Rotate overlay — always available */

#rotateOverlay{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.92); color:#fff; z-index:9999;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  text-align:center; pointer-events:auto;
}
#rotateOverlay .rotate-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:18px 22px; width:min(420px, 86vw);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#rotateOverlay .rotate-icon{ font-size:42px; line-height:1; margin-bottom:8px; opacity:.9; }
#rotateOverlay .rotate-title{ font:700 44px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; margin-bottom:4px; }
#rotateOverlay .rotate-sub{ font:500 33px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; opacity:.85; }

/* Show overlay on small touch devices in PORTRAIT only */
@media (orientation:portrait) and (max-width:1024px) and (hover:none){
  #rotateOverlay{ display:flex; }
  body{ overflow:hidden; }
}

.rotate-icon svg { transform-origin: 50% 50%; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(-18deg); }
  60%      { transform: rotate(10deg); }
}

/* === Rotate overlay (always available) === */
#rotateOverlay{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.92); color:#fff; z-index:9999;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  text-align:center; pointer-events:auto;
}
#rotateOverlay .rotate-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:18px 22px; width:min(420px, 86vw);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#rotateOverlay .rotate-icon{ font-size:42px; line-height:1; margin-bottom:8px; opacity:.9; }
#rotateOverlay .rotate-title{ font:700 20px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; margin-bottom:4px; }
#rotateOverlay .rotate-sub{ font:500 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; opacity:.85; }

/* Show overlay in PORTRAIT on touch devices */
@media (orientation: portrait) and (max-width: 1024px) and (hover: none){
  #rotateOverlay{ display:flex; }
  body{ overflow:hidden; }
}