/* Crystal Collect skin on the shared game shell: a crystal cavern in refractive faceted glow on dark rock. One key light
   for the whole game — cold light through a fissure at the top left — on the symbols (art.js), the spin prism, the
   crystals of the hall, the frame's bevel and the lining of the geode; the cave's glowstone (teal) is the rim light.
   A geode hall in four layers (a hazy far wall, the rock, the wall crystals in lit and shaded faces, a dark foreground)
   or an underground lake; a geode split in half round the reels (crust, agate bands, crystal teeth), a recessed reel
   window of cave rock, a hexagonal prism as the spin button, the HUD as a U of rock round the play area, the heart of a
   geode behind the Echo Respins. Theme tokens (--cave, --plate, --glow, --panel, --ink, --muted, --primary, the scene
   and frame colours, the prism facets) come from skin.js themeMap; the defaults below are Amethyst Hollow. Text sits on
   panels whose contrast skin.js works out (≥ 4.5:1), or on the dark rock plates (message, feature bar, line markers).
   Animations move transform / opacity / clip-path only; no filter on a cell that animates; the hall's light breathes
   slowly (11 s) and dimly. */
:root{
  --cave:#180818; --cave-hi:#1F1520; --plate:#120612; --glow:#32F0C4; --spire-glow:#32F0C4; --win-glow:#32F0C4;
  --panel:#1F0B1E; --panel-hi:#341A33; --ink:#F7EEF6; --muted:#D6BCD2; --primary-hi:#F1BFE9;
  --plate-ink:#F7F0FA; --plate-hi:#EDAFE4; --plate-glow:#32F0C4;
  --btn-face:#EDAFE4; --btn-hi:#F2C5EB; --btn-lo:#B9899F; --btn-ink:#1B0D1F;
  --hex-a:#98F7E1; --hex-b:#2EDDB4; --hex-c:#1F9579; --hex-d:#156552; --hex-t:#C2F9EC; --hex-rim:#110511; --hex-glyph:#1A0B1E;
  --druse:#F2C7EC; --druse-lo:#9A6C93; --agate-1:#5B3A59; --agate-2:#1E4A44; --agate-3:#9A7096; --agate-4:#A88DA5;
  --crust:#3B2B37; --crust-hi:#5F4F58; --rock:#120612; --rock-hi:#40213E; --cluster:#ACC6D9; --cluster-lo:#515162;
  --far:#4F2E4D; --near:#0B040B; --shaft:#FAE7F7;
  --scene-top:#1C0A1B; --scene-low:#3E1F3C; --water:#215F5A; --water-lo:#140713; --ring-a:#47243F; --ring-b:#2B3238;
  --echo-fill:color-mix(in srgb,var(--glow) 22%,transparent);
  --display:"Philosopher",Georgia,serif; --ui:"Albert Sans",system-ui,sans-serif;
  --radius:14px; --radius-sm:9px; --line:color-mix(in srgb,var(--primary) 30%,transparent);
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --panel-border:color-mix(in srgb,var(--primary) 36%,transparent);
  --hud-bg:linear-gradient(180deg,var(--panel-hi),var(--panel));
  --ibtn-bg:var(--panel-hi); --ibtn-ink:var(--primary);
  --btn-bg:linear-gradient(180deg,var(--btn-hi),var(--btn-face) 58%,var(--btn-lo));
  /* the reel window: cave rock — two soft patches of glowstone low in the hollow, darker towards the top (the lip's
     shadow); no repeating texture behind the symbols */
  --window-bg:radial-gradient(circle at 12% 88%,color-mix(in srgb,var(--glow) 11%,transparent),transparent 24%),
    radial-gradient(circle at 88% 80%,color-mix(in srgb,var(--glow) 9%,transparent),transparent 22%),
    radial-gradient(60% 40% at 30% 30%,color-mix(in srgb,var(--primary) 5%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--cave) 80%,#000),var(--cave-hi) 40%,var(--cave));
  --window-radius:12px; --reel-sep:color-mix(in srgb,var(--druse) 9%,transparent); --focus:var(--primary); --spin-blur:1.2px;
  --win-radius:14px; --spin-ring:transparent; --veil-light:color-mix(in srgb,var(--glow) 16%,transparent);
  /* line markers: small polished stone plates set into the crust, the number light on dark rock (≥ 4.5:1, skin.js) */
  --peg-bg:var(--plate); --peg-ink:var(--plate-ink);
  /* the vault of the Echo Respins (shared spire board) */
  --vault-bg:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cave) 90%,transparent),color-mix(in srgb,var(--cave) 97%,#000) 80%);
  --vault-cell:color-mix(in srgb,var(--glow) 12%,transparent);
  --val-bg:#F8F2FF; --val-ink:#1B0D1F; --val-rim:rgba(27,13,31,.6); --val-rim-heart:#E8C25A;
  --spire-badge-bg:#FFE9A8; --spire-badge-ink:#1B0D1F;
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene: the geode hall (default), the underground lake, the heart of a geode in the respins ---- */
/* the cave itself: brighter behind the board (the glow the board stands in), darker towards the edges */
.scene .cave{background:radial-gradient(55% 50% at 50% 46%,color-mix(in srgb,var(--glow) 8%,var(--scene-low)),transparent 72%),radial-gradient(120% 90% at 50% 38%,var(--scene-low),var(--scene-top) 70%)}
.scene .far,.scene .hall,.scene .hall-glow,.scene .hall-shade,.scene .near,.scene .arch{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .8s var(--ease-std,ease)}
/* far: the wall beyond, lighter and flatter in the haze */
.scene .far{background:linear-gradient(180deg,var(--far),color-mix(in srgb,var(--far) 60%,var(--scene-top)));-webkit-mask-image:var(--hall-far);mask-image:var(--hall-far);opacity:.5}
/* the fissure light: one soft shaft from the top left (the key light of every symbol) */
.scene .shaft{inset:auto;left:-8%;top:-34%;width:44vmax;height:160vmax;transform-origin:50% 0;transform:rotate(-34deg);pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--shaft) 17%,transparent),color-mix(in srgb,var(--shaft) 6%,transparent) 45%,transparent 78%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000 62%,transparent);mask-image:linear-gradient(90deg,transparent,#000 32%,#000 62%,transparent)}
/* middle ground: the hall's rock, lit along its upper-left edges */
.scene .hall{background:linear-gradient(150deg,var(--rock-hi),var(--rock) 42%,color-mix(in srgb,var(--rock) 70%,#000));-webkit-mask-image:var(--hall-rock);mask-image:var(--hall-rock);opacity:.96}
/* the wall crystals: faces turned away (dim, cool) under faces taking the light (bright, breathing slowly) */
.scene .hall-shade{background:linear-gradient(170deg,var(--cluster-lo),color-mix(in srgb,var(--cluster-lo) 55%,#000));-webkit-mask-image:var(--hall-shade);mask-image:var(--hall-shade);opacity:.72}
.scene .hall-glow{background:linear-gradient(160deg,color-mix(in srgb,var(--cluster) 80%,#fff),color-mix(in srgb,var(--glow) 40%,var(--cluster)) 60%,color-mix(in srgb,var(--cluster) 60%,var(--cave)));-webkit-mask-image:var(--hall-glow);mask-image:var(--hall-glow);opacity:.4;animation:cc-breathe 11s ease-in-out infinite alternate}
/* foreground: the darkest rock, half out of the picture */
.scene .near{background:var(--near);-webkit-mask-image:var(--hall-near);mask-image:var(--hall-near)}
.scene .vig{pointer-events:none;background:radial-gradient(125% 100% at 50% 44%,transparent 52%,color-mix(in srgb,var(--near) 62%,transparent))}
.scene .vig::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0/160px;opacity:.05}
/* phones and other tall screens: the portrait composition of the same hall (skin.js) */
@media (max-aspect-ratio:4/5){
  .scene .far{-webkit-mask-image:var(--hall-far-p);mask-image:var(--hall-far-p)}
  .scene .hall{-webkit-mask-image:var(--hall-rock-p);mask-image:var(--hall-rock-p)}
  .scene .hall-shade{-webkit-mask-image:var(--hall-shade-p);mask-image:var(--hall-shade-p)}
  .scene .hall-glow{-webkit-mask-image:var(--hall-glow-p);mask-image:var(--hall-glow-p)}
  .scene .near{-webkit-mask-image:var(--hall-near-p);mask-image:var(--hall-near-p)}
  .scene .arch{-webkit-mask-image:var(--lake-arch-p);mask-image:var(--lake-arch-p)}
}
.scene .lake,.scene .arch,.scene .heart{opacity:0;transition:opacity .8s var(--ease-std,ease)}
.scene .lake .water{position:absolute;left:0;right:0;bottom:0;height:34%;display:block;
  background:repeating-linear-gradient(180deg,transparent 0 14px,color-mix(in srgb,var(--glow) 6%,transparent) 14px 15px),linear-gradient(180deg,var(--water),var(--water-lo))}
.scene .lake .water::before{content:"";position:absolute;left:28%;right:28%;top:0;height:70%;background:radial-gradient(50% 100% at 50% 0,color-mix(in srgb,var(--glow) 20%,transparent),transparent 70%)}
.scene .lake .worms{position:absolute;inset:0 0 50%;display:block;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 85%,#fff) 0 1.2px,transparent 2px) 0 0/61px 47px,radial-gradient(circle,color-mix(in srgb,var(--glow) 70%,#fff) 0 1px,transparent 1.8px) 23px 17px/89px 71px;opacity:.5}
.scene .arch{background:linear-gradient(150deg,var(--rock-hi),var(--rock) 45%,color-mix(in srgb,var(--rock) 70%,#000));-webkit-mask-image:var(--lake-arch);mask-image:var(--lake-arch)}
body.bg-underground-lake .scene .lake,body.bg-underground-lake .scene .arch{opacity:1}
body.bg-underground-lake .scene .hall,body.bg-underground-lake .scene .hall-glow,body.bg-underground-lake .scene .hall-shade,body.bg-underground-lake .scene .far{opacity:0}
/* the heart of a geode: agate rings round the board, the hall fades back */
.scene .heart{background:radial-gradient(circle at 50% 46%,transparent 0 22%,color-mix(in srgb,var(--glow) 9%,transparent) 22.5%,transparent 30%),
  repeating-radial-gradient(circle at 50% 46%,var(--ring-a) 0 1.6vmax,var(--scene-top) 2.6vmax,var(--ring-b) 3.4vmax,var(--scene-top) 4.6vmax,var(--ring-a) 5.6vmax);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent 18%,#000 55%);mask-image:radial-gradient(circle at 50% 46%,transparent 18%,#000 55%)}
body.fs .scene .heart{opacity:.45}
body.fs .scene .hall,body.fs .scene .hall-shade{opacity:.35}body.fs .scene .hall-glow{opacity:.18}body.fs .scene .far{opacity:.25}
body.fs .scene .lake,body.fs .scene .arch{opacity:.3}
@keyframes cc-breathe{from{opacity:.3}to{opacity:.46}}

/* ---- title, buttons, tags ---- */
/* the title: cut letters under the fissure light — lighter at the top, a crisp contact shadow, a faint glow of the cave */
.logo h1{letter-spacing:.04em;color:var(--primary);text-shadow:none;
  background:linear-gradient(180deg,var(--title-hi,color-mix(in srgb,var(--primary) 55%,#fff)) 10%,var(--primary) 55%,var(--title-lo,var(--primary)) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1.5px 0 rgba(10,2,10,.55)) drop-shadow(0 0 16px color-mix(in srgb,var(--glow) 24%,transparent))}
@media (forced-colors:active){.logo h1{background:none;-webkit-text-fill-color:currentColor;filter:none}}
.ibtn,.pm,.auto{background:var(--panel-hi);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 38%,transparent)}
.ibtn:hover,.pm:hover:not(:disabled),.auto:hover{border-color:var(--primary)}
.demo,.auto span{background:var(--plate-glow);color:var(--plate)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 45%,transparent)}
.btn{font-family:var(--display);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.btn.ghost{background:var(--panel-hi);color:var(--primary)}
.screen{background:radial-gradient(circle at 50% 40%,var(--scene-low),var(--bg) 70%)}
.spinner{border-color:color-mix(in srgb,var(--glow) 22%,transparent);border-top-color:var(--glow)}
.toast{background:var(--panel-hi);color:var(--ink)}

/* ---- the geode split in half: a rough crust over the frame; round the reel window its hollow — agate bands and a
   lining of crystal teeth (skin.js measures the window: --wl / --wt / --ww / --wh, relative to the frame) ---- */
.frame{isolation:isolate;--tw:clamp(12px,calc(var(--cell)*.14),18px);--rings:10px;padding:calc(var(--tw) + var(--rings) + 10px) 12px 12px}
.geode{position:absolute;inset:0;z-index:-1;pointer-events:none;--wl:calc(var(--tw) + var(--rings) + 10px);--wt:calc(var(--tw) + var(--rings) + 10px);--ww:calc(100% - 2 * var(--wl));--wh:calc(100% - 2 * var(--wt))}
.geode i,.geode b{position:absolute;display:block}
/* the crust: its outer 3 px is the bevel — lit at the top left, dark at the bottom right */
.geode .crust{inset:-6px;clip-path:var(--crust-shape);background:linear-gradient(135deg,color-mix(in srgb,var(--crust-hi) 55%,#fff),var(--crust-hi) 24%,var(--crust) 58%,color-mix(in srgb,var(--crust) 45%,#000))}
/* the crust's broken face, inside its rim (the same outline, 3 px in): grit, pits and one soft fall of light */
.geode .crust::before{content:"";position:absolute;inset:3px;clip-path:var(--crust-shape);
  background:radial-gradient(70% 90% at 26% 18%,color-mix(in srgb,var(--crust-hi) 60%,transparent),transparent 70%),radial-gradient(40% 50% at 78% 82%,rgba(0,0,0,.22),transparent 70%),
    linear-gradient(160deg,var(--crust-hi),var(--crust) 45%,color-mix(in srgb,var(--crust) 62%,#000))}
/* the rock's grit: the scene's one noise tile, stronger here and only on the crust (static) */
.geode .crust::after{content:"";position:absolute;inset:3px;clip-path:var(--crust-shape);background:var(--grain) 0 0/110px;opacity:.3}
/* the hollow: the cave behind the window, ringed by agate bands of uneven width (outside) and lined with teeth (inside) */
.geode .hollow{left:calc(var(--wl) - var(--tw));top:calc(var(--wt) - var(--tw));width:calc(var(--ww) + 2 * var(--tw));height:calc(var(--wh) + 2 * var(--tw));border-radius:calc(var(--tw) + 10px);
  background:radial-gradient(80% 80% at 50% 50%,var(--cave-hi),var(--cave));
  box-shadow:0 0 0 1.5px var(--agate-4),0 0 0 3.5px var(--agate-1),0 0 0 4.5px var(--agate-3),0 0 0 7px var(--agate-2),0 0 0 8px var(--agate-4),0 0 0 10px var(--agate-1),0 8px 24px 10px rgba(0,0,0,.45)}
/* the teeth: lit faces (::before) and faces in shade (::after), darker at the root, clearer and faintly glowing at the tip */
.geode .teeth::before,.geode .teeth::after{content:"";position:absolute;inset:0;-webkit-mask-size:calc(var(--tw) * 5) 100%;mask-size:calc(var(--tw) * 5) 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.geode .teeth::before{background:linear-gradient(var(--td),color-mix(in srgb,var(--druse) 55%,var(--cave)),color-mix(in srgb,var(--druse) 72%,#fff) 70%,color-mix(in srgb,var(--druse) 60%,var(--glow)))}
.geode .teeth::after{background:linear-gradient(var(--td),color-mix(in srgb,var(--druse-lo) 45%,var(--cave)),var(--druse-lo) 75%,color-mix(in srgb,var(--druse-lo) 70%,var(--glow)))}
.geode .teeth.l::before,.geode .teeth.l::after,.geode .teeth.r::before,.geode .teeth.r::after{-webkit-mask-size:100% calc(var(--tw) * 5);mask-size:100% calc(var(--tw) * 5);-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y}
.geode .teeth.t,.geode .teeth.b{left:calc(var(--tw) * .7);right:calc(var(--tw) * .7);height:var(--tw)}
.geode .teeth.l,.geode .teeth.r{top:calc(var(--tw) * .7);bottom:calc(var(--tw) * .7);width:var(--tw)}
.geode .teeth.t{top:0;--td:180deg}.geode .teeth.b{bottom:0;--td:0deg}.geode .teeth.l{left:0;--td:90deg}.geode .teeth.r{right:0;--td:270deg}
.geode .teeth.t::before{-webkit-mask-image:var(--tooth-t-lit);mask-image:var(--tooth-t-lit)}.geode .teeth.t::after{-webkit-mask-image:var(--tooth-t-shade);mask-image:var(--tooth-t-shade)}
.geode .teeth.b::before{-webkit-mask-image:var(--tooth-b-lit);mask-image:var(--tooth-b-lit)}.geode .teeth.b::after{-webkit-mask-image:var(--tooth-b-shade);mask-image:var(--tooth-b-shade)}
.geode .teeth.b::before,.geode .teeth.b::after{-webkit-mask-position:30% 100%;mask-position:30% 100%}
.geode .teeth.l::before{-webkit-mask-image:var(--tooth-l-lit);mask-image:var(--tooth-l-lit)}.geode .teeth.l::after{-webkit-mask-image:var(--tooth-l-shade);mask-image:var(--tooth-l-shade)}
.geode .teeth.r::before{-webkit-mask-image:var(--tooth-r-lit);mask-image:var(--tooth-r-lit)}.geode .teeth.r::after{-webkit-mask-image:var(--tooth-r-shade);mask-image:var(--tooth-r-shade)}
.geode .teeth.r::before,.geode .teeth.r::after{-webkit-mask-position:100% 60%;mask-position:100% 60%}
.board{position:relative;z-index:1}
.message{margin-top:calc(var(--rings) + 2px)}
/* wide screens: room between the window and the payline markers for the hollow's lining and bands */
@media (min-width:861px) and (min-aspect-ratio:4/5){
  #board.reels-board:not(.pegs-off){column-gap:calc(var(--tw) + var(--rings) + 6px)}
  .frame{padding-left:16px;padding-right:16px}
}
/* variant "clean": the hollow's bands only — no crust and no teeth */
body[data-variant="clean"] .frame{--tw:0px;padding:calc(var(--rings) + 6px) 8px 8px}
body[data-variant="clean"] .geode .crust,body[data-variant="clean"] .geode .teeth{display:none}

/* ---- the reel window: recessed into the rock (the upper lip throws its shadow in, the lower lip catches the light);
   symbols settle as they land; a win lights its cell, the rest step back ---- */
.reels-board .window{box-shadow:inset 0 16px 18px -8px rgba(0,0,0,.7),inset 0 -1px 0 color-mix(in srgb,var(--druse) 38%,transparent),inset 0 0 24px rgba(0,0,0,.55)}
.reels-board .sym,.spire-board .vcell .sym,.spire-board .cell.coin .sym{width:96%;height:96%}
.reels-board .cell.landed .sym{animation:cc-land .3s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.reels-board .cell.win::after{inset:6%;border:1.5px solid color-mix(in srgb,var(--glow) 75%,#fff);border-radius:var(--win-radius);box-shadow:0 0 12px color-mix(in srgb,var(--glow) 50%,transparent),inset 0 0 14px color-mix(in srgb,var(--glow) 24%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.42;transition:opacity var(--t-fast,140ms) var(--ease-std,ease)}
.reels-board .reel.tease{box-shadow:inset 0 0 28px color-mix(in srgb,var(--glow) 60%,transparent)}
.reels-board .peg{border-color:color-mix(in srgb,var(--plate-ink) 12%,transparent)}
@keyframes cc-land{0%{transform:translateY(-5%)}60%{transform:translateY(1%)}100%{transform:none}}

/* ---- the Echo Respins vault: the crystals carry their own inner light (art.js); a spire rises without a filter ---- */
.spire-board .spire{filter:none}
.spire-board .spire.rise{animation-name:cc-rise}
.spire-board .vcell.gather .sym{filter:none}
@keyframes cc-rise{from{clip-path:inset(100% 0 0 0);opacity:.55}to{clip-path:inset(0 0 0 0);opacity:1}}

/* ---- the message: a dark rock plate under the reels ---- */
.message{position:relative;z-index:1;color:var(--plate-ink)}
.message:not(:empty){padding:2px 14px;border-radius:8px;background:var(--plate);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 26%,transparent),0 2px 10px rgba(0,0,0,.4)}
.message b{color:var(--plate-hi)}

/* ---- the Echo Respins bar: echo crystals, the spire scale, the cavern's total (a dark rock plate) ---- */
.fsbar{flex-wrap:wrap;justify-content:center;gap:6px 16px;padding:6px 16px;background:var(--plate);border-color:color-mix(in srgb,var(--glow) 50%,transparent);color:var(--plate-ink);
  box-shadow:0 0 14px color-mix(in srgb,var(--glow) 16%,transparent)}
.fsbar b{color:var(--plate-hi)}
.fsbar .echoes{display:flex;align-items:center;gap:4px}
.fsbar .echo{width:16px;height:24px;color:color-mix(in srgb,var(--plate-ink) 55%,transparent);--echo-fill:color-mix(in srgb,var(--plate-ink) 8%,transparent)}
.fsbar .echo.on{color:var(--plate-glow);--echo-fill:color-mix(in srgb,var(--glow) 45%,transparent)}
.fsbar .echoes b{margin-left:3px;color:var(--plate-glow)}
.fsbar .echo.back{animation:cc-echo-back .42s var(--ease-back,cubic-bezier(.34,1.4,.64,1))}
.fsbar .echo.gone{animation:cc-echo-gone .5s var(--ease-out,ease-out)}
.fsbar .scale{display:flex;gap:4px}
.fsbar .scale i{font:700 13px/1 var(--ui);font-style:normal;padding:4px 6px;border-radius:6px;color:var(--plate-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plate-ink) 40%,transparent)}
.fsbar .scale i.lit{color:var(--spire-badge-ink);background:var(--spire-badge-bg);box-shadow:none}
.fsbar .scale i.next{color:var(--plate-glow);box-shadow:inset 0 0 0 1.5px var(--plate-glow)}
.fsbar .pend{white-space:nowrap}
@keyframes cc-echo-back{0%{transform:scale(1.3)}100%{transform:none}}
@keyframes cc-echo-gone{0%{opacity:1;transform:translateY(0)}50%{opacity:.4;transform:translateY(-3px)}100%{opacity:1;transform:none}}

/* ---- the HUD: the ledge of a U of rock round the play area (wraparound-u); arms rise beside the board on wide screens ---- */
.hud{position:relative;border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);
  background:radial-gradient(circle at 10% 100%,color-mix(in srgb,var(--glow) 7%,transparent),transparent 22%),var(--hud-bg);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),inset 0 -2px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.4)}
.meter span{color:var(--muted)}.meter b{color:var(--ink)}.meter.win b{color:var(--primary)}.meter small{color:var(--muted)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  /* the arms: two crystal pillars rising from the ledge — lit face left, shaded face right, a glowstone point at the top */
  .hud::before,.hud::after{content:"";position:absolute;bottom:calc(100% - 12px);width:46px;height:min(30vh,240px);pointer-events:none;z-index:-1;
    clip-path:polygon(8% 100%,4% 52%,12% 30%,22% 34%,30% 10%,42% 24%,52% 0,62% 22%,74% 8%,82% 32%,92% 40%,96% 70%,100% 100%);
    background:linear-gradient(90deg,transparent 52%,rgba(8,2,8,.32) 52%),
      linear-gradient(180deg,color-mix(in srgb,var(--druse) 80%,#fff) 0 12%,color-mix(in srgb,var(--druse-lo) 70%,var(--crust)) 26%,var(--crust-hi) 40%,var(--crust) 70%,color-mix(in srgb,var(--crust) 70%,#000))}
  .hud::before{left:6px}.hud::after{right:6px;transform:scaleX(-1)}
  .game:not(.hud-side-tablets) .side.left .tablet{background:var(--panel-bg);min-height:44px}
}

/* ---- the spin button: a hexagonal prism (≥ 72 px) under the fissure light; its arrow turns while a spin runs ---- */
.spin{background:none;box-shadow:none;border-radius:0;filter:drop-shadow(2px 7px 8px rgba(6,1,6,.55))}
.spin svg{left:0;top:0;width:100%;height:100%;transform:none}
.spin:hover:not(:disabled){filter:drop-shadow(2px 7px 8px rgba(6,1,6,.55)) brightness(1.07)}
.spin:disabled{filter:brightness(.6) saturate(.5)}
.spin.kick svg{animation:cc-kick .36s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.spin.busy svg .glyph{transform-origin:50px 50px;animation:cc-turn 1.2s linear infinite}
@keyframes cc-kick{0%{transform:scale(1)}30%{transform:scale(.95)}65%{transform:scale(1.02)}100%{transform:none}}
@keyframes cc-turn{to{transform:rotate(360deg)}}

/* ---- side options, panels, overlays ---- */
.side .tablet{border-color:color-mix(in srgb,var(--primary) 36%,transparent);color:var(--ink)}
.side .tablet .th{color:var(--primary)}.side .tablet small{color:var(--muted)}
.panel h3{color:var(--primary-hi)}
.ptc{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.special .symbox{position:relative;width:96px;height:96px}
.special .symbox.tall{width:48px;height:192px;justify-self:center}
.spire-scale{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 0}
.spire-scale li{display:flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--panel) 70%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.spire-scale b{font-family:var(--display);font-size:20px;color:var(--primary)}.spire-scale span{color:var(--muted)}
.mini{background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--muted)}.mini .g i{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.tog,.chips button{background:color-mix(in srgb,var(--panel) 70%,transparent)}.chips button[aria-pressed="true"]{color:var(--panel)}
.sheet{background:rgba(8,2,8,.7)}
.ovamt{color:var(--ink)}
/* big wins (prism-light-shards): faint spectral rays turning very slowly at the edges of the screen, never under the
   card's text — the prism's light, not a disco */
.overlay.bigwin::before{content:"";position:absolute;inset:-25%;pointer-events:none;opacity:.22;
  background:repeating-conic-gradient(from 0deg,rgba(255,143,168,.55) 0 3deg,transparent 3deg 13deg,rgba(255,233,138,.45) 13deg 16deg,transparent 16deg 26deg,rgba(134,210,255,.5) 26deg 29deg,transparent 29deg 40deg,rgba(184,162,255,.5) 40deg 43deg,transparent 43deg 52deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 28%,#000 62%);mask-image:radial-gradient(circle at 50% 50%,transparent 28%,#000 62%);animation:cc-rays 80s linear infinite}
.overlay.bigwin .ovcard{position:relative}
@keyframes cc-rays{to{transform:rotate(360deg)}}

/* ---- "geode-crack-open": two halves of a geode close over the page and split open (skin.js); the seam glows from a
   layer behind each half's jagged edge (no blur filter on the moving halves) ---- */
.crackfx{position:fixed;inset:0;z-index:45;pointer-events:none;display:none;overflow:hidden}
.crackfx.show{display:block}
.crackfx .half{position:absolute;top:0;bottom:0;width:53%;display:block;transform:translateX(-102%)}
.crackfx .half.l{left:0}.crackfx .half.r{right:0;transform:translateX(102%)}
.crackfx .half::before{content:"";position:absolute;inset:0;clip-path:var(--clip);background:linear-gradient(90deg,transparent 70%,color-mix(in srgb,var(--glow) 80%,#fff));transform:translateX(6px)}
.crackfx .half.r::before{background:linear-gradient(270deg,transparent 70%,color-mix(in srgb,var(--glow) 80%,#fff));transform:translateX(-6px)}
.crackfx .half b{position:absolute;inset:0;display:block;clip-path:var(--clip);
  background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.07) 0 1px,transparent 1.8px) 0 0/17px 21px,radial-gradient(120% 80% at 90% 50%,color-mix(in srgb,var(--agate-2) 80%,transparent),transparent 30%),linear-gradient(135deg,var(--crust-hi),var(--crust) 50%,color-mix(in srgb,var(--crust) 60%,#000))}
.crackfx .half.r b{background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.07) 0 1px,transparent 1.8px) 0 0/17px 21px,radial-gradient(120% 80% at 10% 50%,color-mix(in srgb,var(--agate-2) 80%,transparent),transparent 30%),linear-gradient(135deg,var(--crust-hi),var(--crust) 50%,color-mix(in srgb,var(--crust) 60%,#000))}

/* ---- reduced motion: no breathing light, no rays turning, no rings — still pictures ---- */
body.still .scene .hall-glow,body.still .overlay.bigwin::before,body.still .fsbar .echo,body.still .reels-board .cell .sym,body.still .spin svg,body.still .spin svg .glyph,body.still .spire-board .spire{animation:none!important}
@media (prefers-reduced-motion:reduce){.scene .hall-glow,.overlay.bigwin::before,.fsbar .echo,.spin svg,.spin svg .glyph,.reels-board .cell .sym{animation:none!important}.crackfx{display:none!important}}

/* ---- phones: a thinner shell and smaller teeth; the bar wraps; the prism keeps 72 px in the thumb zone ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--tw:12px;--rings:7px;padding:calc(var(--tw) + var(--rings) + 6px) calc(var(--tw) + var(--rings) + 4px) 8px}
  .geode .crust{inset:-4px}
  .geode .hollow{border-radius:12px;box-shadow:0 0 0 1.5px var(--agate-4),0 0 0 3px var(--agate-1),0 0 0 5px var(--agate-2),0 0 0 7px var(--agate-3),0 4px 14px 6px rgba(0,0,0,.4)}
  .scene .shaft{width:70vmax;left:-30%}
  .fsbar{gap:4px 10px;padding:4px 10px;font-size:14px}
  .logo h1{font-size:clamp(20px,6.2vw,34px)}
}
@media (max-width:400px){
  .fsbar{font-size:13px}.fsbar .scale i{padding:3px 4px;font-size:12px}.fsbar .echo{width:13px;height:20px}
  #mBetSub{font-size:10.5px;line-height:1.1}
}