/* Dragon Empire skin on the shared game shell: carved jade and red lacquer with gold-leaf ornament. A palace court of
   red lacquer columns and lattice doors under upturned eaves before misty karst peaks (or a moon bridge over a garden
   pond under willows), the 6 × 6 grid as a carved wooden lattice in a lacquered rim with gold frets, set in a round
   moon gate of red lacquer with gold beads and cloud scrolls (variant "moon-gate"; "clean": the rim only), the HUD as
   the lower arc of the gate ring (balance at 8 o'clock, the spin at 6, the win at 4 on wide screens), a jade folding
   fan as the spin button, the Dynasty bar as the gate's crown (the three dragon medallions at 10, 12 and 2 o'clock and
   the round multiplier), the pagoda with three coiling dragons in the Dynasty Spins, the dragon vortex between them and
   red paper cuts for big wins. Theme tokens (--primary, --night, --plate*, --ink, --muted, --leaf*, --lacquer*,
   --wood*, --sky*, --far, --near, --mist, --moon, --pond, --tile, --fan*, --glow) come from skin.js themeMap: every
   text is light on a dark plate (≥ 4.5:1); the accent (--glow) and the lacquer reds are decoration only, never text.
   Animated properties: transform and opacity only; no flash anywhere (the shell's flash is drawn in soft gold). */
:root{
  --primary:#2FBF71; --night:#1A0B0B; --glow:#D7263D; --plate:#120808; --plate-hi:#2C1E1E;
  --ink:#FFF4E2; --muted:#E6D2B3; --leaf:#E7B852; --leaf-hi:#FFE7A3; --leaf-lo:#8A5A12;
  --lacquer:#861823; --lacquer-hi:#B9333C; --lacquer-lo:#470609;
  --wood:#2F150C; --wood-hi:#523020; --wood-lo:#140806;
  --sky-top:#110707; --sky-low:#1C1D14; --far:#1F2618; --near:#160909; --mist:#4C4141; --moon:#D7F2E1; --pond:#1C2A1E; --tile:#38261E; --bracket:#1A4F3F;
  --fan-hi:#8CDAAE; --fan:#2FBF71; --fan-lo:#1A693E; --fan-rim:#E7B852; --fan-ink:#100606;
  --display:"ZCOOL XiaoWei","Songti SC",Georgia,serif; --ui:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:10px; --radius-sm:7px; --line:color-mix(in srgb,var(--leaf) 45%,transparent); --panel-border:var(--leaf-lo);
  --hud-bg:linear-gradient(180deg,color-mix(in srgb,var(--lacquer) 22%,var(--plate)),var(--plate) 70%);
  --ibtn-bg:linear-gradient(180deg,var(--wood-hi),var(--wood-lo)); --ibtn-ink:var(--leaf-hi);
  /* the cells board: a recessed niche of dark lacquered wood cut into a lattice: every cell a quiet, softly lit panel,
     the lattice bars carved (a dark groove here, the board's own lit hairline --reel-sep beside it), all static paint */
  --window-bg:linear-gradient(90deg,transparent calc(var(--cell) - 2px),rgba(0,0,0,.4) calc(var(--cell) - 2px) calc(var(--cell) - 1px),transparent 0) 0 0/var(--cell) 100%,
    linear-gradient(180deg,transparent calc(var(--cell) - 2px),rgba(0,0,0,.4) calc(var(--cell) - 2px) calc(var(--cell) - 1px),transparent 0) 0 0/100% var(--cell),
    radial-gradient(closest-side,color-mix(in srgb,var(--wood-hi) 46%,transparent),transparent) 0 0/var(--cell) var(--cell),
    linear-gradient(180deg,var(--wood),var(--wood-lo));
  --window-radius:4px; --reel-sep:color-mix(in srgb,var(--leaf) 18%,transparent); --sym-size:92%; --cluster-radius:14%;
  --spin-ring:transparent;
  --win-ring:var(--leaf-hi); --win-glow:color-mix(in srgb,var(--leaf) 70%,transparent); --hot-ring:var(--leaf); --land-ring:var(--leaf-hi);
  --tease-glow:color-mix(in srgb,var(--leaf) 75%,var(--glow)); --fs-ring:color-mix(in srgb,var(--leaf) 60%,transparent);
  --fall-ease:cubic-bezier(.45,.05,.35,1);
  --badge-bg:rgba(22,9,9,.9); --badge-ink:#FFF1DA; --float-ink:#FFF4E2; --float-stroke:#2A0E12;
  --focus:var(--leaf-hi);
  color-scheme:dark;
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: the palace court (default), the moon bridge, the pagoda of the Dynasty Spins; silhouettes are masks from
   skin.js. Only the mist and the willows drift (slowly, by transform); the layers fade. */
.scene{background:var(--sky-top)}
.scene .court,.scene .garden{transition:opacity .8s}
.scene .court>i,.scene .garden>i,.scene .dynasty>i{position:absolute;inset:0}
.scene .court .sky,.scene .garden .sky{background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 58%,var(--far) 100%)}
/* the moon: the cool rim light of the scene (upper right; the warm key light is the lantern at the upper left) — a disc
   with a soft terminator and two faint maria, a halo round it */
