/* CSS for Note Shooter */
:root {
  --bg:    #E4E4E7; /* paper */
  --ink:   #000000; /* black */
  --panel: #DFE7F2; /* light panel */
  --accent:#111;    /* UI borders */
  --staff:#000;     /* staff lines */
  --good: #0a7d16; /* arrow (hit) */
  --bad:  #c62828; /* wrong shake only */
}
html, body { height:100%; }
body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
       
/* Page width = 92vw (4% margins on left/right) */
.page {
  width:92vw;
  margin:0 auto;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
       
header, footer {
  padding:10px 16px;
}
header { border-bottom:1px solid #ADADAD; 
text-align:center;
}
footer {
  border-top:1px solid #ddd;
  color:#444;
  font-size:12px;
  text-align:center;
}
       
/* TOP (gameplay) / BOTTOM (controls) layout */
.container {
  display: grid;
  grid-template-rows: auto 1fr;   /* stats row sizes to its content; gameplay fills remaining height */
  gap: 12px;
  padding: 12px;
  min-height: 0;
  height: 100%;
}
.panel {
  background:var(--panel);
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
}
h1 { margin:0; font-size:20px; }
h2 { margin:0 0 8px; font-size:15px; }
       
.controls label {
  display:block;
  margin:8px 0 4px;
  font-size:13px;
}
.controls input,
.controls select,
.controls button {
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid #bbb;
  background:#fff;
  color:var(--ink);
  font-size:14px;
  box-sizing:border-box;
}
.controls button { cursor:pointer; }
       
.promo-emojis {
  font-size: 1.6em;
}

/* Stage fills remaining height; answer bar sits directly beneath */
#stageWrap {
  position:relative;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows: 0.7fr auto; /* 70% for staff, remainder for answer bar */
  align-content:stretch;
  overflow:visible;
}
       
/* Staff area (SVG). Height set via grid; width 100% of column */
#stage {
  width:100%;
  height:100%;
  display:block;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
       
/* Subtle notehead depth */
#noteGroup ellipse {
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
/* Hide clef glyphs to avoid tofu boxes on some systems */
#trebleClef, #bassClef { display:none; }
       
/* Big timer in upper-right of gameplay */
#bigTimer {
  position:absolute;
  top:8px;
  right:35%;
  font-size:48px;
  font-weight:900;
  letter-spacing:.5px;
}
#bigTimer.urgent {
  color:var(--bad);
  animation:flash .8s steps(2,start) infinite;
}
@keyframes flash {
  0%,49% { opacity:1; }
  50%,100% { opacity:0; }
}
       
/* === Answer buttons: compact circular 3-over-4 cluster (fluid, responsive) === */
#answerBar { padding:10px 4px 0; }
       
#answerBar .kbd-row {
  display:grid;
  grid-template-columns: repeat(4, auto); /* shrink-wrap columns */
  grid-auto-rows:auto;
  gap:6px;/* tighter cluster */
  margin:6px auto 8px;      /* center the grid block */
  justify-content:center;   /* center cluster horizontally */
  justify-items:center;     /* center items in their cells */
  align-items:center;
  max-width: calc(100% - 48px); /* prevent edge overflow on small panels */
}
       
/* Explicit placement for 3-on-top / 4-on-bottom */
#answerBar .kbd-row button:nth-child(1){ grid-column:1;        grid-row:1; }      /* A */
#answerBar .kbd-row button:nth-child(2){ grid-column:2 / span 2; grid-row:1; }    /* B */
#answerBar .kbd-row button:nth-child(3){ grid-column:4;        grid-row:1; }      /* C */
#answerBar .kbd-row button:nth-child(4){ grid-column:1;        grid-row:2; }      /* D */
#answerBar .kbd-row button:nth-child(5){ grid-column:2;        grid-row:2; }      /* E */
#answerBar .kbd-row button:nth-child(6){ grid-column:3;        grid-row:2; }      /* F */
#answerBar .kbd-row button:nth-child(7){ grid-column:4;        grid-row:2; }      /* G */
       
