/* Jungle Temple skin on the shared game shell: moss-grown carved stone and painted clay with vine overlays. Ruined
   arches under the canopy (or a waterfall gorge), a cradle of strangler-fig roots round a moss-carpet window (three
   growth stages, set by skin.js on .cradle[data-growth]), the Idol Charge totem beside the grid (the shared meter
   presenter; a bar above the grid in portrait), an arched stone tablet as the spin button, a stone slab as the bottom
   bar, and an inner sanctum with glowing eyes for the Sanctum Spins. Theme tokens (--leaf, --night, --amber, --moss*,
   --stone*, --root*, --canopy, --mist) come from skin.js themeMap; light text always sits on the dark jungle night or on
   the stone slab, which is --stone or darker wherever text sits (--stone-hi is only its 1 px top edge).
   One light for everything (art bible §5.1): a warm shaft of sun (--sun) from the upper left through a gap in the
   canopy — the rays, the sunlit lips of the ruins and roots, the bevel of the frame, the spin tablet and the symbols. */
:root{
  --leaf:#B7D348; --night:#10261A; --amber:#F2A541; --leaf-lo:#52601F; --leaf-ink:#D1E287;
  --moss:#4E6A2A; --moss-lo:#132F17; --stone:#4A5244; --stone-hi:#6A6F5E; --stone-lo:#252F25; --root:#57452F; --root-hi:#7A6244;
  --canopy:#203A1F; --mist:#3A4B3C; --sun:color-mix(in srgb,var(--amber) 38%,#FFF4CC); --jt-grain:none;
  --ink:#F2F4E6; --muted:#CBD5BB;
  --display:"Piedra",Georgia,serif; --ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:12px; --radius-sm:8px; --line:color-mix(in srgb,var(--leaf) 32%,transparent);
  --panel-bg:linear-gradient(180deg,color-mix(in srgb,var(--night) 86%,#2E4A20),color-mix(in srgb,var(--night) 92%,#000)); --panel-border:color-mix(in srgb,var(--leaf) 40%,var(--stone));
  --slab:var(--jt-grain) 0 0/160px,linear-gradient(172deg,color-mix(in srgb,var(--stone) 96%,var(--sun) 4%),var(--stone) 42%,color-mix(in srgb,var(--stone-lo) 80%,var(--stone)));
  --slab-edge:inset 0 1px 0 color-mix(in srgb,var(--stone-hi) 70%,var(--sun) 20%),inset 0 -2px 0 rgba(0,0,0,.25);
  --hud-bg:var(--slab);
  --btn-bg:linear-gradient(180deg,var(--primary-hi),var(--primary) 72%,color-mix(in srgb,var(--primary) 82%,#000)); --btn-ink:var(--night);
  --ibtn-bg:linear-gradient(180deg,var(--stone),var(--stone-lo)); --ibtn-ink:var(--leaf-ink);
  /* the cells board: a sunken bed of moss (velvet grain, sun falling in from the upper left) with faint seams; the
     symbols fill 76–86 % of each cell; clusters ringed with a thin vine */
  --window-bg:var(--jt-grain) 0 0/160px,radial-gradient(110% 70% at 26% 0%,color-mix(in srgb,var(--sun) 10%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--moss-lo) 84%,var(--leaf) 6%),var(--moss-lo) 52%,color-mix(in srgb,var(--moss-lo) 72%,#000));
  --window-radius:14px; --reel-sep:rgba(0,0,0,.16); --sym-size:100%; --cluster-radius:22%;
  --win-ring:color-mix(in srgb,var(--leaf) 60%,transparent); --win-glow:color-mix(in srgb,var(--leaf) 70%,transparent); --hot-ring:var(--amber); --land-ring:var(--amber);
  --tease-glow:color-mix(in srgb,var(--amber) 80%,transparent); --fs-ring:color-mix(in srgb,var(--amber) 55%,transparent);
  --badge-bg:color-mix(in srgb,var(--night) 88%,#000); --badge-ink:var(--ink); --float-ink:#FFF7DA; --float-stroke:#132410;
  --focus:var(--amber); --win-glow-ui:var(--leaf);
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene, back to front (art bible §5.5): sky with the sun's glow and ground mist → light shafts (opacity breathes
   slowly) → misty far forest (light, low contrast) → the waterfall gorge (variant) → stone ruins lit from the upper left
   with a sunlit lip on their edges (the same mask minus itself shifted down-right) → lianas (the only thing that sways)
   → dark corner fronds, back-lit near the sun → the sanctum of the Sanctum Spins → vignette. Silhouettes are masks from
   skin.js; every animation is transform or opacity. ---- */
.scene .forest,.scene .ruins,.scene .vines,.scene .canopy,.scene .falls .cliffs,.scene .sanctum .walls,.scene .sanctum .eyes{-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 .sky{background:radial-gradient(52% 40% at 24% -4%,color-mix(in srgb,var(--sun) 40%,transparent),transparent 72%),
  radial-gradient(56% 46% at 50% 46%,color-mix(in srgb,var(--leaf) 13%,transparent),transparent 78%),
  linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--mist) 42%,transparent) 70%,transparent 90%),
  linear-gradient(180deg,color-mix(in srgb,var(--mist) 50%,var(--canopy)) 0%,var(--canopy) 34%,var(--night) 78%,color-mix(in srgb,var(--night) 72%,#000))}
.scene .rays{background:linear-gradient(64deg,transparent 31%,color-mix(in srgb,var(--sun) 22%,transparent) 36%,transparent 41.5%),
  linear-gradient(60deg,transparent 42%,color-mix(in srgb,var(--sun) 15%,transparent) 45.5%,transparent 50%),
  linear-gradient(67deg,transparent 50%,color-mix(in srgb,var(--sun) 12%,transparent) 55%,transparent 61%),
  linear-gradient(62deg,transparent 60%,color-mix(in srgb,var(--sun) 9%,transparent) 63.5%,transparent 68%);
  -webkit-mask-image:radial-gradient(105% 100% at 22% 0%,#000 26%,transparent 88%);mask-image:radial-gradient(105% 100% at 22% 0%,#000 26%,transparent 88%);animation:jt-rays 14s ease-in-out infinite alternate}
.scene .forest{opacity:.5;background:linear-gradient(180deg,color-mix(in srgb,var(--mist) 62%,var(--canopy)),color-mix(in srgb,var(--mist) 48%,var(--night)) 62%,color-mix(in srgb,var(--mist) 58%,var(--canopy)));-webkit-mask-image:var(--jt-forest);mask-image:var(--jt-forest)}
.scene .ruins{background:var(--jt-grain) 0 0/160px,linear-gradient(166deg,color-mix(in srgb,var(--stone) 80%,var(--sun) 10%) 0%,color-mix(in srgb,var(--stone) 70%,var(--night)) 34%,color-mix(in srgb,var(--stone-lo) 60%,#000) 80%);opacity:.78;-webkit-mask-image:var(--jt-ruins);mask-image:var(--jt-ruins);transition:opacity .8s}
.scene .ruins::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--moss) 55%,transparent) 84%,color-mix(in srgb,var(--night) 60%,transparent))}
.scene .ruins-lip{background:color-mix(in srgb,var(--sun) 66%,var(--stone-hi));opacity:.55;-webkit-mask-image:var(--jt-ruins),var(--jt-ruins);mask-image:var(--jt-ruins),var(--jt-ruins);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center bottom,calc(50% + 3px) calc(100% + 4px);mask-position:center bottom,calc(50% + 3px) calc(100% + 4px);
  -webkit-mask-composite:source-out;mask-composite:subtract;transition:opacity .8s}
.scene .vines{background:color-mix(in srgb,var(--night) 58%,#000);-webkit-mask-image:var(--jt-vines);mask-image:var(--jt-vines);-webkit-mask-position:center top;mask-position:center top;transform-origin:50% 0;animation:jt-sway 11s ease-in-out infinite alternate}
.scene .canopy{background:radial-gradient(34% 40% at 16% 0%,color-mix(in srgb,var(--sun) 16%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--night) 34%,#000),color-mix(in srgb,var(--night) 60%,var(--moss) 10%));-webkit-mask-image:var(--jt-canopy);mask-image:var(--jt-canopy);-webkit-mask-position:center top;mask-position:center top}
.scene .falls{opacity:0;transition:opacity .8s}
.scene .falls>*{position:absolute;inset:0}
.scene .falls .cliffs{background:var(--jt-grain) 0 0/160px,linear-gradient(160deg,color-mix(in srgb,var(--stone) 80%,var(--sun) 8%),color-mix(in srgb,var(--stone-lo) 80%,#000) 70%);-webkit-mask-image:var(--jt-cliffs);mask-image:var(--jt-cliffs)}
.scene .falls .water{left:43%;right:43%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.scene .falls .water b{position:absolute;left:0;right:0;top:-96px;height:calc(100% + 96px);background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--mist) 30%,#EAF6F0) 0 10px,color-mix(in srgb,var(--mist) 70%,#9FC9C4) 10px 30px,color-mix(in srgb,var(--mist) 45%,#DDEFE8) 30px 48px);opacity:.5}
.scene .falls .mist{top:auto;height:34%;background:radial-gradient(55% 75% at 50% 100%,color-mix(in srgb,var(--mist) 60%,#fff) 0%,transparent 70%);opacity:.4}
body.bg-waterfall .scene .falls{opacity:1}
body.bg-waterfall .scene .falls .water b{animation:jt-fall 1.8s linear infinite} /* the water runs only while it shows */
body.bg-waterfall .scene .ruins,body.bg-waterfall .scene .ruins-lip{opacity:0}
.scene .sanctum{opacity:0;transition:opacity .6s;background:radial-gradient(60% 50% at 50% 55%,color-mix(in srgb,var(--night) 70%,var(--amber) 9%),color-mix(in srgb,var(--night) 60%,#000) 75%)}
.scene .sanctum>*{position:absolute;inset:0}
.scene .sanctum .walls{background:var(--jt-grain) 0 0/160px,linear-gradient(180deg,color-mix(in srgb,var(--stone) 55%,#000),color-mix(in srgb,var(--stone-lo) 50%,#000));-webkit-mask-image:var(--jt-sanctum);mask-image:var(--jt-sanctum)}
.scene .sanctum .eyes{background:var(--amber);opacity:.35}
.scene .sanctum .e1{-webkit-mask-image:var(--jt-eyes1);mask-image:var(--jt-eyes1)}
.scene .sanctum .e2{-webkit-mask-image:var(--jt-eyes2);mask-image:var(--jt-eyes2)}
.scene .sanctum .e3{-webkit-mask-image:var(--jt-eyes3);mask-image:var(--jt-eyes3);background:var(--leaf)}
body.fs .scene .sanctum{opacity:1}
/* the eyes glow only in the Sanctum Spins (the sanctum is hidden otherwise), three sets in turn */
body.fs .scene .sanctum .eyes{animation:jt-eyes 6s ease-in-out infinite alternate}
body.fs .scene .sanctum .e2{animation-delay:-2s}
body.fs .scene .sanctum .e3{animation-delay:-4s}
body.fs .scene .rays{opacity:.35}
.scene .haze{background:radial-gradient(ellipse 78% 72% at 50% 44%,transparent 46%,rgba(3,9,5,.52) 100%),linear-gradient(180deg,transparent 72%,rgba(3,9,5,.32))}
@keyframes jt-sway{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}
@keyframes jt-fall{from{transform:translateY(0)}to{transform:translateY(48px)}}
@keyframes jt-eyes{from{opacity:.22}to{opacity:.6}}
@keyframes jt-rays{from{opacity:.7}to{opacity:1}}

/* ---- title and round buttons */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.03em;color:color-mix(in srgb,var(--leaf) 64%,#FFF6D2);
  text-shadow:0 1px 0 color-mix(in srgb,var(--leaf) 45%,#000),0 2px 0 color-mix(in srgb,var(--night) 55%,#000),0 4px 8px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--sun) 24%,transparent)}
.ibtn{border:1px solid color-mix(in srgb,var(--stone-lo) 70%,#000);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 1px 0 color-mix(in srgb,var(--sun) 22%,transparent)}
.ibtn:hover{border-color:var(--leaf)}

/* ---- the frame: a carved stone bed (bevel lit from the upper left: lit top and left faces, a shaded right face) that
   stands clear of the misty scene (a dark edge, and a soft darkening round its lit upper left), in a cradle of
   strangler-fig roots that grows with the Idol Charge in three static stages (opacity fades only). Each stage is a
   tapering root mask with a sunlit lip (the mask minus itself shifted down-right); one soft shadow under the tangle (a
   static drop-shadow on its wrapper). Variant "clean": the stone bed alone. Padding in px: the board measures it. ---- */
.frame{padding:16px 18px 10px;gap:6px}
.cradle{position:absolute;inset:0;z-index:0;pointer-events:none}
.cradle>i,.cradle .rw>i{position:absolute;display:block}
.cradle .bed{inset:4px;border-radius:22px 22px 30px 30px;background:linear-gradient(90deg,color-mix(in srgb,var(--sun) 15%,transparent) 0 9px,transparent 16px),linear-gradient(180deg,color-mix(in srgb,var(--sun) 12%,transparent) 0 8px,transparent 15px),linear-gradient(270deg,rgba(0,0,0,.3) 0 9px,transparent 16px),var(--jt-grain) 0 0/160px,linear-gradient(162deg,color-mix(in srgb,var(--stone) 72%,var(--sun) 6%),color-mix(in srgb,var(--stone-lo) 70%,#000) 58%,color-mix(in srgb,var(--stone-lo) 50%,#000));
  box-shadow:0 0 0 1.5px rgba(4,10,6,.72),-20px -16px 56px 6px rgba(3,9,5,.52),0 22px 46px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4),inset 1.5px 2px 0 color-mix(in srgb,var(--sun) 32%,transparent),inset -2.5px 0 0 color-mix(in srgb,var(--leaf) 30%,var(--stone-hi)),inset -2px -3px 0 rgba(0,0,0,.4)}
.cradle .rw{inset:-6px -8px -8px;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.6))}
.cradle .roots,.cradle .rlip{inset:0;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat;transition:opacity .5s}
.cradle .roots{background:linear-gradient(104deg,var(--root-hi),var(--root) 38%,color-mix(in srgb,var(--root) 72%,#000))}
.cradle .rlip{background:color-mix(in srgb,var(--sun) 50%,var(--root-hi));opacity:.8;-webkit-mask-image:var(--m),var(--m);mask-image:var(--m),var(--m);
  -webkit-mask-position:0 0,2px 2.5px;mask-position:0 0,2px 2.5px;-webkit-mask-composite:source-out;mask-composite:subtract}
.cradle .g0{--m:var(--jt-roots0)}.cradle .g1{--m:var(--jt-roots1);opacity:0}.cradle .g2{--m:var(--jt-roots2);opacity:0}
.cradle .leaves{inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--leaf) 80%,var(--sun)),var(--leaf-lo));-webkit-mask:var(--jt-leaves) 0 0/100% 100% no-repeat;mask:var(--jt-leaves) 0 0/100% 100% no-repeat;opacity:0;transition:opacity .5s}
.cradle[data-growth="1"] .g1,.cradle[data-growth="2"] .g1,.cradle[data-growth="2"] .g2{opacity:1}
.cradle[data-growth="1"] .rlip.g1,.cradle[data-growth="2"] .rlip.g1,.cradle[data-growth="2"] .rlip.g2{opacity:.8}
.cradle[data-growth="2"] .leaves{opacity:.9}
.board,.message{position:relative;z-index:1}
body[data-variant="clean"] .cradle .rw{display:none}
body[data-variant="clean"] .cradle .bed{border-radius:18px}

/* ---- the grid: winning cells ringed with a vine; a sprouted Vine Wild grows up from the bottom of its cell ---- */
/* the moss bed is sunk into the stone: the frame's edge throws a shadow into it from the top, a lit lip at its foot */
.cells-board .cs-field{box-shadow:inset 0 16px 18px -8px rgba(0,0,0,.62),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -1px 0 color-mix(in srgb,var(--sun) 16%,transparent),inset 0 0 30px rgba(0,0,0,.35)}
.cells-board .cell.win .face::after{content:"";position:absolute;inset:1%;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--leaf) 75%,var(--sun)),var(--leaf-lo));-webkit-mask:var(--jt-vinering) center/100% 100% no-repeat;mask:var(--jt-vinering) center/100% 100% no-repeat}
.cells-board .cell.recode .sym.wild img{transform-origin:50% 100%;animation:jt-grow var(--cs-recode,.4s) cubic-bezier(.34,1.4,.64,1) both}
@keyframes jt-grow{0%{transform:translateY(12%) scale(.9);opacity:.3}100%{transform:none;opacity:1}}
/* the Idol Charge totem (present-meter.css): a carved stone post with an idol head on top, filled with green light up
   to its marks (amber notches); text on the dark plates in light ink */
.cells-board.pm-host{--pm-fill:var(--leaf-lo);--pm-fill-hi:var(--leaf);--pm-track:color-mix(in srgb,var(--night) 70%,#000);--pm-line:var(--stone-hi);
  --pm-plate:color-mix(in srgb,var(--night) 86%,#000);--pm-ink:var(--ink);--pm-mark:var(--amber);--pm-glow:var(--leaf);--pm-ante:color-mix(in srgb,var(--amber) 45%,transparent);
  --pm-sprout:var(--leaf);--pm-mult-bg:var(--amber);--pm-mult-ink:#1A1205;--pm-font:var(--ui)}
.pm-meter .pm-track{border-radius:calc(var(--cell)*.08);background:var(--pm-track) padding-box;box-shadow:inset 0 0 0 2px var(--stone-lo),inset 0 0 0 3.5px var(--stone-hi),0 3px 8px rgba(0,0,0,.5)}
.pm-meter .pm-cap svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.pm-meter .pm-num{box-shadow:inset 0 0 0 1px var(--stone-hi)}
.pm-meter .pm-name{font-family:var(--ui);font-weight:800;letter-spacing:.03em;color:var(--leaf-ink)}
.message{font-family:var(--ui);font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em;padding:2px 14px;border-radius:999px;background:color-mix(in srgb,var(--night) 82%,transparent);max-width:100%;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.message:empty{background:none}
.message b{color:var(--leaf-ink)}
.message .tag{color:var(--muted);font-weight:600}

/* ---- the Sanctum Spins bar: spin count, the Idol Charge (a small bar with its mark, the charge and the loops), won */
.fsbar{background:var(--slab);border:2px solid var(--stone-lo);color:var(--ink);font-family:var(--ui);gap:14px;padding:4px 14px;box-shadow:var(--slab-edge),0 4px 12px rgba(0,0,0,.45);white-space:nowrap}
.fsbar b{color:var(--leaf-ink)}
.fsbar .fsc{display:flex}
.fsbar .fsm{display:flex;align-items:center;gap:7px}
.fsbar .fsm-bar{position:relative;display:block;width:58px;height:10px;border-radius:5px;background:color-mix(in srgb,var(--night) 80%,#000);box-shadow:inset 0 0 0 1px var(--stone-hi);overflow:hidden}
.fsbar .fsm-bar::before{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--fill,0));background:linear-gradient(90deg,var(--leaf-lo),var(--leaf));transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.fsbar .fsm-bar::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--mark,.5)*100%);width:2px;margin-left:-1px;background:var(--amber)}
.fsbar .fsl{color:var(--muted);font-size:.92em}
.fsbar .fsl b{color:var(--ink)}

/* ---- the bottom bar: a carved stone slab with a moss fringe; balance, bet and win in light ink */
.hud{position:relative;border:2px solid var(--stone-lo);box-shadow:0 6px 18px rgba(0,0,0,.5),var(--slab-edge)}
.hud::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:2px;pointer-events:none;opacity:.75;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--moss) 75%,var(--leaf)) 18%,color-mix(in srgb,var(--moss) 85%,var(--leaf)) 62%,transparent)}
.meter span{color:var(--muted);font-family:var(--ui)}
.meter b{color:var(--ink);font-family:var(--ui);font-weight:800}.meter.win b{color:var(--leaf-ink)}
.meter small{color:var(--muted)}
.pm,.auto{background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--stone-hi) 85%,var(--sun) 10%),var(--stone) 52%,var(--stone-lo));color:var(--ink);border:1px solid color-mix(in srgb,var(--stone-lo) 70%,#000);box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 color-mix(in srgb,var(--sun) 20%,transparent)}
/* the spin button: an arched stone tablet with a carved sprout, lit from the upper left; its foot sits in shadow on a
   dark cushion of moss (a soft contact shadow above it), so the lower right stays the darkest part */
.spin{width:calc(var(--s)*.86);border-radius:50% 50% 14% 14%/42% 42% 10% 10%;color:var(--leaf-ink);
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--sun) 24%,transparent),transparent 44%),
    radial-gradient(64% 15% at 50% 100%,color-mix(in srgb,var(--moss-lo) 70%,#000) 0 46%,transparent 100%),
    radial-gradient(70% 22% at 52% 92%,rgba(0,0,0,.28),transparent 100%),var(--slab);
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.45),inset 2px 3px 0 color-mix(in srgb,var(--sun) 22%,transparent),0 0 0 1.5px color-mix(in srgb,var(--stone-lo) 70%,#000),0 0 18px color-mix(in srgb,var(--leaf) 28%,transparent),0 10px 18px rgba(0,0,0,.5)}
.spin svg{width:64%;height:64%;top:46%}
.spin.kick svg{animation:jt-sprout .5s cubic-bezier(.34,1.4,.64,1)}
@keyframes jt-sprout{0%{transform:translate(-50%,-50%) scale(.82)}100%{transform:translate(-50%,-50%) scale(1)}}
.side .tablet{background:var(--slab);border:2px solid var(--stone-lo);color:var(--ink);box-shadow:var(--slab-edge)}
.tablet .th{font-family:var(--display);font-weight:400;color:var(--leaf-ink);letter-spacing:.02em}
.tablet small{color:var(--muted)}
.tablet[aria-pressed="true"]{box-shadow:var(--slab-edge),0 0 0 2px var(--leaf),0 0 14px color-mix(in srgb,var(--leaf) 40%,transparent)}

/* ---- panels, paytable and overlays */
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.panel h3{color:var(--leaf-ink)}
.ovcard h2{font-weight:400;color:color-mix(in srgb,var(--leaf) 64%,#FFF6D2);text-shadow:0 2px 0 color-mix(in srgb,var(--night) 55%,#000),0 5px 14px rgba(0,0,0,.55)}
.btn{font-family:var(--display);font-weight:400;border:2px solid var(--stone-lo)}
/* pays to a fraction of a cent are long ("$235.5775"): two pay columns need ≈ 350 px per card, so two cards a row on
   a desktop panel and one on a phone (one pay column below 360 px) */
.ptgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr))}
.ptc{background:color-mix(in srgb,var(--moss-lo) 60%,transparent);align-items:start}
.ptc .symbox,.special .symbox{border-radius:12px;background:var(--window-bg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--root) 80%,#000)}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.ptc .sym img,.special .sym img{position:absolute;inset:6%;width:88%;height:88%;pointer-events:none}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.special p{margin:0}
ul.bands{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:1px;font-size:13px}
ul.bands li{display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
ul.bands li span{color:var(--muted)}
ul.bands li b{font-weight:800}
.special ul.bands{max-width:260px;margin-top:8px}
/* smallest phones: one pay band per row so the nowrap "range  $amount" never overflows the paytable card */
@media (max-width:360px){ul.bands{grid-template-columns:1fr}}
.markmap{position:relative;height:42px;margin:8px 0 6px;max-width:420px}
.markmap .track{position:absolute;left:0;right:0;top:6px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--night) 75%,#000);box-shadow:inset 0 0 0 1px var(--stone-hi);overflow:hidden}
.markmap .part{position:absolute;left:0;top:0;bottom:0;width:calc(var(--to)*100%);background:linear-gradient(90deg,var(--leaf-lo),var(--leaf))}
.markmap .tick{position:absolute;top:22px;left:calc(var(--at)*100%);transform:translateX(-50%);font-weight:800;font-size:14px;color:var(--ink)}
.markmap .tick::before{content:"";position:absolute;left:50%;top:-18px;width:2px;height:14px;margin-left:-1px;background:var(--amber)}
.markmap .tick.end{transform:translateX(-100%)}.markmap .tick.end::before{left:auto;right:0}

/* ---- the gate into the Sanctum Spins: the sleeping idol carved into the temple wall (skin.js idolSVG; gradients
   there); skin.js pushes into its mouth and fades the dark. Colours of the flat parts, all from the theme tokens. */
.idolgate{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden;background:color-mix(in srgb,var(--night) 50%,#000)}
.idolgate.show{display:block}
.idolgate .idol{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;will-change:transform,opacity}
.idol .joint{fill:none;stroke:#000;stroke-opacity:.5;stroke-width:7}
.idol .jlit{fill:none;stroke:var(--sun);stroke-opacity:.09;stroke-width:3;transform:translate(2px,6px)}
.idol .edge{fill:var(--sun);opacity:.42}
.idol .gd{fill:#040805;opacity:.32}.idol .gl{fill:var(--sun);opacity:.3}
.idol .sface{fill:color-mix(in srgb,var(--stone-hi) 70%,var(--stone))}
.idol .lt{fill:var(--sun);opacity:.5}.idol .ll{fill:var(--sun);opacity:.26}.idol .dr{fill:#000;opacity:.34}.idol .db{fill:#000;opacity:.5}
.idol .cast{fill:#000;opacity:.36}
.idol .under{fill:#000;opacity:.5}
.idol .hole{fill:#040805;opacity:.85}
.idol .lips{fill:var(--sun);opacity:.32}
.idol .cuts{fill:#040805;opacity:.7}
.idol .moss{fill:url(#jtg-m)}
.idol .seam{fill:#040805;opacity:.5}
.idol .tip{fill:var(--sun);opacity:.5}
.idol .vein{fill:none;stroke:var(--sun);stroke-opacity:.35;stroke-width:3}
.idol .rlit{fill:color-mix(in srgb,var(--sun) 60%,var(--root-hi));opacity:.7}
.idolgate .maw{position:absolute;inset:0;background:#040805;opacity:0}

/* ---- big wins: seed pods drop, frogs leap (shapes that fade; never a light) */
.critters{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.critters .pod{position:absolute;left:var(--x);top:-8vh;width:calc(22px*var(--s));height:calc(33px*var(--s));opacity:0;background:linear-gradient(180deg,var(--amber),color-mix(in srgb,var(--amber) 55%,var(--root)));-webkit-mask:var(--jt-pod) center/contain no-repeat;mask:var(--jt-pod) center/contain no-repeat;animation:jt-pod 2.6s cubic-bezier(.4,.1,.6,1) var(--d) forwards}
.critters .frog{position:absolute;left:var(--x);bottom:-5vh;width:calc(46px*var(--s));height:calc(31px*var(--s));opacity:0;background:linear-gradient(180deg,var(--leaf),var(--leaf-lo));-webkit-mask:var(--jt-frog) center/contain no-repeat;mask:var(--jt-frog) center/contain no-repeat;animation:jt-leap 1.7s cubic-bezier(.3,.6,.5,1) var(--d) forwards}
@keyframes jt-pod{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),108vh) rotate(calc(var(--r) + 280deg))}}
@keyframes jt-leap{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}50%{transform:translate(calc(var(--dx)*.5),-42vh)}88%{opacity:1}100%{opacity:0;transform:translate(var(--dx),2vh)}}

/* ---- reduced motion: still vines, water and eyes, no sprouting bounce, no critters (shell.css caps the rest) */
body.still .scene .vines,body.still .scene .rays,body.still .scene .falls .water b,body.still .scene .sanctum .eyes,body.still .spin.kick svg,body.still .cells-board .cell.recode .sym.wild img{animation:none}
body.still .cradle .roots,body.still .cradle .rlip,body.still .cradle .leaves,body.still .fsbar .fsm-bar::before{transition-duration:.12s}
body.still .critters{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .vines,.scene .rays,.scene .falls .water b,.scene .sanctum .eyes,.spin.kick svg,.cells-board .cell.recode .sym.wild img{animation:none!important}
  .cradle .roots,.cradle .rlip,.cradle .leaves,.fsbar .fsm-bar::before{transition-duration:.12s}
  .critters{display:none}
}

/* ---- wide screens: the Idol Charge stands as a real totem left of the grid (wider than the shared default), its idol
   head clear of the loop plate; the frame's margin follows through the presenter's --pm-room-side default ---- */
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .cells-board.pm-host{--pm-w:max(26px,calc(var(--cell)*.42))}
  .pm-meter .pm-cap{margin-bottom:max(7px,calc(var(--cell)*.12))}
}

/* ---- phones and portrait (6×7 is the native layout): thin side padding so six columns of ≈ 50 px fit in 344 px. The
   cells board measures its cells from the board area alone, so the strip the Idol Charge bar needs above the grid (and,
   in the Sanctum Spins, the feature bar) is kept as the board area's top margin, and the column takes it back with a
   negative margin: the frame stays centred in the whole space. The ante tablet, which cannot change during the free
   spins, steps aside for them; skin.js re-measures the board when the free spins start and end. At 360×640 with the
   ante tablet: stage 433 px, board area 395 − 26 = 369 px → cells of 44 px (49 px without the tablet; 44 px in the
   Sanctum Spins: 433 − 26 − 36). ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  :root{--jt-room:26px;--jt-fsroom:36px}
  .scene .canopy,.scene .vines{-webkit-mask-size:150% auto;mask-size:150% auto}
  .scene .rays{-webkit-mask-image:radial-gradient(120% 60% at 10% 0%,#000 20%,transparent 80%);mask-image:radial-gradient(120% 60% at 10% 0%,#000 20%,transparent 80%)}
  .cells-board.pm-host{--pm-h:22px;--pm-gap:4px;--pm-room-top:var(--jt-room)}
  .cells-board.pm-auto .pm-mark[data-at="loop"]>span{right:3px}
  .frame{padding:10px 7px 6px;gap:4px}
  .cradle .bed{inset:2px;border-radius:16px 16px 22px 22px}
  .message{min-height:26px}
  .boardarea{margin-top:var(--jt-room)}
  .frame{margin-top:calc(-1*var(--jt-room))}
  body.fs .boardarea{margin-top:calc(var(--jt-room) + var(--jt-fsroom))}
  body.fs .fsbar{margin-top:calc(-1*(var(--jt-room) + var(--jt-fsroom)));min-height:28px}
  /* the feature bar: the spin and the win only — the Idol Charge bar right under it shows the charge, the loops and the
     extra vines; it never runs off the screen */
  .fsbar{gap:8px;padding:3px 10px;font-size:13px;max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center}
  .fsbar .fsc{display:none}
  body.fs .frame{margin-top:0}
  .side.left .tablet{padding:2px 12px}
  .side.left .tablet .th{font-size:15px}
  body.fs .side.left{display:none!important}
}
@media (max-width:400px){
  .logo h1{letter-spacing:0;font-size:clamp(17px,5.2vw,26px)}
  .fsbar{padding:3px 8px}
  .message{font-size:14px;padding:1px 10px}
}