/* Mark, cycle 1: the moments the owner chose (D237): the Sound Card found (A+), the guitar comes together (B+), the
   Music Box (A+). The designer's styles as they are (W/design/contexts/mark/cycle1/design/card, card2, guitar, guitar2,
   box, box2), the art paths pointed at the game's copies in assets/generated/mark/. Run by js/mark/moments.js. */

/* ================================================================ the sound card on the map (round 1 base): design/card/card.css */
/* A sound card on the map and the moment it is found (D218, D236): A = a golden shimmer in the grass, the page pops up
   out of the ground; B = the page drifts in the air like a leaf among motes of the seven note colours. Both: close up,
   then into the tablet, and the goal's progress surfaces (3 cards). */
.cd-spot { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.cd-spot > * { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.cd-swirl { width: calc(var(--u) * 230); height: calc(var(--u) * 230); background: url('../art/fx/swirl.webp') center / contain no-repeat; mix-blend-mode: screen;
  opacity: var(--near, 0); animation: cdspin 6s linear infinite; filter: sepia(.6) saturate(2.2) hue-rotate(-12deg) brightness(1.15); }
.f-ios .cd-swirl { width: calc(var(--u) * 110); height: calc(var(--u) * 110); }
/* the hum itself, seen: a soft pool of light on the ground that swells with every hum (in sync with the sound) */
.cd-hum { width: calc(var(--u) * 260); height: calc(var(--u) * 150); border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .95), rgba(255, 197, 61, .45) 45%, transparent); }
.cd-B .cd-hum { background: radial-gradient(closest-side, rgba(220, 205, 255, .9), rgba(150, 120, 255, .4) 45%, transparent); height: calc(var(--u) * 260); }
.f-ios .cd-hum { width: calc(var(--u) * 124); height: calc(var(--u) * 72); }
.f-ios .cd-B .cd-hum { height: calc(var(--u) * 124); }
@keyframes cdspin { to { rotate: 360deg; } }
.cd-twinkle { width: calc(var(--u) * 190); height: calc(var(--u) * 190); background: url('../art/fx/sparkles.webp') center / contain no-repeat; mix-blend-mode: screen;
  opacity: calc(var(--near, 0) * .9); animation: cdtw 1.6s ease-in-out infinite; }
.f-ios .cd-twinkle { width: calc(var(--u) * 90); height: calc(var(--u) * 90); }
@keyframes cdtw { 0%, 100% { scale: .85; rotate: 0deg; } 50% { scale: 1.08; rotate: 14deg; } }
/* B: motes of the seven note colours, rising and circling */
.cd-motes { width: calc(var(--u) * 260); height: calc(var(--u) * 260); opacity: var(--near, 0); }
.f-ios .cd-motes { width: calc(var(--u) * 96); height: calc(var(--u) * 96); }
.cd-motes i { position: absolute; left: 50%; top: 60%; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--c);
  box-shadow: 0 0 calc(var(--u) * 10) calc(var(--u) * 2) var(--c), 0 0 calc(var(--u) * 3) #fff inset; animation: cdmote var(--d) ease-in-out infinite; animation-delay: var(--dl); opacity: 0; }
.f-ios .cd-motes i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
@keyframes cdmote { 0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--u) * 20)) translateY(0); }
  20% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--a) + 160deg)) translateX(calc(var(--u) * 70)) translateY(calc(var(--u) * -70)); } }
/* the page on the map */
.cd-page { width: calc(var(--u) * 96); opacity: 0; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(50, 20, 10, .35)); }
.f-ios .cd-page { width: calc(var(--u) * 46); }
.cd-page img { display: block; width: 100%; height: auto; }
.cd-flash { width: calc(var(--u) * 360); height: calc(var(--u) * 360); background: url('../art/fx/burst.webp') center / contain no-repeat; mix-blend-mode: screen; opacity: 0; }
.f-ios .cd-flash { width: calc(var(--u) * 170); height: calc(var(--u) * 170); }
.cd-ring { width: calc(var(--u) * 160); height: calc(var(--u) * 160); background: url('../art/fx/ring.webp') center / contain no-repeat; mix-blend-mode: screen; opacity: 0; }
/* the close-up, over everything but the HUD */
.cd-close { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.cd-veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(60% 70% at 50% 46%, rgba(255, 236, 190, .22), rgba(30, 10, 55, .7)); backdrop-filter: blur(5px); }
.cd-rays { position: absolute; left: 50%; top: 46%; width: calc(var(--u) * 900); height: calc(var(--u) * 900); translate: -50% -50%; opacity: 0;
  background: url('../art/fx/burst.webp') center / contain no-repeat; mix-blend-mode: screen; }
.f-ios .cd-rays { width: calc(var(--u) * 420); height: calc(var(--u) * 420); }
.cd-big { position: absolute; left: 0; top: 0; width: calc(var(--u) * 470); opacity: 0; transform-origin: 50% 50%; }
.f-ios .cd-big { width: calc(var(--u) * 205); }
.cd-big img { display: block; width: 100%; height: auto; }
/* EVERY LIGHT OF THE CARD IS THE CARD'S OWN (the lead 2026-10-27: a light moves with the card and stays on it): .cd-lit
   is a layer INSIDE the card (the popping page, the big card), its exact box, clipped to it (overflow hidden) and masked
   by the card's own picture (the page's here, the big card's inline from moments.js), screened onto its face. Whatever
   burst, ray, glow or sparkle is in it moves, squashes and spins with the card and falls only ON the card, never on a
   roof, a tree or a prop. The face's shadow is the face's alone (a filter on .cd-big would shade the light too). */
.cd-big > img { position: relative; z-index: 1; filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(30, 10, 50, .45)); }
.cd-lit { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.cd-pop .cd-lit { -webkit-mask-image: url('../art/fx/page-ground.webp'); mask-image: url('../art/fx/page-ground.webp'); }
.cd-lit > i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.cd-big .sheen { z-index: 3; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* the close-up's lights, the card's size: a warm glow on its face, a cone of light from above across it, slow rays, a
   ripple of light, the glitter (the gold shimmer) */
.cd-big .cd-lit .cd-spot2 { width: 125%; height: auto; aspect-ratio: 1; }
.cd-big .cd-lit .cd-cone { left: 0; top: 0; width: 100%; height: 100%; translate: none; }
.cd-big .cd-lit .cd-rays2 { width: 170%; height: auto; aspect-ratio: 1; }
.cd-big .cd-lit .cd-halo { width: 100%; height: auto; aspect-ratio: 1; }
.cd-glitter { width: 94%; height: 94%; opacity: 0; background: url('../art/fx/sparkles.webp') center / contain no-repeat; animation: cdtw 1.6s ease-in-out infinite; }
.cd-glitter::after { content: ""; position: absolute; inset: 12%; background: inherit; rotate: 90deg; opacity: .8; animation: cdtw 2.3s ease-in-out infinite reverse; }
.cd-cap { position: absolute; left: 50%; top: calc(var(--u) * 778); translate: -50% 0; opacity: 0; display: flex; align-items: center; gap: calc(var(--u) * 14); white-space: nowrap;
  padding: calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * 12) calc(var(--u) * 16); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 244, 226, .93)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); }
