/* Starfall Chess - BNBG Black Gold skin, game-specific parts (the shared kit is skin-bnbg.css).
   Scoped under html[data-skin="bnbg"]; classic is untouched. Visual only: stars and wins stay a progress record. */
html[data-skin="bnbg"]{--bnbg-serif:Georgia,'Times New Roman','Noto Serif','Droid Serif','DejaVu Serif','Liberation Serif',serif;--bx-panel:linear-gradient(165deg,#22231F 0%,#0D0D0B 62%,#090908 100%);--bx-hair:rgba(183,157,98,.34)}

/* ---------- crest chip (always visible; gold on obsidian, lit while BNBG is on) ---------- */
html[data-skin="bnbg"] .ibtn.crest img{width:24px;height:24px;filter:drop-shadow(0 0 6px rgba(212,175,55,.2))}
html[data-skin="bnbg"] .ibtn.crest[aria-pressed="true"]{border-color:rgba(232,199,106,.7);box-shadow:inset 0 1px 0 rgba(255,240,183,.16),0 6px 16px rgba(0,0,0,.55),0 0 16px rgba(212,175,55,.22)}
html[data-skin="bnbg"] #app.wide .ibtn.crest img{width:29px;height:29px}

/* ---------- splash ---------- */
html[data-skin="bnbg"] #scr-splash{background:linear-gradient(#0A0A0Af2 0,#0A0A0A99 24%,#0A0A0A00 42%,#0A0A0A00 60%,#0A0A0Acc 80%,#0A0A0A 100%)}
html[data-skin="bnbg"] #scr-splash .bnbg-mark.lg{position:absolute;top:calc(22px + var(--sat));left:0;right:0;justify-content:center}
/* the crest chip is the only crest on the splash, so it reads as the switch and not as a second logo */
html[data-skin="bnbg"] #scr-splash .bnbg-mark.lg img{display:none}
/* polished-metal wordmark: a bright band and a dark core line, the band drifts slowly through the letters */
html[data-skin="bnbg"] #scr-splash .logo{font-size:clamp(44px,13vw,88px);line-height:1;margin-top:3vh;transform:none!important;letter-spacing:.06em;
  background:linear-gradient(180deg,#FFF3C8 0%,#F1D27A 24%,#D4AF37 47%,#8A6B1F 51%,#C9A445 70%,#F6E08A 88%,#B79D62 100%);background-size:100% 300%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,243,200,.18)) drop-shadow(0 8px 22px rgba(0,0,0,.6));animation:sfc-shimmer 7s ease-in-out infinite}
html[data-skin="bnbg"] #scr-splash .logo span{font-size:.24em;letter-spacing:.62em;margin:14px 0 0 .62em}
@keyframes sfc-shimmer{0%,100%{background-position:0 0}50%{background-position:0 45%}}
html[data-skin="bnbg"] .splash-bot{background:radial-gradient(closest-side,#0A0A0Ad9 45%,#0A0A0A00 100%);gap:20px}
html[data-skin="bnbg"] .tagl{font-size:clamp(13px,3.6vw,17px);letter-spacing:.3em;text-transform:uppercase;color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .tagl b{color:var(--bnbg-label);font-weight:500;font-size:.78em;letter-spacing:.3em;margin-top:8px}
html[data-skin="bnbg"] #splash-go{min-width:220px;transform:none!important}
html[data-skin="bnbg"] #nogl{background:rgba(34,22,26,.92);border:1px solid rgba(255,107,128,.5);color:#FFC7CF;font-weight:400}

/* ---------- gold primaries: the one button you should press next ---------- */
html[data-skin="bnbg"] :is(.btn.pulse,.btn.go,#splash-go){background:var(--bnbg-fill) padding-box,linear-gradient(158deg,#FFF3C8,#B8913A 50%,#F1D27A) border-box;color:var(--bnbg-ink);font-weight:600;text-shadow:0 1px 0 rgba(255,248,230,.35)}
html[data-skin="bnbg"] :is(.btn.pulse,.btn.go,#splash-go):after{background-image:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%)}
html[data-skin="bnbg"] #splash-go{animation:bnbg-breathe 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html[data-skin="bnbg"] #splash-go,html[data-skin="bnbg"] #scr-splash .logo{animation:none}}
/* the in-app Reduced motion setting (Save.apply sets html[data-motion]) stops the CSS-only motion too: breathe, shimmer, sheen */
html[data-skin="bnbg"][data-motion="reduced"] :is(#splash-go,#scr-splash .logo,.btn.pulse,.btn){animation:none!important}
html[data-skin="bnbg"][data-motion="reduced"] .btn:after{transition:none!important}
html[data-skin="bnbg"][data-motion="reduced"] *{scroll-behavior:auto}

/* phone landscape: the title band stays on carbon above the board, the thin eyebrow and tagline stay legible */
@media (orientation:landscape) and (max-height:500px){
  html[data-skin="bnbg"] #scr-splash{padding-top:calc(46px + var(--sat))}
  html[data-skin="bnbg"] #scr-splash .logo{font-size:min(9vw,15vh);margin-top:0}
  html[data-skin="bnbg"] #scr-splash .logo span{font-size:.3em;letter-spacing:.5em;margin-top:8px}
  html[data-skin="bnbg"] :is(#scr-splash .logo span,.tagl){text-shadow:0 2px 14px #000,0 0 2px #000}
  html[data-skin="bnbg"] #scr-splash .logo{filter:drop-shadow(0 2px 10px #000) drop-shadow(0 0 2px #000)}
  html[data-skin="bnbg"] .splash-bot{background:radial-gradient(closest-side,#0A0A0Af0 55%,#0A0A0A00)}
  html[data-skin="bnbg"] #scr-splash:before{content:'';position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;background:linear-gradient(#0A0A0A 0,#0A0A0Ae6 55%,#0A0A0A00)}
  html[data-skin="bnbg"] #scr-splash>*{position:relative}
  html[data-skin="bnbg"] #scr-splash>#splash-crest,html[data-skin="bnbg"] #scr-splash>.bnbg-mark.lg,html[data-skin="bnbg"] #scr-splash>.ver{position:absolute}
}

/* ---------- ladder map chrome ---------- */
html[data-skin="bnbg"] #scr-map:before{background:linear-gradient(#050505 0,#050505 calc(48px + var(--sat)),#050505e0 calc(70px + var(--sat)),#05050500)}
/* the ladder banner is a stitched leather plate: serif title, eyebrow progress line */
html[data-skin="bnbg"] #map-title{border-radius:16px;font-family:var(--bnbg-serif);font-weight:400;font-size:20px;line-height:1.1;letter-spacing:.02em;text-transform:none;color:var(--bnbg-text);padding:9px 24px 11px}
html[data-skin="bnbg"] #map-title small{font-family:var(--bnbg-font);color:var(--bnbg-eyebrow);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-top:5px;opacity:1}
html[data-skin="bnbg"] #app.wide #map-title{font-size:23px;padding:9px 28px 10px}
html[data-skin="bnbg"] #app.wide #map-title small{font-size:12px}
html[data-skin="bnbg"] #map-bar{background:linear-gradient(transparent,#0A0A0Ae6 45%,#0A0A0A 100%);gap:12px}

/* ---------- in-game panels ---------- */
/* stitched black leather (kit v1.2 recipe, md size) on the game's own plates: player cards, move list, ladder banner,
   status chip, tool-row housing. Same tokens and knobs as the kit surfaces, so one tile of grain serves them all. */
html[data-skin="bnbg"] :is(.gp,.bplate),html[data-skin="bnbg"] #map-title,html[data-skin="bnbg"] #g-tools{--bnbg-l-rim:4px;--bnbg-l-rimc:var(--bnbg-leather-rim);--bnbg-l-inset:6px;--bnbg-l-stitch:var(--bnbg-stitch-c);--bnbg-l-drop:0 14px 34px rgba(0,0,0,.6)}
html[data-skin="bnbg"] #g-status{--bnbg-l-rim:3px;--bnbg-l-rimc:var(--bnbg-leather-rim-sm);--bnbg-l-inset:4px;--bnbg-l-stitch:var(--bnbg-stitch-c-sm);--bnbg-l-drop:0 8px 20px rgba(0,0,0,.55)}
html[data-skin="bnbg"] :is(.gp,.bplate),html[data-skin="bnbg"] #map-title,html[data-skin="bnbg"] #g-tools,html[data-skin="bnbg"] #g-status{--bnbg-eyebrow:#D4B46A;--bnbg-label:#DCCDA4;--bnbg-muted:#D2C8B2;
  background:var(--bnbg-leather);border:1px solid var(--bnbg-leather-edge);
  box-shadow:inset 0 0 0 var(--bnbg-l-rim) var(--bnbg-l-rimc),var(--bnbg-leather-hi),var(--bnbg-l-drop);
  outline:0;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the stitch is a dashed BORDER on ::after (the BNBG world recipe), not the kit's inset outline: outlines only follow
   border-radius on Chrome 94+ / Safari 16.4+, so older iOS and Android WebViews would cut square corners through the plates.
   --bnbg-l-r is each plate's outer radius; the stitch radius is that minus the inset. */
html[data-skin="bnbg"] :is(.gp,#g-tools,.bplate){position:relative}
html[data-skin="bnbg"] :is(.gp,.bplate,#map-title,#g-tools,#g-status)::after{content:'';position:absolute;inset:calc(var(--bnbg-l-inset) - 1px);border:1px dashed var(--bnbg-l-stitch);
  border-radius:max(0px,calc(var(--bnbg-l-r,16px) - var(--bnbg-l-inset)));pointer-events:none}
html[data-skin="bnbg"] .gp{--bnbg-l-r:16px}html[data-skin="bnbg"] #map-title{--bnbg-l-r:16px}html[data-skin="bnbg"] .bplate{--bnbg-l-r:18px}
html[data-skin="bnbg"] #g-tools{--bnbg-l-r:20px}html[data-skin="bnbg"] #g-status{--bnbg-l-r:999px}
html[data-skin="bnbg"] #g-status{background:var(--bnbg-leather-sm)}
html[data-skin="bnbg"] .gp{border-radius:16px}
html[data-skin="bnbg"] .pcard{padding:9px 14px 9px 10px}
html[data-skin="bnbg"] #app.wide .pcard{padding:12px 16px 12px 12px}
/* whose turn: the edge and the stitch light up and the plate glows; the winner gets a brighter gold glow */
html[data-skin="bnbg"] .pcard.turn{border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi);--bnbg-l-drop:0 0 0 1px rgba(212,175,55,.22),0 0 26px rgba(212,175,55,.24),0 14px 34px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .pcard.winner{border-color:var(--bnbg-leather-edge-glow);--bnbg-l-stitch:var(--bnbg-stitch-hi);--bnbg-l-drop:0 0 0 1px rgba(241,210,122,.35),0 0 28px rgba(241,210,122,.28),0 14px 34px rgba(0,0,0,.6)}
/* the avatar sits in a recessed dark well pressed into the leather */
html[data-skin="bnbg"] .pcard .av{border:1px solid var(--bnbg-well-line);border-radius:13px;box-shadow:inset 0 2px 6px rgba(0,0,0,.75),0 1px 0 rgba(255,240,210,.07);background:radial-gradient(circle at 50% 28%,rgba(255,240,210,.09),transparent 62%),radial-gradient(circle at 50% 120%,rgba(255,240,210,.07),transparent 70%),var(--bnbg-leather-deep)}
/* onyx tray / side icons and empty stars are near-black on the dark leather: a champagne halo keeps them visible */
html[data-skin="bnbg"] :is(.pcard .side,.row.stars canvas[data-k="star0"]){filter:drop-shadow(0 0 1px #B79D62) drop-shadow(0 0 3px rgba(183,157,98,.35))}
/* captured pieces sit in a small champagne-tinted well pressed into the leather, each with one crisp hairline (no blur halo) */
html[data-skin="bnbg"] .tray:has(img){width:max-content;max-width:100%;padding:0 8px 0 6px;border-radius:9px;background:linear-gradient(180deg,rgba(232,207,143,.20),rgba(232,207,143,.12));box-shadow:inset 0 0 0 1px rgba(183,157,98,.38),inset 0 1px 2px rgba(0,0,0,.45)}
html[data-skin="bnbg"] .tray img{filter:drop-shadow(0 0 .6px rgba(243,226,180,.95))}
html[data-skin="bnbg"] .pcard .side{top:12px;right:14px}
html[data-skin="bnbg"] #app.wide .pcard .side{top:14px;right:16px}
/* player names: the cream serif of the leather titles */
html[data-skin="bnbg"] .pname{font-family:var(--bnbg-serif);font-weight:400;font-size:21px;line-height:1.15;letter-spacing:.01em;color:var(--bnbg-text)}
html[data-skin="bnbg"] #app.wide .pname{font-size:26px}
@media (max-height:700px){html[data-skin="bnbg"] .pname{font-size:18px}}
@media (min-width:700px) and (min-height:900px){html[data-skin="bnbg"] #app:not(.wide) .pname{font-size:26px}}
html[data-skin="bnbg"] .psub{font-weight:400;color:var(--bnbg-muted);opacity:1;letter-spacing:.03em}
html[data-skin="bnbg"] .tray b{color:var(--bnbg-gold-hi);text-shadow:none;font-weight:500}
html[data-skin="bnbg"] .think{background:#0F0F0D;border:1px solid var(--bx-hair);box-shadow:0 6px 16px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .think i{background:var(--bnbg-gold-hi)}
/* status chip over the board: small stitched leather, the state shows in the text, edge and stitch */
html[data-skin="bnbg"] #g-status{color:var(--bnbg-text-2);font-weight:500;font-size:11.5px;letter-spacing:.22em;padding:7px 18px 7px;border-radius:999px;text-shadow:none}
html[data-skin="bnbg"] #g-status.you{color:var(--bnbg-gold-bright);border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi);--bnbg-l-drop:0 0 18px rgba(212,175,55,.22),0 8px 20px rgba(0,0,0,.55)}
html[data-skin="bnbg"] #g-status.warn{color:#FFB3BF;border-color:rgba(255,107,128,.65);--bnbg-l-stitch:rgba(255,143,160,.6)}
html[data-skin="bnbg"] #g-status.bot{color:var(--bnbg-muted)}
html[data-skin="bnbg"] #g-status.hint{color:#FFF3C8;border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:rgba(255,243,200,.75)}
html[data-skin="bnbg"] #app.wide #g-status{font-size:13px;padding:8px 20px}
/* move list: a leather strip; no edge fade (it would fade the stitch), the list scrolls inside the rim */
/* move list: a leather strip that never scrolls. The list (#g-mlist) is the scroller, held inside the rim and stitch with
   a soft edge fade of its own, so moves and the last-move chip never slide over the stitch */
html[data-skin="bnbg"] #g-moves{height:46px;padding:0 9px;overflow:hidden;-webkit-mask-image:none;mask-image:none}
html[data-skin="bnbg"] #g-mlist{flex:1 1 auto;min-width:0;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 6px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 6px),transparent)}
html[data-skin="bnbg"] #g-mlist::-webkit-scrollbar{display:none}
html[data-skin="bnbg"] #g-mlist::before,html[data-skin="bnbg"] #g-mlist::after{content:'';flex:0 0 8px;align-self:stretch}
html[data-skin="bnbg"] #g-mlist::after{flex-basis:calc(8px + var(--mtail,0px))}
html[data-skin="bnbg"] #app.wide #g-moves{height:auto;padding:14px 16px 10px;display:flex;flex-direction:column;overflow:hidden}
html[data-skin="bnbg"] #app.wide #g-mlist{flex:1 1 auto;min-height:0;height:auto;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;align-content:start;padding:4px 0 6px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent)}
html[data-skin="bnbg"] #app.wide #g-mlist::before,html[data-skin="bnbg"] #app.wide #g-mlist::after{content:none}
html[data-skin="bnbg"] .mn{color:var(--bnbg-muted);opacity:1;font-weight:400}
html[data-skin="bnbg"] .mv{font-weight:500;color:var(--bnbg-text);font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .mv.last{background:var(--bnbg-fill);color:var(--bnbg-ink)}
html[data-skin="bnbg"] .mhint{color:var(--bnbg-muted);opacity:1;font-weight:400;letter-spacing:.06em}
html[data-skin="bnbg"] #app.wide #g-moves:before{color:var(--bnbg-eyebrow);opacity:1;font-weight:500;font-size:11px;letter-spacing:.3em;margin-bottom:8px}
/* tool row: the four tools are lacquer buttons with champagne rims, seated in a stitched leather housing */
html[data-skin="bnbg"] #g-tools{justify-self:center;width:max-content;max-width:100%;padding:17px 16px 11px;border-radius:20px;gap:12px}
html[data-skin="bnbg"] #app.wide #g-tools{padding:18px 18px 12px}
html[data-skin="bnbg"] .tool{background:linear-gradient(180deg,#1C1B19 0%,#0B0B0A 70%,#070707 100%);border:1px solid rgba(183,157,98,.62);border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,240,183,.14),inset 0 -1px 0 rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.6);color:var(--bnbg-btn-text);font-weight:500;letter-spacing:.16em;font-size:10.5px}
html[data-skin="bnbg"] .tool:active{translate:0 1px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .tool:hover{border-color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .tool em{background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid #0A0A0A;box-shadow:0 0 0 1px rgba(212,175,55,.4);font-weight:600;font-size:11.5px;min-width:21px;height:21px;right:-7px;top:-7px}
/* disabled: the lacquer stays opaque (a see-through button would show the leather housing through it); only the contents dim */
html[data-skin="bnbg"] .tool[disabled]{filter:none;opacity:1;border-color:rgba(183,157,98,.26);box-shadow:inset 0 1px 0 rgba(255,240,183,.05),0 2px 6px rgba(0,0,0,.5);cursor:default}
html[data-skin="bnbg"] .tool[disabled]>:is(svg,span){opacity:.4}
html[data-skin="bnbg"] .tool[disabled] em{opacity:.55}
html[data-skin="bnbg"] .tool.t-resign{background:linear-gradient(180deg,#24161A 0%,#0E090A 70%,#080506 100%);border-color:rgba(255,143,160,.42);color:#F2C2C9}
html[data-skin="bnbg"] .tool.t-resign svg path{stroke:#F2A7B2}
html[data-skin="bnbg"] .tool svg{width:24px;height:24px}
html[data-skin="bnbg"] #app.wide .tool{font-size:11.5px}
/* moment banners (CHECK!, CHECKMATE!, VS ...): a centred leather plate (Banner.show wraps the text in .bplate in BNBG) */
html[data-skin="bnbg"] #banner{background:none;border:0;box-shadow:none;outline:0;border-radius:0;font-family:var(--bnbg-serif);font-weight:400;font-size:clamp(28px,8vw,50px);padding:0;text-transform:uppercase}
html[data-skin="bnbg"] #banner .bplate{display:inline-block;max-width:calc(100% - 24px);padding:.34em .95em .5em;border-radius:18px;color:inherit;white-space:nowrap}
html[data-skin="bnbg"] #banner small{font-family:var(--bnbg-font);color:var(--bnbg-eyebrow);font-size:.26em;letter-spacing:.3em;text-shadow:none;margin-top:10px;font-weight:500}

/* ---------- cards ---------- */
/* titles: cream serif in sentence case (classic uppercases the same strings in CSS); a gold-italic second line on result cards */
html[data-skin="bnbg"] .card h2{font-size:30px;letter-spacing:.005em;text-transform:none;margin:4px 0 6px}
html[data-skin="bnbg"] .card h2.big{font-size:34px}
html[data-skin="bnbg"] .card h2 em.bnbg-only{display:block!important;font-size:.62em;margin-top:4px;letter-spacing:.01em}
html[data-skin="bnbg"] .card .ribbon{font-size:11px;letter-spacing:.26em;padding:4px 14px}
html[data-skin="bnbg"] .card p.sub{color:var(--bnbg-label);font-weight:400;letter-spacing:.04em}
html[data-skin="bnbg"] .card p.fine{color:#E0D8C6;opacity:1}
html[data-skin="bnbg"] .card p.quote{color:var(--bnbg-gold-hi);font-weight:400;font-style:italic}
html[data-skin="bnbg"] .card p.tip{color:var(--bnbg-text-2);background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);font-weight:400}
/* draw: neutral champagne-grey (no cool steel leftovers) */
html[data-skin="bnbg"] .ribbon.blue{border-color:rgba(181,171,149,.55);color:#EEE8D8}
html[data-skin="bnbg"] .ribbon.unlock{background:var(--bnbg-fill);border-color:transparent;color:var(--bnbg-ink)}
html[data-skin="bnbg"] .rules{font-weight:400}
html[data-skin="bnbg"] .rules span{background:transparent;border:1px solid var(--bnbg-line-soft);color:var(--bnbg-text-2);border-radius:999px;padding:3px 10px}
html[data-skin="bnbg"] .diff i{background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(183,157,98,.7)}
html[data-skin="bnbg"] .diff i.on{background:var(--bnbg-gold)}
html[data-skin="bnbg"] .botpick{background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);color:var(--bnbg-text-2);font-weight:500;letter-spacing:.04em}
html[data-skin="bnbg"] .botpick.sel{background:rgba(212,175,55,.12);border-color:var(--bnbg-gold);box-shadow:0 0 16px rgba(212,175,55,.2)}
html[data-skin="bnbg"] .pp{background:linear-gradient(180deg,#1C1B19 0%,#0B0B0A 70%,#070707 100%);border:1px solid rgba(183,157,98,.62);box-shadow:inset 0 1px 0 rgba(255,240,183,.14),0 6px 14px rgba(0,0,0,.6);color:var(--bnbg-text-2);font-weight:500;letter-spacing:.06em}
html[data-skin="bnbg"] .pp:hover{border-color:var(--bnbg-gold)}
html[data-skin="bnbg"] .pp:active{translate:0 1px;box-shadow:none}
html[data-skin="bnbg"] .crit{font-weight:400}
html[data-skin="bnbg"] .crit b{background:transparent;border:1px solid var(--bnbg-line);color:var(--bnbg-muted)}
html[data-skin="bnbg"] .crit .yes b{background:var(--bnbg-fill);border-color:transparent;color:var(--bnbg-ink)}
html[data-skin="bnbg"] .seg .dice{background:#0A0A0A;color:var(--bnbg-gold-hi);border:1px solid var(--bnbg-line)}
html[data-skin="bnbg"] .seg button.on .dice{background:#0A0A0A}
html[data-skin="bnbg"] .set.stack>span{color:var(--bnbg-label);opacity:1;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase}
html[data-skin="bnbg"] .howto div{background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);box-shadow:inset 0 1px 3px rgba(0,0,0,.55);font-weight:400;color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .howto b{background:transparent;border:1px solid var(--bnbg-gold);color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .demo{border:1px solid var(--bnbg-line);box-shadow:0 10px 26px rgba(0,0,0,.6);background:#0A0A0A;border-radius:12px}
html[data-skin="bnbg"] .demo i{background:linear-gradient(160deg,#A88A52,#7C6235)}
html[data-skin="bnbg"] .demo i.dk{background:linear-gradient(160deg,#1E1D1A,#0F0E0D)}
html[data-skin="bnbg"] .demo .dot{background:var(--bnbg-gold-hi);border:2px solid #0A0A0A;box-shadow:0 0 10px rgba(241,210,122,.6)}
html[data-skin="bnbg"] .demo .hand{filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))}
html[data-skin="bnbg"] .demo .hand path{fill:#F5EFE0;stroke:#0A0A0A}
html[data-skin="bnbg"] .set.skin-row .seg button{font-size:12.5px;padding:0 12px}
/* defeat reads as defeat: rose headline instead of the victory gold */
html[data-skin="bnbg"] .card.result:has(.ribbon:not(.gold):not(.blue)) h2{color:#F2B9AE}
/* destructive confirms (Resign, Reset progress) use the kit's danger treatment */
html[data-skin="bnbg"] #modal .btn.pink{background:linear-gradient(180deg,#22161A,#0E0A0B) padding-box,linear-gradient(158deg,#FFB3BF,#9C3E4E 55%,#E6A69B) border-box;color:#FFC7CF}

/* ---------- HUD pills (stars / wins): kit leather chips; the icon sits clear of the 4px stitch ---------- */
html[data-skin="bnbg"] .pill{height:38px;padding:0 15px 0 7px;gap:6px;border-radius:999px;font-size:15px}
html[data-skin="bnbg"] .pill canvas{width:28px;height:28px;margin:0}
html[data-skin="bnbg"] #app.wide .pill{height:44px;padding:0 18px 0 8px}
html[data-skin="bnbg"] #app.wide .pill canvas{width:34px;height:34px}
html[data-skin="bnbg"] .pill span{font-family:var(--bnbg-num-light);font-weight:300;color:var(--bnbg-text);font-size:17px;font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] #app.wide .pill span{font-size:20px}

/* ---------- short screens: the leather plates give the board back the room their rims and stitches take ---------- */
@media (max-height:700px){
  html[data-skin="bnbg"] .pcard{padding:6px 12px 6px 8px;--bnbg-l-inset:5px;--bnbg-l-rim:3px}
  html[data-skin="bnbg"] .pcard .side{top:9px;right:11px}
  html[data-skin="bnbg"] #g-moves{height:38px;padding:0 8px;--bnbg-l-inset:5px;--bnbg-l-rim:3px}
  html[data-skin="bnbg"] #g-tools{padding:10px 10px 6px;--bnbg-l-inset:4px;--bnbg-l-rim:3px;border-radius:17px}
  html[data-skin="bnbg"] .tool em{top:-3px;right:-5px}
}
/* phone landscape: no housing round the tools (the board needs every pixel), slim plates */
@media (max-height:500px){
  html[data-skin="bnbg"] #g-tools{background:none;border-color:transparent;box-shadow:none;padding:2px 0 4px}
  html[data-skin="bnbg"] #g-tools::after{content:none}
  html[data-skin="bnbg"] .pcard{padding:5px 12px 5px 8px}
  html[data-skin="bnbg"] #g-moves{height:36px}
}

/* ---------- stitch on the HUD pills and the toast: the same ::before/::after dashed border as the game plates
   (the pill's ::after is its invisible 50px hit area, so the pill stitches with ::before) ---------- */
html[data-skin="bnbg"] .pill,html[data-skin="bnbg"] #toast{outline:0}
html[data-skin="bnbg"] .pill::before,html[data-skin="bnbg"] #toast::after{content:'';position:absolute;inset:calc(var(--bnbg-l-inset) - 1px);border:1px dashed var(--bnbg-l-stitch);pointer-events:none}
html[data-skin="bnbg"] .pill::before{border-radius:999px}
html[data-skin="bnbg"] #toast::after{border-radius:max(0px,calc(var(--bnbg-r) - var(--bnbg-l-inset)))}

/* ---------- black + gold ground (owner decision 2026-10-22: true-black leather) ----------
   The shared kit lays a gold glow over the carbon twill; over near-black a low-alpha gold reads olive-brown, so this game
   neutralises it here (the kit file stays byte-identical to _brand/bnbg-skin). Gold stays on metals, buttons and accents. */
html[data-skin="bnbg"] #app{
  background:
    radial-gradient(ellipse 120% 70% at 50% 18%,rgba(236,230,215,.055) 0,rgba(236,230,215,0) 55%),
    radial-gradient(ellipse 140% 90% at 50% 120%,rgba(0,0,0,.85) 0,rgba(0,0,0,0) 60%),
    url(assets/background.webp) center/540px repeat,
    var(--bnbg-bg)}
html[data-skin="bnbg"] #app:before{background:radial-gradient(ellipse at 50% 0,rgba(241,210,122,.025),transparent 60%)!important}
html[data-skin="bnbg"] .bnbg-ground{background:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(236,230,215,.055) 0,transparent 55%),url(assets/background.webp) center/540px repeat,var(--bnbg-bg)}
/* toggles: black track, gold rim + gold knob carry the on state; neutral graphite off knob */
html[data-skin="bnbg"] .tog i,html[data-skin="bnbg"] .tog:not(:has(i)):after{background:linear-gradient(180deg,#8A8781,#56544F)}
html[data-skin="bnbg"] .tog.on{background:linear-gradient(180deg,#1E1D1B,#0B0B0A);border-color:var(--bnbg-gold);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(212,175,55,.18)}
html[data-skin="bnbg"] .tog.on i,html[data-skin="bnbg"] .tog.on:not(:has(i)):after{background:var(--bnbg-metal)}
/* round icon chips: neutral black faces (the kit's lacquer stops are warm) */
html[data-skin="bnbg"] .ibtn,html[data-skin="bnbg"] :is(.ibtn.red,.ibtn.jade,.ibtn.gold,.ibtn.blue){background:radial-gradient(circle at 50% 30%,#262421 0,#0D0D0C 72%)}
html[data-skin="bnbg"] .ibtn.on,html[data-skin="bnbg"] .ibtn.active{background:radial-gradient(circle at 50% 30%,#2B2925 0,#121110 75%)}
/* phones: keep the ladder bar's buttons on one line (they wrapped to two at 360-390 px); below 340 px wrapping is allowed again */
@media (max-width:440px){
  html[data-skin="bnbg"] #map-bar{gap:8px;padding-inline:8px}
  html[data-skin="bnbg"] #map-bar .btn.sm{white-space:nowrap;padding-inline:12px;font-size:13px;letter-spacing:.04em}
  html[data-skin="bnbg"] #map-bar .btn:not(.sm){padding-inline:18px;font-size:18px}}
@media (max-width:339px){html[data-skin="bnbg"] #map-bar .btn.sm{white-space:normal}}
/* narrow portrait: the BNBG board sits higher than classic, so lift the status pill clear of the frame top and the back rank */
@media (max-width:380px){html[data-skin="bnbg"] #app:not(.wide) #g-status{top:-7px}}

/* BNBG shop (src/bnbg.js): the map chip, the gold +N on UNDO / HINT, the shop card */
html[data-skin="bnbg"] #bn-chip{top:calc(128px + var(--sat));background:linear-gradient(180deg,#1C1B19 0%,#0B0B0A 70%,#070707 100%);border:1px solid rgba(183,157,98,.62);box-shadow:inset 0 1px 0 rgba(255,240,183,.14),0 4px 10px rgba(0,0,0,.6);color:var(--bnbg-gold-hi);font-family:var(--bnbg-font);font-weight:500;font-size:12.5px;letter-spacing:.16em}
html[data-skin="bnbg"] #bn-chip span{color:var(--bnbg-text);letter-spacing:.04em}
html[data-skin="bnbg"] #app.wide #bn-chip{top:calc(140px + var(--sat))}
html[data-skin="bnbg"] .tool .bn{background:var(--bnbg-gold-hi);color:var(--bnbg-ink);border:1px solid #0A0A0A;box-shadow:0 0 0 1px rgba(212,175,55,.4);font-family:var(--bnbg-font);font-weight:600;right:-7px;bottom:-7px}
html[data-skin="bnbg"] .tool[disabled] .bn{opacity:.55}
html[data-skin="bnbg"] .bnshop .bnbal,html[data-skin="bnbg"] .bnshop .bnbal b{color:var(--bnbg-gold-hi);font-family:var(--bnbg-font);font-weight:500}
html[data-skin="bnbg"] .bnshop .bnbal small{color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .bnshop .bnitem,html[data-skin="bnbg"] .bnshop .bndep{background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);border-radius:12px;color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .bnshop .bnitem b,html[data-skin="bnbg"] .bnshop .bndep p.rate{color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] .bnshop .bnitem.want{border-color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .bnshop .bndep .bnh{color:var(--bnbg-eyebrow);font-family:var(--bnbg-font);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
html[data-skin="bnbg"] .bnshop .bnaddr{background:#000;border:1px solid var(--bnbg-well-line);color:var(--bnbg-gold-hi)}