:root {
  --bg1: #eef1f5;
  --bg2: #eef1f5;
  --ink: #1f2b46;
  --soft-ink: #5f6b89;
  --panel: #ffffff;
  --panel-border: #e4edff;
  --teal: #099695;
  --teal-dark: #007777;
  --red: #e72829;
  --orange: #f39422;
  --gold: #ffd25b;
  --yellow: #f1e606;
  --green: #6abb4a;
  --mint: #65c081;
  --blue: #1e7fc3;
  --purple: #7b569e;
  --plum: #9f5b90;
  --pink: #ea6ba3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-height: 100%;
  background: #eef1f5;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: "Nunito", "Avenir Next Rounded", "Trebuchet MS", "Verdana", sans-serif;
  color: var(--ink);
  background: #eef1f5;
}

button {
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active {
  transform: translateY(2px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.app-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.game-screen {
  width: min(100%, 430px);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  background: #eef1f5;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}

.boot-loader {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background: rgba(249, 252, 255, 0.94);
  transition: opacity 0.18s ease;
}

.boot-loader.done {
  opacity: 0;
}

.boot-loader-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #c8d7f6;
  border-top-color: var(--teal);
  animation: bootSpin 0.82s linear infinite;
}

.boot-loader-text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 900;
  color: #446196;
}

.game-header {
  text-align: center;
  padding: 10px 0 8px;
}

.game-header h1 {
  margin: 0;
  font-size: clamp(1.46rem, 7vw, 1.94rem);
  line-height: 1.08;
  font-weight: 900;
  color: #15366d;
}

.level-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.level-select,
.progress-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 900;
}

.level-select-wrap {
  position: relative;
  display: inline-flex;
}

.level-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  min-width: 108px;
  padding: 4px 30px 4px 12px;
  color: #fff;
  background: var(--teal);
  box-shadow: none;
  cursor: pointer;
}

.level-select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transform: translateY(-30%);
  pointer-events: none;
}

.noise-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 86px;
  padding: 4px 12px;
  color: #fff;
  background: var(--teal);
  border: 0;
  font-size: 0.88rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.noise-toggle.is-off {
  color: #2a4478;
  background: #f2f6ff;
  border: 2px solid #d8e6ff;
  padding: 2px 10px;
}

.noise-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.progress-text {
  padding: 4px 10px;
  color: #2a4478;
  background: #f2f6ff;
  border: 2px solid #d8e6ff;
}

.level-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.level-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c8d7f7;
  background: #f5f8ff;
}

.level-dot.is-filled {
  background: var(--green);
  border-color: #2ea448;
}