.cd-cap img { width: calc(var(--u) * 52); height: calc(var(--u) * 52); object-fit: contain; }
.cd-cap span { display: flex; flex-direction: column; line-height: 1.05; }
.cd-cap small { font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 2); text-transform: uppercase; color: var(--violet); }
.cd-cap b { font: 1000 calc(var(--u) * 30)/1.1 "Nunito", sans-serif; color: var(--ink); margin-top: calc(var(--u) * 3); }
.f-ios .cd-cap { top: calc(var(--u) * 318); padding: calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 6) calc(var(--u) * 8); gap: calc(var(--u) * 7); }
.f-ios .cd-cap img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.f-ios .cd-cap small { font-size: calc(var(--u) * 9); }
.f-ios .cd-cap b { font-size: calc(var(--u) * 16.5); }
/* the goal's progress surfaces under the HUD's top centre (the game's .hud-goal look), then flies into the tablet */
.cd-goal { position: absolute; left: 50%; top: calc(var(--u) * 20); translate: -50% 0; z-index: 16; display: flex; align-items: center; opacity: 0; }
.cd-goal .gc-face { overflow: visible; }
.cd-pgs { display: flex; gap: calc(var(--u) * 8); }
.cd-pgs img { width: calc(var(--u) * 50); height: calc(var(--u) * 56); object-fit: contain; filter: grayscale(1) brightness(1.2) opacity(.35); transition: filter .5s; }
.cd-pgs img.on { filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(50, 15, 80, .3)); }
.f-ios .cd-goal { top: calc(var(--u) * 10); scale: .62; transform-origin: 50% 0; }

/* ================================================================ the sound card A+ (D237): design/card2/card2.css */
/* The sound card, round 2 (owner chose A, "more cinematic, better, more interesting"): golden shimmer in the grass,
   now with a shaft of light that finds the spot as the hero nears, rising motes, a camera that pushes in at the find,
   a slow-motion pop with shockwaves, a close-up in a spotlight with orbiting sparks, a comet flight into the tablet. */
.cd-shaft { width: calc(var(--u) * 360); height: calc(var(--u) * 520); translate: -50% -88% !important; opacity: calc(var(--near, 0) * .85);
  background: url('../art/fx/fx-rays.webp') center bottom / 100% 100% no-repeat; mix-blend-mode: screen; transform-origin: 50% 100%; animation: shaft 5s ease-in-out infinite; }
.f-ios .cd-shaft { width: calc(var(--u) * 170); height: calc(var(--u) * 250); }
@keyframes shaft { 0%, 100% { scale: 1 1; filter: brightness(1); } 50% { scale: 1.06 1.02; filter: brightness(1.25); } }
.cd-glint { width: calc(var(--u) * 70); height: calc(var(--u) * 70); opacity: 0; background: url('../art/fx/burst.webp') center / contain no-repeat; mix-blend-mode: screen; }
.f-ios .cd-glint { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.wd-cam.punch { transition: none; }
.cd-shock { position: absolute; width: calc(var(--u) * 200); height: calc(var(--u) * 120); border-radius: 50%; translate: -50% -50%; opacity: 0; pointer-events: none;
  border: calc(var(--u) * 5) solid rgba(255, 228, 150, .95); box-shadow: 0 0 calc(var(--u) * 26) rgba(255, 210, 110, .9), inset 0 0 calc(var(--u) * 20) rgba(255, 210, 110, .6); }
.cd-veil2 { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  /* (its middle is clear, not lit: the warm light is the card's own, on it, never a pool poured on the town round it) */
  background: radial-gradient(34% 46% at var(--vx, 50%) var(--vy, 44%), rgba(26, 8, 48, .3), rgba(26, 8, 48, .55) 55%, rgba(14, 4, 28, .88));
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cd-spot2 { position: absolute; left: 50%; top: 44%; width: calc(var(--u) * 900); height: calc(var(--u) * 900); translate: -50% -50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 190, .55), rgba(255, 200, 100, .12) 55%, transparent); mix-blend-mode: screen; }
.f-ios .cd-spot2 { width: calc(var(--u) * 420); height: calc(var(--u) * 420); }
.cd-rays2 { position: absolute; left: 50%; top: 44%; width: calc(var(--u) * 1200); height: calc(var(--u) * 1200); translate: -50% -50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 4%, rgba(255, 230, 160, .35) 5% 7%, transparent 8% 14%, rgba(255, 230, 160, .25) 15% 16%, transparent 17% 24%, rgba(255, 230, 160, .32) 25% 27%, transparent 28% 37%, rgba(255, 230, 160, .22) 38% 39%, transparent 40% 49%, rgba(255, 230, 160, .35) 50% 52%, transparent 53% 62%, rgba(255, 230, 160, .25) 63% 64%, transparent 65% 74%, rgba(255, 230, 160, .3) 75% 77%, transparent 78% 87%, rgba(255, 230, 160, .25) 88% 89%, transparent 90%);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%); mask: radial-gradient(closest-side, #000 10%, transparent 70%); mix-blend-mode: screen; }
.f-ios .cd-rays2 { width: calc(var(--u) * 560); height: calc(var(--u) * 560); }
.cd-rays2::after { content: ""; position: absolute; inset: 18%; background: url('../art/fx/burst.webp') center / contain no-repeat; opacity: .75; animation: r2spin 22s linear infinite reverse; }
@keyframes r2spin { to { rotate: 360deg; } }
.cd-halo { position: absolute; left: 50%; top: 44%; width: calc(var(--u) * 640); height: calc(var(--u) * 640); translate: -50% -50%; opacity: 0; pointer-events: none;
  background: url('../art/fx/ring.webp') center / contain no-repeat; mix-blend-mode: screen; filter: sepia(.7) saturate(3) hue-rotate(-10deg) brightness(1.2); }
.f-ios .cd-halo { width: calc(var(--u) * 300); height: calc(var(--u) * 300); }
.cd-big .sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%); background-size: 300% 100%; }
.cd-big { perspective: calc(var(--u) * 1200); }

