/* Moonpearl Pavilion's own look over the cluster reels kit (K6): a floating jewel pavilion in moonlit pink clouds.
   Mobile first (a phone held upright is the first screen). Decoration only: nothing here changes the layout the kit
   measures beyond the header's own height (the logo no longer overflows it), and every moving thing animates
   transform or opacity. Under reduced motion (html.cr-reduced: the device or the in-game setting) the ambient
   layers hold still. js/moonpearl.js drives the moments; this file draws the scene, the frame, the logo and the
   overlays. */
:root {
  --mp-gold-hi: #fff4cf; --mp-gold: #f1c56a; --mp-gold-lo: #9a6a1f;
  --mp-pink: #ff9cc0; --mp-moon: #dfe7ff; --mp-lilac: #b9a4ff;
  --mp-frame: 7px;
}
.cr-stage { isolation: isolate; }

/* ------------------------------------------------------------------ the sky behind the game */
.mp-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mp-scene .mp-moonlight { position: absolute; left: 50%; top: -30vh; width: 140vmax; height: 140vmax; margin-left: -70vmax;
  background: radial-gradient(closest-side, #fff8fd55, #ffd6ec22 45%, transparent 70%); opacity: .55; animation: mp-breathe 9s ease-in-out infinite; }
.mp-scene .mp-sweep { position: absolute; top: -20%; left: 0; width: 40%; height: 140%;
  background: linear-gradient(100deg, transparent, #ffffff1f 45%, #fff0f840 50%, #ffffff1f 55%, transparent); transform: translateX(-120%) skewX(-12deg);
  animation: mp-sweep 14s ease-in-out infinite; }
.mp-cloud { position: absolute; width: 70vmax; height: 26vmax; border-radius: 50%;
  background: radial-gradient(closest-side, #fff4fbcc, #ffd3eb88 45%, #f3c4ff22 75%, transparent); opacity: .5; will-change: transform; }
.mp-cloud.c1 { top: 58%; left: -30vmax; animation: mp-drift 70s linear infinite; }
.mp-cloud.c2 { top: 14%; left: -50vmax; height: 18vmax; opacity: .35; animation: mp-drift 95s linear -40s infinite; }
.mp-cloud.c3 { top: 78%; left: -60vmax; opacity: .45; animation: mp-drift 120s linear -80s infinite; }
.mp-pearls i { position: absolute; bottom: -24px; width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, #fff 0 18%, #fde9f4 30%, #e7d3ff 60%, #a88fd6 100%); box-shadow: 0 0 8px #fff8;
  animation: mp-rise var(--t, 18s) linear var(--d, 0s) infinite; will-change: transform, opacity; }
.mp-pearls i:nth-child(1) { left: 6%; --s: 7px; --t: 19s; --d: -2s; }
.mp-pearls i:nth-child(2) { left: 17%; --s: 5px; --t: 23s; --d: -11s; }
.mp-pearls i:nth-child(3) { left: 29%; --s: 9px; --t: 21s; --d: -6s; }
.mp-pearls i:nth-child(4) { left: 41%; --s: 4px; --t: 26s; --d: -17s; }
.mp-pearls i:nth-child(5) { left: 55%; --s: 6px; --t: 20s; --d: -3s; }
.mp-pearls i:nth-child(6) { left: 66%; --s: 8px; --t: 24s; --d: -14s; }
.mp-pearls i:nth-child(7) { left: 78%; --s: 5px; --t: 18s; --d: -9s; }
.mp-pearls i:nth-child(8) { left: 89%; --s: 7px; --t: 22s; --d: -19s; }
.mp-pearls i:nth-child(9) { left: 95%; --s: 4px; --t: 27s; --d: -5s; }
.mp-pearls i:nth-child(10) { left: 48%; --s: 10px; --t: 30s; --d: -22s; }
@keyframes mp-breathe { 50% { opacity: .9; transform: scale(1.04); } }
@keyframes mp-sweep { 0%, 35% { transform: translateX(-120%) skewX(-12deg); } 70%, 100% { transform: translateX(320%) skewX(-12deg); } }
@keyframes mp-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 100vmax)); } }
@keyframes mp-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .85; } 50% { transform: translate(14px, -55vh); } 90% { opacity: .7; } 100% { transform: translate(-6px, -110vh); opacity: 0; } }

/* ------------------------------------------------------------------ the logo: whole, centred, never clipped */
/* the kit's header could shrink under its 64-84 px logo (a flex column of fixed height), so the logo spilled over the
   demo badge above and was cut at the top of the screen on the RGS: the header now keeps the logo's own height */
.cr-head { flex: none; }
.mp-logo { position: relative; display: block; height: 76px; aspect-ratio: 1000 / 519; max-width: min(84vw, 380px); }
.cr-head .mp-logo > .cr-logo, .cr-loader .mp-logo > .cr-logo { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 2px 4px #1a0a2ecc) drop-shadow(0 0 12px #ffe3a066); }
.mp-logo::before { content: ''; position: absolute; inset: -18% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, #2a1650aa, #3b1f6a55 55%, transparent); opacity: .7; animation: mp-breathe 5s ease-in-out infinite; }
/* a light sweep over the lettering only (masked by the logo's own alpha) */
.mp-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url("../assets/logo.webp") center / contain no-repeat; mask: url("../assets/logo.webp") center / contain no-repeat; }
.mp-shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  background: linear-gradient(100deg, transparent, #fff8 40%, #fffffff0 50%, #fff8 60%, transparent); transform: translateX(-120%); mix-blend-mode: screen;
  animation: mp-shine 5.5s ease-in-out 1.2s infinite; }
@keyframes mp-shine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(400%); } }
.cr-loader .mp-logo { height: min(40vh, calc(min(86vw, 560px) * 519 / 1000)); max-width: none; }
/* A wide screen: the logo stands in the sky top left, out of the column, so the board keeps the whole height (the
   kit's allowance less its 54 px header row) and the logo is never squeezed or cut at the top. */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) and (min-height: 541px) {
  :root { --chrome: 322px; }
  html.cr-topbar { --chrome: 362px; }
  html.asgf-menu { --chrome: 202px; }
  .cr-head { position: fixed; top: 14px; left: 24px; right: 24px; width: auto; z-index: 2; justify-content: flex-start; min-height: 0; pointer-events: none; }
  .cr-head .cr-chip-mode { top: 0; transform: none; pointer-events: auto; }
  .mp-logo { width: clamp(200px, 20vw, 340px); height: calc(clamp(200px, 20vw, 340px) * 0.519); max-width: none; }
}
html.asgf-short .mp-logo { height: 42px; }
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  .mp-logo { height: auto; width: 100%; max-width: 260px; }
}