/* Circular buttons */
#answerBar .kbd-row button {
  box-sizing:border-box;
  display:grid;
  place-items:center;    /* perfectly center the letter */
  font-size:clamp(24px, 2.8vw, 36px);
  min-width:2.4em;
  max-width:2.8em;       /* cap width to about 3em */
  padding:0.35em;
  line-height:1;/* avoid extra vertical whitespace */
  border:none;
  border-radius:50%;     /* circular */
  color:#fff;
  font-weight:800;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
  box-shadow:0 8px 0 rgba(0,0,0,.2), 0 10px 16px rgba(0,0,0,.12);
  transition:transform .06s ease, box-shadow .06s ease, filter .2s;
}
#answerBar .kbd-row button:active {
  transform:translateY(2px);
  box-shadow:0 6px 0 rgba(0,0,0,.2), 0 6px 10px rgba(0,0,0,.12);
}
#answerBar .kbd-row button:hover { filter:brightness(1.25); }
       
/* Rainbow gradients per letter A–G */
#answerBar .kbd-row button:nth-child(1){ background:linear-gradient(#ff8a8a,#ff4d4d);} /* A */
#answerBar .kbd-row button:nth-child(2){ background:linear-gradient(#ffb36b,#ff8c32);} /* B */
#answerBar .kbd-row button:nth-child(3){ background:linear-gradient(#ffe66b,#ffcf2e); color:#3b2b00; text-shadow:none;} /* C */
#answerBar .kbd-row button:nth-child(4){ background:linear-gradient(#8be28b,#38c172);} /* D */
#answerBar .kbd-row button:nth-child(5){ background:linear-gradient(#7ec8ff,#3aa0ff);} /* E */
#answerBar .kbd-row button:nth-child(6){ background:linear-gradient(#a48bff,#7a5cff);} /* F */
#answerBar .kbd-row button:nth-child(7){ background:linear-gradient(#ff91e1,#ff5ac8);} /* G */
       
/* Stats panel with fixed 20px padding at bottom */
#controlsPanel {
  padding: 6px 10px 20px;  /* top 6px, left/right 10px, bottom 20px */
  background: var(--panel);
  border: 1px solid #ddd;
  border-radius: 12px;
}
/* Header row with “Stats” on left and “Select Range” on right */
#controlsPanel .header-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  min-height:24px;
  margin-bottom:4px;
}
#controlsPanel .header-row h2 {
  margin:0;
  font-size:15px;
  font-weight:600;
}
#controlsPanel .range-label {
  font-size:14px;
  font-weight:600;
}
/* Row of stats + range selectors (5 equal columns) */
#controlsPanel .readout {
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
  align-items:stretch;
}
/* Chips for Score and Accuracy */
#controlsPanel .readout .chip {
  background:#fff;
  border:1px solid #bbb;
  border-radius:10px;
  padding:4px 6px;
  font-size:13px;
  text-align:center;
  min-width:100px;
  white-space:nowrap;
}
/* Range controls: label on top, select on bottom */
.range-control {
  background:#fff;
  border:1px solid #bbb;
  border-radius:10px;
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.range-control label {
  font-size:12px;
  margin-bottom:4px;
}
.range-control select {
  width:100%;
  padding:6px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  font-size:14px;
}
/* Remove this block to restore center alignment for the Helpers button */
/* Helpers button aligns text at top of its cell */
 /* Align Helpers and Reset Data text at the top of their cells */
 #helpersToggle {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding-top: 4px;
   }
/* Hide the Reset Data button until the row is hovered */
   #resetData {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding-top: 4px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.8s ease;
     width: 60%; /* button is 60% as wide as its cell */
     margin-left: auto;
     margin-right: auto;
   }
   /* When the Reset button has the .clicked class, make it purple */
   #resetData.clicked {
     color: purple;
   }
   #controlsPanel .readout:hover #resetData {
     opacity: 1;
     pointer-events: auto;
   }

/* Overlay container — visible by default; fades out when .hidden is applied */
   #overlayText {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: start center;  /* keep it higher on screen */
     padding-top: 8vh;
     opacity: 1;                 /* VISIBLE by default */
     pointer-events: auto;       /* clickable by default */
     transition: opacity 0.6s ease-in-out;
   }
   
 /* MUST come after the base #overlayText block */
 #overlayText.hidden {
   opacity: 0 !important;
   pointer-events: none !important;
 }

   /* Speed presets (JS will toggle these) */
  #overlayText.fade-fast { --overlay-dur: 0.0s; }  /* quick fade (Start overlay OUT) */
  #overlayText.fade-slow { --overlay-dur: 1.3s; }  /* slow fade (Time’s up overlay IN) */

