/* Great Migration skin on the shared game shell: layered paper-cut on a dusty golden savanna. A river crossing under a low
   sun (hills, acacias and a baobab on the far bank, a herd drifting slowly along it, the river across the plain), or a
   waterhole at dawn; the flooding plain of the Migration Spins (a slow dust storm, the water risen over the grass). The
   "riverbank-reeds" letterbox round the translucent amber reels window (reeds over it, grass under it), the river rows
   as bands of paper water (river.css, coloured here), the balance and the win on the two banks (the shell's "corners"
   HUD), a paw-pad spin button, the Migration bar, the herd-run transition and the weaver birds. Theme tokens (--gold,
   --earth, --leaf, --ink, --muted, --gloss, --plate*, --sky-*, --sun, --hill, --far, --near, --dust, --water*, --wave,
   --herd-ink, --amber*, --pad*) come from skin.js themeMap: light ink on dark plates (dark presets) or dark ink on light
   plates (a light secondary), ≥ 4.5:1 either way. The accent (--leaf) is decoration only, never text. Animated
   properties: transform, opacity and clip-path only. No screen flash and no shake.
   Light (art direction §5): one key light, the low sun — its glow sits behind the board so the amber window reads as
   backlit paper; the scene goes from hazy, light far layers to dark near ones, one static grain layer, a vignette.
   The title is block signage cut from sunlit card: no plate, its depth stepped down-right (away from the sun). */
:root{
  --gold:#B67D30; --earth:#34130C; --leaf:#5E8C31;
  --ink:#F8ECD4; --muted:#E2CDA9; --gloss:#D3B183; --plate:#220C08; --plate-hi:#45200F; --plate-edge:#5E3A1D;
  --sky-top:#2C100A; --sky-mid:#75481E; --sky-low:#C99A55; --sun:#E3C58E; --hill:#5A2D14; --far:#270E09; --near:#1A0A06; --dust:#755A3A;
  --water:#3C6377; --water-hi:#7AA6BA; --wave:rgba(246,231,200,.46); --water-edge:rgba(246,231,200,.45); --herd-ink:#170805;
  --amber:#8E5C2A; --amber-lo:#2A0F0A; --amber-glow:#D9AE6E; --pad:#C18E4C; --pad-hi:#D3B183; --pad-sh:#1A0906; --pad-lo:#71501E; --pad-top:#F0DFC0;
  --title-d1:#5E3A1C; --title-d2:#1C0A06;
  --display:"Bungee","Work Sans",system-ui,sans-serif; --ui:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:10px; --radius-sm:7px; --line:color-mix(in srgb,var(--plate-edge) 80%,transparent); --panel-border:var(--plate-edge);
  --hud-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate-hi) 92%,transparent),color-mix(in srgb,var(--plate) 96%,transparent));
  --ibtn-bg:linear-gradient(180deg,var(--plate-hi),var(--plate)); --ibtn-ink:var(--gloss);
  --corner-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate-hi) 94%,transparent),color-mix(in srgb,var(--plate) 96%,transparent));
  /* the reels window: translucent amber paper lit from behind by the low sun (the glow sits low and left of centre, where
     the sun is), deeper at the edges; the scene shows faintly through */
  --window-bg:radial-gradient(90% 80% at 40% 62%,color-mix(in srgb,var(--amber-glow) 46%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--amber) 70%,transparent),color-mix(in srgb,var(--amber-lo) 88%,transparent));
  --window-radius:4px; --reel-sep:color-mix(in srgb,var(--near) 40%,transparent); --spin-ring:transparent;
  --win-glow:color-mix(in srgb,var(--gold) 75%,#FFFFFF); --focus:var(--gloss);
  /* the river board: paper water with a wave pattern (river.css) */
  --river-water:color-mix(in srgb,var(--water) 78%,transparent); --river-water-hi:color-mix(in srgb,var(--water-hi) 60%,transparent);
  --river-wave:var(--wave); --river-edge:var(--water-edge); --herd-dust:color-mix(in srgb,var(--dust) 80%,#F6E7C8);
  color-scheme:var(--scheme,dark);
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: the sky and the sun, the plain (hills, the far bank with its trees, the herd, the river, the near bank),
   the waterhole at dawn, the flooding plain of the Migration Spins. Silhouettes are masks from skin.js. Only the herd
   (very slowly) and the storm move; the layers fade. */
.scene{background:var(--sky-top)}
.scene .sky{background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-mid) 46%,var(--sky-low) 68%,var(--sky-mid) 100%)}
.scene .sky .sun{position:absolute;left:17%;top:59%;width:70vmin;height:70vmin;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--sun) 0 11%,color-mix(in srgb,var(--sun) 55%,transparent) 19%,color-mix(in srgb,var(--sun) 18%,transparent) 38%,transparent 68%);opacity:.9}
/* dust haze over the horizon: the far layers fade into it (aerial perspective) */
.scene .sky .haze{position:absolute;left:0;right:0;top:48%;height:24%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sky-low) 42%,transparent) 55%,transparent)}
.scene .plain>i,.scene .dawn>i,.scene .flood .tide{position:absolute;inset:0;-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 .plain .hills{background:linear-gradient(180deg,color-mix(in srgb,var(--hill) 50%,var(--sky-low)) 56%,var(--hill) 72%);-webkit-mask-image:var(--gm-hills);mask-image:var(--gm-hills);opacity:.9}
.scene .plain .far-bank{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 62%,var(--sky-mid)) 58%,var(--far) 74%);-webkit-mask-image:var(--gm-far-bank);mask-image:var(--gm-far-bank)}
.scene .plain .herd{right:auto;width:200%;background:var(--far);opacity:.8;-webkit-mask-image:var(--gm-herd);mask-image:var(--gm-herd);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:50% 100%;mask-size:50% 100%;-webkit-mask-position:left bottom;mask-position:left bottom;
  will-change:transform;animation:gm-drift 140s linear infinite}
