/* Amberfall Valley skin on the shared game shell: pastel studies on black slate. A prehistoric river valley under a
   volcanic haze — a pale sun low in the haze at the top left is the one key light (symbols, frame, spin button and
   scene are all lit from that side; the far volcano only smoulders) — or a fern forest; an amber sunset with the
   Titan's outline on the ridge in the Titan Spins. A fossil-strata frame (sediment bands that thicken downward, fossils
   pressed in) round recessed slate reel panels, a standing stratum of rock as the side-column HUD, a carved bone on a
   slate disc as the spin button, and dark amber resin pouring into the Titan Spins. Amber is the only material that
   glows. Theme tokens (--chalk, --slate, --fern, the slate and stratum shades) come from skin.js themeMap; bone and
   amber are materials. Every text stands on a dark slate, stratum or resin ground (≥ 4.5:1 in all three presets).
   Motion: transform and opacity only; no filter is animated on a symbol, a block or a layer. */
:root{
  --chalk:#F0957B; --slate:#132327; --fern:#8FC9A8;
  --slate-hi:#202F33; --slate-lo:#0C1618; --slate-deep:#070D0F; --chalk-ink:#F5B9A8; --dust:#F9D5CA;
  --st1:#41423C; --st2:#343434; --st3:#0D191B; --st4:#2C4441; --st5:#37413E;
  --bone:#F3EEE2; --amber:#FFB547; --amber-dk:#C8620E; --resin:#7A3D0A;
  --ink:var(--bone); --muted:#CFC8BA;
  /* the title: the theme's chalk softened towards bone, as pastel reads on slate */
  --title:color-mix(in srgb,var(--chalk) 58%,var(--bone));
  --display:"Londrina Sketch","Chalkboard SE","Comic Sans MS",system-ui,sans-serif; --ui:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --line:color-mix(in srgb,var(--bone) 22%,transparent); --radius:12px; --radius-sm:8px;
  --panel-bg:linear-gradient(180deg,var(--slate-hi),var(--slate-lo)); --panel-border:color-mix(in srgb,var(--bone) 26%,transparent);
  --hud-bg:linear-gradient(180deg,var(--slate-hi),var(--slate-lo));
  --ibtn-bg:var(--slate-lo); --ibtn-ink:var(--bone);
  --btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--chalk) 70%,#fff),var(--chalk) 60%,color-mix(in srgb,var(--chalk) 85%,#000)); --btn-ink:#10191B;
  /* recessed slate panels: a cold slab, lighter where the light from the top left reaches it, faint cleavage lines */
  --window-bg:radial-gradient(110% 70% at 26% 8%,color-mix(in srgb,var(--bone) 5%,transparent),transparent 70%),
    repeating-linear-gradient(172deg,rgba(255,255,255,.014) 0 2px,transparent 2px 11px),
    linear-gradient(180deg,var(--slate-hi),color-mix(in srgb,var(--slate) 72%,#000) 58%,var(--slate-lo));
  --window-radius:6px; --reel-sep:rgba(0,0,0,.34); --spin-blur:1.2px;
  --win-glow:color-mix(in srgb,var(--amber) 70%,transparent); --focus:var(--bone); --win-radius:8px;
  /* the block span (giant.css): a darker recessed slab, lit from the top left, with a fine bone edge */
  --giant-bg:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--slate-hi) 92%,var(--bone)),var(--slate-lo) 76%);
  --giant-edge:color-mix(in srgb,var(--bone) 38%,transparent); --giant-trail:color-mix(in srgb,var(--dust) 26%,transparent); --giant-dust:color-mix(in srgb,var(--dust) 32%,transparent); --giant-radius:8px;
  /* shell looks (game-shell.md): the amber busy ring, the amber light behind a win card's title, a slate plate */
  --spin-ring:color-mix(in srgb,var(--amber) 85%,transparent);
  --veil-light:color-mix(in srgb,var(--amber) 18%,transparent);
  --ov-plate:color-mix(in srgb,var(--slate-lo) 90%,transparent); --ov-plate-line:color-mix(in srgb,var(--amber) 38%,transparent);
  /* one static grain layer for the whole scene (never on cells) */
  --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);font-family:var(--ui)}
