/* Mark's cycle 1 (D236): only the pieces his context adds to the game's own HUD (CTX-14, UI-01): the Note Trail, the sound
   cards strip, a card flying into it, the guitar's assembly, the music box, the avatar's listening tilt, his loading
   photo. The same units (--u: one frame unit; Windows 1600 x 900, iPhone 844 x 390), the house look of board B (violet
   glass, cream for what is said, gold for the step forward) and Nunito, as css/pix.css and css/pix-v3.css. The designer's
   art drops in through the art keys of data/mark/cycle1.json; CSS only places and animates (UI-10). */

.mk-trail, .mk-hud, .mk-asm, .mb-layer, .mb {
  --glass: linear-gradient(180deg, rgba(116, 66, 196, .80) 0%, rgba(74, 32, 140, .86) 100%);
  --glass-hi: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .28), inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .16);
  --glass-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(26, 8, 46, .45);
  --cream: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 244, 224, .96));
  --gold: linear-gradient(170deg, #fff0b3 0%, #ffd45a 42%, #f5a50a 100%); --gold-edge: #b86f00;
  --ink: #2a1245; --plum: #5b2a86;
}

/* ---------------------------------------------------------------- the game while one of his screens is up */
.game.mk-busy > .hud .hud-tab, .game.mk-busy > .hud .hud-keys, .game.mk-busy > .hud .touch-controls,
.game.mk-busy > .hud .action-button { visibility: hidden !important; }
/* his goal card's "Open Music Box" waits until beat 9 has shown the box (mark-game.js boxDoor) */
.game.mk-nobox [data-collection="mark-find-pages"] { display: none !important; }

/* ---------------------------------------------------------------- the avatar listening (D236: distinct from thinking) */
.hud-avatar.mk-hearing .av-head { transform-origin: 50% 88%; animation: mkHear 3.2s cubic-bezier(.45, 0, .35, 1) infinite; }
@keyframes mkHear {
  0% { rotate: 0deg; translate: 0 0; }
  22% { rotate: -9deg; translate: calc(var(--u) * -2) calc(var(--u) * 1); }
  60% { rotate: -7deg; translate: calc(var(--u) * -1.5) calc(var(--u) * 1); }
  100% { rotate: 0deg; translate: 0 0; }
}
/* the hunt's three phases (owner 2026-10-25): far a faint lean toward the sound, nearer the tilt, very close the head
   right into it, quicker; each phase's own face art drops in by its key (app.js avatarExpressionSrc) */
.hud-avatar.mk-hearing[data-hear="far"] .av-head { animation-name: mkHearFar; animation-duration: 3.8s; }
.hud-avatar.mk-hearing[data-hear="close"] .av-head { animation-name: mkHearClose; animation-duration: 2.2s; }
@keyframes mkHearFar { 0%, 100% { rotate: 0deg; } 35%, 65% { rotate: -4deg; translate: calc(var(--u) * -1) 0; } }
@keyframes mkHearClose { 0%, 100% { rotate: -6deg; translate: calc(var(--u) * -2) calc(var(--u) * 1); } 40% { rotate: -12deg; translate: calc(var(--u) * -3) calc(var(--u) * 2); } 70% { rotate: -10deg; } }
@media (prefers-reduced-motion: reduce) { .hud-avatar.mk-hearing .av-head { animation: none; rotate: -7deg; } }

/* ---------------------------------------------------------------- the Note Trail */
.mk-trail { position: absolute; inset: 0; z-index: 11; overflow: hidden; opacity: 0; transition: opacity .55s ease; color: #fff;
  font-family: "Nunito", sans-serif; user-select: none; -webkit-user-select: none; }
.mk-trail.on { opacity: 1; }
.mk-bg { position: absolute; inset: -4%; background: #2a1245; }
.mk-bg-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.82);
  animation: mkDrift 34s ease-in-out infinite alternate; }
@keyframes mkDrift { from { scale: 1.02; translate: 0 0; } to { scale: 1.08; translate: -1.4% -.8%; } }
.mk-bg-veil { position: absolute; inset: 0;
  background: radial-gradient(70% 78% at 66% 50%, rgba(80, 36, 130, .18), rgba(34, 10, 62, .7) 78%),
    linear-gradient(90deg, rgba(26, 8, 46, .55) 0%, rgba(26, 8, 46, .12) 38%, transparent 55%); }
