/* Theme: Amadeus music studio — deep blue-black board (palette 4), chalk text, amber for what the lesson points at, sky blue for the interface.
   Everything a chapter draws takes its colours from COL (set in music.js to match); this file recolours the player. */
:root {
  --page: #0b1018; --board: #121a2b; --panel: #1a2439; --edge: #2b3852;
  --chalk: #ece8dc; --dim: #a7b2c7; --faint: #66718a;
  --task: #f0b45a; --quiz: #86c9e8; --good: #8fd6b0; --bad: #f08c7a;
}
#stage > rect:first-of-type { fill: var(--board); }
#bar { background: #0d1320; border-top-color: #2b3852; }
.seg { background: #2a3650; }
.seg.ask { background: #2d4a57; }
.card { background: rgba(26, 36, 57, .97); }
.paused-mark div, .sound-note { background: rgba(11, 16, 24, .88); }
.caption { background: rgba(8, 12, 19, .84); }
.cover { background: rgba(11, 16, 24, .5); }
.help { background: rgba(8, 12, 19, .74); }
.icon { background: var(--panel); border-color: var(--edge); }
.icon:hover { background: #243150; }
.volume:hover { background: #243150; border-color: var(--faint); }
.btn.go { background: var(--quiz); color: #10242e; }
.opt.good { box-shadow: 0 0 0 3px rgba(143, 214, 176, .35); }
.pkey:hover .ring, .pkey:focus .ring { stroke: var(--quiz); fill: rgba(134, 201, 232, .25); }

/* The studio's mark stands in for the engine's guide character. Idle: a slow bob. Right answer: the notehead slides up
   the stem (a higher note) and drops back, the mark gives a little nod. Wrong answer: the mark droops and the head
   sags on its stem. The head pivots where it meets the stem, so it never comes loose. */
.mascot.brand .mbody { transform-box: view-box; transform-origin: 60px 42px; animation: bob 3.4s ease-in-out infinite; }
.mascot.brand .m-head { transform-box: fill-box; transform-origin: right center; }
.mascot.brand.happy .mbody { animation: nod .6s ease-in-out 1, bob 3.4s ease-in-out .6s infinite; }
.mascot.brand.happy .m-head { animation: head-hop .9s cubic-bezier(.3, 1.4, .5, 1) 1; }
.mascot.brand.oops .mbody { animation: droop .7s ease-in-out 1, bob 3.4s ease-in-out .7s infinite; }
.mascot.brand.oops .m-head { animation: head-swing .7s ease-in-out 1; }
@keyframes head-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-70px) scale(1.15, 1); } 65% { transform: translateY(-70px) scale(1.15, 1); } 100% { transform: translateY(0); } }
@keyframes nod { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-5deg) translateY(2px); } 70% { transform: rotate(3deg); } }
@keyframes droop { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg) translateY(3px); } 65% { transform: rotate(-6deg) translateY(2px); } }
@keyframes head-swing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(22deg); } 60% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .mascot.brand .mbody, .mascot.brand .m-head { animation: none !important; } }