.scene .plain .river{background:linear-gradient(180deg,color-mix(in srgb,var(--water-hi) 70%,var(--sky-low)) 74%,var(--water) 84%);-webkit-mask-image:var(--gm-river);mask-image:var(--gm-river)}
/* the sun's broken reflection on the river, below the sun */
.scene .plain .glint{left:17%;right:auto;top:auto;bottom:17%;width:36vmin;height:2.4vh;transform:translateX(-50%);-webkit-mask:none;mask:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) 60%,transparent),transparent);opacity:.55}
.scene .plain .near-bank{background:linear-gradient(180deg,color-mix(in srgb,var(--near) 70%,var(--hill)) 86%,var(--near) 94%);-webkit-mask-image:var(--gm-near-bank);mask-image:var(--gm-near-bank)}
/* the nearest grass (darkest, partly out of frame) and one static grain layer over the whole scene */
.scene .fore{position:absolute;left:0;right:0;top:auto;bottom:0;height:34vh;background:color-mix(in srgb,var(--near) 88%,#000);
  -webkit-mask:var(--gm-fore) center bottom/cover no-repeat;mask:var(--gm-fore) center bottom/cover no-repeat}
.scene .grain{position:absolute;inset:0;background:var(--gm-grain) 0 0/160px;opacity:.06;pointer-events:none}
.scene .dawn{opacity:0;transition:opacity .8s}
.scene .dawn .pool{background:linear-gradient(180deg,var(--water-hi),var(--water));-webkit-mask-image:var(--gm-pool);mask-image:var(--gm-pool)}
.scene .dawn .dawn-trees{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 72%,var(--sky-mid)) 56%,var(--far) 78%);-webkit-mask-image:var(--gm-dawn-trees);mask-image:var(--gm-dawn-trees)}
body.bg-waterhole .scene .dawn{opacity:1}
body.bg-waterhole .scene .plain>:not(.hills){opacity:0}
body.bg-waterhole .scene .sky{background:linear-gradient(180deg,color-mix(in srgb,var(--sky-top) 70%,#3A4E7A) 0,color-mix(in srgb,var(--sky-mid) 70%,#C0607A) 48%,color-mix(in srgb,var(--sky-low) 80%,#F2B07A) 72%,var(--sky-mid) 100%)}
body.bg-waterhole .scene .sky .sun{left:30%;top:66%;opacity:.7}
/* the flooding plain (Migration Spins): a slow dust storm high up and the water risen over the lower plain; it fades in
   over 1.2 s (the herd-run's dust covers the change) */
.scene .flood{opacity:0;transition:opacity 1.2s ease}
body.fs .scene .flood{opacity:1}
.scene .flood .storm{position:absolute;left:-20%;right:-20%;top:-10%;height:70%;will-change:transform;
  background:radial-gradient(40% 50% at 30% 50%,color-mix(in srgb,var(--dust) 55%,transparent),transparent 70%),radial-gradient(35% 45% at 72% 40%,color-mix(in srgb,var(--dust) 45%,transparent),transparent 70%);
  animation:gm-storm 38s ease-in-out infinite alternate}
.scene .flood .storm.s2{top:10%;opacity:.7;animation-duration:52s;animation-direction:alternate-reverse}
/* the storm only drifts while it is seen (the Migration Spins); in the base game it waits, invisible */
body:not(.fs) .scene .flood .storm{animation-play-state:paused}
.scene .flood .tide{top:auto;height:44%;-webkit-mask:none;mask:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 30%,transparent),transparent 3px) 0 0/100% 100% no-repeat,
    radial-gradient(60% 6% at 30% 12%,color-mix(in srgb,var(--sun) 40%,transparent),transparent) 0 0/100% 100% no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--water-hi) 70%,transparent),var(--water) 45%,color-mix(in srgb,var(--water) 70%,var(--near)))}
