/* Windfall board (ways reels + the apple tree of the stepwise bonus). The game's skin sets the tokens (all optional):
   --wf-sky (the scene's ground), --wf-bough / --wf-bough-hi (boughs, the path an apple took), --wf-knot, --wf-leaf /
   --wf-leaf-2 (the canopy), --wf-bank / --wf-bank-hi (the sloping bank), --wf-tag-bg / --wf-tag-ink (a basket's value tag),
   --wf-count-bg / --wf-count-ink (apples caught), --wf-pop-bg / --wf-pop-ink (the win over a basket), --wf-frost (a
   Frost Apple's halo), --wf-lit (a lit node). Every text sits on its own solid tag (the skin keeps it ≥ 4.5:1). The scene
   is sized by the board (--tw, --th, --bw in px); the paytable's small copy (.wf-mini) sets them itself. */
.windfall-board.wf-on{grid-template-columns:auto}
.windfall-board.wf-on>.window{display:none}
.wf-scene,.wf-mini{position:relative;overflow:hidden;border-radius:var(--window-radius,10px);
  background:var(--wf-sky,linear-gradient(180deg,#F3E7CC,#E7D6B0))}
.wf-mini{--tw:480px;--bw:46px;width:min(100%,480px);aspect-ratio:1.55;margin:8px auto 4px}
.wf-canopy{position:absolute;left:-4%;right:-4%;top:-6%;height:24%;pointer-events:none;
  background:radial-gradient(closest-side,var(--wf-leaf,#5E7A3A) 92%,transparent) 0 0/14% 70% repeat-x,
    radial-gradient(closest-side,var(--wf-leaf-2,#7E9A46) 92%,transparent) 7% 60%/16% 64% repeat-x;opacity:.9}
/* the bank slopes down to the right under the baskets (treeLayout: bank 0.7 + slope 0.17 · x, their feet ≈ 0.06 lower) */
.wf-bank{position:absolute;left:0;right:0;bottom:0;height:32%;pointer-events:none;
  clip-path:polygon(0 25%,100% 78%,100% 100%,0 100%);background:linear-gradient(180deg,var(--wf-bank-hi,#9DB067),var(--wf-bank,#6F8B45))}
.wf-boughs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wf-bough{fill:none;stroke:var(--wf-bough,#4A2E1A);stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.wf-bough.d0{stroke-width:max(5px,calc(var(--tw,600px)*.02))}.wf-bough.d1{stroke-width:max(4px,calc(var(--tw,600px)*.014))}
.wf-bough.d2,.wf-bough.d3{stroke-width:max(3px,calc(var(--tw,600px)*.009))}
.wf-bough.lit{stroke:var(--wf-bough-hi,#B23A26)}
.wf-knot{position:absolute;width:max(10px,calc(var(--tw,600px)*.026));aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--wf-knot,#4A2E1A);box-shadow:inset 0 0 0 max(2px,calc(var(--tw,600px)*.005)) color-mix(in srgb,var(--wf-knot,#4A2E1A) 70%,#fff);pointer-events:none;transition:box-shadow .25s}
.wf-knot.crown{width:max(16px,calc(var(--tw,600px)*.042))}
.wf-knot.lit{box-shadow:inset 0 0 0 max(2px,calc(var(--tw,600px)*.005)) var(--wf-lit,#D39A3A),0 0 0 max(3px,calc(var(--tw,600px)*.007)) color-mix(in srgb,var(--wf-lit,#D39A3A) 55%,transparent)}
.wf-basket{position:absolute;width:var(--bw,64px);height:calc(var(--bw,64px)*.82);transform:translate(-50%,-50%);transition:transform .2s,filter .2s}
.wf-basket .wf-bart{position:absolute;inset:0}
.wf-basket .wf-bart>*{display:block;width:100%;height:100%}
/* the value sits on the basket's front (never a row of tags under the baskets) */
.wf-basket .wf-val{position:absolute;top:68%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:0 .4em;border-radius:6px;
  font-family:var(--display);font-weight:700;font-size:max(12px,calc(var(--bw,64px)*.3));line-height:1.25;
  background:var(--wf-tag-bg,#F7EFDC);color:var(--wf-tag-ink,#3B2416);border:1.5px solid var(--wf-tag-ink,#3B2416)}
.wf-basket .wf-caught{position:absolute;right:-14%;bottom:4%;min-width:max(18px,calc(var(--bw,64px)*.34));padding:0 4px;border-radius:999px;text-align:center;
  font-weight:800;font-size:max(11px,calc(var(--bw,64px)*.22));line-height:max(18px,calc(var(--bw,64px)*.34));background:var(--wf-count-bg,#8E2C1B);color:var(--wf-count-ink,#FFFFFF)}
/* small baskets (phones): the value tag is wider than the basket, so the count moves up by the handle, clear of it */
.wf-scene.wf-small .wf-basket .wf-caught{bottom:auto;top:-26%;right:-20%}
.wf-basket.hit{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 6px var(--wf-lit,#D39A3A))}
.wf-pop{position:absolute;left:50%;bottom:105%;transform:translateX(-50%);white-space:nowrap;padding:1px 8px;border-radius:8px;font-weight:800;
  font-size:max(13px,calc(var(--bw,64px)*.28));background:var(--wf-pop-bg,#F7EFDC);color:var(--wf-pop-ink,#3B2416);border:1.5px solid currentColor;
  pointer-events:none;animation:wf-pop 1.5s ease-out both}
.wf-pop.frost{box-shadow:0 0 0 3px var(--wf-frost,#9CD3E6)}
@keyframes wf-pop{0%{opacity:0;translate:0 30%}15%{opacity:1;translate:0 0}75%{opacity:1}100%{opacity:0;translate:0 -40%}}
.wf-apple{position:absolute;left:0;top:0;z-index:3;width:max(26px,calc(var(--bw,64px)*.62));aspect-ratio:1;pointer-events:none;will-change:transform}
.wf-apple img,.wf-apple svg{display:block;width:100%;height:100%}
.wf-apple.frost.shimmer::after{content:"";position:absolute;inset:-18%;border-radius:50%;border:3px solid var(--wf-frost,#9CD3E6);opacity:0;animation:wf-frost .6s ease-out 2}
@keyframes wf-frost{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(1.35)}}
.wf-apple.in{opacity:.9}
/* reduced motion: no halo, no rising labels, no scaling (the shell caps the rest) */
body.still .wf-apple.frost.shimmer::after,body.still .wf-pop{animation:none}
body.still .wf-basket.hit{transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:reduce){
  .wf-apple.frost.shimmer::after,.wf-pop{animation:none}
  .wf-basket.hit{transform:translate(-50%,-50%)}
  .wf-bough,.wf-knot,.wf-basket{transition:none}
}