/* ---------------------------------------------------------------- A+ polish (D237) */
@property --k { syntax: '<number>'; inherits: true; initial-value: 0; }
/* the frame tightens round the spot as the hero nears: a warm pool on it, the edges a touch darker */
.cd-tension { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: var(--k); --sx: 50%; --sy: 50%;
  background: radial-gradient(circle at var(--sx) var(--sy), rgba(255, 224, 150, .26) 0, rgba(255, 205, 120, .1) calc(var(--u) * 170), transparent calc(var(--u) * 330)),
    radial-gradient(120% 95% at var(--sx) var(--sy), transparent 38%, rgba(22, 6, 40, .5) 100%); }
/* the close-up: a cone of light from above finds the card */
.cd-cone { position: absolute; left: 50%; top: calc(var(--u) * -40); width: calc(var(--u) * 880); height: calc(var(--u) * 640); translate: -50% 0; opacity: 0; pointer-events: none;
  background: url('../art/fx/fx-rays.webp') center top / 100% 100% no-repeat; mix-blend-mode: screen; transform-origin: 50% 0;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
.f-ios .cd-cone { width: calc(var(--u) * 400); height: calc(var(--u) * 290); top: calc(var(--u) * -20); }
.cd-shock { border-width: calc(var(--u) * 4); }
.cd-tabring { position: absolute; z-index: 17; width: calc(var(--u) * 170); height: calc(var(--u) * 170); translate: -50% -50%; opacity: 0; pointer-events: none;
  background: url('../art/fx/ring.webp') center / contain no-repeat; mix-blend-mode: screen; filter: sepia(.6) saturate(2.6) hue-rotate(-10deg) brightness(1.25); }
.f-ios .cd-tabring { width: calc(var(--u) * 80); height: calc(var(--u) * 80); }
.f-ios .cd-shock { width: calc(var(--u) * 100); height: calc(var(--u) * 60); }
.f-ios .cd-tension { background: radial-gradient(circle at var(--sx) var(--sy), rgba(255, 224, 150, .26) 0, rgba(255, 205, 120, .1) calc(var(--u) * 76), transparent calc(var(--u) * 150)),
    radial-gradient(120% 95% at var(--sx) var(--sy), transparent 38%, rgba(22, 6, 40, .5) 100%); }

/* ================================================================ the guitar (round 1 base: the caption): design/guitar/guitar.css */
.gt-cap { position: absolute; left: 50%; bottom: calc(var(--u) * 46); translate: -50% 0; z-index: 12; opacity: 0; display: flex; align-items: center; gap: calc(var(--u) * 16); white-space: nowrap;
  padding: calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * 14) calc(var(--u) * 16); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 244, 226, .93)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); }
.gt-cap .pgs { display: flex; gap: calc(var(--u) * 4); }
.gt-cap .pgs img { width: calc(var(--u) * 40); height: calc(var(--u) * 46); object-fit: cover; border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(50, 15, 80, .3); }
.gt-cap > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
/* (the big line first, "3/3 collected", the small one under it, "Bring it to Mark": SCRIPT beat 6 of 2026-10-27) */
.gt-cap small { font: 1000 calc(var(--u) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 2); text-transform: uppercase; color: var(--violet); margin-top: calc(var(--u) * 4); }
.gt-cap b { font: 1000 calc(var(--u) * 34)/1.1 "Nunito", sans-serif; color: var(--ink); }
.f-ios .gt-cap { bottom: calc(var(--u) * 18); padding: calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * 6) calc(var(--u) * 8); gap: calc(var(--u) * 8); }
.f-ios .gt-cap .pgs img { width: calc(var(--u) * 20); height: calc(var(--u) * 23); }
.f-ios .gt-cap small { font-size: calc(var(--u) * 9); }
.f-ios .gt-cap b { font-size: calc(var(--u) * 17); }

/* ================================================================ the guitar B+ (D237): design/guitar2/guitar2.css */
/* The guitar comes together, round 2 (owner chose B, the music spiral: "much better, more premium, more effective, far
   more professional"). Layers: the dimmed world, a turning vortex of the seven colours, light rays from above, the pages
   spiralling in with tails of light, a flare, the guitar drawn in light, then the real guitar takes its place. */
.g2 { position: absolute; inset: 0; overflow: hidden; }
.g2-world { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; transform-origin: 50% 45%; }
.g2-veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(45% 60% at 50% 46%, rgba(40, 14, 70, .35), rgba(14, 4, 28, .9));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.g2-stage { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.g2-stage > * { position: absolute; left: 0; top: 0; translate: -50% -50%; pointer-events: none; }
.g2-vortex { width: calc(var(--u) * 980); height: calc(var(--u) * 980); opacity: 0; mix-blend-mode: screen; background: url('../art/fx/gt-vortex.webp') center / contain no-repeat; }
.g2-rays { width: calc(var(--u) * 1100); height: calc(var(--u) * 990); translate: -50% -70% !important; opacity: 0; mix-blend-mode: screen; background: url('../art/fx/fx-rays.webp') center top / contain no-repeat; }
.g2-flash { width: calc(var(--u) * 1400); height: calc(var(--u) * 1400); opacity: 0; mix-blend-mode: screen; background: radial-gradient(closest-side, #fff, rgba(255, 240, 200, .9) 18%, rgba(255, 200, 110, .35) 45%, transparent 70%); }
.g2-burst { width: calc(var(--u) * 1000); height: calc(var(--u) * 1000); opacity: 0; mix-blend-mode: screen; background: url('../art/fx/burst.webp') center / contain no-repeat; }
.g2-ring { width: calc(var(--u) * 700); height: calc(var(--u) * 700); opacity: 0; mix-blend-mode: screen; background: url('../art/fx/ring.webp') center / contain no-repeat; }
.g2-page { width: calc(var(--u) * 260); opacity: 0; filter: drop-shadow(0 0 calc(var(--u) * 16) rgba(255, 220, 140, .7)) drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(20, 6, 40, .5)); }
.g2-page img { display: block; width: 100%; height: auto; }
.g2-gt { width: calc(var(--u) * 230); aspect-ratio: 364 / 900; opacity: 0; }
.g2-gt img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g2-gt .light { mix-blend-mode: screen; filter: drop-shadow(0 0 calc(var(--u) * 18) rgba(255, 210, 120, .9)); }
.g2-gt .real { opacity: 0; filter: drop-shadow(0 0 calc(var(--u) * 30) rgba(255, 205, 110, .65)) drop-shadow(0 calc(var(--u) * 20) calc(var(--u) * 24) rgba(10, 2, 24, .6)); }
.g2-gt .sheen { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  -webkit-mask: url('../art/fx/guitar.webp') center / 100% 100% no-repeat; mask: url('../art/fx/guitar.webp') center / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent 43%, rgba(255, 250, 225, .5) 47%, rgba(255, 252, 235, .95) 50%, rgba(255, 250, 225, .5) 53%, transparent 57%); background-size: 100% 300%; }
.f-ios .g2-vortex { width: calc(var(--u) * 440); height: calc(var(--u) * 440); }
.f-ios .g2-rays { width: calc(var(--u) * 500); height: calc(var(--u) * 450); }
.f-ios .g2-flash { width: calc(var(--u) * 640); height: calc(var(--u) * 640); }
.f-ios .g2-burst { width: calc(var(--u) * 460); height: calc(var(--u) * 460); }
.f-ios .g2-ring { width: calc(var(--u) * 320); height: calc(var(--u) * 320); }
.f-ios .g2-page { width: calc(var(--u) * 120); }
.f-ios .g2-gt { width: calc(var(--u) * 92); }

/* ---------------------------------------------------------------- B+ polish (D237) */
.g2-cam { position: absolute; inset: 0; transform-origin: 50% 46%; }
.g2-vortex2 { width: calc(var(--u) * 760); height: calc(var(--u) * 760); opacity: 0; mix-blend-mode: screen; background: url('../art/fx/gt-vortex.webp') center / contain no-repeat; scale: -1 1; filter: hue-rotate(25deg) saturate(1.2); }
.g2-vig { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(48% 62% at 50% 46%, transparent 35%, rgba(8, 2, 20, .72) 100%); }
.g2-streak { width: calc(var(--u) * 1800); height: calc(var(--u) * 46); opacity: 0; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 1), rgba(255, 236, 190, .7) 18%, rgba(255, 200, 120, .25) 45%, transparent 70%); filter: blur(calc(var(--u) * 2)); }
.g2-ring2 { filter: sepia(.5) saturate(2.4) hue-rotate(-12deg) brightness(1.2); }
.g2-rays { transform-origin: 50% 0; }
.f-ios .g2-vortex2 { width: calc(var(--u) * 340); height: calc(var(--u) * 340); }
.f-ios .g2-streak { width: calc(var(--u) * 800); height: calc(var(--u) * 22); }
.f-ios .g2-vig { background: radial-gradient(48% 62% at 50% 46%, transparent 35%, rgba(8, 2, 20, .72) 100%); }