.scene .vignette{background:radial-gradient(ellipse at 46% 52%,transparent 48%,rgba(10,4,2,.5) 100%)}
@keyframes gm-drift{to{transform:translateX(-50%)}}
@keyframes gm-storm{from{transform:translateX(-4%)}to{transform:translateX(4%)}}

/* no screen flash and no shake: the shell's governed flash (big-win tiers) and its shake are switched off here */
.flash{display:none!important}
#game{transform:none!important}

/* ---- title and round buttons: block signage on an earth plate */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.04em;color:var(--gloss);
  text-shadow:1px 1px 0 var(--title-d1),2px 2px 0 var(--title-d1),3px 3px 0 var(--title-d2),3px 5px 10px rgba(10,4,2,.5)}
.ibtn{border:1.5px solid var(--plate-edge);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.ibtn:hover{border-color:var(--gloss)}

/* ---- the frame: the "riverbank-reeds" letterbox. No frame round the reels: a dark band with reeds over the window and a
   band of grass under it, both wider than the window. The decoration (.gm-deco) lies exactly over the window (its size
   from skin.js onConfig); padding in px and cells: the board measures its area for its --cell. */
.frame{--fpt:calc(var(--cell)*.46 + 6px);padding:var(--fpt) 18px 8px;gap:8px}
.gm-deco{position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--gm-cols,6));height:calc(var(--cell)*var(--gm-rows,3));transform:translateX(-50%);pointer-events:none}
.gm-deco .band{position:absolute;left:-14%;right:-14%;background:color-mix(in srgb,var(--near) 72%,transparent)}
.gm-deco .band.top{bottom:100%;height:calc(var(--cell)*.46);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.gm-deco .band.low{top:100%;height:calc(var(--cell)*.18);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.gm-deco .reeds{position:absolute;left:-8%;right:-8%;bottom:calc(100% - 2px);height:calc(var(--cell)*.46);background:linear-gradient(100deg,color-mix(in srgb,var(--leaf) 45%,var(--sun)),color-mix(in srgb,var(--leaf) 60%,var(--gold)) 40%,color-mix(in srgb,var(--leaf) 45%,var(--near)) 85%);
  -webkit-mask:var(--gm-reeds) 0 0/100% 100% no-repeat;mask:var(--gm-reeds) 0 0/100% 100% no-repeat}
.gm-deco .reeds.back{left:-12%;right:-4%;bottom:calc(100% - 4px);height:calc(var(--cell)*.58);opacity:.9;background:linear-gradient(180deg,color-mix(in srgb,var(--leaf) 30%,var(--near)),var(--near));
  -webkit-mask:var(--gm-reeds) 0 0/112% 100% no-repeat;mask:var(--gm-reeds) 0 0/112% 100% no-repeat}
.gm-deco .grass{position:absolute;left:-8%;right:-8%;top:calc(100% - 2px);height:calc(var(--cell)*.18);background:linear-gradient(180deg,color-mix(in srgb,var(--leaf) 70%,var(--near)),color-mix(in srgb,var(--leaf) 50%,var(--gold)));
  -webkit-mask:var(--gm-grass) 0 0/100% 100% no-repeat;mask:var(--gm-grass) 0 0/100% 100% no-repeat}
.board,.message{position:relative;z-index:1}
body[data-variant="clean"] .gm-deco .reeds,body[data-variant="clean"] .gm-deco .grass,body[data-variant="clean"] .gm-deco .band{display:none}
body[data-variant="clean"] .gm-deco::before,body[data-variant="clean"] .gm-deco::after{content:"";position:absolute;left:-3%;right:-3%;height:2px;background:color-mix(in srgb,var(--gold) 70%,transparent)}
body[data-variant="clean"] .gm-deco::before{top:-6px}body[data-variant="clean"] .gm-deco::after{bottom:-6px}

/* ---- the reels: paper symbols on the amber window; the hum while they spin (2 px, the board only, never the screen) */
.reels-board .window{box-shadow:inset 0 16px 18px -10px rgba(10,4,2,.55),inset 0 -1px 0 color-mix(in srgb,var(--sun) 40%,transparent),0 0 0 1px color-mix(in srgb,var(--near) 70%,transparent),0 14px 30px rgba(0,0,0,.42)}
.reels-board .reel{box-shadow:inset -1px 0 0 color-mix(in srgb,var(--sun) 10%,transparent)}
.reels-board .cell.win::after{border-color:var(--gloss);border-radius:10px}
/* the rest of the window steps back (opacity, not a filter: the symbols keep their shapes) */
.reels-board .cell.dim .sym{filter:none;opacity:.42}
.river-board.hum .reel.spinning{animation:gm-hum 90ms linear infinite alternate}
@keyframes gm-hum{from{transform:translateY(-1px)}to{transform:translateY(1px)}}
.message{font-family:var(--ui);font-weight:600;color:var(--ink);max-width:100%;padding:3px 14px;border-radius:999px;background:color-mix(in srgb,var(--plate) 90%,transparent);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em}
.message:empty{background:none}
.message b{color:var(--gloss)}

/* ---- the Migration bar: the spin in play, the rivers (wave pips: filled = flooded, outlined = dry), the total won */
.fsbar{gap:16px;padding:5px 16px;border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--plate-hi),var(--plate));border:1.5px solid var(--plate-edge);
  color:var(--ink);font-family:var(--ui);font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fsbar b{color:var(--gloss)}
.fsbar .fs-rivers{display:flex;align-items:center;gap:6px}
.fsbar .fs-rivers small{font-size:13px;font-weight:600;color:var(--muted)}
.fsbar .wvs{display:flex;gap:3px}
.fsbar .wv{display:block;width:16px;height:9px;border:1.5px solid var(--water-hi);border-radius:9px 9px 2px 2px;opacity:.75}
.fsbar .wv.on{background:linear-gradient(180deg,var(--water-hi),var(--water));opacity:1}
.fsbar .fs-rivers.full b{text-decoration:underline;text-underline-offset:3px}

/* ---- HUD "corners": the balance on the left bank, the win on the right bank (earth plates with a grass edge), the bet
   and the spin in the bottom cluster; phones keep the shell's two-row bar */
.hud{border:1.5px solid var(--plate-edge);box-shadow:0 6px 18px rgba(0,0,0,.35);border-radius:var(--radius)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-corners .hud>.bal,.hud-corners .hud>.win,.hud-corners .betctl{border:1.5px solid var(--plate-edge);border-radius:var(--radius-sm);box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--leaf) 55%,transparent),0 6px 16px rgba(0,0,0,.35)}
  .hud-corners .hud>.bal,.hud-corners .hud>.win{padding:10px 20px 12px}
}
.meter span{font-family:var(--ui);font-weight:600;color:var(--muted)}
.meter b{font-family:var(--ui);font-weight:600;color:var(--ink)}.meter.win b{color:var(--gloss)}
.meter small{color:var(--muted)}
.demo{background:var(--gloss);color:var(--plate)}
.pm,.auto{background:var(--ibtn-bg);border:1.5px solid var(--plate-edge);color:var(--gloss)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gloss)}
.auto span{background:var(--gloss);color:var(--plate)}
/* the paw pad: drawn by the SVG (skin.js), which fills the button, over its own soft shadow (no CSS filter: the toes
   animate inside it); while busy the toes press in turn, a press settles the pad (180 ms) */
