/* Sunstone Terraces skin on the shared game shell: glazed terracotta on sunlit Andean terraces. A stepped temple on
   farming terraces under the high peaks at sunrise (or a cloud forest in the mist, or the festival dawn of the Zenith
   Spins), a stepped pyramid of painted ceramic round the grid with the golden sun crown that carries the multiplier,
   glazed tiles as the grid with runs lit as gold strips, a rayed sun disc as the spin button, a stepped stone plinth as
   the HUD, and the sun window into the Zenith Spins. Theme tokens (--sun, --night, --amaranth, the clay, tile and stone
   shades) come from skin.js themeMap; gold, cream and andesite are materials. Every text stands on a dark clay, tile or
   night ground (≥ 4.5:1 in all three presets); the amaranth accent is decoration only. Motion is stepped. */
:root{
  --sun:#F28C28; --sun-hi:#F7BA7E; --night:#32003A; --amaranth:#C2185B;
  --clay:#792B2A; --clay-hi:#A35044; --clay-lo:#300624; --panel:#3E0A2D; --tile:#3D0F29; --tile-hi:#53172A;
  --stone:#5E3C49; --stone-lo:#2A1023; --dusk:#5D0647; --dawn:#F5AF51; --mist:#544264; --leaf:#2E3640;
  --gold:#F6C64A; --gold-hi:#FFF1B0; --gold-lo:#9A6414; --gold-dk:#3A1E06; --cream:#FFF3DC; --andesite:#8E857A;
  --ink:var(--cream); --muted:#F0D6B6;
  --display:"Alfa Slab One","Rockwell","Roboto Slab",Georgia,serif; --ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:6px; --radius-sm:4px; --line:color-mix(in srgb,var(--gold) 40%,transparent);
  --panel-bg:linear-gradient(180deg,var(--panel),var(--night) 70%); --panel-border:var(--gold-lo);
  --hud-bg:linear-gradient(180deg,var(--clay-lo),color-mix(in srgb,var(--clay-lo) 70%,#000));
  --ibtn-bg:linear-gradient(180deg,var(--clay-lo),var(--panel)); --ibtn-ink:var(--gold-hi);
  --btn-bg:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#D8A034); --btn-ink:#2A0E06;
  /* glazed tiles: every cell a square tile with a lighter glaze in the middle and a bevel (static paint) */
  --window-bg:linear-gradient(180deg,rgba(0,0,0,.2),transparent 20%,transparent 88%,rgba(255,226,190,.05)) 0 0/var(--cell) var(--cell),
    radial-gradient(ellipse 72% 70% at 50% 42%,color-mix(in srgb,var(--tile-hi) 88%,var(--dawn)),var(--tile) 76%) 0 0/var(--cell) var(--cell),var(--tile);
  --window-radius:3px; --reel-sep:rgba(255,226,180,.09);
  --win-glow:var(--sun); --win-ring:var(--gold-hi); --land-ring:var(--gold); --tease-glow:var(--sun); --fs-ring:var(--gold);
  --badge-bg:rgba(20,6,2,.82); --badge-ink:var(--cream); --float-ink:var(--cream); --float-stroke:#2A0E06;
  --sym-size:92%; --focus:var(--gold-hi);
  /* the stepped frame: the crown's size and the height of one step (follow the cell) */
  --crown:clamp(40px,calc(var(--cell)*.92),88px); --st:clamp(5px,calc(var(--cell)*.1),11px);
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene: the mountain temple at dawn (default), the cloud forest, and the festival dawn (Zenith Spins). The
   mountain temple is one static SVG from skin.js (the low sun in a saddle of the range on the left, the game's key
   light; atmospheric perspective from the hazy far range to the dark retaining walls in front), coloured here from the
   theme tokens. The other scenes are masks from skin.js. Only the forest mist and the pennants move, slowly. One static
   grain layer over the whole scene, a vignette, and a soft warm light behind the board that lifts it off the
   landscape. No eclipse anywhere. */
.scene>div>i{position:absolute;inset:0;display:block}
.scene .sky{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 70%,#000) 0%,var(--night) 18%,var(--dusk) 36%,color-mix(in srgb,var(--dawn) 50%,var(--dusk)) 46%,color-mix(in srgb,var(--dawn) 72%,var(--dusk)) 53%,color-mix(in srgb,var(--dusk) 60%,var(--night)) 100%)}
.scene .land svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .land .facet{fill:color-mix(in srgb,var(--stone-lo) 70%,var(--dusk));fill-opacity:.55}
.scene .land .ridgelit{fill:none;stroke:color-mix(in srgb,var(--dawn) 55%,#FFF4DC);stroke-opacity:.4;stroke-width:2;stroke-linejoin:round}
.scene .land .riser{fill:none;stroke:color-mix(in srgb,var(--stone-lo) 72%,#000)}
.scene .land .lip{fill:none;stroke:color-mix(in srgb,var(--dawn) 60%,#FFF4D8)}
.scene .land .shade .lip{stroke:color-mix(in srgb,var(--dawn) 28%,var(--mist))}
.scene .land .tf{fill:color-mix(in srgb,var(--clay) 82%,var(--dusk))}
.scene .land .tt{fill:color-mix(in srgb,var(--clay-hi) 70%,var(--dawn))}
.scene .land .tl{fill:color-mix(in srgb,var(--clay-hi) 85%,var(--dawn))}
.scene .land .tr{fill:color-mix(in srgb,var(--clay-lo) 80%,#000)}
.scene .land .course{fill:none;stroke:rgba(0,0,0,.28);stroke-width:2}
.scene .land .door{fill:color-mix(in srgb,var(--night) 70%,#000)}
.scene .land .stair{fill:color-mix(in srgb,var(--clay-hi) 60%,var(--gold-lo))}
.scene .land .step{fill:none;stroke:color-mix(in srgb,var(--clay-lo) 70%,#000);stroke-width:3}
.scene .land .wall{fill:color-mix(in srgb,var(--stone-lo) 78%,#000)}
.scene .land .walltop{fill:none;stroke:color-mix(in srgb,var(--dawn) 45%,var(--stone));stroke-opacity:.6;stroke-width:4}
.scene .land .joint{fill:none;stroke:rgba(0,0,0,.4);stroke-width:2.5}
.scene .land,.scene .forest,.scene .festival{transition:opacity .8s}
.scene .forest,.scene .festival{opacity:0}
.scene .forest{background:linear-gradient(180deg,color-mix(in srgb,var(--mist) 62%,var(--night)) 10%,color-mix(in srgb,var(--mist) 70%,var(--dawn)) 52%,color-mix(in srgb,var(--leaf) 70%,var(--night)))}
.scene .forest .mist{inset:auto 0 auto 0;height:22vh;background:linear-gradient(180deg,transparent,rgba(232,240,230,.16) 50%,transparent);animation:st-mist 26s ease-in-out infinite alternate}
.scene .forest .mist.m1{top:40%}.scene .forest .mist.m2{top:62%;animation-duration:34s}
.scene .forest .canopy{-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 .canopy.far{background:linear-gradient(180deg,color-mix(in srgb,var(--mist) 62%,var(--dawn)),color-mix(in srgb,var(--leaf) 40%,var(--mist)));-webkit-mask-image:var(--st-canopy-far);mask-image:var(--st-canopy-far)}
.scene .forest .canopy.mid{background:linear-gradient(180deg,color-mix(in srgb,var(--leaf) 55%,var(--mist)),color-mix(in srgb,var(--leaf) 80%,var(--night)));-webkit-mask-image:var(--st-canopy-mid);mask-image:var(--st-canopy-mid)}
.scene .forest .canopy.near{background:linear-gradient(180deg,var(--leaf),color-mix(in srgb,var(--leaf) 50%,#000));-webkit-mask-image:var(--st-canopy-near);mask-image:var(--st-canopy-near)}
body.bg-cloud-forest .scene .forest{opacity:1}
body.bg-cloud-forest .scene .land{opacity:0}
/* the festival dawn: the first light on gold (soft rays from the sun) and two strings of woven pennants, each flag lit
   from the sun on the left (skin.js); the far string smaller and lost in the haze, the near one in muted dyes, so
   neither competes with the board */
.scene .festival .rays{background:repeating-conic-gradient(from 0deg at 16% 35%,rgba(255,226,150,.1) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle at 16% 35%,#000 0 14vmin,transparent 80vmin);mask:radial-gradient(circle at 16% 35%,#000 0 14vmin,transparent 80vmin)}
.scene .festival .pennants{opacity:.86;animation:st-sway 9s ease-in-out infinite alternate}
.scene .festival .pennants svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pennants .cord{fill:none;stroke:color-mix(in srgb,var(--clay-lo) 70%,#000);stroke-opacity:.7;stroke-width:2.5}
.pennants .c0{--d:var(--amaranth)}.pennants .c1{--d:var(--gold)}.pennants .c2{--d:#2E9C8A}.pennants .c3{--d:var(--sun)}.pennants .c4{--d:var(--cream)}
.pennants .near use{fill:color-mix(in srgb,var(--d) 76%,var(--clay))}
.pennants .far{opacity:.6}
.pennants .far use{fill:color-mix(in srgb,var(--d) 42%,color-mix(in srgb,var(--dawn) 40%,var(--dusk)))}
body.fs .scene .festival,body.bg-festival-dawn .scene .festival{opacity:1}
body.fs .scene .sky,body.bg-festival-dawn .scene .sky{background:linear-gradient(180deg,var(--night) 0%,var(--dusk) 24%,color-mix(in srgb,var(--dawn) 70%,var(--dusk)) 42%,var(--dawn) 52%,color-mix(in srgb,var(--dawn) 55%,var(--clay)) 100%)}
body.fs .scene .forest{opacity:0}
body.fs .scene .land{opacity:1}
/* the mist and the pennants move only while their scene shows (the default mountain temple hides both layers) */
.scene .forest .mist,.scene .festival .pennants{animation-play-state:paused}
body.bg-cloud-forest:not(.fs) .scene .forest .mist,body.fs .scene .festival .pennants,body.bg-festival-dawn .scene .festival .pennants{animation-play-state:running}
.scene .haze{background:radial-gradient(ellipse 44% 50% at 50% 44%,color-mix(in srgb,var(--dawn) 16%,transparent),transparent 72%),radial-gradient(ellipse at 50% 46%,transparent 46%,rgba(14,3,8,.58) 100%)}
.scene .grain{pointer-events:none;opacity:.06;mix-blend-mode:overlay;background: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") 0 0/160px}
/* tall phones show only the middle of the landscape: it is scaled up from its foot so the snow peaks clear the top of
   the pyramid, and the low sun (off screen to the left at this width) is set, a little smaller, into the sky above the
   board's upper-left corner, so the key light still reads */
@media (max-aspect-ratio:4/5){
  .scene .land svg{top:auto;height:118%}
  .scene .land .sun circle:first-child{transform:translate(390px,-82px)}
  .scene .land .sun circle:last-child{transform:translate(690px,236px) scale(.62) translate(-300px,-318px)}
}
@keyframes st-mist{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes st-sway{from{transform:translateY(0)}to{transform:translateY(.8%)}}

/* ---- title and round buttons */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.02em;color:color-mix(in srgb,var(--sun) 76%,var(--gold-hi));
  text-shadow:0 1px 0 color-mix(in srgb,var(--sun) 40%,#2A0E06),0 2px 0 #2A0E06,0 4px 12px rgba(0,0,0,.55)}
.ibtn{border:1.5px solid var(--gold-lo);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold) 30%,transparent),0 2px 5px rgba(0,0,0,.45)}
.ibtn:hover{border-color:var(--gold)}

/* ---- the frame "ziggurat": a stepped pyramid of painted ceramic. Its body starts at --ztop (halfway down the crown),
   two steps rise to the crown, a woven band runs along the top, the grid sits in the body and the message under it.
   In the Zenith Spins the crown rides on the feature bar right above, so the pyramid keeps only its steps on top (the
   board's layout leaves 1.7 cells for everything round the grid). Padding in px: the board measures it for its --cell.
   "clean": a thin glazed frame and a smaller crown. */
.frame{--ztop:calc(var(--crown)*.55);padding:calc(var(--crown) + 6px) 16px 10px;gap:6px}
body.fs .frame{--ztop:calc(var(--st)*2);padding-top:calc(var(--st)*2 + 8px)}
.zig{position:absolute;inset:0;z-index:0;pointer-events:none}
.zig::before{content:"";position:absolute;left:0;right:0;bottom:0;top:var(--ztop);border-radius:3px;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.2) 0 2px,rgba(255,226,190,.06) 2px 3px,transparent 3px 18px),
    linear-gradient(90deg,rgba(255,232,200,.08),transparent 26%,transparent 72%,rgba(0,0,0,.2)),linear-gradient(180deg,var(--clay),var(--clay-lo) 72%);
  box-shadow:inset 0 0 0 1.5px var(--gold-lo),inset 2px 3px 0 1.5px color-mix(in srgb,var(--gold) 40%,transparent),inset -2px -3px 0 1.5px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.55)}
.zig .tier{position:absolute;height:calc(var(--st) + 3px);background:linear-gradient(180deg,var(--clay-hi),var(--clay) 70%,var(--clay-lo));
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--gold) 50%,transparent),inset 2px 0 0 color-mix(in srgb,var(--gold) 35%,var(--gold-lo)),inset -2px 0 0 rgba(0,0,0,.35)}
.zig .tier.t1{left:14%;right:14%;top:calc(var(--ztop) - var(--st))}
.zig .tier.t2{left:30%;right:30%;top:calc(var(--ztop) - var(--st)*2)}
/* the woven band: a row of stepped triangles (gold), a cream thread and an amaranth stripe (decoration only) */
.zig .band{position:absolute;left:3px;right:3px;top:calc(var(--ztop) + 4px);height:calc(var(--crown)*.45 - 2px);opacity:.9;
  background:linear-gradient(180deg,transparent 0 calc(100% - 4px),color-mix(in srgb,var(--amaranth) 55%,var(--clay-lo)) calc(100% - 4px) calc(100% - 2px),transparent calc(100% - 2px)),
    linear-gradient(180deg,transparent 0 2px,color-mix(in srgb,var(--cream) 40%,transparent) 2px 3px,transparent 3px),
    conic-gradient(from 135deg at 50% 100%,color-mix(in srgb,var(--gold) 55%,var(--clay)) 90deg,transparent 0) 0 6px/14px 9px repeat-x}
body.fs .zig .band,body.fs .frame>.crown{display:none}
.board,.message{position:relative;z-index:1}
/* the sun crown: a gold disc with twelve rays on the top step; the multiplier in its middle (dark on gold) */
.crown{position:absolute;left:50%;top:0;z-index:3;width:var(--crown);height:var(--crown);transform:translateX(-50%);display:grid;place-items:center;pointer-events:none}
.crown svg,.fsbar .fsm svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.crown .crays,.fsbar .fsm .crays{transform-origin:60px 60px;transition:opacity .2s}
.crown:not(.lit) .crays,.fsbar .fsm:not(.lit) .crays{opacity:.6}
.crown .m,.fsbar .fsm b{position:relative;font:400 calc(var(--crown)*.3)/1 var(--display);color:#2A0E06;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.crown.wide .m,.fsbar .fsm.wide b{font-size:calc(var(--crown)*.25)}
.crown.lit svg,.fsbar .fsm.lit svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)) drop-shadow(0 0 8px color-mix(in srgb,var(--sun) 70%,transparent))}
/* a paid spin is over: the crown keeps the M it reached, dimmed and unlit (the next paid spin starts at ×1); the dark
   digit stays on the light middle of the disc (≥ 4.5:1) */
.crown.spent svg{filter:saturate(.35) brightness(.85) drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.crown.pulse .crays,.fsbar .fsm.pulse .crays{animation:st-crown .48s steps(4,end)}
@keyframes st-crown{0%{transform:rotate(0) scale(1.16)}100%{transform:rotate(30deg) scale(1)}}
body[data-variant="clean"]{--crown:clamp(34px,calc(var(--cell)*.7),64px)}
body[data-variant="clean"] .frame{padding:calc(var(--crown) + 4px) 10px 8px;--ztop:calc(var(--crown)*.5)}
body.fs[data-variant="clean"] .frame{--ztop:calc(var(--st)*2);padding-top:calc(var(--st)*2 + 6px)}
body[data-variant="clean"] .zig::before{background:color-mix(in srgb,var(--night) 78%,transparent);box-shadow:inset 0 0 0 2px var(--gold-lo)}
body[data-variant="clean"] .zig .tier,body[data-variant="clean"] .zig .band{display:none}

/* ---- the grid: glazed tiles. A winning tile glows softly; the presenter outlines each straight run with one gold strip
   that blinks twice and fades (present-charge.css), the run's tiles slide up and out in 180 ms, and every fall runs in
   three steps of 60 ms (cells.js, motion.ease) */
.cells-board .cs-field{box-shadow:inset 0 0 0 1.5px var(--gold-lo),inset 0 -2px 0 1px color-mix(in srgb,var(--gold) 22%,transparent),inset 0 16px 18px -10px rgba(0,0,0,.7),inset 0 0 14px rgba(0,0,0,.3)}
.cells-board.feature .cs-field{box-shadow:inset 0 0 0 2px var(--gold),inset 0 -2px 0 1px color-mix(in srgb,var(--gold) 30%,transparent),inset 0 16px 18px -10px rgba(0,0,0,.65)}
.sym{position:relative;width:100%;height:100%}
/* the symbol class "special" (Sunstone, Sun Gate) also matches the shell's paytable block rule .special{display:grid;
   margin:10px 0}: that pushed the stone 10 px below its own charge overlay (a doubled disc) — symbols stay plain boxes */
.sym.special{display:block;margin:0}
.sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
/* a winning tile: a flat gold glaze edge to edge, so the tiles of a run join into one band (static paint) */
.cells-board .cell.win::before{inset:0;border:0;border-radius:0;animation:none;opacity:1;box-shadow:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold-hi) 22%,transparent),color-mix(in srgb,var(--sun) 26%,transparent))}
.cells-board .cell.pop .face{transform:translateY(-38%) scale(.94)}
.cells-board .cell.land .face{animation:st-land .36s steps(3,jump-start)}
@keyframes st-land{0%{transform:translateY(-6%) scale(1.04)}100%{transform:none}}
.cells-board.tease .cs-field::after{animation-timing-function:steps(2,end)}
/* the Sunstone presenter's pieces in this game's materials: gold strips and notches, a warm beam, cream digits */
.cells-board{--pc-beam:rgba(255,204,110,.74);--pc-core:rgba(255,248,226,.94);--pc-outline:var(--gold-hi);--pc-strip:var(--gold-hi);
  --pc-strip-fill:color-mix(in srgb,var(--sun) 20%,transparent);--pc-keep:var(--gold-hi);--pc-fire:#FFF1B0;--pc-burn:rgba(255,214,120,.28);
  --pc-digit:var(--cream);--pc-digit-stroke:#1C0905;--pc-notch:var(--gold)}
.cells-board .pc-strip::before{border-radius:4px;border-width:2px}
.cells-board .b-charge .pc-digit{font-family:var(--display);font-weight:400;font-size:calc(var(--cell)*.24)}
.message{font-family:var(--ui);font-weight:600;color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.75);max-width:100%;padding:0 6px}
.message b{color:var(--sun-hi)}
.message .tag{color:var(--muted)}
.cells-board .cs-float{font-family:var(--display);font-weight:400}

/* ---- the feature bar (Zenith Spins), as wide as the pyramid: spin N of M and the kept stones on the left, the sun
   crown with the multiplier in the middle (it hangs over the bar onto the pyramid's top step), the total on the right */
body.fs .fsbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:min(100%,calc(var(--cell)*6 + 32px));min-width:min(100%,280px);box-sizing:border-box}
.fsbar{position:relative;z-index:2;background:linear-gradient(180deg,var(--clay-lo),var(--panel));border:2px solid var(--gold-lo);border-radius:4px;color:var(--ink);font-family:var(--ui);font-weight:600;gap:10px;padding:3px 10px;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.fsbar b{color:var(--sun-hi)}
.fsbar .fsl{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0}
.fsbar .fsr{justify-self:end;text-align:right;white-space:nowrap}
.fsbar .fsm{--crown:clamp(40px,calc(var(--cell)*.8),60px);position:relative;width:var(--crown);height:var(--crown);margin:-8px 0 -14px;display:grid;place-items:center}
.fsbar .fsm b{color:#2A0E06}
.fsbar .kept{display:flex;align-items:center}
.fsbar .kept .slots{display:flex;gap:3px}
.fsbar .kept img{width:22px;height:22px;display:block}
.fsbar .kept .empty{width:22px;height:22px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--andesite) 80%,transparent);box-sizing:border-box}

/* ---- the plinth: stepped stone under the grid; balance, bet and win in cream on dark clay; the top edge steps up to
   the middle like the temple. The sun disc spins in steps while a round plays. */
.hud{position:relative;border:1.5px solid var(--gold-lo);border-radius:4px;margin-top:8px;box-shadow:0 -4px 16px rgba(0,0,0,.4),inset 0 2px 0 color-mix(in srgb,var(--gold) 30%,transparent),inset 2px 0 0 rgba(255,226,190,.06),inset -2px -2px 0 rgba(0,0,0,.25)}
.hud::before{content:"";position:absolute;left:22%;right:22%;top:-10px;height:10px;pointer-events:none;background:linear-gradient(180deg,var(--clay-hi),var(--clay-lo));
  clip-path:polygon(0 100%,10% 100%,10% 50%,22% 50%,22% 0,78% 0,78% 50%,90% 50%,90% 100%,100% 100%)}
.hud::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;height:4px;pointer-events:none;opacity:.7;
  background:conic-gradient(from 135deg at 50% 100%,var(--gold-lo) 90deg,transparent 0) 0 0/10px 4px repeat-x}
.demo,.auto span{color:var(--on-accent,var(--cream))}
.meter span{color:var(--muted);font-family:var(--ui);font-weight:600}
.meter b{color:var(--ink);font-family:var(--ui);font-weight:600}.meter.win b{color:var(--sun-hi)}
.meter small{color:var(--muted)}
.pm,.auto{background:radial-gradient(circle at 38% 32%,var(--clay-hi),var(--clay) 55%,var(--clay-lo));color:var(--cream);border:1.5px solid var(--gold-lo);box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--gold) 30%,transparent),0 2px 4px rgba(0,0,0,.5)}
.spin{background:none;box-shadow:none;color:var(--btn-ink)}
.spin svg{left:0;top:0;width:100%;height:100%;transform:none;overflow:visible;filter:drop-shadow(0 5px 7px rgba(0,0,0,.55))}
.spin .rays{transform-origin:50px 50px}
.spin.busy .rays{animation:st-turn 2.4s steps(24,end) infinite}
.spin.kick svg{animation:st-kick .24s steps(2,end)}
@keyframes st-turn{to{transform:rotate(360deg)}}
@keyframes st-kick{0%{transform:scale(.94)}100%{transform:none}}
.side .tablet{min-height:44px;background:linear-gradient(180deg,var(--clay-lo),var(--panel));border:1.5px solid var(--gold-lo);color:var(--ink);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold) 28%,transparent),0 4px 10px rgba(0,0,0,.35)}
.tablet .th{font-family:var(--display);font-weight:400;color:var(--sun-hi)}
.tablet small{color:var(--muted)}
.tablet[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold),0 0 14px color-mix(in srgb,var(--sun) 40%,transparent)}

/* ---- panels, paytable and overlays */
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.panel h3{color:var(--sun-hi)}
.ovcard h2{font-size:clamp(40px,7.6vw,98px);color:color-mix(in srgb,var(--sun) 76%,var(--gold-hi));
  text-shadow:0 2px 0 color-mix(in srgb,var(--sun) 40%,#2A0E06),0 4px 0 #2A0E06,0 10px 30px rgba(0,0,0,.5)}
.btn{font-family:var(--display);font-weight:400;border:2px solid var(--gold-lo)}
.ptc,.chips button,.tog{background:color-mix(in srgb,#000 20%,var(--panel))}
/* a pay card: the symbol and its name on one row, the pays full width under them (amounts to 4 decimals need it) */
.ptc{grid-template-columns:60px 1fr;row-gap:8px}
.ptc>div:last-child{display:contents}
.ptc h4{margin:0}
.ptc table{grid-column:1/-1}
.ptc td:first-child{white-space:nowrap}
.ptc .symbox{width:60px;height:60px;--cell:60px}
.ptc .symbox,.special .symbox{border-radius:4px;background:var(--window-bg);box-shadow:inset 0 0 0 1.5px var(--gold-lo)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px;flex:none}
.ptc .sym,.special .sym{position:absolute;inset:6%;width:auto;height:auto}
.ptc td:first-child{color:var(--muted)}
.notchrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 0;padding:0;list-style:none}
.notchrow li{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;color:var(--muted)}
.notchrow img{width:48px;height:48px;display:block}
.paysmall{border-collapse:collapse;font-size:15px;margin-top:6px}
.paysmall td{padding:2px 10px 2px 0}.paysmall td:last-child{font-weight:800;text-align:right}
.panel .crownpic{position:relative;width:96px;height:96px;flex:none;--crown:96px}
.panel .crownpic .crown{position:absolute;inset:0;transform:none;width:100%;height:100%}

/* ---- the sun window (the Zenith Spins transition): a temple wall with one trapezoid window over the whole screen,
   the sun behind it and a soft wedge of gold light below it. --u = one unit of the wall's 1600 × 900 drawing. */
.sunwin{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;--u:max(calc(100vw / 1600),calc(100vh / 900))}
.sunwin.show{display:block}
.sunwin>i{position:absolute;display:block}
/* behind the window: the dawn sky (opaque, so the board never shows through) and the light of the sun (it brightens) */
.sunwin .glow{inset:0;background:linear-gradient(180deg,var(--dusk),color-mix(in srgb,var(--dawn) 70%,var(--dusk)) 55%,var(--dawn))}
.sunwin .light{inset:0;background:radial-gradient(circle at 50% 50%,#FFF4C8 0,rgba(255,226,150,.85) calc(var(--u)*120),rgba(255,210,104,0) calc(var(--u)*300))}
.sunwin .disc{left:50%;top:50%;width:calc(var(--u)*170);height:calc(var(--u)*170);border-radius:50%;transform:translate(-50%,-50%) translateY(170%);
  background:radial-gradient(circle at 42% 38%,#FFFBE6,#FFD268 62%,#F6A63A);box-shadow:0 0 calc(var(--u)*50) rgba(255,210,104,.45)}
.sunwin .wall{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 3px,transparent 3px 58px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 3px,transparent 3px 132px),linear-gradient(180deg,var(--stone),var(--stone-lo));
  -webkit-mask:var(--st-window) center/cover no-repeat;mask:var(--st-window) center/cover no-repeat}
.sunwin .beam{left:50%;top:calc(50% + var(--u)*190);width:calc(var(--u)*440);height:calc(50vh - var(--u)*190 + 2px);transform-origin:50% 0;opacity:0;transform:translateX(-50%) scaleY(0);
  clip-path:polygon(33% 0,67% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,236,170,.5),rgba(255,210,104,.24) 55%,rgba(255,210,104,0))}
/* big wins: sun rays fan up from below (a soft shape that turns in steps) and tasselled ribbons fall */
.festoon{position:fixed;inset:0;z-index:31;pointer-events:none;overflow:hidden}
.sunfan{position:absolute;left:50%;bottom:-75vmax;width:150vmax;height:150vmax;margin-left:-75vmax;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.12) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0 22%,transparent 60%);mask:radial-gradient(circle,#000 0 22%,transparent 60%);animation:st-fan 2.2s steps(11,end) forwards}
.sunfan.t1{animation-duration:2.3s}.sunfan.t2{background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.15) 0 6deg,transparent 6deg 15deg)}
@keyframes st-fan{0%{opacity:0;transform:rotate(0) scale(.6)}18%{opacity:1}75%{opacity:1}100%{opacity:0;transform:rotate(22deg) scale(1)}}
.tassel{position:absolute;left:var(--x);top:-18vh;width:calc(26px*var(--s));height:calc(78px*var(--s));opacity:0;background:var(--c);
  -webkit-mask:var(--st-tassel) center/contain no-repeat;mask:var(--st-tassel) center/contain no-repeat;animation:st-tassel 2.8s cubic-bezier(.3,.1,.5,1) var(--d) forwards}
@keyframes st-tassel{0%{opacity:0;transform:translateY(0) rotate(var(--r))}10%{opacity:1}100%{opacity:0;transform:translateY(122vh) rotate(calc(var(--r)*-1))}}

/* ---- reduced motion: no blink, no slide, no turning rays, a still scene; the sun window only cross-fades (skin.js) */
body.still .spin.busy .rays,body.still .spin.kick svg,body.still .crown.pulse .crays,body.still .fsbar .fsm.pulse .crays,
body.still .scene .forest .mist,body.still .scene .festival .pennants{animation:none}
body.still .cells-board .cell.pop .face{transform:none}
body.still .festoon,body.still .sunwin .beam{display:none}
@media (prefers-reduced-motion:reduce){
  .spin.busy .rays,.spin.kick svg,.crown.pulse .crays,.fsbar .fsm.pulse .crays,.scene .forest .mist,.scene .festival .pennants{animation:none!important}
  .cells-board .cell.land .face{animation:cs-fade .12s linear}
  .cells-board .cell.pop .face{transform:none}
  .festoon,.sunwin .beam{display:none}
}

/* ---- phones: a slimmer pyramid (4 px side padding) and a smaller crown, so six cells of ≈ 53 px fit in 344 px */
@media (max-width:860px),(max-aspect-ratio:4/5){
  :root{--crown:clamp(34px,calc(var(--cell)*.74),60px);--st:clamp(4px,calc(var(--cell)*.08),8px)}
  .frame{padding:calc(var(--crown) + 4px) 4px 6px;gap:4px}
  body[data-variant="clean"] .frame{padding:calc(var(--crown) + 2px) 4px 6px}
  .zig .band{height:calc(var(--crown)*.45)}
  body.fs .fsbar{width:min(100%,calc(var(--cell)*6 + 8px))}
  .hud::before{top:-8px;height:8px}
}
/* the whole title between the buttons on phones: about 9.9 × its size wide without spacing; the room between the
   buttons is the width − 220 px (− 196 px at 400 px and less) */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .logo h1{font-size:clamp(14px,4.4vw,34px);letter-spacing:0}
}
/* phones: the two tablets' long slab names ("Buy Zenith Spins", "Golden Offering") wrapped to three lines beside the
   price; stacked (name over price or switch) and a size smaller, each stays on one line and the row is ~30 px lower */
@media (max-width:430px){
  .side.left .tablet{flex-direction:column;gap:3px;padding:7px 10px}
  .side .tablet .th{font-size:15px;line-height:1.15}
  .side .tablet .price{font-size:18px}
}
@media (max-width:400px){
  .logo h1{font-size:min(4.4vw,calc((100vw - 196px) / 10.2))}
  .fsbar{gap:6px;padding:3px 6px;font-size:13px}
  .fsbar .kept img,.fsbar .kept .empty{width:17px;height:17px}
  .message{font-size:14px}
}
/* a narrow feature bar (small landscape boards, 320 px phones): the kept stones' slots shrink, the bar's padding and
   the pyramid's foot get thinner so the pyramid clears the plinth */
@media (max-width:340px),(max-height:420px){
  .fsbar .kept img,.fsbar .kept .empty{width:13px;height:13px}
  .fsbar .kept .slots{gap:2px}
}
@media (max-height:600px){
  body.fs .frame{padding-bottom:2px}
  .fsbar{padding:1px 6px}
}