/* Crown & Ledger skin on the shared game shell (dark theme): a woven tapestry hall lit by candle and window light from
   the top left. A great hall with tall lit windows and long swallow-tailed banners (or the castle ramparts at dawn),
   the coronation canopy in the Coronation Spins; a dressed-stone gatehouse round the board (variant "tapestry": a deep
   verdure tapestry hung in its arch with a quiet millefleur and a gold fringe; "stone": bare dressed stone), the reels
   in a recessed embroidered linen panel, the Royal Ledger as a linen page, a glossy red wax seal as the spin button,
   the HUD as a woad wool panel right of the board (split-sides; phones: the shell's thumb-zone HUD).
   One key light (top left) for the frame, the seal, the symbols and the scene; one static grain layer on the scene.
   Theme tokens (--bg, --panel, --ink, --muted, --primary, --rubric, --thread, the scene colours) come from
   skin.js themeMap; linen, wool ink, wax, gold, stone and iron are materials. Text on linen is wool ink or rubric;
   text on the dark grounds is --ink / --muted / --primary — each pair at 4.5:1 or more. Animations move transform /
   opacity only; no filter on the cells. No red ever flashes: the shell's governed flash is candlelight here. */
:root{
  --panel:#0A0C38; --panel-hi:#141846; --stone:#1E1E2E; --stone-hi:#34344A; --ink:#F6EBD8; --muted:#C9BFAE; --rubric:#6A2A12;
  --thread:#C8504A; --thread-hi:#FF7A70; --wall:#05062A; --wall-hi:#2A2A44; --glass:#FFD8B0; --banner-cloth:#B8342E; --sky-top:#03042A; --sky-low:#8A6A80;
  --linen-hi:#FAF3E3; --linen:#F1E6CC; --linen-lo:#DCCAA2; --wool-ink:#2A1810; --wool-brown:#6A4A2C; --wax:#A82820; --wax-hi:#E2584A; --wax-lo:#5E120E;
  --gold:#E2B54E; --gold-hi:#FFF0B8; --gold-lo:#8E6416; --iron:#24222A; --iron-hi:#77727E;
  --verdure:#10291A; --verdure-lo:#081710;
  --display:"IM Fell English SC",Georgia,serif; --ui:"Libre Franklin",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--primary) 30%,transparent); --radius:10px; --radius-sm:7px;
  /* every surface under text is one solid colour (its contrast is measurable, art direction §2.1); the light and the
     wool's texture live on the frame, the reels and the scene */
  --panel-bg:var(--panel); --panel-border:color-mix(in srgb,var(--gold) 38%,transparent);
  --hud-bg:var(--panel);
  --ibtn-bg:var(--panel); --ibtn-ink:var(--primary-hi);
  /* buttons are dark red wax with cream lettering (≥ 5:1); the spin button's seal is drawn by .spin::before */
  --btn-bg:radial-gradient(70% 60% at 36% 28%,rgba(255,190,170,.26),transparent 65%),linear-gradient(180deg,#B83A2E,#8E1F18); --btn-ink:#FFF0E6;
  /* the reel window: linen (its weave, lit from the top left); the recess and the stitched border are .window::after */
  --window-bg:repeating-linear-gradient(0deg,transparent 0 2px,rgba(106,74,44,.05) 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,rgba(106,74,44,.04) 2px 3px),
    radial-gradient(120% 95% at 34% 22%,var(--linen-hi),var(--linen) 58%,var(--linen-lo));
  --window-radius:4px; --reel-sep:rgba(106,74,44,.16); --win-glow:var(--gold); --focus:var(--primary-hi); --spin-blur:1px; --win-radius:6px;
  /* quiet line markers on the tapestry: a dark wool plate, cream numbers; the line's own colour is the 3 px bar */
  --peg-bg:color-mix(in srgb,var(--verdure) 86%,var(--gold)); --peg-ink:#EFE4CC;
  --spin-ring:color-mix(in srgb,var(--gold-hi) 80%,transparent);
  --veil-light:rgba(242,207,115,.16); --ov-plate:color-mix(in srgb,var(--panel) 86%,transparent); --ov-plate-line:color-mix(in srgb,var(--gold) 45%,transparent);
  /* the Royal Ledger (client/shared/boards/ledger.css) */
  --lg-bg:var(--linen-hi); --lg-ink:var(--wool-ink); --lg-muted:#5A3E24; --lg-edge:#8A6A44; --lg-title:var(--rubric); --lg-pip:#7A5A36; --lg-pip-on:var(--wax);
  --lg-filled:#E9C46A; --lg-filled-ink:var(--wool-ink); --lg-ribbon:#E9C46A; --lg-glow:#F2CF73; --lg-pop-ink:#FFF6DA; --lg-pop-stroke:var(--wool-ink);
  --stamp-ink:#FFF6DA; --stamp-bg:var(--wool-ink); --lg-radius:4px;
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene: the windows' light behind the hall wall (from the upper left, gathered behind the board), the banners,
   the ramparts at dawn (background "castle-ramparts"), the coronation canopy in the Coronation Spins; silhouettes are
   masks from skin.js; one static grain layer; a vignette ---- */
.scene .light{background:radial-gradient(48% 42% at 44% 38%,color-mix(in srgb,var(--glass) 46%,transparent),transparent 74%),radial-gradient(30% 40% at 16% 10%,color-mix(in srgb,var(--glass) 22%,transparent),transparent 70%),
  linear-gradient(180deg,transparent 16%,color-mix(in srgb,var(--glass) 24%,transparent) 28%,color-mix(in srgb,var(--glass) 14%,transparent) 60%,transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--glass) 30%,var(--bg)),var(--bg) 76%)}