/* ================================================================ the Music Box (round 1 base): design/box/box.css */
/* Mark's MUSIC BOX (D236, D231): his collection, opened from his goal in the tablet. Ten cells for the ten instruments
   (D171), three card slots each. A = the garden music box, B = the grand piano box, C = the starlight jewel box. */
.bx { position: absolute; inset: 0; overflow: hidden; }
.bx-bg { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; filter: blur(calc(var(--u) * 6)) brightness(.78); }
.bx-dim { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(40, 14, 70, .35), rgba(20, 6, 40, .78)); opacity: 0; }

/* the tablet (the game's own Glass tablet in the paws, d174-c) with Mark's goal card on My Adventures */
.bx-tab { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 1672 / 941; translate: -50% 0; transform-origin: 50% 70%; }
.bx-tab > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.bx-scr { position: absolute; left: 15.37%; top: 9.99%; width: 69.14%; height: 69.4%; border-radius: 2.2% / 4%; overflow: hidden; z-index: 1; container-type: inline-size;
  background: radial-gradient(120% 90% at 20% 0%, #5b2ca0, #2c1258 60%, #1f0d44); --s: calc(100cqw / 1000); }
.bx-scr header { position: absolute; left: calc(var(--s) * 36); top: calc(var(--s) * 30); display: flex; align-items: center; gap: calc(var(--s) * 18); }
.bx-scr header i { width: calc(var(--s) * 54); height: calc(var(--s) * 54); border-radius: 50%; background: rgba(255, 255, 255, .12) url('../../../engine/icons/back.webp') center / 58% no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.bx-scr header img { width: calc(var(--s) * 60); height: calc(var(--s) * 60); object-fit: contain; }
.bx-scr header b { font: 1000 calc(var(--s) * 38)/1 "Nunito", sans-serif; color: #fff8ec; }
.bx-goal { position: absolute; left: 50%; top: calc(var(--s) * 120); translate: -50% 0; width: calc(var(--s) * 560); padding: calc(var(--s) * 24) calc(var(--s) * 28); border-radius: calc(var(--s) * 26);
  background: linear-gradient(180deg, rgba(126, 64, 200, .55), rgba(70, 28, 130, .6)); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 120, .55), 0 calc(var(--s) * 10) calc(var(--s) * 30) rgba(10, 0, 30, .4); }
.bx-goal .chip { display: inline-block; padding: calc(var(--s) * 6) calc(var(--s) * 14); border-radius: 999px; background: #ffd56b; color: #4a2600; font: 1000 calc(var(--s) * 17)/1 "Nunito", sans-serif; }
.bx-goal .row { display: flex; align-items: center; gap: calc(var(--s) * 18); margin-top: calc(var(--s) * 16); }
.bx-goal .row img { width: calc(var(--s) * 110); height: calc(var(--s) * 110); object-fit: cover; object-position: 50% 10%; border-radius: 50%; background: #f4dcc4; box-shadow: inset 0 0 0 3px #fff; }
.bx-goal h3 { margin: 0; font: 1000 calc(var(--s) * 34)/1.1 "Nunito", sans-serif; color: #fff8ec; }
.bx-goal p { margin: calc(var(--s) * 6) 0 0; font: 800 calc(var(--s) * 20)/1.3 "Nunito", sans-serif; color: #e2d4ff; }
.bx-goal .btns { display: flex; gap: calc(var(--s) * 14); margin-top: calc(var(--s) * 20); }
.bx-goal button { flex: 1; height: calc(var(--s) * 64); border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--s) * 23)/1 "Nunito", sans-serif; }
.bx-goal .open { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(176, 96, 0, .45), 0 6px 14px rgba(20, 0, 40, .35); }
.bx-goal .focus { color: #fff8ec; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }

/* the box itself: it rises out of the tablet toward the child */
.bx-stage { position: absolute; inset: 0; pointer-events: none; }
.bx-box { position: absolute; left: 50%; top: 53%; height: calc(var(--u) * 700); translate: -50% -50%; opacity: 0; transform-origin: 50% 50%; pointer-events: auto; }
.bx-box.v-b { top: 54%; height: calc(var(--u) * 690); }
.f-ios .bx-box { height: calc(var(--u) * 296); top: 54%; }
.bx-zoom { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.3, .9, .3, 1); }
.bx-box > .bx-zoom > img.body { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * 24) calc(var(--u) * 40) rgba(10, 0, 30, .55)); }
.bx-inner { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(40% 22% at 50% 52%, rgba(255, 226, 150, .55), transparent 70%); mix-blend-mode: screen; }
.bx-sparks { position: absolute; left: 50%; top: 40%; width: 70%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: url('../art/fx/sparkles.webp') center / contain no-repeat; }

/* a cell: the instrument's engraved ghost, three card slots, the instrument when whole */
.bx-cell { position: absolute; cursor: pointer; pointer-events: auto; }
.bx-cell .in { position: absolute; inset: 6% 5%; rotate: var(--rot, 0deg); }
.bx-ghost { position: absolute; left: 50%; top: 50%; max-width: 74%; max-height: 74%; translate: -50% -50%; opacity: .2; filter: grayscale(1) brightness(1.9) sepia(.5) hue-rotate(-20deg); mix-blend-mode: soft-light; }
.bx-cell.whole .bx-ghost { opacity: 0; }
.bx-slots { position: absolute; left: 6%; right: 6%; bottom: 10%; height: 68%; display: flex; justify-content: center; align-items: flex-end; gap: 6%; }
.bx-slot { position: relative; width: 26%; aspect-ratio: 558 / 626; }
.bx-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4%; opacity: 0; translate: 0 18%; scale: .6;
  box-shadow: 0 2px 4px rgba(20, 0, 30, .45); transition: opacity .4s, translate .55s cubic-bezier(.3, 1.5, .4, 1), scale .55s cubic-bezier(.3, 1.5, .4, 1); }
.bx-slot.on img { opacity: 1; translate: 0 0; scale: 1; }
.bx-slot:nth-child(1) img { rotate: -5deg; }
.bx-slot:nth-child(3) img { rotate: 5deg; }
.bx-cell.whole .bx-slot img { opacity: 0; scale: .4; translate: 0 -30%; }
.bx-glow { position: absolute; inset: -12%; border-radius: 30%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 232, 160, .9), rgba(255, 197, 61, .35) 55%, transparent); }
.bx-cell.ready .bx-glow { opacity: .55; animation: bxpulse 2.2s ease-in-out infinite; }
.bx-cell.whole .bx-glow { opacity: .75; animation: bxpulse 3s ease-in-out infinite; }
@keyframes bxpulse { 0%, 100% { opacity: .35; scale: .96; } 50% { opacity: .85; scale: 1.04; } }
/* the guitar lying in its cell (the long axis across the cell) */
.bx-inst { position: absolute; left: 50%; top: 52%; width: 96%; aspect-ratio: 900 / 364; translate: -50% -50%; opacity: 0; }
.bx-cell.whole .bx-inst { opacity: 1; animation: bxbob 3.2s ease-in-out infinite; }
@keyframes bxbob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6%) rotate(1.5deg); } }
.bx-inst .g { position: absolute; left: 50%; top: 50%; width: 40.44%; aspect-ratio: 364 / 900; translate: -50% -50%; rotate: -90deg; }
.bx-inst .g img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .75)); }
.bx-inst .g .sheen { position: absolute; inset: 0; mix-blend-mode: screen; -webkit-mask: url('../art/fx/guitar.webp') center / 100% 100% no-repeat; mask: url('../art/fx/guitar.webp') center / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent 30%, rgba(255, 250, 220, .95) 50%, transparent 70%); background-size: 100% 300%; animation: bxsheen 3.4s ease-in-out infinite; }
@keyframes bxsheen { 0% { background-position: 0 120%; } 60%, 100% { background-position: 0 -20%; } }
.bx-mote { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--c) 70%, transparent); }

