/* Fern Flower Night skin on the shared game shell: Kupala Night stitched in red cross-stitch on linen. One key light,
   the moon at the top right: it lights the towel's cloth, the thread sheen of every stitch (art.js), the spin flower and
   the rims of the near trees. The scene is layered — sky with the moon and its halo, far spruces fading into ground mist,
   near spruces with a moonlit rim, fern fronds in front (or the river at midnight; the bonfire clearing in the Kupala
   Spins) — under one static grain and a vignette. The reels lie on an embroidered linen towel (rushnyk): woven cloth with
   slubs and soft folds, red-and-black ornament bands of real X stitches, the embroidered Fern Flower medallion at the
   top, quiet running-stitch reel separators. The Firefly Card on the right, the embroidered bottom bar, the five-petal
   flower spin button. Theme tokens (--thread, --night, --glow, --ink, --muted, --gloss, --title, --plate*, --sky*, --far,
   --near, --fern, --moon, --star, --water, --fire, --veil, --sp-*, --card-*, --cd-*, --ff-x-thread) come from skin.js
   themeMap: dark presets get linen ink on dark plates, the light preset (Linen & Red) dark ink on linen plates, every
   text token lifted to ≥ 4.5:1. The red thread is decoration and large title text only. Animated properties: transform
   and opacity only; no filter on a cell or on anything that moves. */