.scene>div>i.moon{left:auto;right:12%;top:9%;bottom:auto;width:15vmin;height:15vmin;border-radius:50%;
  background:radial-gradient(30% 24% at 62% 58%,color-mix(in srgb,var(--night) 14%,transparent),transparent),radial-gradient(20% 16% at 40% 66%,color-mix(in srgb,var(--night) 10%,transparent),transparent),
    radial-gradient(circle at 38% 34%,color-mix(in srgb,var(--moon) 70%,#FFFFFF) 0,var(--moon) 40%,color-mix(in srgb,var(--moon) 78%,var(--night)) 82%,color-mix(in srgb,var(--moon) 60%,var(--night)) 100%);
  box-shadow:0 0 3vmin color-mix(in srgb,var(--moon) 30%,transparent),0 0 12vmin color-mix(in srgb,var(--moon) 12%,transparent);opacity:.8}
/* the light of the scene: a warm lantern glow from the upper left and the lamp behind the gate that lifts the board off
   the court; then a static grain over everything (one layer, never on the cells) and the vignette */
.scene .de-light{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 30% at 50% 47%,color-mix(in srgb,var(--leaf) 15%,transparent),transparent 72%),radial-gradient(circle at 8% 4%,color-mix(in srgb,var(--leaf) 13%,transparent),transparent 42%)}
.scene .de-grain{position:absolute;inset:0;pointer-events:none;opacity:.07;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}
.scene .court .far,.scene .court .near,.scene .court .roofs,.scene .court .wood,.scene .court .doors,.scene .court .brackets,.scene .court .lattice,.scene .garden .hills,.scene .garden .bridge,.scene .garden .reflect,.scene .garden .pads,.scene .garden .willow,
.scene .dynasty .pagoda,.scene .dynasty .dr{-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 .court .far{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 70%,var(--mist)),var(--far) 60%);-webkit-mask-image:var(--de-peaks-far);mask-image:var(--de-peaks-far)}
.scene .court .near{background:linear-gradient(180deg,color-mix(in srgb,var(--near) 80%,var(--mist)),var(--near) 40%);-webkit-mask-image:var(--de-peaks-near);mask-image:var(--de-peaks-near)}
.scene>div>i.mist{top:40%;bottom:auto;height:24%;left:-12%;right:-12%;opacity:.4;will-change:transform;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mist) 60%,transparent) 45%,transparent);animation:de-mist 38s ease-in-out infinite alternate}
.scene>div>i.mist.m2{top:62%;height:18%;opacity:.3;animation-duration:52s;animation-direction:alternate-reverse}
/* the halls are the near ground: aged lacquer, darker and quieter than the gate (the board stays the brightest thing),
   under the one light — each layer is the theme colour with a static light overlay from skin.js (--de-lit-*), drawn in
   the masks' own frame and sized like them (cover, centred), so it lands on the same columns, bays and roofs */