.overlay-card {
  max-width:720px;
  width:min(720px,92%);
  background:#fff;
  color:#111;
  border:1px solid #bbb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.overlay-card h2 { margin:0 0 6px; }
.overlay-card button {
  font-size:28px;
  padding:20px 24px;
  width:100%;
  border:1px solid #aaa;
  border-radius:12px;
  font-weight:700;
}
       
/*.hidden { opacity: 0 !important; pointer-events: none !important; 
}*/
       
@keyframes shake {
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}

.shake {
  animation: shake 0.25s linear;
  animation-iteration-count: 3; /* repeats the 0.35s shake three times (≈1.05s total) */
}

/* Make helper note labels bold and slightly larger */
#helpersGroup text {
  font-size: 16px;      /* adjust size as needed */
  font-weight: 800;     /* bold */
}

/* ===== Responsive adjustments ===== */
/* Medium screens: tablets and small laptops */
@media (max-width: 768px) {
  /* Compress the staff area a bit so it doesn’t crowd out the buttons */
  #stageWrap {
    grid-template-rows: 0.6fr auto; /* 60% for staff, rest for answer bar */
  }

  /* Reduce the size of the timer */
#bigTimer {
    font-size: 36px;
    top: 4px;
    right: 8px;
  }

  /* Slightly shrink the answer buttons */
 #answerBar .kbd-row button {
    font-size: clamp(18px, 4vw, 24px);
    min-width: 2.2em;
    max-width: 2.6em;
    padding: 0.3em;
  }

  /* Stack the stats controls into two rows instead of five columns */
 #controlsPanel .readout {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
  }

  /* Make the range selectors span the full row */
 #controlsPanel .readout .range-control {
    grid-column: span 2;
  }

  /* Reduce stats header font sizes */
 #controlsPanel .header-row h2,
 #controlsPanel .range-label {
    font-size: 12px;
  }
}

/* Very small screens: narrow phones */
@media (max-width: 480px) {
  /* Use a single-column layout for all stats controls */
  #controlsPanel .readout {
    grid-template-columns: 1fr;
  }

  /* Every chip/select occupies the whole row */
 #controlsPanel .readout .chip,
 #controlsPanel .readout .range-control,
 #helpersToggle {
    grid-column: span 1;
  }

  /* Make the answer buttons a bit smaller again */
 #answerBar .kbd-row button {
    font-size: clamp(16px, 5vw, 20px);
    min-width: 2em;
    max-width: 2.4em;
    padding: 0.25em;
  }

  /* Further reduce the timer */
 #bigTimer {
    font-size: 28px;
  }
}
  /* maybe? */
 #resetData {
  color: #c62828;   /* optional: red text */
}
@media (min-width: 600px) {
  #overlayText {
    place-items:start center;
    padding-top: 8vh;
  }
}
/* Default: show the trophy score label, hide the reset label */
#resetData .score-label { display: inline; }
#resetData .reset-label { display: none; }

/* On hover or keyboard focus, show the Reset label instead */
#resetData:hover .score-label,
#resetData:focus .score-label { display: none; }

#resetData:hover .reset-label,
#resetData:focus .reset-label { display: inline; }
#resetData .score-label { font-size: 2.0em; }


/* ===== Mobile interaction containment ===== */

/* Prevent horizontal viewport jiggle; vertical scroll still allowed */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none; /* stops sideways chaining on modern browsers */
}

/* On the game stage: allow only vertical panning (scroll), not horizontal drags */
#stageWrap,
#stage {
  touch-action: pan-y; /* Safari 13.4+ honors this; Chrome/Edge Android too */
}

/* Treat button taps as taps (no gesture inference); helps avoid double-tap zoom/jiggle */
#answerBar .kbd-row button,
#helpersToggle,
#resetData {
  touch-action: manipulation; /* tap/click only; no pan/zoom derived from tap */
}

/* Optional: reduce iOS tap highlight “flash” on controls to feel more native */
#stageWrap,
#stage,
#answerBar .kbd-row button,
#helpersToggle,
#resetData {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Optional: prevent parent page from rubber-banding when interacting inside the stage */
#stageWrap {
  overscroll-behavior: contain; /* supported on most modern browsers */
}

/* Enlarge staff and text slightly on iPhones and very small screens */
@media (max-width: 440px) {
  #stage {
    transform: scale(1.9);
    transform-origin: top center;
  }

  .hint {
    padding-top: 3.8em;
  }

  #answerBar .kbd-row button {
    font-size: 1.7em;  /* make answer buttons a bit larger */
    padding: 1.2em, 1.2em;
  }

  .overlay-card {
    font-size: 0.9em; /* optional: slightly larger instructions text */
  }
}