:root{
  --thread:#F13D41; --night:#0C1A14; --glow:#D4F05A;
  --ink:#EDE6D6; --muted:#BDB6A6; --gloss:#D4F05A; --title:#F47A7D; --plate:#08110D; --plate-edge:#7F2B2B;
  --linen:#EDE6D6; --linen-lo:#D9CFB8; --linen-ink:#1E1A17; --stitch:#B33A33;
  --sky-top:#08120E; --sky-low:#18291A; --far:#0B1813; --near:#050C09; --fern:#253A1F; --moon:#E9E1D0; --star:rgba(237,230,214,.75);
  --water:#183244; --fire:#F66B3F; --veil:#070F0B;
  --sp-petal:#F13D41; --sp-stitch:#F9A5A6; --sp-heart:#D4F05A; --sp-eye:#0C1A14;
  --display:"Kurale",Georgia,"Times New Roman",serif; --ui:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:8px; --radius-sm:6px; --line:color-mix(in srgb,var(--plate-edge) 80%,transparent); --panel-border:var(--plate-edge);
  --hud-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate) 86%,var(--thread)),var(--plate));
  --ibtn-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate) 80%,var(--thread)),var(--plate)); --ibtn-ink:var(--ink);
  /* linen: a fine plain weave (warp lighter, weft darker) over a warm cloth tone — the paytable's symbol boxes */
  --weave-fine:repeating-linear-gradient(0deg,rgba(96,70,40,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,253,245,.12) 0 1px,transparent 1px 3px);
  --window-bg:var(--weave-fine),linear-gradient(180deg,#F2ECDF,#E7DECB);
  /* the towel's cloth: the moon's light from the top right, shade toward the bottom left, three soft folds, slubs (a
     few thicker threads at uneven spacing), the fine weave, the cloth tone */
  --cloth:radial-gradient(130% 90% at 96% -6%,rgba(255,251,238,.34),rgba(255,251,238,0) 58%),
    linear-gradient(32deg,rgba(66,44,22,.13),rgba(66,44,22,0) 46%),
    linear-gradient(90deg,rgba(84,60,32,.055),transparent 8%,transparent 27%,rgba(84,60,32,.05) 35%,rgba(255,255,250,.06) 41%,transparent 48%,transparent 66%,rgba(84,60,32,.055) 74%,rgba(255,255,250,.05) 80%,transparent 87%),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(112,86,52,.06) 23px 24px,transparent 24px 41px,rgba(112,86,52,.04) 41px 42px,transparent 42px 67px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(112,86,52,.05) 31px 32px,transparent 32px 53px),
    var(--weave-fine),linear-gradient(180deg,#F3EDE0,#E5DCC8);
  --window-radius:2px; --reel-sep:transparent; --win-glow:color-mix(in srgb,var(--glow) 70%,transparent);
  --spin-ring:transparent; /* the flower itself turns while a spin is busy */
  --veil-light:color-mix(in srgb,var(--glow) 12%,transparent);
  color-scheme:var(--scheme,dark);
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: the forest (default), the river, the bonfire clearing of the Kupala Spins; silhouettes are masks from
   skin.js filled with gradients (atmospheric perspective: far = lighter and misty at the base, near = darkest with a
   moonlit rim on the moon side); only the water glints, the candles and the bonfire glow move (opacity), and the layers
   fade */
.scene{background:var(--sky-top)}
.scene .forest,.scene .river,.scene .clearing{transition:opacity .9s ease}
.scene .forest,.scene .river{background:radial-gradient(55% 46% at 50% 44%,color-mix(in srgb,var(--moon) 6%,transparent),transparent 72%),linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 70%,var(--far) 100%)}
.scene .forest>i,.scene .river>i,.scene .clearing>i{position:absolute;inset:0}
.scene .stars{background:var(--star);-webkit-mask:var(--ff-stars) center top/cover no-repeat;mask:var(--ff-stars) center top/cover no-repeat;opacity:.7}
/* no stars behind the title: a patch of sky painted over the star pixels there (inside the star mask, so only they change) */
.scene .stars::after{content:"";position:absolute;left:18%;right:18%;top:0;height:15%;background:radial-gradient(closest-side,var(--sky-top) 70%,transparent)}
/* the moon: limb-darkened disc with soft maria, lit edge toward the light, a two-step halo (static box-shadow) */
.scene i.moon{inset:8% 13% auto auto;width:13vmin;height:13vmin;border-radius:50%;opacity:.92;
  background:radial-gradient(circle at 36% 44%,color-mix(in srgb,var(--moon) 88%,#7E786A) 0 4%,transparent 15%),radial-gradient(circle at 56% 64%,color-mix(in srgb,var(--moon) 90%,#7E786A) 0 6%,transparent 19%),
    radial-gradient(circle at 64% 32%,color-mix(in srgb,var(--moon) 92%,#7E786A) 0 3%,transparent 11%),radial-gradient(circle at 60% 36%,var(--moon) 0 34%,color-mix(in srgb,var(--moon) 84%,#5E5A50) 72%,color-mix(in srgb,var(--moon) 70%,#4A473F) 100%);
  box-shadow:0 0 3vmin .6vmin color-mix(in srgb,var(--moon) 26%,transparent),0 0 22vmin 7vmin color-mix(in srgb,var(--moon) 7%,transparent)}
.scene .far,.scene .near,.scene .ferns,.scene .reeds,.scene .clearing .trees{-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 .forest .far,.scene .river .far{background:linear-gradient(180deg,var(--far) 45%,color-mix(in srgb,var(--far) 86%,var(--moon)) 100%);-webkit-mask-image:var(--ff-trees-far);mask-image:var(--ff-trees-far)}
.scene .mist{background:linear-gradient(0deg,transparent 0,color-mix(in srgb,var(--moon) 7%,transparent) 22%,color-mix(in srgb,var(--moon) 4%,transparent) 42%,transparent 60%)}
.scene .forest .near{background:var(--near);-webkit-mask-image:var(--ff-trees-near);mask-image:var(--ff-trees-near)}
.scene .forest .near.rim{background:color-mix(in srgb,var(--near) 62%,var(--moon));opacity:.32;translate:.35vmin -.25vmin}
.scene .forest .ferns{background:linear-gradient(0deg,color-mix(in srgb,var(--fern) 50%,#000) 0,var(--fern) 52%,color-mix(in srgb,var(--fern) 84%,var(--moon)) 100%);-webkit-mask-image:var(--ff-ferns);mask-image:var(--ff-ferns)}
.scene .river{opacity:0}
.scene .river>i.far{inset:-14% 0 14% 0}
.scene .river>i.water{inset:62% 0 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--water) 70%,var(--sky-low)),var(--water) 40%,color-mix(in srgb,var(--water) 70%,#000))}
.scene .river .glint{position:absolute;left:66%;top:4%;width:12vmin;height:70%;transform:translateX(-50%);opacity:.5;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--moon) 60%,transparent) 0 3px,transparent 3px 14px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);animation:ff-glint 6s ease-in-out infinite alternate}
.scene .river>i.wreaths{inset:66% 0 12% 0}
/* a floating wreath: a ring of leaves (shaded, lit from the top right) with a few flower dots, a candle in the middle */
.scene .river .wreaths b{position:absolute;width:7vmin;height:2.4vmin;border-radius:50%;
  background:radial-gradient(closest-side,transparent 56%,color-mix(in srgb,var(--fern) 70%,var(--moon)) 62%,var(--fern) 76%,color-mix(in srgb,var(--fern) 60%,#000) 92%,transparent 100%),
    radial-gradient(circle at 22% 40%,var(--thread) 0 5%,transparent 7%),radial-gradient(circle at 70% 30%,var(--thread) 0 5%,transparent 7%),radial-gradient(circle at 52% 88%,#D59D31 0 5%,transparent 7%)}
.scene .river .wreaths b::after{content:"";position:absolute;left:50%;bottom:45%;width:.8vmin;height:2vmin;border-radius:50% 50% 40% 40%;transform:translateX(-50%);background:linear-gradient(0deg,var(--fire),color-mix(in srgb,var(--fire) 40%,#FFF2C2));box-shadow:0 0 1.6vmin var(--fire);animation:ff-candle 2.4s ease-in-out infinite alternate}
.scene .river .wreaths b:nth-child(1){left:18%;top:20%}.scene .river .wreaths b:nth-child(2){left:44%;top:55%;transform:scale(.8)}.scene .river .wreaths b:nth-child(3){left:76%;top:30%;transform:scale(.9)}
.scene .river .reeds{background:var(--near);-webkit-mask-image:var(--ff-reeds);mask-image:var(--ff-reeds)}
body.bg-river .scene .river{opacity:1}
body.bg-river .scene .forest{opacity:0}
/* the clearing of the Kupala Spins: a warm mid-tone glow from the bonfires (never a light over the screen); it fades in
   over ≈ 1 s while the ring cover is up, so the screen's brightness changes slowly. The bonfires stand where they show:
   skin.js placeFire() sets each one's box on the bar's top edge (two beside the towel on wide screens, one under it on
   phones) and centres the glow on them */
.scene .clearing{opacity:0;background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 60%,color-mix(in srgb,var(--fire) 16%,var(--sky-low)) 100%)}
.scene .clearing .glow{background:radial-gradient(60% 45% at 50% 100%,color-mix(in srgb,var(--fire) 34%,transparent),transparent 70%);animation:ff-fire 2.8s ease-in-out infinite alternate}
.scene .clearing .trees{background:linear-gradient(0deg,color-mix(in srgb,var(--near) 80%,var(--fire)) 0,var(--near) 34%);-webkit-mask-image:var(--ff-clearing);mask-image:var(--ff-clearing)}
.scene .clearing>i.fire{inset:auto;left:50%;top:100%;width:0;height:0;opacity:.9;-webkit-mask:var(--ff-flames) 0 0/100% 100% no-repeat;mask:var(--ff-flames) 0 0/100% 100% no-repeat;
  background:linear-gradient(0deg,#3B2618 0 8%,color-mix(in srgb,var(--fire) 66%,#5A1E0E) 15%,var(--fire) 34%,color-mix(in srgb,var(--fire) 45%,#FFE6A0) 66%,color-mix(in srgb,var(--fire) 20%,#FFF4CF))}
.scene .clearing>i.fire[hidden]{display:none}
body.fs .scene .clearing{opacity:1}
body.fs .scene .forest,body.fs .scene .river{opacity:0}
.scene .grain{background:var(--ff-grain) 0 0/160px 160px;opacity:.07}
.scene .vignette{background:radial-gradient(ellipse at 50% 46%,transparent 50%,rgba(0,0,0,.46) 100%)}
/* the shell's governed screen flash (big-win tiers): a faint firefly tint, never white */
.flash{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--glow) 18%,transparent),color-mix(in srgb,var(--thread) 6%,transparent) 45%,transparent 75%)}
@keyframes ff-glint{from{opacity:.3}to{opacity:.6}}
@keyframes ff-candle{from{opacity:.75}to{opacity:1}}
@keyframes ff-fire{from{opacity:.8}to{opacity:1}}

/* ---- title and round buttons (the shell centres the title over the board; no transform or margin here) ---- */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.03em;color:var(--title);text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--plate) 92%,transparent)}
.ibtn{border:1px solid var(--plate-edge);border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.ibtn:hover{border-color:var(--gloss)}

/* ---- the frame: an embroidered towel round the reels (variant "rushnyk"): ornament bands above and below, the Fern
   Flower medallion at the top; "clean" keeps a running-stitch border. The towel (.rushnyk) lies exactly over the grid
   (its size from skin.js onConfig), behind it; the reel window is transparent, so the towel's one cloth runs under the
   reels without a seam. The padding (px and cells) leaves room for the bands and the medallion. */
.frame{--fpt:calc(var(--cell)*.44 + 4px);padding:var(--fpt) 14px 6px;gap:calc(var(--cell)*.36 + 6px)}
.rushnyk{--st:calc(var(--cell)*.022);position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--ff-cols,5));height:calc(var(--cell)*var(--ff-rows,5));transform:translateX(-50%);pointer-events:none}
.rushnyk .towel{position:absolute;inset:calc(var(--cell)*-.38) calc(var(--cell)*-.12) calc(var(--cell)*-.34);border-radius:2px;background:var(--cloth);
  box-shadow:inset 0 1px 0 rgba(255,255,248,.5),inset -1px 0 0 rgba(255,255,248,.28),inset 0 -2px 0 rgba(90,64,34,.18),0 2px 5px rgba(0,0,0,.3),0 22px 46px rgba(0,0,0,.5)}
/* the hem: a drawn-thread line a few millimetres in from the edge */
.rushnyk .towel::before{content:"";position:absolute;inset:calc(var(--st)*2.4);border:1px dashed rgba(122,92,56,.32);border-radius:1px}
.rushnyk .band{position:absolute;left:50%;width:calc(var(--st)*var(--ff-band-n,231));height:calc(var(--st)*11);transform:translateX(-50%)}
.rushnyk .band::before,.rushnyk .band::after{content:"";position:absolute;inset:0;-webkit-mask-size:calc(var(--st)*12) 100%;mask-size:calc(var(--st)*12) 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:0 0;mask-position:0 0}
.rushnyk .band::before{background:var(--ff-x-thread) 0 0/var(--st) var(--st);-webkit-mask-image:var(--ff-band-red);mask-image:var(--ff-band-red)}
.rushnyk .band::after{background:var(--ff-x-ink) 0 0/var(--st) var(--st);-webkit-mask-image:var(--ff-band-dark);mask-image:var(--ff-band-dark)}
.rushnyk .band.top{top:calc(var(--cell)*-.3)}
.rushnyk .band.bottom{bottom:calc(var(--cell)*-.3)}
/* the medallion: a round linen patch sewn over the middle of the top band (its own cloth, a hem, a small shadow) */
.rushnyk .crest{position:absolute;left:50%;top:calc(var(--cell)*-.385);width:calc(var(--cell)*.4);height:calc(var(--cell)*.4);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 66% 30%,rgba(255,251,238,.4),transparent 60%),var(--weave-fine),#EEE7D7;box-shadow:0 0 0 calc(var(--st)*.9) #EEE7D7,0 1px 3px rgba(40,24,10,.35),0 3px 10px rgba(40,24,10,.18)}
.rushnyk .crest::before{content:"";position:absolute;inset:calc(var(--st)*.5);border-radius:50%;border:1px dashed rgba(150,40,40,.45)}
.rushnyk .crest img{position:absolute;inset:6%;width:88%;height:88%}
.board,.message{position:relative;z-index:1}
body[data-variant="clean"] .rushnyk .band,body[data-variant="clean"] .rushnyk .crest{display:none}
body[data-variant="clean"] .rushnyk .towel{inset:-8px;outline:2px dashed color-mix(in srgb,var(--thread) 70%,#6F1621);outline-offset:-5px}
body[data-variant="clean"] .rushnyk .towel::before{display:none}
body[data-variant="clean"] .frame{--fpt:14px;gap:16px}

/* ---- the reels: the towel shows through; quiet running stitches between the reels and faint drawn-thread rows; a
   stepped settle; winning cells get a stitched thread ring and the fireflies' light; the rest step back (opacity) ---- */
.reels-board.card-board .window{background:transparent}
.card-board .window::after{content:"";position:absolute;inset:0 3px 3px 0;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M99.2 6V94' stroke='%23A3352F' stroke-opacity='.36' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='5 5'/%3E%3Cpath d='M0 99.5H100' stroke='%23705030' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E") 0 0/var(--cell) var(--cell)}
.reels-board .cell.landed .sym{animation:ff-land .3s steps(3) both}
.reels-board .cell.win::after{inset:6%;border-radius:6px;border:2.5px dashed color-mix(in srgb,var(--thread) 78%,#6F1621);box-shadow:0 0 14px var(--win-glow),inset 0 0 12px var(--win-glow-in,color-mix(in srgb,var(--glow) 34%,transparent))}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
.reels-board .reel.tease{box-shadow:inset 0 0 22px var(--win-glow)}
@keyframes ff-land{0%{transform:translateY(-5%)}50%{transform:translateY(2%)}100%{transform:none}}

/* ---- the message: a plate under the towel ---- */
.message{font-family:var(--ui);font-weight:500;color:var(--ink);max-width:100%;padding:3px 14px;border-radius:999px;background:color-mix(in srgb,var(--plate) 90%,transparent);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em}
.message:empty{background:none}
.message b{color:var(--gloss)}

/* ---- the Kupala bar: the mini card (phones only: the panel shows the card on wide screens), the spin, the card, the
   total won, on an embroidered plate ---- */
.fsbar{position:relative;gap:14px;padding:5px 14px;border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--plate) 84%,var(--thread)),var(--plate));border:1px solid var(--plate-edge);
  color:var(--ink);font-family:var(--ui);font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fsbar b{color:var(--gloss)}
.fsbar .card-view.cv-mini{display:none}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .fsbar{gap:10px;padding:4px 10px;font-size:14px}
  .fsbar .card-view.cv-mini{display:inline-block}
  .fsbar .fs-card{display:none}
}

/* ---- the Firefly Card panel (#sideR, wide screens) and the paytable's card ---- */
.card-panel .card-view{--cv:clamp(18px,2.05vw,28px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.card-panel .card-view.full{position:relative}
.card-panel .card-view.full::before{content:"";position:absolute;left:8px;right:8px;top:3px;height:8px;background:var(--thread);opacity:.85;-webkit-mask:var(--ff-band-red) 0 0/9px 8px repeat-x;mask:var(--ff-band-red) 0 0/9px 8px repeat-x}
/* the column values sit under narrow columns (5 × ≈ 26 px, a value is ≈ 30–38 px wide): every other one drops to a
   second line, so neighbours never touch; each value stays whole on one line, centred under its own column */
.card-view.full .cv-v{font-variant-numeric:tabular-nums}
.card-view.full .cv-v.k-column,.card-view.full .cv-v.k-diagonal{align-self:start}
.card-view.full .cv-v.k-column:nth-child(odd of .k-column){padding-top:calc(3px + 1.2em)}
.card-view .fern-bloom .fl-petal{fill:var(--thread);stroke:color-mix(in srgb,var(--thread) 50%,var(--linen-ink));stroke-width:1.6}
.card-view .fern-bloom .fl-stitch{fill:none;stroke:var(--linen);stroke-width:1.6;stroke-dasharray:4 3}
.card-view .fern-bloom .fl-heart{fill:var(--glow)}.card-view .fern-bloom .fl-eye{fill:var(--linen-ink)}
.card-view:not(.bloomed) .fern-bloom{opacity:.55}

/* ---- HUD: the embroidered bottom bar (an ornament band along its top edge); sentence-case labels ---- */
.hud{position:relative;border:1px solid var(--plate-edge);box-shadow:0 6px 18px rgba(0,0,0,.35);border-radius:8px}
.hud::before{content:"";position:absolute;left:14px;right:14px;top:-6px;height:11px;background:var(--thread);-webkit-mask:var(--ff-band-red) 0 0/12px 11px repeat-x;mask:var(--ff-band-red) 0 0/12px 11px repeat-x;pointer-events:none}
.meter span{font-family:var(--ui);font-weight:600;color:var(--muted)}
.meter b{font-family:var(--ui);font-weight:700;color:var(--ink)}.meter.win b{color:var(--gloss)}
.hud .meter.win.at-zero b{color:var(--muted)}
.meter small{color:var(--muted)}
.demo{background:var(--gloss);color:var(--plate)}
.pm,.auto{background:var(--ibtn-bg);border:1px solid var(--plate-edge);color:var(--ink)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gloss)}
.auto span{background:var(--gloss);color:var(--plate)}
/* the five-petal flower: drawn by the SVG (skin.js), which fills the button; lit from the moon by one neutral overlay
   (.fl-shine), a contact shadow under it (static, no filter); the busy flower turns slowly in steps */
.spin{width:calc(var(--s)*1.06);height:calc(var(--s)*1.06);border-radius:50%;background:none;box-shadow:none;filter:none;isolation:isolate}
.spin::after{content:"";position:absolute;z-index:-1;left:10%;right:10%;bottom:-3%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.spin svg{width:100%;height:100%}
.spin .fl-petal{fill:var(--sp-petal);stroke:color-mix(in srgb,var(--sp-petal) 45%,#1A0604);stroke-width:1.4}
.spin .fl-shine{pointer-events:none}
.spin .fl-stitch{fill:none;stroke:var(--sp-stitch);stroke-width:1.8;stroke-dasharray:4.5 3.5;stroke-linecap:round;opacity:.9}
.spin .fl-heart{fill:var(--sp-heart);stroke:color-mix(in srgb,var(--sp-heart) 45%,#1A1A06);stroke-width:1.6}
.spin .fl-eye{fill:var(--sp-eye)}
.spin .fl-turn{transform-box:view-box;transform-origin:50% 50%}
.spin.busy .fl-turn{animation:ff-turn 3s steps(30) infinite}
.spin.kick .fl-turn{animation:ff-kick .24s steps(3)}
.spin:hover:not(:disabled){filter:none}
.spin:hover:not(:disabled) svg{scale:1.03}
.spin svg{transition:scale var(--t-fast,140ms) var(--ease-std,ease)}
.spin:disabled{filter:none}
.spin:disabled:not(.busy) svg{opacity:.55}
@keyframes ff-turn{to{transform:rotate(360deg)}}
@keyframes ff-kick{0%{transform:scale(.9)}100%{transform:none}}
.side .tablet{background:var(--panel-bg);border:1px solid var(--plate-edge);color:var(--ink)}
.tablet .th{font-family:var(--display);font-weight:400;color:var(--gloss)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays ---- */
.panel{color:var(--ink)}
.panel h2,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;color:var(--title)}
.panel h3{font-family:var(--display);font-weight:400;color:var(--primary-hi)}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.02em;border-radius:6px}
.ptc{background:color-mix(in srgb,var(--plate) 55%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:3px;background:var(--window-bg);box-shadow:inset 0 0 0 1px rgba(122,92,56,.35),inset 0 1px 0 rgba(255,255,248,.5)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.special p{margin:0 0 6px}
.pt-card{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin:10px 0}
.pt-card .card-view.full{--cv:26px;width:auto;max-width:240px}
.pt-lines{border-collapse:collapse;font-size:15px;min-width:min(100%,320px);font-variant-numeric:tabular-nums}
.pt-lines caption{text-align:left;font-weight:700;padding-bottom:4px;color:var(--ink)}
.pt-lines th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:2px 10px 4px 0;border-bottom:1px solid var(--line)}
.pt-lines td{padding:3px 10px 3px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.pt-lines td:nth-child(n+2){text-align:right;font-weight:700}
.pt-lines tr.bloom td{color:var(--gloss)}
/* the overlays (Kupala intro / resume / summary, big wins) sit over the light linen window: a near-opaque plate centre
   keeps every text token at its lifted contrast (measured ≥ 4.5:1 even over white; the shell's 55 % --bg centre let the
   linen through) */
.overlay{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--plate) 90%,transparent),color-mix(in srgb,var(--bg) 96%,#000) 75%)}
.ovcard h2{text-shadow:0 2px 0 color-mix(in srgb,var(--plate) 80%,transparent),0 0 30px color-mix(in srgb,var(--glow) 18%,transparent)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}

/* ---- the firefly ring (fsEnter / fsExit, skin.js): fireflies gather into a ring over a dark night cover that fades;
   a mid-tone, never a light; transform and opacity only ---- */
.fernveil{position:fixed;inset:0;z-index:36;pointer-events:none;display:none}
.fernveil.show{display:block}
.fernveil .cover{position:absolute;inset:-10%;opacity:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--veil) 70%,var(--glow)) 0 6%,var(--veil) 22%,var(--veil) 100%)}
.fernveil .ring{position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;border-radius:50%;opacity:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--glow) 55%,transparent),0 0 30px color-mix(in srgb,var(--glow) 35%,transparent),inset 0 0 30px color-mix(in srgb,var(--glow) 25%,transparent)}
.fernveil .fly{position:absolute;width:1.6vmin;height:1.6vmin;margin:-.8vmin 0 0 -.8vmin;border-radius:50%;opacity:0;background:radial-gradient(circle,#FFFFFF 0 20%,var(--glow) 45%,transparent 72%)}
.fernveil.calm .cover{opacity:1}

/* ---- reduced motion: no drift, no glints, no flicker (shell.css also caps every animation) ---- */
body.still .scene .river .glint,body.still .scene .river .wreaths b::after,body.still .scene .clearing .glow,body.still .spin .fl-turn{animation:none}
@media (prefers-reduced-motion:reduce){.scene .river .glint,.scene .river .wreaths b::after,.scene .clearing .glow,.spin .fl-turn{animation:none}.spin svg{transition:none}}

/* ---- phones ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:calc(var(--cell)*.42 + 2px);padding-left:8px;padding-right:8px;gap:calc(var(--cell)*.36 + 4px)}
  .hud::before{left:10px;right:10px}
  .scene i.moon{inset:9% 9% auto auto;width:15vmin;height:15vmin}
  /* the Kupala bar takes the medallion's room: the towel keeps its bands, the cells stay ≈ 56 px at 360 × 640 */
  body.fs .frame{--fpt:calc(var(--cell)*.38 + 2px)}
  body.fs .rushnyk .crest{display:none}
  .fsbar{padding:3px 10px}
}
@media (max-width:400px){.logo h1{font-size:19px;letter-spacing:0}}
/* the moon on portrait screens: its start before skin.js placeMoon() measures the towel — in the sky over the towel on a
   tall phone, from behind the towel's right edge on a shorter screen (the key light stays at the top right, in view) */
@media (max-aspect-ratio:49/100){.scene i.moon{inset:clamp(54px,25vh - 28vw - 34px,120px) 6vmin auto auto;width:11vmin;height:11vmin}}
@media (max-aspect-ratio:4/5) and (min-aspect-ratio:49/100){.scene i.moon{inset:max(64px,10vh) -1vmin auto auto;width:11vmin;height:11vmin}}