.scene .court .roofs,.scene .court .brackets,.scene .court .wood,.scene .court .doors,.scene .court .lattice{-webkit-mask-position:center;mask-position:center}
.scene .court .roofs{background:var(--de-lit-roof) center/cover no-repeat,color-mix(in srgb,var(--tile) 74%,var(--night));-webkit-mask-image:var(--de-roofs);mask-image:var(--de-roofs)}
/* the painted brackets and band sit in the shadow of the eave */
.scene .court .brackets{background:var(--de-lit-bays) center/cover no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--bracket) 22%,var(--night)),color-mix(in srgb,var(--bracket) 36%,var(--night)));-webkit-mask-image:var(--de-brackets);mask-image:var(--de-brackets)}
.scene .court .wood{background:var(--de-lit-cols) center/cover no-repeat,color-mix(in srgb,var(--lacquer) 46%,var(--wood));-webkit-mask-image:var(--de-wood);mask-image:var(--de-wood)}
/* the walls and doors in the bays: deeper than the columns, so the halls read as closed fronts */
.scene .court .doors{background:var(--de-lit-bays) center/cover no-repeat,color-mix(in srgb,var(--lacquer-lo) 46%,var(--wood-lo));-webkit-mask-image:var(--de-doors);mask-image:var(--de-doors)}
.scene .court .lattice{background:var(--de-lit-bays) center/cover no-repeat,color-mix(in srgb,var(--leaf) 30%,var(--wood));-webkit-mask-image:var(--de-lattice);mask-image:var(--de-lattice);opacity:.6}
.scene .court .terrace{top:84%;background:linear-gradient(180deg,color-mix(in srgb,var(--near) 70%,var(--leaf-lo)),var(--near) 40%),repeating-linear-gradient(90deg,transparent 0 9vw,color-mix(in srgb,var(--leaf) 8%,transparent) 9vw calc(9vw + 1px))}
/* mist between the halls and the gate: the inner bays recede into the lamp-lit haze round the gate */
.scene .court .haze{background:radial-gradient(ellipse 31% 44% at 50% 58%,color-mix(in srgb,var(--mist) 40%,transparent),transparent 74%),linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--mist) 16%,transparent) 72%,transparent 92%)}
.scene .garden{opacity:0}
body.bg-moon-bridge .scene .garden{opacity:1}
body.bg-moon-bridge .scene .court{opacity:0}
.scene .garden .hills{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 75%,var(--mist)),var(--far));-webkit-mask-image:var(--de-hills);mask-image:var(--de-hills)}
.scene .garden .pond{top:72%;background:linear-gradient(180deg,color-mix(in srgb,var(--pond) 80%,var(--moon)) 0,var(--pond) 18%,color-mix(in srgb,var(--pond) 60%,#000) 100%)}
.scene .garden .bridge{background:linear-gradient(180deg,var(--lacquer),var(--lacquer-lo));-webkit-mask-image:var(--de-bridge);mask-image:var(--de-bridge);-webkit-mask-position:center;mask-position:center}
.scene .garden .reflect{opacity:.32;background:linear-gradient(180deg,var(--lacquer),transparent 60%);-webkit-mask-image:var(--de-bridge-pond);mask-image:var(--de-bridge-pond);-webkit-mask-position:center;mask-position:center}
.scene .garden .pads{background:color-mix(in srgb,#3F6E45 36%,var(--near));-webkit-mask-image:var(--de-pads);mask-image:var(--de-pads)}
.scene .garden .willow{background:color-mix(in srgb,#4E7A4A 40%,var(--near));-webkit-mask-image:var(--de-willow);mask-image:var(--de-willow);-webkit-mask-position:center top;mask-position:center top;
  transform-origin:50% 0;will-change:transform;animation:de-willow 14s ease-in-out infinite alternate}
/* the Dynasty Spins: the pagoda and the three coiling dragons (soft colours; it fades in over 1.2 s) */
.scene .dynasty{opacity:0;transition:opacity 1.2s ease}
body.fs .scene .dynasty{opacity:1}
.scene .dynasty .sky{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--leaf) 16%,var(--sky-low)) 0,var(--sky-top) 70%)}
.scene .dynasty .glow{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--leaf) 20%,transparent) 0,transparent 42%)}
/* the pagoda in the haze: its upper tiers catch the lamp, its base sinks into the night (no flat slab behind the HUD) */
.scene .dynasty .pagoda{opacity:.8;background:linear-gradient(180deg,color-mix(in srgb,var(--tile) 75%,var(--leaf)) 0,var(--tile) 28%,color-mix(in srgb,var(--night) 55%,var(--tile)) 62%,var(--night) 92%);-webkit-mask-image:var(--de-pagoda);mask-image:var(--de-pagoda)}
.scene .dynasty .dr{opacity:.4;-webkit-mask-position:center;mask-position:center}
/* the three dragons are a mural in the mist: lit from the lamp above (their upper parts lighter), dissolving into the
   haze towards the ground — low contrast, behind the board */
