@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=VT323&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
  font-family: 'Fohar';
  src: url('./heshbon-bold.otf') format('opentype');
}

@font-face {
  font-family: 'Heshbon';
  src: url('./heshbon-bold.otf') format('opentype');
}

[dir="rtl"] * {
  font-family: 'Heshbon', 'Courier Prime', monospace !important;
}
[dir="rtl"] .title, [dir="rtl"] .picker-title {
  font-family: 'Abril Fatface', serif !important;
}

:root {
  --bg:     #0f0904;
  --panel:  #1c1208;
  --border: #3a2710;
  --gold:   #c8820a;
  --glow:   #f0a820;
  --cream:  #f0ddb8;
  --dim:    #6b4e1e;
  --dim2:   #3a2510;
  --rred:   #c42010;
  --ryel:   #d4a000;
  --rgrn:   #1a7010;
}

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

html { background: var(--bg); overflow-x: hidden; }
body {
  background: var(--bg);
  font-family: 'Courier Prime', monospace;
  color: var(--cream);
  min-height: 100svh;
  display: flex; align-items: flex-start; justify-content: center;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

#tint-overlay {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s, background-color .4s;
}
#tint-overlay.green  { background: #00ff44; opacity: .13; }
#tint-overlay.yellow { background: #ffff00; opacity: .30; }
#tint-overlay.red    { background: linear-gradient(to right, #ffdd00 0% 33.3%, #ff2200 33.3% 66.7%, #00ff44 66.7% 100%); opacity: .18; }
#tint-overlay.yellow ~ #mainApp .glabel { color: #000; }
#tint-overlay.yellow ~ #mainApp .glabel.active { color: #000; text-shadow: 0 0 8px rgba(0,0,0,0.6); font-weight: bold; }

/* ── Layout ─────────────────────────────────────────── */
.app {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  padding: max(80px, calc(env(safe-area-inset-top) + 16px)) 16px 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}

/* ── Title ──────────────────────────────────────────── */
.title { font-family: 'Abril Fatface', serif; font-size: 3.2rem;
  color: var(--glow); line-height: 1;
  text-shadow: 3px 3px 0 var(--rred), 6px 6px 0 rgba(0,0,0,.4);
  letter-spacing: .06em; }
.sub { font-family: 'VT323', monospace; font-size: .82rem;
  letter-spacing: .3em; color: var(--dim); margin-top: 2px; }

.rasta { width: 100%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ryel) 33.3%, var(--rred) 33.3% 66.6%, var(--rgrn) 66.6%); }