.spin{width:calc(var(--s)*1.04);height:calc(var(--s)*1.04);border-radius:42%;background:none;box-shadow:none;filter:none}
.spin .pw-ds0{stop-color:#0A0402;stop-opacity:.42}.spin .pw-ds1{stop-color:#0A0402;stop-opacity:0}
.spin svg{width:100%;height:100%}
.spin .pw-shadow{fill:var(--pad-sh);opacity:.55}
.spin .pw-ao{fill:var(--pad-sh);opacity:.45}
.spin .pw-paper .pad{fill:url(#gmPad)}
.spin .pw-paper .toe{fill:url(#gmToe);transform-box:fill-box;transform-origin:50% 50%}
.spin .pw-hi{stop-color:var(--pad-hi)}.spin .pw-mid{stop-color:var(--pad)}.spin .pw-lo{stop-color:var(--pad-lo)}.spin .pw-top{stop-color:var(--pad-top)}
.spin .pw-arrow{stroke:var(--earth)}
.spin.busy .pw-paper .toe{animation:gm-toe .9s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.spin.kick .pw-paper{animation:gm-press .18s ease-out}
.spin:disabled{filter:none}.spin:disabled svg{opacity:.6}
@keyframes gm-toe{0%,100%{transform:none}40%{transform:scale(.86)}}
@keyframes gm-press{0%{transform:scale(.94);transform-origin:50% 60%}100%{transform:none}}
.side .tablet{background:linear-gradient(180deg,var(--plate-hi),var(--plate));border:1.5px solid var(--plate-edge);border-radius:var(--radius-sm);color:var(--ink)}
.tablet .th{font-family:var(--display);font-weight:400;letter-spacing:.03em;color:var(--gloss)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays */
.panel{color:var(--ink)}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.03em}
.panel h3{color:var(--gloss)}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.03em}
.ptc{background:color-mix(in srgb,var(--plate) 60%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:8px;background:linear-gradient(180deg,var(--amber),var(--amber-lo));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 35%,transparent)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.special p{margin:0 0 6px}
.gm-ex{max-width:360px}
.gm-ex-row{display:grid;grid-template-columns:repeat(var(--n,6),1fr);border-radius:6px;overflow:hidden;
  background:radial-gradient(10px 5px at 50% 100%,transparent 64%,var(--wave) 68% 84%,transparent 88%) 0 30%/20px 10px repeat-x,linear-gradient(180deg,var(--water-hi),var(--water));
  box-shadow:inset 0 0 0 1.5px var(--water-edge)}
.gm-ex-cell{position:relative;aspect-ratio:1}
.gm-ex-cell .sym{position:absolute;inset:6%}
.gm-ex-cell .sym img{position:absolute;inset:0;width:100%;height:100%}
.ovcard h2{color:var(--gloss);text-shadow:0 2px 0 var(--plate)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}
/* a denser veil at the centre than the shell's 55 %: the card's text over the reels stays ≥ 4.5:1 (titles ≥ 3:1) */
.overlay{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--bg) 75%,transparent),color-mix(in srgb,var(--bg) 92%,#000) 75%)}

/* ---- the herd-run (skin.js): a mid-tone dust veil (never white), the herd crossing the screen and the water rising
   from the bottom (or falling back) */
.gm-run{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden}
.gm-run.show{display:block}
.gm-run .water{position:absolute;left:0;right:0;bottom:0;height:46%;transform:translateY(100%);will-change:transform;
  background:radial-gradient(16px 8px at 50% 100%,transparent 64%,var(--wave) 68% 84%,transparent 88%) 0 12%/32px 16px repeat-x,
    linear-gradient(180deg,var(--water-hi),var(--water) 40%,color-mix(in srgb,var(--water) 70%,var(--near)))}
.gm-run.out .water{transform:none}
.gm-run .dust{position:absolute;inset:-10%;opacity:0;will-change:opacity;
  background:radial-gradient(60% 50% at 30% 55%,color-mix(in srgb,var(--dust) 96%,transparent),transparent 75%),radial-gradient(60% 55% at 72% 45%,color-mix(in srgb,var(--dust) 92%,transparent),transparent 78%),color-mix(in srgb,var(--dust) 86%,var(--near))}
.gm-run .line{position:absolute;left:0;width:100vw;top:42%;height:22vh;color:var(--herd-ink);transform:translateX(-110vw);will-change:transform}
.gm-run .line svg{width:100%;height:100%}
.gm-run.calm .dust{opacity:1}.gm-run.calm .line,.gm-run.calm .water{display:none}

/* ---- big wins: weaver birds fly over the top of the screen (shapes that cross and fade, never a light) */
.gm-birds{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.gm-birds>i{position:absolute;left:0;top:var(--y);width:calc(46px*var(--s));height:calc(29px*var(--s));opacity:0;will-change:transform,opacity;
  background:color-mix(in srgb,#F2C14E 70%,var(--gold));-webkit-mask:var(--gm-bird) center/contain no-repeat;mask:var(--gm-bird) center/contain no-repeat;
  animation:gm-fly var(--t,2600ms) cubic-bezier(.45,.05,.55,.95) var(--d,0ms) forwards}
@keyframes gm-fly{0%{opacity:0;transform:translate(-8vw,0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(108vw,var(--dy,0))}}

/* ---- reduced motion: no hum, no drifting herd, no storm, no pressing toes, no birds; shell.css caps the rest */
body.still .river-board.hum .reel.spinning,body.still .scene .plain .herd,body.still .scene .flood .storm,body.still .spin.busy .pw-paper .toe,body.still .spin.kick .pw-paper{animation:none}
body.still .gm-birds{display:none}
@media (prefers-reduced-motion:reduce){
  .river-board.hum .reel.spinning,.scene .plain .herd,.scene .flood .storm,.spin.busy .pw-paper .toe,.spin.kick .pw-paper{animation:none!important}
  .gm-birds{display:none}
  .scene .flood,.scene .dawn{transition-duration:.12s}
}

/* ---- phones: the window takes the width (six 56 px reels in 344 px at 360), a lower reeds band, thin side padding */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:calc(var(--cell)*.34 + 4px);padding:var(--fpt) 0 4px;gap:6px}
  .gm-deco .band.top,.gm-deco .reeds{height:calc(var(--cell)*.34)}
  .gm-deco .band,.gm-deco .reeds,.gm-deco .grass,.gm-deco .reeds.back{left:0;right:0}
  /* the letterbox runs edge to edge: the board area takes the screen's full width (the shell keeps 8 px gutters for
     the header and the HUD), so the six reels gain the gutters (main.js narrowPad 0) */
  .boardarea{margin-inline:-8px;width:calc(100% + 16px)}
  .reels-board .window{border-radius:0}
  .hud{background:var(--hud-bg)}
  .logo h1{letter-spacing:.02em;font-size:clamp(14px,4.4vw,30px);text-shadow:1px 1px 0 var(--title-d1),2px 2px 0 var(--title-d2),2px 4px 8px rgba(10,4,2,.5)}
  /* the low sun stands in the sky over the board (the board is as wide as the screen allows: six reels) */
  .scene .sky .sun{left:30%;top:24%;width:90vmin;height:90vmin}
  .scene .sky .haze{top:54%}
  /* the far bank with its acacia and baobab, the herd and the river (or the waterhole) come up into the free band under
     the board; the sun's glint lies on the river */
  .scene .plain,.scene .dawn{transform:translateY(-9vh)}
  .scene .plain .glint{left:30%;bottom:15%}
  /* the buy and ante tablets share the row: the UI face, two lines at most */
  .side.left .tablet{flex:1 1 0;min-width:0;padding:6px 10px}
  .side.left .tablet .th{font-family:var(--ui);font-weight:600;font-size:14px;line-height:1.15;letter-spacing:0}
  .side.left .tablet .price{font-size:15px}
}
@media (max-width:340px){.boardarea{margin-inline:-6px;width:calc(100% + 12px)}}
/* ---- portrait screens (phones, tablets) show only the middle of the wide scene (about x 590–1010 of 1600 on a phone):
   the far bank, the waterhole and the nearest grass get their own composition there (skin.js *-p: an acacia and the
   baobab on the far bank; an acacia and drinking wildebeest at the pool; a clump of grass at each screen edge), and
   the herd is sized from the scene's height — three 800 × 900 tiles, the drift one tile long — so it walks on the far
   bank at the bank's own scale, above the river */
@media (max-aspect-ratio:1/1){
  .scene .plain .glint{top:79%;bottom:auto}
  .scene .plain .far-bank{-webkit-mask-image:var(--gm-far-bank-p);mask-image:var(--gm-far-bank-p)}
  .scene .dawn .dawn-trees{-webkit-mask-image:var(--gm-dawn-trees-p);mask-image:var(--gm-dawn-trees-p)}
  .scene .plain .herd{width:auto;height:100%;aspect-ratio:24/9;-webkit-mask-size:33.3333% 100%;mask-size:33.3333% 100%;animation-name:gm-drift3}
  .scene .fore{height:42vh;-webkit-mask:var(--gm-fore-l) left bottom/auto 100% no-repeat,var(--gm-fore-r) right bottom/auto 100% no-repeat;
    mask:var(--gm-fore-l) left bottom/auto 100% no-repeat,var(--gm-fore-r) right bottom/auto 100% no-repeat}
}
@keyframes gm-drift3{to{transform:translateX(-33.3333%)}}
/* a portrait phone or tablet: the board is as wide as the screen, so the free band under it moves with the width; the
   plain is raised so that the trees stand just under the message, then the far bank and some river above the tablets
   (fitted to 360 × 640, 390 × 844 and 768 × 1024: 60, 76 and 15 px); the waterhole's far edge lies lower in its
   picture than the far bank, so it rises 4vh more */
@media (max-aspect-ratio:4/5){
  .scene .plain{transform:translateY(clamp(-110px,calc(21.37vw - 10.99vh - 66.6px),20px))}
  .scene .dawn{transform:translateY(clamp(-150px,calc(21.37vw - 14.99vh - 66.6px),20px))}
}
/* ---- a phone on its side: the board's top sits right under the title, so the reeds band over the window is left out
   (it would cross the title's letters) */
@media (max-height:500px) and (orientation:landscape){
  .gm-deco .reeds,.gm-deco .band.top{display:none}
}
@media (max-width:400px){
  .fsbar{gap:8px;padding:4px 9px;font-size:13px}
  .fsbar .wvs{display:none}
  .message{font-size:14px;padding:2px 10px}
}