.mk-motes { position: absolute; inset: -10%; opacity: .7; pointer-events: none;
  background-image: radial-gradient(2px 2px at 10% 20%, rgba(255, 236, 170, .9), transparent 60%), radial-gradient(3px 3px at 30% 70%, rgba(220, 200, 255, .85), transparent 60%),
    radial-gradient(2px 2px at 55% 35%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(3px 3px at 75% 80%, rgba(255, 226, 150, .8), transparent 60%),
    radial-gradient(2px 2px at 88% 30%, rgba(214, 190, 255, .9), transparent 60%), radial-gradient(2.5px 2.5px at 45% 90%, rgba(255, 255, 255, .8), transparent 60%);
  background-size: 33% 33%; animation: mkMotes 22s linear infinite; }
@keyframes mkMotes { from { translate: 0 0; } to { translate: -6% -14%; } }

/* the title: Mark's, Note Trail, and the three rounds (4, 5, 6 notes) as stars */
.mk-head { position: absolute; left: calc(var(--u) * 1060); top: calc(var(--u) * 22); translate: -50% 0; display: flex; align-items: center;
  gap: calc(var(--u) * 18); height: calc(var(--u) * 76); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 30); border-radius: 999px;
  background: var(--glass); box-shadow: var(--glass-hi), var(--glass-shadow); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  animation: mkDrop .7s .1s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes mkDrop { from { opacity: 0; translate: -50% calc(var(--u) * -40); } to { opacity: 1; translate: -50% 0; } }
.mk-head small { font: 900 calc(var(--u) * 17)/1 "Nunito", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #f6dfa0; }
.mk-head b { font: 1000 calc(var(--u) * 36)/1 "Nunito", sans-serif; color: #fff8ea; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(26, 8, 46, .6); white-space: nowrap; }
.mk-pips { display: flex; gap: calc(var(--u) * 6); margin-left: calc(var(--u) * 6); }
.mk-pips i { position: relative; width: calc(var(--u) * 50); height: calc(var(--u) * 50); display: grid; place-items: center; border-radius: 50%;
  background: rgba(26, 8, 46, .35); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .14); transition: background .4s, box-shadow .4s; }
.mk-pips img { width: 72%; height: 72%; object-fit: contain; filter: grayscale(1) brightness(.75); opacity: .55; transition: filter .5s, opacity .5s, scale .5s cubic-bezier(.3, 1.6, .4, 1); }
.mk-pips em { position: absolute; right: calc(var(--u) * -3); bottom: calc(var(--u) * -3); min-width: calc(var(--u) * 20); height: calc(var(--u) * 20);
  border-radius: 999px; display: grid; place-items: center; font: 1000 calc(var(--u) * 13)/1 "Nunito", sans-serif; font-style: normal; color: var(--ink); background: #fff3cf; }
.mk-pips i.now { background: rgba(255, 214, 102, .2); box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(255, 214, 102, .7); }
.mk-pips i.now img { filter: none; opacity: .9; }
.mk-pips i.done img { filter: none; opacity: 1; scale: 1.12; }

/* the ring: seven notes clockwise from the top, low to high; their places never change (D170) */
.mk-ring { position: absolute; left: calc(var(--u) * 760); top: calc(var(--u) * 150); width: calc(var(--u) * 600); height: calc(var(--u) * 600); }
.mk-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-path circle { fill: none; stroke: rgba(255, 222, 140, .62); stroke-width: .55; stroke-dasharray: .2 2.1; stroke-linecap: round;
  filter: drop-shadow(0 0 1.2px rgba(255, 210, 110, .8)); animation: mkPath 40s linear infinite; }
@keyframes mkPath { to { stroke-dashoffset: -46.5; } }
.mk-stone { position: absolute; width: calc(var(--u) * 140); height: calc(var(--u) * 140); translate: -50% -50%; padding: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; z-index: 2;
  transition: scale .45s cubic-bezier(.3, 1.6, .4, 1), filter .4s ease; animation: mkStoneIn .7s calc(.25s + var(--i) * .07s) cubic-bezier(.2, .9, .25, 1.2) both; }
@keyframes mkStoneIn { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.mk-orb, .mk-orb-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.mk-orb { background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, .38) 13%, transparent 33%),
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 52%, #1d0b33) 100%);
  box-shadow: inset 0 calc(var(--u) * -12) calc(var(--u) * 20) rgba(20, 6, 40, .38), inset 0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(255, 255, 255, .35),
    0 0 0 calc(var(--u) * 5) #fff1cf, 0 0 0 calc(var(--u) * 8) rgba(196, 128, 22, .75), 0 calc(var(--u) * 16) calc(var(--u) * 26) rgba(18, 5, 36, .55); }
.mk-orb-hi { position: absolute; left: 22%; top: 12%; width: 34%; height: 20%; border-radius: 50%; rotate: -24deg; background: rgba(255, 255, 255, .55); filter: blur(calc(var(--u) * 2)); }
.mk-orb-art { object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 16) rgba(18, 5, 36, .5)); }
.mk-sign { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; translate: -50% -50%; fill: #fffaf0; overflow: visible;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(40, 10, 60, .5)); transition: scale .35s cubic-bezier(.3, 1.6, .4, 1); }
.mk-bloom { position: absolute; inset: -42%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, #fff) 0%, color-mix(in srgb, var(--c) 45%, transparent) 30%, transparent 66%); transition: opacity .5s ease; }
.mk-ripple { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: calc(var(--u) * 4) solid color-mix(in srgb, var(--c) 70%, #fff); opacity: 0; }
.mk-stone kbd { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * 2); min-width: calc(var(--u) * 30); height: calc(var(--u) * 30);
  border-radius: 50%; display: grid; place-items: center; font: 900 calc(var(--u) * 15)/1 "Nunito", sans-serif; color: var(--cream-c, #fff8ea);
  background: rgba(42, 18, 69, .82); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .25); opacity: 0; transition: opacity .3s; }
.mk-trail.awake .mk-stone kbd { opacity: .9; }
.mk-trail:not(.awake) .mk-stone { filter: saturate(.82) brightness(.9); }
.mk-trail.awake .mk-stone:hover { scale: 1.06; }
.mk-trail.awake .mk-stone .mk-orb { animation: mkBreathe 3.6s calc(var(--i) * -.5s) ease-in-out infinite; }
@keyframes mkBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }
.mk-stone.lit { scale: 1.16; filter: none !important; z-index: 3; }
.mk-stone.lit .mk-bloom { opacity: 1; transition-duration: .08s; }
.mk-stone.lit .mk-orb, .mk-stone.lit .mk-orb-art { filter: brightness(1.25) saturate(1.1); }
.mk-stone.lit .mk-sign { scale: 1.12; }
.mk-stone.lit .mk-ripple { animation: mkRipple .9s ease-out; }
@keyframes mkRipple { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.9; } }
.mk-stone.shh { animation: mkShh .42s ease-in-out; }
@keyframes mkShh { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 65% { rotate: 5deg; } }
.mk-stone.wob { animation: mkWob .7s ease-in-out; }
@keyframes mkWob { 0%, 100% { rotate: 0deg; scale: 1; } 25% { rotate: -9deg; scale: .96; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } }

/* the centre: the music sign in a glass disc that beats in the colour of each note as it sounds */
.mk-centre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: calc(var(--u) * 10); --c: #ffd45a; }
.mk-centre-disc { width: calc(var(--u) * 170); height: calc(var(--u) * 170); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, .28), rgba(84, 40, 150, .55) 62%, rgba(42, 14, 82, .75));
  box-shadow: var(--glass-hi), 0 0 0 calc(var(--u) * 3) rgba(255, 222, 140, .55), 0 calc(var(--u) * 18) calc(var(--u) * 34) rgba(18, 5, 36, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: box-shadow .5s ease; }
.mk-centre-disc img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(18, 5, 36, .45)); }
.mk-centre.beat .mk-centre-disc { animation: mkBeat .6s ease-out; }
@keyframes mkBeat { 0% { box-shadow: var(--glass-hi), 0 0 0 calc(var(--u) * 3) rgba(255, 222, 140, .55), 0 0 calc(var(--u) * 70) calc(var(--u) * 16) var(--c); scale: 1.06; }
  100% { box-shadow: var(--glass-hi), 0 0 0 calc(var(--u) * 3) rgba(255, 222, 140, .55), 0 calc(var(--u) * 18) calc(var(--u) * 34) rgba(18, 5, 36, .5); scale: 1; } }
