/*CSS Styles for Tap Rhythm App */
/* ============ Variables & Resets ============ */
:root{
  --bg:#fff;
  --ink:#000;
  --panel:#f3f3f3;
  --accent:#111;
  --good:#0a7d16;
  --warn:#c62828;
  --staff:#000;
  --staff-zoom:1;
  --stage-max:90vh; /* fallback */
}
/* Dynamic/Small viewport unit fallbacks for mobile toolbars */
@supports (height:1svh){ :root{ --stage-max:100svh; } }
@supports (height:1dvh){ :root{ --stage-max:100dvh; } }

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  overflow:hidden; /* grid layout expects no page scroll */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  /* Safe-area without widening .page */
  padding-top:env(safe-area-inset-top);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  -webkit-text-size-adjust:100%; /* prevent iOS text auto-zoom */
}

/* ============ Layout ============ */
.page{
  width:min(92vw,1100px);
  margin:0 auto;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto minmax(0,var(--stage-max)) auto auto;
}

header,footer{ padding:10px 16px; }
header{ border-bottom:1px solid #ddd; }
header h1{ font-size:clamp(20px,5.4vw,32px); }

footer{
  border-top:1px solid #ddd;
  color:#555;
  font-size:12px;
  text-align:center;
}

.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin:8px 0;
}

.left,.mid,.right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ============ UI Elements ============ */
.pill{
  border:1px solid #bbb;
  border-radius:999px;
  padding:6px 10px;
  background:#fff;
  font-variant-numeric:tabular-nums;
}
.pill.blink{ background:#111; color:#fff; }

.counter{
  min-width:84px;
  text-align:center;
  font-weight:800;
}

.timer{
  min-width:88px;
  text-align:center;
  font-weight:900;
}
.timer.warn{
  color:var(--warn);
  animation:flash .8s steps(2,start) infinite;
}
@keyframes flash{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

.bpm input{
  width:72px;
  text-align:center;
}

.bpm input:disabled{
  opacity:.55;
  cursor:not-allowed;
}

select,input[type=number],button{
  border:1px solid #bbb;
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
}

button{ cursor:pointer; }

/* ============ Stage & Overlay ============ */
#stageWrap{
  position:relative;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:1fr auto;
  grid-auto-rows:auto;
  row-gap:10px;
  max-block-size:100%;
  overflow:hidden;
}

#stage{
  /* One authoritative block for #stage */
  width:100%;
  height:auto;          /* let aspect-ratio compute height */
  max-height:100%;
  min-height:320px;
  display:block;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  background:#fff;
  aspect-ratio: 1200/520;
  transform:scale(var(--staff-zoom));
  transform-origin:center top;
  will-change:transform; /* smoother scaling on iOS */
}

#playhead{ display:none; }

#tapArea{
  display:flex;
  justify-content:center;
  -webkit-user-select:none;
  user-select:none;
}

#tapBtn{
  width:min(560px,100%);
  min-height:72px;
  border:1px solid #bbb;
  border-radius:12px;
  background:#0f62fe;
  color:#fff;
  font-weight:800;
  letter-spacing:.4px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  transition:transform .06s ease, box-shadow .06s ease;
}
#tapBtn:active{ 
  transform:translateY(1px); }

#tapBtn.pressed{
  transform:translateY(4px);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* <-- centers all the groups horizontally */
  align-items: center;       /* <-- vertically align them nicely */
  gap: 10px;
  padding: 10px 0;
}

.controls .group {
  display: flex;
  align-items: center;
  justify-content: center;   /* centers items within each group */
  flex-wrap: wrap;
  gap: 6px;
}

.chip{
  border:1px solid #bbb;
  border-radius:999px;
  background:#fff;
  padding:6px 10px;
  cursor:pointer;
}
.chip[aria-pressed="true"]{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* Modal overlay guaranteed on top of transformed content */
#overlay{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.08);
  z-index:9999;
}
#overlay .card{
  background:#fff;
  border:1px solid #bbb;
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  padding:16px;
  max-width:680px;
  width:min(680px,92%);
  max-height:calc(100dvh - 24px);
  overflow:auto;
}
#helpOverlay{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.08);
  z-index:9999;
}
#helpOverlay .card{
  background:#fff;
  border:1px solid #bbb;
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  padding:16px;
  max-width:680px;
  width:min(680px,92%);
  max-height:calc(100dvh - 24px);
  overflow:auto;
}
#overlay h2{ margin:0 0 8px; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.page {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ============ Accessibility ============ */
@media (prefers-reduced-motion:reduce){
  #stage{ transition:none; }
  .timer.warn{ animation:none; }
}