.scene .hall,.scene .banners,.scene .ramparts,.scene .canopy,.scene .fringe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;transition:opacity .8s}
.scene .hall{background:repeating-linear-gradient(180deg,transparent 0 38px,rgba(0,0,0,.12) 38px 39px,rgba(255,240,220,.03) 39px 40px),
  radial-gradient(60% 70% at 40% 30%,color-mix(in srgb,var(--glass) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--wall-hi),var(--wall) 72%);
  -webkit-mask-image:var(--hall-mask);mask-image:var(--hall-mask);-webkit-mask-position:center bottom;mask-position:center bottom}
.scene .banners{background:var(--banner-folds) center bottom/cover no-repeat,repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.08) 2px 3px),
  linear-gradient(180deg,color-mix(in srgb,var(--banner-cloth) 92%,#fff),color-mix(in srgb,var(--banner-cloth) 55%,#000));opacity:.72;
  -webkit-mask-image:var(--banners-mask);mask-image:var(--banners-mask);-webkit-mask-position:center bottom;mask-position:center bottom}
.scene .ramparts{opacity:0;background:linear-gradient(180deg,var(--wall-hi),var(--wall));-webkit-mask-image:var(--ramparts-mask);mask-image:var(--ramparts-mask);-webkit-mask-position:center bottom;mask-position:center bottom}
.scene .canopy{opacity:0;background:repeating-linear-gradient(90deg,rgba(255,214,190,.1) 0 6px,rgba(255,214,190,.03) 6px 18px,rgba(0,0,0,.08) 18px 34px,rgba(0,0,0,.34) 34px 46px,rgba(0,0,0,.12) 46px 58px,transparent 58px 64px),
  linear-gradient(180deg,color-mix(in srgb,var(--banner-cloth) 72%,#000),color-mix(in srgb,var(--banner-cloth) 38%,#000));
  -webkit-mask-image:var(--canopy-mask);mask-image:var(--canopy-mask);-webkit-mask-position:center top;mask-position:center top}
.scene .fringe{opacity:0;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 50%,var(--gold-lo));-webkit-mask-image:var(--fringe-mask);mask-image:var(--fringe-mask);-webkit-mask-position:center top;mask-position:center top}
.scene .vignette{background:radial-gradient(115% 90% at 46% 40%,transparent 46%,color-mix(in srgb,var(--bg) 70%,#000) 100%)}
.scene .grain{background:var(--grain) 0 0/160px 160px;opacity:.07;mix-blend-mode:overlay}
body.bg-castle-ramparts .scene .light{background:radial-gradient(40% 26% at 50% 70%,rgba(255,214,170,.4),transparent 70%),linear-gradient(180deg,var(--sky-top),var(--sky-low) 80%)}
body.bg-castle-ramparts .scene .hall,body.bg-castle-ramparts .scene .banners{opacity:0}
body.bg-castle-ramparts .scene .ramparts{opacity:.95}
body.fs .scene .canopy{opacity:.9}body.fs .scene .fringe{opacity:.5}
body.fs .scene .light{background:radial-gradient(50% 40% at 50% 40%,rgba(255,226,160,.42),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--glass) 42%,var(--bg)),var(--bg) 80%)}

/* the shell's governed flash (big-win tiers): candlelight, never the red accent */
.flash{background:radial-gradient(circle at 50% 45%,rgba(255,244,214,.9),rgba(242,207,115,.32) 45%,transparent 80%)}

/* ---- title: rubric capitals with no plate, a gilt lozenge-and-rule ornament each side (symmetric, inside the h1's
   padding, so the title's centre is its glyphs' centre — the shell's alignTitle keeps it over the board) ---- */
.logo h1{font-weight:400;letter-spacing:.02em;color:var(--primary);padding:0 30px;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--primary) 22%,transparent);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFF0B8'/><stop offset='.5' stop-color='%23E2B54E'/><stop offset='1' stop-color='%238E6416'/></linearGradient></defs><path d='M0 6.4H9' stroke='url(%23g)' stroke-width='1.2'/><path d='M15 1L19.6 6L15 11L10.4 6Z' fill='url(%23g)'/><circle cx='21' cy='6' r='1' fill='%23E2B54E'/></svg>") left center/22px 12px no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFF0B8'/><stop offset='.5' stop-color='%23E2B54E'/><stop offset='1' stop-color='%238E6416'/></linearGradient></defs><path d='M13 6.4H22' stroke='url(%23g)' stroke-width='1.2'/><path d='M7 1L11.6 6L7 11L2.4 6Z' fill='url(%23g)'/><circle cx='1' cy='6' r='1' fill='%23E2B54E'/></svg>") right center/22px 12px no-repeat}
.ibtn,.pm,.auto{background:var(--panel);color:var(--primary-hi);border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
.pm{min-width:30px}
.demo,.auto span{background:var(--primary);color:var(--bg)}
.screen{background:var(--bg)}.screen h2{font-weight:400}
.btn{font-weight:400;box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,214,190,.35),inset 0 0 0 1px rgba(255,214,190,.2)}
.btn.ghost{background:var(--panel);color:var(--primary-hi)}

/* ---- the gatehouse: battlements of dressed stone (lit tops, shaded right faces) over a stone arch; in its arch the
   tapestry hangs (variant "tapestry") with a gold fringe at its foot ---- */
.frame{isolation:isolate;padding:44px 22px 16px}
.gate{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gate i{position:absolute;display:block}
.gate .battlements{left:-10px;right:-10px;top:0;height:40px;
  background:repeating-linear-gradient(90deg,rgba(255,240,215,.16) 0 2px,transparent 2px 24px,rgba(0,0,0,.28) 24px 30px,transparent 30px 44px),
    linear-gradient(180deg,color-mix(in srgb,var(--stone-hi) 70%,#fff) 0 2px,var(--stone-hi) 3px,var(--stone) 70%,color-mix(in srgb,var(--stone) 70%,#000));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 30px,transparent 30px 44px) top/100% 16px no-repeat,linear-gradient(#000,#000) bottom/100% 25px no-repeat;
  mask:repeating-linear-gradient(90deg,#000 0 30px,transparent 30px 44px) top/100% 16px no-repeat,linear-gradient(#000,#000) bottom/100% 25px no-repeat}
.gate .arch{left:0;right:0;top:34px;bottom:0;border-radius:44px 44px 8px 8px;
  background:linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(0,0,0,.22) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/88px 30px,
    linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(0,0,0,.22) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 44px 15px/88px 30px,
    repeating-linear-gradient(180deg,transparent 0 14px,rgba(0,0,0,.24) 14px 15px),
    radial-gradient(120% 90% at 26% 8%,rgba(255,236,200,.12),transparent 60%),linear-gradient(180deg,var(--stone-hi),var(--stone));
  box-shadow:0 22px 44px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35),inset 1px 1px 0 rgba(255,240,215,.22),inset -1px -1px 0 rgba(0,0,0,.4)}
/* the tapestry in the arch: deep verdure wool, its weft, a quiet millefleur, recessed (the arch's shadow falls on it
   from above), a madder-and-gold border woven in */
.gate .cloth{left:9px;right:9px;top:44px;bottom:9px;border-radius:36px 36px 4px 4px;
  background:radial-gradient(90% 70% at 40% 20%,rgba(255,236,200,.07),transparent 70%),var(--millefleur) 0 0/96px 96px,repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px),
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px),linear-gradient(180deg,var(--verdure),var(--verdure-lo));
  box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.6),inset 0 0 0 2px color-mix(in srgb,var(--thread) 60%,var(--verdure)),inset 0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent)}
.gate .fringe-l,.gate .fringe-r{bottom:-7px;height:9px;width:calc(50% - 30px);background:repeating-linear-gradient(90deg,var(--gold) 0 1.5px,var(--gold-lo) 1.5px 2.5px,transparent 2.5px 5px);opacity:.85}
.gate .fringe-l{left:16px}.gate .fringe-r{right:16px}
/* variant "stone": the arch is bare dressed stone with a portcullis groove over the reels, no tapestry, no fringe */
body[data-variant="stone"] .gate .cloth{background:linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(0,0,0,.26) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/96px 64px,
  linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(0,0,0,.26) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 48px 32px/96px 64px,
  repeating-linear-gradient(180deg,transparent 0 30px,rgba(0,0,0,.28) 30px 31px,rgba(255,240,215,.05) 31px 32px),radial-gradient(90% 70% at 30% 10%,rgba(255,236,200,.1),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--stone) 80%,#000),color-mix(in srgb,var(--stone) 60%,#000));
  box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4)}
body[data-variant="stone"] .gate .fringe-l,body[data-variant="stone"] .gate .fringe-r{display:none}

/* ---- the embroidered linen panel: a gilt hairline round it, recessed (the light from above throws the frame's shadow
   into it), a running stitch in madder just inside its edge; quiet seams between the reels ---- */
#board.reels-board .window{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-lo) 80%,#000),0 0 0 3px color-mix(in srgb,var(--gold) 82%,transparent),0 0 0 4px rgba(20,10,4,.55),0 10px 22px rgba(0,0,0,.45)}
#board.reels-board .window::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 16px 14px -12px rgba(48,28,10,.45),inset 0 -1px 0 rgba(255,255,255,.55),inset 0 0 22px rgba(106,74,44,.14);
  background:linear-gradient(90deg,color-mix(in srgb,var(--thread) 70%,var(--wool-ink)) 50%,transparent 50%) 6px 6px/8px 1.5px repeat-x,linear-gradient(90deg,color-mix(in srgb,var(--thread) 70%,var(--wool-ink)) 50%,transparent 50%) 6px calc(100% - 6px)/8px 1.5px repeat-x,
    linear-gradient(180deg,color-mix(in srgb,var(--thread) 70%,var(--wool-ink)) 50%,transparent 50%) 6px 6px/1.5px 8px repeat-y,linear-gradient(180deg,color-mix(in srgb,var(--thread) 70%,var(--wool-ink)) 50%,transparent 50%) calc(100% - 6px) 6px/1.5px 8px repeat-y;
  opacity:.62}