.mk-turn { font: 1000 calc(var(--u) * 26)/1 "Nunito", sans-serif; letter-spacing: .04em; color: #fff3cf; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(26, 8, 46, .85); }
.mk-trail.awake .mk-turn { color: #ffe08a; }
.mk-trail.cheer .mk-centre-disc { animation: mkCheer 1.2s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes mkCheer { 0% { scale: 1; } 30% { scale: 1.16; box-shadow: var(--glass-hi), 0 0 0 calc(var(--u) * 4) #ffd45a, 0 0 calc(var(--u) * 90) calc(var(--u) * 20) rgba(255, 212, 90, .8); } 100% { scale: 1; } }

/* Mark at the foot of the screen, whole (never framed, UI-STANDARD 3), and his words in a cream cloud above him */
.mk-mark { position: absolute; left: calc(var(--u) * 26); bottom: calc(var(--u) * -6); height: calc(var(--u) * 560); pointer-events: none;
  animation: mkRise .8s .15s cubic-bezier(.2, .9, .25, 1.06) both; }
@keyframes mkRise { from { opacity: 0; translate: 0 calc(var(--u) * 80); } to { opacity: 1; translate: 0 0; } }
.mk-bust { height: 100%; width: auto; transform-origin: 50% 100%; animation: mkBustBreathe 4.2s ease-in-out infinite;
  filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 24) rgba(18, 5, 36, .45)); }
@keyframes mkBustBreathe { 0%, 100% { scale: 1 1; } 50% { scale: .994 1.012; } }
.mk-cloud { position: absolute; left: calc(var(--u) * 210); top: calc(var(--u) * 120); width: calc(var(--u) * 520); padding: calc(var(--u) * 20) calc(var(--u) * 30) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 34); background: var(--cream); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 calc(var(--u) * 22) calc(var(--u) * 44) rgba(10, 2, 20, .45); }
.mk-cloud::after { content: ""; position: absolute; left: calc(var(--u) * 64); top: calc(100% - 1px); width: calc(var(--u) * 44); height: calc(var(--u) * 26);
  background: #fff3df; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.mk-cloud.in { animation: mkCloud .5s cubic-bezier(.2, .9, .25, 1.12); }
@keyframes mkCloud { from { opacity: .2; translate: 0 calc(var(--u) * 10); scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
.mk-who { display: block; margin-bottom: calc(var(--u) * 6); font: 1000 calc(var(--u) * 18)/1 "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); }
.mk-line { margin: 0; font: 800 calc(var(--u) * 31)/1.28 "Nunito", sans-serif; min-height: 1.28em; }

/* the child's two ways: hear the tune again (Space), leave (Escape) */
.mk-actions { position: absolute; right: calc(var(--u) * 40); bottom: calc(var(--u) * 36); display: flex; gap: calc(var(--u) * 16); align-items: center; }
.mk-actions button { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 78); padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 10);
  border: 0; border-radius: 999px; cursor: pointer; color: #fff8ea; font: 1000 calc(var(--u) * 27)/1 "Nunito", sans-serif;
  background: var(--glass); box-shadow: var(--glass-hi), var(--glass-shadow); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), opacity .3s; animation: mkPop .55s .6s cubic-bezier(.3, 1.6, .4, 1) both; }
@keyframes mkPop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.mk-actions button:hover:not(:disabled) { translate: 0 calc(var(--u) * -3); }
.mk-actions button:disabled { opacity: .45; cursor: default; }
.mk-actions .mk-ic { width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #fff, #f2e8ff 60%, #d9c7ff); box-shadow: inset 0 calc(var(--u) * -4) calc(var(--u) * 8) rgba(91, 42, 134, .25); }
.mk-actions .mk-ic img { width: 62%; height: 62%; object-fit: contain; }
.mk-actions kbd { min-width: calc(var(--u) * 34); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 10); display: grid; place-items: center;
  font: 900 calc(var(--u) * 14)/1 "Nunito", sans-serif; color: var(--ink); background: rgba(255, 248, 234, .85); }
.mk-actions .mk-leave { height: calc(var(--u) * 64); font-size: calc(var(--u) * 22); }
.mk-actions .mk-leave .mk-ic { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }

/* ---- the iPhone frame (844 x 390 units): the ring on the right half, Mark at the foot on the left */
.mk-trail.f-ios .mk-head { left: calc(var(--u) * 560); top: calc(var(--u) * 8); height: calc(var(--u) * 40); gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 16); }
.mk-trail.f-ios .mk-head small { font-size: calc(var(--u) * 9.5); }
.mk-trail.f-ios .mk-head b { font-size: calc(var(--u) * 19); }
.mk-trail.f-ios .mk-pips i { width: calc(var(--u) * 27); height: calc(var(--u) * 27); }
.mk-trail.f-ios .mk-pips em { min-width: calc(var(--u) * 12); height: calc(var(--u) * 12); font-size: calc(var(--u) * 8); }
.mk-trail.f-ios .mk-ring { left: calc(var(--u) * 418); top: calc(var(--u) * 54); width: calc(var(--u) * 284); height: calc(var(--u) * 284); }
.mk-trail.f-ios .mk-stone { width: calc(var(--u) * 68); height: calc(var(--u) * 68); }
.mk-trail.f-ios .mk-stone kbd { display: none; }
.mk-trail.f-ios .mk-centre-disc { width: calc(var(--u) * 80); height: calc(var(--u) * 80); }
.mk-trail.f-ios .mk-turn { font-size: calc(var(--u) * 14); }
.mk-trail.f-ios .mk-mark { left: calc(var(--u) * 52); height: calc(var(--u) * 232); }
.mk-trail.f-ios .mk-cloud { left: calc(var(--u) * 150); top: calc(var(--u) * 84); width: calc(var(--u) * 252); padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 12); border-radius: calc(var(--u) * 18); }
.mk-trail.f-ios .mk-cloud::after { left: calc(var(--u) * 26); width: calc(var(--u) * 22); height: calc(var(--u) * 13); }
.mk-trail.f-ios .mk-who { font-size: calc(var(--u) * 9.5); margin-bottom: calc(var(--u) * 3); }
.mk-trail.f-ios .mk-line { font-size: calc(var(--u) * 16.5); }
.mk-trail.f-ios .mk-actions { right: calc(var(--u) * 59); bottom: calc(var(--u) * 12); flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 8); }
.mk-trail.f-ios .mk-actions button { height: calc(var(--u) * 42); font-size: calc(var(--u) * 15); gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 5); }
.mk-trail.f-ios .mk-actions .mk-ic { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.mk-trail.f-ios .mk-actions .mk-leave { height: calc(var(--u) * 36); font-size: calc(var(--u) * 13); }
.mk-trail.f-ios .mk-actions .mk-leave .mk-ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.mk-trail.f-ios .mk-actions kbd { display: none; }

/* ---------------------------------------------------------------- the sound cards strip (his piece of the HUD, top centre) */
.mk-hud { position: absolute; left: 50%; top: calc(var(--u) * 16); translate: -50% 0; z-index: 13; pointer-events: none; opacity: 0; transition: opacity .45s ease, translate .45s ease; }
.mk-hud.on { opacity: 1; }
.mk-strip { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 88); padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 10); border-radius: 999px;
  background: linear-gradient(180deg, #fffaf1, #f6e7cf); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .9), inset 0 0 0 calc(var(--u) * 3) rgba(124, 58, 237, .28), var(--sh-2); }
.mk-strip-ic { width: calc(var(--u) * 66); height: calc(var(--u) * 66); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #fff, #f2e8ff 60%, #d9c7ff); box-shadow: inset 0 calc(var(--u) * -5) calc(var(--u) * 10) rgba(91, 42, 134, .25); }
.mk-strip-ic img { width: 66%; height: 66%; object-fit: contain; }
.mk-strip-lb { font: 1000 calc(var(--u) * 22)/1 "Nunito", sans-serif; letter-spacing: .02em; color: var(--plum); white-space: nowrap; }
.mk-slots { display: flex; gap: calc(var(--u) * 6); }
.mk-slot { position: relative; width: calc(var(--u) * 52); height: calc(var(--u) * 60); border-radius: calc(var(--u) * 6); display: grid; place-items: center;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 calc(var(--u) * 8), rgba(240, 228, 206, .7) calc(var(--u) * 8) calc(var(--u) * 9));
  box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(91, 42, 134, .22); transition: transform .4s cubic-bezier(.3, 1.6, .4, 1); }
.mk-slot::before { content: "?"; font: 1000 calc(var(--u) * 26)/1 "Nunito", sans-serif; color: rgba(91, 42, 134, .32); }
.mk-slot img { position: absolute; inset: calc(var(--u) * -2); width: calc(100% + var(--u) * 4); height: calc(100% + var(--u) * 4); object-fit: contain; opacity: 0; scale: .5;
  transition: opacity .3s, scale .45s cubic-bezier(.3, 1.8, .4, 1); filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(60, 20, 90, .3)); }