/* a word about the cell when the child points at it */
.bx-tip { position: absolute; z-index: 30; translate: -50% -100%; padding: calc(var(--u) * 10) calc(var(--u) * 20); border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 244, 226, .95)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); transition: opacity .2s; }
.bx-tip.on { opacity: 1; }
.bx-tip b { font: 1000 calc(var(--u) * 24)/1 "Nunito", sans-serif; color: var(--ink); }
.bx-tip small { margin-left: calc(var(--u) * 10); font: 1000 calc(var(--u) * 17)/1 "Nunito", sans-serif; color: var(--violet); }
.f-ios .bx-tip { padding: calc(var(--u) * 5) calc(var(--u) * 11); }
.f-ios .bx-tip b { font-size: calc(var(--u) * 15); }
.f-ios .bx-tip small { font-size: calc(var(--u) * 10); }

/* the header over the box, and the way back */
.bx-head { position: absolute; left: 50%; top: calc(var(--u) * 26); translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: calc(var(--u) * 16); opacity: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 34) calc(var(--u) * 10) calc(var(--u) * 12); border-radius: 999px;
  background: linear-gradient(180deg, rgba(92, 44, 150, .82), rgba(58, 22, 104, .88)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 210, 120, .4), var(--sh-1); }
.bx-head img { width: calc(var(--u) * 62); height: calc(var(--u) * 62); object-fit: contain; }
.bx-head span { display: flex; flex-direction: column; line-height: 1.05; }
.bx-head small { font: 1000 calc(var(--u) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: #ffd56b; }
.bx-head b { font: 1000 calc(var(--u) * 32)/1.1 "Nunito", sans-serif; color: var(--cream); margin-top: calc(var(--u) * 4); }
.bx-close { position: absolute; right: calc(var(--u) * 30); top: calc(var(--u) * 26); z-index: 20; width: calc(var(--u) * 76); height: calc(var(--u) * 76); border: 0; border-radius: 50%; cursor: pointer; opacity: 0;
  background: linear-gradient(180deg, #fffdf7, #f3e9da) ; box-shadow: inset 0 calc(var(--u) * -4) 0 rgba(160, 110, 40, .3), var(--sh-1); }
.bx-close img { width: 52%; height: 52%; object-fit: contain; }
.bx-close kbd { position: absolute; left: 50%; bottom: calc(var(--u) * -14); translate: -50% 0; }
.bx-promise { position: absolute; left: 50%; bottom: calc(var(--u) * 22); translate: -50% 0; z-index: 20; opacity: 0; font: 900 calc(var(--u) * 22)/1.2 "Nunito", sans-serif; color: #f1e6ff;
  text-shadow: 0 2px 8px rgba(20, 0, 40, .7); white-space: nowrap; }
.f-ios .bx-head { top: calc(var(--u) * 8); gap: calc(var(--u) * 8); padding: calc(var(--u) * 5) calc(var(--u) * 18) calc(var(--u) * 5) calc(var(--u) * 6); }
.f-ios .bx-head img { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.f-ios .bx-head small { font-size: calc(var(--u) * 8); letter-spacing: calc(var(--u) * 1.5); }
.f-ios .bx-head b { font-size: calc(var(--u) * 16.5); margin-top: calc(var(--u) * 2); }
.f-ios .bx-close { right: calc(var(--u) * 62); top: calc(var(--u) * 10); width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.f-ios .bx-close kbd { display: none; }
.f-ios .bx-promise { bottom: calc(var(--u) * 18); font-size: calc(var(--u) * 12); }

/* the box sits left of centre; on the right a cream plaque shows the cell the child picked, big enough to read */
.bx-box { left: 39%; }
.f-ios .bx-box { left: 37%; }
.bx-plq { position: absolute; left: 70.5%; top: 52%; width: calc(var(--u) * 420); translate: 0 -50%; z-index: 18; opacity: 0; text-align: center;
  padding: calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 28); border-radius: calc(var(--u) * 36);
  background: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 244, 226, .95)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, inset 0 0 0 calc(var(--u) * 2) rgba(255, 197, 61, .5), var(--sh-2); }
.bx-plq small { font: 1000 calc(var(--u) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: var(--violet); }
.bx-plq h3 { margin: calc(var(--u) * 8) 0 calc(var(--u) * 4); font: 1000 calc(var(--u) * 44)/1.05 "Nunito", sans-serif; color: var(--ink); }
.bx-plq .art { position: relative; height: calc(var(--u) * 250); margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); }
.bx-plq .art img.inst { position: absolute; left: 50%; top: 50%; max-width: 92%; max-height: 100%; translate: -50% -50%; filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(50, 15, 80, .35)); }
.bx-plq.dim .art img.inst { filter: grayscale(1) brightness(1.6) sepia(.35) opacity(.35); }
.bx-plq.whole .art img.inst { filter: drop-shadow(0 0 calc(var(--u) * 18) rgba(255, 205, 110, .8)) drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(50, 15, 80, .35)); animation: bxbob2 3.2s ease-in-out infinite; }
@keyframes bxbob2 { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5%) rotate(2deg); } }
.bx-plq .art .halo { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; mix-blend-mode: multiply; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 210, 120, .55), transparent 70%); }
.bx-plq.whole .art .halo { opacity: 1; }
.bx-plq .slots { display: flex; justify-content: center; gap: calc(var(--u) * 14); }
.bx-plq .slots span { position: relative; width: calc(var(--u) * 96); aspect-ratio: 558 / 626; border-radius: calc(var(--u) * 10);
  background: rgba(91, 42, 134, .07); box-shadow: inset 0 0 0 calc(var(--u) * 2.5) rgba(196, 150, 60, .55); }
