/* Ravenhall Saga skin on the shared game shell: pyrography on timber with iron. A fjord between cliffs at dusk (or a mead
   hall by the hearth), the hull's rail hung with shields, tarred clinker planks round six timber reels with iron hoops,
   a menhir spin button, a plank bar as the HUD and a storm wave into the Longship Spins. Theme tokens (--rune, --night,
   --moss, --timber*, --sea*, --cliff*) come from skin.js themeMap; iron, bone, ochre and stone are materials. Light text
   always sits on dark wood. One key light for everything: warm, from the top left (torches, the hearth); a cool night
   rim on the lower right edges; the dusk glow behind the hull separates the board from the scene. */
:root{
  --rune:#259DF4; --night:#191934; --moss:#75D775; --dusk:#2A3C3D;
  --timber:#362828; --timber-hi:#4A3E3E; --timber-lo:#231A1A; --sea:#1E3F6E; --sea-deep:#0F0F1F; --cliff:#2E3446; --cliff-near:#131327;
  --iron:#4E555D; --iron-hi:#7D868F; --iron-lo:#262A2F; --bone:#E3D7BC; --ochre:#9C4A2A;
  --rune-lo:color-mix(in srgb,var(--rune) 55%,#0B1020); --moss-lo:color-mix(in srgb,var(--moss) 45%,#0E140C);
  --ember:#E8944A; --title-ink:#ECDDBB; --key:rgba(255,231,190,.16); --rimc:rgba(169,203,235,.22);
  --ink:#F4EDE0; --muted:#D4CABA;
  --display:"Saira Stencil One",Impact,sans-serif; --ui:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --radius:8px; --radius-sm:6px; --line:color-mix(in srgb,var(--iron-hi) 50%,transparent);
  --panel-bg:linear-gradient(180deg,color-mix(in srgb,var(--night) 80%,#3A2A1C),color-mix(in srgb,var(--night) 92%,#000)); --panel-border:var(--iron);
  --grain:repeating-linear-gradient(178deg,rgba(26,15,8,.16) 0 1px,transparent 1px 7px);
  /* two planks with a lit top lip each and a dark seam between them */
  --hud-bg:linear-gradient(180deg,var(--key) 0 1px,transparent 1px calc(50% - 1px),rgba(0,0,0,.55) calc(50% - 1px) calc(50% + 1px),rgba(255,231,190,.08) calc(50% + 1px) calc(50% + 2px),transparent calc(50% + 2px)),var(--grain),linear-gradient(180deg,var(--timber-hi),var(--timber) 55%,var(--timber-lo));
  --ibtn-bg:linear-gradient(180deg,var(--timber-hi),var(--timber)); --ibtn-ink:var(--ink);
  --stone:linear-gradient(160deg,#6A6F74,#474B50 45%,#2E3135); --btn-bg:var(--stone); --btn-ink:var(--ink);
  /* a reel: oiled timber a step lighter than the planks round it, sunk under the rail (shadow from the top), a thin lit
     lip at the bottom, its edges turning away into shade */
  --window-bg:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 16px),linear-gradient(0deg,rgba(255,228,190,.12),transparent 2px),linear-gradient(90deg,rgba(0,0,0,.42),transparent 12%,transparent 88%,rgba(0,0,0,.42)),var(--grain),linear-gradient(180deg,color-mix(in srgb,var(--timber) 82%,#6E4E34),color-mix(in srgb,var(--timber) 92%,#000));
  --window-radius:6px; --reel-gap:3px; --spin-blur:1.2px;
  --win-glow:color-mix(in srgb,var(--moss) 45%,#FFC27A); --win-ring:color-mix(in srgb,var(--moss) 55%,#FFF0CF); --rune-glow:var(--primary-hi); --lantern:color-mix(in srgb,var(--primary) 50%,#FFE7B0);
  --veil-light:color-mix(in srgb,var(--ember) 24%,transparent); --ov-plate:color-mix(in srgb,var(--timber) 90%,transparent); --ov-plate-line:var(--iron);
  --focus:var(--bone); --sh:36px;
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene: the fjord at dusk (default), the mead hall, and the storm sea of the Longship Spins. Four depths: the sky
   with the dusk glow low behind the hull, a hazy far range (lighter, less contrast), the fjord's walls lit from the
   left, foreground rocks (darkest, half out of frame); then a mist band on the water, a vignette and one static grain.
   Silhouettes are masks from skin.js; only the hearth, the flock and the swell move (slowly), and the layers fade. */
.scene .sky{background:radial-gradient(85% 46% at 50% 62%,color-mix(in srgb,var(--ember) 34%,transparent),transparent 72%),radial-gradient(36% 18% at 50% 62%,rgba(255,206,140,.3),transparent 75%),
  linear-gradient(180deg,color-mix(in srgb,var(--night) 62%,#000) 0%,var(--night) 30%,color-mix(in srgb,var(--night) 70%,var(--dusk)) 50%,color-mix(in srgb,var(--dusk) 70%,var(--ember)) 63%,var(--sea-deep) 100%)}
.scene .sky::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;opacity:.55;background:radial-gradient(1.3px 1.3px at 12% 18%,#fff,transparent),radial-gradient(1.1px 1.1px at 31% 9%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 22%,#fff,transparent),radial-gradient(1.1px 1.1px at 77% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 91% 30%,#fff,transparent),radial-gradient(1px 1px at 46% 38%,#fff,transparent),radial-gradient(1px 1px at 22% 34%,#fff,transparent),radial-gradient(1.1px 1.1px at 84% 40%,#fff,transparent)}
.scene .cliffs{-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 .storm .ravens,.scene .storm .sea{-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 .cliffs,.scene .fjord,.scene .mist{transition:opacity .8s}
.scene .cliffs.far{opacity:.9;background:linear-gradient(180deg,color-mix(in srgb,var(--cliff) 62%,#9AA8BE) 0%,color-mix(in srgb,var(--cliff) 85%,#7E8CA4) 40%,color-mix(in srgb,var(--cliff) 60%,var(--dusk)) 62%);-webkit-mask-image:var(--cliffs-far);mask-image:var(--cliffs-far)}
.scene .cliffs.mid.lit{translate:-3px -3px;background:color-mix(in srgb,var(--cliff) 45%,#C8B49A);opacity:.55;-webkit-mask-image:var(--cliffs-mid);mask-image:var(--cliffs-mid)}
.scene .cliffs.mid:not(.lit){background:linear-gradient(98deg,color-mix(in srgb,var(--cliff-near) 55%,#6F7C92) 0%,color-mix(in srgb,var(--cliff-near) 75%,#3C4558) 24%,var(--cliff-near) 40%,var(--cliff-near) 60%,color-mix(in srgb,var(--cliff-near) 70%,#000) 100%);-webkit-mask-image:var(--cliffs-mid);mask-image:var(--cliffs-mid)}
.scene .cliffs.near{background:linear-gradient(180deg,color-mix(in srgb,var(--cliff-near) 55%,#000),color-mix(in srgb,var(--cliff-near) 25%,#000));-webkit-mask-image:var(--cliffs-near);mask-image:var(--cliffs-near)}
.scene .fjord{top:64%;background:radial-gradient(16% 70% at 50% 0,rgba(255,196,128,.26),transparent 75%),repeating-linear-gradient(180deg,transparent 0 9px,rgba(255,236,206,.035) 9px 10px),linear-gradient(180deg,color-mix(in srgb,var(--sea) 80%,var(--ember)),var(--sea) 18%,var(--sea-deep))}
.scene .flock{bottom:auto;height:44%;opacity:.5;background:color-mix(in srgb,var(--night) 30%,#000);-webkit-mask:var(--ravens) center top/cover no-repeat;mask:var(--ravens) center top/cover no-repeat}
body.fs .scene .flock,body.bg-mead-hall .scene .flock{opacity:0}
.scene .mist{top:54%;height:16%;bottom:auto;background:linear-gradient(180deg,transparent,rgba(196,210,226,.12) 55%,transparent)}
.scene .hall{opacity:0;transition:opacity .8s;background:repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 3px,transparent 3px 88px),repeating-linear-gradient(91deg,rgba(26,15,8,.2) 0 1px,transparent 1px 8px),linear-gradient(180deg,var(--timber-lo),var(--timber) 60%,var(--timber-lo))}
.scene .hall .beam{position:absolute;left:0;right:0;top:12vh;height:5vh;background:linear-gradient(180deg,var(--key),transparent 3px),var(--grain),linear-gradient(180deg,var(--timber-hi),var(--timber-lo));box-shadow:0 8px 18px rgba(0,0,0,.5)}
.scene .hall .beam::after{content:"";position:absolute;left:0;right:0;top:100%;height:12vh;opacity:.38;background:var(--shields) 0 0/auto 10vh repeat-x}
.scene .hall .hearth{position:absolute;left:0;right:0;bottom:0;height:34vh;background:radial-gradient(50% 75% at 50% 100%,rgba(255,176,84,.5),rgba(255,140,60,.12) 60%,transparent);animation:rh-hearth 5s ease-in-out infinite alternate}
body.bg-mead-hall .scene .hall{opacity:1}
body.bg-mead-hall .scene .cliffs,body.bg-mead-hall .scene .fjord,body.bg-mead-hall .scene .mist{opacity:0}
.scene .storm{opacity:0;transition:opacity .8s}
.scene .storm .clouds{position:absolute;inset:0;background:radial-gradient(60% 30% at 20% 12%,color-mix(in srgb,var(--sea) 30%,var(--night)),transparent 70%),radial-gradient(50% 26% at 78% 20%,color-mix(in srgb,var(--sea) 25%,var(--night)),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--night) 60%,#000),color-mix(in srgb,var(--sea) 35%,var(--night)) 62%,var(--sea-deep))}
.scene .storm .ravens{position:absolute;left:-4%;right:-4%;top:0;height:56%;background:color-mix(in srgb,var(--night) 25%,#000);-webkit-mask-image:var(--ravens);mask-image:var(--ravens);-webkit-mask-position:center top;mask-position:center top;animation:rh-flock 40s ease-in-out infinite alternate}
.scene .storm .sea{position:absolute;inset:0;background:var(--grain),linear-gradient(180deg,var(--sea),var(--sea-deep));-webkit-mask-image:var(--waves);mask-image:var(--waves);animation:rh-swell 9s ease-in-out infinite alternate}
body.fs .scene .storm{opacity:1}
.scene .burn{background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 50%,rgba(8,6,10,.55) 100%)}
.scene .grain{opacity:.07;mix-blend-mode:overlay;background:var(--noise) 0 0/160px}
@keyframes rh-hearth{from{opacity:.8}to{opacity:1}}
@keyframes rh-flock{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
@keyframes rh-swell{from{transform:translateY(0)}to{transform:translateY(1.6%)}}

/* ---- title: the game's stencil face in carved bone on the dusk, a burnt shadow under it and a little hearth warmth
   (no plate; title.js centres it and balances the tracking) */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.05em;color:var(--title-ink);text-shadow:0 1px 0 #1A0E06,0 3px 8px rgba(0,0,0,.6),0 0 20px color-mix(in srgb,var(--ember) 28%,transparent)}
.ibtn{border:1px solid var(--iron-hi);box-shadow:inset 0 1px 0 var(--key),0 2px 5px rgba(0,0,0,.45)}
.ibtn:hover{border-color:var(--bone)}

/* ---- the hull: tarred clinker planks round the reels (each strake a lit lip on top, a dark overlap below), an iron
   band with a lit top edge and the rail hung with shields (variant "shields"); "clean"
   keeps a thin iron frame. Padding in px: the board measures it for its --cell. */
.frame{padding:calc(var(--sh) + 8px) 22px 14px;gap:8px}
.wall{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:14px 14px 34px 34px/14px 14px 44px 44px;
  background:linear-gradient(180deg,rgba(255,226,180,.05),transparent 40%),repeating-linear-gradient(180deg,rgba(255,226,180,.09) 0 1px,transparent 1px 21px,rgba(0,0,0,.42) 21px 23px,transparent 23px 24px),var(--grain),linear-gradient(180deg,color-mix(in srgb,var(--timber) 90%,#000),var(--timber-lo));
  box-shadow:inset 0 1px 0 rgba(255,236,206,.2),inset 0 0 0 3px var(--iron),inset 0 0 0 4px rgba(0,0,0,.65),inset 0 -2px 0 4px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.6),0 20px 44px rgba(0,0,0,.55),0 0 110px 16px color-mix(in srgb,var(--ember) 14%,transparent)}
.wall .row{position:absolute;left:10px;right:10px;height:var(--sh)}
.wall .row.top{top:4px;background:var(--shields) 0 50%/auto 100% round no-repeat,linear-gradient(180deg,transparent 34%,color-mix(in srgb,var(--timber-hi) 80%,#8A6A4A) 34% 39%,var(--timber) 39% 58%,var(--timber-lo) 58% 64%,transparent 64%)}
.wall .row.bot{display:none}
.board,.message{position:relative;z-index:1}
body[data-variant="clean"] .frame{padding:14px 14px 10px}
body[data-variant="clean"] .wall{border-radius:12px;background:color-mix(in srgb,var(--night) 72%,transparent);box-shadow:inset 0 0 0 2px var(--iron),0 16px 36px rgba(0,0,0,.45)}
body[data-variant="clean"] .wall .row{display:none}

/* ---- the reels: timber planks between iron hoops (bevelled, rivets at the corners) */
.nudge-board .nreel{box-shadow:inset 1px 0 0 rgba(255,228,190,.06),inset -2px 0 0 rgba(0,0,0,.4)}
.nudge-board .nreel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:
  radial-gradient(circle at 14% 3px,var(--iron-hi) 0 1.4px,transparent 2px),radial-gradient(circle at 86% 3px,var(--iron-hi) 0 1.4px,transparent 2px),
  radial-gradient(circle at 14% calc(100% - 3px),var(--iron-hi) 0 1.4px,transparent 2px),radial-gradient(circle at 86% calc(100% - 3px),var(--iron-hi) 0 1.4px,transparent 2px),
  linear-gradient(180deg,color-mix(in srgb,var(--iron-hi) 70%,#fff),var(--iron) 35%,var(--iron-lo)) top/100% 6px no-repeat,linear-gradient(180deg,var(--iron-hi),var(--iron) 45%,var(--iron-lo)) bottom/100% 6px no-repeat}
.nudge-board .nreel.tease{box-shadow:inset 0 0 22px color-mix(in srgb,var(--primary) 70%,transparent),inset 0 0 0 2px var(--primary)}
.nudge-board .nreel.cawing{box-shadow:inset 0 0 0 2px var(--moss),inset 0 0 18px color-mix(in srgb,var(--moss) 45%,transparent)}
/* wins: the cell is lit from inside (a warm wash and a ring), the symbol only breathes (no filter on it); the rest of
   the window steps back by opacity, a landed rune gets a rune-blue wash under it */
.nudge-board .cell.win{background:radial-gradient(circle at 50% 46%,rgba(255,206,140,.2),transparent 70%)}
.nudge-board .cell.win .sym{filter:none}
.nudge-board .cell.win::after{border-radius:8px;border-width:1.5px;box-shadow:inset 0 0 14px color-mix(in srgb,var(--win-glow) 40%,transparent),0 0 8px color-mix(in srgb,var(--win-glow) 45%,transparent);animation:rh-lit .3s var(--ease-out,ease-out) both}
.nudge-board .cell.dim .sym{filter:none;opacity:.42;transition:opacity .2s}
.nudge-board .cell.rune{background:radial-gradient(circle,color-mix(in srgb,var(--rune) 30%,transparent),transparent 68%)}
.nudge-board .cell.rune .sym{filter:none}
@keyframes rh-lit{from{opacity:0}}
/* arc-swoop: symbols arrive on a short arc from the upper left (a little lift and turn, no squash); a nudge's new
   symbol swoops in as the reel drops */
.nudge-board .cell.landed:not(.win) .sym{animation:rh-arc .34s cubic-bezier(.25,.8,.35,1.06) both}
.nudge-board .cell.landed:nth-child(2):not(.win) .sym{animation-delay:25ms}.nudge-board .cell.landed:nth-child(3):not(.win) .sym{animation-delay:50ms}
.nudge-board .cell.landed:nth-child(4):not(.win) .sym{animation-delay:75ms}.nudge-board .cell.landed:nth-child(5):not(.win) .sym{animation-delay:100ms}
.nudge-board .cell.enter:not(.win) .sym{animation:rh-enter .3s cubic-bezier(.25,.8,.35,1.05)}
@keyframes rh-arc{0%{transform:translate(-10%,-30%) rotate(-6deg) scale(.94);opacity:.4}60%{transform:translate(2%,2.5%) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes rh-enter{0%{transform:translate(-20%,-20%) rotate(-8deg) scale(.9);opacity:.3}100%{transform:none;opacity:1}}
/* the Shieldmaiden's art carries the word WILD on an iron plate; the tag is kept for screen readers only */
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.message{font-family:var(--ui);font-weight:600;letter-spacing:.01em;color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.7);max-width:100%}
.message b{color:var(--primary-hi)}

/* ---- the feature bar: a plank with the spin count, the budget pips and the total */
.fsbar{background:linear-gradient(180deg,var(--key),transparent 2px),var(--grain),linear-gradient(180deg,var(--timber-hi),var(--timber));border:1px solid var(--iron-hi);color:var(--ink);font-family:var(--ui);gap:16px;padding:5px 14px;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.fsbar b{color:var(--primary-hi)}
.fsbar .budget{display:flex;align-items:center;gap:6px}
.fsbar .budget small{font-size:13px;font-weight:600;color:var(--muted)}
.fsbar .pips{display:flex;gap:3px}
.fsbar .pip{width:9px;height:14px;border-radius:2px 2px 4px 4px;background:var(--timber-lo);border:1px solid var(--iron-hi)}
.fsbar .pip.on{background:radial-gradient(circle at 40% 30%,#E6F5FF,var(--primary) 70%);box-shadow:0 0 6px color-mix(in srgb,var(--primary) 60%,transparent)}
.fsbar .pip.fire{animation:rh-pip .5s var(--ease-out,ease-out)}
@keyframes rh-pip{0%{transform:scale(1.45)}100%{transform:none}}

/* ---- the plank bar: two planks with iron nails; balance, bet and win in light ink on dark wood */
.hud{position:relative;border:1px solid var(--iron-lo);box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 -2px 0 rgba(0,0,0,.35)}
.hud::before,.hud::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#C9D1D8,var(--iron) 45%,var(--iron-lo));box-shadow:0 1px 1px rgba(0,0,0,.6);pointer-events:none}
.hud::before{left:5px}.hud::after{right:5px}
.meter span{color:var(--muted);font-family:var(--ui)}
.meter b{color:var(--ink);font-family:var(--ui)}.meter.win b{color:var(--primary-hi)}
.pm,.auto{background:radial-gradient(circle at 36% 30%,#79828A,var(--iron) 48%,#2A2E33);color:var(--ink);border:1px solid var(--iron-lo);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(0,0,0,.5)}
/* the menhir: a standing stone lit from the top left (a cool rim on the lower right, a few lichen spots), the raven
   carved into it glows once as the spin starts (an opacity pulse of a light behind the carving, no filter) */
.spin{width:calc(var(--s)*.84);border-radius:46% 46% 40% 40%/62% 62% 26% 26%;color:var(--primary-hi);
  background:radial-gradient(60% 42% at 32% 20%,rgba(255,236,206,.24),transparent 70%),radial-gradient(circle at 24% 82%,rgba(126,155,87,.5) 0 3%,transparent 5%),radial-gradient(circle at 31% 88%,rgba(126,155,87,.4) 0 2%,transparent 4%),radial-gradient(circle at 74% 26%,rgba(201,196,138,.35) 0 2.4%,transparent 4.4%),repeating-radial-gradient(circle at 40% 30%,rgba(0,0,0,.06) 0 2px,transparent 2px 5px),var(--stone);
  box-shadow:inset -5px -8px 12px rgba(0,0,0,.5),inset 3px 4px 6px rgba(255,236,206,.14),inset -2px -2px 0 var(--rimc),0 10px 18px rgba(0,0,0,.55)}
.spin svg{width:64%;height:64%}
.spin::before{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 60%,transparent),transparent 66%)}
.spin.kick::before{animation:rh-glow .55s var(--ease-out,ease-out)}
@keyframes rh-glow{30%{opacity:.9}100%{opacity:0}}
.spin>.spin-ring{border-radius:46% 46% 40% 40%/62% 62% 26% 26%}
.side .tablet{background:linear-gradient(180deg,var(--key),transparent 2px),var(--grain),linear-gradient(180deg,var(--timber-hi),var(--timber));border:1px solid var(--iron-hi);color:var(--ink);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.side .tablet:hover:not(:disabled){border-color:var(--bone)}
.tablet .th{font-family:var(--display);font-weight:400;color:var(--title-ink)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays: the tier words in the stencil face, bone with hearth warmth */
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.03em}
.panel h2,.screen h2{color:var(--title-ink)}.panel h3{color:var(--bone)}
.ovcard h2{color:var(--title-ink);text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 30px color-mix(in srgb,var(--ember) 35%,transparent)}
.btn{font-family:var(--display);font-weight:400;border:1px solid var(--iron-lo)}
.ptc{background:color-mix(in srgb,var(--timber) 45%,transparent)}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.special .sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ptc .symbox,.special .symbox{border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 12px),linear-gradient(180deg,color-mix(in srgb,var(--timber) 82%,#6E4E34),var(--timber-lo));box-shadow:inset 0 2px 0 var(--iron),inset 0 -2px 0 var(--iron)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .blank{margin:0;color:var(--muted);font-size:14px}
.hullmap{display:flex;align-items:center;justify-content:center;gap:4px;width:96px;height:96px}
.hullmap .hcol{display:flex;flex-direction:column;gap:3px}
.hullmap i{display:block;width:11px;height:14px;border-radius:2px;background:color-mix(in srgb,var(--primary) 45%,var(--timber));border:1px solid var(--muted)}

/* ---- the storm wave (the Longship Spins transition) and the big-win feathers */
.stormwave{position:fixed;left:0;right:0;top:-14vh;height:114vh;z-index:36;pointer-events:none;display:none;transform:translateY(100%);will-change:transform;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sea) 45%,#E8F1F5) 0,var(--sea) 7vh,var(--sea-deep) 60%,color-mix(in srgb,var(--sea-deep) 70%,#000));
  -webkit-mask:var(--crest) 0 0/100% 14vh no-repeat,linear-gradient(#000,#000) 0 13.8vh/100% 100% no-repeat;mask:var(--crest) 0 0/100% 14vh no-repeat,linear-gradient(#000,#000) 0 13.8vh/100% 100% no-repeat}
.stormwave.show{display:block}
.feathers{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.feather{position:absolute;left:var(--x);top:-10vh;width:calc(30px*var(--s));height:calc(46px*var(--s));opacity:0;background:var(--c);-webkit-mask:var(--feather) center/contain no-repeat;mask:var(--feather) center/contain no-repeat;animation:rh-feather 2.8s cubic-bezier(.3,.2,.5,1) var(--d) forwards}
@keyframes rh-feather{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}12%{opacity:.95}55%{transform:translate(calc(var(--dx)*.6),52vh) rotate(calc(var(--r) + 120deg))}100%{opacity:0;transform:translate(var(--dx),96vh) rotate(calc(var(--r) + 220deg))}}

/* ---- reduced motion: straight drops (no arcs), still scene, no feathers (shell.css caps the rest) */
body.still .nudge-board .cell.landed .sym,body.still .nudge-board .cell.enter .sym,body.still .scene .hall .hearth,body.still .scene .storm .ravens,body.still .scene .storm .sea,body.still .spin.kick::before,body.still .fsbar .pip.fire,body.still .nudge-board .cell.win::after{animation:none}
body.still .feathers{display:none}
@media (prefers-reduced-motion:reduce){
  .nudge-board .cell.landed .sym,.nudge-board .cell.enter .sym,.scene .hall .hearth,.scene .storm .ravens,.scene .storm .sea,.spin.kick::before,.fsbar .pip.fire,.nudge-board .cell.win::after{animation:none!important}
  .feathers{display:none}
}

/* ---- phones: a lower rail, thin side padding, so six reels of ≈ 54 px fit in 344 px */
@media (max-width:860px),(max-aspect-ratio:4/5){
  :root{--sh:26px;--reel-gap:2px}
  .frame{padding:calc(var(--sh) + 6px) 4px 10px}
  .wall{border-radius:10px 10px 22px 22px/10px 10px 28px 28px}
  .wall .row{left:5px;right:5px}
  body[data-variant="clean"] .frame{padding:8px 4px 6px}
}
@media (max-width:400px){
  .logo h1{letter-spacing:0} /* the size comes from the shell (title.js fits it between the two button groups) */
  .fsbar{gap:8px;padding:4px 8px;font-size:13px}
  .fsbar .budget small{display:none}
  .fsbar .pip{width:6px;height:11px}
}