.mk-slot.has { box-shadow: none; background: none; }
.mk-slot.has::before { content: none; }
.mk-slot.has img { opacity: 1; scale: 1; }
.mk-slot.pop { transform: translateY(calc(var(--u) * -10)) scale(1.2); }
.mk-count { font: 1000 calc(var(--u) * 30)/1 "Nunito", sans-serif; color: var(--ink); min-width: calc(var(--u) * 52); text-align: center; }
.mk-hud.back .mk-strip { animation: mkBack 2.4s ease-in-out infinite; }
@keyframes mkBack { 0%, 100% { box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .9), inset 0 0 0 calc(var(--u) * 3) rgba(124, 58, 237, .28), var(--sh-2); }
  50% { box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .9), inset 0 0 0 calc(var(--u) * 3) rgba(245, 165, 10, .7), 0 0 calc(var(--u) * 26) rgba(255, 197, 61, .75), var(--sh-2); } }
.f-ios .mk-hud { top: calc(var(--u) * 8); }
.f-ios .mk-strip { height: calc(var(--u) * 50); gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 6); }
.f-ios .mk-strip-ic { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
.f-ios .mk-strip-lb { font-size: calc(var(--u) * 12); }
.f-ios .mk-slot { width: calc(var(--u) * 29); height: calc(var(--u) * 34); }
.f-ios .mk-slot::before { font-size: calc(var(--u) * 15); }
.f-ios .mk-count { font-size: calc(var(--u) * 17); min-width: calc(var(--u) * 30); }

/* a card picked up flies from the map into its slot */
.mk-fly { position: absolute; z-index: 60; width: auto; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 12px rgba(30, 10, 50, .45)); }