.scene .dynasty .dr.jade{background:linear-gradient(180deg,#5FD394,#1A7A4A 40%,color-mix(in srgb,#0C5232 50%,transparent) 75%,transparent);-webkit-mask-image:var(--de-dr-jade);mask-image:var(--de-dr-jade)}
.scene .dynasty .dr.crimson{background:linear-gradient(180deg,#E0505A,#8E1824 40%,color-mix(in srgb,#5C0610 50%,transparent) 75%,transparent);-webkit-mask-image:var(--de-dr-crimson);mask-image:var(--de-dr-crimson)}
.scene .dynasty .dr.gold{opacity:.36;background:linear-gradient(180deg,#FFE7A3,#C8963A 45%,#7A4C0E);-webkit-mask-image:var(--de-dr-gold);mask-image:var(--de-dr-gold)}
.scene>div>i.mist.m3{top:70%}
.scene .vignette{background:radial-gradient(ellipse at 50% 46%,transparent 46%,rgba(0,0,0,.52) 100%)}
@keyframes de-mist{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes de-willow{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}

/* ---- title and round buttons (above the gate ring) ---- */
.top{position:relative;z-index:3}
/* the title: carved jade letters lit from above — a darker jade cut and the lacquer below each stroke, a soft lamp glow
   behind; no plate (the shell centres it on the board, its tracking balanced) */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--primary);text-shadow:0 1px 0 color-mix(in srgb,var(--primary) 45%,#000),0 2px 0 var(--lacquer-lo),0 4px 8px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--leaf) 22%,transparent)}
.ibtn{border:1px solid var(--leaf-lo);border-radius:50%;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--leaf-hi) 26%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--leaf) 16%,transparent),0 2px 6px rgba(0,0,0,.45)}
.ibtn:hover{border-color:var(--leaf)}

/* ---- the frame: the moon gate (a ring of red lacquer with gold beads and two cloud scrolls) behind the lattice rim with
   gold frets at its corners. The decoration (.de-gate) lies exactly over the grid (its size from skin.js onConfig),
   behind it; the room above the grid holds the Gold medallion (the presenter's, at the gate's 2 o'clock). ---- */
.frame{--fpt:calc(var(--cell)*.66 + 4px);padding:var(--fpt) 18px 8px;gap:8px}
/* the Dynasty Spins: the bar is the gate's crown and the Gold flies to its multiplier, so the room over the grid shrinks
   (the board measures its area without the bar) */
body.fs .frame{--fpt:8px}
.de-gate{position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--de-cols,6));height:calc(var(--cell)*var(--de-rows,6));transform:translateX(-50%);pointer-events:none}
.de-gate>i{position:absolute;display:block}
.de-gate .ring{--rw:calc(var(--cell)*.3);left:50%;top:50%;width:calc(var(--cell)*var(--de-cols,6)*1.22);height:calc(var(--cell)*var(--de-cols,6)*1.22);transform:translate(-50%,-50%);border-radius:50%;
  border:var(--rw) solid var(--lacquer);background:radial-gradient(circle,transparent 66%,color-mix(in srgb,var(--night) 55%,transparent) 71%);
  box-shadow:0 0 0 1.5px var(--leaf),inset 0 0 0 1.5px var(--leaf),0 18px 40px rgba(0,0,0,.5)}
/* the lacquer takes the one light: brightest at the upper left, darkest at the lower right, a soft rounded sheen along
   the middle of the ring (a static overlay masked to the ring) */
.de-gate .ring::after{content:"";position:absolute;inset:calc(-1*var(--rw));border-radius:50%;
  background:radial-gradient(closest-side,transparent calc(100% - var(--rw)*.8),rgba(255,236,220,.13) calc(100% - var(--rw)*.55),transparent calc(100% - var(--rw)*.15)),
    conic-gradient(from -45deg,rgba(255,226,206,.3),rgba(255,226,206,.06) 70deg,rgba(0,0,0,.3) 150deg,rgba(0,0,0,.36) 185deg,rgba(0,0,0,.18) 240deg,rgba(255,226,206,.06) 300deg,rgba(255,226,206,.3));
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--rw)),#000 calc(100% - var(--rw) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--rw)),#000 calc(100% - var(--rw) + .5px))}
/* one inlaid gold line along the middle of the ring (no bead dots: no small repeats right behind the frame) */
.de-gate .ring::before{content:"";position:absolute;inset:calc(var(--rw)*-.56);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--leaf) 62%,transparent);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.de-gate .wall{display:none}
.de-gate .scroll{width:calc(var(--cell)*1.5);height:calc(var(--cell)*.62)}
.de-gate .scroll svg{width:100%;height:100%;display:block;overflow:visible}
.de-gate .scroll path{fill:url(#deGoldV);stroke:color-mix(in srgb,var(--leaf-lo) 70%,#000);stroke-width:1}
.de-gate .scroll path.curl{fill:none;stroke:var(--lacquer-lo);stroke-width:3}
.de-gate .scroll.a{left:calc(var(--cell)*-.95);top:calc(var(--cell)*.25);transform:rotate(-38deg)}
.de-gate .scroll.b{right:calc(var(--cell)*-.95);bottom:calc(var(--cell)*.25);transform:rotate(142deg)}
/* the lattice rim: dark wood in a bevelled gold edge (lit at the upper left), set in a lacquer frame; one shadow */
.de-gate .rim{inset:-9px;border-radius:8px;border:3px solid transparent;
  background:linear-gradient(135deg,var(--wood-hi),var(--wood) 45%,var(--wood-lo)) padding-box,linear-gradient(135deg,var(--leaf-hi),var(--leaf) 35%,var(--leaf-lo) 70%,var(--leaf) 100%) border-box;
  box-shadow:0 0 0 4px var(--lacquer-lo),0 0 0 5px color-mix(in srgb,var(--leaf) 30%,transparent),0 14px 30px rgba(0,0,0,.5)}
.de-gate .fret{width:calc(var(--cell)*.42);height:calc(var(--cell)*.42)}
.de-gate .fret svg{width:100%;height:100%;display:block}
.de-gate .fret path{stroke:url(#deGoldD)}
.de-gate .fret.tl{left:calc(var(--cell)*-.3);top:calc(var(--cell)*-.3)}
.de-gate .fret.tr{right:calc(var(--cell)*-.3);top:calc(var(--cell)*-.3);transform:scaleX(-1)}
.de-gate .fret.bl{left:calc(var(--cell)*-.3);bottom:calc(var(--cell)*-.3);transform:scaleY(-1)}
.de-gate .fret.br{right:calc(var(--cell)*-.3);bottom:calc(var(--cell)*-.3);transform:scale(-1)}
.board,.message{position:relative;z-index:1}
/* the Dynasty Spins: the board's overlays (the Gold's flight to the bar's multiplier) pass over the bar */
body.fs .board{z-index:3}
body[data-variant="clean"] .de-gate .ring,body[data-variant="clean"] .de-gate .scroll{display:none}

/* ---- the grid: winning groups outlined in gold (the board's ring), a soft sheen on the lattice ---- */
.cells-board .cell.win::before{border-width:2.5px}
/* the niche: the light from above throws a shadow into the top of the window; a lit lip at its lower edge */
.cells-board .cs-field{box-shadow:inset 0 calc(var(--cell)*.16) calc(var(--cell)*.2) calc(var(--cell)*-.1) rgba(0,0,0,.6),inset 0 -1px 0 color-mix(in srgb,var(--leaf-hi) 24%,transparent)}
.cells-board.feature .cs-field{box-shadow:inset 0 calc(var(--cell)*.16) calc(var(--cell)*.2) calc(var(--cell)*-.1) rgba(0,0,0,.6),inset 0 0 0 2px var(--fs-ring),inset 0 0 calc(var(--cell)*.5) color-mix(in srgb,var(--leaf) 14%,transparent)}
/* serpentine: a symbol that falls in sways once to the side and back while it falls (a light S path) */
.cells-board.de-sway .cell .face>.sym{animation:de-sway var(--sw-t,320ms) cubic-bezier(.45,.05,.35,1) var(--sw-d,0ms) both}
@keyframes de-sway{0%{transform:translateX(0)}30%{transform:translateX(7%)}70%{transform:translateX(-5%)}100%{transform:translateX(0)}}
.message{font-family:var(--ui);font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .35em;max-width:100%;padding:3px 16px;border-radius:999px;background:color-mix(in srgb,var(--plate) 90%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--leaf) 30%,transparent)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--leaf-hi)}
.message .tag{color:var(--muted);font-weight:400}

/* ---- the dragon presenter: the Gold medallion of a paid spin is a gold coin on the gate (2 o'clock); in the Dynasty
   Spins the levels and the round multiplier live in the Dynasty bar, so the presenter's own pair is hidden then ---- */
.cells-board .l-ps-mult>.ps-medal{right:calc(var(--cell)*-.1);bottom:calc(100% + var(--cell)*.1);font-family:var(--ui)}
.cells-board .ps-medal .ps-m{font-family:var(--display);font-weight:400}
.cells-board .ps-medal.free,.cells-board .l-ps-levels{display:none}

/* ---- the Dynasty bar: the crown of the gate — the spin, the three dragon medallions on an arc (10, 12 and 2 o'clock)
   with their levels, the round multiplier as a gold coin, the total won ---- */
.fsbar{position:relative;z-index:2;align-items:center;gap:14px;padding:4px 18px;border-radius:999px;border:2px solid var(--leaf);
  background:linear-gradient(180deg,var(--lacquer),var(--lacquer-lo));color:var(--ink);font-family:var(--ui);font-weight:600;box-shadow:inset 0 1px 0 color-mix(in srgb,#FFFFFF 18%,transparent),0 6px 16px rgba(0,0,0,.4)}
.fsbar b{color:var(--leaf-hi)}
.fsbar small{font-size:inherit}
.fsbar .de-spin,.fsbar .de-won{white-space:nowrap}
.fsbar .de-short{display:none}
.fsbar .de-ring{display:flex;align-items:flex-start;gap:12px}
.de-med{position:relative;display:block;width:36px;height:36px}
.de-med img{position:absolute;inset:0;width:100%;height:100%;display:block}
.de-med.k-jade,.de-med.k-gold{margin-top:5px}
.de-med>b{position:absolute;right:-8px;top:-4px;min-width:20px;padding:0 4px;border-radius:999px;border:1px solid var(--leaf);background:var(--plate);color:var(--ink);font:700 11px/1.4 var(--ui);text-align:center}
.de-med.top>b{background:var(--leaf);color:var(--plate)}
.de-med .pips{position:absolute;left:50%;top:100%;transform:translateX(-50%);display:flex;gap:2px}
.de-med .pips>i{display:block;width:5px;height:5px;border-radius:50%;background:var(--plate);box-shadow:inset 0 0 0 1px var(--leaf)}
.de-med .pips>i.on{background:var(--leaf)}
.de-mult{display:grid;place-items:center;align-self:center;min-width:44px;height:30px;padding:0 8px;border-radius:999px;border:2px solid var(--leaf-lo);background:linear-gradient(180deg,#FFF0B8,#E8B04A 60%,#C99130)}
.fsbar .de-mult b{color:#2A0E12;font:400 19px/1 var(--display)}
.de-mult.max{box-shadow:0 0 0 2px var(--leaf-hi),0 0 12px color-mix(in srgb,var(--leaf) 60%,transparent)}
.de-med.bump,.de-mult.bump{animation:de-bump .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes de-bump{0%{transform:scale(1.3)}100%{transform:none}}

/* ---- HUD: the lower arc of the moon gate. Wide screens: the balance at 8 o'clock, the bet at 7, the spin at 6 (the
   bottom of the ring, dipping below it), the win at 4; a gold bead line follows the arc. Phones keep the shell's two
   thumb-zone rows on a lacquer plate. ---- */
.hud{position:relative;border:2px solid var(--leaf-lo);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--leaf-hi) 22%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--leaf) 26%,transparent),0 8px 22px rgba(0,0,0,.45)}
@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";border-radius:22px 22px 50% 50%/22px 22px 70px 70px;padding:8px 36px 16px}
  .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;transform:translateY(10px)}
  .hud-bar .hud>.bal,.hud-bar .hud>.win{transform:translateY(-4px)}
  .hud-bar .hud::before{content:"";position:absolute;left:8%;right:8%;bottom:7px;height:46px;border-radius:0 0 50% 50%/0 0 46px 46px;border-bottom:1.5px solid color-mix(in srgb,var(--leaf) 45%,transparent);pointer-events:none}
}
.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(--primary)}
.meter small{color:var(--muted)}
.demo{background:var(--leaf);color:var(--plate)}
.pm,.auto{background:var(--ibtn-bg);border:1.5px solid var(--leaf-lo);color:var(--leaf-hi)}
.pm{border-radius:50%}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--leaf-hi)}
.auto span{background:var(--leaf);color:var(--plate)}
/* the folding fan: drawn by the SVG (skin.js), which fills the button; the leaf turns a little while a spin runs */
/* the fan carries its own contact shadow (in the SVG): no CSS filter over the leaf while it turns */
.spin{width:calc(var(--s)*1.08);height:calc(var(--s)*1.08);border-radius:50%;background:none;box-shadow:none;color:var(--fan-ink)}
.spin svg{width:100%;height:100%;transition:opacity var(--t-fast,140ms) ease}
.spin .fan-leaf{transform-box:view-box;transform-origin:50% 78%}
.spin.busy .fan-leaf{animation:de-fan 1.4s ease-in-out infinite alternate}
.spin.kick .fan-leaf{animation:de-kick .28s cubic-bezier(.2,1.4,.4,1)}
.spin:disabled{filter:none}
body:not(.fs) .spin:disabled:not(.busy) svg{opacity:.55}
@keyframes de-fan{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes de-kick{0%{transform:scale(.9)}100%{transform:none}}
/* buy / ante: lacquer plates lit from above (a warm top lip), a quiet gold edge — secondary to the fan */
.side .tablet{min-height:44px;background:linear-gradient(180deg,var(--lacquer),var(--lacquer-lo));border:1px solid color-mix(in srgb,var(--leaf) 75%,transparent);border-radius:var(--radius);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,214,196,.2),0 4px 12px rgba(0,0,0,.35)}
.tablet .th{font-family:var(--display);font-weight:400;letter-spacing:.04em;color:var(--leaf-hi)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--ink)}
.tablet .switch{border-color:var(--leaf)}

