:root{
  --bg:#0b1020; --card:#121935; --ink:#eaf0ff; --muted:#9fb2ff; --accent:#8be9fd; --good:#6de39b; --warn:#ffd166; --bad:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:var(--bg); color:var(--ink)}
header{padding:22px 18px; background:linear-gradient(90deg,#111a3b,#0e1530); border-bottom:1px solid #1e2a5a}
h1{margin:0;font-size:clamp(20px,2.8vw,32px)}
main{max-width:1100px;margin:24px auto;padding:0 16px 120px}
.card{background:var(--card); border:1px solid #1e2a5a; border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid; gap:16px}
.g-cols{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
button, input[type="text"], input[type="number"], select{border:none; background:#1a2450; color:var(--ink); padding:10px 12px; border-radius:12px; outline:0; font-weight:600}
button{cursor:pointer; transition:.12s transform,.12s background}
button:hover{transform:translateY(-1px); background:#223070}
button[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.pill{padding:6px 10px; border-radius:999px; background:#0e1638; border:1px dashed #2b3a8a; color:var(--muted); font-size:12px}
.tag{background:#1b2658; border:1px solid #2a3a8f; color:#cfe0ff; padding:4px 8px; border-radius:10px; font-size:12px}
.list{display:flex; flex-wrap:wrap; gap:8px}
.players li{list-style:none; background:#0f1942; border:1px solid #263376; padding:10px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
audio{width:100%;}
.tiny{font-size:12px; color:var(--muted)}
.good{color:var(--good)}
.warn{color:var(--warn)}
.bad{color:var(--bad)}
.meter{height:10px; border-radius:999px; background:#0b1333; overflow:hidden; border:1px solid #24337a}
.meter > i{display:block; height:100%; width:0%; background:linear-gradient(90deg,#3da5ff,#7cf6ff)}
.sep{height:1px; background:#1e2a5a; margin:8px 0 12px}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background:#0b1333; border:1px solid #293a83; padding:2px 6px; border-radius:6px}

/* Visual Metronome */
.visual-metronome {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 16px auto 10px;
  display: none; /* Initially hidden */
}

.visual-metronome .metronome-arm {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 130px;
  background: linear-gradient(to top, var(--accent), #eaf0ff);
  border-radius: 2px;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  /* Animation will be controlled by JS */
}

.visual-metronome .metronome-weight {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 30px;
  height: 30px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 15px var(--accent);
}

/* Base for the metronome */
.visual-metronome::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 10px;
  background: #1a2450;
  border-radius: 5px;
  border: 1px solid #2a3a8f;
}

.visual-metronome.swinging .metronome-arm {
  animation-name: swing;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.visual-metronome.snappy .metronome-arm {
  /* Use a very quick linear transition for the snap so the arm appears on the other side just before the beat */
  transition: transform 0.04s linear;
  animation: none !important;
}

@keyframes swing {
  0% { transform: translateX(-50%) rotate(-40deg); }
  50% { transform: translateX(-50%) rotate(40deg); }
  100% { transform: translateX(-50%) rotate(-40deg); }
}

/* Cover page overlay */
#cover{position:fixed; inset:0; background:radial-gradient(1200px 800px at 20% 10%, #1a2450 0, #0b1020 60%); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; background-color:rgba(11,16,32,0.96);}
#cover .wrap{max-width:980px; width:100%;}
#cover h1{font-size:clamp(28px,4.5vw,54px); margin-bottom:6px}
#cover .subtitle{color:#cfe0ff}
#cover .grid{grid-template-columns:1.1fr 0.9fr}
#cover .panel{background:#0e1638; border:1px solid #2a3a8f; border-radius:18px; padding:16px}
#startBtn{font-size:18px; padding:12px 18px}

/* Responsive tweaks */
@media (max-width:720px){
  .g-cols{grid-template-columns:1fr}
  #cover .grid{grid-template-columns:1fr}
}