/* Mark's Sound & Colour console, the Glass look (D237): the view (console-view.js) and the trail around it
   (console-trail.js). Sizes of the words and buttons in the game's --u (Windows min(w/1600, h/900), iPhone w/844);
   everything on the console lives in its own plane (plan units, laid on by a matrix3d), so it scales with the plate. */

/* ------------------------------------------------------------------------------------------------ the console view */
.cv { position: absolute; inset: 0; overflow: hidden; background: #2a2440; --lv: 0; --kl: .2; --kc: #fff; touch-action: none; }
.cv-stage { position: absolute; left: 0; top: 0; width: 1860px; height: 846px; transform-origin: 0 0; }
.cv-far, .cv-near { position: absolute; inset: 0; transform-origin: 50% 50%; }
/* Mark's studio behind the console (room A): the still picture first, the living renderer over it once it runs */
.cv-far .cv-desk { position: absolute; left: 0; top: 0; width: 1860px; height: 320px; }
.cv-living { position: absolute; left: 0; top: 0; width: 1860px; height: 320px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.cv.living .cv-living { opacity: 1; }
.cv-tintg { will-change: opacity; }
.cv-nearimg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-stage img { user-select: none; -webkit-user-drag: none; }
.cv-plane { position: absolute; left: 0; top: 0; width: 1196px; height: 799px; transform-origin: 0 0; pointer-events: none; }
.cv-padplane { pointer-events: none; }
.cv-svg { display: block; overflow: visible; pointer-events: none; }
.cv-g { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
/* light on the glass and the stone: a tint (normal, so a white surface takes the colour) and a bloom (screen, light adds) */
.cv-tintplane { mix-blend-mode: normal; }
.cv-tintg { background: radial-gradient(closest-side, var(--c), transparent 78%); opacity: .34; }
.cv-screenplane { mix-blend-mode: screen; }
.cv-bloom { background: radial-gradient(closest-side, var(--c) 0%, var(--c2) 30%, rgba(0, 0, 0, 0) 74%); opacity: 0; }
.cv-spill { background: radial-gradient(closest-side, var(--c), transparent 80%); opacity: 0; }
.cv-front { background: radial-gradient(closest-side, var(--c), transparent 80%); opacity: .2; }
.cv-ripples-under circle, .cv-ripples-over circle { pointer-events: none; }
.cv-motes { position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: screen; }

/* the pads: frosted glass lit from inside; --lv (0 rest .. 1 sung) drives the light, the symbol and the halo */
.cv-pad { pointer-events: auto; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.cv-pad .cv-top { transform-box: view-box; }
.cv-pad .cv-face { opacity: .96; }
.cv-pad .cv-lit { opacity: calc(var(--lv) * 1.25 - .1); }
.cv-pad .cv-sheen { opacity: .5; }
.cv-pad .cv-halo { opacity: calc(var(--lv) * 1.25 - .12); }
.cv-pad .cv-halo2 { opacity: calc(.3 + var(--lv) * 1.1); }
.cv-pad .cv-aura { opacity: calc(var(--lv) * .95 - .06); }
.cv-pad .cv-sym { opacity: calc(1 - var(--lv) * .85); filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)); }
.cv-pad .cv-symlit { opacity: calc(var(--lv) * 1.15 - .05); }
.cv-pad .cv-hintring { opacity: 0; transition: opacity .4s; }
.cv-pad.hint .cv-hintring { opacity: .9; animation: cvHint 1.25s ease-in-out infinite; }
@keyframes cvHint { 0%, 100% { stroke-opacity: .35; } 50% { stroke-opacity: 1; } }
.cv-pad:focus-visible .cv-hintring { opacity: .7; }

/* the ring track and its numbers (also the keys 1-7); a faint deep line under the white one, so it reads on the glass */
.cv-track-under path { fill: none; stroke: rgba(44, 48, 92, .22); stroke-width: 4.6; stroke-linecap: round; }
.cv-track path { fill: none; stroke: rgba(255, 255, 255, .96); stroke-width: 2.4; stroke-linecap: round; }
.cv-tint { opacity: 0; }
.cv-tint path { fill: none; stroke: var(--c); stroke-width: 3.6; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--c)); }
.cv-num { font: 800 30px/1 "Nunito", sans-serif; text-anchor: middle; fill: rgb(56, 60, 104); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3.2px;
  transition: fill .25s; }
.cv-num.on { fill: var(--cd); filter: drop-shadow(0 0 6px var(--c)); }

/* the knob and its ring of dots */
.cv-dots circle { fill: rgba(255, 255, 255, .88); stroke: rgba(44, 48, 92, .18); stroke-width: .8; }
.cv-kglow { fill: var(--kc); opacity: calc(var(--kl) * .95); }
.cv-kring { fill: none; stroke: var(--kc); stroke-width: 5; opacity: calc(.3 + var(--kl) * .7); }
.cv-brush circle { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .8; }
.cv-brush circle:nth-child(odd) { stroke: rgba(120, 126, 150, .22); }