/* ── Mode panel ─────────────────────────────────────── */
.mode-panel {
  width: 100%; height: 52px; border-radius: 14px;
  padding: 6px 18px; border: 2px solid var(--border);
  background: var(--panel);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: border-color .45s, box-shadow .45s, background .45s;
  text-align: center;
}
.mode-panel.green {
  border-color: #28b850;
  background: linear-gradient(135deg,#081808,#0c2010);
  box-shadow: 0 0 40px rgba(28,120,20,.45), inset 0 0 24px rgba(28,120,20,.12); }
.mode-panel.yellow {
  border-color: #d4a000;
  background: linear-gradient(135deg,#181200,#201800);
  box-shadow: 0 0 40px rgba(200,155,0,.45), inset 0 0 24px rgba(200,155,0,.12); }
.mode-panel.red {
  border-color: #d03010;
  background: linear-gradient(135deg,#180604,#20080a);
  box-shadow: 0 0 40px rgba(200,40,10,.45), inset 0 0 24px rgba(200,40,10,.12); }

.mode-name { font-family: 'Abril Fatface', serif; font-size: 1.25rem;
  letter-spacing: .08em; transition: color .4s, opacity .4s; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-panel.green  .mode-name { color: #50e878; }
.mode-panel.yellow .mode-name { color: #f0c830; }
.mode-panel.red    .mode-name { color: #ff7050; }
.mode-tip { font-family: 'VT323', monospace; font-size: .82rem;
  letter-spacing: .1em; color: var(--dim); transition: color .4s; line-height: 1.4; }
[dir="rtl"] .mode-name { white-space: normal; font-size: 1rem; }
[dir="rtl"] #gameOverNameSaveBtn { letter-spacing: 0; padding: 8px 10px; }
.mode-panel.green  .mode-tip { color: rgba(80,232,120,.65); }
.mode-panel.yellow .mode-tip { color: rgba(240,200,48,.65); }
.mode-panel.red    .mode-tip { color: rgba(255,112,80,.65); }

/* ── Score row ──────────────────────────────────────── */
.score-row { display: flex; gap: 8px; width: 100%; }
.sbox { flex:1; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 8px; text-align: center; }
.sbox label { display: block; font-family: 'VT323', monospace;
  font-size: .6rem; letter-spacing: .2em; color: var(--dim);
  text-transform: uppercase; }
.sbox span { font-family: 'VT323', monospace; font-size: 1.5rem;
  color: var(--glow); line-height: 1.1; }

/* ── Tempo dots ─────────────────────────────────────── */
.tempo-row { display: flex; align-items: center; gap: 6px; }
.tl { font-family:'VT323',monospace; font-size:.6rem;
  letter-spacing:.2em; color:var(--dim); }
.tdot { width:7px; height:7px; border-radius:50%;
  background:var(--dim2); transition: background .05s, transform .05s; }
.tdot.beat { background:var(--gold); box-shadow:0 0 8px rgba(200,130,10,.8); }
.tdot.down { background:var(--glow); box-shadow:0 0 14px rgba(240,168,32,1);
  transform:scale(1.6); }

/* ── Beat grids ─────────────────────────────────────── */
.grids { width:100%; display:flex; flex-direction:column; gap:7px; direction:ltr; }
.grid-row { display:flex; align-items:center; gap:0; }
.glabel { width:62px; font-family:'VT323',monospace;
  font-size:.62rem; letter-spacing:.12em; color:var(--dim);
  text-align:right; padding-right:8px; text-transform:uppercase;
  transition: color .3s, text-shadow .3s; }
.glabel.active { color: var(--glow); text-shadow: 0 0 8px var(--glow); font-weight: bold; animation: glabelFloat 1s ease-in-out infinite; }
@keyframes modeFlashHint {
  0%        { opacity: 1; transform: scale(1); }
  15%, 45%  { opacity: 0.08; transform: scale(0.96); }
  30%, 60%  { opacity: 1; transform: scale(1.06); }
  80%       { opacity: 1; transform: scale(1); }
  100%      { opacity: 1; transform: scale(1); }
}
.mode-name.flash-hint {
  animation: modeFlashHint 1.4s ease-in-out forwards;
}

@keyframes glabelFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}
.grid { display:flex; gap:5px; flex:1; }
.beat-group { display:flex; gap:2px; flex:1;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius:6px; padding:2px; background:rgba(0,0,0,.18); }
.slot {
  flex:1; height:28px; border-radius:4px;
  background:var(--panel); border:1px solid var(--dim2);
  transition: background .08s, border-color .08s, box-shadow .08s;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.slot.pat   { background:#1e1000; border-color:var(--gold);
  box-shadow:0 0 10px rgba(200,130,10,.45); }
.slot.cursor { border-color:#aaa; box-shadow:0 0 14px rgba(200,200,200,.3); }
.slot.pat.cursor { border-color:var(--glow);
  box-shadow:0 0 18px rgba(240,168,32,.7); }
.slot.user  { background:#081808; border-color:#30b040;
  box-shadow:0 0 10px rgba(40,180,64,.4); }
.slot.listen{ border-color:var(--dim); animation:lpulse 1s ease-in-out infinite; }
.slot.listen.user { border-color:#30b040; animation:none; }
.slot.lcur  { border-color:var(--cream);
  box-shadow:0 0 16px rgba(240,221,184,.35); }
.slot.lcur.user { border-color:#50e878;
  box-shadow:0 0 14px rgba(80,232,120,.6); }
.slot.patB { background:#150025; border-color:#a020f0;
  box-shadow:0 0 10px rgba(160,32,240,.45); }
.slot.uA { background:#081808; border-color:#30b040;
  box-shadow:0 0 10px rgba(40,180,64,.4); }
.slot.uB { background:#120020; border-color:#a020f0;
  box-shadow:0 0 10px rgba(160,32,240,.45); }
.slot.lcur.uA { border-color:#50e878;
  box-shadow:0 0 14px rgba(80,232,120,.6); }
.slot.lcur.uB { border-color:#c050ff;
  box-shadow:0 0 14px rgba(160,32,240,.6); }
.slot.listen.uA { border-color:#30b040; animation:none; }
.slot.listen.uB { border-color:#a020f0; animation:none; }

/* ── Yellow mode: both grids unified to yellow ───────── */
body[data-mode="yellow"] .slot.pat { background:#1e1800; border-color:#f0c830; box-shadow:0 0 10px rgba(240,200,0,.45); }
body[data-mode="yellow"] .slot.pat.cursor { border-color:#ffe040; box-shadow:0 0 18px rgba(240,200,0,.7); }
body[data-mode="yellow"] .slot.user { border-color:#f0c830; box-shadow:0 0 10px rgba(240,200,0,.4); }
body[data-mode="yellow"] .slot.listen.user { border-color:#f0c830; }
body[data-mode="yellow"] .slot.lcur.user { border-color:#ffe040; box-shadow:0 0 14px rgba(240,200,0,.6); }
body[data-mode="yellow"] .slot.uA { border-color:#f0c830; box-shadow:0 0 10px rgba(240,200,0,.4); }
body[data-mode="yellow"] .slot.lcur.uA { border-color:#ffe040; box-shadow:0 0 14px rgba(240,200,0,.6); }
body[data-mode="yellow"] .slot.listen.uA { border-color:#f0c830; }

/* ── Green mode: pattern grid matches user grid ──────── */
body[data-mode="green"] .slot.pat { background:#081808; border-color:#30b040; box-shadow:0 0 10px rgba(40,180,64,.45); }
body[data-mode="green"] .slot.pat.cursor { border-color:#50e878; box-shadow:0 0 18px rgba(40,220,80,.7); }

/* ── Two-pad layout ─────────────────────────────────── */
.pads-row { display:flex; gap:22px; justify-content:center; align-items:center; }
[dir="rtl"] .pads-row { flex-direction: row-reverse; }
[dir="rtl"] .new-badge { right:auto !important; left:8px !important; }
.pad-b { border-color:#a020f0 !important;
  box-shadow: 0 0 0 1px rgba(160,32,240,.15), 0 0 28px rgba(160,32,240,.3),
    inset 0 0 28px rgba(0,0,0,.6), 0 8px 28px rgba(0,0,0,.7) !important; }
.pad-b.hit { border-color:#c050ff !important;
  box-shadow: 0 0 0 4px rgba(160,32,240,.35), 0 0 50px rgba(160,32,240,.65),
    inset 0 0 20px rgba(160,32,240,.2), 0 2px 10px rgba(0,0,0,.9) !important; }

@keyframes slideRight {
  0%,100% { transform:translateX(0); }
  50%      { transform:translateX(100px); }
}
@keyframes slideLeft {
  0%,100% { transform:translateX(0); }
  50%      { transform:translateX(-100px); }
}
[dir="rtl"] .coming-soon span.slide { animation-name: slideLeft; }
@keyframes btnPulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.03); }
}
.btn-play-again:hover { animation:btnPulse 1.5s ease-in-out infinite; }
.coming-soon { cursor:not-allowed; }
.coming-soon span { color:#555; transition: color .3s; }
.coming-soon:hover #composerDesc { font-size:1rem; color:#fff; display:inline-block; }
.coming-soon span.slide { animation:slideRight 2.4s ease-in-out 1; }
[dir="rtl"] .coming-soon span.slide { animation-name:slideLeft; }
@keyframes lpulse {
  0%,100% { border-color:var(--dim2); }
  50%      { border-color:var(--dim); }
}
@keyframes beat-ripple {
  0%   { transform:translate(-50%,-50%) scale(0); opacity:.85; }
  100% { transform:translate(-50%,-50%) scale(2.6); opacity:0; }
}
.slot-ripple {
  position:absolute; top:50%; left:50%;
  width:70%; height:70%; border-radius:50%;
  pointer-events:none;
  animation:beat-ripple 1.4s ease-out both;
}
.slot-ripple.gold   { background:rgba(240,180,20,.8); }
.slot-ripple.green  { background:rgba(60,220,80,.8); }
.slot-ripple.purple { background:rgba(180,60,255,.8); }

/* ── Tap pad ────────────────────────────────────────── */
.pad-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:10px; position:relative; }
#countdownHint { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'VT323',monospace; font-size:5rem; color:#ff4422; text-shadow:0 0 20px rgba(255,60,20,.7); pointer-events:none; z-index:10; opacity:1; transition:opacity .4s ease; }

.pad {
  width:325px; height:325px; border-radius:50%;
  background: radial-gradient(circle at 38% 33%, #241604, #0c0702);
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 1px rgba(200,130,10,.15),
    0 0 28px rgba(200,130,10,.3),
    inset 0 0 28px rgba(0,0,0,.6),
    0 8px 28px rgba(0,0,0,.7);
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  font-size: 3rem;
  transition: all .07s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.pad-hit {
  padding: 30px;
  margin: -30px;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pad::before {
  content:''; position:absolute; inset:10px; border-radius:50%;
  border:1px solid rgba(200,130,10,.18); }
.pad.square { border-radius: 18px; }
.pad.square::before { border-radius: 10px; }
.pad-hit.square { border-radius: 18px; }
.pad.hit {
  transform:scale(.9);
  border-color:var(--glow);
  background:radial-gradient(circle at 38% 33%, #342208, #160e04);
  box-shadow:
    0 0 0 4px rgba(240,168,32,.35),
    0 0 50px rgba(240,168,32,.65),
    inset 0 0 20px rgba(240,168,32,.2),
    0 2px 10px rgba(0,0,0,.9);
}
.pad.off { opacity:.28; cursor:not-allowed; }
.genre-trance #pad { width:210px; height:210px; font-size:3rem; }
.pad-b { width:210px !important; height:210px !important; }

.status { font-family:'VT323',monospace; font-size:.95rem;
  letter-spacing:.18em; color:var(--dim); text-align:center;
  min-height:1.25em; text-transform:uppercase; transition:color .3s; }
.status.ok   { color:#50e878; }
.status.bad  { color:#ff7050; }
.status.info { color:var(--glow); }

/* ── Genre picker ───────────────────────────────────── */
#genrePicker {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: max(24px, env(safe-area-inset-top)) 24px 24px;
  background-image:
    radial-gradient(ellipse 60% 50% at 25% 15%, rgba(120,70,0,.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 85%, rgba(30,80,0,.14) 0%, transparent 70%),
    linear-gradient(to right, rgba(255,221,0,.18) 0% 33.3%, rgba(255,34,0,.13) 33.3% 66.7%, rgba(0,255,68,.15) 66.7% 100%);
  transition: opacity .5s;
}
#genrePicker.hidden { opacity: 0; pointer-events: none; }

.picker-title { font-family:'Abril Fatface',serif; font-size:2.6rem;
  color:var(--glow); text-shadow:3px 3px 0 var(--rred), 5px 5px 0 rgba(0,0,0,.4);
  text-align:center; line-height:1; }
.picker-sub { font-family:'VT323',monospace; font-size:.8rem;
  letter-spacing:.25em; color:var(--dim); text-transform:uppercase; margin-top:4px; margin-left:6px; }

.genre-cards { display:flex; flex-direction:column; gap:10px; width:100%; max-width:400px; align-items:center; }
.genre-card {
  width:100%; border-radius:16px; padding:20px 24px;
  border:2px solid var(--border);
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:18px;
  cursor:pointer; transition:all .25s; min-height:80px;
}

/* ── Cover Flow Stage ───────────────────────── */
.cf-stage {
  position:relative; width:100%; max-width:420px; height:170px;
  perspective:800px; perspective-origin:50% 50%;
  overflow:hidden; align-self:center; flex-shrink:0;
}
.cf-track { position:absolute; inset:0; transform-style:preserve-3d; }
.cf-stage .genre-card {
  position:absolute !important; top:50%; left:50%;
  width:150px; height:150px; aspect-ratio:unset;
  flex-direction:column-reverse !important; align-items:center !important; justify-content:center !important;
  padding:10px 8px; gap:5px; min-height:0 !important; margin:0;
  box-sizing:border-box;
  transform-origin:center center;
  transform:translate(-50%,-50%);
  transition:transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94),
             opacity 0.42s ease, box-shadow 0.42s ease;
  will-change:transform,opacity;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  pointer-events:auto;
}
.cf-stage .genre-card > div:first-child {
  flex-direction:column !important; align-items:center !important; margin-left:0 !important;
}
.cf-stage .genre-card:hover,
.cf-stage .genre-card.touch-active { animation:none !important; }
.cf-stage .genre-icon { top:0; width:36px; height:36px; }
.cf-stage .genre-icon svg { width:100%; height:100%; }
.cf-stage .genre-card-text { text-align:center; padding-top:0; width:100%; overflow:hidden; }
.cf-stage .genre-label { font-size:clamp(1rem,4.5vw,1.15rem); width:100%; word-break:break-word; }
.cf-stage .genre-desc { display:none; }
.cf-stage [id$="Stars"] { margin-top:0 !important; justify-content:center; }
.cf-stage .genre-card.reggae.cf-active  { border-color:#d4860a; animation:cfGlow 1.5s ease-in-out infinite; }
.cf-stage .genre-card.country.cf-active { border-color:#e03020; animation:cfGlow 1.5s ease-in-out infinite; }
.cf-stage .genre-card.trance.cf-active  { border-color:#a020f0; animation:cfGlow 1.5s ease-in-out infinite; }
.cf-stage .genre-card.twist.cf-active   { border-color:#50e878; animation:cfGlow 1.5s ease-in-out infinite; }
@keyframes cfGlow {
  0%,100% { filter:brightness(1); }
  50%      { filter:brightness(1.25); }
}
.cf-dots { display:flex; gap:7px; justify-content:center; margin-top:10px; }
.cf-dot { width:7px; height:7px; border-radius:50%; background:var(--dim2); transition:background .3s,transform .3s; }
.cf-dot.cf-dot-active { background:var(--glow); transform:scale(1.35); }
.genre-card.reggae  { background:linear-gradient(135deg,#3a2005,#251502); border-color:rgba(212,134,10,.6); box-shadow:0 4px 20px rgba(200,120,10,.35); }
.genre-card.country { background:linear-gradient(135deg,#3a0a08,#280505); border-color:rgba(196,32,16,.6); box-shadow:0 4px 20px rgba(196,32,16,.35); }
.genre-card.trance  { background:linear-gradient(135deg,#1e0038,#150025); border-color:rgba(160,32,240,.6); box-shadow:0 4px 20px rgba(160,32,240,.35); }
.genre-card.reggae:hover,  .genre-card.reggae.touch-active  { border-color:#d4860a; box-shadow:0 8px 32px rgba(200,120,10,.5); animation:btnPulse 1.5s ease-in-out infinite; }
.genre-card.country:hover, .genre-card.country.touch-active { border-color:#e03020; box-shadow:0 8px 32px rgba(196,32,16,.5); animation:btnPulse 1.5s ease-in-out infinite; }
.genre-card.trance:hover,  .genre-card.trance.touch-active  { border-color:#a020f0; box-shadow:0 8px 32px rgba(160,32,240,.6); animation:btnPulse 1.5s ease-in-out infinite; }
.genre-card.twist   { background:linear-gradient(135deg,#062a0c,#041a07); border-color:rgba(40,184,80,.6); box-shadow:0 4px 20px rgba(40,184,80,.35); }
.genre-card.twist:hover,   .genre-card.twist.touch-active   { border-color:#50e878; box-shadow:0 8px 32px rgba(40,184,80,.6); animation:btnPulse 1.5s ease-in-out infinite; }
.genre-card.lab {
  background: linear-gradient(135deg,#021820,#041228);
  border-color: rgba(80,232,255,.5);
  box-shadow: 0 4px 20px rgba(80,232,255,.25);
}
.genre-card.lab:hover, .genre-card.lab.touch-active {
  border-color: #50e8ff;
  box-shadow: 0 8px 32px rgba(80,232,255,.5);
  animation: btnPulse 1.5s ease-in-out infinite;
}
.genre-card.composer {
  background: linear-gradient(135deg,#3a0a08,#1e0038,#062a0c,#3a2005) padding-box,
              linear-gradient(135deg, #ff40c0, #a020f0, #4060ff, #00e8ff, #50e878, #f0c830) border-box;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(200,40,200,.25);
}
.genre-card.composer:hover, .genre-card.composer.touch-active {
  background: linear-gradient(135deg,#3a0a08,#1e0038,#062a0c,#3a2005) padding-box,
              linear-gradient(135deg, #ff40c0, #a020f0, #4060ff, #00e8ff, #50e878, #f0c830) border-box;
  border: 2px solid transparent;
  box-shadow: 0 8px 32px rgba(200,40,200,.5);
  animation: btnPulse 1.5s ease-in-out infinite;
}
.csp-btn { font-family:'VT323',monospace; font-size:.75rem; letter-spacing:.1em; padding:4px 10px; border-radius:5px; border:1px solid rgba(255,40,180,.3); background:transparent; color:rgba(255,40,180,.6); cursor:pointer; }
.csp-btn.active { background:#ff40c0; color:#0e0018; border-color:#ff40c0; }
.genre-card.custom { background:linear-gradient(135deg,#001a1f,#000d12); border-color:rgba(0,220,255,.6); box-shadow:0 4px 20px rgba(0,200,255,.3); }
.genre-card.custom:hover, .genre-card.custom.touch-active { border-color:#00dcff; box-shadow:0 8px 32px rgba(0,220,255,.55); animation:btnPulse 1.5s ease-in-out infinite; }
.cbeat-modal { background:var(--panel); border:2px solid rgba(0,220,255,.4); border-radius:14px; padding:22px 18px 18px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; }
.cbeat-modal-title { font-family:'VT323',monospace; font-size:1.1rem; letter-spacing:.18em; color:#00dcff; margin-bottom:4px; }
.cbeat-list { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow-y:auto; }
.cbeat-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:10px; border:1px solid rgba(0,220,255,.25); background:rgba(0,80,120,.15); cursor:pointer; transition:all .15s; }
.cbeat-item:hover { background:rgba(0,140,200,.25); border-color:rgba(0,220,255,.6); }
.cbeat-item.active { border-color:#00dcff; background:rgba(0,120,180,.25); }
.cbeat-info { display:flex; flex-direction:column; gap:2px; }
.cbeat-bpm { font-family:'VT323',monospace; font-size:1.15rem; color:#00dcff; letter-spacing:.08em; }
.cbeat-ts { font-size:.68rem; color:var(--dim); letter-spacing:.06em; }
.cbeat-del { background:transparent; border:none; color:rgba(232,64,64,.6); font-size:1rem; cursor:pointer; padding:4px 6px; border-radius:5px; flex-shrink:0; transition:color .15s; }
.cbeat-del:hover { color:#e84040; }
.cbeat-cancel { font-family:'VT323',monospace; font-size:1rem; letter-spacing:.1em; padding:9px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--dim); cursor:pointer; margin-top:4px; }
.genre-icon { font-size:3.2rem; line-height:1; flex-shrink:0; align-self:center; position:relative; top:7px; display:flex; flex-direction:column; align-items:center; }
.genre-card-text { display:flex; flex-direction:column; gap:4px; justify-content:center; padding-top:8px; }
.genre-label { font-family:'Fohar','Abril Fatface',serif; font-size:1.7rem;
  letter-spacing:.12em; color:#fff; text-transform:uppercase; }
#fastLabel { font-size:1.35rem; letter-spacing:.07em; white-space:nowrap; }
.genre-desc { font-family:'VT323',monospace; font-size:.75rem;
  letter-spacing:.1em; color:#fff; line-height:1.4; }


.btns { display:flex; gap:10px; width:100%; }
.btn { border:none; border-radius:10px; cursor:pointer; transition:all .18s;
  font-family:'Abril Fatface',serif; letter-spacing:.15em;
  text-transform:uppercase; padding:13px 0; }
.btn-start { flex:1; font-size:.82rem;
  background:linear-gradient(135deg,#a86808,#6a4005);
  color:var(--glow);
  box-shadow:0 4px 18px rgba(168,104,8,.4), inset 0 1px 0 rgba(255,200,80,.18); }
.btn-start:hover:not(:disabled) {
  background:linear-gradient(135deg,#c88010,#8a5208);
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(168,104,8,.6); }
.btn-start:disabled { opacity:.28; cursor:not-allowed; transform:none; }
.btn-reset { width:52px; background:var(--panel); color:var(--dim);
  border:1px solid var(--border); font-size:.9rem; }
.btn-reset:hover { border-color:var(--gold); color:var(--gold); }

.diff-row { display:flex; gap:10px; justify-content:center; }
:root:not([dir="rtl"]) .diff-row { flex-direction: row-reverse; }
.diff-btn {
  font-family:'VT323',monospace; font-size:1.1rem; padding:6px 20px;
  border:2px solid #444; background:transparent; color:#666;
  cursor:pointer; letter-spacing:.12em; border-radius:3px; transition:all .2s; }
.diff-btn:hover { border-color:#888; color:#aaa; }
.diff-easy.active  { border-color:#30b040; color:#50e878; }
.diff-med.active   { border-color:var(--gold); color:#f0c040; }
.diff-hard.active  { border-color:#c42010; color:#ff5040; }

/* ── Intro Modal ─────────────────────────────────── */
#introModal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#introModal.hidden { display: none; }
#introX {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--glow); font-size: 1.2rem; line-height: 1;
  opacity: 0.6; padding: 2px 4px;
}
#introX:hover { opacity: 1; }
#introBox {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px 20px;
  max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 0 40px rgba(200,130,10,0.15);
}
#introTitle {
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  letter-spacing: .2em;
  color: var(--glow);
  text-align: center;
  margin-bottom: 4px;
}
.intro-section {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .72rem;
  color: var(--cream);
  line-height: 1.3;
  white-space: nowrap;
}
.intro-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.intro-modes { display: flex; gap: 6px; width: 100%; }
.intro-mode-box {
  flex: 1; border-radius: 8px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid var(--border); text-align: center;
}
.intro-mode-green { border-color: #28b850; background: rgba(40,184,80,.22); }
.intro-mode-yellow { border-color: #d4a000; background: rgba(212,160,0,.22); }
.intro-mode-red { border-color: #d03010; background: rgba(208,48,16,.22); }
.intro-mode-icon { font-size: 1.2rem; }
.intro-mode-text { font-size: 1rem; color: var(--cream); line-height: 1.4; }
.intro-divider {
  border-top: 1px solid var(--border);
  margin: 2px 0;
}
#introClose {
  margin-top: 8px;
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  letter-spacing: .15em;
  color: var(--bg);
  background: var(--rgrn);
  border: none;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  transition: background .2s;
  animation: btnPulse 1.5s ease-in-out infinite;
}
#introClose:hover { background: #28a040; }

/* ── Dev modals ─────────────────────────────────── */
#devModal.hidden, #toolsModal.hidden { display: none !important; }
.dev-link {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  letter-spacing: .12em;
  color: var(--cream);
  text-decoration: none;
  background: var(--dim2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  transition: background .15s, border-color .15s;
}
.dev-link:hover { background: #2a1a08; border-color: var(--gold); color: var(--glow); }

/* ── Mosquito Mode Animations ───────────────────── */
.mosquito {
  position: absolute;
  top: 35px;
  font-size: 35px;
  transition-timing-function: linear; /* Ensures constant flying speed */
  z-index: 10;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
}
.mosquito.splat {
  transition: none !important; /* Stop moving instantly */
  transform: scale(1.8) rotate(15deg);
  opacity: 0;
  transition: all 0.3s ease-out !important; /* Fade out slowly */
}

/* ── Mobile / Phone ─────────────────────────────── */
@media (max-width: 430px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
    align-items: flex-start;
  }

  .app {
    padding: max(12px, env(safe-area-inset-top)) 12px 20px;
    gap: 10px;
  }

  .title { font-size: 2.4rem; }
  .sub   { font-size: .72rem; letter-spacing: .2em; }

  .mode-panel { padding: 5px 14px; height: 46px; }
  .mode-name  { font-size: 1.1rem; }

  .sbox span  { font-size: 1.3rem; }

  .pad { width: 288px; height: 288px; font-size: 3.8rem; }
  .genre-trance #pad { width: 180px; height: 180px; font-size: 2.6rem; }
  .pad-b { width: 180px !important; height: 180px !important; }

  .glabel { width: 52px; font-size: .58rem; }
  .slot   { height: 24px; }

  #genrePicker {
    justify-content: flex-start;
    overflow-y: auto;
    gap: 16px;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  }

  .picker-title { font-size: 1.8rem; }

  .genre-cards { gap: 8px; }
  .genre-card  { padding: 14px 16px; min-height: 64px; }
  .genre-icon  { font-size: 2.4rem; }
  .genre-label { font-size: 1.4rem; }

  .btns { gap: 7px; }
  .btn-start { font-size: .75rem; }
}

/* ── TUTORIAL OVERLAY ──────────────────────────── */
#tutorialOverlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 250;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  pointer-events: none;
}
#tutorialBox {
  pointer-events: auto;
  background: rgba(15, 9, 4, 0.94);
  border: 2px solid #c8820a;
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(200, 130, 10, 0.25);
  animation: tutorialSlideIn 0.4s ease-out;
}
#tutorialStepNum {
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #6b4e1e;
  margin-bottom: 4px;
}
#tutorialText {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: #f0ddb8;
  line-height: 1.5;
  margin-bottom: 10px;
}
#tutorialSkip {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: #6b4e1e;
  background: transparent;
  border: 1px solid #3a2710;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
#tutorialSkip:hover {
  color: #c8820a;
  border-color: #c8820a;
}
@keyframes tutorialSlideIn {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── THE LAB — SEQUENCER ───────────────────────── */
#labScreen {
  position: fixed; inset: 0;
  background: #060d14;
  z-index: 100;
  display: flex; flex-direction: column;
  font-family: 'VT323', monospace;
  color: #c0d8e8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lab-header {
  display: flex; align-items: center;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(10,20,30,.9);
  flex-shrink: 0;
}
.lab-header-left, .lab-header-right {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.lab-header-right { justify-content: flex-end; }
.lab-hamburger-btn {
  background: transparent; border: none; color: #50e8ff;
  cursor: pointer; padding: 4px; display: flex; align-items: center;
  transition: color .15s;
}
.lab-hamburger-btn.open { color: #f0a820; }
.lab-menu-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.22s ease;
  background: rgba(6,13,20,.97);
  border-bottom: 1px solid rgba(80,232,255,.1);
  flex-shrink: 0;
}
.lab-menu-panel.open { max-height: 360px; overflow-y: auto; }
.lab-mixer-row { align-items: stretch; padding-top: 8px; padding-bottom: 12px; }
.lab-mixer-row .lab-menu-label { padding-top: 6px; }
.lab-mixer {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 4px 6px;
  scrollbar-width: thin;
}
.lab-mixer::-webkit-scrollbar { height: 6px; }
.lab-mixer::-webkit-scrollbar-thumb { background: rgba(80,232,255,.25); border-radius: 3px; }
.lab-mixer-strip {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 38px; gap: 4px;
  padding: 4px 2px 2px;
  border-radius: 6px;
  background: rgba(8,16,22,.5);
  border: 1px solid rgba(80,232,255,.08);
}
.lab-mixer-strip.master {
  border-color: rgba(240,168,32,.4);
  background: rgba(40,24,4,.5);
  margin-left: 6px;
}
.lab-mixer-label {
  font-family: 'VT323', monospace; font-size: .55rem;
  letter-spacing: .08em; color: #6b8898;
  text-align: center; line-height: 1;
}
.lab-mixer-strip.master .lab-mixer-label { color: #f0a820; }
.lab-mixer-val {
  font-family: 'VT323', monospace; font-size: .6rem;
  color: #506878; min-width: 22px; text-align: center;
}
.lab-mixer-strip.master .lab-mixer-val { color: #c8820a; }
.lab-mixer-slider {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px; height: 110px;
  background: rgba(80,232,255,.12);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 0;
}
.lab-mixer-slider::-webkit-slider-runnable-track {
  width: 4px; background: rgba(80,232,255,.18); border-radius: 2px;
}
.lab-mixer-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 12px; border-radius: 3px;
  background: #50e8ff; border: 1px solid rgba(0,0,0,.35);
  cursor: pointer;
  margin-left: -9px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lab-mixer-slider::-moz-range-track {
  width: 4px; background: rgba(80,232,255,.18); border-radius: 2px;
}
.lab-mixer-slider::-moz-range-thumb {
  width: 22px; height: 12px; border-radius: 3px;
  background: #50e8ff; border: 1px solid rgba(0,0,0,.35);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lab-mixer-strip.master .lab-mixer-slider::-webkit-slider-thumb { background: #f0a820; }
.lab-mixer-strip.master .lab-mixer-slider::-moz-range-thumb { background: #f0a820; }
/* per-track thumb colors mirroring grid colors */
.lab-mixer-strip[data-voice="kick"]   .lab-mixer-slider::-webkit-slider-thumb { background: #ff6432; }
.lab-mixer-strip[data-voice="kick"]   .lab-mixer-slider::-moz-range-thumb     { background: #ff6432; }
.lab-mixer-strip[data-voice="snare"]  .lab-mixer-slider::-webkit-slider-thumb { background: #ffc83c; }
.lab-mixer-strip[data-voice="snare"]  .lab-mixer-slider::-moz-range-thumb     { background: #ffc83c; }
.lab-mixer-strip[data-voice="hh"]     .lab-mixer-slider::-webkit-slider-thumb { background: #b4dcff; }
.lab-mixer-strip[data-voice="hh"]     .lab-mixer-slider::-moz-range-thumb     { background: #b4dcff; }
.lab-mixer-strip[data-voice="hhc"]    .lab-mixer-slider::-webkit-slider-thumb { background: #82faff; }
.lab-mixer-strip[data-voice="hhc"]    .lab-mixer-slider::-moz-range-thumb     { background: #82faff; }
.lab-mixer-strip[data-voice="crash"]  .lab-mixer-slider::-webkit-slider-thumb { background: #ff82be; }
.lab-mixer-strip[data-voice="crash"]  .lab-mixer-slider::-moz-range-thumb     { background: #ff82be; }
.lab-mixer-strip[data-voice="chords"] .lab-mixer-slider::-webkit-slider-thumb { background: #b450ff; }
.lab-mixer-strip[data-voice="chords"] .lab-mixer-slider::-moz-range-thumb     { background: #b450ff; }
.lab-mixer-strip[data-voice="bass"]   .lab-mixer-slider::-webkit-slider-thumb { background: #50e878; }
.lab-mixer-strip[data-voice="bass"]   .lab-mixer-slider::-moz-range-thumb     { background: #50e878; }
.lab-menu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 4px;
}
.lab-menu-row:last-child { padding-bottom: 12px; }
.lab-menu-label {
  font-family: 'VT323', monospace; font-size: .85rem;
  letter-spacing: .15em; color: #506878;
  width: 46px; flex-shrink: 0;
}
.game-lang-picker { display: flex; gap: 4px; align-items: center; }
.game-lang-btn {
  min-width: 30px; height: 24px;
  border: 1px solid #3a2710;
  background: #1c1208;
  color: #6b4e1e;
  font-family: 'VT323', monospace;
  font-size: .8rem;
  letter-spacing: .06em;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 6px;
}
.game-lang-btn:hover { border-color: #c8820a; color: #c8820a; }
.game-lang-btn.active { border-color: #f0a820; color: #f0a820; background: #2a1a08; }

.rhythm-lang-picker {
  display: flex; gap: 6px; align-items: center;
}
.rhythm-lang-btn {
  min-width: 42px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(80,232,255,.22);
  background: rgba(8,20,28,.82);
  color: #8ab8c8;
  font-family: 'VT323', monospace;
  font-size: .9rem;
  letter-spacing: .08em;
  cursor: pointer;
}
.rhythm-lang-btn:hover,
.rhythm-lang-btn.active {
  border-color: rgba(80,232,255,.62);
  color: #50e8ff;
  box-shadow: 0 0 12px rgba(80,232,255,.14);
}
.lab-home-btn {
  background: transparent; border: none; color: #50e8ff; cursor: pointer;
  padding: 4px; display: flex; align-items: center;
}
.lab-title {
  flex: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.lab-title-main {
  font-family: 'Abril Fatface', serif;
  font-size: 1.3rem; color: #f0a820; letter-spacing: .04em;
}
.lab-title-sub {
  font-size: .75rem; letter-spacing: .25em; color: #50e8ff;
}
.lab-bpm {
  display: flex; align-items: center; gap: 8px; flex: 1;
  font-size: .9rem; letter-spacing: .1em; color: #7090a8;
}
.lab-bpm-label { font-size: .7rem; color: #506878; }
.lab-bpm-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 6px; border-radius: 3px;
  background: rgba(80,232,255,.15); outline: none;
  cursor: pointer;
}
.lab-bpm-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 28px; border-radius: 6px;
  background: #50e8ff; border: none; cursor: pointer;
  margin-top: -11px;
}
.lab-bpm-slider::-moz-range-thumb {
  width: 20px; height: 28px; border-radius: 6px;
  background: #50e8ff; border: none; cursor: pointer;
}
.lab-play-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(80,232,255,.1); border: 2px solid #50e8ff;
  color: #50e8ff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  padding: 0; line-height: 1;
}
.lab-play-btn.playing { background: #50e8ff; color: #060d14; }
.lab-scale-picker {
  display: flex; gap: 4px; align-items: center;
}
.lab-scale-picker select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 76px;
  height: 34px;
  padding: 0 26px 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(80,232,255,.2);
  background:
    linear-gradient(45deg, transparent 50%, #50e8ff 50%),
    linear-gradient(135deg, #50e8ff 50%, transparent 50%),
    linear-gradient(135deg, rgba(8,20,28,.95), rgba(6,13,20,.98));
  background-position:
    calc(100% - 14px) 14px,
    calc(100% - 9px) 14px,
    0 0;
  background-size:
    5px 5px,
    5px 5px,
    100% 100%;
  background-repeat: no-repeat;
  color: #8ab8c8;
  font-family: 'VT323', monospace;
  font-size: .88rem;
  letter-spacing: .07em;
  cursor: pointer;
  transition: all .15s;
}
.lab-scale-picker select:hover {
  border-color: rgba(80,232,255,.4);
  color: #50e8ff;
}
.lab-scale-picker select:focus {
  outline: none;
  border-color: rgba(80,232,255,.5);
  box-shadow: 0 0 0 2px rgba(80,232,255,.14);
  color: #50e8ff;
}
.lab-scale-picker select option {
  background: #09131b;
  color: #bdefff;
}
.lab-scale-btn {
  font-family: 'VT323', monospace; font-size: .7rem; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 5px;
  border: 1px solid rgba(80,232,255,.2); background: transparent;
  color: #405060; cursor: pointer; transition: all .15s;
}
.lab-scale-btn.active {
  background: rgba(80,232,255,.15); border-color: rgba(80,232,255,.5); color: #50e8ff;
}
.lab-scale-btn:hover { border-color: rgba(80,232,255,.4); color: #50e8ff; }
.lab-save-custom-btn {
  display: block; width: calc(100% - 32px); margin: 10px 16px 0;
  font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .12em;
  padding: 9px; border-radius: 8px;
  border: 1px solid rgba(0,220,255,.5); background: rgba(0,100,140,.2);
  color: #00dcff; cursor: pointer; transition: all .18s;
}
.lab-save-custom-btn:hover { background: rgba(0,160,200,.3); border-color: #00dcff; }
.lab-toast {
  font-family: 'VT323', monospace; font-size: .95rem; letter-spacing: .1em;
  color: #00dcff; text-align: center; margin: 6px 0 0;
  opacity: 0; transition: opacity .4s;
}
.lab-seq-wrap {
  flex: 1; padding: 8px;
  display: flex; flex-direction: row; gap: 0; align-items: stretch;
  overflow: hidden;
  scrollbar-width: none;
}
.lab-seq-wrap > * { will-change: transform; }
.lab-seq-wrap::-webkit-scrollbar { display: none; }
.lab-scroll-bar-wrap {
  padding: 6px 10px 8px;
  background: rgba(10,20,30,.9);
  flex-shrink: 0;
  touch-action: none;
}
.lab-scroll-track {
  width: 100%; height: 36px;
  background: #1c3040; border-radius: 8px;
  position: relative; overflow: hidden;
}
.lab-scroll-thumb {
  position: absolute; top: 4px; bottom: 4px;
  width: 56px; border-radius: 6px;
  background: #50e8ff; cursor: grab; left: 0;
  touch-action: none;
}
.lab-tracks {
  display: flex; flex-direction: row; flex: 0 0 auto;
}
.lab-step-nums {
  display: flex; flex-direction: column-reverse; align-items: center;
  margin-top: 53px; /* align with cells: mute(48) + mute-margin(5) */
  gap: 2px; margin-right: 4px; flex-shrink: 0;
}
.lab-step-num {
  flex: 1; width: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; color: #405060; letter-spacing: .05em;
}
.lab-step-num.beat { color: #7090a8; }
.lab-track {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  flex: 0 0 52px; width: 52px; margin-right: 3px;
}
.lab-track-label { display: none; }
.lab-mute-btn {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid rgba(80,232,255,.25);
  background: rgba(80,232,255,.06); cursor: pointer;
  font-size: .5rem; font-weight: 700; letter-spacing: .05em; color: #50e8ff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  margin: 0 auto 5px; transition: all .15s;
  text-transform: uppercase;
}
.lab-mute-btn.muted { background: rgba(255,60,60,.15); border-color: rgba(255,60,60,.4); color: #ff5050; }
.lab-cells {
  display: flex; flex-direction: column-reverse; gap: 2px; flex: 1; width: 100%;
}
.lab-cell {
  flex: 1; width: 100%;
  border-radius: 4px;
  background: rgba(80,232,255,.04);
  border: 1px solid rgba(80,232,255,.08);
  cursor: pointer;
  transition: background .08s, border-color .08s;
}
.lab-cell:nth-child(4n+1) { border-top: 2px solid rgba(80,232,255,.15); border-left: 1px solid rgba(80,232,255,.08); }
.lab-cell.on { background: var(--track-color, rgba(80,232,255,.35)); border-color: var(--track-color, rgba(80,232,255,.5)); }
.lab-cell.on.muted { opacity: .25; }
.lab-cell.playing { box-shadow: 0 0 8px rgba(80,232,255,.5); }
.lab-cell:active { transform: scale(.92); }

/* track colors */
.lab-track[data-voice="kick"]  { --track-color: rgba(255,100,50,.5); }
.lab-track[data-voice="kick"]  .lab-cell.on { background: rgba(255,100,50,.4); border-color: rgba(255,100,50,.6); }
.lab-track[data-voice="snare"] { --track-color: rgba(255,200,60,.5); }
.lab-track[data-voice="snare"] .lab-cell.on { background: rgba(255,200,60,.35); border-color: rgba(255,200,60,.5); }
.lab-track[data-voice="hh"]    { --track-color: rgba(180,220,255,.5); }
.lab-track[data-voice="hh"]    .lab-cell.on { background: rgba(180,220,255,.3); border-color: rgba(180,220,255,.5); }
.lab-track[data-voice="hhc"]   { --track-color: rgba(130,250,255,.5); }
.lab-track[data-voice="hhc"]   .lab-cell.on { background: rgba(130,250,255,.34); border-color: rgba(130,250,255,.56); }
.lab-track[data-voice="crash"] { --track-color: rgba(255,130,190,.5); }
.lab-track[data-voice="crash"] .lab-cell.on { background: rgba(255,130,190,.34); border-color: rgba(255,130,190,.56); }
.lab-track[data-voice="bass"]  { --track-color: rgba(80,232,120,.5); }
.lab-track[data-voice="bass"]  .lab-cell.on { background: rgba(80,232,120,.35); border-color: rgba(80,232,120,.5); }
.lab-track[data-voice="chords"] { --track-color: rgba(180,80,255,.5); }
.lab-track[data-voice="chords"] .lab-cell.on { background: rgba(180,80,255,.35); border-color: rgba(180,80,255,.5); }

.lab-playhead-row {
  display: flex; flex-direction: column-reverse; gap: 2px;
  margin-top: 44px; margin-left: 0;
  padding: 0 0 0 4px; flex-shrink: 0;
}
.lab-playhead-dot {
  flex: 1; width: 4px;
  border-radius: 2px;
  background: rgba(80,232,255,.06);
  transition: background .06s;
}
.lab-playhead-dot.active { background: #50e8ff; }

#labBallCanvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 10;
}