/* Vampire's Ball skin on the shared game shell: stained glass and gilt under the blood moon. A candlelit ballroom (or a
   moonlit castle balcony), a gilded baroque mirror with an oval rose-window crest and two candle sconces round the red
   velvet reels (gold filigree between them, the locked moons glowing behind glass), a dance card as the side-column HUD,
   a lancet-arch spin button with a rose inlay, and the candles going out into the Midnight Waltz. The theme tokens
   (--crimson, --night, --amethyst, the velvet and wine shades, --rose-ink) come from skin.js themeMap; gilt and ivory are
   materials. Every text stands on a dark wine, velvet or night ground (≥ 4.5:1 in all three presets).
   One key light for the whole game: the ballroom's candles, high on the left (the symbols' lit cames, the mirror's
   moulding, the spin arch and the light behind the board all take it from that side); a cool moonlit rim opposite.
   Only transform/opacity animate; no CSS filter on a cell. */
:root{
  --crimson:#C0143A; --night:#1A0710; --amethyst:#9B6BD6;
  --velvet:#410612; --velvet-hi:#600A1E; --velvet-lo:#1F030A; --wine:#2E0915; --wine-hi:#3F0A19; --rose-ink:#E395A6;
  --gilt:#E2BD6E; --gilt-hi:#FBE3A6; --gilt-lo:#7A5418; --gilt-dk:#2E1C06; --ivory:#F6ECDF;
  --ink:var(--ivory); --muted:#D8C7BD;
  --display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif; --ui:"Josefin Sans","Century Gothic",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--gilt) 38%,transparent); --radius:10px; --radius-sm:7px;
  --panel-bg:linear-gradient(180deg,var(--wine-hi),var(--wine) 45%); --panel-border:var(--gilt-lo);
  --hud-bg:linear-gradient(180deg,var(--wine-hi),var(--wine));
  --ibtn-bg:var(--wine); --ibtn-ink:var(--gilt-hi);
  --btn-bg:linear-gradient(180deg,var(--gilt-hi),#E8C47A 55%,#D9AD5E); --btn-ink:#240810;
  /* red velvet: a fine pile (two hairline weaves), a soft sheen and a deep vignette */
  --window-bg:radial-gradient(120% 95% at 42% 34%,transparent 38%,rgba(0,0,0,.55) 100%),
    linear-gradient(115deg,transparent 28%,rgba(255,236,214,.045) 44%,transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,var(--velvet-hi),var(--velvet) 45%,var(--velvet-lo));
  --window-radius:3px; --reel-sep:color-mix(in srgb,var(--gilt-lo) 85%,transparent); --spin-blur:1.2px;
  --win-glow:#FFD9A0; --focus:var(--gilt-hi);
  /* a locked moon behind glass: velvet, a crimson glow and a pane's sheen */
  --lock-bg:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,0) 34%),radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--crimson) 45%,transparent),transparent 68%),var(--velvet-lo);
  --lock-ring:color-mix(in srgb,var(--gilt) 80%,transparent);
  --spin-ring:transparent; /* the arch is not round: busy turns the rose instead */
  --veil-light:color-mix(in srgb,var(--crimson) 22%,transparent);
  --vb-grain: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");
}
body{background:var(--bg)}
/* scene: the ballroom (default), the castle balcony, the Midnight Waltz's eclipse through a rose window. Static layers;
   only the candle glow flickers and the bats drift, and the layers fade. Silhouettes are masks from skin.js. */
