/* =====================================================================================
   BNBG Black Gold skin (v1.2.1) - "quiet luxury" overlay for the Kerk Games family.
   Everything is scoped under html[data-skin="bnbg"]; with any other value (default "classic")
   this file changes nothing and downloads nothing (fonts + texture load only when matched).
   Load it with <link rel="stylesheet" href="skins/bnbg/skin-bnbg.css"> AFTER the game's own
   <style>, so equal-specificity rules resolve in the skin's favour. Asset URLs are relative
   to this file. Palette: BNBG-COLOUR-CODES.md in the BNBG brand kit (see README)
   Visual only: coins stay play coins (游戏币), nothing here relabels currency.
   v1.1: stitched-leather layer (section 19) for panels, cards, HUD boxes, pills, toasts and banner plates.
   v1.2: the leather is TRUE BLACK (owner decision 2026-10-22: "black leather cool vibe"), not the world's black-brown;
         every brown tint in grounds, wells, scrims and dividers is neutralised. Gold accents and gold buttons unchanged.
   v1.2.1: the last olive / bronze darks go neutral: disabled face #121211 (edge = leather edge), lacquer, icon buttons,
         chips and the on-toggle track. Gold fills, the metal rim and text colours unchanged.
   ===================================================================================== */

/* ---------- fonts: IBM Plex Sans (SIL OFL 1.1, assets/fonts/OFL.txt) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. brand tokens ---------- */
html[data-skin="bnbg"]{
  /* grounds */
  --bnbg-bg:#0A0A0A; --bnbg-carbon:#101010; --bnbg-carbon-dk:#0C0C0C; --bnbg-carbon-lt:#1E1E1E;
  --bnbg-card:#141414; --bnbg-input:#0B0B0B; --bnbg-warm:#191817; --bnbg-ink:#1C1406;
  --bnbg-obsidian:linear-gradient(162deg,#22231F 0%,#0B0C0B 58%,#080909 100%);
  /* golds */
  --bnbg-gold:#D4AF37; --bnbg-gold-hi:#F1D27A; --bnbg-gold-bright:#F6E08A; --bnbg-gold-pale:#E8C76A;
  --bnbg-champagne:#B79D62; --bnbg-gold-mid:#A8862A; --bnbg-bronze:#8A6B1F; --bnbg-gold-deep:#6B551F; --bnbg-hair:#3A2F14;
  --bnbg-cream:#FFF8E6;
  --bnbg-metal:linear-gradient(180deg,#FFF3C8 0%,#F1D27A 24%,#D4AF37 52%,#A8862A 78%,#E8C76A 100%);
  --bnbg-fill:linear-gradient(180deg,#F3D998 0%,#DDBB66 48%,#B8913A 100%);
  --bnbg-rim:linear-gradient(158deg,#FFF0B7 0%,#E5C576 28%,#A37B35 56%,#E5C576 80%,#A37B35 100%);
  --bnbg-lacquer:linear-gradient(180deg,#252422 0%,#151514 55%,#0C0C0C 100%);
  /* text */
  --bnbg-text:#F3EDE0; --bnbg-text-2:#EEE8D8; --bnbg-muted:#B5AB95; --bnbg-muted-2:#A39A86; --bnbg-label:#C9B98F;
  --bnbg-btn-text:#F5DF9D; --bnbg-off-face:#121211; --bnbg-off-text:#ADA994;
  /* semantic */
  --bnbg-ok:#22D99A; --bnbg-red:#FF6B80; --bnbg-red-soft:#E6A69B;
  /* lines + light */
  --bnbg-line:rgba(183,157,98,.42); --bnbg-line-soft:rgba(183,157,98,.2); --bnbg-line-strong:rgba(232,199,106,.75);
  --bnbg-glow:0 0 22px rgba(212,175,55,.16); --bnbg-glow-hi:0 0 30px rgba(241,210,122,.3);
  --bnbg-lift:0 1px 0 rgba(255,248,230,.07) inset,0 18px 48px rgba(0,0,0,.62);
  --bnbg-r-lg:20px; --bnbg-r:14px; --bnbg-r-sm:10px;
  /* type */
  --bnbg-cjk:"PingFang SC","PingFang TC","Hiragino Sans GB","Hiragino Sans","Microsoft YaHei","Microsoft JhengHei","Noto Sans CJK SC","Noto Sans CJK TC","Source Han Sans SC","Source Han Sans TC","WenQuanYi Micro Hei";
  --bnbg-font:'IBM Plex Sans',var(--bnbg-cjk),system-ui,-apple-system,"Segoe UI",sans-serif;
  --bnbg-num:'IBM Plex Sans',ui-monospace,"Cascadia Mono",Menlo,monospace;
  --bnbg-track:.08em; --bnbg-track-wide:.22em;

  /* leather (v1.2, owner-approved black): grained TRUE-BLACK hide (charcoal pebble, not brown), near-black inner rim,
     dark antique-gold edge, dashed gold stitch. Sample: review/leather-target-black.html.
     One pre-tiled SVG grain per size (the browser rasterises each data-URI once and reuses it; no CSS filter).
     Grain colour matrix is near-neutral (0.62/0.58/0.52): it reads as fine charcoal pebble with the faintest warmth.
     Reference only, NOT shipped - the v1.1 black-brown values were: grain matrix 0.55/0.42/0.25 (alpha .42 / sm .5),
     base #3A2D1D/#1C150F/#0D0A07 (sm #3A2D1D/#1D1610/#0E0B08), edge #6B5023, rim #17110B, rim-sm #1A140D, deep #120D09,
     top highlight rgba(255,230,170,.12), stitch rgba(212,175,55,.5) / sm .55. */
  --bnbg-leather-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='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.58 0 0 0 0 0.52 0 0 0 0.30 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --bnbg-leather-grain-sm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.58 0 0 0 0 0.52 0 0 0 0.36 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  --bnbg-leather-base:radial-gradient(130% 120% at 20% 0%,#262421 0%,#121110 52%,#070707 100%);
  --bnbg-leather-base-sm:radial-gradient(120% 140% at 30% 0%,#262421 0%,#131211 55%,#080808 100%);
  --bnbg-leather:var(--bnbg-leather-grain) 0 0/160px 160px repeat,var(--bnbg-leather-base);          /* background shorthand: panels */
  --bnbg-leather-sm:var(--bnbg-leather-grain-sm) 0 0/120px 120px repeat,var(--bnbg-leather-base-sm); /* background shorthand: chips, pills */
  --bnbg-leather-edge:#4A3D22; --bnbg-leather-edge-hi:#A17C34; --bnbg-leather-edge-glow:#B38A3A;
  --bnbg-leather-rim:#0B0A09; --bnbg-leather-rim-sm:#0D0C0B; --bnbg-leather-deep:#0E0D0C;
  --bnbg-leather-hi:inset 0 1px 0 rgba(255,240,210,.10);
  --bnbg-stitch-c:rgba(212,175,55,.62); --bnbg-stitch-c-sm:rgba(212,175,55,.66); --bnbg-stitch-hi:rgba(241,210,122,.9);
  /* recessed wells inside leather (seg / tabs / amount / inputs) and their hairline */
  --bnbg-well:linear-gradient(180deg,rgba(4,4,4,.82),rgba(12,12,11,.74)); --bnbg-well-line:rgba(138,107,31,.85);   /* bronze #8A6B1F: >= 3:1 non-text contrast on the well */
  /* serif titles: Georgia for Latin; an elegant CJK serif where the OS has one (Apple Songti, Noto/Source Han Serif),
     else the CJK sans stack (Windows 10 has no good CJK serif; SimSun is deliberately skipped, STZhongsong comes with Office).
     For serif Chinese titles on EVERY device, self-host a title-glyph subset of Noto Serif SC (OFL, ~12 KB per weight) and put
     its family first by redefining --bnbg-serif-cjk in the game's own CSS (Golden Scale Feast: skins/bnbg/game.css). */
  --bnbg-serif-cjk:"Songti SC","Songti TC","STSong","Noto Serif CJK SC","Noto Serif CJK TC","Noto Serif SC","Noto Serif TC","Source Han Serif SC","Source Han Serif TC","STZhongsong";
  --bnbg-serif:Georgia,'Times New Roman',var(--bnbg-serif-cjk),var(--bnbg-cjk),serif;
  /* light big numbers: the OS light face (Segoe UI Light / SF / Roboto Light); Plex ships 400-600 only */
  --bnbg-num-light:system-ui,-apple-system,"Segoe UI","Roboto","Helvetica Neue",var(--bnbg-cjk),sans-serif;
  --bnbg-eyebrow:#C9A95F; --bnbg-gold-italic:#E8CF8F;

  /* ---------- 2. remap the classic games' shared variables (toon -> black gold) ---------- */
  --ink:#0A0907;                 /* outlines become near-invisible shadow; text-on-gold stays dark */
  --gold:#D4AF37; --gold2:#F1D27A; --goldL:#F6E08A; --agold:#A8862A;
  --red:#FF6B80; --red2:#C9566A; --cn-red:#E6A69B; --cinnabar:#E6A69B; --ver:#E6A69B; --coral:#E6A69B; --pink:#E8C76A;
  --jade:#22D99A; --jade2:#145C49; --jade-deep:#0E3B2E; --teal:#B79D62; --cyan:#F6E08A;
  --panel:#191817; --panel2:#0B0B0B; --lacq:#191817; --lacq2:#0B0B0B; --deep:#0A0A0A; --ocean:#141414; --lagoon:#191817;
  --cream:#F3EDE0; --paper:#F3EDE0; --pearl:#F3EDE0; --txt:#F3EDE0; --mc:#F3EDE0;
  --good:#F1D27A; --gain:#F1D27A; --bad:#FF6B80; --loss:#9C9484;
  --font:var(--bnbg-font); --cjk:var(--bnbg-cjk),sans-serif;
  color-scheme:dark;
  scrollbar-color:var(--bnbg-gold-deep) transparent;
}

/* ---------- 3. grounds: carbon / obsidian ---------- */
html[data-skin="bnbg"],html[data-skin="bnbg"] body{background:var(--bnbg-bg);color:var(--bnbg-text);font-family:var(--bnbg-font);-webkit-font-smoothing:antialiased}
html[data-skin="bnbg"] #app{
  background:
    radial-gradient(ellipse 120% 70% at 50% 18%,rgba(212,175,55,.10) 0,rgba(212,175,55,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);
  color:var(--bnbg-text);font-family:var(--bnbg-font)}
/* games paint decorative patterns on #app:before - retire them, keep a faint gold vignette instead */
html[data-skin="bnbg"] #app:before{background:radial-gradient(ellipse at 50% 0,rgba(241,210,122,.06),transparent 60%)!important;opacity:1!important}
html[data-skin="bnbg"] .bnbg-ground{background:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(212,175,55,.10) 0,transparent 55%),url(assets/background.webp) center/540px repeat,var(--bnbg-bg)}
/* no thick toon ink around type in this skin */
html[data-skin="bnbg"] body *{-webkit-text-stroke:0!important}
html[data-skin="bnbg"] button,html[data-skin="bnbg"] input,html[data-skin="bnbg"] select,html[data-skin="bnbg"] textarea{font-family:var(--bnbg-font)}
html[data-skin="bnbg"] ::selection{background:rgba(212,175,55,.35);color:var(--bnbg-cream)}

/* ---------- 4. buttons: black lacquer, champagne rim, gold type ---------- */
html[data-skin="bnbg"] .btn{
  position:relative;min-height:52px;padding:10px 26px;border-radius:999px;
  border:1.5px solid transparent;
  background:var(--bnbg-lacquer) padding-box,var(--bnbg-rim) border-box;
  color:var(--bnbg-btn-text);font-family:var(--bnbg-font);font-weight:500;letter-spacing:var(--bnbg-track);text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,240,183,.16),inset 0 -8px 16px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.55),var(--bnbg-glow);
  transition:box-shadow .2s,transform .12s,filter .2s;translate:none}
html[data-skin="bnbg"] .btn:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,240,183,.14) 48%,transparent 66%) no-repeat;background-size:220% 100%;background-position:120% 0;transition:background-position .7s ease}
html[data-skin="bnbg"] .btn:hover:after{background-position:-20% 0}
html[data-skin="bnbg"] .btn:hover{box-shadow:inset 0 1px 0 rgba(255,240,183,.22),inset 0 -8px 16px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.55),var(--bnbg-glow-hi)}
html[data-skin="bnbg"] .btn:active{transform:translateY(1px);translate:none;filter:brightness(.92);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.5)}
/* primary: champagne-gold face, dark ink type (the "Claim" / active-tab treatment) */
html[data-skin="bnbg"] .btn.gold,html[data-skin="bnbg"] .btn.primary{
  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);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 14px rgba(120,84,20,.35),0 10px 28px rgba(0,0,0,.55),0 0 26px rgba(212,175,55,.28)}