.bx-plq .slots span::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: calc(var(--u) * 2) dashed rgba(196, 150, 60, .55); }
.bx-plq .slots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--u) * 8); z-index: 1; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 8) rgba(50, 15, 80, .3); }
.bx-plq p { margin: calc(var(--u) * 14) 0 0; font: 900 calc(var(--u) * 22)/1.25 "Nunito", sans-serif; color: #5b3b78; }
.f-ios .bx-plq { left: 67%; width: calc(var(--u) * 196); padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12); border-radius: calc(var(--u) * 18); }
.f-ios .bx-plq small { font-size: calc(var(--u) * 8); letter-spacing: calc(var(--u) * 1.5); }
.f-ios .bx-plq h3 { font-size: calc(var(--u) * 22); margin: calc(var(--u) * 3) 0 calc(var(--u) * 2); }
.f-ios .bx-plq .art { height: calc(var(--u) * 92); margin: calc(var(--u) * 2) 0 calc(var(--u) * 6); }
.f-ios .bx-plq .slots { gap: calc(var(--u) * 6); }
.f-ios .bx-plq .slots span { width: calc(var(--u) * 44); border-radius: calc(var(--u) * 5); }
.f-ios .bx-plq p { font-size: calc(var(--u) * 11); margin-top: calc(var(--u) * 6); }
.bx-cell.sel .bx-glow { opacity: .9; }
/* the whole guitar stands up out of its cell, larger than the cell, alive */
.bx-cell.whole .bx-inst { width: 150%; top: 30%; }

/* ================================================================ the Music Box A+ (D237): design/box2/box2.css */
/* Music Box round 2 (A, the Garden Music Box): planes laid on each compartment floor (perspective maps from the art). */
.bx-px { position: absolute; left: 0; top: 0; width: 1317px; height: 1094px; transform-origin: 0 0; pointer-events: none; }
.bx-plane { position: absolute; left: 0; top: 0; width: 1000px; height: 640px; transform-origin: 0 0; opacity: 0; }
.bx-ghost2 { position: absolute; left: 50%; top: 50%; max-width: 80%; max-height: 82%; translate: -50% -50%; opacity: .3; filter: grayscale(1) sepia(1) saturate(1.6) brightness(1.15); }
.bx-plane.whole .bx-ghost2 { opacity: 0; }
.bx-g2 { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.bx-plane.whole .bx-g2 { opacity: 1; }
.bx-shplane { opacity: 1; }
.bx-shplane .shadow { position: absolute; left: 4%; right: 4%; top: 34%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 0, 15, .75), transparent); filter: blur(16px); opacity: 0; }
.bx-shplane.whole .shadow { opacity: 1; }
.bx-drop { position: absolute; left: 0; top: 0; width: 1317px; height: 1094px; pointer-events: none; }
.bx-g2 .g { position: absolute; left: 50%; top: 50%; width: 390px; height: 965px; translate: -50% -50%; rotate: -90deg; }
.bx-g2 .g img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(-10px 0 8px rgba(40, 0, 20, .6)) drop-shadow(0 0 18px rgba(255, 214, 130, .8)) saturate(1.12) contrast(1.05); }
.bx-g2 .g .sheen { position: absolute; inset: 0; mix-blend-mode: screen;
  -webkit-mask: url('../art/fx/guitar.webp') center / 100% 100% no-repeat; mask: url('../art/fx/guitar.webp') center / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent 43%, rgba(255, 250, 220, .45) 47%, rgba(255, 252, 232, .9) 50%, rgba(255, 250, 220, .45) 53%, transparent 57%); background-size: 100% 300%; opacity: .75; animation: bx2sheen 4.2s ease-in-out infinite; }
