/* Henge of Seasons skin on the shared game shell (dark theme): an insular illuminated manuscript. A stone circle at dawn
   in the mist (or an old oak grove hung with mistletoe), the season's sky in the Season Spins, an open codex round the
   board (the dial on the left page, the reels on the right one), vellum panes behind the symbols, a golden crescent
   sickle as the spin button and the HUD on the margins (wide) or a stone sill (phones). The theme tokens (--bg, --panel,
   --ink, --muted, --primary, --rubric, --woad-ink, the scene colours) come from skin.js themeMap; vellum, ink, gold
   and stone are materials. Text on vellum is ink or rubric, text on the dark grounds is --ink / --muted / --primary,
   each pair at 4.5:1 or more. One key light for everything: the dawn, from the top left (symbols, the codex, the spin
   button); the low sun behind the stones rims them from the middle. Animations move transform / opacity only; no
   filter is animated and no filter sits on a symbol. */
:root{
  --panel:#0E1812; --panel-hi:#1D2B22; --ink:#F3EAD6; --muted:#BFB6A4; --rubric:#5C3F7E; --woad-ink:#2F5A94;
  --cover:#2A2420; --cover-hi:#3A3A48; --sky-dawn-top:#2B3238; --sky-dawn-mid:#4E4A56; --sky-dawn-low:#7E7270;
  --ridge:#4A4E58; --bank:#0C150F; --stone:#0B130E; --stone-hi:#33403A; --lichen:#828868; --leaf:#294F2B; --mist:#7E8582;
  --rim:#F2CB94;
  --vellum-hi:#F7EDD5; --vellum:#F1E3C0; --vellum-lo:#E2CC98; --iron-ink:#22160A; --gold:#E6B040; --gold-hi:#FFF2BE; --gold-lo:#94600F;
  --display:"Uncial Antiqua",Georgia,serif; --ui:"Alegreya",Georgia,serif;
  --line:color-mix(in srgb,var(--primary) 34%,transparent); --radius:12px; --radius-sm:8px;
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --panel-border:color-mix(in srgb,var(--primary) 40%,transparent);
  --hud-bg:linear-gradient(180deg,var(--stone-hi),var(--stone));
  --ibtn-bg:var(--panel); --ibtn-ink:var(--primary-hi);
  /* the sickle's gold: a banded reflection (a dark horizon just under the middle) and a small sharp highlight top left */
  --btn-bg:radial-gradient(34% 22% at 34% 22%,rgba(255,252,236,.75),transparent 70%),
    linear-gradient(172deg,#FFF0BE 0%,#E9B955 30%,#7A4E14 47%,#D9A441 56%,#C99A3E 80%,#7C5214 100%);
  --btn-ink:var(--iron-ink);
  /* the reel window: vellum with faint ruling and a darker edge, ink between the reels */
  --window-bg:repeating-linear-gradient(180deg,transparent 0 calc(var(--cell) - 1px),color-mix(in srgb,var(--iron-ink) 6%,transparent) calc(var(--cell) - 1px) var(--cell)),
    radial-gradient(120% 90% at 42% 38%,var(--vellum-hi),var(--vellum) 60%,var(--vellum-lo));
  --window-radius:4px; --reel-sep:color-mix(in srgb,var(--iron-ink) 12%,transparent); --win-glow:var(--gold); --focus:var(--primary-hi); --spin-blur:1px;
  --corner-bg:var(--vellum-hi);
  /* line markers on the vellum page: quiet vellum plates with ink numbers; the line's colour is the 3 px bar */
  --peg-bg:color-mix(in srgb,var(--vellum-lo) 62%,var(--vellum)); --peg-ink:var(--iron-ink);
  --spin-ring:color-mix(in srgb,var(--gold-hi) 85%,transparent); --win-radius:10px;
  --dial-c0:#93C47D; --dial-c1:#E9BE4F; --dial-c2:#C8753E; --dial-c3:#A9C2E0;
  --dial-rim:#2B1A0C; --dial-hub:var(--gold); --dial-chip:var(--vellum-hi); --dial-chip-ink:var(--iron-ink); --dial-pointer:#F2CF73; --dial-on:#FFF4D2;
  --dial-label-bg:var(--vellum-hi); --dial-ink:var(--iron-ink); --dial-mult-bg:var(--woad-ink); --dial-mult-ink:var(--vellum-hi); --dial-glyph:var(--iron-ink);
  --line-case:color-mix(in srgb,var(--iron-ink) 72%,transparent);
  color-scheme:dark;
}
body{background:var(--bg)}
/* the low sun's colour on the stones follows the season of the Season Spins (it eases over with the sky) */
body[data-season="spring"]{--rim:#E4EDB4}body[data-season="summer"]{--rim:#FFD98C}body[data-season="autumn"]{--rim:#F2A46A}body[data-season="winter"]{--rim:#D6E4F6}

/* ---- scene: the dawn sky (four season skies fade over it in the Season Spins), a far ridge in the haze, the stone
   circle (silhouettes, skylight on each stone, the low sun's rim, lichen) or the oak grove, two bands of mist, the near
   bank, one static grain layer and a vignette. Silhouettes are masks from skin.js. ---- */
.scene .sky{transition:opacity 2.4s ease-in-out}
.scene .sky.dawn{background:radial-gradient(30% 22% at 50% 74%,rgba(255,226,176,.5),transparent 72%),radial-gradient(70% 44% at 50% 72%,rgba(255,206,150,.22),transparent 70%),
  radial-gradient(60% 46% at 50% 40%,rgba(255,236,210,.08),transparent 70%),linear-gradient(180deg,var(--sky-dawn-top) 4%,var(--sky-dawn-mid) 46%,var(--sky-dawn-low) 76%)}
.scene .sky.s-spring{opacity:0;background:radial-gradient(40% 30% at 32% 76%,rgba(226,240,176,.36),transparent 70%),linear-gradient(180deg,#1C3028,#3E5A44 46%,#7A9264 80%)}
.scene .sky.s-summer{opacity:0;background:radial-gradient(44% 34% at 58% 72%,rgba(255,224,150,.44),transparent 70%),linear-gradient(180deg,#22304A,#5C5A60 46%,#B48A50 80%)}
.scene .sky.s-autumn{opacity:0;background:radial-gradient(40% 30% at 68% 78%,rgba(244,160,96,.4),transparent 70%),linear-gradient(180deg,#281C22,#5A3430 46%,#9C5630 80%)}
.scene .sky.s-winter{opacity:0;background:radial-gradient(40% 30% at 50% 78%,rgba(224,236,252,.3),transparent 70%),linear-gradient(180deg,#161E2C,#34445C 46%,#7088A4 80%)}
body[data-season="spring"] .scene .sky.s-spring,body[data-season="summer"] .scene .sky.s-summer,
body[data-season="autumn"] .scene .sky.s-autumn,body[data-season="winter"] .scene .sky.s-winter{opacity:1}
.scene .ridge,.scene .stones,.scene .stones-lit,.scene .stones-rim,.scene .lichen,.scene .grove,.scene .grove-lit,.scene .balls,.scene .bank{
  -webkit-mask-position:center bottom;mask-position:center bottom;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .6s}
.scene .ridge{background:var(--ridge);opacity:.55;-webkit-mask-image:var(--ridge-mask);mask-image:var(--ridge-mask)}
.scene .stones{background:var(--stone);-webkit-mask-image:var(--circle-mask);mask-image:var(--circle-mask)}
.scene .stones-lit{background:var(--stone-hi);opacity:.8;-webkit-mask-image:var(--lit-mask);mask-image:var(--lit-mask)}
.scene .stones-rim{background-color:var(--rim);opacity:.5;-webkit-mask-image:var(--rim-mask);mask-image:var(--rim-mask);transition:opacity .6s,background-color 2.4s ease-in-out}
.scene .lichen{background:var(--lichen);opacity:.3;-webkit-mask-image:var(--lichen-mask);mask-image:var(--lichen-mask)}
.scene .grove{background:var(--stone);opacity:0;-webkit-mask-image:var(--grove-mask);mask-image:var(--grove-mask)}
.scene .grove-lit{background:var(--stone-hi);opacity:0;-webkit-mask-image:var(--grove-lit-mask);mask-image:var(--grove-lit-mask)}
.scene .balls{background:var(--leaf);opacity:0;-webkit-mask-image:var(--balls-mask);mask-image:var(--balls-mask)}
.scene .bank{background:var(--bank);-webkit-mask-image:var(--bank-mask);mask-image:var(--bank-mask)}
body.bg-oak-grove .scene .stones,body.bg-oak-grove .scene .stones-lit,body.bg-oak-grove .scene .stones-rim,body.bg-oak-grove .scene .lichen{opacity:0}
body.bg-oak-grove .scene .grove{opacity:.94}
body.bg-oak-grove .scene .grove-lit{opacity:.7}
body.bg-oak-grove .scene .balls{opacity:.9}
.scene .mist{overflow:hidden;pointer-events:none}
.scene .mist i{position:absolute;left:-30%;right:-30%;display:block;height:30%;opacity:.34;
  background:radial-gradient(40% 50% at 30% 50%,var(--mist),transparent 70%),radial-gradient(36% 46% at 72% 52%,var(--mist),transparent 70%);animation:hs-drift 70s linear infinite alternate}
.scene .mist i:first-child{bottom:14%}
.scene .mist i+i{bottom:2%;height:26%;opacity:.26;animation-duration:96s;animation-direction:alternate-reverse}
.scene .grain{background:var(--grain) 0 0/160px 160px;opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.scene .vignette{background:radial-gradient(125% 95% at 50% 42%,transparent 52%,color-mix(in srgb,var(--bg) 62%,#000) 100%)}
@keyframes hs-drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}

/* no screen flash and no shake: the shell's governed flash (big-win tiers) and its shake are switched off here */
.flash{display:none!important}
#game{transform:none!important}

/* the title: the uncial hand in pale heather straight on the dawn sky — no plate; a soft dusk shadow keeps it apart
   from the sky (the shell centres it on the board's axis and balances its tracking) */
.logo h1{font-weight:400;letter-spacing:.03em;color:var(--primary-hi);text-shadow:0 1px 0 rgba(10,8,6,.6),0 0 16px color-mix(in srgb,var(--bg) 80%,transparent)}
.ibtn,.pm,.auto{background:var(--panel);color:var(--primary-hi);border-color:color-mix(in srgb,var(--primary) 42%,transparent)}
/* the bet buttons never shrink under 30 px wide (the long "lines both ways" line wraps in the meter instead) */
.pm{min-width:30px}
.demo,.auto span{background:var(--primary);color:var(--bg)}
.screen{background:var(--bg)}.screen h2{font-weight:400}
.btn{font-weight:400;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.btn.ghost{background:var(--panel);color:var(--primary-hi)}

/* ---- the open codex: a leather cover with one blind-tooled gilt line, two vellum pages (the dial on the left, the
   reels on the right) with a single rubric rule and aged edges, and the spine's shadow. The frame is its own stacking
   context. Lit from the top left: a pale edge on the cover's top and left, a dark one on its bottom and right. ---- */
.frame{isolation:isolate;padding:24px 28px 14px}
.codex{position:absolute;inset:0;z-index:-1;pointer-events:none;--split:calc(28px + var(--dial,240px) + 5px)}
.codex i{position:absolute;display:block}
.codex .cover{inset:-10px -12px -12px;border-radius:16px;background:radial-gradient(130% 160% at 24% 0%,var(--cover-hi),var(--cover) 62%);
  box-shadow:0 26px 54px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35),inset 1px 1px 0 rgba(255,236,204,.16),inset -1px -1px 0 rgba(0,0,0,.5)}
.codex .cover::before{content:"";position:absolute;inset:4px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
.codex .page{top:0;bottom:0;background:radial-gradient(130% 110% at 42% 36%,var(--vellum-hi),var(--vellum) 58%,var(--vellum-lo) 92%,color-mix(in srgb,var(--vellum-lo) 80%,#6E4E24))}
.codex .page::before{content:"";position:absolute;inset:9px;border-radius:4px;border:1px solid color-mix(in srgb,var(--rubric) 34%,transparent)}
.codex .page.left{left:0;width:var(--split);border-radius:10px 3px 3px 10px}
.codex .page.right{left:var(--split);right:0;border-radius:3px 10px 10px 3px}
.codex .spine{top:-4px;bottom:-4px;left:calc(var(--split) - 14px);width:28px;background:linear-gradient(90deg,transparent,rgba(60,36,14,.2) 30%,rgba(60,36,14,.46) 50%,rgba(60,36,14,.2) 70%,transparent)}
/* the reels sit in a thin gilded fillet, sunk into the page: the light from the top left drops a shadow into the top of
   the window (over the symbols as they pass under its lip) and catches its bottom edge */
#board.reels-board .window{box-shadow:0 0 0 1px var(--gold-lo),0 0 0 3px var(--gold),0 0 0 4px var(--gold-lo),0 1px 0 4px rgba(255,248,226,.7)}
#board.reels-board .window::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 14px 14px -10px rgba(58,36,14,.42),inset 10px 0 12px -10px rgba(58,36,14,.22),inset 0 -1px 0 rgba(255,250,236,.85)}
/* when the disc and its label stand taller than the three rows (short screens), the rim hugs the reels, centred
   beside the disc like the pegs, instead of stretching to an empty band under the last row (the paylines drawn over
   the window then sit on the rows) */
#board.dial-board>.window{align-self:center}
.reels-board .reel+.reel{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--iron-ink) 14%,transparent)}
.reels-board .peg{border-color:color-mix(in srgb,var(--iron-ink) 22%,transparent)}
.reels-board .peg.on,.reels-board .peg:focus-visible{color:var(--iron-ink);box-shadow:inset 0 -3px 0 var(--pc),0 0 0 2px var(--vellum-hi),0 0 0 4px var(--pc)}
.dial-board .dial-label{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rubric) 35%,transparent),0 2px 6px rgba(60,36,14,.16)}
.dial-board .dial-season{color:var(--rubric)}
/* the disc: a static contact shadow on the page (it turns by transform; the shadow stays put) */
.dial-board .dial-disc::before{content:"";position:absolute;inset:4% 2% -3% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(58,36,14,.34),rgba(58,36,14,.12) 70%,transparent);z-index:-1}
/* variant "clean": no codex, a thin gilded rim round the reels */
body[data-variant="clean"] .frame{padding:8px 8px 6px}
body[data-variant="clean"] .codex{display:none}

/* the message: a small vellum strip under the reels, in ink with rubric amounts. It stands above the board, so line
   pegs reaching below the reels (or a disc label) never cover any of its words */
.message{position:relative;z-index:1;padding:1px 12px;border-radius:4px;background:var(--vellum-hi);color:var(--iron-ink);font-family:var(--ui);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rubric) 34%,transparent)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--rubric)}

/* symbols on vellum: motion "stone-roll" — a reel lands with a millstone's inertia and a two-step settle (overshoot
   under 6 %, no squash); wins sway gently in a gilded frame (the sweep delay --wd comes from the dial board); the others
   step back like faded ink (opacity, no filter) */
.reels-board .cell.landed .sym{animation:hs-settle .62s cubic-bezier(.2,.62,.28,1)}
.reels-board .cell.win .sym{animation:hs-sway .84s ease-in-out var(--wd,0ms) infinite alternate}
.reels-board .cell.win::after{border:2px solid var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-lo) 70%,transparent),0 0 14px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 0 14px color-mix(in srgb,var(--gold) 30%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.42}
.reels-board .reel.tease{box-shadow:inset 0 0 26px color-mix(in srgb,var(--gold) 70%,transparent)}
@keyframes hs-settle{0%{transform:translateY(-6%)}55%{transform:translateY(2%)}78%{transform:translateY(-.6%)}100%{transform:none}}
@keyframes hs-sway{from{transform:none}to{transform:scale(1.06) rotate(-1deg)}}

/* the Season Spins bar: a vellum strip over the codex */
.fsbar{flex-wrap:wrap;justify-content:center;gap:14px;background:var(--vellum-hi);border-color:color-mix(in srgb,var(--rubric) 60%,transparent);color:var(--iron-ink);font-family:var(--ui)}
.fsbar b{color:var(--rubric)}
.fsbar .fs-season b{font-family:var(--display);font-weight:400}
.fsbar .fs-mult{font-style:normal;font-weight:700;padding:0 7px;border-radius:999px;background:var(--woad-ink);color:var(--vellum-hi)}

/* ---- HUD: illuminated margins on wide screens (balance and win as vellum plates high on the margins, bet and the
   sickle on a weathered stone sill); phones: the shell's thumb-zone HUD on the stone sill ---- */
.hud{font-family:var(--ui)}
.spin{box-shadow:0 0 0 2px var(--gold-lo),inset 0 1px 0 rgba(255,250,232,.7),inset 0 -3px 4px rgba(84,50,10,.45),0 10px 20px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.45)}
.spin svg{width:52%;height:52%}
.spin:disabled{filter:saturate(.45) opacity(.72)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-corners .hud>.bal,.hud-corners .hud>.win,.hud-corners .betctl{background:var(--vellum-hi);border:1px solid color-mix(in srgb,var(--rubric) 42%,transparent);
    box-shadow:inset 0 0 0 3px var(--vellum-hi),inset 0 0 0 4px color-mix(in srgb,var(--rubric) 22%,transparent),0 8px 18px rgba(0,0,0,.4)}
  .hud-corners .meter span,.hud-corners .meter small{color:var(--rubric)}
  .hud-corners .meter b{color:var(--iron-ink)}
  .hud-corners .meter.win b{color:var(--rubric)}
  /* no win yet: quieter ink on the vellum plate (≈ 5:1), the rubric once something is won */
  .hud-corners .meter.win.at-zero b{color:color-mix(in srgb,var(--iron-ink) 70%,var(--vellum-hi))}
  .hud-corners .demo{background:var(--rubric);color:var(--vellum-hi)}
  /* the stone sill under the bet and the sickle: weathered stone lit from above (a pale worn edge, darker below) */
  .hud-corners .hud{position:relative;isolation:isolate}
  .hud-corners .hud::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;
    background:radial-gradient(60% 120% at 30% 0%,color-mix(in srgb,var(--stone-hi) 70%,var(--lichen)),transparent 70%),linear-gradient(180deg,var(--stone-hi),var(--stone) 85%);
    border-top:1px solid color-mix(in srgb,var(--mist) 46%,transparent);box-shadow:0 -10px 24px rgba(0,0,0,.32),inset 0 2px 0 rgba(255,250,236,.06)}
}

/* panels: dark pages with rubric titles */
/* the card's veil: a dusk page with the dawn's warmth behind the title (the same light as the scene), dark at the edges */
.overlay{background:radial-gradient(44% 32% at 50% 36%,color-mix(in srgb,var(--rim) 14%,transparent),transparent 72%),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--bg) 97%,#000) 75%)}
.ovcard h2{font-weight:400;color:var(--primary)}.ovamt{color:var(--ink)}
.overlay .knotring{position:absolute;left:var(--x);top:var(--y);width:calc(120px*var(--s));height:calc(120px*var(--s));margin:calc(-60px*var(--s)) 0 0 calc(-60px*var(--s));opacity:0;pointer-events:none;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 34%,#7A4E14 50%,var(--gold) 60%,var(--gold-lo));-webkit-mask:var(--wheel-mask) center/contain no-repeat;mask:var(--wheel-mask) center/contain no-repeat;
  animation:hs-ring 2.2s var(--d) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hs-ring{0%{opacity:0;transform:scale(.4) rotate(0deg)}22%{opacity:.85}100%{opacity:0;transform:scale(1.4) rotate(90deg)}}
.sheet{background:rgba(6,10,8,.72)}
.panel h2,.panel h3{font-weight:400}
.segs{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.seg-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-sm);background:rgba(0,0,0,.25);border:1px solid var(--line);font-weight:700}
.seg-row svg{width:30px;height:30px;flex:none}.seg-row .sw{fill:var(--sc);stroke:var(--iron-ink);stroke-width:1.2}.seg-row .gl{color:var(--iron-ink)}
.mini{background:rgba(0,0,0,.25)}

/* the season turn into and out of the Season Spins: a dusk veil and a braided knot ring (skin.js) */
.seasonfx{position:fixed;inset:0;z-index:45;pointer-events:none;display:none}
.seasonfx.show{display:block}
.seasonfx i{position:absolute;display:block;opacity:0}
.seasonfx .veil{inset:0;background:radial-gradient(70% 60% at 50% 45%,color-mix(in srgb,var(--panel-hi) 92%,transparent),color-mix(in srgb,var(--bg) 97%,#000))}
.seasonfx .wheel{left:50%;top:46%;width:min(78vmin,640px);height:min(78vmin,640px);margin:calc(min(78vmin,640px)/-2) 0 0 calc(min(78vmin,640px)/-2);
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 34%,#7A4E14 50%,var(--gold) 60%,var(--gold-lo));-webkit-mask:var(--wheel-mask) center/contain no-repeat;mask:var(--wheel-mask) center/contain no-repeat}

/* phones: one vellum page round the dial and the reels (cells ≈ 64 px at 360 px), the HUD on the stone sill with
   balance and win on top, the bet and the sickle in the thumb zone (mirrored for left-handed play). GDD §10 puts balance
   and win on the top margins; the phone HUD is the shell's, so they stay in its bottom HUD (a recorded deviation). */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:10px 8px 8px}
  .codex .page.left{display:none}
  .codex .page.right{left:0;border-radius:10px}
  .codex .page::before{inset:5px}
  .codex .spine{display:none}
  .codex .cover{inset:-5px;border-radius:12px}
  .codex .cover::before{inset:2px;border-radius:10px}
  .hud{background:var(--hud-bg);border-color:color-mix(in srgb,var(--mist) 35%,transparent);box-shadow:inset 0 1px 0 rgba(255,250,236,.07),0 -6px 18px rgba(0,0,0,.3)}
  /* the uncial title is wide: a smaller hand keeps the whole name between the button groups (the shell fits it) */
  .logo h1{font-size:clamp(15px,4.6vw,30px);letter-spacing:.01em}
}
@media (max-width:400px){.betctl{gap:4px}}
@media (prefers-reduced-motion:reduce){.scene .stones-rim{transition:none}}