.reels-board .reel+.reel{box-shadow:inset 1px 0 0 rgba(255,255,255,.45)}
.reels-board .peg{border-color:color-mix(in srgb,var(--gold) 26%,transparent)}
.reels-board svg.lines polyline:last-child{filter:drop-shadow(0 0 1.2px rgba(42,24,16,.85))}

/* symbols: motion "banner-unfurl" — a landing symbol unrolls a little from its top edge and settles (overshoot ≤ 5 %);
   wins breathe in a lit gilt frame (the shell's throb, centred); the rest step back by opacity (no filter) */
.reels-board .sym{transform-origin:50% 0}
.reels-board .cell.landed .sym{animation:jk-unfurl .44s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.reels-board .cell.win .sym{transform-origin:50% 54%}
.reels-board .cell.win::after{inset:4%;border:1.5px solid color-mix(in srgb,var(--gold) 90%,#fff);border-radius:var(--win-radius);
  box-shadow:0 0 0 1px rgba(42,24,16,.35),0 0 14px color-mix(in srgb,var(--gold) 60%,transparent),inset 0 0 14px color-mix(in srgb,var(--gold) 34%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
.reels-board .reel.tease{box-shadow:inset 0 0 26px color-mix(in srgb,var(--gold) 70%,transparent)}
@keyframes jk-unfurl{0%{transform:translateY(-5%) scaleY(.9);opacity:.55}58%{transform:translateY(1.2%) scaleY(1.02);opacity:1}100%{transform:none}}

/* the Royal Ledger: a linen page with a gilt hairline and a stitched rule, the crest rows like an account book */
.ledger-board .ledger{background:var(--lg-bg);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-lo) 80%,#000),0 0 0 3px color-mix(in srgb,var(--gold) 80%,transparent),0 0 0 4px rgba(20,10,4,.5),inset 0 0 0 4px var(--lg-bg),inset 0 0 0 5px color-mix(in srgb,var(--thread) 55%,transparent),0 10px 22px rgba(0,0,0,.45)}
.ledger-board .ledger.glow{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-lo) 80%,#000),0 0 0 3px var(--lg-glow),0 0 26px var(--lg-glow)}
.ledger-board .ledger.ring{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-lo) 80%,#000),0 0 0 3px var(--lg-glow)}
.ledger-board .lg-title{color:var(--rubric)}
.ledger-board .lg-row{background:color-mix(in srgb,var(--lg-bg) 86%,var(--lg-edge));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(106,74,44,.18)}

/* the message: a linen label under the reels, wool ink with rubric amounts (above the board: pegs never cover it) */
.message{position:relative;z-index:1;padding:1px 12px;border-radius:3px;background:var(--linen-hi);color:var(--wool-ink);font-family:var(--ui);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent),0 3px 8px rgba(0,0,0,.35)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--rubric)}

/* the Coronation Spins bar: a linen strip with a gilt rule */
.fsbar{flex-wrap:wrap;justify-content:center;gap:14px;background:var(--linen-hi);border-color:color-mix(in srgb,var(--gold) 70%,var(--gold-lo));color:var(--wool-ink);font-family:var(--ui);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fsbar b{color:var(--rubric)}
.fsbar .fs-gift{font-weight:800;padding:0 8px;border-radius:999px;background:var(--wool-ink);color:var(--linen-hi)}
/* phones: the bar keeps to one line when "+4 gifted" joins it mid-round (wrapped, it grew into the header on 320 px) */
@media (max-width:400px){.fsbar{gap:7px;padding:5px 10px;font-size:13px}.fsbar .fs-gift{padding:0 6px}}

/* ---- HUD "split-sides": a woad wool panel right of the board (left with the left-handed setting); phones: the shell's
   thumb-zone HUD on the same wool ---- */
.hud{font-family:var(--ui);border-color:color-mix(in srgb,var(--gold) 34%,transparent);box-shadow:inset 0 1px 0 rgba(255,236,200,.1),inset 0 0 0 3px color-mix(in srgb,var(--panel-hi) 60%,transparent),0 12px 28px rgba(0,0,0,.4)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-side-column{grid-template-columns:minmax(0,1fr) minmax(190px,232px)}
  .hud-side-column>.stage{grid-column:1}
  .hud-side-column>.hud{grid-column:2}
  body.lefty .hud-side-column{grid-template-columns:minmax(190px,232px) minmax(0,1fr)}
  body.lefty .hud-side-column>.stage{grid-column:2}
  body.lefty .hud-side-column>.hud{grid-column:1}
  .hud-side-column>.hud{border-radius:12px 12px 6px 6px}
}
/* the buy tablet: a woven plaque with a gilt hairline, at least 48 px tall (touch target) */
.side.left .tablet{min-height:48px;background:var(--panel);border-color:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:inset 0 1px 0 rgba(255,236,200,.1),0 6px 16px rgba(0,0,0,.35)}
/* the wax seal: a glossy blob of red wax lit from the top left (a sharp highlight, reflected light low right), its
   contact shadow, a crown pressed into a sunken field inside a beaded ring (≥ 72 px) */
.spin{isolation:isolate;background:none;box-shadow:none;color:#FFD8C8;filter:drop-shadow(0 7px 7px rgba(0,0,0,.5))}
.spin::before{content:"";position:absolute;inset:-5%;z-index:-1;
  background:radial-gradient(12% 8% at 30% 24%,rgba(255,246,240,.9),transparent 100%),radial-gradient(46% 36% at 34% 28%,rgba(255,196,176,.5),transparent 70%),
    radial-gradient(60% 50% at 74% 82%,rgba(255,120,100,.28),transparent 70%),radial-gradient(circle at 44% 40%,var(--wax-hi),var(--wax) 52%,var(--wax-lo) 92%);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2C58 1 63 7 70 7C78 8 82 15 88 19C94 25 92 33 96 39C99 46 95 53 96 60C96 68 90 72 87 79C82 86 75 85 69 91C62 97 56 94 50 97C42 99 37 93 30 92C22 90 18 84 13 79C8 73 9 66 5 59C2 51 6 45 7 38C9 30 15 26 20 20C26 13 33 13 40 6C43 3 47 2 50 2Z'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2C58 1 63 7 70 7C78 8 82 15 88 19C94 25 92 33 96 39C99 46 95 53 96 60C96 68 90 72 87 79C82 86 75 85 69 91C62 97 56 94 50 97C42 99 37 93 30 92C22 90 18 84 13 79C8 73 9 66 5 59C2 51 6 45 7 38C9 30 15 26 20 20C26 13 33 13 40 6C43 3 47 2 50 2Z'/></svg>") center/100% 100% no-repeat}
/* the pressed field: a sunken disc (shadow on its upper left wall, light on its lower right lip) */
.spin::after{content:"";position:absolute;inset:17%;z-index:-1;border-radius:50%;background:radial-gradient(circle at 56% 60%,#B42E24,#8A1A14 70%);
  box-shadow:inset 2px 3px 4px rgba(58,6,4,.7),inset -1px -2px 2px rgba(255,150,130,.35),0 -1px 0 rgba(58,6,4,.3)}
.spin svg{width:56%;height:56%;filter:drop-shadow(1px 1.5px 0 rgba(255,150,130,.45)) drop-shadow(-.5px -1px 0 rgba(70,8,6,.8))}
.spin:hover:not(:disabled){filter:drop-shadow(0 7px 7px rgba(0,0,0,.5)) brightness(1.06)}
.spin:disabled{filter:saturate(.45) opacity(.72) drop-shadow(0 6px 8px rgba(0,0,0,.5))}

/* panels: dark wool pages with rubric titles; the big-win card in candlelight */
.overlay{background:radial-gradient(42% 30% at 50% 42%,var(--veil-light),transparent),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--bg) 97%,#000) 75%)}
.ovcard h2{font-weight:400;color:var(--primary);text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 28px color-mix(in srgb,var(--primary) 30%,transparent)}.ovamt{color:var(--ink)}
/* the Fell capitals are wide: a title word never breaks — "CORONATION" (7.4 em) always fits the screen's width */
.ovcard h2{overflow-wrap:normal;font-size:min(clamp(44px,9vw,116px),calc((100vw - 48px) / 7.6))}
.overlay.bigwin.t1 h2{font-size:min(clamp(50px,10.5vw,138px),calc((100vw - 48px) / 7.6))}
.overlay.bigwin.t2 h2{font-size:min(clamp(56px,12vw,160px),calc((100vw - 48px) / 7.6))}
.overlay .pennant{position:absolute;left:var(--x);top:-12%;width:30px;height:64px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c) 35%,color-mix(in srgb,var(--c) 62%,#000));
  clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);transform-origin:50% 0;animation:jk-pennant 2.6s var(--d) cubic-bezier(.4,0,.6,1) forwards}
@keyframes jk-pennant{0%{transform:translateY(0) rotate(var(--r));opacity:0}12%{opacity:1}50%{transform:translateY(55vh) rotate(calc(var(--r) * -1))}100%{transform:translateY(118vh) rotate(var(--r));opacity:.9}}
.sheet{background:rgba(4,4,20,.74)}
.panel h2,.panel h3{font-weight:400}
.mini{background:rgba(0,0,0,.25)}
table.crests{border-collapse:collapse;width:100%;margin:8px 0;font-size:15px}
table.crests th,table.crests td{padding:6px 6px;border-bottom:1px solid var(--line);text-align:right}
@media (max-width:400px){table.crests{font-size:13px}table.crests th,table.crests td{padding:5px 3px}.crestcell{gap:5px}.crestcell img{width:26px;height:26px}}
table.crests th:first-child,table.crests td:first-child{text-align:left}
table.crests thead th{color:var(--muted);font-size:13px;font-weight:700}
table.crests tbody th{font-weight:700}
.crestcell{display:flex;align-items:center;gap:8px}.crestcell img{width:34px;height:34px;flex:none}.crestcell small{display:block;font-weight:500;font-size:12px;color:var(--muted)}

/* the portcullis that drops over the screen into and out of the Coronation Spins (skin.js): forged bars lit from the
   left over a dark veil, spikes at its foot */
.portcullis{position:fixed;inset:0;z-index:45;pointer-events:none;display:none}
.portcullis.show{display:block}
.portcullis i{position:absolute;display:block}
.portcullis .bars{inset:0 0 26px 0;background:repeating-linear-gradient(90deg,transparent 0 34px,#0E0D12 34px 35px,var(--iron-hi) 35px 37px,var(--iron) 37px 42px,#0E0D12 42px 46px),
  repeating-linear-gradient(180deg,transparent 0 58px,#0E0D12 58px 59px,var(--iron-hi) 59px 61px,var(--iron) 61px 66px,#0E0D12 66px 68px),color-mix(in srgb,var(--bg) 88%,#000)}
.portcullis .spikes{left:0;right:0;bottom:0;height:28px;background:linear-gradient(90deg,var(--iron-hi),var(--iron) 40%,#0E0D12) 0 0/46px 28px repeat-x;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='28'><path d='M34 0H46L40 28Z'/></svg>") 0 0/46px 28px repeat-x;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='28'><path d='M34 0H46L40 28Z'/></svg>") 0 0/46px 28px repeat-x}

/* phones: a thin arch round the ledger and the reels (cells ≈ 64 px at 360 px), the battlements lower */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:26px 7px 9px}
  .gate .battlements{height:26px;-webkit-mask-size:100% 10px,100% 16px;mask-size:100% 10px,100% 16px;left:-4px;right:-4px}
  .gate .arch{top:20px;border-radius:24px 24px 6px 6px}
  .gate .cloth{left:4px;right:4px;top:25px;bottom:4px;border-radius:20px 20px 3px 3px}
  .gate .fringe-l,.gate .fringe-r{display:none}
  .hud{background:var(--hud-bg);border-color:color-mix(in srgb,var(--gold) 32%,transparent)}
  .logo h1{font-size:clamp(17px,5.6vw,34px);padding:0 22px;background-size:16px 9px}
}
/* the narrowest phones: the ornaments give their room back to the name */
@media (max-width:400px){.logo h1{padding:0 4px;background:none}}
@media (max-width:400px){.betctl{gap:4px}}
/* the smallest phones (320 px): the line bet under the bet stays in the paytable's lead, so the HUD keeps two rows */
@media (max-width:359px){#mBetSub{display:none}}
/* phones: the Buy plaque has nothing to offer while the Coronation Spins play (the shell disables it): the free-spin
   bar takes its row */
@media (max-width:860px),(max-aspect-ratio:4/5){body.fs #sideL{display:none!important}.side.left .tablet{min-height:44px}}
/* short phones (568–640 px tall): a lower gatehouse */
@media (max-width:860px) and (max-height:660px){
  .frame{padding:17px 5px 6px}
  .gate .battlements{height:18px;-webkit-mask-size:100% 8px,100% 11px;mask-size:100% 8px,100% 11px}
  .gate .arch{top:13px;border-radius:16px 16px 6px 6px}
  .gate .cloth{top:17px;border-radius:13px 13px 3px 3px}
}
/* reduced motion: no unfurl, no pennants (the portcullis only fades, skin.js; the shell stills the win throb) */
@media (prefers-reduced-motion:reduce){
  .reels-board .cell.landed .sym{animation:none}
  .overlay .pennant{display:none}
}