/* Page layout */
:root{
  --stage-max: 420px;
  --accent: #e6eef8;
}

.app{ display:flex; flex-direction: column; align-items:center; padding: 10px 16px 40px }

.metronome-wrap{ display:flex; align-items:center; gap: 10px; width:100%; justify-content:center }

.side-btn, .menu-btn{
  appearance:none; border:none; border-radius:10px; width:44px; height:44px; font-size:28px; line-height:1; cursor:pointer;
  background: var(--tile-bg, rgba(255,255,255,0.06)); color: var(--text, #e6eef8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
.side-btn:active{ transform: none; }

/* Nudge side buttons slightly upward so they're closer to the rod */
.side-btn{ position: relative; top: max(-5vw, -50px); z-index: 10; pointer-events: auto; }

.side-btn.plus{
    right:50px;
}

.side-btn.minus{
    right:-50px;
}

.metronome-stage{
  position:relative; width:min(90vw, var(--stage-max)); aspect-ratio: 3/5; /* close to the photo proportions */
  background: center/contain no-repeat url('metronome.png');
}

/* Pendulum assembly: position so that the bottom tip sits on the pivot point of the body */
.rod-assembly{
  position:absolute; left:50%; bottom:30.6%; /* adjust this to match the image pivot visually */
  width: 1px; height: 1px; /* minimal footprint so it's visible */
  transform-origin: 50% 100%; /* pivot at bottom center */
  will-change: transform;
  z-index: 2;
}


/* Rod image anchored at bottom center */
.rod{
  position:absolute; left:50%; bottom:0;
  transform: translateX(-50%);
  height: 63%; /* relative to stage height; tweak to match photo */
  pointer-events: none;
}

/* Weight slides along the rod vertically; we keep it centered on the rod */
.weight{
  position:absolute; left:50%; bottom:0;
  transform: translate(-50%, 0);
  height: 9%; 
  touch-action: none;
  cursor: grab;
  -webkit-touch-callout: none; /* disable iOS long-press callout */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.weight:active{ cursor: grabbing }

.bpm-readout{
  font-family: "Quicksand", system-ui, sans-serif;
  background: rgba(0,0,0,0.35); color: var(--accent); border-radius: 8px; font-weight:800; letter-spacing:.02em;
  padding: 7px 12px;width: 80px;text-align: center;font-size: 23px;
}

/* Lower front cover to hide rod inside the cabinet */
.front-cover{
  position:absolute; left: 0; right: 0; bottom: 0;
  height: 34%; /* adjust to match the visible opening */
  background: center bottom/contain no-repeat url('lowfront-cover.png');
  z-index: 3; /* above rod assembly (2), below BPM (default higher stacking via later DOM) */
  pointer-events: none; /* allow drag through */
}
.bottom-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin: 50px 0;
  gap: 15px;
}

.menu-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #676767;
}

/* Tiny spinner when loading audio */
.menu-btn.loading{
  position: relative;
  opacity: 0.75;
}
.menu-btn.loading::after{
  content: '';
  position: absolute;
  right: -18px;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: met-spin 0.9s linear infinite;
}

@keyframes met-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 560px){
  .metronome-wrap{ gap:6px; justify-content:center }
  .side-btn{ width:40px; height:40px; font-size:26px;}
  .side-btn.plus{
        right:20px;
    }

    .side-btn.minus{
        right:-20px;
    }

}