/* ============ Responsive Tweaks ============ */
/* Avoid input focus zoom on small iPhones */
@media (max-width:430px){
  select,input[type=number],button{ font-size:16px; }
  :root{ --staff-zoom:1.12; }
  .topbar{ gap:8px; }
  .counter,.timer{ min-width:78px; }
  .bpm input{ width:64px; }
}

@media (max-width:393px){
  :root{ --staff-zoom:1.08; }
  #tapBtn{ min-height:52px; }
}

@media (max-width:360px){
  .topbar{ gap:6px; }
  .counter,.timer{ min-width:70px; font-size:12px; }
  #tapBtn{ min-height:58px; }
}

/* iPad range */
@media (min-width:600px) and (max-width:1024px){
  :root{ --staff-zoom:1.04; }
  #tapBtn{ min-height:60px; }
  .counter,.timer{ min-width:80px; }
}

/* Short landscape (iPhone landscape) */
@media (orientation:landscape) and (max-height:480px){
  header,footer{ padding:6px 12px; }
  .topbar{ margin:6px 0; }
  .counter,.timer{ min-width:70px; font-size:12px; }
  #tapBtn{ min-height:46px; }
}

/* Touch-first boost: make lower region substantial on coarse pointers (phones/tablets) */
@media (pointer:coarse){
  #tapArea{
    min-height:22vh;         /* occupy a healthy chunk of the lower region */
    padding-top:8px;         /* small breathing room above button */
    padding-bottom:8px;
  }
  #tapBtn{
    min-height:96px;         /* bigger target for thumbs */
    font-size:clamp(16px,4.4vw,20px);
  }
}

/* iPhone-ish widths: even taller for single-handed tapping */
@media (max-width:430px){
  #tapArea{ min-height:24vh; }
  #tapBtn{ min-height:110px; }
}

/* Very small phones */
@media (max-width:360px){
  #tapArea{ min-height:26vh; }
  #tapBtn{ min-height:118px; }
}

/* iPad range — give a comfortable pad without making it gigantic */
@media (min-width:600px) and (max-width:1024px){
  #tapArea{ min-height:20vh; }
  #tapBtn{ min-height:96px; }
}
/* Clamp the tap area on wide screens so footer remains visible */
@media (min-width:1025px){
  #tapArea{
    min-height:18vh;   /* smaller fraction of screen on desktops */
  }
  #tapBtn{
    min-height:80px;
  }
}
@media (max-width: 480px) {
  #stageWrap {
    grid-template-rows: auto 1fr;   /* tighten grid rows */
    height: auto;
    min-height: 48vh;              /* take roughly half the screen height */
  }

  #stage {
    aspect-ratio: 1200/560;
    height: auto;
    width: 100%;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  body, html {
    overflow-y: auto; /* allow gentle scroll instead of clipping */
  }
  #stageWrap {
    min-height: 60vh;
  }
  #tapArea {
    min-height: 18vh;  /* reduce to give space for staff */
  }
}
/* =========================
   Final Mobile Fix Block
   ========================= */

/* 1. Kill horizontal overflow and enforce viewport width */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.page {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 2. Generic mobile tightening */
@media (max-width: 480px) {
  /* Tighter vertical layout */
  #stageWrap {
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 42vh;          /* slightly less than half screen */
  }

  #stage {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200/560;
  }

  /* Prevent wide header buttons from pushing layout wider */
  header, .topbar {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: hidden;
  }

  /* Pull the staff up a little for balance */
  svg#stage {
    margin-top: -8px;
  }
}

/* 3. Landscape: allow scrolling and prevent clipping */
@media (orientation: landscape) and (max-height: 500px) {
  html, body { overflow-y: auto; }
  #stageWrap { min-height: 58vh; }
  #tapArea   { min-height: 18vh; }
}

/* 4. Desktop clamp (unchanged) */
@media (min-width: 1025px) {
  #tapArea { min-height: 18vh; }
  #tapBtn  { min-height: 80px; }
}
/* Phone landscape: give the staff more vertical room and keep it inside the card */
@media (orientation: landscape) and (max-height: 500px) {
  html, body { overflow-y: auto; }

  /* Make the stage row taller so the SVG doesn't poke through the bottom radius */
  #stageWrap {
    min-height: 72vh;   /* was 60vh */
    height: auto;
  }

  /* Let the SVG fit the row height without exceeding it */
  #stage {
    width: 100%;
    height: auto;
    max-height: 100%;       /* <- key line: obey the container */
    aspect-ratio: 1200/560; /* keeps proportions consistent */
  }

  /* Trim the tap area a bit to give that space to the staff */
  #tapArea { min-height: 12vh; }  /* was 18vh */
}
@media (max-width: 600px) {
  .controls {
    flex-direction: column;
    gap: 12px;
  }
}