/*CSS Styles for Tap Rhythm App */
/* ===== Tap — Baseline v1.93 =====
   Date: January 1, 2026

   Purpose:
     • Styles for Tap (Basic Rhythm Reader 4/4).
     • Layout tuned for Desktop, iPhone, and iPad with a stable stage aspect ratio (1200×520).
     • Clear tap-zone affordance: mint stageWrap background + white SVG stage surface.

   Key Layout Features:
     • Safe-area padding for iOS/iPadOS (viewport-fit=cover support).
     • Stable stage sizing via aspect-ratio + a CSS variable cap (--stage-max).
     • Overlays (Help + Calibration/Results) rendered as centered, scrollable cards.

   Input / UX Notes:
     • The stage itself is the tap area (no separate tap bar/button).
     • iOS/iPadOS input behavior:
         - Prevents Safari “input zoom” by ensuring number inputs render at ≥16px where needed.
         - Supports touch-action rules used by JS to lock/unlock scrolling during gameplay.

   v1.91 Improvements:
     • iOS/iPadOS stability polish:
         - Reduced layout shifts in mobile landscape.
         - Prevented Safari input-focus zoom from causing viewport/scroll jitter.

   Notes:
     • This stylesheet expects the SVG stage to provide a solid white play surface.
     • Any iOS scroll-locking during runs is controlled by ztapScript.js.

*/
/* ============ Variables & Resets ============ */
:root{
  --bg:#fff;
  --ink:#000;
  --panel:#f3f3f3;
  --mint:#dff3ea;
  --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:1dvh){ :root{ --stage-max:100dvh; } }
@supports (height:1svh){ :root{ --stage-max:100svh; } }

*,*::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;
}

/* Score pulse feedback (Option A) */
@keyframes scorePulse{
  0%{ box-shadow:0 0 0 0 rgba(10,125,22,.00); }
  35%{ box-shadow:0 0 0 10px rgba(10,125,22,.28); }
  100%{ box-shadow:0 0 0 0 rgba(10,125,22,.00); }
}
@keyframes scoreRecordPulse{
  0%{ box-shadow:0 0 0 0 rgba(10,125,22,.00); }
  25%{ box-shadow:0 0 0 14px rgba(10,125,22,.40); }
  55%{ box-shadow:0 0 0 22px rgba(10,125,22,.22); }
  100%{ box-shadow:0 0 0 0 rgba(10,125,22,.00); }
}
.pill.scorePulse{ animation:scorePulse 220ms ease-out; }
.pill.scoreRecordPulse{ animation:scoreRecordPulse 520ms ease-out; }

.pill.blink{ background:#F7FA2F; color:##F90617; }

.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;
}
/* Lives pill: hearts (bigger), score (normal) */
#timeLeft.livesPill{
  min-width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
}
#timeLeft.livesPill .hearts{
  font-size:clamp(18px, 3.2vw, 32px); /* ~1.5× to ~2× when there’s room */
  line-height:1;
}
#timeLeft.livesPill .scoreText{
  font-size:14px;
  font-weight:900;
}

@keyframes flash{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

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

.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;
}
/* iOS/iPadOS: prevent Safari zoom on input focus (causes viewport “shrink”/reflow) */
@supports (-webkit-touch-callout: none){
  select,
  input[type="number"]{
    font-size:16px;
  }
}

button{ cursor:pointer; }

button:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* ============ Stage & Overlay ============ */
#stageWrap{
  position:relative;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows: 1fr;
  max-block-size:100%;
  overflow:hidden;
  background:var(--mint);
  border-radius:12px;
  padding:10px;
  touch-action: pan-y; /* allow scroll gestures to start on the mint area too */
  }
}

#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 */
    touch-action: pan-y; /* allow vertical page scroll when NOT running */ /* critical: prevents iPad Safari pan/zoom stealing taps */
    -webkit-tap-highlight-color:transparent;
}

#hitRect{ pointer-events:all; }

#playhead{ display:none; }

.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;
  position:relative; /* needed for celebration layer */
}

/* ===== Celebration Burst (PB/HS) ===== */
.celebrate-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:14px;
  z-index:10000;
}

.celebrate-piece{
  position:absolute;
  left:var(--x, 50%);
  top:var(--y, 40%);
  font-size:var(--sz, 18px);
  transform:translate(-50%, -50%);
  opacity:0;
  will-change:transform, opacity;
  animation:celebrateBurst var(--dur, 1800ms) ease-out forwards;
  animation-delay:var(--delay, 0ms);
}

@keyframes celebrateBurst{
  0%   { opacity:0; transform:translate(-50%, -50%) translate(0,0) scale(.7) rotate(0deg); }
  12%  { opacity:1; }
  100% { opacity:0; transform:translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, -140px)) scale(1.15) rotate(var(--rot, 180deg)); }
}

#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; }

/* ============ 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; }
}

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

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

/* Landscape block for iPhone and iPad */
/* Phone landscape: keep controls visible (iPhone landscape is short) */
@media (orientation: landscape) and (max-height: 500px) {
  html, body { overflow-y: auto; }

  header, footer { padding: 6px 12px; }
  .topbar { margin: 6px 0; }
  .counter, .timer { min-width: 70px; font-size: 12px; }

  /* Give the stage less height so the controls don't get pushed offscreen */
  #stageWrap {
    min-height: 0;
    padding: 6px;
  }

  /* Cap the stage height in landscape */
  #stage {
    width: 100%;
    height: auto;
    max-height: 42svh;
    min-height: 160px;
    aspect-ratio: 1200/520;
  }

  /* Slightly tighter controls spacing */
  .controls { padding: 6px 0; gap: 8px; }
}


/* =========================
   Final Mobile Fix Block
   ========================= */

/* 1. Kill horizontal overflow and enforce viewport width */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 2. Generic mobile tightening */
@media (max-width: 480px) {
  /* Stage is the tap zone — keep it compact so controls remain visible */
  #stageWrap {
    grid-template-rows: 1fr;
    height: auto;
    min-height: 0;
    padding: 6px;            /* slightly tighter than desktop */
  }

  #stage {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200/520;
    min-height: 220px;       /* allow smaller phones without pushing controls off screen */
  }

  header, .topbar {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: hidden;
  }

  svg#stage {
    margin-top: -6px;        /* gentler than -8 on phones */
  }
}

@media (max-width: 600px) {
  .controls {
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 600px){
  .page{ width:100%;}
}