/* ---- scene: the valley (default), the fern forest, the amber sunset (the Titan Spins, or chosen as the background) ----
   layers far → near: hazy sky with the pale sun (top left), the smouldering volcano and far ridge (lighter, low
   contrast), the near hills, the river, the darkest fern fronds at the bottom edge; a warm glow sits behind the board */
.scene .valley{background:radial-gradient(46% 34% at 21% 21%,color-mix(in srgb,#FFE6B0 13%,transparent),transparent 72%),
  radial-gradient(52% 44% at 56% 50%,color-mix(in srgb,var(--amber-dk) 9%,transparent),transparent 74%),
  linear-gradient(180deg,var(--slate-deep) 0%,color-mix(in srgb,var(--slate) 78%,var(--amber-dk) 10%) 46%,color-mix(in srgb,var(--slate) 82%,var(--amber-dk) 14%) 60%,var(--slate) 72%,var(--slate-lo) 100%)}
.scene .valley i,.scene .forest i,.scene .sunset i{position:absolute;inset:0;display:block}
.valley .haze{background:radial-gradient(4.6vmin 4.6vmin at 21% 21%,rgba(255,244,222,.5),rgba(255,232,196,.16) 62%,transparent),
  radial-gradient(14vmin 14vmin at 21% 21%,rgba(255,226,180,.12),transparent 70%),
  radial-gradient(42% 10% at 30% 38%,color-mix(in srgb,var(--bone) 6%,transparent),transparent),radial-gradient(50% 9% at 78% 30%,color-mix(in srgb,var(--bone) 5%,transparent),transparent);
  animation:av-drift 60s ease-in-out infinite alternate}
.valley .plume{background:var(--av-plume) center bottom/cover no-repeat;transform-origin:72% 48%;animation:av-plume 28s ease-in-out infinite alternate}
.valley .far{background:linear-gradient(180deg,color-mix(in srgb,var(--slate) 60%,var(--dust) 12%) 44%,color-mix(in srgb,var(--slate) 84%,var(--chalk) 5%) 72%);-webkit-mask:var(--av-far) center bottom/cover no-repeat;mask:var(--av-far) center bottom/cover no-repeat}
.valley .far-edge{opacity:.2;background:var(--bone);-webkit-mask:var(--av-far-edge) center bottom/cover no-repeat;mask:var(--av-far-edge) center bottom/cover no-repeat}
.valley .near{background:linear-gradient(180deg,color-mix(in srgb,var(--slate-lo) 82%,var(--fern) 8%) 70%,var(--slate-deep) 96%);-webkit-mask:var(--av-near) center bottom/cover no-repeat;mask:var(--av-near) center bottom/cover no-repeat}
.valley .near-edge{opacity:.16;background:var(--fern);-webkit-mask:var(--av-near-edge) center bottom/cover no-repeat;mask:var(--av-near-edge) center bottom/cover no-repeat}
.valley .river{opacity:.3;background:linear-gradient(90deg,color-mix(in srgb,#C9DDE8 60%,var(--slate)) 10%,color-mix(in srgb,#A9C3D2 26%,var(--slate)) 70%);-webkit-mask:var(--av-river) center bottom/cover no-repeat;mask:var(--av-river) center bottom/cover no-repeat}
.valley .ferns-fg{background:color-mix(in srgb,var(--fern) 12%,var(--slate-deep));-webkit-mask:var(--av-ferns-fg) center bottom/cover no-repeat;mask:var(--av-ferns-fg) center bottom/cover no-repeat}
@keyframes av-drift{from{transform:translateX(-1.2%)}to{transform:translateX(1.2%)}}
@keyframes av-plume{from{transform:translateY(0);opacity:.85}to{transform:translateY(-1.4%);opacity:1}}
.scene .forest,.scene .sunset{opacity:0;transition:opacity .8s var(--ease-std,ease)}
.scene .forest{background:radial-gradient(46% 34% at 21% 18%,color-mix(in srgb,#FFE6B0 10%,transparent),transparent 72%),radial-gradient(60% 50% at 50% 30%,color-mix(in srgb,var(--fern) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--slate-deep),color-mix(in srgb,var(--slate) 70%,var(--fern) 10%) 60%,var(--slate-lo))}
.forest .canopy{background:repeating-linear-gradient(100deg,transparent 0 6vw,color-mix(in srgb,var(--slate-deep) 55%,transparent) 6vw 7.2vw,transparent 7.2vw 13vw);opacity:.5}
.forest .fronds{opacity:.85;background:linear-gradient(180deg,color-mix(in srgb,var(--fern) 26%,var(--slate-deep)) 40%,var(--slate-deep));-webkit-mask:var(--av-ferns) center bottom/cover no-repeat;mask:var(--av-ferns) center bottom/cover no-repeat}
body.bg-fern-forest .scene .forest{opacity:1}
body.bg-fern-forest .scene .valley{opacity:0}
.scene .sunset{background:radial-gradient(60% 40% at 50% 58%,color-mix(in srgb,var(--amber) 16%,transparent),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--slate-deep) 70%,var(--resin)) 0%,color-mix(in srgb,var(--amber-dk) 42%,var(--slate)) 48%,color-mix(in srgb,var(--amber) 36%,var(--slate)) 62%,var(--slate-lo) 80%)}
/* the sun sets behind the Titan, who stands on the flat end of the ridge beside the reels (never behind the board):
   phones and narrow screens in the gap above the reels; wide screens in the gap right of the board (left with the
   left-handed layout, where the side column moves right). --av-plateau: the ridge's flat end from the top; --av-rh: the
   ridge band; --av-tw: the Titan's width; --av-tx: its distance from the screen edge; --av-sun: the sun's size */
.scene .sunset{--av-plateau:clamp(100px,17.6vh,150px);--av-rh:52px;--av-tw:clamp(46px,15vw,84px);--av-tx:max(5px,1.4vw);--av-sun:calc(var(--av-tw)*1.25);
  --av-rock:color-mix(in srgb,var(--slate-deep) 85%,var(--resin))}
.scene .sunset .sun{inset:auto;right:calc(var(--av-tx) + var(--av-tw)/2 - var(--av-sun)/2);top:calc(var(--av-plateau) - var(--av-sun)*.66);width:var(--av-sun);height:var(--av-sun);border-radius:50%;opacity:.9;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--amber) 80%,#FFE6B0),color-mix(in srgb,var(--amber-dk) 70%,transparent) 64%,transparent 72%)}
.scene .sunset .ridge{inset:auto;left:0;right:0;bottom:0;top:calc(var(--av-plateau) - var(--av-rh)*.2);background:linear-gradient(180deg,color-mix(in srgb,var(--av-rock) 80%,var(--amber-dk)),var(--av-rock) 30%);
  -webkit-mask:var(--av-ridge) left top/100% var(--av-rh) no-repeat,linear-gradient(#000 0 0) left var(--av-rh)/100% 100% no-repeat;mask:var(--av-ridge) left top/100% var(--av-rh) no-repeat,linear-gradient(#000 0 0) left var(--av-rh)/100% 100% no-repeat}
.scene .sunset .titan{inset:auto;right:var(--av-tx);top:calc(var(--av-plateau) - var(--av-tw)*.468 + 1px);width:var(--av-tw);height:calc(var(--av-tw)*.468);background:var(--av-rock);
  -webkit-mask:var(--av-titan) center bottom/contain no-repeat;mask:var(--av-titan) center bottom/contain no-repeat}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .scene .sunset{--av-plateau:63vh;--av-rh:24vh;--av-tw:min(9.2vw,16vh);--av-tx:max(6px,.5vw);--av-sun:min(12vw,20vh)}
  body.lefty .scene .sunset .ridge,body.lefty .scene .sunset .titan{transform:scaleX(-1)}
  body.lefty .scene .sunset .titan{right:auto;left:var(--av-tx)}
  body.lefty .scene .sunset .sun{right:auto;left:calc(var(--av-tx) + var(--av-tw)/2 - var(--av-sun)/2)}
}
body.bg-amber-sunset .scene .sunset,body.fs .scene .sunset{opacity:1}
body.bg-amber-sunset .scene .valley,body.bg-amber-sunset .scene .forest{opacity:0}
.scene .valley{transition:opacity .8s var(--ease-std,ease)}
/* the vignette (35–55 % in the corners) and one static grain layer over the whole scene */
.scene .grain{background:radial-gradient(125% 95% at 50% 46%,transparent 46%,rgba(0,0,0,.5))}
.scene .grain::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0/160px 160px;opacity:.07;mix-blend-mode:overlay}
/* ---- title, buttons, tags, status screens; the shell's governed flash (big win only): a faint warm tint ---- */
/* the sketch face draws hairline outlines: a chalk stroke of .04 em thickens every line so the title reads at ≥ 3:1 on
   the slate even after down-scaling; a dark drop keeps it off the haze and a faint amber dust sits behind it */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.03em;color:var(--title);-webkit-text-stroke:.04em var(--title);
  text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 22px color-mix(in srgb,var(--amber) 18%,transparent)}
.ibtn{border-color:color-mix(in srgb,var(--bone) 30%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--slate-hi) 90%,var(--bone)),var(--slate-lo))}
.ibtn:hover{border-color:var(--bone)}
.demo,.auto span{background:var(--amber);color:#1A1206}
.screen{background:var(--slate)}.screen h2{font-family:var(--display);font-weight:400;color:var(--title);-webkit-text-stroke:.04em var(--title)}
.toast{background:var(--slate-hi);border-color:var(--line)}
.spinner{border-color:color-mix(in srgb,var(--bone) 20%,transparent);border-top-color:var(--amber)}
.flash{background:radial-gradient(circle at 50% 45%,rgba(255,230,190,.14),rgba(255,230,190,.04) 45%,transparent 75%)}
.btn{font-family:var(--ui);font-weight:600;box-shadow:0 0 0 1.5px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.45)}
.ovamt{font-family:var(--ui);font-weight:600}
/* ---- the fossil-strata frame: sediment bands (thicker downward) round the reels, a bevel lit from the top left,
   fossils pressed into the bands (engraved: a dark groove with a light lower lip) ---- */
.frame{isolation:isolate;padding:min(calc(var(--cell)*.12),14px) min(calc(var(--cell)*.16),18px) min(calc(var(--cell)*.12),14px)}
.strata{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:10px 10px 7px 7px;
  background:linear-gradient(135deg,color-mix(in srgb,#FFE6B0 9%,transparent),transparent 38%,rgba(0,0,0,.24)),var(--strata,var(--st1));
  box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--bone) 24%,transparent),inset -1px -1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.35),0 22px 48px rgba(0,0,0,.6)}
.strata::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grain) 0 0/120px 120px;mix-blend-mode:overlay;opacity:.3}
.strata .fossil{position:absolute;display:block;width:min(calc(var(--cell)*.14),16px);height:min(calc(var(--cell)*.14),16px);color:rgba(0,0,0,.5);filter:drop-shadow(.6px .8px 0 color-mix(in srgb,var(--bone) 22%,transparent))}
.strata .fossil svg{display:block;width:100%;height:100%}
.strata .fossil.l{left:max(1px,calc(min(calc(var(--cell)*.16),18px)/2 - min(calc(var(--cell)*.14),16px)/2));top:var(--at)}
.strata .fossil.r{right:max(1px,calc(min(calc(var(--cell)*.16),18px)/2 - min(calc(var(--cell)*.14),16px)/2));top:var(--at)}
.strata .fossil.b{left:var(--at);bottom:2px}
/* the giant board has no line markers (pegs:false): one track and no gap, so the reels sit on the frame's (and the
   title's) centre axis with no dead strip on the right */