/* ---- panels, paytable and overlays ---- */
.panel{color:var(--ink);border-width:2px}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.04em}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.04em}
.ptc{background:color-mix(in srgb,var(--plate) 60%,transparent);border-color:var(--line)}
.ptc table td:first-child{color:var(--muted)}
.ptc .symbox,.special .symbox{border-radius:8px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 8%,transparent),transparent 70%),linear-gradient(180deg,var(--wood),var(--wood-lo));box-shadow:inset 0 0 0 1.5px var(--leaf-lo)}
.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}
/* the wild's word (S.wildTag) for screen readers; the art draws it */
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.special p{margin:0 0 6px}
.special table{border-collapse:collapse;font-size:15px;min-width:180px}.special td{padding:2px 0}.special td:last-child{text-align:right;font-weight:800;padding-left:18px}
.special h4{margin:0 0 4px;font-size:17px}
table.de-levels{border-collapse:collapse;width:100%;margin:8px 0;font-size:15px}
table.de-levels caption{text-align:left;color:var(--muted);padding-bottom:4px}
table.de-levels th,table.de-levels td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
table.de-levels thead th{color:var(--leaf-hi);font-weight:600}
.ovcard h2{color:var(--primary);text-shadow:0 3px 0 var(--lacquer-lo),0 0 20px color-mix(in srgb,var(--leaf) 35%,transparent)}
.ovamt{color:var(--leaf-hi)}
.ovcard p{color:var(--muted)}
/* the shell's governed flash, in soft gold leaf (never a saturated red) */
.flash{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--leaf-hi) 70%,#FFFFFF),color-mix(in srgb,var(--leaf) 30%,transparent) 45%,transparent 78%)}

