/* Holi Colours skin on the shared game shell: airbrushed festival pigment under ONE key light — the low afternoon sun
   from the upper left (scene, frame, symbols and the spin drop all take it; a rose-violet rim light on the far side).
   A sunlit haveli courtyard of cusped arches under marigold swags with powder clouds drifting (or kite rooftops at
   dusk), a recessed ivory marble reel window in a bevelled marble rim with a brass inlay, inside a rangoli on the
   floor with heaps of shaded marigolds at its sides and a garland of blooms arcing over the reels, plaques for the balance
   and the win, a teardrop spin button at the bottom centre (wide screens), a colour downpour at dusk in the Colour Spins
   and the powder burst between them. Theme tokens (--night, --pink, --leaf, --panel*, --ink, --muted, --gilt, --sky*,
   --wall*, --arch-line, --roof, --dusk, --rain-*, --cloud, --sp*) come from skin.js themeMap: text is pushed until it
   reads at ≥ 4.6:1 on every panel of the preset. Pigment is decoration only, never text. Animated properties: transform
   and opacity only. */
:root{
  --night:#2A0A3D; --pink:#FF4FA3; --leaf:#239961; --panel:#1D072B; --panel-hi:#371A48;
  --ink:#FFF5FA; --muted:#D9C3D9; --gilt:#FF6DB2;
  --sky-top:#20082E; --sky-low:#7A2770; --wall:#5A2A47; --wall-lo:#1B0628; --arch-line:#FF7AB9; --roof:#170522; --dusk:#7B3A35;
  --rain-a:#B9367C; --rain-b:#1F6E5E; --cloud:#22082F;
  --btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--pink) 62%,#FFFFFF),var(--pink) 58%,color-mix(in srgb,var(--pink) 94%,#000));
  --sp:#FF4FA3; --sp-hi:#FFAAD3; --sp-lo:#94216F; --sp-refl:#C93B89; --sp-edge:#1B0628; --sp-ink:#1F072D; --btn-ink:#1F072D;
  --display:"Yatra One","Hind",system-ui,sans-serif; --ui:"Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:16px; --radius-sm:10px; --line:color-mix(in srgb,var(--pink) 45%,transparent); --panel-border:var(--line);
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--panel));
  --hud-bg:linear-gradient(180deg,color-mix(in srgb,var(--panel-hi) 92%,transparent),color-mix(in srgb,var(--panel) 96%,transparent));
  --ibtn-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --ibtn-ink:var(--ink);
  --corner-bg:linear-gradient(180deg,var(--panel-hi),var(--panel));
  /* the reels window: warm ivory marble (makrana) with faint rose-grey veins, lit from the upper left */
  --window-bg:linear-gradient(118deg,transparent 0 22%,rgba(140,96,90,.09) 22.6%,transparent 24% 58%,rgba(140,96,90,.07) 58.8%,transparent 60.5%),
    linear-gradient(162deg,transparent 0 40%,rgba(140,96,90,.06) 41%,transparent 43% 78%,rgba(140,96,90,.05) 79%,transparent 81%),
    radial-gradient(130% 100% at 26% 10%,#FCF7EF 0,#F2E8DB 50%,#E2D3C1 100%);
  --window-radius:12px; --reel-sep:rgba(90,48,40,.16); --spin-blur:1.2px;
  --spin-ring:transparent; --win-radius:14px;
  --win-glow:color-mix(in srgb,var(--pink) 75%,transparent);
  --paint-plate:#2A0A3D; --paint-ink:#FBE3A6; --pill-bg:#2A0A3D; --pill-ink:#FBE3A6; --pill-edge:#D9A843; --smudge-alpha:.34;
  --brass:#D9A843; --brass-hi:#FFF0C0;
  --focus:var(--gilt);
  color-scheme:dark;
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: the courtyard (default), the kite rooftops, the downpour of the Colour Spins; silhouettes are masks from
   skin.js. Only the powder clouds and the rain move (slowly), and the layers fade. */
.scene{background:var(--sky-top)}
.scene .courtyard,.scene .rooftops,.scene .downpour{transition:opacity .9s ease}
.scene .courtyard>i,.scene .rooftops>i,.scene .downpour>i{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center bottom;mask-position:center bottom}
.scene .courtyard .sky{background:radial-gradient(70% 45% at 50% 58%,color-mix(in srgb,var(--pink) 26%,transparent),transparent 70%),radial-gradient(55% 45% at var(--hc-sun-at,12% 4%),color-mix(in srgb,#FFB36B 34%,transparent),transparent 72%),linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 70%,var(--dusk) 100%)}
/* the arcade behind the openings: a shaded hall (darker than the sunlit wall), the colour haze glowing inside it
   behind the board */
.scene .courtyard .inner{background:radial-gradient(42% 34% at 50% 60%,color-mix(in srgb,var(--pink) 30%,transparent),transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--wall-lo) 70%,var(--wall)) 0,var(--wall-lo) 55%,color-mix(in srgb,var(--wall-lo) 70%,#000) 100%);-webkit-mask-image:var(--hc-inner);mask-image:var(--hc-inner)}
/* the wall takes the sun from the left: warm plaster there, falling into shade to the right and toward the floor */
.scene .courtyard .wall{background:linear-gradient(180deg,transparent 0,transparent 40%,color-mix(in srgb,var(--wall-lo) 80%,transparent) 100%),
  linear-gradient(90deg,color-mix(in srgb,var(--wall) 74%,#FFC58A) 0,var(--wall) 34%,color-mix(in srgb,var(--wall) 72%,var(--wall-lo)) 100%);-webkit-mask-image:var(--hc-wall);mask-image:var(--hc-wall)}
.scene .courtyard .arches{opacity:.4;background:linear-gradient(90deg,color-mix(in srgb,var(--arch-line) 60%,#FFE2C0),var(--arch-line) 45%,color-mix(in srgb,var(--arch-line) 50%,var(--wall-lo)));-webkit-mask-image:var(--hc-arches);mask-image:var(--hc-arches)}
.scene .courtyard .swags{opacity:.5;background:linear-gradient(180deg,#F2A63A,#D2702A 60%,#7E3418);-webkit-mask-image:var(--hc-swags);mask-image:var(--hc-swags);-webkit-mask-position:center top;mask-position:center top}
.scene .courtyard .floor{top:80%;background:radial-gradient(60% 70% at 50% 0,color-mix(in srgb,var(--pink) 16%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--wall-lo) 70%,var(--pink)),var(--wall-lo))}
/* the sun's spill across the courtyard from the upper left (static) */
.scene .courtyard .sun{background:linear-gradient(115deg,color-mix(in srgb,#FFC58A 16%,transparent) 0,transparent 42%)}
.scene .rooftops{opacity:0}
.scene .rooftops .sky{background:radial-gradient(60% 40% at 70% 78%,color-mix(in srgb,#FF8A1F 45%,transparent),transparent 70%),linear-gradient(180deg,var(--sky-top),var(--dusk) 85%)}
.scene .rooftops .kites{background:color-mix(in srgb,var(--pink) 70%,#FFFFFF);opacity:.75;-webkit-mask-image:var(--hc-kites);mask-image:var(--hc-kites);-webkit-mask-position:center top;mask-position:center top}
.scene .rooftops .roofs{background:var(--roof);-webkit-mask-image:var(--hc-roofs);mask-image:var(--hc-roofs)}
body.bg-rooftops .scene .rooftops{opacity:1}
body.bg-rooftops .scene .courtyard{opacity:0}
/* the colour downpour at dusk (Colour Spins, or the admin's background): slanted streaks of pigment rain under heavy
   clouds, a sheen on the wet floor; never brighter than the courtyard */
.scene .downpour{opacity:0}
.scene .downpour .sky{background:linear-gradient(180deg,var(--cloud) 0,color-mix(in srgb,var(--sky-low) 70%,var(--cloud)) 60%,var(--dusk) 100%)}
.scene .downpour .rain{top:-200px;opacity:.5;
  background:repeating-linear-gradient(104deg,transparent 0 22px,var(--rain-a) 22px 24px,transparent 24px 61px,var(--rain-b) 61px 63px,transparent 63px 97px);animation:hc-rain 1.6s linear infinite paused}
.scene .downpour .rain.r2{opacity:.32;animation-duration:2.3s;background:repeating-linear-gradient(100deg,transparent 0 37px,color-mix(in srgb,#FFC21B 60%,var(--cloud)) 37px 39px,transparent 39px 83px)}
.scene .downpour .clouds{background:var(--cloud);-webkit-mask-image:var(--hc-clouds);mask-image:var(--hc-clouds);-webkit-mask-position:center top;mask-position:center top}
.scene .downpour .puddle{top:82%;background:linear-gradient(180deg,color-mix(in srgb,var(--rain-a) 30%,transparent),color-mix(in srgb,var(--rain-b) 25%,var(--cloud)))}
body.fs .scene .downpour,body.bg-downpour-dusk .scene .downpour{opacity:1}
body.fs .scene .downpour .rain,body.bg-downpour-dusk .scene .downpour .rain{animation-play-state:running;will-change:transform}
body.fs .scene .courtyard,body.fs .scene .rooftops,body.bg-downpour-dusk .scene .courtyard{opacity:0}
/* drifting powder clouds (soft, slow) */
.scene .powder>i{position:absolute;width:42vmax;height:30vmax;border-radius:50%;opacity:.2;will-change:transform;animation:hc-drift 26s ease-in-out infinite alternate}
.scene .powder .p1{left:-10vmax;top:18%;background:radial-gradient(closest-side,#FF4FA3,transparent)}
.scene .powder .p2{right:-12vmax;top:8%;background:radial-gradient(closest-side,#FFC21B,transparent);animation-duration:32s;animation-direction:alternate-reverse}
.scene .powder .p3{left:30%;bottom:-14vmax;background:radial-gradient(closest-side,#2BB673,transparent);animation-duration:38s}
body.fs .scene .powder{opacity:.5}
.scene .vignette{background:radial-gradient(ellipse at 50% 46%,transparent 44%,rgba(10,2,16,.58) 100%)}
/* one static film-grain layer over the whole scene (never on the cells) */
.scene .grain{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px;opacity:.07;mix-blend-mode:overlay;pointer-events:none}
/* the shell's governed screen flash (big-win tiers): a faint pigment tint round the middle, never white */
.flash{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--pink) 18%,transparent),color-mix(in srgb,#FFC21B 8%,transparent) 45%,transparent 72%)}
@keyframes hc-rain{to{transform:translate(-46px,200px)}}
@keyframes hc-drift{from{transform:translate(-4vmax,0) scale(1)}to{transform:translate(5vmax,-2vmax) scale(1.12)}}

/* ---- title and round buttons */
/* the title: pigment-pink letters with a little thickness (a dark under-edge in the panel tone, ≥ 6:1 under the pink)
   and a soft shadow on the wall, no neon */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.03em;line-height:1.1;color:var(--gilt);text-shadow:0 2px 0 var(--panel),0 6px 14px rgba(10,2,16,.55)}
.ibtn{border:1px solid var(--line);border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.35)}
.ibtn:hover{border-color:var(--gilt)}

/* ---- the frame: the rangoli on the floor (an ellipse: the ring seen in perspective), the marble rim, the garland over
   the reels and the marigold heaps at the four sides. The decoration (.hc-deco) lies exactly over the reels window
   (its size from skin.js onConfig) behind it; padding in px and cells: the board measures its area for --cell. */
.frame{--fpt:calc(var(--cell)*.62 + 6px);padding:var(--fpt) 0 8px;gap:8px}
.hc-deco{position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--hc-reels,6));height:calc(var(--cell)*var(--hc-rows,4));transform:translateX(-50%);pointer-events:none}
.hc-deco .rangoli{position:absolute;left:-22%;top:-17%;width:144%;height:134%;opacity:.72;overflow:visible}
.hc-defs{position:absolute;width:0;height:0;overflow:hidden}
/* the rim: bevelled marble (light edge to the sun, dark edge away from it) with a brass inlay line round the window */
.hc-deco .rim{position:absolute;inset:-14px;border-radius:22px;background:linear-gradient(160deg,#FFF9F0 0,#EEE1CF 38%,#D2BCA6 100%);
  box-shadow:inset 2px 2px 1px rgba(255,255,255,.9),inset -2px -3px 2px rgba(110,58,44,.4),0 0 0 1px rgba(26,6,38,.6),0 24px 44px -8px rgba(10,2,16,.65)}
.hc-deco .rim::after{content:"";position:absolute;inset:7px;border-radius:15px;border:1.5px solid var(--brass);box-shadow:0 1px 0 rgba(255,255,255,.55),inset 0 1px 0 rgba(90,50,10,.35)}
.hc-deco .garland{position:absolute;left:-4%;width:108%;bottom:calc(100% + 2px);height:calc(var(--cell)*.6);overflow:visible;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.hc-deco .heap{position:absolute;width:calc(var(--cell)*.95);height:calc(var(--cell)*.73)}
.hc-deco .heap svg{width:100%;height:100%;overflow:visible}
.hc-deco .heap.w{left:calc(var(--cell)*-1.12);top:50%;transform:translateY(-50%)}
.hc-deco .heap.e{right:calc(var(--cell)*-1.12);top:50%;transform:translateY(-50%) scaleX(-1)}
.hc-deco .heap.n{left:calc(var(--cell)*-.95);top:calc(var(--cell)*-.6);transform:scale(.7)}
.hc-deco .heap.s{right:calc(var(--cell)*-.95);bottom:calc(var(--cell)*-.62);transform:scale(.7) scaleX(-1)}
.board,.message{position:relative;z-index:1}
/* the title bar and the option tablets stay over the frame's decoration */
.top,.side,.fsbar{position:relative;z-index:3}
body[data-variant="clean"] .hc-deco .rangoli,body[data-variant="clean"] .hc-deco .heap{display:none}
body[data-variant="clean"] .hc-deco .rim{inset:-8px;border-radius:18px}
body[data-variant="clean"] .hc-deco .rim::after{inset:4px;border-radius:13px}

/* ---- the reels on the marble: the stop bounces 6 % past and settles in 180 ms ("splash-bounce") */
/* the window sits in the rim: the sun from above throws a shadow into it; a 1 px light lip at its foot */
.reels-board .window{box-shadow:inset 0 16px 18px -12px rgba(60,20,40,.42),inset 0 -1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(60,20,40,.18)}
.reels-board .reel+.reel{box-shadow:inset 1px 0 0 rgba(255,255,255,.6)}
.splash-board .cell.landed .sym{animation:hc-land .2s var(--ease-out)}
@keyframes hc-land{0%{transform:translateY(5%)}100%{transform:none}}
.splash-board .reel.tease{box-shadow:inset 0 0 28px color-mix(in srgb,var(--pink) 80%,transparent)}
.reels-board .cell.win::after{border:2px solid color-mix(in srgb,var(--pink) 82%,#FFFFFF);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 16px color-mix(in srgb,var(--pink) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--pink) 24%,transparent)}
/* the rest step back into the marble (opacity, no filter on the cells) */
.reels-board .cell.dim .sym{filter:none;opacity:.4}
/* a painted cell: a burst of the spray's pigment with soft powdery edges, the word on an engraved brass-lined plate */
.splash-board .splat{inset:2%;border-radius:44% 56% 52% 48%/48% 42% 58% 52%;box-shadow:none;
  background:radial-gradient(closest-side at 46% 44%,color-mix(in srgb,var(--pig) 70%,#FFFFFF) 0,var(--pig) 34%,color-mix(in srgb,var(--pig) 78%,#2A0A3D) 60%,color-mix(in srgb,var(--pig) 45%,transparent) 78%,transparent 100%)}
.splash-board .splat b{color:var(--paint-ink);background:linear-gradient(180deg,#3E1656,#1E0730);box-shadow:0 0 0 1.5px var(--brass),0 2px 4px rgba(10,2,16,.4);letter-spacing:.06em}
/* a Pichkari primes: a short push along its barrel (no squash) */
.splash-board .cell.pump .sym{animation-name:hc-pump}
@keyframes hc-pump{0%{transform:none}45%{transform:translate(-3%,3%) scale(.96)}100%{transform:scale(1.03)}}
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.message{font-family:var(--ui);font-weight:600;color:var(--ink);max-width:100%;padding:3px 16px;border-radius:999px;background:color-mix(in srgb,var(--panel) 92%,transparent);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em}
.message:empty{background:none;border-color:transparent}
.message b{color:var(--gilt)}
.message .lm{display:inline-block;padding:0 .4em;border-radius:999px;background:var(--pill-bg);color:var(--pill-ink);box-shadow:0 0 0 1px var(--pill-edge);font-weight:800}

/* ---- the Colour Spins bar: at the garland's apex — the spin, the multipliers on the reels (pills), the total won */
.fsbar{position:relative;z-index:2;gap:16px;padding:5px 18px;border-radius:999px;background:linear-gradient(180deg,var(--panel-hi),var(--panel));border:1.5px solid var(--line);
  color:var(--ink);font-family:var(--ui);font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fsbar b{color:var(--gilt)}
.fsbar .fs-mults{display:flex;align-items:center;gap:6px}
.fsbar .fs-mults small{font-size:13px;font-weight:600;color:var(--muted)}
.fsbar .pills{display:flex;gap:4px}
.fsbar .pills small{text-transform:none;letter-spacing:0}
.mp{display:inline-block;font-family:var(--ui);font-weight:800;font-size:14px;line-height:1;padding:3px 7px;border-radius:999px;background:var(--pill-bg);color:var(--pill-ink);box-shadow:0 0 0 1px var(--pill-edge)}
.fsbar .mp{color:var(--pill-ink)}

/* ---- HUD "corners" (wide screens): the balance and the win as pigment plaques high on either side, under the
   garland's line; the spin at the bottom centre, the bet on the left (mirrored with the left-handed layout) */
.hud{border:1.5px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.35)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-corners .hud{grid-template-columns:1fr auto 1fr;grid-template-areas:"bet spin ."}
  .hud-corners .betctl{justify-self:start}
  body.lefty .hud-corners .hud{grid-template-areas:". spin bet"}
  body.lefty .hud-corners .betctl{justify-self:end}
  .hud-corners .hud>.bal,.hud-corners .hud>.win,.hud-corners .betctl{border:1.5px solid var(--line);border-radius:14px 14px 22px 22px;box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 3px 0 color-mix(in srgb,#FF8A1F 70%,transparent)}
  .hud-corners .hud>.bal,.hud-corners .hud>.win{padding:10px 20px 9px;min-width:170px}
}
.meter span{font-family:var(--ui);font-weight:600;color:var(--muted)}
.meter b{font-family:var(--ui);font-weight:600;color:var(--ink)}.meter.win b{color:var(--gilt)}
.meter small{color:var(--muted)}
.demo{background:var(--gilt);color:var(--panel)}
.pm,.auto{background:var(--ibtn-bg);border:1.5px solid var(--line);color:var(--ink)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gilt)}
.auto span{background:var(--gilt);color:var(--panel)}
/* the teardrop: drawn by the SVG (skin.js), which fills the button; the busy arrow turns, a press squashes it */
.spin{width:calc(var(--s)*1.02);height:calc(var(--s)*1.12);border-radius:40% 40% 50% 50%;background:none;box-shadow:none;color:var(--sp-ink);filter:drop-shadow(0 7px 10px rgba(0,0,0,.45))}
.spin svg{left:0;top:0;width:100%;height:100%;transform:none}
.spin .td-arrow{transform-box:view-box;transform-origin:50% 64%}
.spin.busy .td-arrow{animation:hc-turn 1.6s linear infinite}
.spin.kick svg{animation:hc-press .2s var(--ease-out)}
.spin:disabled{filter:drop-shadow(0 7px 10px rgba(0,0,0,.45)) brightness(.7) saturate(.6)}
@keyframes hc-turn{to{transform:rotate(360deg)}}
@keyframes hc-press{0%{transform:none}40%{transform:translateY(3%) scale(.97)}100%{transform:none}}
.side .tablet{background:linear-gradient(180deg,var(--panel-hi),var(--panel));border:1.5px solid var(--line);color:var(--ink)}
.tablet .th{font-family:var(--display);font-weight:400;color:var(--gilt)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays */
.panel{color:var(--ink)}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.panel h3{color:var(--gilt)}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.03em}
.ptc{background:color-mix(in srgb,var(--panel) 60%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:12px;background:radial-gradient(130% 100% at 26% 10%,#FCF7EF,#F2E8DB 50%,#E2D3C1);box-shadow:inset 0 8px 10px -8px rgba(60,20,40,.4),inset 0 0 0 1px rgba(60,20,40,.18)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.special p{margin:0 0 6px}
.special.hc-special{grid-template-columns:auto 1fr}
.hc-cross{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:2px;padding:4px;border-radius:10px;background:radial-gradient(130% 100% at 26% 10%,#FCF7EF,#F2E8DB 50%,#E2D3C1);width:max-content}
.hc-cross i{position:relative;display:grid;place-items:center;border-radius:5px;background:rgba(42,10,61,.07)}
.hc-cross i.nb{background:radial-gradient(circle at 36% 30%,#FFAAD3 0 14%,#FF4FA3 50%,#B0216A)}
.hc-cross i.nb b{font-size:11px;font-weight:800;letter-spacing:.02em;color:#FBE3A6;background:#2A0A3D;box-shadow:0 0 0 1px #D9A843;border-radius:999px;padding:1px 3px;line-height:1.2}
.hc-cross .src .sym{position:absolute;inset:0;width:100%;height:100%}
.hc-pills{display:flex;gap:6px;margin:4px 0 10px}
.ovcard h2{color:var(--gilt);text-shadow:0 3px 0 var(--panel),0 10px 24px rgba(10,2,16,.6)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}

/* ---- the powder burst (Colour Spins in / out): seven clouds of mid-tone pigment (40 % pigment on the night) burst from
   the centre, cover the courtyard while the board is swapped, then spread and clear. Over the night the luminance step
   stays under 0.10 (no flash there); over the white marble reels window (23–33 % of the viewport) the opaque cover
   darkens it by ≈ 0.65–0.94 and restores it: ONE general flash per transition (entry and exit are a whole round
   apart), under WCAG 2.3.1's 3 a second; no cloud is saturated red (skin-check). Never white; transform and opacity
   only. Reduced motion (.calm) is the same single darken–restore pair over 300 ms. */
.powderfx{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden}
.powderfx.show{display:block}
.powderfx .puff{position:absolute;left:calc(50% + 14vmax*cos(var(--a)));top:calc(50% + 10vmax*sin(var(--a)));width:150vmax;height:150vmax;border-radius:50%;opacity:0;will-change:transform,opacity;
  transform:translate(-50%,-50%) scale(.05);background:radial-gradient(closest-side,var(--c) 0 55%,color-mix(in srgb,var(--c) 60%,transparent) 75%,transparent)}
.powderfx .c-p{--c:color-mix(in srgb,#FF4FA3 40%,var(--night))}.powderfx .c-y{--c:color-mix(in srgb,#F5B700 40%,var(--night))}.powderfx .c-g{--c:color-mix(in srgb,#2BB673 40%,var(--night))}
.powderfx .c-b{--c:color-mix(in srgb,#3D8BFF 40%,var(--night))}.powderfx .c-v{--c:color-mix(in srgb,#9B5CFF 40%,var(--night))}.powderfx .c-o{--c:color-mix(in srgb,#FF8A1F 40%,var(--night))}
.powderfx.calm{background:color-mix(in srgb,var(--pink) 40%,var(--night));opacity:0}

/* ---- big wins: clouds of powder and drops rise round the card (soft shapes that fade, never a light) */
.powder-clouds{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.powder-clouds>i{position:absolute;left:var(--x);bottom:-12vh;opacity:0;will-change:transform,opacity;animation:hc-rise 2.8s cubic-bezier(.3,.1,.4,1) var(--d) forwards}
.powder-clouds .cloud{width:calc(18vmin*var(--s));height:calc(13vmin*var(--s));border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 70%,transparent),transparent)}
.powder-clouds .drop{width:calc(14px*var(--s));height:calc(18px*var(--s));border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 36% 34%,color-mix(in srgb,var(--c) 45%,#FFFFFF) 0 14%,var(--c) 46%,color-mix(in srgb,var(--c) 70%,#2A0A3D))}
@keyframes hc-rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.85}100%{opacity:0;transform:translateY(-78vh) scale(1.3)}}

/* ---- reduced motion: no rain, no drifting powder, no turning arrow, no squash, no rising clouds; shell.css caps every
   other animation, the board tints the cells at once */
body.still .scene .downpour .rain,body.still .scene .powder>i,body.still .spin.busy .td-arrow,body.still .spin.kick svg,body.still .splash-board .cell.landed .sym,body.still .splash-board .cell.pump .sym{animation:none}
body.still .powder-clouds{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .downpour .rain,.scene .powder>i,.spin.busy .td-arrow,.spin.kick svg,.splash-board .cell.landed .sym{animation:none!important}
  .powder-clouds{display:none}
  .scene .courtyard,.scene .rooftops,.scene .downpour{transition-duration:.3s}
}

/* ---- phones: 6 × 56 px of reels in 344 px (no side heaps), a lower garland, the bar compact */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:calc(var(--cell)*.5 + 4px);padding:var(--fpt) 0 6px;gap:6px}
  .hc-deco .heap.w,.hc-deco .heap.e{display:none}
  .scene .courtyard .swags{opacity:.3}
  .hc-deco .heap.n{left:calc(var(--cell)*-.15);top:calc(var(--cell)*-.98)}
  .hc-deco .heap.s{right:calc(var(--cell)*-.15);bottom:calc(var(--cell)*-.95)}
  .hc-deco .rangoli{left:-6%;top:-16%;width:112%;height:132%;opacity:.5}
  .hc-deco .rim{inset:-7px;border-radius:16px}
  .hc-deco .rim::after{inset:3px;border-radius:13px}
  .hc-deco .garland{height:calc(var(--cell)*.5)}
  .hud{background:var(--hud-bg)}
  .logo h1{font-size:clamp(20px,6.2vw,34px)}
  /* the header stays on the night sky (the title reads at ≥ 4.5:1 over every layer): the sun's glow lights the wall
     under it, and the top of the vignette is a short shade of the sky's own top colour */
  :root{--hc-sun-at:8% 34%}
  .scene .vignette{background:linear-gradient(180deg,var(--sky-top) 0,color-mix(in srgb,var(--sky-top) 82%,transparent) 64px,transparent 132px),radial-gradient(ellipse at 50% 46%,transparent 44%,rgba(10,2,16,.58) 100%)}
}
@media (max-width:400px){
  .fsbar{gap:8px;padding:4px 10px;font-size:13px}
  .fsbar .fs-mults>small,.fsbar .pills small{display:none}
  .message{font-size:14px;padding:2px 10px}
}