/* Kiko's Sound Garden: everything is absolutely positioned inside the 960×540 stage. */
.music { position: absolute; inset: 0; isolation: isolate; overflow: hidden; background: var(--sky); }

/* Backdrop: flat sky, stepped hills, drifting clouds and pixel flowers. */
.music-sky, .music-sky i { position: absolute; display: block; }
.music-sky { inset: 0; pointer-events: none; }
.music-cloud { width: 96px; height: 24px; animation: music-drift 60s steps(50) infinite; }
.music-cloud::before, .music-cloud::after { content: ''; position: absolute; left: 0; top: -8px; width: 144px; height: 32px; }
.music-cloud::before { background: var(--ink);
  clip-path: polygon(0 12px, 12px 12px, 12px 8px, 24px 8px, 24px 0, 56px 0, 56px 4px, 68px 4px, 68px 8px, 88px 8px, 88px 4px, 120px 4px, 120px 12px, 136px 12px, 136px 16px, 144px 16px, 144px 28px, 136px 28px, 136px 32px, 8px 32px, 8px 28px, 0 28px); }
.music-cloud::after { background: var(--paper); box-shadow: inset 2px 4px var(--white), inset -2px -5px var(--paper-shade);
  clip-path: polygon(1px 13px, 13px 13px, 13px 9px, 25px 9px, 25px 1px, 55px 1px, 55px 5px, 67px 5px, 67px 9px, 89px 9px, 89px 5px, 119px 5px, 119px 13px, 135px 13px, 135px 17px, 143px 17px, 143px 27px, 135px 27px, 135px 31px, 9px 31px, 9px 27px, 1px 27px); }
.music-cloud--a { left: 120px; top: 84px; }
.music-cloud--b { left: 640px; top: 110px; animation-duration: 80s; animation-delay: -30s; }
@keyframes music-drift { from { transform: translateX(-40px); } 50% { transform: translateX(60px); } to { transform: translateX(-40px); } }
.music-hill--back { left: -20px; right: -20px; top: 230px; bottom: 0; background: var(--ink);
  clip-path: polygon(0 40px, 80px 40px, 80px 24px, 220px 24px, 220px 8px, 380px 8px, 380px 28px, 560px 28px, 560px 0, 740px 0, 740px 20px, 900px 20px, 900px 36px, 100% 36px, 100% 100%, 0 100%); }
.music-hill--back::before, .music-hill--back::after { content: ''; position: absolute; inset: 0; }
.music-hill--back::before { background: var(--grass);
  clip-path: polygon(1px 41px, 81px 41px, 81px 25px, 221px 25px, 221px 9px, 379px 9px, 379px 29px, 561px 29px, 561px 1px, 739px 1px, 739px 21px, 899px 21px, 899px 37px, 999px 37px, 999px calc(100% - 1px), 1px calc(100% - 1px)); }
.music-hill--back::after { background: var(--grass-dark); box-shadow: inset -12px -32px var(--finish);
  clip-path: polygon(4px 44px, 84px 44px, 84px 28px, 224px 28px, 224px 12px, 379px 12px, 379px 32px, 564px 32px, 564px 4px, 739px 4px, 739px 24px, 899px 24px, 899px 40px, 999px 40px, 999px calc(100% - 1px), 4px calc(100% - 1px)); }