/* ---------------------------------------------------------------- the guitar's assembly (3/3), the hook for the designer's moment */
.mk-asm { position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 28);
  opacity: 0; transition: opacity .45s ease; color: #fff; font-family: "Nunito", sans-serif; container-type: size; }
.mk-asm.on { opacity: 1; }
.mk-asm-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 42%, rgba(70, 30, 110, .62), rgba(22, 6, 40, .9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mk-asm-stage { position: relative; width: min(78cqw, 62cqh * 2.772); aspect-ratio: 1400 / 505; }
.mk-asm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mk-asm-whole { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; scale: .96; transition: opacity .9s ease, scale 1.1s cubic-bezier(.2, .9, .25, 1.1);
  filter: drop-shadow(0 calc(var(--u) * 24) calc(var(--u) * 34) rgba(10, 2, 20, .55)); }
.mk-asm-page { position: absolute; top: 0; height: 100%; width: auto; object-fit: contain; opacity: 0;
  filter: drop-shadow(0 calc(var(--u) * 20) calc(var(--u) * 26) rgba(10, 2, 20, .5));
  transition: left 1s cubic-bezier(.2, .9, .25, 1), translate 1.1s cubic-bezier(.2, .9, .25, 1.05), rotate 1.1s cubic-bezier(.2, .9, .25, 1.05), opacity .5s ease; }
.mk-asm-page.p1 { left: 0; translate: -40cqw -70cqh; rotate: -28deg; }
.mk-asm-page.p2 { left: 32.5%; translate: 0 -80cqh; rotate: 22deg; }
.mk-asm-page.p3 { left: 65%; translate: 40cqw -70cqh; rotate: 30deg; }
.mk-asm.fly .mk-asm-page { opacity: 1; }
.mk-asm.fly .mk-asm-page.p1 { translate: -6% 0; rotate: -5deg; transition-delay: 0s; }
.mk-asm.fly .mk-asm-page.p2 { translate: 0 -2%; rotate: 3deg; transition-delay: .12s; }
.mk-asm.fly .mk-asm-page.p3 { translate: 6% 0; rotate: 6deg; transition-delay: .24s; }
.mk-asm.join .mk-asm-page { translate: 0 0 !important; rotate: 0deg !important; transition-duration: .6s; transition-delay: 0s; }
.mk-asm.whole .mk-asm-page { opacity: 0; transition: opacity .8s ease .2s; }
.mk-asm.whole .mk-asm-whole { opacity: 1; scale: 1; animation: mkFloat 5s 1.2s ease-in-out infinite; }
@keyframes mkFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -8); } }
.mk-asm-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 240, 190, .85) 50%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; }
.mk-asm.whole .mk-asm-shine { animation: mkShine 1.5s .5s ease-out forwards; }
@keyframes mkShine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }
.mk-asm-copy { position: relative; text-align: center; opacity: 0; translate: 0 calc(var(--u) * 20); transition: opacity .6s ease .9s, translate .6s ease .9s; }
.mk-asm.whole .mk-asm-copy { opacity: 1; translate: 0 0; }
.mk-asm-copy h2 { margin: 0 0 calc(var(--u) * 10); font: 1000 calc(var(--u) * 52)/1.05 "Nunito", sans-serif; color: #fff8ea; text-shadow: 0 0 calc(var(--u) * 24) rgba(255, 197, 61, .55), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(26, 8, 46, .8); }
.mk-asm-copy p { display: inline-block; margin: 0; padding: calc(var(--u) * 8) calc(var(--u) * 24); border-radius: 999px; font: 1000 calc(var(--u) * 32)/1 "Nunito", sans-serif; color: var(--ink);
  background: linear-gradient(180deg, #fffaf1, #f6e7cf); box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, var(--sh-2); }
.mk-asm .mk-asm-go { position: absolute; }
.mk-asm.f-ios .mk-asm-copy h2 { font-size: calc(var(--u) * 26); }
.mk-asm.f-ios .mk-asm-copy p { font-size: calc(var(--u) * 17); }
.mk-asm.f-ios .mk-asm-stage { width: min(70cqw, 52cqh * 2.772); }
.mk-asm.f-ios .mk-asm-go { right: calc(var(--u) * 59); bottom: calc(var(--u) * 14); height: calc(var(--u) * 44); font-size: calc(var(--u) * 17); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 22); }

/* ---------------------------------------------------------------- the music box (D236 step 6) */
.mb-layer { position: absolute; inset: 0; z-index: 45; opacity: 0; transition: opacity .4s ease; container-type: size; }
.mb-layer.on { opacity: 1; }
.mb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqh; font-family: "Nunito", sans-serif; }
.mb-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(58, 24, 92, .66), rgba(22, 6, 40, .9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mb-box { position: relative; z-index: 1; width: min(86cqw, 74cqh * 1.6); aspect-ratio: 1600 / 1000; container-type: inline-size; border-radius: 3.2cqw;
  background: radial-gradient(120% 90% at 50% 0%, #7a3fb0 0%, #4c1d78 46%, #2c0f4a 100%);
  box-shadow: inset 0 0 0 .5cqw #e9b85a, inset 0 0 0 .85cqw #8a4fbf, inset 0 1.4cqw 2.6cqw rgba(255, 255, 255, .18), inset 0 -2cqw 3cqw rgba(10, 2, 20, .45),
    0 3cqw 6cqw rgba(10, 2, 20, .55); animation: mbRise .7s cubic-bezier(.2, .9, .25, 1.08) both; }
@keyframes mbRise { from { opacity: 0; translate: 0 6cqh; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
.mb-box.has-art { background: none; box-shadow: none; }
.mb-box-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.mb-lid { position: absolute; left: 4%; right: 4%; top: 3.2%; height: 12%; border-radius: 2cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); box-shadow: inset 0 0 0 .25cqw rgba(233, 184, 90, .55); }
.mb-trim { position: absolute; left: 3%; right: 3%; bottom: 3.6%; height: .3cqw; border-radius: 99px; background: linear-gradient(90deg, transparent, #e9b85a 20%, #fff0c0 50%, #e9b85a 80%, transparent); opacity: .7; }
.mb-plaque { position: absolute; left: 50%; top: 4.2%; translate: -50% 0; display: flex; align-items: center; gap: 1.2cqw; height: 9.5%; padding: 0 2.6cqw 0 1cqw; border-radius: 999px;
  background: linear-gradient(170deg, #fff0b3 0%, #ffd45a 42%, #f5a50a 100%); box-shadow: inset 0 .25cqw 0 rgba(255, 255, 255, .75), 0 .5cqw 0 #b86f00, 0 1.4cqw 2cqw rgba(10, 2, 20, .4); }
.mb-plaque img { height: 76%; aspect-ratio: 1; object-fit: contain; }
.mb-plaque span { font: 1000 3cqw/1 "Nunito", sans-serif; color: #3a1b00; white-space: nowrap; }
.mb-field { position: absolute; left: 5.6%; top: 21%; width: 88.8%; height: 70%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.6cqw; }
.mb-cell { position: relative; border-radius: 1.6cqw; overflow: hidden; animation: mbCell .5s calc(.25s + var(--i) * .05s) cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes mbCell { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
.mb-velvet, .mb-cell-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.mb-velvet { background: radial-gradient(120% 90% at 50% 30%, #fff8ec 0%, #f4e6cf 62%, #e6d1ad 100%);
  box-shadow: inset 0 .5cqw 1.2cqw rgba(60, 20, 90, .28), inset 0 -.3cqw .6cqw rgba(255, 255, 255, .7); }
.mb-glow { position: absolute; inset: -10%; opacity: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--c) 65%, #fff) 0%, transparent 62%); transition: opacity .8s ease; }
.mb-slots { position: absolute; left: 7%; right: 7%; top: 10%; height: 60%; display: flex; justify-content: center; align-items: center; gap: 4%; }
.mb-slot { position: relative; height: 100%; aspect-ratio: 558 / 626; max-width: 30%; border-radius: .6cqw; display: grid; place-items: center; }
.mb-slot-empty { position: absolute; inset: 0; border-radius: inherit; border: .22cqw dashed rgba(91, 42, 134, .32); background: rgba(255, 255, 255, .35); }
.mb-slot-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mb-card { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: contain; filter: drop-shadow(0 .4cqw .5cqw rgba(60, 20, 90, .3)); }
.mb-name { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font: 1000 1.75cqw/1 "Nunito", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); opacity: .78; }
.mb-cell.open .mb-glow { opacity: .9; }
.mb-cell.open .mb-slots { opacity: 0; }
.mb-cell.open .mb-name { color: #6b3a00; opacity: 1; }
.mb-whole { position: absolute; left: 4%; right: 4%; top: 14%; height: 56%; display: grid; place-items: center; animation: mbFloat 4.6s ease-in-out infinite; }
.mb-whole img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 .6cqw .8cqw rgba(60, 20, 90, .35)); }
@keyframes mbFloat { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -4%; rotate: 1deg; } }
.mb-spark { position: absolute; width: 16%; aspect-ratio: 1; object-fit: contain; opacity: 0; animation: mbTwinkle 2.8s ease-in-out infinite; pointer-events: none; }
.mb-spark.s1 { left: 10%; top: 10%; }
.mb-spark.s2 { right: 9%; top: 52%; animation-delay: 1.4s; }
@keyframes mbTwinkle { 0%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 40% { opacity: 1; scale: 1; rotate: 40deg; } 70% { opacity: 0; scale: .6; } }
.mb-cell.fresh .mb-whole, .mb-cell.fresh .mb-glow, .mb-cell.fresh .mb-spark { opacity: 0; animation-play-state: paused; }
.mb-cell.fresh .mb-slots { opacity: 1; }
.mb-cell.fresh.opening { z-index: 3; animation: mbOpen 2.4s cubic-bezier(.3, .7, .25, 1) both; overflow: visible; }
.mb-cell.fresh.opening .mb-slots { opacity: 0; transition: opacity .5s ease .3s; }
.mb-cell.fresh.opening .mb-whole { opacity: 1; animation: mbWholeIn 1s .4s cubic-bezier(.2, .9, .25, 1.2) both, mbFloat 4.6s 1.4s ease-in-out infinite; }
.mb-cell.fresh.opening .mb-glow { opacity: .9; transition-delay: .3s; }
.mb-cell.fresh.opening .mb-spark { animation-play-state: running; }
@keyframes mbOpen { 0% { scale: 1; } 25% { scale: 1.5; box-shadow: 0 0 4cqw 1cqw rgba(255, 212, 90, .75); } 70% { scale: 1.5; } 100% { scale: 1; box-shadow: none; } }
@keyframes mbWholeIn { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
.mb-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.4cqw; }
.mb-caption { margin: 0; display: grid; gap: .6cqh; text-align: center; color: #fff6e3; text-shadow: 0 .2cqh 1cqh rgba(26, 8, 46, .85); }
.mb-caption b { font: 1000 max(16px, 3.6cqh)/1.1 "Nunito", sans-serif; }
.mb-caption small { font: 800 max(12px, 2cqh)/1.2 "Nunito", sans-serif; opacity: .85; }
.mb-go { position: static; }
.mb.mb-inline { position: relative; inset: auto; width: 100%; height: 100%; gap: 1.6cqh; }
.mb.mb-inline .mb-box { width: min(96cqw, 76cqh * 1.6); }
.mb.mb-inline .mb-caption { color: var(--cream-c, #fff6e3); }
.mb-page { height: 100%; container-type: size; }
.f-ios .mb-layer .mb-box { width: min(82cqw, 70cqh * 1.6); }

/* ---------------------------------------------------------------- an answer not available yet (the yes without the set) */
.premium-dialogue .choice-button.unavailable { opacity: .55; filter: saturate(.55); cursor: not-allowed; }
.premium-dialogue .choice-button.unavailable .tk-ic img { opacity: .9; }

/* ---------------------------------------------------------------- the script's pieces (SCRIPT.md, 2026-10-25) */
/* the stones' small labels Do..Si (lead decision 14) */
.mk-label { position: absolute; left: 50%; top: calc(100% + var(--u) * 6); translate: -50% 0; padding: calc(var(--u) * 3) calc(var(--u) * 12); border-radius: 999px;
  font: 1000 calc(var(--u) * 17)/1 "Nunito", sans-serif; letter-spacing: .04em; color: var(--ink); background: linear-gradient(180deg, #fffaf1, #f3e3c6);
  box-shadow: inset 0 calc(var(--u) * 1.5) 0 #fff, 0 calc(var(--u) * 4) calc(var(--u) * 8) rgba(18, 5, 36, .4); pointer-events: none; white-space: nowrap; }
.mk-trail.f-ios .mk-label { font-size: calc(var(--u) * 9.5); top: calc(100% + var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 6); }
.mk-trail.f-ios .mk-ring { left: calc(var(--u) * 425); top: calc(var(--u) * 62); width: calc(var(--u) * 270); height: calc(var(--u) * 270); }   /* (clear of the title pill, 2026-10-26 screenshot) */
/* the gentle hint: the next stone glows before each tap (lead decision 9) */
.mk-stone.hint .mk-bloom { opacity: .55; animation: mkHint 1.3s ease-in-out infinite; }
.mk-stone.hint { scale: 1.06; filter: none !important; }
@keyframes mkHint { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
/* the turn: the stones flash softly (with the turn cue) */
.mk-trail.flash .mk-stone .mk-bloom { animation: mkFlash .7s calc(var(--i) * 40ms) ease-out; }
@keyframes mkFlash { 0% { opacity: 0; } 40% { opacity: .6; } 100% { opacity: 0; } }
/* a dimmed answer's reason under it ("Find all three cards first · Guitar 1/3") */
.premium-dialogue .choice-button .tk-reason { display: block; margin-top: .25em; font-size: .62em; font-weight: 800; opacity: .9; letter-spacing: .01em; }
/* the Music Box: each cell's counter, and Mark's lines while it is open */
.mb-count { margin-left: .6em; font-style: normal; font-weight: 1000; color: #8a5a00; opacity: .9; }
.mb-say { position: absolute; z-index: 3; left: 2.4cqw; bottom: 2cqh; display: flex; align-items: flex-end; gap: 1cqw; max-width: 46cqw; pointer-events: none; }
.mb-say-face { height: 30cqh; width: auto; filter: drop-shadow(0 1.2cqh 1.6cqh rgba(10, 2, 20, .5)); }
.mb-say-cloud { margin-bottom: 4cqh; padding: 1.6cqh 1.6cqw; border-radius: 2.4cqh; background: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 244, 224, .96)); color: #2a1245;
  box-shadow: inset 0 .3cqh 0 #fff, 0 1.6cqh 3cqh rgba(10, 2, 20, .45); }
.mb-say-cloud b { display: block; margin-bottom: .6cqh; font: 1000 max(11px, 1.7cqh)/1 "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5b2a86; }
.mb-say-cloud p { margin: 0; font: 800 max(15px, 3.3cqh)/1.28 "Nunito", sans-serif; }
.mb-say.in { animation: mkCloud .5s cubic-bezier(.2, .9, .25, 1.12); }
.mb-layer:has(.mb-say:not([hidden])) .mb-box { translate: 12cqw 0; width: min(66cqw, 64cqh * 1.6); }
.mb-layer:has(.mb-say:not([hidden])) .mb-foot { translate: 20cqw 0; }
.mb-layer:has(.mb-say:not([hidden])) .mb-caption small { display: none; }
/* his context's talks over his own garden (app.js dialogueShell, talkBackdrop) */
.premium-dialogue .tk-bg img.ctx-bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- his loading photo (the album page, D169) */
.mk-loading .al-img { position: relative; overflow: hidden; }
.mk-loading .al-fig { position: absolute; pointer-events: none; }
.mk-loading .al-fig.bust { left: 50%; bottom: -8%; height: 112%; width: auto; translate: -50% 0; filter: drop-shadow(0 6px 10px rgba(30, 10, 40, .35)); }
.mk-loading .al-fig.wide { left: 50%; top: 52%; width: 94%; height: auto; translate: -50% -50%; filter: drop-shadow(0 6px 10px rgba(30, 10, 40, .35)); }