/* Cider Hollow skin on the shared game shell: a reduction linocut on kraft paper (light theme), lit by one low autumn
   sun from the upper left. The carved sun over an orchard printed in hill bands with gouge rows (or the cider barn), a
   knotted bough frame with two apples round a woven wicker reel window sunk into it, the HUD as a crate column, a
   printed red apple spin button, and the Windfall Tree at dusk. Shadows fall down and to the right everywhere. The
   theme tokens (--kraft, --paper, --ink, --muted, --red, --red-ink, --plum, the scene and tree shades) come from skin.js
   themeMap; the defaults below are the Apple Kraft preset. Every text stands on paper, kraft or a light plank in its own
   ink (≥ 4.5:1 in all three presets). Animations move only transform and opacity; no filter on a cell. */
:root{
  --kraft:#E9DCC0; --paper:#F4EDDE; --paper-lo:#F0E7D3; --ink:#3B2416; --muted:#5A4434; --red:#AE3925; --red-ink:#9E3421; --plum:#6D3B7A; --demo-bg:#6D3B7A; --demo-ink:#F4EDDE;
  --primary:#9E3421; --primary-hi:#9E3421; --focus:#3B2416; --line:#93806A; --panel-border:#7D6852;
  --display:"Caveat Brush","Segoe Print","Bradley Hand",cursive; --ui:"Cabin","Trebuchet MS",system-ui,sans-serif;
  --radius:12px; --radius-sm:8px;
  --panel-bg:linear-gradient(180deg,#F4EDDE,#EFE6D3);
  --plank:#DCBE90; --plank-2:#E1C9A2;
  --hud-bg:repeating-linear-gradient(180deg,#DCBE90 0 38px,#A57E5A 38px 40px,#E1C9A2 40px 78px,#A57E5A 78px 80px);
  --ibtn-bg:#F4EDDE; --ibtn-ink:#3B2416;
  --btn-bg:linear-gradient(180deg,#B44937,#AE3925 55%,#8B2E1E); --btn-ink:#FFF8EC; --apple:#AE3925;
  --win-glow:#D39A3A; --shade:rgba(59,36,22,.35);
  --sky-top:#F3ECDC; --sky-low:#E9D7B4; --sun:#E9C98D; --sun-glow:#FAEED2; --vig:rgba(59,36,22,.26);
  --hill-far:#D5C2B5; --hill-mid:#E0C088; --hill-near:#A3A078; --tree-far:#BBAD98; --tree-near:#929267; --tree-lit:#BFB895; --trunk:#7A6047;
  --barn:#C7735C; --barn-cut:#7E6045; --dusk-top:#C6AAAE; --dusk-low:#E1C495; --big-tree:#9A8569;
  --window-paper:#F3EBDC; --wicker:#CC9C64; --wicker-2:#957148; --bough:#4F3420; --bough-hi:#77624F; --leaf:#5E7A3A; --leaf-2:#7E9A46;
  --crane:#D9B88D; --crane-dark:#9B806A;
  --window-radius:10px; --reel-sep:color-mix(in srgb,var(--wicker-2) 32%,transparent); --spin-blur:1px; --win-radius:10px;
  --veil-light:color-mix(in srgb,var(--sun-glow) 60%,transparent);
}
body{background:var(--kraft);color:var(--ink)}
/* ---- scene: the low sun and its glow, the orchard (default), the cider barn, the Windfall's dusk; static masks, only a
   few leaves drift. Atmospheric depth: the far band is pale and cool, each nearer band darker and warmer ---- */
.scene{background:linear-gradient(180deg,var(--sky-top),var(--sky-low) 64%)}
.scene .sky,.scene .orchard,.scene .barn,.scene .dusk{transition:opacity .8s var(--ease-std,ease)}
.scene .sky i,.scene .orchard i,.scene .barn i,.scene .dusk i{position:absolute;inset:0;display:block}
/* the light: a wide warm glow from the sun (upper left) that also lifts the ground behind the board */
.sky .glow{background:radial-gradient(circle at 17% 21%,var(--sun-glow) 0,color-mix(in srgb,var(--sun-glow) 55%,transparent) 14%,transparent 42%),
  radial-gradient(ellipse 58% 52% at 56% 46%,color-mix(in srgb,var(--sun-glow) 70%,transparent),transparent 72%)}
.scene .sky .sun{inset:auto;left:4%;top:11%;width:clamp(96px,19vmin,200px);aspect-ratio:1;background:var(--sun);
  -webkit-mask:var(--ch-sun) center/contain no-repeat;mask:var(--ch-sun) center/contain no-repeat}
.orchard .far{background:var(--hill-far);-webkit-mask:var(--ch-hills-far) center bottom/cover no-repeat;mask:var(--ch-hills-far) center bottom/cover no-repeat}
.orchard .trees{background:var(--tree-far);-webkit-mask:var(--ch-trees) center bottom/cover no-repeat;mask:var(--ch-trees) center bottom/cover no-repeat}
.orchard .mid{background:var(--hill-mid);-webkit-mask:var(--ch-hills-mid) center bottom/cover no-repeat;mask:var(--ch-hills-mid) center bottom/cover no-repeat}
.orchard .near{background:var(--hill-near);-webkit-mask:var(--ch-hills-near) center bottom/cover no-repeat;mask:var(--ch-hills-near) center bottom/cover no-repeat}
.orchard .trees-near{background:var(--tree-near);-webkit-mask:var(--ch-trees-near) center bottom/cover no-repeat;mask:var(--ch-trees-near) center bottom/cover no-repeat}
.orchard .trees-lit{background:var(--tree-lit);-webkit-mask:var(--ch-trees-lit) center bottom/cover no-repeat;mask:var(--ch-trees-lit) center bottom/cover no-repeat}
.scene .barn,.scene .dusk{opacity:0}
body.bg-cider-barn .scene .barn{opacity:1}body.bg-cider-barn .scene .orchard{opacity:0}
.barn .hills{background:var(--hill-near);-webkit-mask:var(--ch-hills-near) center bottom/cover no-repeat;mask:var(--ch-hills-near) center bottom/cover no-repeat}
.barn .shed{background:var(--barn);-webkit-mask:var(--ch-barn) center bottom/cover no-repeat;mask:var(--ch-barn) center bottom/cover no-repeat}
.barn .cut{background:var(--barn-cut);-webkit-mask:var(--ch-barn-cut) center bottom/cover no-repeat;mask:var(--ch-barn-cut) center bottom/cover no-repeat}
.scene .dusk{background:linear-gradient(180deg,var(--dusk-top),var(--dusk-low) 70%,var(--sky-low))}
.dusk .tree{background:var(--big-tree);opacity:.55;-webkit-mask:var(--ch-big-tree) center bottom/cover no-repeat;mask:var(--ch-big-tree) center bottom/cover no-repeat}
.dusk .bank{background:var(--hill-near);-webkit-mask:var(--ch-bank) center bottom/cover no-repeat;mask:var(--ch-bank) center bottom/cover no-repeat}
body.fs .scene .dusk{opacity:1}
body.fs .scene .orchard,body.fs .scene .barn,body.fs .scene .sky .sun{opacity:0}
.scene .leaves i{position:absolute;inset:auto;left:var(--x);top:-6%;width:14px;height:10px;border-radius:0 80% 0 80%;background:var(--red);opacity:.45;
  animation:ch-leaf var(--t) linear var(--d) infinite}
.scene .leaves i:nth-child(3n){background:#D39A3A}.scene .leaves i:nth-child(3n+1){background:var(--plum);opacity:.3}
@keyframes ch-leaf{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(6vw,55vh) rotate(200deg)}100%{transform:translate(-2vw,112vh) rotate(380deg)}}
/* the corners fall away into shadow; one static grain layer for the paper (never on the cells) */
.scene .vig{background:radial-gradient(ellipse 75% 70% at 52% 48%,transparent 58%,var(--vig) 100%)}
.scene .grain{opacity:.07;mix-blend-mode:multiply;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 160px}
/* ---- title, buttons, tags, status screens; the shell's governed flash (big wins): a faint warm tint, never white ---- */
.logo h1{font-weight:400;letter-spacing:.01em;color:var(--red-ink);text-shadow:1.5px 1.5px 0 color-mix(in srgb,var(--ink) 20%,transparent)}
.ibtn{border-color:var(--line);box-shadow:1px 2px 0 var(--shade)}.ibtn:hover{border-color:var(--ink)}
.demo{background:var(--demo-bg);color:var(--demo-ink)}
.auto span{background:var(--demo-bg);color:var(--demo-ink)}
.screen{background:var(--kraft);color:var(--ink)}.screen h2{color:var(--red-ink);font-family:var(--display);font-weight:400}
.toast{background:var(--paper);border-color:var(--line);color:var(--ink)}
.spinner{border-color:color-mix(in srgb,var(--ink) 20%,transparent);border-top-color:var(--red)}
.flash{background:radial-gradient(circle at 50% 45%,rgba(255,236,200,.14),rgba(255,236,200,.04) 45%,transparent 75%)}
.overlay{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--paper) 88%,transparent),color-mix(in srgb,var(--kraft) 96%,#000) 78%)}
.ovcard h2{color:var(--red-ink);font-weight:400;text-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 16%,transparent)}.ovcard p{color:var(--muted)}.ovamt{color:var(--ink)}
.btn{box-shadow:2px 4px 0 color-mix(in srgb,var(--red) 50%,#000),0 8px 18px var(--shade);font-weight:400}
.btn.ghost{box-shadow:0 0 0 1.5px var(--line)}
.panel{box-shadow:0 24px 70px var(--shade)}
.panel h2,.panel h3{font-weight:400}
.sheet{background:rgba(40,24,14,.55)}
/* ---- the bough frame round the wicker window (a stacking context: the boughs sit behind the board). Each corner is
   drawn for its own side, so its shadow falls down and to the right like everything else ---- */
.frame{isolation:isolate;padding:min(calc(var(--cell)*.2),20px) min(calc(var(--cell)*.18),18px) min(calc(var(--cell)*.12),12px)}
.bough{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bough .rail{position:absolute;display:block;border-radius:999px;box-shadow:2px 2px 0 var(--shade);
  background:repeating-linear-gradient(90deg,transparent 0 11px,color-mix(in srgb,var(--bough-hi) 55%,transparent) 11px 12px,transparent 12px 27px,color-mix(in srgb,var(--bough) 60%,#000) 27px 29px,transparent 29px 41px),
    linear-gradient(180deg,var(--bough-hi),var(--bough) 42%,color-mix(in srgb,var(--bough) 78%,#000))}
.bough .rail.t{left:6%;right:4%;top:2px;height:max(7px,calc(var(--cell)*.09));transform:rotate(-.6deg)}
.bough .rail.b{left:3%;right:7%;bottom:calc(min(calc(var(--cell)*.12),12px) - 4px);height:max(6px,calc(var(--cell)*.075));transform:rotate(.5deg)}
.bough .rail.l,.bough .rail.r{width:max(7px,calc(var(--cell)*.085));
  background:repeating-linear-gradient(180deg,transparent 0 13px,color-mix(in srgb,var(--bough-hi) 55%,transparent) 13px 14px,transparent 14px 31px,color-mix(in srgb,var(--bough) 60%,#000) 31px 33px,transparent 33px 45px),
    linear-gradient(90deg,var(--bough-hi),var(--bough) 42%,color-mix(in srgb,var(--bough) 78%,#000))}
.bough .rail.l{top:8%;bottom:6%;left:1px}
.bough .rail.r{top:5%;bottom:9%;right:1px}
.bough .corner{position:absolute;width:max(34px,calc(var(--cell)*.55));aspect-ratio:1}
.bough .corner svg{display:block;width:100%;height:100%;overflow:visible}
.bough .corner.tl{left:-4%;top:-5%}
.bough .corner.tr{right:-4%;top:-5%}
.bough .corner.bl{left:-4%;bottom:-2%}
.bough .corner.br{right:-4%;bottom:-2%}
.bf-limb{fill:none;stroke:var(--bough);stroke-width:9;stroke-linecap:round}.bf-limb.thin{stroke-width:5}
.bf-sh .bf-limb{stroke:var(--shade)}.bf-sh circle{fill:var(--shade)}
.bf-bark{fill:none;stroke:var(--bough-hi);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:9 7 3 11;opacity:.8}
.bf-knot{fill:var(--bough);stroke:var(--bough-hi);stroke-width:2.5}.bf-knot-in{fill:none;stroke:var(--bough-hi);stroke-width:2}
.bf-leaf{fill:var(--leaf);stroke:color-mix(in srgb,var(--leaf) 55%,#000);stroke-width:1.2}.bf-leaf.b{fill:var(--leaf-2)}
.bf-vein{fill:none;stroke:color-mix(in srgb,var(--leaf) 50%,#000);stroke-width:1.1;stroke-linecap:round;opacity:.7}
.bough .fruit{position:absolute;width:max(22px,calc(var(--cell)*.32));aspect-ratio:1}
.bough .fruit img{display:block;width:100%;height:100%}
.bough .fruit.a1{left:22%;top:calc(max(22px,calc(var(--cell)*.32)) * -.45)}
.bough .fruit.a2{right:16%;top:calc(max(22px,calc(var(--cell)*.32)) * -.38);transform:rotate(12deg)}
body[data-variant="clean"] .bough .rail,body[data-variant="clean"] .bough .corner,body[data-variant="clean"] .bough .fruit{display:none}
/* ---- the woven wicker reel window, sunk into the frame (the sun throws the rim's shadow into it), cream paper cells ---- */
.reels-board .window{border:max(6px,calc(var(--cell)*.07)) solid transparent;
  background:linear-gradient(var(--window-paper),var(--window-paper)) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 5L5 0M5 5L10 0M-5 5L0 0M0 5L5 10M5 5L10 10M-5 5L0 10' stroke='%23000' stroke-opacity='.38' stroke-width='1.3'/%3E%3Cpath d='M1.7 5L6.7 0M6.7 5L11.7 0M-3.3 5L1.7 0M1.7 5L6.7 10M6.7 5L11.7 10M-3.3 5L1.7 10' stroke='%23fff' stroke-opacity='.28' stroke-width='.8'/%3E%3Cpath d='M0 .3H10M0 5H10' stroke='%23000' stroke-opacity='.22' stroke-width='.6'/%3E%3C/svg%3E") 0 0/10px 10px border-box,
    linear-gradient(135deg,color-mix(in srgb,var(--wicker) 82%,#fff),var(--wicker) 40%,color-mix(in srgb,var(--wicker) 80%,#000)) border-box;
  box-shadow:inset 0 14px 16px -10px rgba(59,36,22,.42),inset 0 -1px 0 rgba(255,255,255,.55),2px 3px 0 var(--shade),0 10px 22px var(--shade)}
.reels-board .cell::before{content:"";position:absolute;inset:4%;border-radius:8px;background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.5),transparent 68%);pointer-events:none}
.reels-board .reel.tease{box-shadow:inset 0 0 0 3px var(--wicker),inset 0 0 24px color-mix(in srgb,var(--plum) 55%,transparent)}
/* the rest step back into the shade: a little fainter and under a thin wash of the key ink (no filter, so the inks stay
   true and the paper does not bleach them) */
.reels-board .cell.dim .sym{filter:none;opacity:.7}
.reels-board .cell.dim::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 15%,transparent);pointer-events:none;animation:ch-dim var(--t-base,220ms) var(--ease-std,ease) both}
@keyframes ch-dim{from{opacity:0}}
/* a win: the shell's breathing symbol inside a red-ink rule with the sun's warmth behind it (static, never a filter) */
.reels-board .cell.win::before{background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--sun-glow) 85%,#fff),color-mix(in srgb,var(--sun) 30%,transparent) 62%,transparent 74%)}
.reels-board .cell.win::after{inset:4%;border-color:var(--red-ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 85%,transparent),1.5px 2px 0 2px var(--shade),inset 0 0 14px color-mix(in srgb,var(--win-glow) 38%,transparent)}
/* gravity-squash: a landed symbol drops in and gives a little as it settles (≤ 2 %, never a cartoon squash) */
.reels-board .cell.landed .sym{animation:ch-land .26s cubic-bezier(.3,0,.6,1)}
@keyframes ch-land{0%{transform:translateY(-6%)}55%{transform:translateY(2%) scale(1.015,.985)}100%{transform:none}}
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ptc .symbox{border-radius:10px;background:var(--window-paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.ptc .sym{position:absolute;inset:6%}
.ptc{background:color-mix(in srgb,var(--paper) 70%,transparent)}
.ptc p{margin:0;font-size:15px}
/* ---- the message: a paper slip under the reels ---- */
.message{padding:2px 14px;border-radius:4px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),2px 2px 0 var(--shade)}
.message:empty{background:none;box-shadow:none}
.message b,.message.hot b{color:var(--red-ink)}
/* ---- HUD: a crate column (wide screens) / the plank bar (phones) ---- */
.hud{border:2px solid color-mix(in srgb,var(--bough) 70%,transparent);border-radius:6px;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--plank) 60%,transparent),2px 3px 0 var(--shade),0 8px 18px var(--shade)}
.meter span,.meter small{color:var(--muted)}
.meter b{color:var(--ink)}.meter.win b{color:var(--red-ink)}
.hud .meter.win.at-zero b{color:var(--muted)}
.pm{border-color:var(--line)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-side-column>.hud{position:relative;padding:26px 16px 22px}
  /* the crate's corner posts */
  .hud-side-column>.hud::before,.hud-side-column>.hud::after{content:"";position:absolute;top:-2px;bottom:-2px;width:9px;background:linear-gradient(90deg,var(--bough-hi),var(--bough));border-radius:2px}
  .hud-side-column>.hud::before{left:-2px}.hud-side-column>.hud::after{right:-2px}
  .hud-side-column .meter{padding:4px 8px;border-radius:4px;background:color-mix(in srgb,var(--paper) 72%,transparent)}
  .hud-side-column .betctl .meter{background:color-mix(in srgb,var(--paper) 72%,transparent)}
}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .hud{background:linear-gradient(180deg,var(--plank-2),var(--plank))}
  /* phones: the sun stands in the sky between the header and the frame, its lower edge behind the bough */
  .scene .sky .sun{left:3%;top:6.5%;width:clamp(84px,26vw,130px)}
  .sky .glow{background:radial-gradient(circle at 17% 13%,var(--sun-glow) 0,color-mix(in srgb,var(--sun-glow) 55%,transparent) 16%,transparent 46%),
    radial-gradient(ellipse 70% 45% at 50% 42%,color-mix(in srgb,var(--sun-glow) 70%,transparent),transparent 72%)}
}
/* short phones: no sky is left between the header and the frame, so the carved sun would only show stray rays behind the
   buttons; it steps out and its glow (still centred at the upper left) keeps the light's direction. The top corner forks
   sit a little lower, their knots on the rail, so their limbs stay clear of the header buttons */
@media (max-width:860px) and (max-height:720px) and (orientation:portrait){
  .scene .sky .sun{display:none}
  .bough .corner.tl,.bough .corner.tr{top:-1%}
}
/* ---- the spin button: a printed red apple (key block, reduction shadow, lit shoulder, gouge cuts), its leaf sways ---- */
.spin{background:none;box-shadow:none;border-radius:50%}
.spin svg{width:100%;height:100%;overflow:visible}
.spin.kick svg{animation:ch-kick .26s cubic-bezier(.3,0,.6,1)}
@keyframes ch-kick{40%{transform:translate(-50%,-50%) scale(1.03,.96)}}
.sa-shadow{fill:var(--shade)}
.sa-key{fill:color-mix(in srgb,var(--apple) 30%,#1E0F08)}
.sa-body{fill:var(--apple)}
.sa-dark{fill:color-mix(in srgb,var(--apple) 64%,#2A0E06)}
.sa-lit{fill:color-mix(in srgb,var(--apple) 74%,#FFE0C2)}
.sa-cut{fill:#FFF8EC;opacity:.85}
.sa-stem{fill:none;stroke:#3B2416;stroke-width:4;stroke-linecap:round}
.sa-leaf{transform-origin:55px 17px;animation:ch-sway 2.6s ease-in-out infinite alternate}
.sa-leaf path{fill:var(--leaf);stroke:color-mix(in srgb,var(--leaf) 45%,#000);stroke-width:1.6;stroke-linejoin:round}.sa-leaf .sa-vein{fill:none;stroke-width:1.4}
@keyframes ch-sway{from{transform:rotate(-8deg)}to{transform:rotate(9deg)}}
.sa-turn path{fill:none;stroke:#FFF8EC;stroke-width:6;stroke-linecap:round}.sa-turn .sa-head{fill:#FFF8EC;stroke:none}
.spin:hover .sa-lit{fill:color-mix(in srgb,var(--apple) 66%,#FFE0C2)}
.spin.busy .sa-leaf,.spin:disabled .sa-leaf{animation:none}
.spin:disabled .sa-turn{opacity:.6}
.spin:focus-visible{outline-color:var(--ink)}
/* ---- the Windfall bar: one apple per award; a fallen one shows its basket's value ---- */
.fsbar{flex-wrap:wrap;justify-content:center;gap:12px;background:var(--paper);border:2px solid var(--line);border-radius:6px;color:var(--ink);box-shadow:2px 3px 0 var(--shade)}
.fsbar b{color:var(--red-ink)}
.fsbar .apl{font-family:var(--display);font-size:1.15em}
.fsbar .aps{display:flex;gap:5px;align-items:center}
.fsbar .ap{position:relative;display:grid;place-items:center;min-width:24px;height:24px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--apple) 70%,#FFE0C2) 0 22%,var(--apple) 23% 60%,color-mix(in srgb,var(--apple) 62%,#2A0E06) 61%);box-shadow:1.5px 1.5px 0 color-mix(in srgb,var(--apple) 30%,#1E0F08)}
.fsbar .ap::before{content:"";position:absolute;left:50%;top:-6px;width:2px;height:7px;background:var(--ink);transform:rotate(14deg)}
.fsbar .ap.in{min-width:34px;height:22px;border-radius:5px;background:var(--paper-lo);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fsbar .ap.in::before{display:none}
.fsbar .ap.frost{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 3px #9CD3E6}
.fsbar .ap span{font-size:12px;font-weight:800;color:var(--ink);padding:0 3px}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .fsbar{gap:8px;padding:4px 10px;font-size:13px}
  .fsbar .apl{display:none}
  .fsbar .ap{min-width:18px;height:18px}.fsbar .ap.in{min-width:26px;height:18px}.fsbar .ap span{font-size:11px;padding:0 2px}
}
/* ---- the Windfall Tree (windfall.css lays it out; these are its materials) ---- */
.wf-scene{box-shadow:inset 0 14px 16px -10px rgba(59,36,22,.4),2px 3px 0 var(--shade),0 8px 22px var(--shade),inset 0 0 0 max(5px,calc(var(--cell)*.06)) var(--wicker)}
.wf-basket .wf-val{font-weight:400}
.bk-key{fill:none;stroke:var(--shade);stroke-width:7;stroke-linecap:round}
.bk-handle{fill:none;stroke:var(--wicker-2);stroke-width:6;stroke-linecap:round}
.bk-handle-lit{fill:none;stroke:color-mix(in srgb,var(--wicker) 80%,#fff);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:4 5}
.bk-keyb{fill:color-mix(in srgb,var(--bough) 85%,transparent)}
.bk-body{fill:var(--wicker)}
.bk-weave{fill:none;stroke:var(--wicker-2);stroke-width:2.2}
.bk-over{fill:none;stroke:color-mix(in srgb,var(--wicker) 72%,#fff);stroke-width:2.6;stroke-linecap:round}
.bk-flank{fill:var(--bough);opacity:.26}
.bk-rim{fill:var(--wicker-2)}
.bk-twist{fill:none;stroke:color-mix(in srgb,var(--wicker) 85%,#fff);stroke-width:1.6;stroke-linecap:round}
/* the canopy: printed leaf masses with a scalloped lower edge, their sunlit upper-left edges and leaf gouges in a lighter
   ink (::after), their key block on the lower-right edges in a deeper one (::before); all three masks share one viewBox
   anchored at its bottom (skin.js), so they stay in register at any size. The bank: furrows that follow its slope */
.wf-canopy{top:-2%;height:22%;opacity:1;background:var(--wf-leaf);-webkit-mask:var(--ch-canopy) center bottom/100% 100% no-repeat;mask:var(--ch-canopy) center bottom/100% 100% no-repeat}
.wf-canopy::before,.wf-canopy::after{content:"";position:absolute;inset:0}
.wf-canopy::before{background:color-mix(in srgb,var(--wf-leaf) 62%,#1A120A);-webkit-mask:var(--ch-canopy-sh) center bottom/100% 100% no-repeat;mask:var(--ch-canopy-sh) center bottom/100% 100% no-repeat}
.wf-canopy::after{background:var(--wf-leaf-2);-webkit-mask:var(--ch-canopy-lit) center bottom/100% 100% no-repeat;mask:var(--ch-canopy-lit) center bottom/100% 100% no-repeat}
.wf-bank{background:repeating-linear-gradient(174deg,transparent 0 13px,color-mix(in srgb,var(--wf-bank-hi) 70%,#fff) 13px 14.5px,transparent 14.5px 27px),linear-gradient(180deg,var(--wf-bank-hi),var(--wf-bank))}
/* the basket's number: a small badge by the handle's left foot (its value tag sits on the front, windfall.css) */
.wf-basket::before{content:attr(data-no);position:absolute;left:0;top:4%;z-index:1;min-width:max(16px,calc(var(--bw,64px)*.28));padding:0 3px;border-radius:999px;
  text-align:center;font:700 max(11px,calc(var(--bw,64px)*.19))/max(16px,calc(var(--bw,64px)*.28)) var(--ui);background:var(--wf-tag-bg);color:var(--wf-tag-ink);border:1.5px solid var(--wf-tag-ink)}
.wf-scene.wf-small .wf-basket::before{display:none}
.wf-mini{box-shadow:inset 0 0 0 1.5px var(--line)}
/* ---- the crane lift into and out of the Windfall: a kraft panel with the trunk, its rope and the plank lift ---- */
.ch-crane{position:fixed;inset:0;z-index:20;display:none;pointer-events:none;transform:translateY(100%);
  background:linear-gradient(90deg,transparent 0 30%,color-mix(in srgb,var(--crane-dark) 25%,transparent) 30% 31%,transparent 31%),linear-gradient(180deg,var(--crane),color-mix(in srgb,var(--crane) 80%,var(--crane-dark)))}
.ch-crane.show{display:block}
.ch-crane i{position:absolute;display:block}
.ch-crane .trunk{left:33%;width:24%;top:-6%;bottom:-6%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--crane-dark) 62%,#fff) 0,var(--crane-dark) 34%,color-mix(in srgb,var(--crane-dark) 62%,#000) 82%,color-mix(in srgb,var(--crane-dark) 80%,#000));
  -webkit-mask:var(--ch-crane-trunk) center/100% 100% no-repeat;mask:var(--ch-crane-trunk) center/100% 100% no-repeat}
.ch-crane .rope{left:62%;width:4px;top:0;bottom:30%;background:repeating-linear-gradient(180deg,var(--crane-dark) 0 6px,var(--crane) 6px 9px)}
.ch-crane .lift{left:55%;width:16%;bottom:24%;height:6%;border-radius:3px;box-shadow:3px 4px 0 var(--shade);
  background:repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--crane-dark) 60%,#000) 14px 16px),linear-gradient(180deg,color-mix(in srgb,var(--crane-dark) 65%,#fff),var(--crane-dark) 30%,color-mix(in srgb,var(--crane-dark) 75%,#000))}
/* ---- big wins: apples roll out along the bottom and straw drifts down (over the overlay's card, under nothing) ---- */
.ch-roll{position:fixed;inset:0;z-index:31;pointer-events:none;overflow:hidden}
.ch-roll i{position:absolute;display:block}
.ch-roll .roll{left:-8vw;bottom:calc(4vh + var(--y));width:calc(7vmin * var(--s));aspect-ratio:1;animation:ch-roll 2.8s cubic-bezier(.3,0,.6,1) var(--d) both}
.ch-roll .roll.r{left:auto;right:-8vw;animation-name:ch-roll-r}
.ch-roll .roll img{display:block;width:100%;height:100%}
@keyframes ch-roll{from{transform:translateX(0) rotate(0)}to{transform:translateX(60vw) rotate(540deg);opacity:0}}
@keyframes ch-roll-r{from{transform:translateX(0) rotate(0)}to{transform:translateX(-60vw) rotate(-540deg);opacity:0}}
.ch-roll .straw{left:var(--x);top:-4vh;width:3px;height:calc(5vmin * var(--s));border-radius:2px;background:#E2BF6A;box-shadow:1px 0 0 #B8902F;
  transform:rotate(var(--r));animation:ch-straw 2.8s linear var(--d) both}
@keyframes ch-straw{to{transform:translate(4vw,104vh) rotate(calc(var(--r) + 220deg))}}
/* ---- reduced motion: no drifting leaves, no swaying leaf, no rolling apples, no landing give (the shell caps the rest) ---- */
body.still .scene .leaves,body.still .ch-roll{display:none}
body.still .sa-leaf{animation:none}
@media (prefers-reduced-motion:reduce){
  .scene .leaves,.ch-roll{display:none}
  .sa-leaf,.reels-board .cell.landed .sym,.spin.kick svg{animation:none}
}
/* the paytable's Frost Apple card */
.frost-card .symbox{position:relative;width:86px;height:86px;border-radius:10px;background:var(--window-paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.frost-card .symbox img{position:absolute;inset:8%;width:84%;height:84%}
.frost-card h4{margin:0 0 4px;font-size:16px}.frost-card p{margin:0}