/* Dream Factory skin on the shared game shell: a dream works at night, lit by the moon. ONE cool key light from the top
   left (the moon in the arched window) and a warm rim from the night light at the bottom right, on the scene, the glazed
   tray, the cornice, the brass, the porcelain cloud spin button and the symbols (art.js). The factory floor is one static
   SVG in depth (skin.js FACTORY: its gradient stops are painted here from the theme tokens), or a yard of clouds under the
   stars; one layer of grain and a vignette over both. A glazed plum tray carries the grid (its window recessed, tinted by
   the dream level, lit from above — from below once gravity flips at level 3), the HUD is the conveyor loop (a velvet belt
   with brass rollers), pillow down for big wins and a velvet pillow that wipes and turns into the upside-down dreamscape
   of the Sleepwalk Spins. Theme tokens (--pillow, --night, --lamp and the plum / tray shades) come from skin.js themeMap.
   Every text stands on the night or a plum ground in light ink, or on the pastel pillow in night ink (≥ 4.5:1 in all three
   presets). Only transform and opacity animate; no CSS filter on anything that moves. */
:root{
  --pillow:#FFC1DB; --night:#2A2350; --lamp:#FFEA9E; --bg:#2A2350;
  --night-hi:#3C3561; --night-lo:#1B1734; --plum:#4A3F69; --plum-hi:#5D4F7A; --plum-lo:#221C40;
  --tray:#5A4774; --tray-2:#6A5380; --tray-3:#56527A; --tray-4:#2E2550; --pillow-soft:#FFDDEB; --lamp-soft:#FFF3C6; --btn-ink:#2A2350;
  --lv1:#FFDDEB; --lv2:#FFC1DB; --lv3:#FFD5BC; --lv4:#FFEA9E; /* the dream levels (skin.js themeMap): bubbles and window tint */
  --lv-glow-c:color-mix(in srgb,var(--lamp) 62%,transparent); --lv-light-c:rgba(236,240,255,.14); --lv-shade-c:rgba(20,12,44,.22);
  --cream:#FFF6E8; --ink:var(--cream); --muted:#E6DDF2;
  --moonlight:#DCE2FF; --nightlight:#FFD898; /* the two lights: cool key (top left), warm rim (bottom right) */
  --brass-hi:#FFF1C6; --brass:#D4A94E; --brass-lo:#6B4A16;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif; --ui:"Quicksand","Avenir Next",system-ui,sans-serif;
  --radius:20px; --radius-sm:13px; --line:color-mix(in srgb,var(--pillow) 34%,transparent);
  --glaze:linear-gradient(158deg,color-mix(in srgb,var(--plum-hi) 82%,var(--moonlight)) 0%,var(--plum-hi) 18%,var(--plum) 52%,var(--plum-lo) 100%);
  --panel-bg:linear-gradient(180deg,var(--plum),var(--night) 70%); --panel-border:color-mix(in srgb,var(--pillow) 40%,transparent);
  --hud-bg:radial-gradient(70% 140% at 22% 0%,color-mix(in srgb,var(--moonlight) 9%,transparent),transparent 60%),linear-gradient(180deg,var(--plum-hi),var(--plum) 52%,var(--plum-lo));
  --ibtn-bg:linear-gradient(160deg,var(--plum-hi),var(--plum) 60%,var(--plum-lo)); --ibtn-ink:var(--pillow-soft);
  --btn-bg:linear-gradient(180deg,var(--pillow-soft),var(--pillow) 62%,color-mix(in srgb,var(--pillow) 82%,var(--night)));
  --window-radius:calc(var(--cell)*.16); --window-bg:transparent; --reel-sep:rgba(255,255,255,.035); --sym-size:90%; --cluster-radius:24%;
  --win-ring:var(--lamp); --win-glow:color-mix(in srgb,var(--lamp) 70%,transparent); --hot-ring:var(--pillow-soft); --land-ring:var(--lamp); --tease-glow:var(--lamp);
  --fs-ring:color-mix(in srgb,var(--lamp) 45%,transparent); --fall-ease:cubic-bezier(.34,1.3,.64,1);
  --badge-bg:var(--night); --badge-ink:var(--cream); --float-ink:#FFFFFF; --float-stroke:var(--night);
  --focus:var(--lamp); --corner-bg:color-mix(in srgb,var(--plum) 90%,transparent);
  --spin-ring:transparent; /* the cloud is not round: its curl turns while busy instead */
  --veil-light:color-mix(in srgb,var(--pillow) 18%,transparent); --ov-plate:color-mix(in srgb,var(--night) 70%,transparent); --ov-plate-line:color-mix(in srgb,var(--lamp) 30%,transparent);
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene: the factory floor (default), the cloud yard and, in the Sleepwalk Spins, the upside-down dreamscape ---- */
.scene .factory,.scene .yard,.scene .dreamscape{transition:opacity .9s var(--ease-std,ease)}
.scene .yard i,.scene .dreamscape i{position:absolute;inset:0;display:block}
.scene .factory>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the factory's paint: the wall, the window sky, the moon, the beams, the far pipes (paler, closer to the haze), the
   near ones (darkest, the warm night light on their far edge), the floor and the light under the tray */
.dfs .w0{stop-color:var(--night-lo)}.dfs .w1{stop-color:var(--night)}.dfs .w2{stop-color:color-mix(in srgb,var(--night) 84%,var(--pillow))}
.dfs .k0{stop-color:color-mix(in srgb,var(--night) 82%,#8C9CF0)}.dfs .k1{stop-color:color-mix(in srgb,var(--night) 74%,var(--pillow))}
.dfs .h0{stop-color:var(--moonlight);stop-opacity:.34}.dfs .h1{stop-color:var(--moonlight);stop-opacity:0}
.dfs .b0{stop-color:var(--moonlight);stop-opacity:.09}.dfs .b1{stop-color:var(--moonlight);stop-opacity:0}
.dfs .fq{stop-color:color-mix(in srgb,var(--night) 72%,var(--pillow))}.dfs .fh{stop-color:color-mix(in srgb,var(--night) 60%,var(--pillow-soft))}
.dfs .fm{stop-color:color-mix(in srgb,var(--night) 76%,var(--pillow))}.dfs .fc{stop-color:color-mix(in srgb,var(--night) 88%,var(--pillow))}
.dfs .fr{stop-color:color-mix(in srgb,var(--night) 80%,var(--pillow))}
.dfs .nq{stop-color:color-mix(in srgb,var(--night-lo) 76%,var(--pillow))}.dfs .nh{stop-color:color-mix(in srgb,var(--night-lo) 68%,var(--pillow-soft))}
.dfs .nm{stop-color:color-mix(in srgb,var(--night-lo) 86%,var(--pillow))}.dfs .nc{stop-color:color-mix(in srgb,var(--night-lo) 80%,#000)}
.dfs .nr{stop-color:color-mix(in srgb,var(--night-lo) 72%,var(--nightlight))}
.dfs .g0{stop-color:color-mix(in srgb,var(--pillow) 50%,var(--lamp));stop-opacity:.2}.dfs .g1{stop-color:var(--pillow);stop-opacity:0}
.dfs .f0{stop-color:color-mix(in srgb,var(--night-lo) 72%,var(--plum))}.dfs .f1{stop-color:var(--night-lo)}
.dfs .seam{stroke:rgba(0,0,0,.16);stroke-width:2;fill:none}
.dfs .star{fill:var(--cream);opacity:.7}
.dfs .moon{fill:color-mix(in srgb,var(--cream) 80%,var(--moonlight))}
.dfs .mull{fill:none;stroke:color-mix(in srgb,var(--night) 88%,var(--pillow));stroke-width:10;stroke-linejoin:round}
.dfs .sill{fill:color-mix(in srgb,var(--night) 70%,var(--moonlight))}
.dfs .flange{fill:color-mix(in srgb,var(--night) 66%,var(--pillow-soft))}
.dfs .valve{fill:none;stroke:color-mix(in srgb,var(--night) 64%,var(--pillow-soft));stroke-width:7;stroke-linecap:round}
.dfs .edge{stroke:color-mix(in srgb,var(--night) 70%,var(--moonlight));stroke-width:2}
.dfs .nflange{fill:color-mix(in srgb,var(--night-lo) 70%,var(--pillow))}
/* the cloud yard: a night sky, the moon at the top left, banks of cloud lit from above */
.scene .yard,.scene .dreamscape{opacity:0}
.yard .sky{background:linear-gradient(180deg,var(--night-lo),var(--night) 40%,color-mix(in srgb,var(--night) 70%,var(--pillow)) 78%,color-mix(in srgb,var(--night) 55%,var(--pillow)))}
.yard .stars,.dreamscape .stars{background:var(--cream);opacity:.6;-webkit-mask:var(--df-stars) center/cover no-repeat;mask:var(--df-stars) center/cover no-repeat}
.scene .yard i.moon{inset:auto;left:13%;top:9%;width:10vmin;height:10vmin;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFFFFF,color-mix(in srgb,var(--cream) 85%,var(--moonlight)) 48%,color-mix(in srgb,var(--cream) 55%,var(--moonlight)));
  box-shadow:0 0 0 1.4vmin color-mix(in srgb,var(--moonlight) 10%,transparent),0 0 8vmin 3vmin color-mix(in srgb,var(--moonlight) 22%,transparent)}
.yard .far{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 56%,var(--moonlight)) 76%,color-mix(in srgb,var(--night) 70%,var(--pillow)) 86%);-webkit-mask:var(--df-clouds-far) center bottom/cover no-repeat;mask:var(--df-clouds-far) center bottom/cover no-repeat}
.yard .near{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 40%,var(--pillow-soft)) 86%,color-mix(in srgb,var(--night) 66%,var(--pillow)) 96%);-webkit-mask:var(--df-clouds-near) center bottom/cover no-repeat;mask:var(--df-clouds-near) center bottom/cover no-repeat}
.yard .glow{background:radial-gradient(60% 50% at 50% 46%,color-mix(in srgb,var(--pillow) 12%,transparent),transparent 70%)}
body.bg-cloud-yard .scene .factory{opacity:0}
body.bg-cloud-yard .scene .yard{opacity:1}
/* the Sleepwalk dreamscape: the sky hangs upside down (the glow at the top), islands float with their roots up */
.dreamscape .sky{background:linear-gradient(0deg,var(--night-lo),var(--night) 38%,color-mix(in srgb,var(--night) 65%,var(--lamp)) 82%,color-mix(in srgb,var(--night) 45%,var(--pillow)))}
.scene .dreamscape i.moon{inset:auto;left:13%;bottom:8%;width:12vmin;height:12vmin;border-radius:50%;
  background:radial-gradient(circle at 38% 66%,#FFFFFF,color-mix(in srgb,var(--pillow-soft) 80%,var(--moonlight)) 50%,color-mix(in srgb,var(--pillow) 60%,var(--night)));
  box-shadow:0 0 8vmin 3vmin color-mix(in srgb,var(--pillow) 18%,transparent)}
.dreamscape .islands{background:linear-gradient(0deg,color-mix(in srgb,var(--pillow) 42%,var(--night)) 0%,color-mix(in srgb,var(--plum-hi) 80%,var(--moonlight)) 30%,color-mix(in srgb,var(--night) 74%,var(--plum)) 70%);opacity:.6;transform:scaleY(-1);
  -webkit-mask:var(--df-islands) center/cover no-repeat;mask:var(--df-islands) center/cover no-repeat;animation:df-float 11s ease-in-out infinite alternate}
@keyframes df-float{from{transform:scaleY(-1) translateY(0)}to{transform:scaleY(-1) translateY(1.6%)}}
body.fs .scene .dreamscape{opacity:1}
.scene .grain{background:var(--df-grain) 0 0/160px 160px;opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.scene .vignette{background:radial-gradient(ellipse 75% 70% at 50% 44%,transparent 48%,rgba(10,6,24,.5) 100%)}

/* ---- title and round buttons: the title in the pillow pastel with a moonlit glow (no hard drop shadow); the round
   buttons are glazed porcelain lit from the top left */
.logo h1{font-family:var(--display);font-weight:600;letter-spacing:.02em;color:var(--pillow);
  text-shadow:0 1px 0 color-mix(in srgb,var(--night-lo) 85%,transparent),0 0 24px color-mix(in srgb,var(--pillow) 26%,transparent)}
.ibtn,.pm,.auto{border:0;box-shadow:inset 1px 1.5px 0 rgba(236,240,255,.16),inset -1px -2px 0 rgba(0,0,0,.26),0 3px 8px rgba(8,4,20,.4)}
.ibtn{border-radius:50%}
.ibtn:hover,.pm:hover:not(:disabled){box-shadow:inset 1px 1.5px 0 rgba(236,240,255,.22),inset -1px -2px 0 rgba(0,0,0,.26),0 0 0 1px color-mix(in srgb,var(--pillow) 55%,transparent),0 3px 8px rgba(8,4,20,.4)}

/* ---- the conveyor (variant "cloud-conveyor"): a glazed plum tray with a cloud cornice along its top edge, brass pipes
   down both sides and two pressure gauges at the top corners (wide screens only), and a velvet belt on brass rollers
   under the window. Padding in cell units: the board's --cell leaves room for it (cells.js layout). */
.frame{padding:calc(var(--cell)*.16) calc(var(--cell)*.24) calc(var(--cell)*.32);gap:6px}
.conveyor{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:calc(var(--cell)*.3);background:var(--glaze);
  box-shadow:inset 1.5px 2px 0 color-mix(in srgb,var(--moonlight) 22%,transparent),inset -2px -3px 0 rgba(8,4,20,.32),inset 0 0 0 1px rgba(8,4,20,.25),0 26px 56px rgba(8,4,20,.58)}
.conveyor i,.conveyor b{position:absolute;display:block}
/* the cornice: three soft lobes in the same glaze, moonlit along their top */
.conveyor .puffs{left:8%;right:8%;top:calc(var(--cell)*-.17);height:calc(var(--cell)*.24)}
.conveyor .puffs svg{display:block;width:100%;height:100%;overflow:visible}
.conveyor .puffs path{fill:color-mix(in srgb,var(--plum-hi) 86%,var(--moonlight));stroke:color-mix(in srgb,var(--moonlight) 30%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.conveyor .pipe{top:16%;bottom:14%;width:calc(var(--cell)*.13);border-radius:999px;
  background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi) 28%,var(--brass) 46%,var(--brass-lo) 58%,color-mix(in srgb,var(--brass) 70%,var(--nightlight)) 84%,var(--brass-lo))}
.conveyor .pipe::before,.conveyor .pipe::after{content:"";position:absolute;left:-26%;right:-26%;height:calc(var(--cell)*.07);border-radius:3px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 45%,var(--brass-lo))}
.conveyor .pipe::before{top:18%}.conveyor .pipe::after{bottom:18%}
.conveyor .pipe.l{left:calc(var(--cell)*-.19)}.conveyor .pipe.r{right:calc(var(--cell)*-.19)}
.conveyor .gauge{top:calc(var(--cell)*-.24);width:calc(var(--cell)*.4);aspect-ratio:48/56}
.conveyor .gauge.l{left:calc(var(--cell)*-.3)}.conveyor .gauge.r{right:calc(var(--cell)*-.3)}
.gauge svg{width:100%;height:100%;display:block}
.gauge .stub{fill:var(--brass)}.gauge .ao{fill:rgba(8,4,20,.35)}
.gauge .rim{fill:var(--brass);stroke:var(--brass-lo);stroke-width:1}
.gauge .dial{fill:#FBF6EE;stroke:color-mix(in srgb,var(--brass-hi) 70%,transparent);stroke-width:1}
.gauge .tick{stroke:#4A3F69;stroke-width:1.4;stroke-linecap:round}.gauge .hub{fill:var(--brass-lo)}
.gauge .needle{stroke:#B8565A;transform-origin:24px 24px;transform:rotate(-46deg)}
.gauge.r .needle{transform:rotate(-30deg)}
.gauge .glint{stroke:rgba(255,255,255,.7)}
.conveyor .belt{left:6%;right:6%;bottom:calc(var(--cell)*.075);height:calc(var(--cell)*.15);border-radius:999px;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--cell)*.11),rgba(0,0,0,.18) calc(var(--cell)*.11) calc(var(--cell)*.12)),
    linear-gradient(180deg,color-mix(in srgb,var(--plum-lo) 70%,var(--pillow)),var(--plum-lo) 60%,color-mix(in srgb,var(--plum-lo) 70%,#000));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--moonlight) 22%,transparent),inset 0 -1px 0 rgba(0,0,0,.3)}
.conveyor .roller{top:50%;width:calc(var(--cell)*.22);aspect-ratio:1;margin-top:calc(var(--cell)*-.11);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--brass-lo) 0 16%,transparent 18%),radial-gradient(circle at 36% 32%,var(--brass-hi),var(--brass) 45%,var(--brass-lo) 92%)}
.conveyor .roller.l{left:calc(var(--cell)*-.09)}.conveyor .roller.r{right:calc(var(--cell)*-.09)}
.board,.message{position:relative;z-index:1}
/* variant "clean": a plain glazed tray, no cornice, pipes, gauges or belt */
body[data-variant="clean"] .conveyor{border-radius:calc(var(--cell)*.24)}
body[data-variant="clean"] .conveyor>*{display:none}
body[data-variant="clean"] .frame{padding:calc(var(--cell)*.12) calc(var(--cell)*.14) calc(var(--cell)*.14)}

/* ---- the window: recessed into the tray (the moon above throws a shadow down into the niche, a light lip at its foot),
   the tray's glaze tinted by the dream level and lit from above — from below once the gravity flips (level 3 and 4):
   present-level.js sets data-lv / data-lv-up on the board and draws its own wash, light and level strip over it (those
   cross-fade). The tray is painted by the board's two pseudo-elements under the field: ::before lit from above, ::after
   lit from below, faded in by opacity when the gravity flips; the level's shade is a static colour under the tint. */
.cells-board{--df-tray:var(--tray);border-radius:var(--window-radius);
  box-shadow:0 0 0 1px rgba(8,4,20,.42),0 1.5px 0 1px color-mix(in srgb,var(--moonlight) 16%,transparent)}
.cells-board::before,.cells-board::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:var(--window-radius);
  background:radial-gradient(120% 80% at 28% 0%,color-mix(in srgb,var(--df-tray) 78%,var(--moonlight)) 0%,transparent 64%),linear-gradient(180deg,var(--df-tray),color-mix(in srgb,var(--df-tray) 74%,#000))}
.cells-board::after{opacity:0;transition:opacity .6s var(--ease-std,ease-out);
  background:radial-gradient(120% 80% at 72% 100%,color-mix(in srgb,var(--df-tray) 74%,var(--nightlight)) 0%,transparent 64%),linear-gradient(0deg,var(--df-tray),color-mix(in srgb,var(--df-tray) 74%,#000))}
.cells-board[data-lv-up="1"]::after{opacity:1}
.cells-board[data-lv="2"]{--df-tray:var(--tray-2)}
.cells-board[data-lv="3"]{--df-tray:var(--tray-3)}
.cells-board[data-lv="4"]{--df-tray:var(--tray-4)}
.cells-board .cs-field{box-shadow:inset 0 calc(var(--cell)*.13) calc(var(--cell)*.16) calc(var(--cell)*-.07) rgba(8,4,20,.5),inset 0 -1px 0 color-mix(in srgb,var(--moonlight) 14%,transparent)}
/* symbols carry their own contact shadow (art.js): no filter on the cells. A twin's orb is in its art; its glow on the
   board is the level presenter's badge. */
.cells-board .cell.win::before{border-width:2px;border-radius:var(--cluster-radius);background:color-mix(in srgb,var(--lamp) 9%,transparent)}
/* the level strip (present-level.js): porcelain bubbles and arrow over the tray's top edge; the twins panel in the
   Sleepwalk Spins */
.cells-board{--lv-ring:color-mix(in srgb,var(--pillow) 34%,transparent)}
.cells-board .lvb,.cells-board .lva,.cells-board .lvp{box-shadow:inset 0 0 0 1.5px var(--lv-ring),inset 1px 1.5px 0 rgba(236,240,255,.14),inset -1px -2px 0 rgba(0,0,0,.24)}
.cells-board .lvb.now{box-shadow:inset 0 0 0 2px var(--lvi,#17112B),0 0 0 2px var(--lvc,#C39BFF),0 0 12px color-mix(in srgb,var(--lvc,#C39BFF) 45%,transparent)}
.cells-board .lvb>b{font-weight:600}
.cells-board .lvp-t{font-family:var(--display);font-weight:600}
/* the soft settle (skin.js squashPresenter): a landing settle ≤ 6 %, against the ceiling when the gravity runs up */
.cells-board .cell.squash .face{transform-origin:50% 100%;animation:df-squash var(--sq-t,.38s) var(--ease-out,cubic-bezier(.2,.8,.2,1)) var(--sq-d,0ms) backwards}
.cells-board.sq-up .cell.squash .face{transform-origin:50% 0}
.cells-board .cell.pop.squash .face{animation:none}
@keyframes df-squash{0%{transform:none}30%{transform:scale(1.04,.95)}64%{transform:scale(.99,1.015)}100%{transform:none}}
/* the message: plain text at the foot of the window (no plate), the amount in the lamp's light */
.message{padding:2px 12px;font-weight:600;color:var(--cream);background:none;box-shadow:none}
.message b{color:var(--lamp)}
.message .tag{color:var(--muted);font-weight:600}

/* ---- the HUD: the conveyor loop. A velvet belt with a brass roller at each end; on wide screens two arms rise from its
   ends (the U round the stage) and the spin button sits in the middle of the belt. Labels in sentence case. */
.hud{position:relative;border:0;border-radius:999px;
  box-shadow:inset 1.5px 2px 0 color-mix(in srgb,var(--moonlight) 16%,transparent),inset -1px -3px 0 rgba(8,4,20,.32),0 14px 30px rgba(8,4,20,.45)}
.hud>.bal::before,.hud>.win::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--brass-lo) 0 16%,transparent 19%),radial-gradient(circle at 36% 32%,var(--brass-hi),var(--brass) 45%,var(--brass-lo) 92%);box-shadow:0 1px 2px rgba(8,4,20,.45)}
.hud>.bal{position:relative;padding-left:26px}.hud>.bal::before{left:0}
.hud>.win{position:relative;padding-right:26px}.hud>.win::after{right:0}
.meter span{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.meter b{font-family:var(--display);font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}.meter.win b{color:var(--lamp)}
.hud .meter.win.at-zero b{color:var(--muted)}
.meter small{color:var(--muted)}
.demo{color:var(--night);background:var(--lamp)}
.auto span{color:var(--night);background:var(--lamp)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--lamp),0 0 14px color-mix(in srgb,var(--lamp) 50%,transparent)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .game.hud-bar .hud{grid-template-columns:minmax(0,1fr) 214px auto 214px minmax(0,1fr);grid-template-areas:"bal bet spin . win";margin-top:6px}
  .hud-bar .hud>.bal{grid-area:bal}.hud-bar .hud>.betctl{grid-area:bet;justify-content:center}.hud-bar .hud>.win{grid-area:win;text-align:right}
  .hud-bar .hud>.spinbox{grid-area:spin;order:0}
}
/* the arms of the loop: only where the stage is wide enough to keep them clear of the tray */
@media (min-width:861px) and (min-aspect-ratio:5/4){
  .hud-bar .hud::before,.hud-bar .hud::after{content:"";position:absolute;bottom:50%;z-index:-1;width:14px;height:min(28vh,220px);pointer-events:none;border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,color-mix(in srgb,var(--plum-hi) 80%,var(--moonlight)),var(--plum) 45%,var(--plum-lo));box-shadow:0 0 0 1px rgba(8,4,20,.35)}
  .hud-bar .hud::before{left:22px}.hud-bar .hud::after{right:22px}
}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .hud{border-radius:24px 24px 18px 18px}
  .hud>.bal{padding-left:22px}.hud>.win{padding-right:22px}
  .hud>.bal::before,.hud>.win::after{width:14px;height:14px;margin-top:-7px}
  /* left-handed: balance and win swap sides, so do their rollers */
  body.lefty .hud>.bal{padding-left:0;padding-right:22px}body.lefty .hud>.bal::before{left:auto;right:0}
  body.lefty .hud>.win{padding-right:0;padding-left:22px}body.lefty .hud>.win::after{right:auto;left:0}
}
/* the porcelain cloud spin button: the cloud is the button (its own contact shadow, no filter); it settles when pressed
   and on every spin, its engraved curl turns while the spin is busy */
.spin{color:var(--btn-ink);background:none;box-shadow:none;border-radius:40%}
.spin svg{left:0;top:0;width:100%;height:100%;transform:none;transform-origin:50% 88%;transition:transform var(--t-press,90ms) var(--ease-out,ease-out)}
.spin .s0{stop-color:#FFFFFF}.spin .s1{stop-color:var(--pillow-soft)}.spin .s2{stop-color:color-mix(in srgb,var(--pillow) 80%,var(--night))}.spin .s3{stop-color:var(--pillow)}
.spin .r0{stop-color:var(--nightlight);stop-opacity:.95}.spin .r1{stop-color:var(--nightlight);stop-opacity:0}
.spin .puff{fill:url(#dfSpinG)}
.spin .rimlight{fill:none;stroke:url(#dfSpinR);stroke-width:1.6}
.spin .ao{fill:rgba(8,4,20,.42)}
.spin .sheen{stroke:rgba(255,255,255,.85);stroke-width:1.6}
.spin .curl .groove{stroke:var(--night)}.spin .curl .lip{stroke:rgba(255,255,255,.55)}.spin .curl .tip{fill:var(--night);stroke:none}
.spin .curl{transform-origin:32px 27px}
.spin:hover:not(:disabled){filter:none}
.spin:hover:not(:disabled) .puff{fill:url(#dfSpinG)}
.spin:active:not(:disabled){transform:none}
.spin:active:not(:disabled) svg{transform:scale(1.04,.94)}
.spin.kick svg{animation:df-kick .42s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.spin.kick .curl{animation:df-curl .42s var(--ease-out,ease-out)}
.spin.busy:not(.kick) .curl{animation:df-busy 1.2s linear infinite}
@keyframes df-kick{0%{transform:none}30%{transform:scale(1.05,.93)}64%{transform:scale(.99,1.02)}100%{transform:none}}
@keyframes df-curl{to{transform:rotate(-200deg)}}
@keyframes df-busy{to{transform:rotate(-360deg)}}
.spin:focus-visible{outline-offset:2px}

/* ---- the Sleepwalk bar: spin n of m, the dream level (bubbles, gravity arrow), the twins for good, the total won */
.fsbar{gap:14px;flex-wrap:wrap;justify-content:center;border:0;border-radius:999px;padding:5px 16px;background:color-mix(in srgb,var(--night) 92%,transparent);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;color:var(--cream)}
.fsbar b{color:var(--lamp)}
.fsbar small{font-size:13px;font-weight:600;color:var(--muted);margin-right:6px}
.fsbar .sw-level,.fsbar .sw-twins{display:inline-flex;align-items:center}
.fsbar .bub{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:600 13px/1 var(--display);font-style:normal;color:#17112B;background:var(--lv1);box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),inset -1px -2px 0 rgba(0,0,0,.18)}
.fsbar .bub.lv2{background:var(--lv2)}.fsbar .bub.lv3{background:var(--lv3)}.fsbar .bub.lv4{background:var(--lv4)}
.fsbar .grav{margin-left:5px;font-size:16px}

/* ---- overlays: a glazed plaque with a hairline of lamp light; buttons of pastel porcelain */
.overlay{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--night) 55%,transparent),color-mix(in srgb,var(--night) 94%,#000) 76%)}
.ovcard{position:relative;padding:28px clamp(20px,4vw,54px) 30px;border-radius:32px;background:var(--glaze);
  box-shadow:inset 1.5px 2px 0 color-mix(in srgb,var(--moonlight) 20%,transparent),inset -2px -3px 0 rgba(8,4,20,.3),0 24px 60px rgba(8,4,20,.6)}
.ovcard::before{content:"";position:absolute;inset:9px;border-radius:24px;border:1px solid color-mix(in srgb,var(--lamp) 28%,transparent);pointer-events:none}
.ovcard h2{font-weight:600;letter-spacing:.01em;font-size:clamp(40px,7vw,88px);line-height:1;text-wrap:balance;color:var(--pillow);text-shadow:0 1px 0 var(--plum-lo),0 0 28px color-mix(in srgb,var(--pillow) 30%,transparent)}
.ovamt{font-family:var(--display);font-weight:600;color:var(--lamp)}.ovcard p{color:var(--muted)}
.btn{font-weight:600;border-radius:999px;box-shadow:inset 1px 1.5px 0 rgba(255,255,255,.35),inset -1px -3px 0 rgba(0,0,0,.16),0 8px 18px rgba(8,4,20,.4)}
.btn.ghost{color:var(--pillow-soft)}
.panel{border-radius:24px;box-shadow:0 30px 80px rgba(8,4,20,.65),inset 1.5px 2px 0 color-mix(in srgb,var(--moonlight) 12%,transparent)}
.panel h2{font-weight:600;color:var(--pillow)}.panel h3{font-weight:600;color:var(--lamp)}
.panel .lead{color:var(--muted)}
.tablet .th{color:var(--pillow)}
.ptc,.chips button,.tog{background:color-mix(in srgb,#000 18%,var(--plum))}
.tog[aria-checked="true"]{background:color-mix(in srgb,var(--pillow) 34%,var(--plum))}.tog[aria-checked="true"]::after{background:var(--pillow-soft)}
.chips button[aria-pressed="true"]{background:var(--pillow);color:var(--night);border-color:var(--pillow)}
table.hist .won{color:var(--lamp)}
/* the paytable: symbol cards on glazed trays, the twins with their pay row, the dream levels as bubbles, the line maps */
.ptc{border-radius:14px;border-color:var(--line)}
.ptc .symbox,.twinrow .symbox{border-radius:12px;background:radial-gradient(120% 80% at 28% 0%,color-mix(in srgb,var(--tray) 78%,var(--moonlight)),transparent 64%),linear-gradient(180deg,var(--tray),color-mix(in srgb,var(--tray) 72%,#000))}
.ptc .sym,.twinrow .sym{position:relative;width:100%;height:100%}
.ptc h4{font-family:var(--display);font-weight:600;color:var(--cream)}
.special.twins{grid-template-columns:auto 1fr;align-items:start}
.twinrow{display:grid;grid-template-columns:repeat(2,58px);gap:6px}
.twinrow .symbox{position:relative;width:58px;height:58px;--cell:58px}
.special.twins table{border-collapse:collapse;width:min(260px,100%);font-size:15px}.special.twins td:last-child{text-align:right;font-weight:800}
.levels{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.levels li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.levels .bub{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 16px/1 var(--display);color:#17112B;background:var(--lv1);box-shadow:inset 1px 1.5px 0 rgba(255,255,255,.4),inset -1px -2px 0 rgba(0,0,0,.15)}
.levels .lv2 .bub{background:var(--lv2)}.levels .lv3 .bub{background:var(--lv3)}.levels .lv4 .bub{background:var(--lv4)}
.lmaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.lmap{margin:0;padding:6px 6px 4px;border-radius:10px;background:color-mix(in srgb,#000 18%,var(--plum));text-align:center}
.lmap svg{display:block;width:100%;height:auto}
.lmap circle{fill:color-mix(in srgb,var(--muted) 45%,transparent)}.lmap circle.on{fill:var(--lamp)}
.lmap polyline{fill:none;stroke:var(--pillow);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.lmap .lmap-n{display:block;font:600 13px/1.4 var(--display);color:var(--muted)}

/* ---- the pillow flip into (and out of) the Sleepwalk Spins: a velvet pillow with a piped edge wipes across, turns over
   and settles away (driven by skin.js; above the board, below the overlays): a muted pastel lit from the top left, never
   a bright sheet. Reduced motion: a dark night veil fades in and out instead. */
.df-pillow{position:fixed;inset:0;z-index:20;display:none;pointer-events:none;overflow:hidden}
.df-pillow.show{display:block}
.df-pillow .pillow{position:absolute;inset:-8vh -10vw;border-radius:30vmin;
  background:radial-gradient(60% 50% at 30% 26%,color-mix(in srgb,var(--moonlight) 26%,transparent),transparent 70%),
    radial-gradient(120% 120% at 50% 50%,color-mix(in srgb,var(--pillow) 50%,var(--night)) 0%,color-mix(in srgb,var(--pillow) 64%,var(--night)) 64%,color-mix(in srgb,var(--pillow) 40%,var(--night)) 100%);
  box-shadow:inset 0 -3vh 6vh color-mix(in srgb,var(--pillow) 22%,var(--night)),0 2vh 6vh rgba(8,4,20,.45)}
.df-pillow .seam{position:absolute;inset:5vh 6vw;border-radius:26vmin;border:2px solid color-mix(in srgb,var(--pillow) 70%,var(--moonlight));opacity:.38;
  box-shadow:0 2px 0 color-mix(in srgb,var(--night) 50%,transparent)}
.df-pillow.still .pillow{inset:0;border-radius:0;background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--pillow) 10%,var(--night)),var(--night-lo) 80%);box-shadow:none}
.df-pillow.still .seam{display:none}

/* ---- big wins: pillow down and tiny porcelain moons drift down (skin.js); no filter on the moving pieces */
.df-fluff{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.df-fluff i{position:absolute;left:var(--x);top:-10vh;width:calc(30px*var(--s));height:calc(30px*var(--s));
  background:radial-gradient(circle at 36% 30%,#FFFFFF,var(--c) 60%,color-mix(in srgb,var(--c) 70%,var(--night)));
  -webkit-mask:var(--df-fluff) center/contain no-repeat;mask:var(--df-fluff) center/contain no-repeat;animation:df-drift 3.3s cubic-bezier(.3,.2,.4,1) var(--d) both}
.df-fluff i.moonlet{background:radial-gradient(circle at 34% 30%,#FFFFFF,var(--lamp-soft) 46%,color-mix(in srgb,var(--lamp) 70%,var(--night)));-webkit-mask-image:var(--df-moonlet);mask-image:var(--df-moonlet)}
@keyframes df-drift{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),118vh) rotate(calc(var(--r) + 150deg))}}

/* ---- phones: no room beside the tray for the pipes and gauges; a slimmer conveyor */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:calc(var(--cell)*.1) calc(var(--cell)*.12) calc(var(--cell)*.22)}
  .conveyor{border-radius:calc(var(--cell)*.24)}
  .conveyor .pipe,.conveyor .gauge{display:none}
  .conveyor .puffs{top:calc(var(--cell)*-.12);height:calc(var(--cell)*.18)}
  .conveyor .belt{bottom:calc(var(--cell)*.05);height:calc(var(--cell)*.1)}
  .conveyor .roller{width:calc(var(--cell)*.16);margin-top:calc(var(--cell)*-.08)}
  .special.twins{grid-template-columns:1fr}
}
@media (max-width:400px){
  .fsbar{gap:2px 10px;padding:4px 10px;font-size:13px;border-radius:16px}
  .fsbar .bub{width:19px;height:19px;font-size:12px}
}
/* reduced motion: no settle, no drifting islands, no turning curl, no fluff; layers only cross-fade */
body.still .cells-board .cell.squash .face,body.still .dreamscape .islands,body.still .spin.kick svg,body.still .spin.kick .curl,body.still .spin.busy .curl{animation:none}
body.still .cells-board::after{transition-duration:.1s}
body.still .df-fluff{display:none}
@media (prefers-reduced-motion:reduce){
  .cells-board .cell.squash .face,.dreamscape .islands,.spin.kick svg,.spin.kick .curl,.spin.busy .curl{animation:none!important}
  .cells-board::after{transition-duration:.1s}
  .df-fluff{display:none}
  .scene .factory,.scene .yard,.scene .dreamscape{transition-duration:.1s}
}