/* ------------------------------------------------------------------ the frame and the board */
.cr-board-wrap { padding: var(--mp-frame); border-radius: 18px;
  background:
    linear-gradient(180deg, #fff6d8 0%, var(--mp-gold) 14%, #c89336 38%, #ffe7a3 52%, #b47c2a 74%, #7a4f17 100%);
  box-shadow: 0 0 0 1px #5b3a0e, inset 0 1px 0 #fffbe9, inset 0 -1px 0 #5b3a0e, 0 14px 40px #1a0a2acc, 0 0 60px #ff9cc055; }
/* a soft moonlit glow behind the board, breathing */
.cr-board-wrap::before { content: ''; position: absolute; inset: -9%; z-index: -1; border-radius: 40%; pointer-events: none;
  background: radial-gradient(closest-side, #ffd6ecaa, #c9b3ff55 55%, transparent 75%); opacity: .7; animation: mp-breathe 6s ease-in-out infinite; }
/* the frame's rim light and four pearl studs on its corners */
.cr-board-wrap::after { content: ''; position: absolute; inset: -5px; border-radius: 22px; pointer-events: none; z-index: 6;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 20%, #f6e7f7 35%, #c9b3e6 70%, #7c63a8 100%) top left / 15px 15px no-repeat,
    radial-gradient(circle at 35% 35%, #fff 0 20%, #f6e7f7 35%, #c9b3e6 70%, #7c63a8 100%) top right / 15px 15px no-repeat,
    radial-gradient(circle at 35% 35%, #fff 0 20%, #f6e7f7 35%, #c9b3e6 70%, #7c63a8 100%) bottom left / 15px 15px no-repeat,
    radial-gradient(circle at 35% 35%, #fff 0 20%, #f6e7f7 35%, #c9b3e6 70%, #7c63a8 100%) bottom right / 15px 15px no-repeat;
  box-shadow: 0 0 18px #ffe7a399; opacity: .85; animation: mp-rim 6s ease-in-out infinite; }
@keyframes mp-rim { 50% { opacity: 1; } }
.cr-board { border-radius: 12px;
  background:
    radial-gradient(90% 55% at 50% 0%, #4a3a8f 0%, transparent 70%),
    radial-gradient(120% 60% at 50% 105%, #3a1f5c 0%, transparent 70%),
    linear-gradient(180deg, #1f1650, #120c2e);
  box-shadow: inset 0 0 0 1px #f1c56a66, inset 0 0 24px #000a; }
.cr-col { border-left-color: #f1c56a26;
  background: repeating-linear-gradient(180deg, transparent 0 calc(100% / var(--h, 5) - 1px), #ffffff10 calc(100% / var(--h, 5) - 1px) calc(100% / var(--h, 5))); }
/* depth on the tiles: a soft shadow under each gem tile */
.cr-face-img { filter: drop-shadow(0 3px 3px #0a051a99); }
.cr-wild .cr-face-img, .cr-scatter .cr-face-img, .cr-mwild .cr-face-img { filter: drop-shadow(0 3px 3px #0a051a99) drop-shadow(0 0 7px var(--sym)); }
body.cr-free .cr-board-wrap { background: linear-gradient(180deg, #f3f6ff 0%, #b9c8ff 16%, #6f7fd6 40%, #dfe6ff 54%, #5b63b8 76%, #2b2f73 100%); }
body.cr-free .cr-board { background: radial-gradient(90% 55% at 50% 0%, #3b4aa8 0%, transparent 70%), linear-gradient(180deg, #161a4a, #0b0c26); }

/* a winning cluster: the gems pulse (transform only); a return at or below the stake keeps the kit's plain outline */
.cr-tile.win:not(.plain) .cr-face { animation: mp-pulse .5s ease-in-out infinite alternate; filter: brightness(1.18) drop-shadow(0 0 6px var(--win)); }
@keyframes mp-pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
/* a refill falling: a moonlit trail above the gem while it drops */
.cr-tile.mp-trail::before { content: ''; position: absolute; left: 28%; right: 28%; bottom: 55%; height: 140%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--sym) 60%, #fff), transparent); opacity: .55; }
/* anticipation: the frame glows moon-blue and quickens */
.cr-board-wrap:has(> .cr-board.tease)::before { background: radial-gradient(closest-side, #dfe7ffee, #9fb6ff88 55%, transparent 75%); animation-duration: .9s; }
.cr-board-wrap:has(> .cr-board.tease)::after { animation-duration: .45s; box-shadow: 0 0 26px #dfe7ff; }

/* ------------------------------------------------------------------ the effects layer over the board */
.mp-fx { position: absolute; inset: var(--mp-frame); z-index: 3; pointer-events: none; }
.mp-fx canvas { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.mp-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-ring, .mp-glow, .mp-flare, .mp-col { position: absolute; pointer-events: none; }
.mp-ring { width: 18%; aspect-ratio: 1; margin: -9% 0 0 -9%; border-radius: 50%; border: 3px solid var(--mp-gold); }
.mp-glow { width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; background: radial-gradient(closest-side, #fffef4, #ffe7a3aa 40%, transparent); }
.mp-flare { width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff, #dfe7ffcc 25%, transparent 60%),
    repeating-conic-gradient(from 0deg, #dfe7ff00 0deg 12deg, #dfe7ffaa 15deg, #dfe7ff00 18deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.mp-col { top: 0; bottom: 0; background: linear-gradient(180deg, transparent, #dfe7ff55 40%, #ffd6ec66 60%, transparent); }
.mp-veil { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; }

/* ------------------------------------------------------------------ readouts */
.cr-meter-box { background: linear-gradient(180deg, #3a2a78, #1d1546); border-color: #f1c56a55; box-shadow: 0 2px 12px #0008, inset 0 1px 0 #ffffff22; }
.cr-meter-box .v { text-shadow: 0 0 10px #ff9cc055; }
.cr-meter-box.mp-roll .v { animation: mp-roll .5s ease-out; }
@keyframes mp-roll { 0% { transform: translateY(-30%); opacity: .3; } 60% { transform: translateY(6%); opacity: 1; } 100% { transform: translateY(0); } }
#cr-win.mp-counting, #cr-spinwin.mp-counting { color: var(--win); }
.cr-spin { box-shadow: 0 4px 20px #ff9cc066, 0 0 0 4px #f1c56a33; }

/* ------------------------------------------------------------------ overlays: free spins and big wins */
.mp-od { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cr-overlay { isolation: isolate; }
#cr-intro, #cr-outro { background: radial-gradient(120% 90% at 50% 40%, #2a1d6ef2, #0b0820f5 70%); }
.mp-moon { position: absolute; left: 50%; top: 50%; width: min(70vmin, 520px); aspect-ratio: 1; margin: calc(min(70vmin, 520px) / -2) 0 0 calc(min(70vmin, 520px) / -2);
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff 0%, #f4f0ff 30%, #d8d2f5 62%, #a9a0d8 82%, #7d73b8 100%);
  box-shadow: 0 0 60px #dfe7ffaa, 0 0 160px #ffc9e666; opacity: .32; }
.mp-rays { position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, #ffffff00 0deg 8deg, #fff2fa1c 10deg 14deg, #ffffff00 16deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 60%); mask: radial-gradient(closest-side, #000 10%, transparent 60%); }
.cr-overlay.show .mp-rays { animation: mp-spin 40s linear infinite; }
#cr-intro.show .mp-moon { animation: mp-moonrise 1.1s cubic-bezier(.2,.8,.2,1) both; }
#cr-outro.show .mp-moon { animation: mp-moonset 1.1s cubic-bezier(.2,.8,.2,1) both; }
#cr-intro.show .cr-feat-title, #cr-outro.show .cr-feat-title { animation: mp-title .8s cubic-bezier(.2,1.4,.4,1) .15s both; }
#cr-intro.show .cr-feat-big { animation: mp-pop .7s cubic-bezier(.2,1.6,.4,1) .5s both; }
#cr-outro.show .cr-feat-big { animation: mp-pop .7s cubic-bezier(.2,1.6,.4,1) .35s both; }
#cr-intro.show .cr-hint, #cr-outro.show .cr-hint { animation: mp-fade .5s ease-out 1.1s both; }
.cr-feat-title { background: linear-gradient(180deg, #fffaf0, #ffe08a 45%, #e3a640 70%, #fff3c4); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #6b3f0a) drop-shadow(0 0 16px #ffd6ec99); }
.cr-feat-big { color: #fff; text-shadow: 0 0 18px #9fb6ffcc, 0 2px 0 #2a1d6e; }
#cr-bigwin { background: radial-gradient(110% 80% at 50% 45%, #3b1f5ef0, #0b0820f5 70%); }
#cr-bigwin .mp-rays { background: repeating-conic-gradient(from 0deg, #ffffff00 0deg 7deg, #ffe08a2a 9deg 13deg, #ffffff00 15deg 22deg); }
#cr-bigwin.show .cr-tier { animation: mp-title .7s cubic-bezier(.2,1.5,.4,1) both; }
#cr-bigwin.show .cr-big-amount { animation: mp-pop .6s cubic-bezier(.2,1.6,.4,1) .2s both; }
.cr-tier { background: linear-gradient(180deg, #fffdf2, #ffe08a 40%, #e09a2e 70%, #fff1b8); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #6b3f0a) drop-shadow(0 0 20px #ffd27a99); }
.cr-tier.mega { background-image: linear-gradient(180deg, #fff, #ffc2d8 40%, #e0548a 72%, #ffe1ec); filter: drop-shadow(0 3px 0 #5a1030) drop-shadow(0 0 20px #ff9cc0aa); }
.cr-tier.epic { background-image: linear-gradient(180deg, #fff, #dcd2ff 40%, #8a6cff 72%, #efeaff); filter: drop-shadow(0 3px 0 #2a1870) drop-shadow(0 0 22px #b9a4ffcc); }
.cr-big-amount { color: #fff; text-shadow: 0 0 18px #ffe08acc, 0 2px 0 #4a2a00; }
.mp-jewels { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 21; pointer-events: none; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
@keyframes mp-moonrise { from { transform: translateY(40%) scale(.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: .32; } }
@keyframes mp-moonset { from { transform: scale(1.25); opacity: 0; } to { transform: scale(1); opacity: .28; } }
@keyframes mp-title { from { transform: translateY(-30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mp-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mp-fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ reduced motion: everything holds still */
html.cr-reduced .mp-cloud, html.cr-reduced .mp-pearls, html.cr-reduced .mp-sweep, html.cr-reduced .mp-shine, html.cr-reduced .mp-rays { animation: none !important; display: none; }
html.cr-reduced .mp-logo::before, html.cr-reduced .cr-board-wrap::before, html.cr-reduced .cr-board-wrap::after, html.cr-reduced .mp-moonlight { animation: none !important; }
html.cr-reduced .cr-tile.win:not(.plain) .cr-face { animation: none; }
html.cr-reduced .mp-moon { animation: none !important; opacity: .3; }

/* ------------------------------------------------------------------ the Moon-Pearl Maiden, guardian of the pavilion
   Always behind the stage's controls and readouts (z-index -1 inside the stage), never in the layout's flow. Wide screens
   and phones on their side: she stands left of the board. A phone upright: a cut-out above the board's right corner,
   beside the logo, behind the meters. */
.mp-guardian { position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 3 / 4; right: calc(100% + 4px); bottom: -2%; height: 100%; }
.mp-guardian .mp-still, .mp-guardian video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.mp-guardian video { opacity: 0; transition: opacity .25s; }
.mp-guardian video.on { opacity: 1; }
.mp-guardian.video .mp-still { opacity: 0; transition: opacity .25s .1s; }
.mp-guardian .mp-aura { position: absolute; left: 10%; right: 10%; top: 8%; bottom: 4%; border-radius: 50%;
  background: radial-gradient(closest-side, #ffe6f6aa, #c9b3ff55 55%, transparent 75%); opacity: .55; animation: mp-breathe 4.5s ease-in-out infinite; }
/* the still breathes when no loop plays (reduced motion holds it still) */
.mp-guardian:not(.video) .mp-still { transform-origin: 50% 100%; animation: mp-sway 5s ease-in-out infinite; }
@keyframes mp-sway { 50% { transform: scale(1.012, 1.02) rotate(-.4deg); } }
.mp-guardian.cheer { animation: mp-cheer .7s cubic-bezier(.2,1.5,.4,1); }
.mp-guardian.cheer .mp-aura, .mp-guardian.joy .mp-aura { background: radial-gradient(closest-side, #fff4c8ee, #ffd27a88 55%, transparent 75%); opacity: 1; }
.mp-guardian.joy { animation: mp-joy 1.4s ease-in-out; }
.mp-guardian.tease .mp-aura { background: radial-gradient(closest-side, #eef3ffee, #9fb6ffaa 55%, transparent 75%); opacity: 1; animation-duration: .6s; }
.mp-guardian.tease { transform: translateY(-2%) scale(1.03); transition: transform .3s ease-out; transform-origin: 50% 100%; }
@keyframes mp-cheer { 40% { transform: translateY(-5%) scale(1.04); } }
@keyframes mp-joy { 20% { transform: translateY(-8%) scale(1.08); } 45% { transform: translateY(-2%) scale(1.04); } 70% { transform: translateY(-6%) scale(1.06); } }
html.cr-reduced .mp-guardian, html.cr-reduced .mp-guardian * { animation: none !important; transform: none !important; }

/* a phone held upright: above the board's top right, beside the logo, behind the meters */
@media (max-aspect-ratio: 20/21) {
  .mp-guardian { right: -4px; left: auto; bottom: calc(100% - 18px); height: min(190px, 24vh); }
}
html.asgf-short .mp-guardian { height: min(120px, 22vh); }
/* a phone on its side: the board's left, low in the meters' column */
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  .mp-guardian { height: 64%; bottom: -2%; right: calc(100% + 10px); }
}

/* the board's idle life (board: "jewels bob"): each gem floats gently, out of step with its neighbours; a winning gem's
   pulse (above) is more specific and takes over */
.cr-tile .cr-face { animation: mp-bob 3.4s ease-in-out infinite; animation-delay: calc(var(--c, 0) * -0.55s + var(--r, 0) * -0.35s); }
@keyframes mp-bob { 50% { transform: translateY(-2.5%); } }
html.cr-reduced .cr-tile .cr-face { animation: none; }

/* ------------------------------------------------------------------ board v3 skin (reviewer pass, 10 Nov)
   A lit lacquer panel instead of the flat navy; every cell a full enamel tile (a short column's tall cell is one tall
   tile, no dark well above and below the art); gold corner flourishes; the near-twin tile colours pulled apart. */
.cr-board {
  background:
    radial-gradient(70% 40% at 50% 0%, #ffd6ec44, transparent 70%),
    radial-gradient(90% 60% at 50% 110%, #f1c56a2a, transparent 70%),
    repeating-linear-gradient(135deg, #ffffff05 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #5a1838, #3a0f2e 55%, #26092a);
  box-shadow: inset 0 0 0 2px #f1c56a99, inset 0 0 30px #000b; }
body.cr-free .cr-board { background: radial-gradient(70% 40% at 50% 0%, #dfe7ff44, transparent 70%), repeating-linear-gradient(135deg, #ffffff05 0 6px, transparent 6px 14px), linear-gradient(180deg, #232a6e, #141846 60%, #0c0e2c); }
.cr-col { border-left-color: #f1c56a33; background: none; }
.cr-face-img { border-radius: 13%;
  background:
    radial-gradient(110% 60% at 50% 12%, #ffffff66, transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--sym) 80%, #fff), var(--sym) 45%, color-mix(in srgb, var(--sym2) 65%, var(--sym)));
  box-shadow: inset 0 0 0 1.5px #f6d58add, 0 3px 6px #0a051a99; filter: none; }
.cr-wild .cr-face-img, .cr-scatter .cr-face-img, .cr-mwild .cr-face-img { filter: drop-shadow(0 0 7px var(--sym)); }
/* gold corner flourishes over every tile (a held wild keeps the kit's own ring) */
.cr-tile:not(.held)::before { content: ''; position: absolute; inset: var(--cell-gap); pointer-events: none; z-index: 1; border-radius: 13%;
  --g: #f6d58a; --w: 22%; --t: 2px;
  background:
    linear-gradient(var(--g), var(--g)) 9% 7% / var(--w) var(--t) no-repeat, linear-gradient(var(--g), var(--g)) 7% 9% / var(--t) var(--w) no-repeat,
    linear-gradient(var(--g), var(--g)) 91% 7% / var(--w) var(--t) no-repeat, linear-gradient(var(--g), var(--g)) 93% 9% / var(--t) var(--w) no-repeat,
    linear-gradient(var(--g), var(--g)) 9% 93% / var(--w) var(--t) no-repeat, linear-gradient(var(--g), var(--g)) 7% 91% / var(--t) var(--w) no-repeat,
    linear-gradient(var(--g), var(--g)) 91% 93% / var(--w) var(--t) no-repeat, linear-gradient(var(--g), var(--g)) 93% 91% / var(--t) var(--w) no-repeat,
    radial-gradient(circle, var(--g) 0 45%, transparent 55%) 6% 6% / 6px 6px no-repeat, radial-gradient(circle, var(--g) 0 45%, transparent 55%) 94% 6% / 6px 6px no-repeat,
    radial-gradient(circle, var(--g) 0 45%, transparent 55%) 6% 94% / 6px 6px no-repeat, radial-gradient(circle, var(--g) 0 45%, transparent 55%) 94% 94% / 6px 6px no-repeat;
  opacity: .9; }
/* coral vs rose, teal vs jade: the topaz tile turns orchid, the emerald tile leaf green (the plates follow theme.json) */
.sym-jewel_4 .cr-face-img { filter: hue-rotate(-28deg) saturate(1.25); }
.sym-jewel_2 .cr-face-img { filter: hue-rotate(-28deg) saturate(1.15); }

/* the HUD as the board's purple bar with gold trim, and a pearl SPIN */
.cr-hud { background: linear-gradient(180deg, #5a2f9c, #321666 60%, #24104c); border: 2px solid #e8c063; box-shadow: inset 0 1px 0 #ffffff44, inset 0 0 0 3px #00000033, 0 8px 24px #000a; }
.cr-hud .k { color: #f6dfa0; }
.cr-round { background: linear-gradient(180deg, #6a3fb0, #3a1c74); border: 1.5px solid #e8c063; }
.cr-tool { background: linear-gradient(180deg, #6a3fb0, #3a1c74); border: 1.5px solid #e8c063; color: #fff4d6; }
.cr-tool.on { background: linear-gradient(180deg, #ffe08a, #e0a63a); color: #2a1450; }
.cr-spin { position: relative; width: 82px; height: 82px; border: 4px solid #e8c063; color: transparent;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 10%, #fff6fb 18%, #f3e6f7 38%, #dccbef 60%, #b9a2dc 82%, #8d77bf 100%);
  box-shadow: 0 0 0 2px #7a4f17, 0 0 22px #ffe6f6cc, inset -8px -10px 16px #8d77bf99, inset 6px 6px 12px #ffffffaa; }
.cr-spin svg { opacity: 0; }
.cr-spin::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffffcc, transparent 40%); pointer-events: none; }
.cr-spin.busy { animation: mp-pearl-busy 1s ease-in-out infinite; }
@keyframes mp-pearl-busy { 50% { box-shadow: 0 0 0 2px #7a4f17, 0 0 34px #ffffffee, inset -8px -10px 16px #8d77bf99, inset 6px 6px 12px #ffffffaa; } }
@media (min-aspect-ratio: 20/21) and (max-height: 540px) { .cr-spin { width: 58px; height: 58px; } }

/* ------------------------------------------------------------------ the pavilion (board v3): crimson pillars, the red-tiled roof and the
   moon-gate crest around the reels, one 9-slice image (assets/pavilion-frame.webp: 1000×994, its reel window 242..761 × 220..899)
   drawn outside the board frame at the frame's own scale. Behind every control and readout (z-index -1 in the stage); the
   board keeps --mp-roof of room above it for the roof and crest (js/moonpearl.js sets both). */
.mp-frame { position: absolute; inset: 0; z-index: -1; pointer-events: none; --s: calc(var(--mp-bw, 400px) / 519);
  border-style: solid; border-color: transparent;
  border-width: calc(220 * var(--s)) calc(239 * var(--s)) calc(95 * var(--s)) calc(242 * var(--s));
  border-image: url("../assets/pavilion-frame.webp") 220 239 95 242 / calc(220 * var(--s)) calc(239 * var(--s)) calc(95 * var(--s)) calc(242 * var(--s)) / calc(220 * var(--s)) calc(239 * var(--s)) calc(95 * var(--s)) calc(242 * var(--s)) stretch;
  }
.cr-board-wrap { margin-top: calc(var(--mp-roof, 0px) * 0.94); }
/* the frame's own gold window border replaces the kit's thick gold padding: a slim lacquer rim */
.cr-board-wrap { padding: 4px; --mp-frame: 4px; background: linear-gradient(180deg, #f6d58a, #b47c2a); box-shadow: 0 0 0 1px #5b3a0e, 0 0 40px #ff9cc044; }
.cr-board-wrap::after { inset: -3px; box-shadow: 0 0 14px #ffe7a366; }
/* the maiden stands beyond the left pillar */
.mp-guardian { right: calc(100% + var(--mp-bw, 400px) * 0.27); }
/* an upright phone: beside the logo, standing behind the medallions above the roof */
@media (max-aspect-ratio: 20/21) { .mp-guardian { right: -6px; bottom: calc(100% + var(--mp-roof, 0px) * 0.44 + 20px); height: min(165px, 21vh); } }
html.asgf-short .mp-guardian { height: min(110px, 20vh); }

/* WAYS and SPIN WIN as gold medallions */
.cr-meters { grid-template-columns: auto auto; justify-content: center; gap: 14px; }
.cr-meter-box { min-width: 132px; min-height: 58px; padding: 6px 18px; border-radius: 50%; display: grid; align-content: center;
  background: radial-gradient(120% 90% at 50% 20%, #fff6d8, #f1c56a 38%, #c8902e 70%, #8a5a14);
  border: 2px solid #fff1c2; box-shadow: 0 0 0 2px #6b4210, 0 4px 14px #1a0a2acc, inset 0 -4px 8px #6b421088; }
.cr-meter-box .k { color: #4a1f06; font-weight: 800; }
.cr-meter-box .v { color: #2a0d33; text-shadow: 0 1px 0 #fff6d8; }
html.asgf-short .cr-meter-box { min-height: 44px; }
/* the free-spins row as a gold plaque */
.cr-fs > div { background: linear-gradient(180deg, #fff1c2, #e8c063 45%, #b47c2a); border: 2px solid #fff1c2; box-shadow: 0 0 0 2px #6b4210, 0 3px 10px #0008; border-radius: 10px; }
.cr-fs .k { color: #4a1f06; font-weight: 800; }
.cr-fs .v { color: #2a0d33; }
/* the info plaque (the RTP line) as a gold plaque */
.cr-chip-mode { background: linear-gradient(180deg, #fff1c2, #e8c063 45%, #b47c2a); color: #2a0d33; border: 2px solid #fff1c2; box-shadow: 0 0 0 2px #6b4210; font-weight: 800; }

/* A wide screen: the medallions stand on the frame's top left under the roof, the plaque on its top right; the board
   allowance is the kit's without its meters row, plus the roof (a quarter of what is left). */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) and (min-height: 541px) {
  :root { --chrome: calc(264px + (var(--vh) - 264px) * 0.25); }
  html.cr-topbar { --chrome: calc(296px + (var(--vh) - 296px) * 0.25); }
  html.asgf-menu { --chrome: calc(76px + (var(--vh) - 76px) * 0.25); }
  .cr-stage { position: relative; }
  .cr-meters { position: absolute; z-index: 2; width: auto; max-width: none; grid-template-columns: auto; gap: 8px;
    top: calc(8px + var(--mp-roof, 0px) * 0.94 + 4px); right: calc(50% + var(--mp-bw, 400px) / 2 + var(--mp-bw, 400px) * 0.13); }
  html.cr-topbar .cr-meters { top: calc(40px + var(--mp-roof, 0px) * 0.94 + 4px); }
  .cr-meter-box { min-width: 150px; }
  .cr-head .cr-chip-mode { top: calc(var(--mp-roof, 0px) * 0.94 - 6px); right: calc(50% - var(--mp-bw, 400px) / 2 - 24px - var(--mp-bw, 400px) * 0.13); transform: translateX(100%); }
}

/* the Moon Pearl's phases: a ring of five moons over the tile, one more lit at each step of the ladder */
.mp-phases { position: absolute; left: 50%; top: 9%; z-index: 2; display: flex; gap: 3%; width: 70%; transform: translateX(-50%); justify-content: center; pointer-events: none; }
.mp-phases i { width: 14%; aspect-ratio: 1; border-radius: 50%; background: #1a2257; box-shadow: inset 0 0 0 1.5px #9fb6ff99; }
.mp-phases i.on { background: radial-gradient(circle at 35% 35%, #fff, #e8eeff 45%, #9fb6ff); box-shadow: 0 0 6px #dfe7ff, inset 0 0 0 1px #fff; }

/* a celebrated cluster's sunburst */
.mp-burst { position: absolute; width: 120%; aspect-ratio: 1; margin: -60% 0 0 -60%; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fffbe8, #ffe08acc 22%, transparent 60%), repeating-conic-gradient(from 0deg, #ffe08a00 0deg 9deg, #ffe08acc 12deg, #ffe08a00 15deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 50%, transparent); mask: radial-gradient(closest-side, #000 50%, transparent); mix-blend-mode: screen; }

/* big-win titles: the gold brush art (English); other languages keep the kit's text */
html[lang^="en"] #cr-bigwin .cr-tier { width: min(92vw, 720px); aspect-ratio: 900 / 285; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 18px #000a);
  background: url("../assets/titles/big.webp") center / contain no-repeat; -webkit-background-clip: border-box; background-clip: border-box; font-size: 1px; }
html[lang^="en"] #cr-bigwin .cr-tier.mega { background-image: url("../assets/titles/mega.webp"); }
html[lang^="en"] #cr-bigwin .cr-tier.epic { background-image: url("../assets/titles/epic.webp"); }
.cr-big-amount { color: #fff4cf; text-shadow: 0 0 22px #ffe08acc, 0 3px 0 #6b3f0a; }

/* the maiden on the big-win and free-spins screens, above their dimming */
/* beside the title, never over it: her right edge stops 340 px left of the centre */
.mp-od-maiden { position: absolute; left: max(-40px, calc(50% - 340px - min(72vh, 660px) * 0.75)); bottom: 0; height: min(72vh, 660px); aspect-ratio: 3 / 4; }
.mp-od-maiden img, .mp-od-maiden video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.mp-od-maiden video { opacity: 0; } .mp-od-maiden video.on { opacity: 1; } .mp-od-maiden.video img { opacity: 0; }
.cr-overlay.show .mp-od-maiden { animation: mp-rise-in .6s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes mp-rise-in { from { transform: translateY(18%); opacity: 0; } }
@media (max-aspect-ratio: 20/21) { .mp-od-maiden { left: auto; right: -8%; height: 46vh; opacity: .95; } }

/* free spins open as a moon gate onto the night sky */
.mp-gate { position: absolute; left: 50%; top: 46%; width: min(86vmin, 680px); aspect-ratio: 1; margin: calc(min(86vmin, 680px) / -2) 0 0 calc(min(86vmin, 680px) / -2); border-radius: 50%;
  background: var(--bg-freePortrait, var(--bg-free)) center / cover no-repeat; box-shadow: 0 0 0 10px #e8c063, 0 0 0 14px #6b4210, 0 0 60px 16px #dfe7ffaa; }
@media (min-aspect-ratio: 1/1) { .mp-gate { background-image: var(--bg-free); } }
#cr-intro.show .mp-gate { animation: mp-gate-open 1.2s cubic-bezier(.2,.9,.2,1) both; }
@keyframes mp-gate-open { from { transform: scale(.08); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
html.cr-reduced #cr-intro.show .mp-gate, html.cr-reduced .cr-overlay.show .mp-od-maiden { animation: none; }

/* an upright phone: the medallions stand on the roof's two eaves, either side of the crest, so the board keeps its room */
@media (max-aspect-ratio: 20/21) {
  .cr-meters, .cr-fs { position: relative; z-index: 2; }
  .cr-meters { max-width: none; justify-content: space-between; gap: 8px; }
  .cr-board-wrap { margin-top: calc(var(--mp-roof, 0px) * 0.44); }
  .cr-meter-box { min-width: 118px; min-height: 50px; padding: 4px 14px; }
}

/* an upright phone under the RGS panel: a slimmer header, so the board keeps at least 80% of the width (Gate B portrait) */
@media (max-aspect-ratio: 20/21) {
  html.asgf-menu .mp-logo { height: 58px; }
  html.asgf-menu .cr-meter-box { min-height: 44px; padding: 2px 14px; }
  html.asgf-menu .cr-board-wrap { margin-top: calc(var(--mp-roof, 0px) * 0.4); }
  html.asgf-menu .mp-logo { height: 56px; }
  html.asgf-menu .mp-guardian { bottom: calc(100% + var(--mp-roof, 0px) * 0.3 + 14px); height: min(140px, 18vh); }
}

/* ------------------------------------------------------------------ third pass (re-review, 10 Nov)
   A celebrated cluster's pearl-light sunburst holds while the cluster shows (cleared with its outline). */
.mp-burst-hold { position: absolute; width: 95%; aspect-ratio: 1; margin: -47.5% 0 0 -47.5%; z-index: 3; pointer-events: none; border-radius: 50%; mix-blend-mode: screen;
  background:
    radial-gradient(closest-side, transparent 14%, #fff4d0aa 22%, #ffd27a66 36%, transparent 62%),
    repeating-conic-gradient(from 0deg, #ffe08a00 0deg 7deg, #fff3c4 10deg, #ffe08a00 13deg 20deg);
  /* a clear centre, so the kit's amount chip on the cluster stays readable */
  -webkit-mask: radial-gradient(closest-side, transparent 15%, #000 24%, #000 48%, transparent); mask: radial-gradient(closest-side, transparent 15%, #000 24%, #000 48%, transparent); }

/* the Moon Pearl: a smaller value badge so the pearl shows, and five crescents round it lit to its step */
.cr-tile.cr-mwild .cr-mult { font-size: 13px; bottom: 5%; padding: 0 5px; border-width: 1px; background: #11163bcc; }
svg.mp-phases { position: absolute; left: var(--cell-gap); top: var(--cell-gap); width: calc(100% - 2 * var(--cell-gap)); height: calc(100% - 2 * var(--cell-gap)); transform: none; display: block; z-index: 2; pointer-events: none; overflow: visible; }
svg.mp-phases path { fill: #0d1238cc; stroke: #9fb6ffaa; stroke-width: 0.9; }
svg.mp-phases g.on path { fill: #fffbea; stroke: #ffd36a; stroke-width: 1.2; filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px #ffe08a); }

/* an upright phone: the Maiden in a fixed slot top right, beside the logo, above the medallions: never cut at the top,
   never behind SPIN WIN. The slot shows her from the head down (a bust); she grows a little when she cheers. */
@media (max-aspect-ratio: 20/21) {
  .mp-guardian, html.asgf-short .mp-guardian, html.asgf-menu .mp-guardian { position: fixed; top: 6px; right: 6px; bottom: auto; left: auto; width: 26vw; max-width: 120px; height: var(--mp-slot, 112px); aspect-ratio: auto;
    overflow: hidden; transform-origin: 100% 0;
    /* a soft cut-out edge, not a pasted box */
    -webkit-mask: linear-gradient(to bottom, #000 62%, transparent), linear-gradient(to right, transparent, #000 18%); -webkit-mask-composite: source-in;
    mask: linear-gradient(to bottom, #000 62%, transparent), linear-gradient(to right, transparent, #000 18%); mask-composite: intersect; }
  html.asgf-short .mp-guardian { --mp-slot: 64px; }
  html.asgf-menu .mp-guardian { --mp-slot: 66px; }
  html.cr-topbar .mp-guardian { top: 2px; }
  .mp-guardian .mp-still, .mp-guardian video { object-fit: cover; object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 2%; }
  .mp-guardian .mp-aura { left: 0; right: 0; top: 0; bottom: 0; }
  .mp-guardian.cheer, .mp-guardian.joy { animation: none; transform: scale(1.18); transition: transform .25s ease-out; z-index: -1; }
}

/* the RTP plaque below the roof's right bell on a wide screen */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) and (min-height: 541px) {
  .cr-head .cr-chip-mode { top: calc(var(--mp-roof, 0px) * 0.94 + 46px); }
}

/* an upright phone in free spins: the two free-spins plaques stand on the eaves like the medallions, clear of the crest */
@media (max-aspect-ratio: 20/21) {
  .cr-fs { max-width: none; justify-content: space-between; gap: 8px; }
  .cr-fs > div { flex: 0 1 34%; min-width: 0; }
  body.cr-free .cr-board-wrap { margin-top: calc(var(--mp-roof, 0px) * 0.62); }
}

/* the effects layer stays inside the board, so a burst near the edge never spills over the message line or the HUD */
.mp-fx { overflow: hidden; border-radius: 12px; }

/* ------------------------------------------------------------------ follow-up pass (feat/moonpearl-fx-2)
   A phone held upright: the Maiden's half-body pop-in on a celebrated win, over the board's right edge (above the HUD,
   never over it), shown from the head down. */
.mp-popin { display: none; }
@media (max-aspect-ratio: 20/21) {
  .mp-popin { display: block; position: absolute; right: -10px; bottom: 6%; width: 58%; height: 72%; z-index: 7; pointer-events: none; opacity: 0; overflow: hidden;
    -webkit-mask: linear-gradient(to bottom, #000 70%, transparent), linear-gradient(to right, transparent, #000 22%); -webkit-mask-composite: source-in;
    mask: linear-gradient(to bottom, #000 70%, transparent), linear-gradient(to right, transparent, #000 22%); mask-composite: intersect;
    }
  .mp-popin .mp-still, .mp-popin video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.45); transform-origin: 50% 0; }
  .mp-popin video { opacity: 0; } .mp-popin video.on { opacity: 1; } .mp-popin.video .mp-still { opacity: 0; }
  /* a dusk-violet glow behind her, so the cut-out reads against the busy tiles */
  .mp-popin::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 55% at 55% 30%, #3a1f6aee, #2a1650aa 55%, transparent 80%); }
}

/* the Moon Pearl's crescents: lit ones bright and glowing, unlit ones dim */
svg.mp-phases path { fill: #0b0f2e; fill-opacity: .55; stroke: #6f80c0; stroke-opacity: .5; stroke-width: 0.7; }
svg.mp-phases g.on path { fill: #ffffff; fill-opacity: 1; stroke: #ffe08a; stroke-opacity: 1; stroke-width: 1.4;
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px #fff1b8) drop-shadow(0 0 9px #ffd36a); }
/* one badge size for every value (×2 and ×3 matched to ×10) */
.cr-tile.cr-mwild .cr-mult { font-size: 12px; padding: 0 4px; }

/* the cluster sunburst: thicker rays, less wash over the tiles (desktop matched to the phone) */
.mp-burst-hold { width: 85%; margin: -42.5% 0 0 -42.5%;
  background:
    radial-gradient(closest-side, transparent 16%, #fff4d055 24%, #ffd27a22 38%, transparent 58%),
    repeating-conic-gradient(from 0deg, #ffe08a00 0deg 6deg, #fff3c4 9deg 13deg, #ffe08a00 16deg 24deg); }

/* a phone: the Maiden on the big-win and free-spins screens stands low at the right, under the TAP prompt */
@media (max-aspect-ratio: 20/21) {
  .mp-od-maiden { right: -10%; height: 34vh; }
}
.cr-overlay .cr-hint, .cr-overlay .cr-big-amount, .cr-overlay .cr-feat-sub { position: relative; z-index: 1; text-shadow: 0 1px 3px #000c; }

/* the TAP prompts on a pill, readable over the moon gate and the Maiden */
.cr-overlay .cr-hint { background: #0b0820c0; padding: 4px 14px; border-radius: 999px; color: #fff4d6; }

/* a very short phone under the RGS panel (360×480: about 300 px above it): the slimmest header, so the board keeps at
   least 55% of the width (Gate B portrait). Screens up to about 520 px tall only: 360×640 keeps the fuller header. */
@media (max-aspect-ratio: 20/21) and (max-height: 520px) {
  html.asgf-short.asgf-menu .mp-logo { height: 32px; }
  html.asgf-short.asgf-menu .cr-meter-box { min-height: 34px; min-width: 104px; padding: 0 12px; }
  html.asgf-short.asgf-menu .cr-meter-box .k { font-size: 12px; }
  html.asgf-short.asgf-menu .cr-meter-box .v { font-size: 13px; min-height: 0; }
  html.asgf-short.asgf-menu .cr-board-wrap { margin-top: calc(var(--mp-roof, 0px) * 0.06); }
  html.asgf-short.asgf-menu .mp-guardian { --mp-slot: 44px; }
}

/* only one Maiden at a time: the corner one steps out while the half-body pop-in shows */
.mp-guardian { transition: opacity .2s; }
html.mp-popping .mp-guardian { opacity: 0; }
/* a narrower pop-in, low on the board's right edge */
@media (max-aspect-ratio: 20/21) { .mp-popin { width: 46%; height: 60%; bottom: 2%; right: -14px; } }
/* a Moon Pearl tile sits above the burst rays, so its crescents read */
.cr-tile.cr-mwild { z-index: 4; }

/* the amount and sum chips stay above a raised Moon Pearl tile */
.cr-board .cr-chips { z-index: 5; }

/* bigger contrast between lit and unlit crescents */
svg.mp-phases path { fill: #070a24; fill-opacity: .7; stroke: #3a4680; stroke-opacity: .8; }
svg.mp-phases g.on path { fill: #ffffff; stroke: #ffd36a; stroke-width: 1.6; }

/* Under the RGS panel the kit lays a short phone's logo and meters on one row (clusterreels.css, frames up to 640 px).
   With the pavilion's roof and crest that row hides the crest and crops the roof at 360x640, so on screens 561-640 px
   tall Moonpearl keeps its own column: the logo, the medallions on the eaves, the roof, the board. The one-row header
   stays for the shortest screens (360x480), where Gate B needs the board at 55% of the width. */
@media (max-aspect-ratio: 20/21) and (min-height: 561px) and (max-height: 640px) {
  html.asgf-menu.asgf-short .cr-stage { display: flex; padding-top: 4px; }
  html.asgf-menu.asgf-short .cr-head { width: 100%; }
  html.asgf-menu.asgf-short .mp-logo { height: 48px; }
  html.asgf-menu.asgf-short .cr-meters { width: 100%; }
  html.asgf-menu.asgf-short .cr-board-wrap { margin-top: calc(var(--mp-roof, 0px) * 0.46); }
}

/* ------------------------------------------------------------------ gestures pass (feat/moonpearl-gestures, Jonny 10 Nov)
   The Maiden stands RIGHT of the board on wide screens and phones on their side, turned toward it (she felt off on the
   left, facing away). Her clips now share one framing (720x960 crop of the 9:16 masters, room above her head for the
   arms-up cheer), so idle, win and big win cut into each other without a jump. An upright phone keeps the corner slot. */
@media (min-aspect-ratio: 20/21) {
  .mp-guardian { right: auto; left: calc(100% + var(--mp-bw, 400px) * 0.27); }
}
/* a phone on its side: the right is the logo and the controls column, so she keeps the free room left of the board,
   under the meters, mirrored so she still faces the board and her gestures reach toward it */
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  .mp-guardian { left: auto; right: calc(100% + 10px); }
  .mp-guardian .mp-still, .mp-guardian video { transform: scaleX(-1); }
}
/* the big-win and free-spins screens: she rises at the right of the title, never over it */
@media (min-aspect-ratio: 20/21) {
  .mp-od-maiden { left: auto; right: max(-40px, calc(50% - 340px - min(72vh, 660px) * 0.75)); }
}