.level-dot.is-half {
  background: linear-gradient(90deg, var(--green) 0 50%, #f5f8ff 50% 100%);
  border-color: #2ea448;
}

.level-dot.is-missed {
  background: #fff0f0;
  border-color: #dc5858;
}

.listen-card {
  margin: 8px 0 10px;
  padding: 4px 0;
  display: grid;
  align-items: center;
  justify-items: center;
}

.sound-wave {
  position: absolute;
  right: 15px;
  top: 50%;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: translateY(-50%);
}

.sound-wave span {
  display: block;
  width: 5px;
  height: 16px;
  border-radius: 999px;
  background: var(--green);
  opacity: 0.72;
  transform-origin: center;
}

.is-playing .sound-wave span {
  animation: wavePulse 520ms ease-in-out infinite;
}

.is-playing .sound-wave span:nth-child(2) { animation-delay: 0.08s; }
.is-playing .sound-wave span:nth-child(3) { animation-delay: 0.16s; }
.is-playing .sound-wave span:nth-child(4) { animation-delay: 0.24s; }

.listen-btn {
  min-height: 64px;
  width: min(250px, 100%);
  border-radius: 18px;
  padding: 10px 60px 10px 18px;
  border: 3px solid var(--green);
  color: #17366a;
  background: #ffffff;
  box-shadow: none;
  font-size: 1.24rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.play-mark {
  width: 0;
  height: 0;
  border-left: 16px solid var(--green);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.answers-section {
  margin-top: 8px;
}

.choices-list {
  display: grid;
  gap: 12px;
}

.choices-list.is-four-choice {
  gap: 8px;
}

.choices-list.is-grid-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice-card {
  width: 100%;
  min-height: 88px;
  border-radius: 20px;
  padding: 10px 12px;
  border: 3px solid var(--choice-color, #d8e3f8);
  background: var(--choice-bg, #ffffff);
  color: #173065;
  box-shadow: none;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform 0.14s ease, filter 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  position: relative;
  overflow: hidden;
}

.choice-card.is-chord-card {
  color: #ffffff;
}

.choice-card.is-light-card {
  color: #3b2c18;
}

.choice-card.is-noise-card {
  color: #263044;
}

.choices-list.is-four-choice .choice-card {
  min-height: 84px;
  padding-block: 8px;
}

.choices-list.is-four-choice .choice-visual {
  width: 76px;
  height: 62px;
}

.choices-list.is-four-choice .chord-triangle {
  width: 70px;
  height: 60px;
}

.choices-list.is-four-choice .noise-visual {
  width: 74px;
  height: 60px;
}

.choices-list.is-grid-choice .choice-card {
  min-height: 116px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 9px 6px;
  text-align: center;
}

.choices-list.is-grid-choice .choice-visual {
  width: 82px;
  height: 70px;
}

.choices-list.is-grid-choice .chord-triangle {
  width: 76px;
  height: 66px;
}

.choices-list.is-grid-choice .noise-visual {
  width: 82px;
  height: 66px;
}

.choices-list.is-grid-choice .choice-title {
  font-size: 1.24rem;
}

.choice-card:not(:disabled):hover {
  filter: brightness(1.01);
}

.choice-card.is-correct {
  border-color: #2ea448;
  background: #65c081;
}

.choice-card.is-wrong {
  border-color: #dc5858;
  background: #fff0f0;
}

.choice-card:disabled:not(.is-correct):not(.is-wrong) {
  opacity: 0.72;
}

.choice-visual {
  width: 82px;
  height: 70px;
  display: grid;
  place-items: center;
  position: relative;
}

.chord-triangle {
  width: 76px;
  height: 66px;
  position: relative;
}

.triangle-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}

.triangle-lines line {
  stroke: #c8d2e5;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.92;
}

.note-bubble {
  position: absolute;
  z-index: 1;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.02rem;
  line-height: 1;
  font-weight: 900;
  text-shadow: none;
  box-shadow: none;
}

.note-bubble:nth-child(2) {
  left: 0;
  top: 0;
}

.note-bubble:nth-child(3) {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.note-bubble:nth-child(4) {
  right: 0;
  top: 0;
}

.noise-visual {
  width: 82px;
  height: 66px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 7px, rgba(255, 255, 255, 0) 7px 14px),
    linear-gradient(135deg, #333842, #747c88 54%, #d9dde4);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.93rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: none;
}

.choice-copy {
  min-width: 0;
}

.choice-title {
  display: block;
  font-size: 1.48rem;
  line-height: 1.05;
  font-weight: 900;
  color: currentColor;
}

.bottom-bar {
  min-height: 64px;
  padding-top: 10px;
  display: grid;
  align-items: center;
}

.feedback {
  min-height: 42px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.15;
  font-weight: 900;
  color: #25477e;
  background: transparent;
  border: 0;
}

.feedback.is-correct {
  color: #1d7b45;
}

.feedback.is-wrong {
  color: #af3535;
}

.level-complete-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 30px 18px 22px;
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 215, 90, 0.22), transparent 22%),
    rgba(248, 251, 255, 0.9);
  backdrop-filter: blur(5px);
}

.celebration-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.celebration-confetti span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: var(--c);
  transform: rotate(var(--r));
  box-shadow: 0 1px 2px rgba(20, 45, 80, 0.08);
}

.level-complete-card {
  width: min(354px, 100%);
  position: relative;
  border: 1px solid rgba(225, 232, 246, 0.7);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  padding: 68px 18px 24px;
  text-align: center;
  box-shadow: 0 16px 34px rgba(42, 75, 123, 0.12);
}

.level-complete-logo-wrap {
  position: absolute;
  left: 50%;
  top: -48px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 9px 22px rgba(42, 75, 123, 0.16);
  transform: translateX(-50%);
}

.level-complete-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.level-complete-card h2 {
  margin: 0 0 12px;
  color: #15366d;
  font-size: clamp(1.88rem, 8vw, 2.35rem);
  line-height: 1;
  font-weight: 900;
}

.level-complete-label {
  margin: 0;
  color: #5f6b89;
  font-size: 1.12rem;
  line-height: 1.1;
  font-weight: 900;
}

.level-complete-score {
  margin: 6px 0 12px;
  color: var(--teal);
  font-size: clamp(3.2rem, 16vw, 4.2rem);
  line-height: 0.95;
  font-weight: 900;
}

.level-complete-stars {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 14px;
}

.level-star {
  width: 64px;
  height: 62px;
  display: block;
  background: #e9eef8;
  clip-path: polygon(50% 2%, 62% 34%, 96% 35%, 69% 56%, 79% 90%, 50% 70%, 21% 90%, 31% 56%, 4% 35%, 38% 34%);
  filter: drop-shadow(0 5px 5px rgba(42, 75, 123, 0.08));
}

.level-star.is-earned {
  background: #ffc43d;
  filter: drop-shadow(0 5px 5px rgba(238, 150, 25, 0.18));
}

.level-complete-message {
  width: min(260px, 100%);
  margin: 0 auto 22px;
  color: #5f6b89;
  font-size: 1.04rem;
  line-height: 1.2;
  font-weight: 900;
}

.level-complete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.replay-level-btn,
.next-level-btn {
  min-height: 52px;
  width: 100%;
  border-radius: 16px;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: clamp(0.86rem, 3.5vw, 1.02rem);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.replay-level-btn {
  color: var(--teal);
  background: #ffffff;
  border: 2px solid rgba(0, 153, 153, 0.62);
}

.next-level-btn {
  color: #fff;
  background: linear-gradient(180deg, #0fb0b0, var(--teal));
  box-shadow: 0 8px 18px rgba(0, 153, 153, 0.22);
}

.replay-level-btn svg,
.next-level-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 55;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiDrop 900ms ease forwards;
}

@keyframes bootSpin {
  to { transform: rotate(360deg); }
}

@keyframes wavePulse {
  0%, 100% { transform: scaleY(0.62); opacity: 0.44; }
  45% { transform: scaleY(1.38); opacity: 0.95; }
}

@keyframes confettiDrop {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 0px), var(--dy, 120px), 0) rotate(var(--rot, 240deg));
  }
}

@media (min-width: 640px) {
  body {
    padding: 18px;
  }

  .game-screen {
    min-height: min(844px, calc(100vh - 36px));
    border: 2px solid var(--panel-border);
    border-radius: 30px;
    box-shadow: 0 6px 18px rgba(26, 49, 99, 0.08);
  }
}

@media (max-width: 374px) {
  .game-screen {
    padding-inline: 12px;
  }

  .listen-card {
    padding: 4px 0;
  }

  .choice-card {
    min-height: 86px;
    grid-template-columns: 82px 1fr;
    gap: 9px;
  }

  .choice-visual {
    width: 74px;
  }

  .chord-triangle {
    width: 70px;
  }

  .noise-visual {
    width: 74px;
  }

  .choice-title {
    font-size: 1.34rem;
  }
}