/* the brand plate: rainbow letters lit inside the glass, with a soft deep edge for contrast */
.cv-brand text { font-family: "Nunito", sans-serif; }
.cv-bmark, .cv-bglow, .cv-bglow2, .cv-brefr, .cv-bsheen, .cv-bsheenglow { font-size: 64px; font-weight: 800; letter-spacing: .3em; }
.cv-bmark { fill: url(#cvBrand); paint-order: stroke; stroke: rgba(36, 40, 86, .55); stroke-width: 1.8px; }
.cv-bglow, .cv-bglow2 { fill: url(#cvBrandGlow); opacity: .3; }
.cv-bglow2 { stroke: url(#cvBrandGlow); stroke-width: 8px; }
/* the light refracting in the glass letters: a lighter spectrum drifting the other way, laid softly over them; and a
   sheen of white light that passes through MARK and on through the line under it (both moved by brand() in the view) */
.cv-brefr { fill: url(#cvBrandRefr); opacity: .42; mix-blend-mode: soft-light; }
.cv-bsheen { fill: url(#cvBrandSheen); opacity: .72; }
.cv-bsheenglow { fill: url(#cvBrandSheen); opacity: .55; mix-blend-mode: screen; }
.cv-bsubsheen { font-size: 20px; font-weight: 800; letter-spacing: .15em; fill: url(#cvBrandSheen); opacity: .62; }
.cv-bsubglow { font-size: 20px; font-weight: 800; letter-spacing: .15em; fill: url(#cvBrandGlow); stroke: url(#cvBrandGlow); stroke-width: 3px; opacity: .3; }
.cv-brule { fill: url(#cvBrandRule); opacity: .8; }
.cv-bsub { font-size: 20px; font-weight: 800; letter-spacing: .15em; fill: rgb(52, 56, 100); paint-order: stroke; stroke: rgba(255, 255, 255, .7); stroke-width: 2px; }

/* the two knobs: EXPRESSION and TEMPO (turn, or tap to step); their dots light up to the level */
.cv-kn { pointer-events: auto; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; touch-action: none; --beat: .6; }
.cv-kn.held { cursor: grabbing; }
.cv.static .cv-kn { cursor: default; }
.cv-kn-hit { fill: transparent; }
.cv-kn-glow { fill: var(--kh); opacity: calc(var(--beat) * .32); }
.cv-kn.pulse .cv-kn-glow { animation: cvKnPulse .7s ease-out; }
@keyframes cvKnPulse { 0% { opacity: .95; } 100% { opacity: calc(var(--beat) * .32); } }
.cv-kn-dots circle { fill: rgba(255, 255, 255, .86); stroke: rgba(44, 48, 92, .28); stroke-width: .9; transition: fill .2s; }
.cv-kn-dots circle.on { fill: var(--kh); stroke: rgba(255, 255, 255, .9); opacity: calc(.55 + var(--beat) * .45); filter: drop-shadow(0 0 4px var(--kh)); }
.cv-kn-knurl path { stroke: rgba(66, 70, 94, .7); stroke-width: 1.7; fill: none; stroke-linecap: round; }
.cv-kn-brush circle { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .8; }
.cv-kn-brush circle:nth-child(odd) { stroke: rgba(120, 126, 150, .2); }
.cv-kn-track { fill: none; stroke: rgba(60, 64, 96, .2); stroke-width: 7; stroke-linecap: round; }
.cv-kn-lit { fill: none; stroke: var(--kh); stroke-width: 7; stroke-linecap: round; opacity: calc(.62 + var(--beat) * .38); filter: drop-shadow(0 0 4px var(--kh)); }
.cv-kn-ptr0 { fill: none; stroke: rgba(40, 44, 70, .6); stroke-width: 10; stroke-linecap: round; }
.cv-kn-ptr { fill: none; stroke: #ffffff; stroke-width: 3.6; stroke-linecap: round; }
.cv-kn-label { font: 900 26px/1 "Nunito", sans-serif; letter-spacing: .22em; text-anchor: middle; fill: rgb(52, 56, 100); paint-order: stroke;
  stroke: rgba(255, 255, 255, .78); stroke-width: 2.2px; }

/* the play button = Listen again; its light says when it can be pressed */
.cv-play { pointer-events: auto; cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
.cv.playable .cv-play { cursor: pointer; }
.cv-pglow { fill: #ffe6a8; opacity: 0; transition: opacity .5s; }
.cv.playable .cv-pglow { opacity: .55; animation: cvPlay 2.4s ease-in-out infinite; }
@keyframes cvPlay { 0%, 100% { opacity: .38; } 50% { opacity: .7; } }
.cv-ptri { fill: rgba(130, 136, 160, .55); stroke: rgba(130, 136, 160, .55); transition: fill .4s, stroke .4s; }
.cv.playable .cv-ptri { fill: #fff8e6; stroke: #fff8e6; filter: drop-shadow(0 0 5px rgba(255, 200, 100, .95)); }
.cv-plabel { font: 900 22px/1 "Nunito", sans-serif; letter-spacing: .3em; text-anchor: middle; fill: rgb(56, 60, 104); paint-order: stroke; stroke: rgba(255, 255, 255, .75); stroke-width: 2px; }
.cv-led { fill: #cfd5de; stroke: rgba(44, 48, 92, .25); stroke-width: 1; transition: fill .4s; }
.cv.playable .cv-led { fill: #7cf0c4; filter: drop-shadow(0 0 5px #5fe8b4); }

/* ---------------------------------------------------------------------------------- the trail around the console */
.mk-cv { position: absolute; inset: 0; z-index: 11; overflow: hidden; opacity: 0; transition: opacity .55s ease; color: #fff;
  font-family: "Nunito", sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
.mk-cv.on { opacity: 1; }
.mk-cv .mk-cv-stage { position: absolute; inset: 0; }
/* the round pill (top centre, between the HUD avatar and the tablet) */
.mk-cv-pill { position: absolute; left: 50%; top: calc(var(--u) * 20); translate: -50% 0; z-index: 12; display: flex; align-items: center; gap: calc(var(--u) * 16);
  height: calc(var(--u) * 64); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 26); border-radius: 999px; color: var(--cream, #fff8ec);
  background: linear-gradient(180deg, rgba(92, 44, 150, .8), rgba(54, 20, 98, .86)); 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, 255, 255, .14), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(30, 10, 60, .3); }
.mk-cv-tt { display: grid; line-height: 1; }
.mk-cv-tt small { font: 900 calc(var(--u) * 13)/1 "Nunito", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f6dfa0; }
.mk-cv-tt b { font: 1000 calc(var(--u) * 26)/1.05 "Nunito", sans-serif; color: #fff8ea; white-space: nowrap; }
.mk-cv-pips { display: flex; gap: calc(var(--u) * 7); }
.mk-cv-pips i { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: rgba(20, 6, 40, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, .35); transition: background .4s, box-shadow .4s, scale .4s cubic-bezier(.3, 1.6, .4, 1); }
.mk-cv-pips em { font: 1000 calc(var(--u) * 17)/1 "Nunito", sans-serif; font-style: normal; color: rgba(255, 236, 190, .72); }
.mk-cv-pips i.now { scale: 1.12; box-shadow: inset 0 0 0 2px #ffd56b, 0 0 calc(var(--u) * 14) rgba(255, 200, 90, .55); }
.mk-cv-pips i.done { background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .7), inset 0 calc(var(--u) * -3) 0 rgba(176, 96, 0, .45); }
.mk-cv-pips i.done em { color: #3a1b00; }
/* "Listen" / "Your turn", just above the console */
.mk-cv-turn { position: absolute; z-index: 11; translate: -50% -100%; pointer-events: none; opacity: 0; transition: opacity .35s; }
.mk-cv-turn.show { opacity: 1; }
.mk-cv-turn span { display: block; padding: calc(var(--u) * 9) calc(var(--u) * 24); border-radius: 999px; white-space: nowrap;
  font: 1000 calc(var(--u) * 22)/1 "Nunito", sans-serif; letter-spacing: .06em; color: rgba(255, 248, 236, .95);
  background: rgba(40, 22, 70, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); transition: background .35s, color .35s; }
.mk-cv-turn.you span { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .7), 0 0 calc(var(--u) * 24) rgba(255, 197, 61, .5);
  animation: mkcvPop .5s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes mkcvPop { 0% { scale: .7; } 100% { scale: 1; } }
/* the key chip beside the play button (Windows) */
.mk-cv-kbd { position: absolute; z-index: 11; translate: 0 -50%; pointer-events: none; opacity: 0; transition: opacity .35s; }
.mk-cv.awake .mk-cv-kbd { opacity: 1; }
.mk-cv-kbd kbd { display: inline-grid; place-items: center; min-width: calc(var(--u) * 54); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 8);
  font: 900 calc(var(--u) * 13)/1 "Nunito", sans-serif; color: rgb(56, 60, 104); background: rgba(255, 255, 255, .78); box-shadow: inset 0 calc(var(--u) * -2) 0 rgba(44, 48, 92, .18), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(44, 48, 92, .2); }
/* Mark at the foot, and his words */
.mk-cv-mark { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * -34); width: calc(var(--u) * 270); aspect-ratio: 595 / 764; z-index: 8; transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(40, 10, 60, .35)) drop-shadow(calc(var(--u) * -4) 0 calc(var(--u) * 14) rgba(255, 210, 160, .3)); }
.mk-cv-mark .br { position: absolute; inset: 0; transform-origin: 50% 100%; animation: mkcvBreath 3.7s ease-in-out infinite; }
.mk-cv-mark img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .18s; }
.mk-cv-mark img.on { opacity: 1; }
@keyframes mkcvBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.994, 1.014); } }
.mk-cv-cloud { position: absolute; left: calc(var(--u) * 34); bottom: calc(var(--u) * 318); max-width: calc(var(--u) * 440); z-index: 13; opacity: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * 20); border-radius: calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 36) 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, 0 calc(var(--u) * 16) calc(var(--u) * 34) rgba(30, 10, 60, .28);
  transform-origin: 0 100%; transition: opacity .35s ease; }
.mk-cv-cloud.on { opacity: 1; }
.mk-cv-cloud .nm { display: block; font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: #7c3aed; }
.mk-cv-cloud .ln { display: block; margin-top: calc(var(--u) * 8); font: 1000 calc(var(--u) * 29)/1.15 "Nunito", sans-serif; color: #2a1245; }
/* Leave (glass), bottom right */
.mk-cv-actions { position: absolute; right: calc(var(--u) * 36); bottom: calc(var(--u) * 30); z-index: 12; display: flex; gap: calc(var(--u) * 14); align-items: center; }
.mk-cv-actions[hidden] { display: none; }
.mk-cv-leave { display: inline-flex; align-items: center; gap: calc(var(--u) * 11); height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 8);
  border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; color: #fff8ec; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(92, 44, 150, .86), rgba(58, 22, 104, .9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(30, 10, 60, .3);
  transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), scale .18s; }
.mk-cv-leave:hover { translate: 0 calc(var(--u) * -3); }
.mk-cv-leave:active { scale: .95; }
.mk-cv-leave .ic { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.mk-cv-leave .ic img { width: 62%; height: 62%; object-fit: contain; }
.mk-cv-leave kbd { min-width: calc(var(--u) * 30); height: calc(var(--u) * 28); font-size: calc(var(--u) * 13); }
.mk-cv.cheer .mk-cv-pill { animation: mkcvCheer .9s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes mkcvCheer { 30% { scale: 1.06; } }

/* ------------------------------------------------------------------------------------- the iPhone frame (844 x 390) */
.f-ios .mk-cv-pill { top: calc(var(--u) * 8); height: calc(var(--u) * 36); gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 14); }
.f-ios .mk-cv-tt small { font-size: calc(var(--u) * 7.5); }
.f-ios .mk-cv-tt b { font-size: calc(var(--u) * 14.5); }
.f-ios .mk-cv-pips { gap: calc(var(--u) * 4); }
.f-ios .mk-cv-pips i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.f-ios .mk-cv-pips em { font-size: calc(var(--u) * 10.5); }
.f-ios .mk-cv-turn span { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 5) calc(var(--u) * 13); }
.mk-cv-pill .mk-cv-turn { position: static; translate: none; opacity: 1; }
.mk-cv-pill .mk-cv-turn span { font-size: calc(var(--u) * 11.5); padding: calc(var(--u) * 5) calc(var(--u) * 11); }
.f-ios .mk-cv-kbd { display: none; }
.f-ios .mk-cv-mark { width: calc(var(--u) * 132); left: calc(var(--u) * 40); bottom: calc(var(--u) * -18); }
.f-ios .mk-cv-cloud { left: calc(var(--u) * 54); bottom: calc(var(--u) * 150); max-width: calc(var(--u) * 138); padding: calc(var(--u) * 10) calc(var(--u) * 15) calc(var(--u) * 11);
  border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 6); }
.f-ios .mk-cv-cloud .ln { font-size: calc(var(--u) * 14.5); margin-top: calc(var(--u) * 4); }
.f-ios .mk-cv-cloud .nm { font-size: calc(var(--u) * 8.5); letter-spacing: calc(var(--u) * 2); }
.f-ios .mk-cv-actions { right: calc(var(--u) * 4); top: 50%; bottom: auto; translate: 0 -50%; }
.f-ios .mk-cv-leave { width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: 0; justify-content: center; }
.f-ios .mk-cv-leave .lb { display: none; }
.f-ios .mk-cv-leave .ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); background: none; }
.f-ios .mk-cv-leave kbd { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-cv-mark .br, .cv-pad.hint .cv-hintring, .cv.playable .cv-pglow, .cv-kn.pulse .cv-kn-glow { animation: none; }
}