.music-hill--front { left: 0; right: 0; top: 320px; bottom: 0; background: var(--grass); border-top: 1px solid var(--ink);
  box-shadow: inset 0 3px #b4e397, inset 0 -1px var(--ink), inset 0 -12px var(--grass-dark); }
.music-hill--front::after { content: ''; position: absolute; left: 24px; top: 12px; width: 8px; height: 2px; background: var(--grass-dark);
  box-shadow: 2px -2px #b4e397, 136px 12px var(--grass-dark), 138px 10px #b4e397, 280px 0 var(--grass-dark), 282px -2px #b4e397,
    432px 16px var(--grass-dark), 434px 14px #b4e397, 576px 0 var(--grass-dark), 578px -2px #b4e397, 728px 12px var(--grass-dark), 730px 10px #b4e397, 872px 0 var(--grass-dark); }
.music-flower { left: var(--x); top: var(--y); width: 20px; height: 20px; background: var(--ink); --petal-light: #ffc2dd; --petal-shade: #c75c90;
  clip-path: polygon(6px 0, 14px 0, 14px 6px, 20px 6px, 20px 14px, 14px 14px, 14px 20px, 6px 20px, 6px 14px, 0 14px, 0 6px, 6px 6px); }
.music-flower:nth-of-type(3n) { --petal-light: #ffe8a3; --petal-shade: #ca9231; }
.music-flower:nth-of-type(3n + 1) { --petal-light: #d9caff; --petal-shade: #8166bc; }
.music-flower::before { content: ''; position: absolute; inset: 0; background: var(--petal); box-shadow: inset 2px 2px var(--petal-light), inset -2px -2px var(--petal-shade);
  clip-path: polygon(7px 1px, 13px 1px, 13px 7px, 19px 7px, 19px 13px, 13px 13px, 13px 19px, 7px 19px, 7px 13px, 1px 13px, 1px 7px, 7px 7px); }
.music-flower::after { content: ''; position: absolute; inset: 7px; background: var(--lantern); border: 1px solid var(--ink);
  box-shadow: inset 1px 1px var(--paper), inset -1px -1px #ca9231; }

/* Top row: the way back and its lesson chip (left), the eight lanterns (middle), the music and signs (right).
   Left column x 16–288, rail x 300–684, right column from about x 708 at Bigger words, so nothing meets. */
.music-back { position: absolute; left: 16px; top: 16px; z-index: 2; }
.music-back .icon { width: 22px; height: 22px; }
.music-lesson { position: absolute; left: 16px; top: 72px; z-index: 2; max-width: 272px; --chip: var(--white); white-space: normal; text-align: left; line-height: 1.25; }
.music-example { position: absolute; right: 16px; top: 8px; z-index: 2; width: 240px; display: grid; justify-items: stretch; gap: 2px; }
.music-preset { min-height: 40px; padding: 2px 8px; gap: 8px; font-size: var(--text-small); white-space: nowrap;
  --fill: var(--music); --light: #ffe8a3; --shade: #ca9231; }
.music-preset .icon { width: 20px; height: 20px; }
.music-example__credit { text-align: center; font-size: var(--text-small); line-height: 1; color: var(--ink); white-space: nowrap; }
.music-presets { display: grid; gap: 12px; }
.music-presets__intro, .music-presets__note { margin: 0; font-size: var(--text-field); line-height: 1.3; }
.music-presets__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.music-presets__choice { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 16px; text-align: left; justify-items: start; font-size: var(--text-body); }
.music-presets__choice .icon { width: 24px; height: 24px; }
.music-presets__choice small { grid-column: 1 / -1; font-size: var(--text-small); line-height: 1.3; }
.music-presets__choice[aria-pressed="true"] { --fill: var(--music); --light: #ffe8a3; --shade: #ca9231; }
.music-presets__undo { justify-self: start; font-size: var(--text-field); }
.music-signs { position: absolute; right: 16px; top: 80px; z-index: 2; display: flex; gap: 8px; }
.music-sign { min-height: 40px; min-width: 0; padding: 2px 10px; gap: 6px; font-size: var(--text-small); white-space: nowrap;
  --fill: var(--paper-shade); --light: var(--paper); --shade: #d5bc89; }
.music-sign::before { border: 1px solid var(--ink); clip-path: none; background: var(--fill);
  box-shadow: inset 2px 2px var(--light), inset -2px -3px var(--shade); }
.music-sign::after { content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: 2px; background: var(--ink); box-shadow: 0 28px #855034; pointer-events: none; }
.music-sign .icon { flex: none; width: 18px; height: 18px; }
.music-sign.is-busy { --fill: var(--lantern); --light: #ffe8a3; --shade: #ca9231; }
.music-form__letters { display: inline-flex; gap: 4px; font-family: var(--font-pixel); }
.music-form__letters b { padding: 0 4px; line-height: 1.2; box-shadow: inset 1px 1px var(--paper), inset -1px -1px #d5bc89; }
.music-form__letters b.is-now { background: var(--lantern); box-shadow: inset 1px 1px #ffe8a3, inset -1px -1px #ca9231, 0 0 0 1px var(--ink); }

/* The lantern rail: eight 44×44 lanterns on a string. At K they are pictures; from grade 1 they are buttons that
   edit the lead musician. --step hangs a lantern lower (the grade 3–5 staircase: La at the string, rests lowest). */
.music-lanterns { position: absolute; left: 300px; top: 8px; width: 384px; height: 160px; z-index: 1; --lead: var(--lantern); --lantern-light: #ffe8a3; --lantern-shade: #ca9231; }
.music[data-lead="percussion"] .music-lanterns { --lantern-light: #a0efe2; --lantern-shade: #26998d; }
.music-string { position: absolute; left: -12px; right: -12px; top: 0; height: 2px; background: var(--ink); box-shadow: 0 -1px #dda475; }
.music-lantern { position: absolute; top: 8px; width: 44px; height: 44px; margin: 0; display: grid; place-items: center;
  background: var(--paper-shade); color: var(--ink); border: 1px solid var(--ink); padding: 5px 3px;
  box-shadow: inset 3px 3px var(--lantern-light), inset -3px -4px var(--lantern-shade);
  font: inherit; transform: translateY(var(--step, 0px)); transition: transform 180ms steps(3); }
.music-lantern::before { content: ''; position: absolute; left: 50%; top: calc(-8px - var(--step, 0px)); width: 2px; height: calc(8px + var(--step, 0px)); margin-left: -1px; background: var(--ink); }
.music-lantern::after { content: ''; position: absolute; inset: 1px;
  box-shadow: inset 0 1px #f77752, inset 0 -1px #9f382f, inset 0 4px var(--vermilion), inset 0 -4px var(--vermilion), inset 0 5px var(--ink), inset 0 -5px var(--ink); pointer-events: none; }
.music-lantern b { position: relative; z-index: 1; font-family: var(--font-pixel); font-size: var(--text-small); line-height: 1; color: var(--ink); }
button.music-lantern { cursor: pointer; }
/* Hover never recolors the body: the sound/rest color carries the meaning (and :hover sticks after a touch). */
button.music-lantern:hover { outline: 1px solid var(--ink); outline-offset: 1px; }
.music-lantern.is-sound { background: var(--lead); }
.music-lantern.is-rest { background: var(--letterbox); --lantern-light: var(--ink-soft); --lantern-shade: var(--ink); }
.music-lantern.is-rest b { color: var(--paper); }
.music-lantern.is-lit { box-shadow: inset 3px 3px var(--lantern-light), inset -3px -4px var(--lantern-shade), 0 0 0 1px var(--ink), 0 0 0 6px var(--lantern), 0 0 0 10px var(--paper); }
.music-lantern.is-lit:not(.is-rest) { background: var(--lantern); --lantern-light: #ffe8a3; --lantern-shade: #ca9231; }
.music-lantern:focus-visible { z-index: 2; }

/* The band: one button per musician, floating on a pedestal ringed in its own color. */
.music-band { position: absolute; inset: 0; pointer-events: none; }
.music-musician { position: absolute; width: 160px; height: 212px; padding: 0; border: 0; background: none; pointer-events: auto; color: var(--ink);
  --musician-light: #ffe8a3; --musician-shade: #ca9231; }
.music-musician[data-id="bass"] { --musician-light: var(--sky); --musician-shade: #367394; }
.music-musician[data-id="voice"] { --musician-light: #b4e397; --musician-shade: var(--grass-dark); }
.music-musician[data-id="percussion"] { --musician-light: #a0efe2; --musician-shade: #26998d; }
.music-musician__float { position: absolute; inset: 0; animation: music-float 2.4s steps(4) infinite; animation-delay: var(--float-delay, 0ms); }
@keyframes music-float { 50% { transform: translateY(-6px); } }
.music-pedestal { position: absolute; left: 10px; width: 140px; height: 44px; }
.music-pedestal__top, .music-pedestal__rock { position: absolute; display: block; }
.music-pedestal__top { left: 0; right: 0; top: 0; height: 16px; z-index: 1; background: var(--ink);
  --pedestal-fill: var(--grass); --pedestal-light: #b4e397; --pedestal-shade: var(--grass-dark);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, 136px 0, 136px 4px, 140px 4px, 140px 12px, 136px 12px, 136px 16px, 4px 16px, 4px 12px, 0 12px); }
.music-pedestal__top::before { content: ''; position: absolute; inset: 0; background: var(--pedestal-fill);
  box-shadow: inset 3px 3px var(--pedestal-light), inset -3px -4px var(--pedestal-shade);
  clip-path: polygon(1px 5px, 5px 5px, 5px 1px, 135px 1px, 135px 5px, 139px 5px, 139px 11px, 135px 11px, 135px 15px, 5px 15px, 5px 11px, 1px 11px); }
.music-pedestal__top::after { content: ''; position: absolute; left: 5px; top: 1px; width: 130px; height: 2px; background: var(--musician); }
.music-pedestal__rock { left: 12px; right: 12px; top: 12px; height: 32px; background: var(--ink);
  clip-path: polygon(0 0, 116px 0, 116px 8px, 102px 8px, 102px 16px, 84px 16px, 84px 24px, 32px 24px, 32px 16px, 14px 16px, 14px 8px, 0 8px); }
.music-pedestal__rock::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24px; background: var(--wood);
  box-shadow: inset 3px 3px #dda475, inset -3px -6px #855034;
  clip-path: polygon(1px 1px, 115px 1px, 115px 7px, 101px 7px, 101px 15px, 83px 15px, 83px 23px, 33px 23px, 33px 15px, 15px 15px, 15px 7px, 1px 7px); }
.music-pedestal__rock::after { content: ''; position: absolute; left: 28px; top: 6px; width: 12px; height: 1px; background: #855034;
  box-shadow: 32px 2px #855034, 16px 10px #dda475, 4px 6px #dda475; }
.music-ring { position: absolute; left: 16px; width: 128px; height: 28px; z-index: 2; background: var(--ink); --ring-fill: var(--musician); --ring-light: var(--musician-light); --ring-shade: var(--musician-shade);
  clip-path: polygon(evenodd, 8px 0, 120px 0, 120px 4px, 124px 4px, 124px 8px, 128px 8px, 128px 20px, 124px 20px, 124px 24px, 120px 24px, 120px 28px, 8px 28px, 8px 24px, 4px 24px, 4px 20px, 0 20px, 0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, 14px 6px, 114px 6px, 114px 10px, 118px 10px, 118px 18px, 114px 18px, 114px 22px, 14px 22px, 14px 18px, 10px 18px, 10px 10px, 14px 10px, 14px 6px, 8px 0); }
.music-ring::before { content: ''; position: absolute; inset: 0; background: var(--ring-fill); box-shadow: inset 2px 2px var(--ring-light), inset -2px -2px var(--ring-shade);
  clip-path: polygon(evenodd, 9px 1px, 119px 1px, 119px 5px, 123px 5px, 123px 9px, 127px 9px, 127px 19px, 123px 19px, 123px 23px, 119px 23px, 119px 27px, 9px 27px, 9px 23px, 5px 23px, 5px 19px, 1px 19px, 1px 9px, 5px 9px, 5px 5px, 9px 5px, 9px 1px, 13px 5px, 115px 5px, 115px 9px, 119px 9px, 119px 19px, 115px 19px, 115px 23px, 13px 23px, 13px 19px, 9px 19px, 9px 9px, 13px 9px, 13px 5px, 9px 1px); }
.music-figure { position: absolute; z-index: 3; width: 96px; height: 96px; }
.music-figure > span { position: absolute; inset: 0; }
.music-figure__joy { visibility: hidden; }
.music-note, .music-zzz { position: absolute; z-index: 4; font-family: var(--font-pixel); font-weight: 700; line-height: 1; }
.music-note { left: 112px; top: 20px; font-size: 28px; color: var(--ink); visibility: hidden; }
.music-zzz { left: 108px; top: 22px; font-size: 22px; visibility: hidden; animation: music-snore 1.8s steps(3) infinite; }
.music-zzz i { font-style: normal; font-size: 16px; margin-left: 2px; vertical-align: super; }
@keyframes music-snore { 0% { transform: translate(0, 4px); } 100% { transform: translate(6px, -8px); } }
.music-name { position: absolute; left: 50%; top: 182px; transform: translateX(-50%); white-space: nowrap; }
.music-swatch { display: inline-block; flex: none; width: 12px; height: 12px; background: var(--musician); border: 1px solid var(--ink);
  box-shadow: inset 1px 1px var(--musician-light, var(--paper)), inset -1px -1px var(--musician-shade, var(--ink-soft)); }
.music-musician:hover .music-name { --chip: var(--white); }
.music-musician:active .music-musician__float { transform: translateY(2px); }

/* On a beat it plays: the joy face, a brighter ring and a note that pops up. */
.music-musician.is-performing .music-figure__idle { visibility: hidden; }
.music-musician.is-performing .music-figure__joy { visibility: visible; }
.music-musician.is-performing .music-ring { transform: scale(1.12, 1.25); --ring-fill: var(--ink-soft); --ring-light: var(--paper); --ring-shade: var(--letterbox); }
.music-musician.is-performing .music-pedestal__top { --pedestal-fill: var(--musician); --pedestal-light: var(--musician-light); --pedestal-shade: var(--musician-shade); }
.music-musician.is-performing .music-note { visibility: visible; animation: music-pop 420ms steps(3) both; }
@keyframes music-pop { from { transform: translateY(8px); } to { transform: translateY(-6px); } }

/* Resting: dim and sleepy, with a "z". */
.music-musician.is-resting .music-figure { filter: saturate(.35); opacity: .7; }
.music-musician.is-resting .music-ring { --ring-fill: var(--paper-shade); --ring-light: var(--paper); --ring-shade: #d5bc89; }
.music-musician.is-resting .music-zzz { visibility: visible; }
.music-musician.is-resting .music-name { --chip: var(--paper-shade); }

/* The lead musician (the one the lanterns edit) gets a glowing frame around the ring. */
.music-lead-glow { position: absolute; left: 10px; width: 140px; height: 36px; z-index: 1; visibility: hidden; border: 4px solid var(--musician); outline: 4px solid var(--paper); animation: music-glow 1.4s steps(2) infinite; }
.music-musician.is-lead .music-lead-glow { visibility: visible; }
@keyframes music-glow { 50% { transform: scale(1.06, 1.2); } }
/* Grades 4–5: Cricket keeps the steady part, and says so. */
.music-badge { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); display: none; --chip: var(--white); white-space: nowrap; }
.music--steady .music-musician[data-id="percussion"] .music-badge { display: inline-flex; }
/* The badge takes the top of Cricket's box (y 124–162 with Bigger words), so the beat note pops below it. */
.music--steady .music-musician[data-id="percussion"] .music-note { top: 40px; }

/* Dialogue and command menu, the same regions as every encounter. */
.music-dialogue { position: absolute; left: 16px; top: 388px; width: 472px; height: 136px; z-index: 5; }
.music-menu { position: absolute; left: 504px; top: 388px; width: 440px; height: 136px; z-index: 5; }