.scene .hall{background:
  radial-gradient(60% 42% at 50% 0%,rgba(255,217,160,.14),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--night) 80%,var(--crimson)) 0%,var(--night) 56%,color-mix(in srgb,var(--night) 72%,#000) 76%,color-mix(in srgb,var(--night) 86%,var(--crimson)) 77%,color-mix(in srgb,var(--night) 78%,#000) 100%)}
.scene .hall i,.scene .balcony i,.scene .eclipse i{position:absolute;inset:0;display:block}
.hall .glass{opacity:.32;background:linear-gradient(180deg,color-mix(in srgb,var(--amethyst) 60%,transparent),color-mix(in srgb,var(--crimson) 55%,transparent) 55%,color-mix(in srgb,var(--amethyst) 35%,transparent));
  -webkit-mask:var(--vb-windows) center bottom/cover no-repeat;mask:var(--vb-windows) center bottom/cover no-repeat}
.hall .leading{opacity:.58;background:var(--night);-webkit-mask:var(--vb-leading) center bottom/cover no-repeat;mask:var(--vb-leading) center bottom/cover no-repeat}
.hall .chandelier{background:radial-gradient(circle at 50% 6%,rgba(255,217,160,.3) 0,rgba(255,217,160,.08) 13vmin,transparent 28vmin)}
.hall .couples{opacity:.94;background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--night) 62%,var(--crimson) 8%) 76%,color-mix(in srgb,var(--night) 40%,#000) 92%);-webkit-mask:var(--vb-couples) center bottom/cover no-repeat;mask:var(--vb-couples) center bottom/cover no-repeat}
.hall .glow{background:radial-gradient(7vmin 10vmin at 10% 72%,rgba(255,200,120,.2),transparent),radial-gradient(7vmin 10vmin at 90% 72%,rgba(255,200,120,.2),transparent),
  radial-gradient(5vmin 8vmin at 30% 66%,rgba(255,200,120,.13),transparent),radial-gradient(5vmin 8vmin at 70% 66%,rgba(255,200,120,.13),transparent);animation:vb-flicker 3.4s steps(6,end) infinite}
@keyframes vb-flicker{0%,100%{opacity:1}20%{opacity:.84}38%{opacity:.96}56%{opacity:.8}76%{opacity:.93}}
.scene .balcony,.scene .eclipse{opacity:0;transition:opacity .8s}
.scene .balcony{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 66%,#2C1A52) 0%,color-mix(in srgb,var(--night) 80%,var(--amethyst)) 56%,var(--night) 100%)}
body.bg-castle-balcony .scene .balcony{opacity:1}
body.bg-castle-balcony .scene .hall{opacity:0}
.scene .balcony .moon{inset:auto;left:74%;top:10%;width:24vmin;height:24vmin;margin-left:-12vmin;border-radius:50%;
  background:radial-gradient(circle at 60% 58%,rgba(156,102,112,.3),transparent 18%),radial-gradient(circle at 34% 64%,rgba(156,102,112,.22),transparent 13%),radial-gradient(circle at 40% 38%,#FFF4EC,#F1D9D2 45%,#C99BA2 80%,#9C6670);
  box-shadow:0 0 0 1.6vmin rgba(255,226,226,.05),0 0 70px rgba(255,220,220,.24)}
.balcony .towers{opacity:.9;background:color-mix(in srgb,var(--night) 70%,#000);-webkit-mask:var(--vb-towers) left bottom/cover no-repeat;mask:var(--vb-towers) left bottom/cover no-repeat}
.balcony .bats{background:#0B0307;-webkit-mask:var(--vb-bats) right top/cover no-repeat;mask:var(--vb-bats) right top/cover no-repeat;animation:vb-drift 34s ease-in-out infinite alternate}
@keyframes vb-drift{from{transform:translate(-1.5%,0)}to{transform:translate(1.5%,-2%)}}
.balcony .rail{background:linear-gradient(180deg,#3B3037,#1B1317);-webkit-mask:var(--vb-balustrade) center bottom/cover no-repeat;mask:var(--vb-balustrade) center bottom/cover no-repeat}
.scene .eclipse{transition-duration:.3s;background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--crimson) 26%,transparent) 0,transparent 44vmin),linear-gradient(180deg,#07020A,color-mix(in srgb,var(--night) 70%,#000) 60%,#050104)}
body.fs .scene .eclipse{opacity:1}
.scene .eclipse .disc{inset:auto;left:50%;top:34%;width:36vmin;height:36vmin;margin:-18vmin 0 0 -18vmin;border-radius:50%;background:radial-gradient(circle at 46% 44%,#2A0408,#120108 70%);
  box-shadow:0 0 0 1vmin color-mix(in srgb,var(--crimson) 40%,transparent),0 0 9vmin 3vmin color-mix(in srgb,var(--crimson) 45%,transparent),0 0 22vmin 6vmin color-mix(in srgb,var(--crimson) 18%,transparent)}
.scene .eclipse .tracery{inset:auto;left:50%;top:34%;width:62vmin;height:62vmin;margin:-31vmin 0 0 -31vmin;opacity:.8;background:color-mix(in srgb,var(--gilt-lo) 70%,#000);
  -webkit-mask:var(--vb-tracery) center/contain no-repeat;mask:var(--vb-tracery) center/contain no-repeat}
.scene .haze{background:radial-gradient(42% 46% at 50% 46%,color-mix(in srgb,var(--gilt) 10%,transparent),transparent 72%),radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(0,0,0,.6))}
.scene .haze::after{content:"";position:absolute;inset:0;background:var(--vb-grain) 0 0/160px;opacity:.07;mix-blend-mode:overlay}
/* title, buttons, tags, status screens; the shell's governed flash (retrigger, big win): a faint pale tint, never red */
.logo h1{font-weight:800;letter-spacing:.04em;line-height:1.12;color:var(--gilt);
  background:linear-gradient(180deg,var(--gilt-hi) 16%,var(--gilt) 44%,#9C6C24 53%,var(--gilt) 66%,var(--gilt-hi) 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(10,2,4,.9)) drop-shadow(0 0 12px color-mix(in srgb,var(--crimson) 38%,transparent))}
.ibtn{border-color:color-mix(in srgb,var(--gilt) 45%,transparent)}.ibtn:hover{border-color:var(--gilt)}
.demo,.auto span{background:var(--gilt);color:#1E0710}
.screen{background:var(--night)}.screen h2{color:var(--gilt)}
.toast{background:var(--wine);border-color:var(--gilt-lo)}
.spinner{border-color:color-mix(in srgb,var(--gilt) 22%,transparent);border-top-color:var(--gilt)}
.flash{background:radial-gradient(circle at 50% 45%,rgba(255,236,224,.16),rgba(255,236,224,.05) 45%,transparent 75%)}
/* the baroque mirror: a gilt moulding (border) round smoky antique glass, an arched top, C-scrolls at the corners, an oval
   crest holding a rose window and two candle sconces (behind the board: the frame is its own stacking context) */
.frame{isolation:isolate;padding:min(calc(var(--cell)*.2),22px) min(calc(var(--cell)*.17),20px) min(calc(var(--cell)*.12),14px)}
.mirror{position:absolute;inset:0;z-index:-1;pointer-events:none;border:min(calc(var(--cell)*.09),10px) solid transparent;
  border-radius:50% 50% 14px 14px / min(calc(var(--cell)*.4),34px) min(calc(var(--cell)*.4),34px) 14px 14px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--night) 66%,#6E5A66),var(--night) 38%,color-mix(in srgb,var(--night) 82%,#4A3A44) 70%,var(--night)) padding-box,
    linear-gradient(135deg,var(--gilt-hi),var(--gilt) 20%,var(--gilt-lo) 44%,var(--gilt) 62%,var(--gilt-hi) 78%,var(--gilt-lo)) border-box;
  box-shadow:inset 0 0 0 1px var(--gilt-dk),inset 0 0 0 2px color-mix(in srgb,var(--gilt-hi) 60%,transparent),0 0 0 1px var(--gilt-dk),0 18px 46px rgba(0,0,0,.6),0 0 34px color-mix(in srgb,var(--crimson) 22%,transparent)}
.mirror i{position:absolute;display:block}
.mirror .scroll{width:min(calc(var(--cell)*.36),42px);height:min(calc(var(--cell)*.36),42px);background:linear-gradient(135deg,var(--gilt-hi),var(--gilt) 45%,var(--gilt-lo));
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M8 92C8 44 44 8 92 8%22 stroke-width=%229%22/%3E%3Cpath d=%22M92 8C58 16 36 38 32 64C30 78 42 86 52 80C60 74 56 62 48 64%22 stroke-width=%227%22/%3E%3Cpath d=%22M8 92C16 58 38 36 64 32C78 30 86 42 80 52C74 60 62 56 64 48%22 stroke-width=%227%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M8 92C8 44 44 8 92 8%22 stroke-width=%229%22/%3E%3Cpath d=%22M92 8C58 16 36 38 32 64C30 78 42 86 52 80C60 74 56 62 48 64%22 stroke-width=%227%22/%3E%3Cpath d=%22M8 92C16 58 38 36 64 32C78 30 86 42 80 52C74 60 62 56 64 48%22 stroke-width=%227%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.mirror .scroll.tl{left:-9px;top:calc(min(calc(var(--cell)*.4),34px)*.5 - 8px)}
.mirror .scroll.tr{right:-9px;top:calc(min(calc(var(--cell)*.4),34px)*.5 - 8px);transform:scaleX(-1)}
.mirror .scroll.bl{left:-9px;bottom:-9px;transform:scaleY(-1)}
.mirror .scroll.br{right:-9px;bottom:-9px;transform:scale(-1,-1)}
.mirror .crest{left:50%;top:calc(min(calc(var(--cell)*.1),10px)*-1 - min(calc(var(--cell)*.09),10px));width:min(calc(var(--cell)*.44),52px);height:min(calc(var(--cell)*.54),64px);
  transform:translateX(-50%);border-radius:50%;padding:3px;background:linear-gradient(160deg,var(--gilt-hi),var(--gilt) 40%,var(--gilt-lo));
  box-shadow:0 0 0 1.5px var(--gilt-dk),0 4px 12px rgba(0,0,0,.55);transition:opacity .3s}
.mirror .crest svg{display:block;width:100%;height:100%;border-radius:50%;background:var(--velvet-lo)}
body.fs .mirror .crest{opacity:0} /* in the waltz the rose window is the sky's */
.rosewin-art .rw-glass{fill:var(--velvet-lo)}
.rosewin-art .rw-lobe{stroke:var(--gilt-dk);stroke-width:1.6}
.rosewin-art .rw-lobe.a{fill:var(--crimson)}.rosewin-art .rw-lobe.b{fill:var(--amethyst)}
.rosewin-art .rw-heart{fill:var(--gilt);stroke:var(--gilt-dk);stroke-width:1.6}
.rosewin-art .rw-lead{fill:none;stroke:var(--gilt-dk);stroke-width:2}
.mirror .sconce{top:22%;width:min(calc(var(--cell)*.3),36px);height:min(calc(var(--cell)*.72),86px)}
.mirror .sconce.l{right:100%;margin-right:calc(min(calc(var(--cell)*.09),10px) + 2px)}.mirror .sconce.r{left:100%;margin-left:calc(min(calc(var(--cell)*.09),10px) + 2px);transform:scaleX(-1)}
.mirror .sconce svg{display:block;width:100%;height:100%;overflow:visible}
.frame.tight .mirror .sconce{display:none} /* no room beside the mirror in the board area (skin.js frame) */
.sconce .g{fill:var(--gilt)}.sconce .arm{fill:none;stroke:var(--gilt);stroke-width:2.2;stroke-linecap:round}.sconce .wax{fill:#F3E6D6}
.mirror .sconce::before{content:"";position:absolute;left:-70%;right:-70%;top:-18%;height:62%;background:radial-gradient(closest-side,rgba(255,200,120,.3),rgba(255,200,120,.1) 55%,transparent)}
.sconce .flame{fill:#FFD27A;transform-box:fill-box;transform-origin:50% 100%;animation:vb-flame 2.2s ease-in-out infinite alternate}
@keyframes vb-flame{0%{transform:scale(1,1)}40%{transform:scale(.94,1.06)}70%{transform:scale(1.04,.96)}100%{transform:scale(.98,1.03)}}
#board.reels-board{padding:3px;border-radius:4px;background:var(--gilt-dk);box-shadow:0 0 0 1px var(--gilt-hi),0 0 0 3px var(--gilt-lo),0 0 18px rgba(0,0,0,.6)}
/* variant "clean": a thin gilt frame, no crest, scrolls or sconces */
body[data-variant="clean"] .mirror{border-width:2px;border-radius:8px;box-shadow:0 14px 36px rgba(0,0,0,.5)}
body[data-variant="clean"] .mirror .scroll,body[data-variant="clean"] .mirror .crest,body[data-variant="clean"] .mirror .sconce{display:none}
body[data-variant="clean"] .frame{padding:8px 8px 6px}
/* the velvet reel window: gold filigree between the reels; the waltz stop (a small lift on the beat) */
.reels-board .window{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gilt) 45%,transparent),inset 0 16px 18px -6px rgba(0,0,0,.62),inset 0 -1px 0 color-mix(in srgb,var(--gilt-hi) 40%,transparent),inset 0 -10px 16px -8px rgba(0,0,0,.4)}
.reels-board .reel:not(:last-child)::after{content:"";position:absolute;top:0;bottom:0;right:0;z-index:1;width:min(calc(var(--cell)*.08),9px);pointer-events:none;opacity:.6;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 40%22%3E%3Cg fill=%22none%22 stroke=%22%23E2BD6E%22%3E%3Cpath d=%22M9.5 0V40%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M9.5 4C4 6 3 11 6.5 12.5S8 18 5 19M9.5 23C4 25 3 30 6.5 31.5S8 37 5 38%22 stroke-width=%221%22/%3E%3C/g%3E%3Ccircle cx=%225%22 cy=%2219.5%22 r=%221.3%22 fill=%22%23E2BD6E%22/%3E%3C/svg%3E") right top/100% auto repeat-y}
.reels-board .reel.tease{animation:vb-tease .83s ease-in-out infinite}
@keyframes vb-tease{0%,100%{box-shadow:inset 0 0 18px color-mix(in srgb,var(--crimson) 55%,transparent)}12%{box-shadow:inset 0 0 30px color-mix(in srgb,var(--rose-ink) 70%,transparent)}24%{box-shadow:inset 0 0 22px color-mix(in srgb,var(--crimson) 60%,transparent)}}
.reels-board .cell.landed .sym{animation:vb-land .3s cubic-bezier(.37,0,.2,1.15)}
@keyframes vb-land{from{transform:translateY(-7%)}to{transform:none}}
.reels-board .cell.win .sym{animation:vb-throb 714ms var(--ease-std,ease-in-out) infinite alternate;filter:none}
@keyframes vb-throb{to{transform:scale(1.06)}}
.reels-board .cell.win::after{inset:3%;border-radius:6px;border-color:var(--gilt);box-shadow:0 0 14px color-mix(in srgb,var(--gilt) 50%,transparent),inset 0 0 18px color-mix(in srgb,var(--win-glow) 22%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
/* the moon's art carries the word WILD on its banner (art.js): the tag stays as text for screen readers only. A locked
   moon wears its ×m badge in the crescent notch of the disc: the digits, and a ring that fills toward the cap of the
   moment (the shape cue next to the digits) */
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.moonlock .badge{position:absolute;left:53%;top:1%;z-index:2;width:44%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:600 max(12px,calc(var(--cell)*.18))/1 var(--ui);color:var(--ivory);font-variant-numeric:tabular-nums;
  background:radial-gradient(circle at 40% 35%,var(--velvet),var(--velvet-lo) 72%);box-shadow:0 0 0 1.5px var(--gilt-dk),0 2px 6px rgba(0,0,0,.6)}
.moonlock .badge::before{content:"";position:absolute;inset:-10%;border-radius:50%;
  background:conic-gradient(var(--gilt-hi) calc(var(--fill,1)*360deg),color-mix(in srgb,var(--gilt) 24%,transparent) 0);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 59%);mask:radial-gradient(circle,transparent 57%,#000 59%)}
.moonlock .badge i{font-style:normal;font-size:.68em;margin-right:.03em}
.moonlock .badge.wide{width:48%;left:50%;font-size:max(11px,calc(var(--cell)*.15));letter-spacing:-.02em} /* ×10: a size floor on phones */
.moonlock::before{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--crimson) 50%,transparent),color-mix(in srgb,var(--crimson) 14%,transparent) 62%,transparent)}
/* the message: a small plaque at the foot of the mirror */
.message{padding:2px 14px;border-radius:3px;font-weight:600;letter-spacing:.02em;background:color-mix(in srgb,var(--wine) 94%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gilt) 40%,transparent)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--gilt-hi)}
/* the waltz bar: spin n of m, the sticky moons (a small blood moon) and the total won */
.fsbar{background:var(--wine);border-color:var(--gilt-lo);color:var(--ink);font-weight:600}
.fsbar b{color:var(--gilt-hi)}
.fsbar .wb-moons{display:inline-flex;align-items:center;gap:6px}
.moon-ico{display:inline-block;width:1em;height:1em;flex:none;border-radius:50%;background:radial-gradient(circle at 38% 36%,var(--rose-ink),var(--crimson) 60%,var(--velvet-lo));box-shadow:0 0 0 1.5px var(--gilt)}
/* the HUD: wine with a gilt rule; on wide screens the side column is a dance card hung on a gilt cord with a tassel */
.hud{position:relative;border-color:color-mix(in srgb,var(--gilt) 40%,transparent)}
.meter span{letter-spacing:.02em;font-size:13px}
.meter b{color:var(--ink)}.meter.win b{color:var(--gilt-hi)}
.pm,.auto{border-color:color-mix(in srgb,var(--gilt) 45%,transparent)}
.auto[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--gilt) 65%,transparent)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-side-column .hud{border:0;border-radius:6px 6px 16px 16px;margin-top:26px;
    background:repeating-linear-gradient(180deg,transparent 0 33px,color-mix(in srgb,var(--gilt) 7%,transparent) 33px 34px),linear-gradient(180deg,var(--wine-hi),var(--wine) 30%,var(--wine) 80%,var(--wine-hi));
    box-shadow:inset 0 0 0 1px var(--gilt-lo),inset 0 0 0 5px var(--wine),inset 0 0 0 6px color-mix(in srgb,var(--gilt) 55%,transparent),0 18px 40px rgba(0,0,0,.55)}
  .hud-side-column .hud::before{content:"";position:absolute;left:50%;top:-24px;width:30px;height:30px;margin-left:-15px;border-radius:50%;border:2px solid var(--gilt);border-bottom-color:transparent;pointer-events:none}
  .hud-side-column .hud::after{content:"";position:absolute;right:16px;top:-8px;width:10px;height:44px;pointer-events:none;border-radius:4px 4px 2px 2px;
    background:repeating-linear-gradient(90deg,var(--gilt-lo) 0 1px,var(--gilt) 1px 3px),var(--gilt);clip-path:polygon(35% 0,65% 0,65% 22%,100% 30%,100% 100%,0 100%,0 30%,35% 22%)}
  .hud-side-column .meter span{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em}
}
/* the lancet-arch spin button: ruby glass in a gilt arch, the rose inlay turns one petal per spin (the button is the arch) */
.spin{color:var(--gilt);background:none;box-shadow:none;border-radius:0}
.spin svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.spin .petal{fill:var(--crimson);stroke:color-mix(in srgb,var(--gilt) 70%,transparent);stroke-width:.5}
.spin .rose{transform-origin:24px 27px}
.spin.kick .rose{animation:vb-rose .5s cubic-bezier(.37,0,.2,1.15)}
.spin.busy .rose{animation:vb-turn 2.14s linear infinite}
@keyframes vb-rose{from{transform:rotate(0)}to{transform:rotate(45deg)}}
@keyframes vb-turn{to{transform:rotate(360deg)}}
.spin:hover:not(:disabled){filter:brightness(1.12)}
/* overlays: an invitation card of wine and gilt; buttons of gilt */
.overlay{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--night) 60%,transparent),color-mix(in srgb,var(--night) 94%,#000) 75%)}
.ovcard{position:relative;padding:28px clamp(20px,4vw,52px) 30px;border-radius:10px 10px 18px 18px;background:linear-gradient(180deg,var(--wine-hi),var(--wine));
  box-shadow:inset 0 0 0 1px var(--gilt-lo),inset 0 0 0 5px var(--wine),inset 0 0 0 6px color-mix(in srgb,var(--gilt) 55%,transparent),0 24px 60px rgba(0,0,0,.65)}
/* the card's title: Didone capitals at a measured size with open tracking (an invitation, not a billboard); the
   padding balances the tracking after the last letter of every line */
.ovcard{width:min(720px,100%)}
.ovcard h2{font-weight:800;font-size:clamp(32px,5.4vw,68px);line-height:1.04;letter-spacing:.08em;padding-left:.08em;color:var(--gilt);text-shadow:0 2px 0 #000,0 0 22px color-mix(in srgb,var(--crimson) 30%,transparent)}
.overlay.bigwin.t1 h2{font-size:clamp(36px,6.4vw,82px)}.overlay.bigwin.t2 h2{font-size:clamp(40px,7.4vw,96px)}
.ovamt{color:var(--ink)}.ovcard p{color:var(--muted)}
.btn{box-shadow:0 0 0 1.5px var(--gilt-dk),0 8px 20px rgba(0,0,0,.45)}
.panel{box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--gilt) 30%,transparent)}
.panel h2{color:var(--gilt)}.panel h3{color:var(--rose-ink)}
.tablet .th{color:var(--gilt)}
.ptc,.mini,.chips button,.tog{background:color-mix(in srgb,#000 22%,var(--wine))}
/* a toggle that is on: an ivory-gilt knob on a gilt-tinted track (≥ 3:1 for the state in every preset) */
.tog[aria-checked="true"]{background:color-mix(in srgb,var(--gilt) 30%,var(--wine))}.tog[aria-checked="true"]::after{background:var(--gilt-hi)}
.chips button[aria-pressed="true"]{background:var(--gilt);color:#1E0710;border-color:var(--gilt)}
table.hist .won{color:var(--gilt-hi)}
.ptc .symbox{border-radius:4px;background:var(--window-bg)}
.ptc .sym{position:relative;width:100%;height:100%}
.special.sumrule{grid-template-columns:auto 1fr}
.sumpics{display:flex;align-items:center;gap:6px}
.sumpics .symbox{position:relative;display:block;width:64px;height:64px;--cell:64px;border-radius:4px;background:var(--lock-bg);box-shadow:inset 0 0 0 2px var(--lock-ring)}
.sumpics .sym{position:absolute;inset:6%}.sumpics .sym img{position:absolute;inset:0;width:100%;height:100%}
.sumpics b{font-family:var(--display);font-size:22px;color:var(--gilt);white-space:nowrap}
.ladder{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0;list-style:none}
.ladder li{padding:4px 10px;border:1px solid var(--line);border-radius:3px;font-weight:600}
/* the candles into (and out of) the Midnight Waltz: a dark veil, seven candles, a rose window where the moon rises
   (above the board, below the overlays; driven by skin.js) */
.vigil{position:fixed;inset:0;z-index:20;display:none;pointer-events:none}
.vigil.show{display:block}
.vigil .veil{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--night) 78%,#000),#030102 75%)}
.vigil .rosewin{position:absolute;left:50%;top:40%;width:min(46vmin,340px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;opacity:0;
  background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--velvet-lo) 70%,#000),#050104);box-shadow:0 0 0 3px var(--gilt-lo),0 0 0 7px color-mix(in srgb,var(--gilt) 30%,transparent)}
.vigil .rosewin .moon{position:absolute;left:19%;top:19%;width:62%;height:62%;border-radius:50%;transform:translateY(108%);
  background:radial-gradient(circle at 42% 38%,#F4E2DC,#DFA2AC 40%,color-mix(in srgb,var(--crimson) 80%,#000) 80%);box-shadow:0 0 40px color-mix(in srgb,var(--crimson) 45%,transparent)}
.vigil .rosewin-art{position:absolute;inset:0;width:100%;height:100%}
.rosewin-art.lead-only .rw-glass,.rosewin-art.lead-only .rw-heart{fill:none}
.rosewin-art.lead-only .rw-lobe.a{fill:color-mix(in srgb,var(--crimson) 16%,transparent)}.rosewin-art.lead-only .rw-lobe.b{fill:color-mix(in srgb,var(--amethyst) 16%,transparent)}
.rosewin-art.lead-only .rw-lobe,.rosewin-art.lead-only .rw-heart,.rosewin-art.lead-only .rw-lead{stroke:var(--gilt-lo)}
.vigil .candles{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);display:flex;align-items:flex-end;gap:min(6vw,48px)}
.vigil .candle{position:relative;width:min(3.4vw,18px);height:calc(min(16vh,120px)*var(--h,1));border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,#CDBBA8,#F6ECDF 45%,#D8C6B2);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.vigil .candle::before{content:"";position:absolute;left:50%;top:-6px;width:1.5px;height:7px;margin-left:-.75px;background:#2A1A10}
.vigil .flame{position:absolute;left:50%;bottom:100%;width:12px;height:22px;margin:0 0 4px -6px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%,#FFF6D8,#FFD27A 40%,rgba(255,150,60,0) 72%);box-shadow:0 0 18px 6px rgba(255,190,110,.32);transform-origin:50% 100%;transition:opacity .12s ease-out,transform .12s ease-out}
.vigil .candle.out .flame{opacity:0;transform:scaleY(.35)}
.vigil .candle.out::after{content:"";position:absolute;left:50%;bottom:100%;width:6px;height:26px;margin:0 0 6px -3px;border-radius:50%;background:linear-gradient(0deg,rgba(220,210,210,.45),transparent);animation:vb-smoke .9s ease-out forwards}
@keyframes vb-smoke{from{opacity:.8;transform:none}to{opacity:0;transform:translate(4px,-18px) scaleX(1.6)}}
/* big wins: bats flutter up from the card (skin.js) */
.bat-flight{position:fixed;left:var(--x);top:var(--y);z-index:35;width:calc(70px*var(--s));height:calc(28px*var(--s));pointer-events:none;animation:vb-bat 2.4s cubic-bezier(.37,0,.2,1) var(--d) both}
.bat-flight::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#6A3446,#2A0A14 45%,#140409);-webkit-mask:var(--vb-bat) center/contain no-repeat;mask:var(--vb-bat) center/contain no-repeat;animation:vb-flap .16s ease-in-out infinite alternate}
@keyframes vb-bat{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes vb-flap{to{transform:scaleY(.45)}}
/* phones: no room beside the mirror for the sconces; a slimmer mirror; the title may wrap; the waltz bar may wrap */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .mirror .sconce{display:none}
  .logo h1{letter-spacing:.02em;font-size:clamp(18px,5.6vw,36px)}
  .hud{border-radius:12px 12px 8px 8px;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--gilt) 45%,transparent),0 -6px 18px rgba(0,0,0,.35)}
  .special.sumrule{grid-template-columns:1fr}
}
@media (max-width:400px){
  .frame{padding:12px 10px 8px}
  .mirror .scroll{width:26px;height:26px}
  .fsbar{flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:4px 10px;font-size:13px}
}
/* reduced motion: still candles, no drift, no heartbeat glow, no bats; the scene layers only cross-fade */
body.still .hall .glow,body.still .balcony .bats,body.still .sconce .flame,body.still .reels-board .reel.tease,body.still .reels-board .cell.win .sym,body.still .spin.kick .rose,body.still .spin.busy .rose,body.still .vigil .candle.out::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .hall .glow,.balcony .bats,.sconce .flame,.reels-board .reel.tease,.reels-board .cell.win .sym,.spin.kick .rose,.spin.busy .rose,.vigil .candle.out::after{animation:none!important}
  .bat-flight{display:none}
  .scene .balcony,.scene .eclipse,.mirror .crest{transition-duration:.1s}
}