#board.reels-board{grid-template-columns:auto;gap:0;padding:2px;border-radius:7px;background:var(--slate-deep);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 -1px 0 1px rgba(0,0,0,.35),0 1px 0 1px color-mix(in srgb,var(--bone) 16%,transparent)}
/* variant "clean": a thin slate rim, no bands or fossils */
body[data-variant="clean"] .strata{background:linear-gradient(180deg,var(--slate-hi),var(--slate-lo));border-radius:8px}
body[data-variant="clean"] .strata::after,body[data-variant="clean"] .strata .fossil{display:none}
body[data-variant="clean"] .frame{padding:8px 8px 6px}
/* ---- the slate reel panels: recessed (the light from above throws a shadow into the niche, a light lip below), each
   reel a slab with a lit left edge and a dark right edge ---- */
.reels-board .window{box-shadow:inset 0 16px 18px -8px rgba(0,0,0,.6),inset 0 -1px 0 color-mix(in srgb,var(--bone) 14%,transparent),inset 0 0 0 1px rgba(0,0,0,.45)}
.reels-board .reel{background:linear-gradient(90deg,color-mix(in srgb,var(--bone) 3.5%,transparent),transparent 10%,transparent 88%,rgba(0,0,0,.16))}
.reels-board .reel.tease{box-shadow:none}
.reels-board .reel.tease::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 26px color-mix(in srgb,var(--amber) 55%,transparent);animation:av-tease 1.1s ease-in-out infinite}
@keyframes av-tease{0%,100%{opacity:.55}50%{opacity:1}}
/* every landed cell settles on a heavy two-step: down past its place by 3 %, back, and still (no squash) */
.reels-board .cell.landed .sym{animation:av-land .42s cubic-bezier(.2,.62,.3,1)}
@keyframes av-land{0%{transform:translateY(-5%)}45%{transform:translateY(3%)}75%{transform:translateY(-.8%)}100%{transform:none}}
/* a win: the symbol breathes (the shell's scale 1 → 1.06), lit by a fine amber frame; the rest step back by opacity */
.reels-board .cell.win .sym{filter:none}
.reels-board .cell.win::after{inset:5%;border-radius:var(--win-radius);border:1.5px solid color-mix(in srgb,var(--amber) 92%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--amber) 38%,transparent),inset 0 0 16px color-mix(in srgb,var(--amber) 20%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.42}
/* the giant span: strides in and lands on transform and opacity only (no blur), lights as one, dims by opacity */
.giant-board .giant{transition:box-shadow .2s}
.giant-board .giant.stride{animation-name:av-stride}
@keyframes av-stride{from{transform:translateY(calc(var(--cell)*-1.1));opacity:0}45%{opacity:1}to{transform:none;opacity:1}}
.giant-board .giant.landed{animation-name:av-thud}
@keyframes av-thud{from{transform:translateY(1.5%) scale(1.014)}to{transform:none}}
.giant-board .giant.win{box-shadow:inset 0 0 0 1.5px var(--amber),0 0 20px color-mix(in srgb,var(--amber) 40%,transparent)}
.giant-board .giant.win .sym{filter:none}
.giant-board .giant.dim .sym{filter:none;opacity:.42}
.giant-board .giant.titan{background:radial-gradient(120% 110% at 50% 40%,color-mix(in srgb,var(--slate-lo) 70%,var(--resin)),var(--slate-deep) 78%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--amber) 70%,transparent),inset 0 0 0 5px var(--slate-deep),inset 0 0 0 6px color-mix(in srgb,var(--amber) 30%,transparent),0 6px 18px rgba(0,0,0,.45)}
/* ---- the message under the board: plain text on the lowest stratum, the amount in amber ---- */
.message{padding:2px 14px;border-radius:4px;font-weight:600;background:color-mix(in srgb,var(--slate-lo) 92%,transparent)}
.message:empty{background:none}
.message b{color:var(--amber)}
/* ---- the Titan Spins bar: the spin in play, the Titan's size (a 4×4 grid glyph), the total won ---- */
.fsbar{background:color-mix(in srgb,var(--slate-lo) 94%,transparent);border-color:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--ink);font-weight:600}
.fsbar b{color:var(--amber)}
.fsbar .fs-titan{display:inline-flex;align-items:center;gap:7px}
.fsbar .fs-titan.grew .tglyph{animation:av-grew .9s var(--ease-std,ease-in-out)}
@keyframes av-grew{0%,100%{transform:none}50%{transform:scale(1.25)}}
.tglyph{display:inline-grid;grid-template-columns:repeat(var(--m,4),5px);gap:1.5px;padding:2px;border-radius:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--bone) 35%,transparent)}
.tglyph i{display:block;width:5px;height:5px;border-radius:1px;background:color-mix(in srgb,var(--bone) 16%,transparent)}
.tglyph i.on{background:var(--amber)}
.fs-titan.full .tglyph{box-shadow:0 0 0 1px var(--amber),0 0 8px color-mix(in srgb,var(--amber) 50%,transparent)}
/* ---- the HUD: slate with a fine rule; labels in sentence case; on wide screens the side column is a standing stratum ---- */
.hud{position:relative;border-color:color-mix(in srgb,var(--bone) 22%,transparent)}
.meter b{color:var(--ink)}.meter.win b{color:var(--amber)}
.pm,.auto{border-color:color-mix(in srgb,var(--bone) 30%,transparent)}
.auto[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--amber) 60%,transparent)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-side-column .hud{border:0;border-radius:22px 22px 8px 8px;
    background:linear-gradient(135deg,color-mix(in srgb,#FFE6B0 7%,transparent),transparent 45%,rgba(0,0,0,.2)),
      linear-gradient(180deg,var(--st1) 0 8%,color-mix(in srgb,var(--st1) 80%,#000) 8%,var(--st2) 8.5% 17%,var(--st4) 17% 29%,color-mix(in srgb,var(--st4) 80%,#000) 29%,var(--st3) 29.5% 43%,var(--st5) 43% 59%,var(--st2) 59% 78%,var(--st3) 78% 100%);
    box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--bone) 22%,transparent),inset -1px -1px 0 rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.35),0 22px 44px rgba(0,0,0,.55)}
  .hud-side-column .hud .meter{padding:6px 8px;border-radius:6px;background:color-mix(in srgb,var(--slate-lo) 84%,transparent);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 1px 0 color-mix(in srgb,var(--bone) 10%,transparent)}
}
/* ---- the bone spin button: a carved bone on a bevelled slate disc with an amber inlay ring; it rolls half a turn on
   every spin (transform only; the disc's shadow is a box-shadow, not a filter) ---- */