/* ---- the dragon vortex: a lacquer dusk over the screen, the three dragons' spiral turning in it and a gold ring that
   widens like a moon gate; transform and opacity only (moved by skin.js) ---- */
.de-vortex{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden}
.de-vortex.show{display:block}
.de-vortex .veil{position:absolute;inset:0;opacity:0;will-change:opacity;background:radial-gradient(circle at 50% 50%,var(--lacquer-lo) 0,color-mix(in srgb,var(--night) 85%,#000) 70%)}
.de-vortex .spiral{position:absolute;left:50%;top:50%;width:min(92vmin,820px);height:min(92vmin,820px);margin:calc(min(92vmin,820px)/-2) 0 0 calc(min(92vmin,820px)/-2);opacity:0;will-change:transform,opacity}
.de-vortex .iris{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;opacity:0;will-change:transform,opacity;
  box-shadow:inset 0 0 0 1.4vmax var(--lacquer),inset 0 0 0 1.7vmax var(--leaf)}
.de-vortex.calm .spiral,.de-vortex.calm .iris{display:none}

/* ---- big wins: red paper cuts flutter down (shapes that turn and fade, never a light) ---- */
.de-paper{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.de-paper>.cut{position:absolute;left:var(--x);top:-10vh;width:calc(34px*var(--s));height:calc(34px*var(--s));opacity:0;will-change:transform,opacity;background:linear-gradient(135deg,#D2444C,#A51E2C 55%,#6E0E18);
  -webkit-mask:var(--de-cut-dragon) center/contain no-repeat;mask:var(--de-cut-dragon) center/contain no-repeat;animation:de-flutter 3.2s cubic-bezier(.45,.05,.6,1) var(--d) forwards}
.de-paper>.cut.cloud{-webkit-mask-image:var(--de-cut-cloud);mask-image:var(--de-cut-cloud);background:linear-gradient(135deg,#B8303A,#8E1824 55%,#5A0A14)}
.de-paper>.cut.wave{-webkit-mask-image:var(--de-cut-wave);mask-image:var(--de-cut-wave);background:linear-gradient(135deg,#DC5054,#B22A34 55%,#741020)}
.de-paper>.cut.leaf{background:linear-gradient(135deg,#FFE7A3,#E2B54F 50%,#8A5A12)}
/* depth: the far layer is smaller (skin.js), dimmer and slower */
.de-paper>.cut.far{--o:.5;animation-duration:4.4s}
@keyframes de-flutter{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}12%{opacity:var(--o,.95)}50%{transform:translate(calc(var(--dx)*.5),55vh) rotate(calc(var(--r) + 140deg))}100%{opacity:0;transform:translate(var(--dx),112vh) rotate(calc(var(--r) + 260deg))}}

/* ---- reduced motion: no sway, mist or willow drift, fan turn or falling paper; shell.css caps every other animation ---- */
body.still .cells-board.de-sway .cell .face>.sym,body.still .scene .mist,body.still .scene .garden .willow,body.still .spin.busy .fan-leaf,body.still .spin.kick .fan-leaf,body.still .de-med.bump,body.still .de-mult.bump{animation:none}
body.still .de-paper{display:none}
body.still .scene .dynasty,body.still .scene .court,body.still .scene .garden,body.still .de-gate .wall{transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .cells-board.de-sway .cell .face>.sym,.scene .mist,.scene .garden .willow,.spin.busy .fan-leaf,.spin.kick .fan-leaf,.de-med.bump,.de-mult.bump{animation:none!important}
  .de-paper{display:none}
  .scene .dynasty,.scene .court,.scene .garden,body .de-gate .wall{transition-duration:.12s}
}

/* ---- phones: a thinner gate ring that fits the screen, a lower room over the grid, the Dynasty bar in one row (the
   medallions small, no pips), six columns of ≈ 52 px in 344 px ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:calc(var(--cell)*.5 + 2px);padding:var(--fpt) 6px 4px;gap:6px}
  .de-gate .ring{--rw:calc(var(--cell)*.2);width:min(calc(var(--cell)*var(--de-cols,6)*1.12),calc(100vw - 10px));height:min(calc(var(--cell)*var(--de-cols,6)*1.12),calc(100vw - 10px))}
  .de-gate .ring::before{border-width:1px}
  .de-gate .scroll{display:none}
  .de-gate .rim{inset:-6px;border-width:2px}
  .de-gate .fret{width:calc(var(--cell)*.3);height:calc(var(--cell)*.3)}
  .de-gate .fret.tl,.de-gate .fret.tr{top:calc(var(--cell)*-.18)}.de-gate .fret.bl,.de-gate .fret.br{bottom:calc(var(--cell)*-.18)}
  .de-gate .fret.tl,.de-gate .fret.bl{left:calc(var(--cell)*-.18)}.de-gate .fret.tr,.de-gate .fret.br{right:calc(var(--cell)*-.18)}
  .cells-board .l-ps-mult>.ps-medal{right:0;bottom:calc(100% + 3px);height:calc(var(--cell)*.46)}
  body.fs .frame{--fpt:2px;gap:4px}
  body.fs .boardarea{gap:4px}
  .fsbar{gap:8px;padding:2px 10px;font-size:13px}
  .fsbar .de-ring{gap:9px;align-items:center}
  .de-med{width:26px;height:26px}
  .de-med.k-jade,.de-med.k-gold{margin-top:0}
  .de-med>b{right:-6px;top:-5px;min-width:16px;padding:0 3px;font-size:10px}
  .de-med .pips{display:none}
  .de-mult{min-width:36px;height:24px;padding:0 6px}
  .fsbar .de-mult b{font-size:15px}
  .hud{background:var(--hud-bg);border-radius:16px}
}
/* portrait: the halls would show only as cut-off slivers at the edges, so they are left out; a far karst range in its
   own portrait frame (skin.js) rises behind the top of the gate instead, lower on the moon's side, and the gate's wall
   coping runs across the screen — the moon sits over a skyline, not in an empty band */
@media (max-aspect-ratio:4/5){
  .scene .court .far{-webkit-mask-image:var(--de-peaks-tall);mask-image:var(--de-peaks-tall);-webkit-mask-position:center top;mask-position:center top}
  .scene .court .doors,.scene .court .wood,.scene .court .lattice,.scene .court .brackets,.scene .court .roofs{display:none}
  /* the coping of the gate's wall: a low, dark tiled ridge across the screen whose lower edge the gate ring breaks
     through (sized from the ring: (ring − grid) / 2 above the grid); lit ridge, tile rolls, a dark underside */
  .de-gate .wall{display:block;left:50%;width:100vw;margin-left:-50vw;height:min(calc(var(--cell)*.46),30px);
    bottom:calc(100% + (min(calc(var(--cell)*var(--de-cols,6)*1.12),calc(100vw - 10px)) - var(--cell)*var(--de-rows,6))/2 - min(calc(var(--cell)*.14),8px));
    background:linear-gradient(90deg,rgba(255,221,176,.1),transparent 45%,rgba(0,0,0,.32)),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 7px),
      linear-gradient(180deg,color-mix(in srgb,var(--tile) 55%,var(--leaf)) 0 10%,color-mix(in srgb,var(--tile) 80%,var(--night)) 22%,color-mix(in srgb,var(--tile) 45%,var(--night)) 78%,var(--night));
    -webkit-mask:var(--de-wall) 0 0/100% 100% no-repeat;mask:var(--de-wall) 0 0/100% 100% no-repeat;transition:opacity .8s}
  body.fs .de-gate .wall,body.bg-moon-bridge .de-gate .wall,body[data-variant="clean"] .de-gate .wall{opacity:0}
}
@media (max-width:600px){
  .special.de-sp{grid-template-columns:64px 1fr;gap:10px;align-items:start}
  .special.de-sp .symbox{width:64px;height:64px;--cell:64px}
}
@media (max-width:400px){
  .logo h1{letter-spacing:.02em;font-size:clamp(18px,5.6vw,26px)}
  .fsbar .de-won small{display:none}
  /* the compact spin ("13/40"); the long form stays for screen readers */
  .fsbar .de-short{display:inline}
  .fsbar .de-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .message{font-size:14px;padding:2px 10px}
  /* the Dynasty levels table has one column per dragon: tighten the cells so it fits a ~320px panel without a
     horizontal scrollbar */
  table.de-levels{font-size:13px}
  table.de-levels th,table.de-levels td{padding:5px 4px}
}