/* Samurai: Moon of Steel skin on the shared game shell: sumi ink, washi and polished steel under ONE key light, the full
   moon high on the left (everything is lit from that side: symbols, frame, spin button, scene). A moonlit bamboo valley in
   three depths (or a castle ridge), a shoji screen (lacquer stiles and rails, washi lit from behind) round the recessed
   steel reels, a hanging scroll as the side-column HUD, a tsuba spin
   button, paper scroll cards for the overlays and a diagonal katana cut into the Moonlit Spins. The theme tokens
   (--paper, --sumi, --vermilion, --silk) come from skin.js themeMap; steel, gold and lacquer are materials. */
:root{
  --paper:#F0E6D2; --sumi:#121418; --vermilion:#C8102E; --silk:#0C0D10; --silk-hi:#0E1013;
  --gold:#C9A45C; --gold-hi:#EBD397; --gold-lo:#7A5F2A; --lacquer:#0B0C0E; --steel-hi:#DCE2E9; --steel-lo:#2B3139;
  --ink:#F0E6D2; --muted:#DAD1BF; --hair:color-mix(in srgb,var(--gold) 40%,transparent);
  --display:"Shippori Mincho B1",Georgia,serif; --ui:"Zen Kaku Gothic New",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--gold) 40%,transparent); --radius:6px; --radius-sm:4px;
  --panel-bg:linear-gradient(180deg,var(--silk-hi),var(--silk)); --panel-border:var(--gold-lo);
  --hud-bg:linear-gradient(180deg,var(--silk-hi),var(--silk));
  --ibtn-bg:var(--silk); --ibtn-ink:var(--paper);
  --btn-bg:linear-gradient(180deg,#2E333B,var(--lacquer) 70%); --btn-ink:var(--gold-hi);
  /* polished steel with a hamon (the temper line of a blade): a static wave, the hardened edge a shade lighter */
  --window-bg:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 500 300%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 214C20 200 34 226 56 212S92 196 112 214 150 228 170 210 206 196 228 214 266 228 288 210 324 198 346 214 384 226 404 210 440 198 462 214 490 220 500 212V300H0Z%22 fill=%22%23fff%22 fill-opacity=%22.03%22/%3E%3Cpath d=%22M0 214C20 200 34 226 56 212S92 196 112 214 150 228 170 210 206 196 228 214 266 228 288 210 324 198 346 214 384 226 404 210 440 198 462 214 490 220 500 212%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.035%22 stroke-width=%2210%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M0 214C20 200 34 226 56 212S92 196 112 214 150 228 170 210 206 196 228 214 266 228 288 210 324 198 346 214 384 226 404 210 440 198 462 214 490 220 500 212%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.075%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center/100% 100% no-repeat,
    radial-gradient(70% 90% at 16% 0%,rgba(226,234,244,.16),transparent 70%),
    linear-gradient(168deg,#1B1F26 0%,#2A3039 16%,#46505C 25%,#2C333C 34%,#1D2128 58%,#242A32 82%,#1A1E24 100%);
  --window-radius:3px; --reel-sep:rgba(8,9,11,.55); --win-glow:#E9D9A6; --focus:var(--paper); --spin-blur:1.2px;
  --walk-trail:rgba(8,9,11,.85);
  /* the key light: the moon (its place in the sky, and its light behind the board) */
  /* the overlay amount sits on a black-lacquer tablet with a gold edge; the busy ring round the tsuba is gold */
  --ov-plate:linear-gradient(180deg,#2E343D,#0B0C0E 55%,#15181D); --ov-plate-line:color-mix(in srgb,var(--gold) 75%,transparent); --spin-ring:var(--gold);
  --moon:#E8EEF5; --moon-x:20%; --moon-y:16%; --moon-r:3.7vmin; --board-x:50%;
  --grain: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");
}
body{background:var(--bg)}
/* scene: the bamboo valley (default), the castle ridge, the Moonlit Spins' silver moon over the first snow. Far layers
   are paler and bluer (moonlit air), near ones darker; the far grove is cleared round the moon (its glare). Static
   layers; only the mist and the snow drift (transform) and the layers fade (opacity). Silhouettes are masks from skin.js. */
.scene .sky{background:
  radial-gradient(circle at var(--moon-x) var(--moon-y),#F6F8FB 0,#E4E9F0 calc(var(--moon-r)*.65),#C9D1DC calc(var(--moon-r)*.94),rgba(201,209,220,0) var(--moon-r)),
  radial-gradient(circle at var(--moon-x) var(--moon-y),color-mix(in srgb,var(--moon) 30%,transparent) 0,color-mix(in srgb,var(--moon) 10%,transparent) calc(var(--moon-r)*3.8),transparent calc(var(--moon-r)*10)),
  linear-gradient(180deg,color-mix(in srgb,var(--sumi) 72%,#24324A) 0%,color-mix(in srgb,var(--sumi) 78%,#5A6B84) 60%,color-mix(in srgb,var(--sumi) 86%,#8E9AAC) 72%,var(--sumi) 100%)}
body.bg-castle-ridge{--moon-x:24%;--moon-y:20%}
body.bg-castle-ridge .scene .sky{background:
  radial-gradient(circle at var(--moon-x) var(--moon-y),#F6F8FB 0,#E4E9F0 calc(var(--moon-r)*.6),#C9D1DC calc(var(--moon-r)*.88),rgba(201,209,220,0) calc(var(--moon-r)*.94)),
  radial-gradient(circle at var(--moon-x) var(--moon-y),color-mix(in srgb,var(--moon) 24%,transparent) 0,transparent 30vmin),
  linear-gradient(180deg,var(--sumi) 0%,color-mix(in srgb,var(--sumi) 84%,var(--vermilion)) 58%,color-mix(in srgb,var(--sumi) 78%,var(--paper)) 70%,var(--sumi) 100%)}
.scene .bamboo,.scene .ridge{-webkit-mask-position:center bottom;mask-position:center bottom;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .8s}
/* the far and middle groves fade out round the moon (its glare); the near one stays a silhouette across it */
.scene .bamboo.far,.scene .bamboo.mid{--glare:radial-gradient(circle at var(--moon-x) var(--moon-y),transparent 0 calc(var(--moon-r)*1.3),#000 calc(var(--moon-r)*4.4));
  -webkit-mask-size:100% 100%,cover;mask-size:100% 100%,cover;-webkit-mask-position:0 0,center bottom;mask-position:0 0,center bottom;-webkit-mask-composite:source-in;mask-composite:intersect}
.scene .bamboo.far{background:linear-gradient(180deg,color-mix(in srgb,var(--sumi) 70%,#6F7F98),color-mix(in srgb,var(--sumi) 64%,#8D9AAE));-webkit-mask-image:var(--glare),var(--bamboo-far);mask-image:var(--glare),var(--bamboo-far)}
.scene .bamboo.mid{background:linear-gradient(180deg,color-mix(in srgb,var(--sumi) 82%,#55647B),color-mix(in srgb,var(--sumi) 78%,#66748A));-webkit-mask-image:var(--glare),var(--bamboo-mid);mask-image:var(--glare),var(--bamboo-mid)}
.scene .bamboo.near{background:linear-gradient(180deg,color-mix(in srgb,var(--sumi) 80%,#000),color-mix(in srgb,var(--sumi) 55%,#000));-webkit-mask-image:var(--bamboo-near);mask-image:var(--bamboo-near)}
.scene .ridge{opacity:0}
.scene .ridge.far{background:color-mix(in srgb,var(--sumi) 76%,var(--paper));-webkit-mask-image:var(--ridge-far);mask-image:var(--ridge-far)}
.scene .ridge.near{background:color-mix(in srgb,var(--sumi) 60%,#000);-webkit-mask-image:var(--ridge-near);mask-image:var(--ridge-near)}
body.bg-castle-ridge .scene .ridge{opacity:1}
body.bg-castle-ridge .scene .bamboo{opacity:0}
.scene .mist{left:-10%;right:-10%;background:linear-gradient(180deg,transparent 48%,color-mix(in srgb,var(--moon) 10%,transparent) 64%,color-mix(in srgb,var(--moon) 4%,transparent) 76%,transparent 86%);animation:smos-mist 46s ease-in-out infinite alternate}
@keyframes smos-mist{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
/* moonlight in the air behind the board: it lifts the frame off the grove */
.scene .glow{background:radial-gradient(48% 46% at var(--board-x) 50%,color-mix(in srgb,var(--moon) 13%,transparent),color-mix(in srgb,var(--moon) 4%,transparent) 60%,transparent 100%)}
.scene .moonlit{opacity:0;transition:opacity .3s;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--sumi) 88%,#5A6B82) 0%,color-mix(in srgb,var(--sumi) 70%,#8C9AAD) 64%,var(--sumi) 100%)}
body.fs .scene .moonlit{opacity:1}
.moonlit i{position:absolute;display:block}
.moonlit .moon{width:24vmin;height:24vmin;left:22%;top:6%;margin-left:-12vmin;border-radius:50%;
  background:radial-gradient(circle at 62% 58%,rgba(120,132,148,.26),transparent 16%),radial-gradient(circle at 34% 66%,rgba(120,132,148,.18),transparent 12%),radial-gradient(circle at 44% 30%,rgba(120,132,148,.14),transparent 9%),radial-gradient(circle at 38% 34%,#F7F9FC,#DDE3EA 45%,#AEB8C4 80%,#8E99A6);
  box-shadow:0 0 0 1.4vmin rgba(220,228,240,.07),0 0 0 calc(1.4vmin + 2px) rgba(220,228,240,.32),0 0 70px rgba(220,228,240,.3)}
.moonlit .hills{inset:0;background:linear-gradient(180deg,#C3CCD7,#7D8896 70%,#5E6874);-webkit-mask:var(--snow) center bottom/cover no-repeat;mask:var(--snow) center bottom/cover no-repeat}
.moonlit .flakes{inset:-1040px 0 0 0;background-image:radial-gradient(2px 2px at 12% 18%,rgba(244,246,250,.85),transparent),radial-gradient(1.5px 1.5px at 46% 62%,rgba(244,246,250,.7),transparent),radial-gradient(2.4px 2.4px at 78% 34%,rgba(244,246,250,.6),transparent),radial-gradient(1.2px 1.2px at 64% 86%,rgba(244,246,250,.75),transparent);background-size:260px 260px;animation:smos-snow 36s linear infinite}
@keyframes smos-snow{to{transform:translate3d(0,1040px,0)}}
.scene .vig{background:radial-gradient(120% 100% at 50% 44%,transparent 52%,rgba(4,5,7,.32) 78%,rgba(4,5,7,.55) 100%)}
/* one static grain over the whole scene (never on the cells) */
.scene .washi{background:var(--grain) 0 0/160px 160px;opacity:.05}
@media (min-width:861px) and (min-aspect-ratio:4/5){:root{--board-x:59%}body.lefty{--board-x:41%}}
/* phones and tall tablets: the moon sits between the stalks (not behind one), a little larger than 3.7vmin; the
   Moonlit Spins moon stays on the left too (one key light everywhere), below the title row */
@media (max-width:860px),(max-aspect-ratio:4/5){:root{--moon-x:38%;--moon-y:20%;--moon-r:max(3.7vmin,20px)}
  .moonlit .moon{width:20vmin;height:20vmin;left:24%;top:max(11%,90px);margin-left:-10vmin}}
/* portrait tablets (title on the first header row): the moon high between the header and the shoji frame, not peeking
   over its top rail; the Moonlit Spins moon smaller, above the spins bar */
@media (min-width:601px) and (max-width:860px) and (orientation:portrait),(min-width:601px) and (max-aspect-ratio:4/5){:root{--moon-y:11%}
  .moonlit .moon{width:12vmin;height:12vmin;top:58px;margin-left:-6vmin}}
/* short phones: the moon rises between the title row and the shoji frame, not half behind its top rail. In the Moonlit
   Spins their sky between the title and the spins bar is ~30 px, too little for the disc, so the moon is out of frame
   up-left and only its light falls in (a soft glow, no edge; the title stays ≥ 7:1 over it) */
@media (max-width:860px) and (max-height:700px) and (orientation:portrait){:root{--moon-y:17%}
  .moonlit .moon{width:64vmin;height:64vmin;left:16%;top:-22vmin;margin-left:-32vmin;background:radial-gradient(closest-side,rgba(220,228,240,.2),rgba(220,228,240,.07) 55%,transparent);box-shadow:none}}
/* title, buttons, tags */
.logo h1{font-weight:700;letter-spacing:.04em;color:var(--paper);text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 24px color-mix(in srgb,var(--sumi) 80%,transparent)}
/* one display weight (700) everywhere: the 800 cut is never fetched */
.ovcard h2,.panel h2,.screen h2,.demo{font-weight:700}
.ibtn{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}.ibtn:hover{border-color:var(--gold)}
.demo,.auto span{background:var(--paper);color:var(--sumi)}
.screen{background:var(--silk)}
.toast{background:var(--silk);border-color:var(--gold-lo)}
.spinner{border-color:color-mix(in srgb,var(--paper) 20%,transparent);border-top-color:var(--paper)}
/* the shell's governed flash, should one fire (retrigger, big win): a faint moonlight tint, never white, never vermilion */
.flash{background:radial-gradient(circle at 50% 45%,rgba(220,228,240,.22),rgba(220,228,240,.08) 45%,transparent 75%)}
/* the shoji screen: washi lit from behind by the moon (brightest up-left), kumiko bars at the reel pitch, black lacquer
   stiles and rails bevelled to the same light, a red silk knot (behind the board: the frame is its own stacking context,
   so the board and the message stay on top without moving) */
.frame{isolation:isolate;padding:min(calc(var(--cell)*.2),20px) min(calc(var(--cell)*.22),22px) 10px}
.shoji{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:2px;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--cell) - 2px),rgba(8,9,11,.45) calc(var(--cell) - 2px) var(--cell)),
    radial-gradient(140% 130% at 14% 0%,color-mix(in srgb,var(--paper) 52%,var(--sumi)),color-mix(in srgb,var(--paper) 30%,var(--sumi)) 50%,color-mix(in srgb,var(--paper) 16%,var(--sumi)));
  box-shadow:0 28px 64px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.35)}
.shoji i{position:absolute;display:block}
.shoji .post{top:-8px;bottom:-8px;width:min(calc(var(--cell)*.1),12px);border-radius:2px;background:linear-gradient(90deg,#5A6474,#232830 24%,#0E1013 62%,#050607);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.shoji .post.l{left:-4px}.shoji .post.r{right:-4px}
.shoji .rail{left:0;right:0;height:min(calc(var(--cell)*.08),9px);background:linear-gradient(180deg,#5A6474,#1C2026 34%,#08090B)}
.shoji .rail.t{top:0}.shoji .rail.b{bottom:0}
.shoji .knot{top:-2px;right:calc(var(--cell)*-.34);width:calc(var(--cell)*.24);height:calc(var(--cell)*.6);transform-origin:50% 0;animation:smos-sway 7s ease-in-out infinite alternate;
  background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(0,0,0,.14) 2px 3px),linear-gradient(90deg,color-mix(in srgb,var(--vermilion) 70%,#fff),var(--vermilion) 35%,color-mix(in srgb,var(--vermilion) 62%,#000));
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 100%22%3E%3Cpath d=%22M20 0V15%22 stroke=%22%23000%22 stroke-width=%222.2%22/%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M20 17C10 12 5 22 14 26%22/%3E%3Cpath d=%22M20 17C30 12 35 22 26 26%22/%3E%3Cpath d=%22M14 26C5 30 10 41 20 36%22/%3E%3Cpath d=%22M26 26C35 30 30 41 20 36%22/%3E%3C/g%3E%3Cpath d=%22M20 20L25.5 26L20 32L14.5 26Z%22/%3E%3Cpath d=%22M16 38H24L26 44H14Z%22/%3E%3Cpath d=%22M14 44H26L28.5 92Q20 98 11.5 92Z%22/%3E%3C/svg%3E") center top/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 100%22%3E%3Cpath d=%22M20 0V15%22 stroke=%22%23000%22 stroke-width=%222.2%22/%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M20 17C10 12 5 22 14 26%22/%3E%3Cpath d=%22M20 17C30 12 35 22 26 26%22/%3E%3Cpath d=%22M14 26C5 30 10 41 20 36%22/%3E%3Cpath d=%22M26 26C35 30 30 41 20 36%22/%3E%3C/g%3E%3Cpath d=%22M20 20L25.5 26L20 32L14.5 26Z%22/%3E%3Cpath d=%22M16 38H24L26 44H14Z%22/%3E%3Cpath d=%22M14 44H26L28.5 92Q20 98 11.5 92Z%22/%3E%3C/svg%3E") center top/contain no-repeat}
@keyframes smos-sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
#board.reels-board{padding:4px;border-radius:2px;background:linear-gradient(180deg,#0E1013,var(--lacquer) 40%,#101216);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 50%,transparent),0 0 0 1px rgba(0,0,0,.6)}
/* variant "clean": no screen, a thin steel frame */
body[data-variant="clean"] .frame{padding:6px 6px 4px}
body[data-variant="clean"] .shoji{display:none}
body[data-variant="clean"] #board.reels-board{box-shadow:0 0 0 1px #8C96A3,0 0 0 3px #1A1D22,inset 0 0 0 1px rgba(220,228,240,.18),0 18px 46px rgba(0,0,0,.45)}
/* the message: a small ink plate on the screen */
.message{padding:1px 12px;border-radius:2px;background:color-mix(in srgb,var(--silk) 90%,transparent);box-shadow:inset 0 0 0 1px var(--hair)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--paper);text-decoration:underline 2px var(--gold);text-underline-offset:3px}
/* the steel reel window: a vignette over the hamon; the strips spin with a slash-stop (no bounce) */
/* the steel window sits in a niche: the light from above throws a shadow into its top, a 1 px lit lip at the bottom;
   separators are a dark line with a faint lit edge */
.reels-board .window{box-shadow:inset 0 16px 18px -10px rgba(0,0,0,.72),inset 0 -1px 0 rgba(220,228,240,.24),inset 0 0 0 1px rgba(0,0,0,.55)}
.reels-board .reel{box-shadow:inset -2px 0 0 -1px rgba(220,228,240,.06)}
.reels-board .reel.tease{box-shadow:inset 0 0 26px rgba(220,228,240,.6)}
/* landing: the hard cut of a blade (a short drop, no bounce) */
.reels-board .cell.landed .sym{animation:smos-land .16s cubic-bezier(.2,.9,.1,1)}
@keyframes smos-land{from{transform:translateY(-4%)}to{transform:none}}
/* a win: the shell's breathing symbol inside a brushed ensō of pale gold leaf (its glow is a wide faint stroke in the
   drawing: no filter); the rest step back by opacity */
.reels-board .cell.win::after{inset:1%;border:0;border-radius:50%;box-shadow:none;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cg fill=%22none%22 stroke=%22%23E9D9A6%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M62 9A42 42 0 1 0 90 40%22 stroke-width=%2212%22 stroke-opacity=%22.16%22/%3E%3Cpath d=%22M62 9A42 42 0 1 0 90 40%22 stroke-width=%225%22/%3E%3Cpath d=%22M90 40C91 33 88 24 82 18%22 stroke-width=%222.5%22 stroke-opacity=%22.7%22/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
/* the wild's art already carries the word WILD on a gold band (art.js): the tag stays as text 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}
/* the walkers: a gold ring round the cell each one covers (walk.css places and moves them). No plate: the win halo of the
   cell shows round the card, and the paylines are drawn over the walkers, so a line never breaks at the wild it needed */
.walk-board .walker{border-radius:3px;background:none}
.walk-board svg.lines{z-index:4}
.ptc .sym,.special .sym{width:100%;height:100%}
.special .sym{position:relative}.special .sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* cards, line minis, chips and toggles: a tint of the silk instead of the shell's black wash, so the light preset keeps
   its text at AA (pressed chips and checked toggles keep the shell's own colours) */
.ptc,.mini,.chips button,.tog{background:color-mix(in srgb,var(--paper) 6%,var(--silk))}
.ptc .symbox{border-radius:3px;background:linear-gradient(168deg,#1B1F26,#2A3039 20%,#3E4652 30%,#262C34 44%,#1D2128)}
.special .symbox{position:relative;width:96px;height:96px;border-radius:3px;background:linear-gradient(168deg,#1B1F26,#2A3039 20%,#3E4652 30%,#262C34 44%,#1D2128);box-shadow:inset 0 0 0 1px var(--hair)}
.ladder{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0;list-style:none}
.ladder li{padding:4px 10px;border:1px solid var(--line);border-radius:3px;font-weight:700}
/* the Moonlit Spins bar: silk with a small ringed moon before the line-multiplier badge */
.fsbar{background:var(--silk);border-color:var(--gold-lo);color:var(--ink)}
.fsbar b{color:var(--paper)}
.fsbar .fsx{color:var(--paper)}
.fsbar .fsx::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.4em;vertical-align:-.08em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F7F9FC,#AEB8C4 75%);box-shadow:0 0 0 1.5px var(--silk),0 0 0 2.5px var(--steel-hi)}
.fsbar .fsx:empty::before{display:none}
/* the HUD: silk; on wide screens the side column is a hanging scroll (lacquer stave and roller with gold caps, a gold
   hairline round the paper panel). Only paint: the shell lays the column out and mirrors it for left-handed players. */
.hud{border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.hud-side-column .hud{box-shadow:inset 0 3px 0 var(--lacquer),inset 0 4px 0 color-mix(in srgb,var(--gold) 55%,transparent),0 -6px 18px rgba(0,0,0,.35)}
.meter b{color:var(--ink)}.meter.win b{color:var(--paper)}
.pm,.auto{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.auto[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--gold) 70%,transparent)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-side-column .hud{border:0;border-radius:2px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.35);
    background:
      linear-gradient(90deg,var(--gold-lo),var(--gold-hi) 3px,var(--gold) 6px,transparent 6px calc(100% - 6px),var(--gold) calc(100% - 6px),var(--gold-hi) calc(100% - 3px),var(--gold-lo)) 0 0/100% 12px no-repeat,
      linear-gradient(180deg,#3A3F47,var(--lacquer) 55%,#22262C) 0 0/100% 12px no-repeat,
      linear-gradient(90deg,var(--gold-lo),var(--gold-hi) 3px,var(--gold) 7px,transparent 7px calc(100% - 7px),var(--gold) calc(100% - 7px),var(--gold-hi) calc(100% - 3px),var(--gold-lo)) 0 100%/100% 14px no-repeat,
      linear-gradient(180deg,#22262C,var(--lacquer) 45%,#3A3F47) 0 100%/100% 14px no-repeat,
      linear-gradient(var(--hair),var(--hair)) 8px 22px/calc(100% - 16px) 1px no-repeat,
      linear-gradient(var(--hair),var(--hair)) 8px calc(100% - 24px)/calc(100% - 16px) 1px no-repeat,
      linear-gradient(var(--hair),var(--hair)) 8px 22px/1px calc(100% - 46px) no-repeat,
      linear-gradient(var(--hair),var(--hair)) calc(100% - 8px) 22px/1px calc(100% - 46px) no-repeat,
      repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px),
      linear-gradient(180deg,var(--silk-hi),var(--silk) 18%,var(--silk) 82%,var(--silk-hi))}
  .hud-side-column .meter span{font-family:var(--display);letter-spacing:.02em}
}
/* the tsuba spin button: the quatrefoil is the button (blackened steel, gold rim); a half turn in 200 ms per spin */
.spin{color:var(--gold);background:none;box-shadow:none}
.spin svg{width:100%;height:100%}
.spin::before{content:"";position:absolute;left:12%;right:12%;bottom:-9%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.25) 60%,transparent);pointer-events:none}
.spin.kick svg{animation:smos-tsuba .2s cubic-bezier(.2,.9,.1,1)}
@keyframes smos-tsuba{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(180deg)}}
/* the katana cut into and out of the Moonlit Spins: two halves of an ink cover and a thin steel line (above the board,
   below the overlays; driven by skin.js) */
.cut{position:fixed;inset:0;z-index:20;pointer-events:none;display:none;overflow:hidden}
.cut.show{display:block}
.cut i{position:absolute;display:block}
.cut .half{inset:0;background:radial-gradient(circle at 24% 22%,color-mix(in srgb,var(--moon) 22%,transparent),transparent 30vmin),radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--sumi) 86%,#5A6B84),var(--sumi) 70%)}
.cut .half.a{clip-path:polygon(0 0,calc(100% + 2px) 0,0 calc(100% + 2px))}
.cut .half.b{clip-path:polygon(100% 0,100% 100%,0 100%)}
.cut .slash{left:0;top:100%;height:3px;margin-top:-1.5px;transform-origin:0 50%;opacity:0;background:linear-gradient(90deg,transparent,var(--steel-hi) 12%,#F4F6FA 50%,var(--steel-hi) 88%,transparent);box-shadow:0 0 12px rgba(220,228,240,.55),0 0 2px #fff}
/* overlays: a paper scroll card between a lacquer stave and roller; big wins add ink splashes behind the text */
.ovcard{--focus:var(--sumi);position:relative;isolation:isolate;padding:30px clamp(18px,4vw,48px);border-radius:3px;color:var(--sumi);box-shadow:0 24px 60px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#3A3F47,var(--lacquer) 60%,#22262C) 0 0/100% 12px no-repeat,linear-gradient(180deg,#22262C,var(--lacquer) 45%,#3A3F47) 0 100%/100% 14px no-repeat,
    radial-gradient(1px 1px at 20% 30%,rgba(0,0,0,.06),transparent) 0 0/160px 140px,radial-gradient(1.4px 1.4px at 60% 70%,rgba(0,0,0,.05),transparent) 0 0/160px 140px,var(--paper)}
.ovcard{max-width:min(820px,100%)}
.ovcard h2{font-weight:700;color:var(--sumi);letter-spacing:.04em;font-size:clamp(36px,6.4vw,84px)}
.overlay.bigwin.t1 .ovcard h2{font-size:clamp(40px,7.4vw,96px)}.overlay.bigwin.t2 .ovcard h2{font-size:clamp(44px,8.4vw,108px)}
.ovcard p{color:var(--sumi)}
.ovamt{color:var(--gold-hi)}
.btn{font-weight:700}
.ovcard .ink-splash{position:absolute;z-index:-1;left:var(--x);top:var(--y);width:calc(110px*var(--s));height:calc(110px*var(--s));margin:calc(-55px*var(--s)) 0 0 calc(-55px*var(--s));pointer-events:none;opacity:0;
  background:var(--sumi);-webkit-mask:var(--ink-splat) center/contain no-repeat;mask:var(--ink-splat) center/contain no-repeat;animation:smos-ink 2s cubic-bezier(.2,.9,.1,1) forwards}
@keyframes smos-ink{0%{opacity:0;transform:rotate(var(--r)) scale(.5)}12%{opacity:.24;transform:rotate(var(--r)) scale(1)}70%{opacity:.2}100%{opacity:0;transform:rotate(var(--r)) scale(1.04)}}
.btn{box-shadow:0 0 0 1.5px var(--gold-lo),0 8px 20px rgba(0,0,0,.45)}
.panel{box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--gold) 30%,transparent)}
.panel h2,.panel h3{color:var(--paper)}
/* phones: no room beside the board for the knot; a slimmer screen; the title may wrap; the feature bar may wrap */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:7px 7px 6px}
  .shoji .knot{display:none}
}
/* phones: the long name takes the header's second row (full width, one line, centred on the board's axis) instead of
   wrapping between the button groups */
@media (max-width:600px){
  .game>.top{row-gap:2px}
  .game>.top>.logo{grid-area:2/1/3/-1}
  .game>.top>.topr{grid-area:1/3}
  .logo h1{font-size:clamp(22px,7.2vw,30px);letter-spacing:.02em;line-height:1.1}
}
@media (max-width:400px){.fsbar{flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:4px 10px;font-size:13px}.fsbar .fsx{font-size:1em}}
/* reduced motion: no drift, no sway, no snow fall, no splashes (the walk.css trail and the cut are handled there and in skin.js) */
body.still .scene .mist,body.still .moonlit .flakes,body.still .shoji .knot,body.still .spin.kick svg{animation:none}
@media (prefers-reduced-motion:reduce){.scene .mist,.moonlit .flakes,.shoji .knot,.spin.kick svg{animation:none!important}.ovcard .ink-splash{display:none}.scene .moonlit,.scene .bamboo,.scene .ridge{transition-duration:.1s}}