@keyframes bx2sheen { 0% { background-position: 0 120%; } 55%, 100% { background-position: 0 -20%; } }
.bx-plane.whole .bx-g2 { animation: bx2glow 2.8s ease-in-out infinite; }
@keyframes bx2glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
/* the old in-cell guitar and ghost are replaced by the planes */
.bx-cell .bx-inst, .bx-cell .bx-ghost { display: none; }
.bx-cell.whole .bx-slots { opacity: 0; }
.bx-spot { position: absolute; left: 20%; top: 46%; width: 34%; aspect-ratio: 1.4; translate: -50% -50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 236, 180, .3), rgba(255, 200, 100, .08) 60%, transparent); animation: bx2spot 3.2s ease-in-out infinite; }
@keyframes bx2spot { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
.bx-rays { position: absolute; left: 50%; top: 55%; width: 90%; aspect-ratio: 1089 / 979; translate: -50% -100%; opacity: 0; pointer-events: none; mix-blend-mode: screen; transform-origin: 50% 100%;
  background: url('../art/fx/fx-rays-up.webp') center / 100% 100% no-repeat; }

/* ---------------------------------------------------------------- A+ entrance (D237): closed cover, swinging lid, spilled light */
.bx-box > .bx-zoom > img.lid, .bx-box > .bx-zoom > img.cover { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 51% 41.7%; backface-visibility: hidden; }
.bx-box > .bx-zoom > img.lid { filter: drop-shadow(0 calc(var(--u) * -4) calc(var(--u) * 14) rgba(10, 0, 30, .35)); }
.bx-box > .bx-zoom > img.cover { z-index: 3; }
.bx-seam { position: absolute; left: .5%; top: 62.6%; width: 88.6%; height: 2.2%; rotate: 2.75deg; transform-origin: 0 50%; opacity: 0; pointer-events: none; z-index: 4; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 252, 230, 1), rgba(255, 214, 120, .7) 45%, transparent); filter: blur(calc(var(--u) * 3)); box-shadow: 0 0 calc(var(--u) * 30) calc(var(--u) * 6) rgba(255, 205, 110, .45); }
.bx-shadow { position: absolute; left: 6%; right: 10%; bottom: -3.5%; height: 9%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 0, 20, .7), rgba(8, 0, 20, .3) 60%, transparent); filter: blur(calc(var(--u) * 6)); }
.bx-flash { position: absolute; inset: 0; z-index: 11; opacity: 0; pointer-events: none; mix-blend-mode: screen; --fx: 50%; --fy: 50%;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(255, 250, 230, .95), rgba(255, 222, 150, .5) calc(var(--u) * 140), rgba(255, 200, 110, .12) calc(var(--u) * 420), transparent calc(var(--u) * 760)); }
.bx-scrglow { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 70% at 50% 55%, rgba(255, 246, 220, .95), rgba(255, 210, 130, .45) 50%, transparent 80%); }
.bx-beam { position: absolute; left: 50%; bottom: 40%; width: 44%; height: 120%; translate: -50% 0; opacity: 0; pointer-events: none; z-index: 6; transform-origin: 50% 100%; mix-blend-mode: screen;
  background: url('../art/fx/fx-rays-up.webp') center / 100% 100% no-repeat; }
.bx-rays { transform-origin: 50% 100%; }
.f-ios .bx-flash { background: radial-gradient(circle at var(--fx) var(--fy), rgba(255, 250, 230, .95), rgba(255, 222, 150, .5) calc(var(--u) * 60), rgba(255, 200, 110, .12) calc(var(--u) * 190), transparent calc(var(--u) * 340)); }
.f-ios .bx-seam { filter: blur(calc(var(--u) * 1.4)); box-shadow: 0 0 calc(var(--u) * 13) calc(var(--u) * 3) rgba(255, 205, 110, .45); }
.f-ios .bx-shadow { filter: blur(calc(var(--u) * 2.6)); }

/* ---------------------------------------------------------------- the key, the mechanism and the light (owner note on mark-cf-box) */
/* the key's turning part (nut and bow) on its own layer; it turns on its stem: a horizontal axis at y 782 of 1094 */
.bx-box > .bx-zoom > img.key { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 94% 71.5%; z-index: 2; }
/* a gold glint that runs over the box (masked by the box itself), and one over the lid */
.bx-glint { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  -webkit-mask: url('../art/box/a-body.webp') center / 100% 100% no-repeat; mask: url('../art/box/a-body.webp') center / 100% 100% no-repeat;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 246, 214, .55) 48%, rgba(255, 252, 238, .9) 50%, rgba(255, 246, 214, .55) 52%, transparent 58%) 130% 0 / 320% 100% no-repeat; }
.bx-glint.lidg { -webkit-mask-image: url('../art/box/a-lid.webp'); mask-image: url('../art/box/a-lid.webp'); }
/* the mechanism behind the glass: a warm glow, the drum turning (its pins catch the light as they come round), the comb */
.bx-mech { position: absolute; inset: 0; pointer-events: none; }
.bx-mech i { position: absolute; rotate: 2.2deg; opacity: 0; transition: opacity 1.2s ease; mix-blend-mode: screen; }
.bx-mech .win { left: 21.3%; top: 69%; width: 44.4%; height: 16.5%; border-radius: 30%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 226, 150, .55), rgba(255, 200, 110, .2) 60%, transparent 100%); animation: bxwin 3.2s ease-in-out infinite alternate; }
@keyframes bxwin { from { filter: brightness(.85); } to { filter: brightness(1.2); } }
.bx-mech .drum { left: 35.1%; top: 72%; width: 21.9%; height: 8.4%;
  background: radial-gradient(closest-side, rgba(255, 250, 225, .95) 0 30%, transparent 70%) 0 0 / 4.5% 12.5%;
  -webkit-mask: linear-gradient(180deg, transparent 4%, #000 30%, #000 62%, transparent 96%); mask: linear-gradient(180deg, transparent 4%, #000 30%, #000 62%, transparent 96%);
  animation: bxdrum 7s linear infinite; }
.bx-mech .drum.d2 { background-size: 7.2% 8.333%; background-position: 2.3% 0; animation-name: bxdrum2; animation-duration: 11s; }
@keyframes bxdrum { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes bxdrum2 { from { background-position: 2.3% 0%; } to { background-position: 2.3% 100%; } }
.bx-mech .comb { left: 35.7%; top: 79%; width: 20.5%; height: 3.7%;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 225, .9), transparent) 0 0 / 22% 100% no-repeat; animation: bxcomb 2.4s ease-in-out infinite; }
@keyframes bxcomb { from { background-position: -30% 0; } to { background-position: 130% 0; } }
.bx-mech.on .win { opacity: 1; }
.bx-mech.on .drum { opacity: .45; }
.bx-mech.on .drum.d2 { opacity: .3; }
.bx-mech.on .comb { opacity: .55; }
/* the light that spills: a warm pool on the ground, a warm glow round the box, a streak across the lens */
.bx-pool { position: absolute; left: -12%; right: -12%; bottom: -16%; height: 36%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .5), rgba(255, 190, 110, .16) 58%, transparent); }
.bx-amb { position: absolute; inset: -38% -30%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(40% 42% at 50% 48%, rgba(255, 220, 150, .32), rgba(255, 190, 110, .1) 55%, transparent 80%); animation: bxamb 4s ease-in-out infinite alternate; }
@keyframes bxamb { from { scale: 1; } to { scale: 1.05; } }
.bx-streak { position: absolute; left: -25%; width: 150%; top: 55%; height: 7%; opacity: 0; pointer-events: none; mix-blend-mode: screen; border-radius: 50%; z-index: 5;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 250, .95), rgba(255, 232, 180, .5) 22%, rgba(255, 200, 120, .15) 48%, transparent 72%); }

