:root {
  color-scheme: only light;
  --bg1: #2b2d6e; --bg2: #4a3a9c;
  --ink: #1b1b3a; --paper: #fffdf6;
  --good: #2fb344; --kid: #7b4dff;
  --radius: clamp(14px, 2.2vmin, 26px);
  font-family: "Nunito", "Baloo 2", "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background-color: #2b2d6e; color: #fff; }
body {
  background: radial-gradient(circle at 20% 10%, #5a4bd1 0, transparent 45%),
              radial-gradient(circle at 90% 90%, #c2477f 0, transparent 40%),
              linear-gradient(160deg, var(--bg1), var(--bg2));
  color: #fff; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
#app { height: 100dvh; width: 100vw; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* ---------------- profile picker */
#screen-profiles { align-items: center; justify-content: center; gap: 4vmin; position: relative; padding: 3vmin; }
.title { margin: 0; font-size: clamp(34px, 6.5vmin, 72px); font-weight: 900; letter-spacing: .5px; text-align: center;
  text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.title-note { display: inline-block; animation: bob 2.4s ease-in-out infinite; color: #ffe066; }
.title-note:last-child { animation-delay: -1.2s; color: #8ce99a; }
.profile-cards { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; width: 100%; }
.profile-card {
  --c: #7b4dff;
  width: clamp(240px, 38vmin, 400px); aspect-ratio: 4 / 5; border-radius: calc(var(--radius) * 1.6);
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c));
  box-shadow: 0 1.2vmin 0 color-mix(in srgb, var(--c) 55%, #000), 0 2vmin 5vmin rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vmin;
  transition: transform .12s; color: #fff;
}
.profile-card:active { transform: translateY(1vmin) scale(.98); box-shadow: 0 .3vmin 0 color-mix(in srgb, var(--c) 55%, #000); }
.avatar { font-size: clamp(90px, 16vmin, 180px); line-height: 1; filter: drop-shadow(0 6px 0 rgba(0,0,0,.2)); animation: bob 3s ease-in-out infinite; }
.pname { font-size: clamp(40px, 7vmin, 80px); font-weight: 900; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.psample { font-size: clamp(20px, 3.2vmin, 34px); font-weight: 800; background: rgba(255,255,255,.25); padding: .2em .8em; border-radius: 999px; }
.pstars { font-size: clamp(20px, 3vmin, 30px); font-weight: 800; }
.gear { position: absolute; right: 2.5vmin; bottom: 2.5vmin; font-size: 30px; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.12); display: grid; place-items: center; opacity: .8; }
.gear-hint { position: absolute; bottom: -4px; font-size: 11px; font-weight: 800; opacity: .8; }
.gear.holding { animation: spin 1s linear; background: rgba(255,255,255,.35); }

/* ---------------- game */
#screen-game { padding: clamp(8px, 1.6vmin, 20px); gap: clamp(8px, 1.6vmin, 18px); }
.topbar { display: flex; align-items: center; gap: clamp(8px, 1.5vmin, 18px); flex-wrap: wrap; }
.icon-btn { font-size: clamp(28px, 4.2vmin, 40px); width: clamp(56px, 8vmin, 76px); height: clamp(56px, 8vmin, 76px);
  border-radius: var(--radius); background: rgba(255,255,255,.16); }
.who { display: flex; align-items: center; gap: .3em; font-size: clamp(24px, 3.8vmin, 38px); font-weight: 900; }
.dots { display: flex; gap: clamp(4px, .8vmin, 10px); flex: 1; justify-content: center; min-width: 0; }
.dot { width: clamp(22px, 3.3vmin, 36px); height: clamp(22px, 3.3vmin, 36px); border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: clamp(16px, 2.6vmin, 28px); transition: transform .2s; }
.dot.now { background: #ffffff; transform: scale(1.2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kid) 70%, #fff); }
.dot.star { background: transparent; animation: pop .4s; }
.dot.miss { background: transparent; box-shadow: inset 0 0 0 4px #a5b4fc; }
.streak { font-size: clamp(24px, 3.6vmin, 36px); font-weight: 900; min-width: 2.6em; text-align: center; opacity: .55; transition: .2s; }
.streak.hot { opacity: 1; transform: scale(1.15); }
.mode-toggle { display: flex; background: rgba(0,0,0,.25); border-radius: var(--radius); padding: 4px; }
.mode-toggle button { min-width: clamp(64px, 9vmin, 92px); height: clamp(52px, 7vmin, 68px); border-radius: calc(var(--radius) - 4px);
  font-size: clamp(20px, 3vmin, 30px); font-weight: 900; background: transparent; color: #fff; opacity: .8; }
.mode-toggle button[aria-pressed="true"] { background: #ffffff; color: #1b1b3a; opacity: 1; }
/* note-name toggle: a bright pill so it's easy to find */
.naming-toggle { background: #ffd43b; }
.naming-toggle button { color: #1b1b3a; opacity: .75; }
.naming-toggle button[aria-pressed="true"] { background: #ffffff; box-shadow: 0 3px 0 #e8a800; }
.tiles-icon { display: inline-flex; gap: 3px; vertical-align: middle; }
.tiles-icon i { width: .55em; height: .9em; border-radius: 4px; background: #ff6b6b; box-shadow: inset 0 0 0 2px #1b1b3a33; }
.tiles-icon i:nth-child(2) { background: #ffe066; }
.tiles-icon i:nth-child(3) { background: #66d9e8; }

.staff-wrap { flex: 1; min-height: 0; position: relative; background-color: #fffdf6; color: #1b1b3a; border-radius: calc(var(--radius) * 1.4);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.08), 0 1.5vmin 4vmin rgba(0,0,0,.3); overflow: hidden; }
#staff { width: 100%; height: 100%; display: block; }
.staff-lines line { stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.staff-lines .barline { stroke-width: 1.3; }
.glyph { fill: var(--ink); }
.ledger { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.notehead { fill: var(--ink); transition: fill .2s; }
.note { transform-box: view-box; }
.note.enter { animation: slideIn .45s cubic-bezier(.2,1.4,.4,1); }
.note.correct .notehead { fill: var(--good); }
.note.correct { animation: bounce .5s; }
.note.hint .notehead, .note.fixed .notehead { fill: #4c6ef5; }
.label-bubble rect { stroke: var(--ink); stroke-width: 1; }
.label-bubble text { font-size: 14px; font-weight: 900; fill: var(--ink); font-family: inherit; }
.label-bubble { animation: pop .35s; transform-box: fill-box; transform-origin: left center; }

.fx { position: absolute; inset: 0; pointer-events: none; }
.cheer { position: absolute; font-size: clamp(70px, 14vmin, 160px); animation: cheer 1.1s ease-out forwards; }
.confetti { position: absolute; margin: -10px 0 0 -7px; width: 14px; height: 20px; border-radius: 4px; animation: burst 1.1s ease-out forwards; }

/* answers: buttons */
.answers { flex: 0 0 auto; display: flex; gap: clamp(8px, 1.6vmin, 18px); justify-content: center; }
.answers.buttons { height: clamp(96px, 17vmin, 170px); }
.answer { --nc: #fff; flex: 1 1 0; max-width: 220px; border-radius: calc(var(--radius) * 1.2); background-color: var(--nc); color: #1b1b3a;
  font-size: clamp(34px, 7vmin, 72px); font-weight: 900;
  box-shadow: 0 .9vmin 0 color-mix(in srgb, var(--nc) 60%, #000); transition: transform .08s, opacity .2s, filter .2s; }
.answer:active { transform: translateY(.7vmin); box-shadow: 0 .2vmin 0 color-mix(in srgb, var(--nc) 60%, #000); }
.answer.nope, .key.nope { opacity: .35; filter: grayscale(.8); animation: wiggle .4s; }
.answer.glow, .key.glow { animation: glow 1s ease-in-out infinite; position: relative; z-index: 2; }
.answer.right { outline: 6px solid #fff; transform: scale(1.06); }
.wiggle { animation: wiggle .4s !important; }

/* answers: piano */
.answers.piano { height: clamp(150px, 30vmin, 300px); }
.piano { position: relative; width: 100%; max-width: 1400px; height: 100%; margin: 0 auto; }
.key { position: absolute; top: 0; padding: 0; }
.key.white { height: 100%; background: linear-gradient(#fff, #f1f1f6); border: 2px solid #23234a; border-radius: 0 0 14px 14px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 10px; color: var(--ink); z-index: 1; }
.key.black { height: 60%; background: linear-gradient(#3a3a55, #111122); border-radius: 0 0 10px 10px; z-index: 3; box-shadow: 0 4px 0 #000a; }
.key.white.down, .key.white:active { background: linear-gradient(#e8ecff, #cfd8ff); }
.key.black.down { background: #444466; }
.key.white.right { background: linear-gradient(#d3f9d8, #8ce99a); }
.key.white.glow { background: linear-gradient(#fff, var(--nc)); }
.klabel { font-size: clamp(16px, 3vmin, 30px); font-weight: 900; visibility: hidden; background: var(--nc); border-radius: 10px; padding: 0 .25em; }
.klabel.show { visibility: visible; }
.middle-c { position: absolute; bottom: 26%; font-size: clamp(16px, 2.8vmin, 28px); color: #f59f00; }

/* round end */
.overlay { position: fixed; inset: 0; background: rgba(20,16,60,.7); display: grid; place-items: center; z-index: 10; animation: fade .3s; }
.overlay[hidden] { display: none; }
.end-card { background: var(--paper); color: var(--ink); border-radius: calc(var(--radius) * 2); padding: 4vmin 5vmin; text-align: center;
  width: min(92vw, 760px); box-shadow: 0 2vmin 6vmin rgba(0,0,0,.4); animation: pop .5s; }
.end-emoji { font-size: clamp(80px, 15vmin, 160px); animation: bob 2s ease-in-out infinite; }
.end-stars { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; gap: .4vmin 1.2vmin; font-size: clamp(34px, 6vmin, 60px); margin: 2vmin 0; }
.end-star { animation: pop .4s both; }
.end-star.miss { color: #b8b8d0; }
.end-score { font-size: clamp(40px, 8vmin, 84px); font-weight: 900; }
.end-buttons { display: flex; gap: 3vmin; justify-content: center; margin-top: 2vmin; }
.big-btn { font-size: clamp(40px, 7vmin, 70px); width: clamp(110px, 18vmin, 180px); height: clamp(90px, 14vmin, 140px); border-radius: var(--radius);
  background: #e7e5ff; color: var(--ink); box-shadow: 0 .8vmin 0 #b5b0e8; }
.big-btn.go { background: var(--good); color: #fff; box-shadow: 0 .8vmin 0 #1c7a2c; }

/* grown-ups dialog */
dialog#settings { width: min(94vw, 900px); max-height: 90dvh; border: 0; border-radius: 22px; padding: 20px 24px; color: var(--ink); background: #fff;
  user-select: text; }
dialog::backdrop { background: rgba(10,10,40,.6); }
.settings-head { display: flex; justify-content: space-between; align-items: center; }
.settings-head h2 { margin: 0; }
.kid-settings { border-top: 4px solid var(--c); margin-top: 16px; padding-top: 6px; }
.kid-settings h3 { font-size: 26px; margin: 6px 0; }
.kid-settings h4 { margin: 10px 0 6px; }
.note-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #f1f0ff; font-weight: 800; font-size: 18px; }
.chip input, .opt input { width: 24px; height: 24px; }
.chip small { color: #666; font-weight: 600; }
.opt { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 18px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.small-btn { padding: 10px 18px; border-radius: 12px; background: #e7e5ff; font-weight: 800; font-size: 17px; color: var(--ink); }
.small-btn.danger { background: #ffe3e3; color: #a51111; }
.meta { color: #555; font-size: 16px; }

/* landscape with limited height: tighten the top bar */
@media (orientation: landscape) and (max-height: 700px) {
  .answers.buttons { height: clamp(84px, 18vh, 140px); }
}

@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bounce { 30% { transform: translateY(-6px); } 60% { transform: translateY(2px); } }
@keyframes wiggle { 20%, 60% { transform: translateX(-8px) rotate(-2deg); } 40%, 80% { transform: translateX(8px) rotate(2deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 #fff, 0 0 0 0 var(--nc); transform: scale(1); } 50% { box-shadow: 0 0 0 6px #fff, 0 0 30px 12px var(--nc); transform: scale(1.05); } }
@keyframes cheer { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
@keyframes burst { from { transform: translate(0,0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; } }

/* portrait / near-square (tablet portrait, Fold inner): dots get their own row,
   and the bottom controls get a bit more room */
@media (max-aspect-ratio: 1/1) {
  .who { margin-right: auto; }
  .dots { order: 10; flex: 1 0 100%; }
  .answers.buttons { height: clamp(110px, 14vh, 180px); }
  .answers.piano { height: clamp(170px, 26vh, 340px); }
}

/* Belt and braces: if a device reports dark mode, keep exactly the same light
   "paper and ink" look (the app is designed to be bright in any mode). */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  .staff-wrap, .end-card { background-color: #fffdf6; color: #1b1b3a; }
  .key.white { background: linear-gradient(#ffffff, #f1f1f6); color: #1b1b3a; }
  .answer { color: #1b1b3a; }
  dialog#settings { background: #ffffff; color: #1b1b3a; }
}
.staff-wrap, .end-card, .key, .answer, dialog#settings, .naming-toggle { color-scheme: only light; }