* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow: hidden; height: 100dvh; }
body {
  font-family: "Press Start 2P", monospace;
  background: #1a1025;
  color: #e8def8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ---- Viewport wrapper ---- */
#viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ---- Header (shown before game starts) ---- */
#header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex: 1;
  width: 100%;
}
#header h1 {
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Individual title characters — dim until lit by loading animation */
.title-char, .title-sep {
  display: inline-block;
  color: #4a3560;
  transition: color 200ms ease, text-shadow 200ms ease;
}
.title-char.lit,
#title-h1.all-lit .title-sep {
  color: #b388ff;
  text-shadow:
    2px 2px 0 #7c4dff,
    4px 4px 0 #4a3560,
    0 0 20px #b388ff,
    0 0 40px #7c4dff;
}
@keyframes bounce-letter {
  0%, 100% { transform: translateY(0); }
  35%       { transform: translateY(-10px); }
  65%       { transform: translateY(-3px); }
}
.title-char.bounce-letter { animation: bounce-letter 0.35s ease-out; }
@keyframes bounce-title {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-18px); }
  45%      { transform: translateY(-6px); }
  65%      { transform: translateY(-12px); }
  80%      { transform: translateY(-2px); }
}
#title-h1.bounce-title { animation: bounce-title 0.55s ease-out; }

/* Loading dot-spinner — absolute below h1, out of flex flow */
.title-block {
  position: relative;
  padding-bottom: 1.6rem;
}
#load-spinner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 1.4rem);
  white-space: nowrap;
  font-size: 0.75rem;
  color: #6a4a80;
  letter-spacing: 0.12em;
  opacity: 1;
}
#load-dots {
  display: inline-block;
  width: 3ch;
  text-align: left;
  vertical-align: bottom;
}
@keyframes spinner-fade-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
#load-spinner.fade-out {
  animation: spinner-fade-out 0.45s ease-in forwards;
  pointer-events: none;
}

/* Subtitle + buttons hidden until title animation completes */
@keyframes menu-drop-in {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-subtitle {
  font-size: 1.05rem;
  color: #9575a0;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}
.menu-subtitle.visible {
  animation: menu-drop-in 0.45s ease-out forwards;
  pointer-events: auto;
}
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  align-items: flex-start;
}

/* Buttons: icon+label grid, no background box */
#play-btn, #settings-btn {
  background: none;
  border: none;
  font-family: "Press Start 2P", monospace;
  font-size: 1.5rem;
  color: #b388ff;
  cursor: pointer;
  padding: 0.2rem 0;
  display: grid;
  grid-template-columns: 3.5rem auto;
  align-items: center;
  letter-spacing: 0.05em;
  transition: color 150ms ease, text-shadow 150ms ease;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}
#play-btn::before    { content: '▶'; font-size: 1.8rem; display: block; text-align: center; line-height: 1; transform: translateY(-0.2em); }
#settings-btn::before { content: '⚙'; font-size: 3rem;  display: block; text-align: center; line-height: 1; transform: translateY(-0.15em); }
#play-btn.visible, #settings-btn.visible {
  animation: menu-drop-in 0.4s ease-out forwards;
  pointer-events: auto;
}
#play-btn:hover:not(:disabled),
#settings-btn:hover {
  color: #e8def8;
  text-shadow:
    2px 2px 0 #7c4dff,
    4px 4px 0 #4a3560,
    0 0 20px #b388ff,
    0 0 40px #7c4dff;
}
#play-btn:disabled { color: #4a3560; cursor: not-allowed; }

/* ---- Game area (shown after Start) ---- */
#game-area {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  padding: 0.3rem;
}

/* Staff container */
#staff-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  flex: 1;
}

/* Lesson progress bar (thin bar at top of staff) */
#lesson-progress-track {
  width: 100%; height: 4px;
  background: #4a3560; border-radius: 4px 4px 0 0;
  overflow: hidden;
}
#lesson-progress {
  height: 100%; width: 0%;
  background: #b388ff; transition: width 300ms ease;
}

/* VexFlow SVG output */
#staff-output {
  width: 100%;
  min-height: 300px;
  border-radius: 0 0 4px 4px;
  background: #fff;
  overflow: hidden;
}

/* Stop button (small, top-right of game area) */
#stop-btn {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.55rem; padding: 0.3rem 0.7rem;
  border: 1px solid #7c4dff; border-radius: 4px;
  background: rgba(45,31,61,0.9); color: #9575a0;
  cursor: pointer; z-index: 10;
  font-family: "Press Start 2P", monospace;
  transition: background 150ms ease, color 150ms ease;
}
#stop-btn:hover { background: #2d1f3d; color: #e8def8; }

/* Debug output (shown via ?mode=debug) */
#debug-output {
  display: none;
  margin-top: 0.3rem;
  font-family: "Press Start 2P", monospace;
  font-size: 0.55rem;
  color: #b388ff;
  background: #2d1f3d;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  max-width: 1000px;
  width: 100%;
  text-align: left;
  min-height: 1.5em;
}

/* End screen / quiz overlay */
#end-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26,16,37,0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1.5rem;
}
#end-overlay h2 {
  font-size: 1rem; margin-bottom: 1rem; color: #b388ff;
}
#quiz-options {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; margin-bottom: 1.2rem;
  max-width: 500px;
}
.quiz-btn {
  font-size: 0.7rem; padding: 0.5rem 1.2rem;
  border: 2px solid #4a3560; border-radius: 4px;
  background: #2d1f3d; color: #e8def8; cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  font-family: "Press Start 2P", monospace;
}
.quiz-btn:hover:not(:disabled) { border-color: #b388ff; background: #3d2a54; }
.quiz-btn:disabled { cursor: default; opacity: 0.7; }
.quiz-correct { border-color: #5a9a6a !important; background: #1a3a24 !important; }
.quiz-wrong { border-color: #991b1b !important; background: #3d1111 !important; }
#quiz-result {
  font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem;
}
#quiz-explanation {
  font-size: 0.65rem; color: #9575a0; max-width: 400px;
  text-align: center; margin-bottom: 1.2rem; line-height: 1.8;
}
#play-again-btn {
  display: none;
  font-size: 0.8rem; padding: 0.6rem 1.8rem;
  border: none; border-radius: 4px;
  background: #7c4dff; color: #fff; cursor: pointer;
  font-family: "Press Start 2P", monospace;
  transition: background 150ms ease;
}
#play-again-btn:hover { background: #b388ff; }

/* Fullscreen toggle button */
#fullscreen-btn {
  position: fixed; bottom: 0.6rem; right: 0.6rem;
  font-size: 1.1rem; padding: 0.4rem 0.5rem;
  border: 1px solid #4a3560; border-radius: 4px;
  background: rgba(45,31,61,0.85); color: #9575a0;
  cursor: pointer; z-index: 100;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}
#fullscreen-btn:hover { background: #2d1f3d; color: #b388ff; }

/* Mode badge (created dynamically by game.js) */
#mode-badge {
  position: fixed; bottom: 0.4rem; right: 2.5rem;
  font-size: 0.5rem; color: #9575a0;
  background: rgba(45,31,61,0.85); padding: 0.2rem 0.5rem;
  border-radius: 4px; z-index: 100;
}

/* Landscape mobile */
@media (max-height: 500px) {
  #header h1 { font-size: 1.5rem; }
  #play-btn, #settings-btn { font-size: 0.85rem; grid-template-columns: 2.5rem auto; }
  #play-btn::before    { font-size: 1rem; }
  #settings-btn::before { font-size: 1.7rem; }
  #staff-output { min-height: 240px; }
  #game-area { padding: 0.1rem; }
}