html[data-skin="bnbg"] .btn.gold:after,html[data-skin="bnbg"] .btn.primary:after{background-image:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%)}
/* semantic variants collapse to quieter lacquer: the brand never shouts in colour */
html[data-skin="bnbg"] .btn.jade,html[data-skin="bnbg"] .btn.teal,html[data-skin="bnbg"] .btn.blue,html[data-skin="bnbg"] .btn.purple,html[data-skin="bnbg"] .btn.secondary{
  background:linear-gradient(180deg,#1A1914,#0C0C0A) padding-box,linear-gradient(158deg,rgba(255,240,183,.55),rgba(163,123,53,.55) 55%,rgba(229,197,118,.55)) border-box;color:var(--bnbg-text)}
html[data-skin="bnbg"] .btn.red,html[data-skin="bnbg"] .btn.danger{
  background:linear-gradient(180deg,#22161A,#0E0A0B) padding-box,linear-gradient(158deg,#FFB3BF,#9C3E4E 55%,#E6A69B) border-box;color:#FFC7CF}
html[data-skin="bnbg"] .btn.grey,html[data-skin="bnbg"] .btn.ghost{background:linear-gradient(#0E0E0C,#0E0E0C) padding-box,linear-gradient(var(--bnbg-line),var(--bnbg-line)) border-box;color:var(--bnbg-muted);box-shadow:none}
html[data-skin="bnbg"] .btn.sm{min-height:44px;padding:6px 18px;font-size:14px;border-radius:999px}
html[data-skin="bnbg"] .btn[disabled],html[data-skin="bnbg"] .btn.off,html[data-skin="bnbg"] .btn:disabled{
  filter:none;background:linear-gradient(var(--bnbg-off-face),var(--bnbg-off-face)) padding-box,linear-gradient(var(--bnbg-leather-edge),var(--bnbg-leather-edge)) border-box;color:var(--bnbg-off-text);text-shadow:none;box-shadow:none}
html[data-skin="bnbg"] .btn.pulse{animation:bnbg-breathe 2.6s ease-in-out infinite}
html[data-skin="bnbg"] .btn-link{background:none;border:0;border-bottom:1px solid var(--bnbg-line);border-radius:0;padding:8px 2px;cursor:pointer;color:var(--bnbg-gold-hi);text-decoration:none;border-bottom:1px solid var(--bnbg-line);font-weight:500;letter-spacing:.02em;min-height:44px}
html[data-skin="bnbg"] .btn small{color:inherit;opacity:.78;font-weight:400;letter-spacing:.04em}

/* ---------- 5. HUD: pills + round icon buttons ---------- */
html[data-skin="bnbg"] .pill{
  background:linear-gradient(180deg,rgba(34,35,31,.92),rgba(8,9,9,.92));border:1px solid var(--bnbg-line);
  box-shadow:inset 0 1px 0 rgba(255,248,230,.06),0 6px 18px rgba(0,0,0,.5);color:var(--bnbg-text);font-weight:500;letter-spacing:.02em;text-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-skin="bnbg"] .pill b,html[data-skin="bnbg"] .pill strong{color:var(--bnbg-gold-hi);font-weight:500;text-shadow:none;font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .pill small{color:var(--bnbg-label);opacity:1;font-weight:400;letter-spacing:.06em}
html[data-skin="bnbg"] .ibtn{
  flex-shrink:0;border-radius:50%;border:1px solid var(--bnbg-line);
  background:radial-gradient(circle at 50% 30%,#252422 0,#0D0D0C 72%);color:var(--bnbg-gold-hi);
  box-shadow:inset 0 1px 0 rgba(255,240,183,.12),0 6px 16px rgba(0,0,0,.55);text-shadow:none;font-weight:500}
html[data-skin="bnbg"] .ibtn:hover{border-color:var(--bnbg-line-strong);box-shadow:inset 0 1px 0 rgba(255,240,183,.18),0 6px 16px rgba(0,0,0,.55),var(--bnbg-glow)}
html[data-skin="bnbg"] .ibtn:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .ibtn.on,html[data-skin="bnbg"] .ibtn.active{border-color:var(--bnbg-gold);background:radial-gradient(circle at 50% 30%,#34312B 0,#121211 75%);box-shadow:0 0 0 1px rgba(212,175,55,.25),var(--bnbg-glow-hi)}
html[data-skin="bnbg"] .ibtn.red,html[data-skin="bnbg"] .ibtn.jade,html[data-skin="bnbg"] .ibtn.gold,html[data-skin="bnbg"] .ibtn.blue{background:radial-gradient(circle at 50% 30%,#252422 0,#0D0D0C 72%)}
/* inline toon icons: turn hard-coded ink strokes into gold line icons (add your game's ink hex here) */
html[data-skin="bnbg"] :is(.ibtn,.pill,.bnbg-icon) svg{color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] :is(.ibtn,.pill,.bnbg-icon) svg :is([stroke]:not([stroke="none"])),
html[data-skin="bnbg"] :is(.ibtn,.pill,.bnbg-icon) svg[stroke]:not([stroke="none"]){stroke:var(--bnbg-gold-hi);stroke-width:1.7px}
html[data-skin="bnbg"] :is(.ibtn,.pill,.bnbg-icon) svg :is([fill]:not([fill="none"])){fill:rgba(212,175,55,.16)}
html[data-skin="bnbg"] :is(.ibtn,.pill,.bnbg-icon) svg :is([fill="#1D1B1A" i],[fill="#1A1033" i],[fill="#2A0C06" i],[fill="#2A1410" i],[fill="currentColor"]),
html[data-skin="bnbg"] :is(.ibtn,.pill,.bnbg-icon) svg:is([fill="#1D1B1A" i],[fill="#1A1033" i],[fill="#2A0C06" i],[fill="#2A1410" i]){fill:var(--bnbg-gold-hi)}

/* ---------- 6. cards / modals / overlays ---------- */
html[data-skin="bnbg"] .ovl{background:rgba(5,5,4,.74);-webkit-backdrop-filter:blur(6px) saturate(.8);backdrop-filter:blur(6px) saturate(.8)}
html[data-skin="bnbg"] .card,html[data-skin="bnbg"] .modal,html[data-skin="bnbg"] .sheet{
  background:var(--bnbg-obsidian);border:1px solid var(--bnbg-line);border-radius:var(--bnbg-r-lg);
  box-shadow:inset 0 1px 0 rgba(255,248,230,.07),0 0 0 1px rgba(0,0,0,.6),0 30px 80px rgba(0,0,0,.75);
  color:var(--bnbg-text);scrollbar-width:thin}
html[data-skin="bnbg"] .card:before,html[data-skin="bnbg"] .card:after{opacity:.4;filter:sepia(.4) saturate(.6)}
html[data-skin="bnbg"] .card h2,html[data-skin="bnbg"] .modal h2{color:var(--bnbg-gold-hi);font-weight:500;letter-spacing:.06em;text-shadow:none;line-height:1.2}
html[data-skin="bnbg"] .card h3{color:var(--bnbg-label);font-weight:500;font-size:11.5px;letter-spacing:var(--bnbg-track-wide);text-transform:uppercase;opacity:1}
html[data-skin="bnbg"] .card p{color:var(--bnbg-text-2);font-weight:400;opacity:1}
html[data-skin="bnbg"] .card p.sm,html[data-skin="bnbg"] .card p.sub,html[data-skin="bnbg"] .card p.fine{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .card .row.sticky{background:linear-gradient(rgba(11,12,11,0),#0B0C0B 34%)}
/* Fishing-style header bar */
html[data-skin="bnbg"] .card-h{background:transparent;border:0;border-bottom:1px solid var(--bnbg-line-soft);box-shadow:none;border-radius:var(--bnbg-r-lg) var(--bnbg-r-lg) 0 0;margin:0}
html[data-skin="bnbg"] .card-h h2{color:var(--bnbg-gold-hi);font-weight:500;text-shadow:none;letter-spacing:.14em}
html[data-skin="bnbg"] .card-h:before,html[data-skin="bnbg"] .card-h:after{width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--bnbg-champagne))}
html[data-skin="bnbg"] .card-h:after{background:linear-gradient(270deg,transparent,var(--bnbg-champagne))}
/* close buttons */
html[data-skin="bnbg"] :is(.card-x,.cardwrap>.x,.x.close,.close){
  min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--bnbg-line);background:#0F0F0D;color:var(--bnbg-gold-hi);
  box-shadow:0 6px 16px rgba(0,0,0,.6);font-weight:400;text-shadow:none}

/* ---------- 7. eyebrows, ribbons, chips, badges ---------- */
html[data-skin="bnbg"] .eyebrow,html[data-skin="bnbg"] .bnbg-eyebrow{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bnbg-eyebrow)}
html[data-skin="bnbg"] .ribbon{background:transparent;border:1px solid var(--bnbg-line);border-radius:999px;box-shadow:none;color:var(--bnbg-label);font-weight:500;letter-spacing:var(--bnbg-track-wide);text-transform:uppercase;font-size:11.5px;padding:3px 14px;text-shadow:none}
html[data-skin="bnbg"] .ribbon.gold{background:var(--bnbg-fill);border-color:transparent;color:var(--bnbg-ink)}
html[data-skin="bnbg"] .ribbon.red{border-color:rgba(255,107,128,.55);color:var(--bnbg-red)}
html[data-skin="bnbg"] .chip{background:linear-gradient(180deg,#1F1E1C,#0D0D0C);border:1px solid var(--bnbg-line);box-shadow:0 4px 12px rgba(0,0,0,.5);color:var(--bnbg-gold-hi);font-weight:500;text-shadow:none}
html[data-skin="bnbg"] .chips button{background:linear-gradient(180deg,#1D1C1A,#0C0C0B);border:1px solid var(--bnbg-line-soft);box-shadow:none;color:var(--bnbg-text);font-weight:500;border-radius:var(--bnbg-r-sm)}
html[data-skin="bnbg"] .chips button:active,html[data-skin="bnbg"] .chips button.on{border-color:var(--bnbg-gold);color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .badge{background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid rgba(0,0,0,.6);box-shadow:0 0 0 1px rgba(212,175,55,.35);font-weight:600}
html[data-skin="bnbg"] .dot,html[data-skin="bnbg"] .bnbg-dot{background:var(--bnbg-gold-bright);border:0;box-shadow:0 0 0 2px #0A0A0A,0 0 10px rgba(246,224,138,.6)}
html[data-skin="bnbg"] .tag{background:transparent;border:1px solid var(--bnbg-line);color:var(--bnbg-label);box-shadow:none;text-shadow:none}

/* ---------- 8. banners + stamps (win / bomb / round result) ---------- */
html[data-skin="bnbg"] .stamp,html[data-skin="bnbg"] #stamp,html[data-skin="bnbg"] .bnbg-stamp{
  font-family:var(--bnbg-font);color:transparent;background:var(--bnbg-metal);-webkit-background-clip:text;background-clip:text;
  border:1px solid rgba(232,199,106,.7);border-radius:6px;padding:.1em .5em .15em;font-weight:500;letter-spacing:.12em;text-shadow:none;
  box-shadow:0 0 0 5px rgba(10,10,10,.82),0 0 0 6px rgba(183,157,98,.55),0 0 60px rgba(212,175,55,.25);
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
html[data-skin="bnbg"] .stamp small{color:var(--bnbg-label);-webkit-text-fill-color:var(--bnbg-label);letter-spacing:var(--bnbg-track-wide);text-transform:uppercase}
html[data-skin="bnbg"] #banner,html[data-skin="bnbg"] .banner{
  background:linear-gradient(90deg,rgba(10,10,10,0),rgba(10,10,10,.88) 18%,rgba(10,10,10,.88) 82%,rgba(10,10,10,0));
  border:0;border-top:1px solid var(--bnbg-line);border-bottom:1px solid var(--bnbg-line);border-image:linear-gradient(90deg,transparent,var(--bnbg-champagne),transparent) 1;
  color:var(--bnbg-gold-hi);box-shadow:none;text-shadow:0 0 24px rgba(212,175,55,.35);font-weight:500;letter-spacing:.16em;border-radius:0}

/* ---------- 9. toasts ---------- */
html[data-skin="bnbg"] #toast,html[data-skin="bnbg"] .toast{
  background:rgba(14,14,12,.92);border:1px solid var(--bnbg-line);border-radius:999px;color:var(--bnbg-text);
  box-shadow:0 14px 40px rgba(0,0,0,.6),var(--bnbg-glow);font-weight:400;letter-spacing:.02em;text-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-skin="bnbg"] :is(#toast,.toast) b{color:var(--bnbg-gold-hi);font-weight:500}

/* ---------- 10. settings rows, segmented controls, tabs, toggles ---------- */
html[data-skin="bnbg"] .set{border-bottom:1px solid rgba(183,157,98,.14);color:var(--bnbg-text);font-weight:400}
html[data-skin="bnbg"] .set small{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .seg,html[data-skin="bnbg"] .tabs{display:flex;gap:2px;padding:3px;border:1px solid var(--bnbg-line);border-radius:999px;background:rgba(10,10,10,.75);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);overflow:hidden}
html[data-skin="bnbg"] .seg button,html[data-skin="bnbg"] .tabs button,html[data-skin="bnbg"] .tab{
  min-height:44px;min-width:44px;border:0!important;border-radius:999px;background:transparent;color:var(--bnbg-muted);font-weight:500;letter-spacing:.04em;text-shadow:none;box-shadow:none;transition:background .2s,color .2s}
html[data-skin="bnbg"] .seg button.on,html[data-skin="bnbg"] .tabs button.on,html[data-skin="bnbg"] .tab.on,html[data-skin="bnbg"] .tab[aria-selected="true"]{
  background:linear-gradient(180deg,#2B2925,#121110);color:var(--bnbg-gold-bright);box-shadow:inset 0 0 0 1px rgba(232,199,106,.55),0 0 16px rgba(212,175,55,.18)}
/* segment buttons keep a 44px tap target inside the 3px-padded track */
html[data-skin="bnbg"] .tog{border:1px solid var(--bnbg-line);background:#0B0B0B;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
html[data-skin="bnbg"] .tog i,html[data-skin="bnbg"] .tog:not(:has(i)):after{background:linear-gradient(180deg,#8E8571,#5B5546);border:0;box-shadow:0 1px 3px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .tog.on{background:linear-gradient(180deg,#2C2A26,#121211);border-color:var(--bnbg-gold)}
html[data-skin="bnbg"] .tog.on i,html[data-skin="bnbg"] .tog.on:not(:has(i)):after{background:var(--bnbg-metal);box-shadow:0 0 10px rgba(241,210,122,.55)}

/* ---------- 11. inputs + range sliders ---------- */
html[data-skin="bnbg"] input:not([type=range]):not([type=checkbox]):not([type=radio]),html[data-skin="bnbg"] select,html[data-skin="bnbg"] textarea{
  background:var(--bnbg-input);border:1px solid var(--bnbg-line);border-radius:var(--bnbg-r-sm);color:var(--bnbg-text);caret-color:var(--bnbg-gold);min-height:44px;font-weight:500}
html[data-skin="bnbg"] .amt{background:var(--bnbg-input);border:1px solid var(--bnbg-line);box-shadow:inset 0 1px 4px rgba(0,0,0,.7)}
html[data-skin="bnbg"] .amt input{background:none;border:0;min-height:0;color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] input:focus-visible,html[data-skin="bnbg"] select:focus-visible,html[data-skin="bnbg"] textarea:focus-visible{outline:none;border-color:var(--bnbg-gold);box-shadow:0 0 0 3px rgba(212,175,55,.22)}
html[data-skin="bnbg"] input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;border:1px solid #76623B;background:linear-gradient(90deg,#A67C2D,#E8C771) 0/var(--val,50%) 100% no-repeat,#070707;accent-color:var(--bnbg-gold)}
html[data-skin="bnbg"] input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;border:1px solid #FFF0B7;background:radial-gradient(circle at 35% 30%,#FFF3C8,#D4AF37 55%,#8A6B1F);box-shadow:0 2px 8px rgba(0,0,0,.7),0 0 12px rgba(212,175,55,.4)}
html[data-skin="bnbg"] input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:1px solid #FFF0B7;background:#D4AF37}

/* ---------- 12. progress ---------- */
html[data-skin="bnbg"] :is(.bar,.prog,.progress,.xp){background:#070707;border:1px solid #76623B;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
html[data-skin="bnbg"] :is(.bar,.prog,.progress,.xp)>:is(i,span,b,div){background:linear-gradient(90deg,#A67C2D,#E8C771 70%,#FFF0B2);box-shadow:0 0 10px rgba(232,199,113,.45)}
html[data-skin="bnbg"] progress{accent-color:var(--bnbg-gold)}

/* ---------- 13. splash / logo / fine print ---------- */
html[data-skin="bnbg"] .logo{
  color:transparent;background:var(--bnbg-metal);-webkit-background-clip:text;background-clip:text;
  text-shadow:none;transform:none;font-weight:600;letter-spacing:.08em;filter:drop-shadow(0 6px 22px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(212,175,55,.18))}
html[data-skin="bnbg"] .logo :is(span,em,small){-webkit-text-fill-color:var(--bnbg-label);color:var(--bnbg-label);font-weight:500;letter-spacing:var(--bnbg-track-wide);text-transform:uppercase;font-style:normal}
html[data-skin="bnbg"] .logo em{-webkit-text-fill-color:var(--bnbg-gold-bright)}
html[data-skin="bnbg"] .tagl{color:var(--bnbg-text-2);text-shadow:none;font-weight:400;letter-spacing:.12em}
html[data-skin="bnbg"] :is(.fine,.coinnote,.ver,.note){color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .advis{background:rgba(12,12,10,.82);border:1px solid var(--bnbg-line-soft);border-radius:var(--bnbg-r)}
html[data-skin="bnbg"] .advis h4{color:var(--bnbg-label);font-weight:500}
html[data-skin="bnbg"] .age{background:transparent;border:1px solid var(--bnbg-champagne);color:var(--bnbg-gold-hi);box-shadow:none}
html[data-skin="bnbg"] .age small{border-top-color:var(--bnbg-champagne)}
html[data-skin="bnbg"] :is(h1,h2,h3,h4,b,strong){text-shadow:none}

/* ---------- 14. scrollbars ---------- */
html[data-skin="bnbg"] ::-webkit-scrollbar{width:6px;height:6px}
html[data-skin="bnbg"] ::-webkit-scrollbar-track{background:transparent}
html[data-skin="bnbg"] ::-webkit-scrollbar-thumb{background:linear-gradient(#8A6B1F,#6B551F);border-radius:3px}
html[data-skin="bnbg"] ::-webkit-scrollbar-thumb:hover{background:#A8862A}

/* ---------- 15. focus ---------- */
html[data-skin="bnbg"] :is(.btn,.ibtn,.pill,.seg button,.tab,.tog,.card-x,a,button):focus-visible{outline:1.5px solid var(--bnbg-gold-bright);outline-offset:3px}

/* ---------- 16. BNBG-only branding: crest + "BNBG ARCADE" wordmark (splash / HUD corner) ---------- */
.bnbg-only,.bnbg-mark{display:none!important}
html[data-skin="bnbg"] .bnbg-only{display:revert!important}
html[data-skin="bnbg"] .classic-only{display:none!important}
html[data-skin="bnbg"] .bnbg-mark{display:inline-flex!important;align-items:center;gap:8px;color:var(--bnbg-text);pointer-events:none;user-select:none}
html[data-skin="bnbg"] .bnbg-mark img,html[data-skin="bnbg"] .bnbg-mark .crest{width:22px;height:22px;flex:none;filter:drop-shadow(0 0 6px rgba(212,175,55,.25))}
html[data-skin="bnbg"] .bnbg-mark span{font-size:10.5px;font-weight:600;letter-spacing:.32em;line-height:1;white-space:nowrap;background:var(--bnbg-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:420px){html[data-skin="bnbg"] .bnbg-mark:not(.lg) span{display:none}}
html[data-skin="bnbg"] .bnbg-mark.lg img{width:34px;height:34px}
html[data-skin="bnbg"] .bnbg-mark.lg span{font-size:13px}

/* ---------- 17. motion ---------- */
@keyframes bnbg-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px rgba(0,0,0,.55),0 0 18px rgba(212,175,55,.18)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px rgba(0,0,0,.55),0 0 34px rgba(241,210,122,.42)}}
@keyframes bnbg-sheen{from{background-position:120% 0}to{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){html[data-skin="bnbg"] .btn.pulse{animation:none}html[data-skin="bnbg"] .btn:after{transition:none}}

/* ---------- 18. skin picker swatches (used by the settings toggle in BOTH skins; inert unless used) ---------- */
.skin-sw{display:inline-block;width:26px;height:16px;border-radius:5px;vertical-align:-3px;margin-right:6px;flex:none}
.skin-sw.classic{background:linear-gradient(135deg,#FF8A7A 0 45%,#FFD66B 45% 70%,#2F8F78 70%);border:2px solid #1D1B1A;box-shadow:0 2px 0 #1D1B1A}
.skin-sw.bnbg{background:radial-gradient(circle at 70% 50%,#F1D27A 0 2.5px,transparent 3.5px),linear-gradient(135deg,#22231F,#080909);border:1px solid #B79D62;box-shadow:0 0 8px rgba(212,175,55,.35)}
html[data-skin="bnbg"] .skin-sw.classic{border-width:1px;box-shadow:none}

/* ---------- 19. leather layer (v1.1, black since v1.2) - stitched leather after the BNBG world (CR 126/127) ----------
   Every panel / card / modal / sheet / HUD box / pill / toast / banner plate is grained TRUE-BLACK leather (v1.2) with a
   1px #4A3D22 antique-gold edge, a near-black inner rim, a soft top highlight and a dashed gold stitch. Buttons are NOT leather.
   The stitch is an inset dashed OUTLINE (outline-offset < 0), not ::before/::after, so it never collides with the
   games' own pseudo-element decor, follows border-radius (radius - inset) by itself and stays put while a card scrolls.
   Per-element knobs (set them in game.css to tune one surface):
     --bnbg-l-rim     inner dark rim width     (panel 6px, md 4px, sm 3px)
     --bnbg-l-rimc    inner rim colour
     --bnbg-l-inset   stitch inset from the outer edge (panel 9px, md 6px, sm 4px; 0 + transparent = no stitch)
     --bnbg-l-stitch  stitch colour
     --bnbg-l-drop    outer drop shadow
   Sizes: panel = .card .modal .sheet .bnbg-leather | md = .toast #toast .banner #banner .advis .bnbg-leather-md .bnbg-hudbox
          sm (chips) = .pill .chip .bnbg-leather-sm | flat (no stitch) = .seg .tabs .amt .bnbg-leather-flat */
html[data-skin="bnbg"] :is(.card,.modal,.sheet,.bnbg-leather){--bnbg-l-rim:6px;--bnbg-l-rimc:var(--bnbg-leather-rim);--bnbg-l-inset:9px;--bnbg-l-stitch:var(--bnbg-stitch-c);--bnbg-l-drop:0 30px 80px rgba(0,0,0,.72)}
html[data-skin="bnbg"] :is(.toast,.banner,.advis,.bnbg-leather-md,.bnbg-hudbox),
html[data-skin="bnbg"] :is(#toast,#banner){--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"] :is(.pill,.chip,.bnbg-leather-sm){--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,.5)}
/* WCAG AA on the LIGHTEST 2% of the grain (top-left highlight + specks): the small-text tokens are lifted a step on
   leather (eyebrow #C9A95F -> #D4B46A (v1.2 black leather; was #E2C784 on brown), label -> #DCCDA4, muted -> #D2C8B2; tabs' idle text #DDD5C2). Inherited, so every
   eyebrow / fine print / pill caption inside a leather surface passes 4.5:1 (measured by tools/leather-shoot.js). */
html[data-skin="bnbg"] :is(.card,.modal,.sheet,.bnbg-leather,.toast,.banner,.advis,.bnbg-leather-md,.bnbg-hudbox,.pill,.chip,.bnbg-leather-sm,.seg,.tabs,.amt,.bnbg-leather-flat),
html[data-skin="bnbg"] :is(#toast,#banner){--bnbg-eyebrow:#D4B46A;--bnbg-label:#DCCDA4;--bnbg-muted:#D2C8B2;--bnbg-muted-2:#CFC5AE}
html[data-skin="bnbg"] :is(.seg,.tabs,.bnbg-leather-flat){--bnbg-muted:#DDD5C2}
html[data-skin="bnbg"] :is(.seg,.tabs,.amt,.bnbg-leather-flat){--bnbg-l-rim:3px;--bnbg-l-rimc:var(--bnbg-leather-rim-sm);--bnbg-l-inset:0px;--bnbg-l-stitch:transparent;--bnbg-l-drop:0 6px 16px rgba(0,0,0,.45)}

/* the surface itself (one shared grain tile per size: no filters, no per-element images) */
html[data-skin="bnbg"] :is(.card,.modal,.sheet,.bnbg-leather,.toast,.banner,.advis,.bnbg-leather-md,.bnbg-hudbox,.pill,.chip,.bnbg-leather-sm,.seg,.tabs,.amt,.bnbg-leather-flat),
html[data-skin="bnbg"] :is(#toast,#banner){
  background:var(--bnbg-leather);border:1px solid var(--bnbg-leather-edge);border-image:none;
  box-shadow:inset 0 0 0 var(--bnbg-l-rim) var(--bnbg-l-rimc),var(--bnbg-leather-hi),var(--bnbg-l-drop);
  outline:1px dashed var(--bnbg-l-stitch);outline-offset:calc(var(--bnbg-l-inset) * -1);
  color:var(--bnbg-text);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-skin="bnbg"] :is(.pill,.chip,.bnbg-leather-sm,.seg,.tabs,.amt,.bnbg-leather-flat){background:var(--bnbg-leather-sm)}
/* default radii only where the game has none of its own (zero specificity) */
:where(html[data-skin="bnbg"]) :where(.bnbg-leather,.bnbg-leather-md,.bnbg-hudbox){border-radius:var(--bnbg-r)}
:where(html[data-skin="bnbg"]) :where(.bnbg-leather-sm,.bnbg-leather-flat){border-radius:var(--bnbg-r-sm)}
html[data-skin="bnbg"] :is(#toast,.toast){border-radius:var(--bnbg-r)}
html[data-skin="bnbg"] :is(#banner,.banner){border-radius:var(--bnbg-r-sm);color:var(--bnbg-gold-hi);text-shadow:none}

/* interactive leather (lobby / room / level cards, tappable pills): brighter edge + stitch on hover, press and selection */
html[data-skin="bnbg"] :is(.card,.pill,.chip,.bnbg-leather,.bnbg-leather-md,.bnbg-leather-sm,.bnbg-hudbox):is(a,button,[role=button],.tap):hover,
html[data-skin="bnbg"] :is(.card,.pill,.chip,.bnbg-leather,.bnbg-leather-md,.bnbg-leather-sm,.bnbg-hudbox):is([aria-pressed=true],[aria-selected=true],[aria-current]),
html[data-skin="bnbg"] :is(.bnbg-leather,.bnbg-leather-md,.bnbg-leather-sm,.bnbg-hudbox):is(.on,.active,.sel){border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi)}
html[data-skin="bnbg"] :is(.card,.pill,.chip,.bnbg-leather,.bnbg-leather-md,.bnbg-leather-sm,.bnbg-hudbox):is(a,button,[role=button],.tap):active{transform:translateY(1px)}
/* "something to claim here": warm glow, as the world's claimable labels */
html[data-skin="bnbg"] .bnbg-glow{border-color:var(--bnbg-leather-edge-glow);box-shadow:inset 0 0 0 var(--bnbg-l-rim,6px) var(--bnbg-l-rimc,var(--bnbg-leather-rim)),inset 0 1px 0 rgba(255,240,210,.14),var(--bnbg-l-drop,0 10px 26px rgba(0,0,0,.55)),0 0 24px rgba(230,193,117,.3)}

/* controls that live INSIDE a leather surface become recessed dark wells (leather on leather would vanish) */
html[data-skin="bnbg"] :is(.card,.modal,.sheet,.bnbg-leather,.bnbg-leather-md,.advis) :is(.seg,.tabs,.amt){
  background:var(--bnbg-well);border-color:var(--bnbg-well-line);outline:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.75),0 1px 0 rgba(255,240,210,.06)}
html[data-skin="bnbg"] .card .row.sticky{background:linear-gradient(rgba(14,13,12,0),var(--bnbg-leather-deep) 34%)}
html[data-skin="bnbg"] .set{border-bottom-color:rgba(201,169,95,.16)}
/* the header hairline stays INSIDE the stitched frame (12px from the edge clears the 1px edge + 9px stitch), never a seam cut through it */
html[data-skin="bnbg"] .card-h{margin:0 12px;border-radius:0;border-bottom-color:rgba(201,169,95,.22)}
html[data-skin="bnbg"] :is(.card-x,.cardwrap>.x,.x.close,.close){background:#121110;border-color:rgba(212,175,55,.35)}
html[data-skin="bnbg"] :is(.card,.modal,.sheet,.bnbg-leather,.bnbg-leather-md,.bnbg-hudbox) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){background:rgba(6,6,6,.84);border-color:var(--bnbg-well-line)}

/* titles on leather: Georgia / CJK serif, cream; a second line in gold italic (<em>, <i> without a class, or .l2) */
html[data-skin="bnbg"] :is(.card,.modal,.sheet) h2,html[data-skin="bnbg"] .card-h h2{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);letter-spacing:.01em;line-height:1.15}
html[data-skin="bnbg"] :is(.card,.modal,.sheet) :is(h3,.eyebrow){color:var(--bnbg-eyebrow)}
html[data-skin="bnbg"] :is(.card,.modal,.sheet) h2 :is(em,.l2,i:not([class])),
html[data-skin="bnbg"] .bnbg-title :is(em,.l2,i:not([class])){display:block;font-style:italic;color:var(--bnbg-gold-italic);font-weight:400}

/* type helpers for leather surfaces */
html[data-skin="bnbg"] .bnbg-title{margin:6px 0 10px;font-family:var(--bnbg-serif);font-weight:400;font-size:clamp(26px,7.6vw,36px);line-height:1.15;letter-spacing:.005em;color:var(--bnbg-text);text-shadow:none}
html[data-skin="bnbg"] .bnbg-title.sm{font-size:clamp(20px,5.6vw,26px)}
html[data-skin="bnbg"] .bnbg-serif{font-family:var(--bnbg-serif);font-weight:400}
html[data-skin="bnbg"] .bnbg-big{display:block;font-family:var(--bnbg-num-light);font-weight:300;font-size:clamp(30px,8.8vw,44px);line-height:1.05;letter-spacing:-.01em;color:var(--bnbg-text);font-variant-numeric:tabular-nums lining-nums;text-shadow:none;white-space:nowrap}
html[data-skin="bnbg"] .bnbg-big.sm{font-size:clamp(22px,6.4vw,30px)}
html[data-skin="bnbg"] .bnbg-big :is(.u,small){font-size:.5em;letter-spacing:.04em;color:var(--bnbg-eyebrow);font-weight:400}
html[data-skin="bnbg"] .bnbg-sub{display:block;font-size:13px;line-height:1.3;color:var(--bnbg-text-2);font-weight:400}
html[data-skin="bnbg"] .bnbg-muted{color:var(--bnbg-muted)}

/* HUD box (LEVEL / GOAL / MOVES, score, timer): eyebrow, big light number, optional sub line */
:where(html[data-skin="bnbg"]) :where(.bnbg-hudbox){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:10px 12px 11px;text-align:center}
html[data-skin="bnbg"] .bnbg-hudbox .bnbg-eyebrow{font-size:10.5px;letter-spacing:.2em}
html[data-skin="bnbg"] .bnbg-hudbox :is(.bar,.prog,.progress,.xp){width:100%;margin-top:4px}
@media (max-width:420px){html[data-skin="bnbg"] .bnbg-hudbox{--bnbg-l-rim:3px;--bnbg-l-inset:5px}}