/* ================================================================ in the game: where the moments sit (the engineer) */
/* the spots on the map move with the map, under the HUD; the film's light, the close-up and the goal over it */
.mk-find-world { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.mk-find-world .cd-spot[hidden] { display: none; }
.mk-find { position: absolute; inset: 0; z-index: 13; pointer-events: none; overflow: hidden; }
/* the find's card pops and rises in this layer, over the whole map (owner 2026-10-27: it rose through the playground
   and against the hero; the light fell on the houses): a CARRIER beside the hero, never over him, takes the way up; the
   card inside it (.cd-page) does the squash, stretch and spin and carries its own light in its .cd-lit (glow, flash,
   ring, sparkle), the card's size, on its face */
.mk-find .cd-pop { position: absolute; z-index: 17; width: calc(var(--u) * 96); translate: -50% -50%; pointer-events: none; opacity: 0; }
.mk-find.f-ios .cd-pop { width: calc(var(--u) * 46); }
.cd-pop .cd-page { position: relative; width: 100%; opacity: 1; }
.cd-pop .cd-lit .cd-flash { width: 130%; height: auto; aspect-ratio: 1; }
.cd-pop .cd-lit .cd-ring { width: 110%; height: auto; aspect-ratio: 1; }
.cd-pop-glow { width: 125%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 251, 236, .98), rgba(255, 226, 160, .6) 40%, rgba(255, 200, 110, .2) 72%, transparent); }
.cd-sparkle { width: 92%; aspect-ratio: 461 / 496; opacity: 0; background: url('../art/fx/sparkles.webp') center / contain no-repeat; }
.mk-find .cd-close, .mk-find .cd-goal { pointer-events: none; }
/* the guitar comes together over the dimmed map; its veil dims the HUD as the card film's does (the avatar, the tablet,
   the iPhone's paws), so Continue is the one thing lit and a tap on it is never a paw's (the inspector's finding
   2026-10-26: the right paw was drawn over Continue and took the tap). Its cards still fly out of the tablet's place. */
.mk-g2 { z-index: 13; }
.mk-g2 [data-go] { z-index: 14; }
/* the Music Box: over Mark's studio (its own layer), or over the tablet in My Adventures */
.mk-bx { position: absolute; inset: 0; z-index: 40; }
.mks .mk-bx { z-index: 1; }
.mk-bx .pxs-go { z-index: 22; }
/* Mark's lines while the box is open (beat 9): Mark at the foot and his cloud, the studio's look */
.bx-say { position: absolute; inset: 0; z-index: 21; pointer-events: none; }
.bx-say[hidden] { display: none; }
.bx-say > * { pointer-events: auto; }
.bx-mark { position: absolute; left: calc(var(--u) * 20); bottom: calc(var(--u) * -40); width: calc(var(--u) * 300); aspect-ratio: 595 / 764; transform-origin: 50% 100%; pointer-events: none !important;
  filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(40, 10, 60, .4)); }
.bx-mark .br { position: absolute; inset: 0; transform-origin: 50% 100%; animation: mksBreath 3.7s ease-in-out infinite; }
.bx-mark img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
/* (his cloud sits low, under the box's ten rooms: the inspector's finding 2026-10-26, it covered the bottom row while he
   said "Ten little rooms") */
.bx-cloud { position: absolute; left: calc(var(--u) * 270); bottom: calc(var(--u) * 30); max-width: calc(var(--u) * 560); z-index: 2;
  padding: calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * 18); border-radius: calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 10);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .94)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); transform-origin: 0 100%; }
.bx-cloud .nm { display: block; font: 1000 calc(var(--u) * 16)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: var(--violet); }
.bx-cloud .ln { display: block; margin-top: calc(var(--u) * 8); font: 1000 calc(var(--u) * 30)/1.15 "Nunito", sans-serif; color: var(--ink); }
.bx-say.in .bx-cloud { animation: bxSayIn .46s cubic-bezier(.2, .8, .2, 1); }
@keyframes bxSayIn { from { opacity: .2; transform: scale(.9) translateY(6%); } 60% { opacity: 1; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.f-ios .bx-mark { left: calc(var(--u) * 40); bottom: calc(var(--u) * -20); width: calc(var(--u) * 130); }
.f-ios .bx-cloud { left: calc(var(--u) * 150); bottom: calc(var(--u) * 12); max-width: calc(var(--u) * 390); padding: calc(var(--u) * 9) calc(var(--u) * 14) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 6); }
.f-ios .bx-cloud .nm { font-size: calc(var(--u) * 9); letter-spacing: calc(var(--u) * 2); }
.f-ios .bx-cloud .ln { font-size: calc(var(--u) * 15); margin-top: calc(var(--u) * 4); }
/* (while Mark speaks over the box, the promise line under it steps aside for his words) */
.mk-bx:has(.bx-say:not([hidden])) .bx-promise { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .bx-mark .br, .bx-say.in .bx-cloud { animation: none; } }
/* (the talk under the box waits hidden: Mark speaks in the box's own cloud) */
.game.mk-boxing .modal-layer:has(.premium-dialogue) { visibility: hidden; }
/* (and the studio's own Back / Leave and labels step aside under the box) */
.game.mk-boxing .mks-ui, .game.mk-boxing .mks-marks { visibility: hidden; }
/* the guitar's room in the box after its trail (D236, the lead's finding 2026-10-26: "full and alive" must read at a
   glance): its cell glows warm and breathes, the guitar lies in it a little larger, its sheen running */
.mk-bx .bx-cell.whole .bx-glow { inset: -34%; opacity: 1; background: radial-gradient(closest-side, rgba(255, 244, 200, .95), rgba(255, 205, 100, .6) 42%, rgba(255, 190, 80, .18) 66%, transparent 78%);
  animation: bxpulse 2.4s ease-in-out infinite; }
.mk-bx .bx-plane.whole .bx-g2 .g { scale: 1.14; }
.mk-bx .bx-plane.whole .bx-g2 .g img { filter: drop-shadow(-10px 0 8px rgba(40, 0, 20, .6)) drop-shadow(0 0 26px rgba(255, 220, 140, 1)) saturate(1.18) contrast(1.06) brightness(1.08); }