.spin{color:var(--bone);background:none;box-shadow:0 10px 20px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.45)}
.spin svg{width:100%;height:100%}
.spin .disc{fill:var(--slate-lo)}
.spin .sheen{fill:url(#av-sh)}
.spin .ring{fill:none;stroke:url(#av-rg);stroke-width:1.8}
.spin .bone .b{fill:url(#av-bn)}
.spin .bone .shade{fill:#000;opacity:.45}
.spin .bone .lit{stroke:#fff;stroke-opacity:.7;stroke-width:.9;stroke-linecap:round}
.spin .bone .crack{fill:none;stroke:#6E5A3E;stroke-width:.8;stroke-linecap:round}
.spin .bone{transform-origin:24px 24px}
.spin.kick .bone{animation:av-roll .6s cubic-bezier(.2,.62,.3,1)}
@keyframes av-roll{from{transform:rotate(0)}to{transform:rotate(180deg)}}
/* ---- overlays and panels: slate cards with a fine amber edge ---- */
.overlay{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--slate) 60%,transparent),color-mix(in srgb,var(--slate-deep) 94%,#000) 75%)}
.ovcard{position:relative;padding:26px clamp(20px,4vw,52px) 28px;border-radius:12px;background:linear-gradient(180deg,var(--slate-hi),var(--slate-lo));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bone) 16%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--amber) 34%,transparent),0 24px 60px rgba(0,0,0,.6)}
.ovcard h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;color:var(--title);-webkit-text-stroke:.035em var(--title)}
.ovamt{color:var(--amber)}.ovcard p{color:var(--muted)}
.panel{box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--bone) 18%,transparent)}
.panel h2{font-family:var(--display);font-weight:400;color:var(--title);-webkit-text-stroke:.03em var(--title)}.panel h3{font-family:var(--ui);font-weight:600;color:var(--fern)}
.tablet .th{font-family:var(--ui);font-weight:600;color:var(--chalk)}
.ptc,.mini,.chips button,.tog{background:color-mix(in srgb,#000 24%,var(--slate))}
.tog[aria-checked="true"]{background:color-mix(in srgb,var(--fern) 32%,var(--slate))}.tog[aria-checked="true"]::after{background:var(--fern)}
.chips button[aria-pressed="true"]{background:var(--chalk);color:#10191B;border-color:var(--chalk)}
table.hist .won{color:var(--amber)}
.ptc .symbox,.special .symbox{border-radius:6px;background:var(--window-bg)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.special .sym img{position:absolute;inset:0;width:100%;height:100%}
.ptc.giant{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chalk) 36%,transparent)}
.gtag{display:inline-block;margin-left:4px;padding:0 6px;border-radius:3px;font-size:12px;font-weight:600;vertical-align:2px;color:#10191B;background:var(--chalk)}
.ladder{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0;list-style:none}
.ladder li{padding:3px 10px;border:1px solid color-mix(in srgb,var(--amber) 60%,transparent);border-radius:4px;font-weight:600;color:var(--amber)}
.ladder li+li::before{content:"→";margin:0 8px 0 -4px;color:var(--muted)}
.lines-grid.areas{grid-template-columns:repeat(auto-fill,minmax(96px,120px));margin:6px 0 10px}
.mini{color:var(--muted)}
/* ---- into the Titan Spins: dark amber resin pours down, sets, cracks and breaks away (driven by skin.js) ---- */
.resin{position:fixed;inset:0;z-index:20;display:none;pointer-events:none;overflow:hidden}
.resin.show{display:block}
.resin .sheet{position:absolute;left:0;right:0;top:0;height:108%;transform:translateY(-104%);display:block;
  background:radial-gradient(60% 40% at 26% 24%,rgba(255,214,140,.18),transparent 70%),linear-gradient(180deg,#3A1C05 0%,#6A350A 40%,#8A4A10 72%,#5A2C07 100%);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 7%) no-repeat,var(--av-drips) left bottom/min(60%,620px) 7.5% repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 7%) no-repeat,var(--av-drips) left bottom/min(60%,620px) 7.5% repeat-x}
.resin .gloss{position:absolute;inset:0;display:block;opacity:0;background:linear-gradient(105deg,transparent 30%,rgba(255,230,180,.22) 48%,transparent 66%)}
.resin .cracks{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.resin .cracks path{fill:none;stroke:#1E0E03;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* ---- big wins: fern leaves drift down and amber drops fall (skin.js) ---- */
.fern-fall,.resin-drop{position:fixed;left:var(--x);top:-60px;z-index:35;pointer-events:none}
.fern-fall{width:calc(54px*var(--s));height:calc(54px*var(--s));background:linear-gradient(135deg,color-mix(in srgb,var(--fern) 70%,#fff),color-mix(in srgb,var(--fern) 70%,#000));-webkit-mask:var(--av-leaf) center/contain no-repeat;mask:var(--av-leaf) center/contain no-repeat;animation:av-leaf 3s cubic-bezier(.3,.1,.5,1) var(--d) both}
.resin-drop{width:calc(12px*var(--s));height:calc(17px*var(--s));border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 36% 30%,#FFF1C2,var(--amber) 40%,var(--amber-dk) 80%,#7A3408);animation:av-drop 2.2s cubic-bezier(.5,0,.9,.6) var(--d) both}
@keyframes av-leaf{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),110vh) rotate(var(--r))}}
@keyframes av-drop{0%{opacity:0;transform:translateY(0)}10%{opacity:1}100%{opacity:.2;transform:translateY(105vh)}}
/* ---- phones: the HUD under the reels (the shell's thumb zone), a slimmer frame ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .logo h1{line-height:1;font-size:clamp(22px,7vw,40px)}
  .hud{border-radius:12px 12px 8px 8px;background:linear-gradient(180deg,var(--st1),var(--slate-lo) 60%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bone) 14%,transparent),0 -8px 24px rgba(0,0,0,.35)}
  .frame{padding:8px 8px 6px}
  .strata .fossil{display:none}
}
@media (max-width:400px){
  .fsbar{flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:4px 10px;font-size:13px}
  .message{font-size:13px}
}
/* reduced motion: still haze and plume, no tease pulse, settle, roll or falling leaves; the block only fades in; layers
   only cross-fade */
body.still .valley .haze,body.still .valley .plume,body.still .reels-board .reel.tease::after,body.still .reels-board .cell.landed .sym,body.still .spin.kick .bone,body.still .fsbar .fs-titan.grew .tglyph,body.still .giant-board .giant.landed{animation:none}
body.still .giant-board .giant.stride{animation-name:gb-fade}
@media (prefers-reduced-motion:reduce){
  .valley .haze,.valley .plume,.reels-board .reel.tease::after,.reels-board .cell.landed .sym,.spin.kick .bone,.fsbar .fs-titan.grew .tglyph,.giant-board .giant.landed{animation:none!important}
  .giant-board .giant.stride{animation-name:gb-fade}
  .fern-fall,.resin-drop{display:none}
  .scene .forest,.scene .sunset,.scene .valley{transition-duration:.1s}
}