/* 麻辣雀局 Mahjong - BNBG Black Gold per-game layer (linked after skin-bnbg.css). Everything is scoped under
   html[data-skin="bnbg"]; classic is untouched. Suit colours (万 red, 条 green, 筒 blue) stay distinguishable as jewel tones.
   Kit v1.2 leather: every panel / plate / HUD box below is stitched TRUE-BLACK leather with gold stitching (owner decision
   2026-10-22, "black leather cool vibe"; v1.1 used the BNBG world's black-brown). Section "leather pass" at the end; the old
   v1.0 obsidian background / border / shadow rules for those surfaces were removed so they cannot cover it. Every surface,
   well, scrim and divider here is neutral black + gold: no brown hex survives (v1.1 browns -> kit tokens, see the kit
   README section 7b). Buttons (gold primary, black lacquer secondary) are unchanged. */
html[data-skin="bnbg"]{--mj-plate:linear-gradient(180deg,rgba(28,27,26,.94),rgba(9,9,9,.94));
  /* recessed well inside leather (chat buttons, result rows, sign-in days, settings panels): the kit's well over the grain, so
     it stays visibly textured; hairline = the kit's bronze well line */
  --mj-well:linear-gradient(180deg,rgba(4,4,4,.42),rgba(12,12,11,.28)),var(--bnbg-leather-grain-sm) 0 0/120px 120px repeat,#141312;
  --mj-well-sh:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,240,210,.06);--mj-s0:#9A2E3A;--mj-s1:#1E6B4E;--mj-s2:#284C86}

/* ---------- crest chip (skin switch) ---------- */
html[data-skin="bnbg"] .skin-chip{border:1px solid var(--bnbg-line);background:radial-gradient(circle at 50% 30%,#262421 0,#0B0B0A 72%);box-shadow:inset 0 1px 0 rgba(255,240,183,.14),0 6px 16px rgba(0,0,0,.55)}
html[data-skin="bnbg"] .skin-chip[aria-pressed="true"]{border-color:rgba(232,199,106,.8);box-shadow:0 0 0 1px rgba(212,175,55,.22),inset 0 1px 0 rgba(255,240,183,.18),0 6px 16px rgba(0,0,0,.55),0 0 18px rgba(212,175,55,.28)}
html[data-skin="bnbg"] .skin-chip img{filter:drop-shadow(0 0 5px rgba(212,175,55,.35))}
html[data-skin="bnbg"] .skin-chip:active{transform:translateY(1px)}
html[data-skin="bnbg"] .skin-chip:focus-visible{outline:1.5px solid var(--bnbg-gold-bright)}

/* ---------- splash ---------- */
html[data-skin="bnbg"] #scr-splash{padding-top:calc(78px + var(--sat));background:radial-gradient(ellipse at 50% 42%,transparent 0,transparent 32%,rgba(5,5,4,.82) 76%,#050505 100%)}
html[data-skin="bnbg"] #scr-splash>.bnbg-mark{position:absolute;top:calc(22px + var(--sat));left:50%;transform:translateX(-50%)}
html[data-skin="bnbg"] .logo{font-weight:900;letter-spacing:.1em}
html[data-skin="bnbg"] .logo i{color:transparent;-webkit-text-fill-color:transparent}
html[data-skin="bnbg"] .logo small{font-family:var(--bnbg-font);font-size:.2em;margin-top:14px;letter-spacing:.42em}
html[data-skin="bnbg"] .advisory b{color:var(--bnbg-label);font-weight:500;letter-spacing:.32em}
html[data-skin="bnbg"] .age b{background:var(--bnbg-fill);color:var(--bnbg-ink);font-weight:600}
html[data-skin="bnbg"] .ver{opacity:1}

/* ---------- lobby ---------- */
html[data-skin="bnbg"] .me canvas{border:1.5px solid var(--bnbg-champagne);box-shadow:0 0 0 3px rgba(10,10,10,.8),0 6px 16px rgba(0,0,0,.55)}
html[data-skin="bnbg"] .me b{font-weight:500;letter-spacing:.02em}
html[data-skin="bnbg"] .me small{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .pill .plus{background:var(--bnbg-fill);border:0;color:var(--bnbg-ink);font-weight:500}
html[data-skin="bnbg"] .hero:after{background:radial-gradient(circle,rgba(241,210,122,.16),transparent 70%)}
html[data-skin="bnbg"] .hero p{color:var(--bnbg-text-2);opacity:1}
html[data-skin="bnbg"] .hero canvas{filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
html[data-skin="bnbg"] .room:active{translate:none;transform:translateY(1px)}
html[data-skin="bnbg"] .room .kv{color:var(--bnbg-muted);font-weight:400}
html[data-skin="bnbg"] .room .kv b{color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] .room .lv i{background:#22211F;border:1px solid var(--bnbg-leather-edge);border-radius:2px;width:6px}
html[data-skin="bnbg"] .room .lv i.on{background:var(--bnbg-fill);border-color:#B8913A}
html[data-skin="bnbg"] .room.locked{filter:none;opacity:.72}
html[data-skin="bnbg"] .room .deco{filter:grayscale(1) sepia(1) saturate(1.5) hue-rotate(-8deg) brightness(.82);opacity:.38}
html[data-skin="bnbg"] .lantern{display:none}

/* ---------- table HUD ---------- */
html[data-skin="bnbg"] .seat .av canvas{border:1.5px solid var(--bnbg-champagne);box-shadow:0 0 0 3px rgba(10,10,10,.85),0 6px 14px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .seat.turn .av canvas{border-color:var(--bnbg-gold-bright);box-shadow:0 0 0 3px rgba(10,10,10,.85),0 0 0 4.5px rgba(241,210,122,.55),0 0 22px rgba(241,210,122,.55)}
html[data-skin="bnbg"] .seat .nm b{font-weight:500;color:var(--bnbg-text)}
html[data-skin="bnbg"] .seat .nm span{color:var(--bnbg-gold-hi);font-weight:500;font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .badge.b-zhuang{background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid #0A0A0A;box-shadow:0 0 0 1px rgba(212,175,55,.5)}
html[data-skin="bnbg"] .badge.b-que{color:#FFF3E6;border:1px solid rgba(232,199,106,.85);box-shadow:0 0 0 1.5px #0A0A0A}
html[data-skin="bnbg"] .badge.b-que.s0{background:var(--mj-s0)}html[data-skin="bnbg"] .badge.b-que.s1{background:var(--mj-s1)}html[data-skin="bnbg"] .badge.b-que.s2{background:var(--mj-s2)}html[data-skin="bnbg"] .badge.b-que.q{background:#2E2D2B}
html[data-skin="bnbg"] .badge.b-tuo{background:#1A1918;border:1px solid var(--bnbg-line)}
html[data-skin="bnbg"] .badge.b-hu{background:rgba(10,10,10,.82);color:var(--bnbg-gold-bright);border:1px solid var(--bnbg-gold);box-shadow:0 0 18px rgba(212,175,55,.35)}
html[data-skin="bnbg"] .badge.b-hu small{background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid #0A0A0A}
html[data-skin="bnbg"] .act{border:1.5px solid transparent;background:var(--bnbg-lacquer) padding-box,var(--bnbg-rim) border-box;color:var(--bnbg-btn-text);text-shadow:none;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,240,183,.16),0 10px 24px rgba(0,0,0,.6),var(--bnbg-glow)}
html[data-skin="bnbg"] .act:active{translate:none;transform:translateY(1px)}
html[data-skin="bnbg"] .act.pass{background:linear-gradient(#141412,#0B0B0A) padding-box,linear-gradient(var(--bnbg-line),var(--bnbg-line)) border-box;color:var(--bnbg-muted)}
html[data-skin="bnbg"] .act.peng{background:radial-gradient(circle at 50% 30%,#163B2E,#0A120E 75%) padding-box,linear-gradient(158deg,#BFE9D2,#1E6B4E 55%,#E5C576) border-box;color:#D9F3E6}
html[data-skin="bnbg"] .act.gang{background:radial-gradient(circle at 50% 30%,#1A2A45,#0A0E16 75%) padding-box,linear-gradient(158deg,#C9DAF6,#284C86 55%,#E5C576) border-box;color:#DDE7FA}
html[data-skin="bnbg"] .act.hu{background:var(--bnbg-fill) padding-box,linear-gradient(158deg,#FFF3C8,#B8913A 50%,#F1D27A) border-box;color:var(--bnbg-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 30px rgba(0,0,0,.6),0 0 34px rgba(212,175,55,.45)}
html[data-skin="bnbg"] .act small{color:var(--bnbg-label);text-shadow:0 1px 3px #000;font-weight:500;letter-spacing:.06em}
html[data-skin="bnbg"] .act kbd{background:#0A0A0A;color:var(--bnbg-gold-hi);border:1px solid var(--bnbg-line)}
html[data-skin="bnbg"] .ctile{box-shadow:0 0 0 1.5px var(--bnbg-gold),0 8px 18px rgba(0,0,0,.6),0 0 22px rgba(212,175,55,.35)}
html[data-skin="bnbg"] .phase-banner small{color:var(--bnbg-muted);opacity:1;font-weight:400;letter-spacing:.04em}
html[data-skin="bnbg"] .phase-banner .cd{background:transparent;border:1px solid var(--bnbg-gold);color:var(--bnbg-gold-bright);font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .phase-banner .cd.hot{border-color:var(--bnbg-red);color:var(--bnbg-red)}
html[data-skin="bnbg"] #g-tuo{cursor:pointer}
html[data-skin="bnbg"] .que-btn{border:1.5px solid rgba(232,199,106,.75);color:#FFF6EA;text-shadow:0 1px 6px rgba(0,0,0,.5);box-shadow:0 0 0 3px rgba(10,10,10,.85),0 12px 26px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .que-btn.s0{background:radial-gradient(circle at 50% 30%,#C25462,var(--mj-s0) 55%,#3E1218)}
html[data-skin="bnbg"] .que-btn.s1{background:radial-gradient(circle at 50% 30%,#3E9C78,var(--mj-s1) 55%,#0C2A1F)}
html[data-skin="bnbg"] .que-btn.s2{background:radial-gradient(circle at 50% 30%,#5279B8,var(--mj-s2) 55%,#101E36)}
html[data-skin="bnbg"] .que-btn.rec{box-shadow:0 0 0 3px rgba(10,10,10,.85),0 0 0 4.5px var(--bnbg-gold-bright),0 0 26px rgba(241,210,122,.55)}
html[data-skin="bnbg"] .que-btn em{background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid #0A0A0A;font-weight:600;font-family:var(--bnbg-font)}
html[data-skin="bnbg"] .que-btn small{color:var(--bnbg-label);text-shadow:0 1px 3px #000;font-family:var(--bnbg-font);font-weight:500}
html[data-skin="bnbg"] .tmark{border-top-color:var(--bnbg-gold-bright);filter:drop-shadow(0 0 4px rgba(241,210,122,.7))}
html[data-skin="bnbg"] .qtag{background:#5A1A24;color:#FFDCE2;border:1px solid rgba(255,107,128,.6);font-weight:500}
html[data-skin="bnbg"] .ting-pop .w b{color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .ting-pop .w i{color:var(--bnbg-muted)}
html[data-skin="bnbg"] .ting-pop .note{color:var(--bnbg-muted)}
html[data-skin="bnbg"] .float{text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 1px #000;font-weight:600;font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .stamp small{-webkit-text-fill-color:var(--bnbg-label);color:var(--bnbg-label);padding-bottom:.3em}
html[data-skin="bnbg"] #banner small{color:var(--bnbg-label);font-family:var(--bnbg-font);font-weight:500;letter-spacing:.32em;text-transform:uppercase;text-shadow:none}
html[data-skin="bnbg"] #flash{background:radial-gradient(circle at 50% 50%,#FFF3C8,rgba(212,175,55,.6) 45%,transparent 75%)}

/* ---------- result / records / rules / sign-in ---------- */
html[data-skin="bnbg"] .res-row .av canvas{border:1.5px solid var(--bnbg-champagne)}
html[data-skin="bnbg"] .res-row .who{font-weight:500}
html[data-skin="bnbg"] .res-row .fans{color:var(--bnbg-muted)}
html[data-skin="bnbg"] .res-row .fans b{color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .st{border:1px solid transparent;font-weight:500}
html[data-skin="bnbg"] .st.win{background:var(--bnbg-fill);color:var(--bnbg-ink)}
html[data-skin="bnbg"] .st.ting{background:#123A2C;color:#BFEBD6;border-color:rgba(34,217,154,.4)}
html[data-skin="bnbg"] .st.noting{background:#1C1B1A;color:var(--bnbg-muted);border-color:var(--bnbg-line-soft)}
html[data-skin="bnbg"] .st.huazhu{background:#3A1A2E;color:#F4C6E2;border-color:rgba(200,90,154,.5)}
html[data-skin="bnbg"] .big-ribbon{background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid #0A0A0A;box-shadow:0 0 0 1px rgba(212,175,55,.45);transform:none;letter-spacing:.12em;font-weight:600}
html[data-skin="bnbg"] .lnk{background:transparent;border:1px solid var(--bnbg-line);border-radius:999px;color:var(--bnbg-gold-hi);font-family:var(--bnbg-font);font-weight:500}
html[data-skin="bnbg"] :is(.ledger div,.fanrow,.rec){border-color:rgba(183,157,98,.16)}
html[data-skin="bnbg"] .ledger .g{color:var(--bnbg-gold-hi);font-weight:500}html[data-skin="bnbg"] .ledger .l{color:#9C9484;font-weight:500}
html[data-skin="bnbg"] .panel b{color:var(--bnbg-label);font-weight:500;letter-spacing:.2em}
html[data-skin="bnbg"] .fanrow b{color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] .fanrow em{color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .fanrow p,html[data-skin="bnbg"] .rec small{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .steps{color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .steps li::marker{color:var(--bnbg-gold)}
html[data-skin="bnbg"] .rec .h{font-weight:500}
html[data-skin="bnbg"] .sday b{color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .sday.done{filter:none;opacity:.5}
html[data-skin="bnbg"] .sday.done:after{color:var(--bnbg-gold-bright);text-shadow:0 0 12px rgba(0,0,0,.9)}
html[data-skin="bnbg"] .set span{font-weight:400}
html[data-skin="bnbg"] .set.skinrow .seg button{padding:0 14px}
html[data-skin="bnbg"] .room.locked .tag{background:transparent;color:var(--bnbg-muted)}
html[data-skin="bnbg"] #banner{font-size:clamp(34px,10vw,72px)}
html[data-skin="bnbg"] #app.en #banner{font-size:clamp(26px,7.4vw,56px);letter-spacing:0}
html[data-skin="bnbg"] #app.en .hero .ribbon{letter-spacing:.1em}

/* ---------- review fixes (2026-10-22) ---------- */
/* splash on a landscape phone: keep the logo, the start button and the 16+ / play-coin note inside the viewport */
@media (max-height:500px){
  html[data-skin="bnbg"] #scr-splash{padding-top:calc(34px + var(--sat))}
  html[data-skin="bnbg"] #scr-splash>.bnbg-mark{top:calc(8px + var(--sat))}
  html[data-skin="bnbg"] .bnbg-mark.lg img{width:24px;height:24px}
  html[data-skin="bnbg"] .logo small{margin-top:4px}
}
/* the splash crest chip says what it is (the BNBG ARCADE mark above the logo is not a control) */
html[data-skin="bnbg"] #splash-skin:after{content:'皮肤';position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:5px;font-size:10px;font-weight:500;letter-spacing:.22em;text-indent:.22em;color:var(--bnbg-label);white-space:nowrap;pointer-events:none}
html[data-skin="bnbg"] #app.en #splash-skin:after{content:'SKIN'}
/* in-game menu: 继续 is the one gold action, settings / rules are quiet lacquer */
html[data-skin="bnbg"] .btn.resume{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.sm.gold.mi{background:linear-gradient(180deg,#1A1918,#0B0B0A) 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);font-weight:500;text-shadow:none;box-shadow:none}
/* settlement header: "hand over" is neutral champagne, red stays for real losses / warnings */
html[data-skin="bnbg"] .res-head .ribbon.red{border-color:var(--bnbg-line);color:var(--bnbg-label)}

/* =====================================================================================================================
   LEATHER PASS (kit v1.1, BNBG world CR 126/127): this game's own panels, plates and HUD boxes in the kit's stitched
   true-black leather (kit v1.2). Same recipe as skin-bnbg.css section 19 (one shared pre-tiled grain per size, inset rim, top
   highlight, dashed gold stitch as an inset outline); the kit already covers .card .pill .chip .seg #toast #banner.
   Sizes: panel = .hero .pop | md = .room .advisory .phase-banner .ting-pop .picker #nogl #rest #g-actions
          sm (stitched chip) = .info .nm .bubble | flat (too small for a stitch) = .status
   ===================================================================================================================== */
html[data-skin="bnbg"] :is(.hero,.pop){--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 26px 64px rgba(0,0,0,.7)}
html[data-skin="bnbg"] :is(.room,.advisory,.phase-banner,.ting-pop,.picker),
html[data-skin="bnbg"] :is(#nogl,#rest,#g-actions){--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(.info,.nm,.bubble){--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)}
html[data-skin="bnbg"] :is(.status,.bubble.emo){--bnbg-l-rim:2px;--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,.5)}
/* AA on the lightest grain: the lifted small-text tokens, as the kit does inside its own leather surfaces. On this game's black
   leather the kit's #D4B46A eyebrow / #D2C8B2 muted measured only 4.51 / 4.60 (advisory heading, sign-in subtitle; lightest 2%
   of the grain, review/leather-contrast.js), so they go one step lighter here, the modal cards included: >= 5:1 */
html[data-skin="bnbg"] :is(.hero,.pop,.room,.advisory,.phase-banner,.ting-pop,.picker,.info,.nm,.bubble,.status,.stamp,.card),
html[data-skin="bnbg"] :is(#nogl,#rest,#g-actions){--bnbg-eyebrow:#DDC07A;--bnbg-label:#DCCDA4;--bnbg-muted:#DCD4C2;--bnbg-muted-2:#D8D0BD}
/* the surface */
html[data-skin="bnbg"] :is(.hero,.pop,.room,.advisory,.phase-banner,.ting-pop,.picker,.info,.nm,.bubble,.status),
html[data-skin="bnbg"] :is(#nogl,#rest,#g-actions:not(.hide)){
  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(.info,.nm,.bubble,.status){background:var(--bnbg-leather-sm)}
/* interactive leather: brighter edge + stitch on hover (room cards and the 托管 banner are tappable); keyboard focus ring */
html[data-skin="bnbg"] :is(.room:not(.locked),#g-tuo):hover{border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi)}
html[data-skin="bnbg"] :is(.room,.pill):focus-visible{outline:1.5px solid var(--bnbg-gold-bright);outline-offset:2px}
/* (the classic corner frets would sit on the stitch line: in this skin the two pseudo-elements become the scroll-edge rim shadows, see the BLACK + GOLD PASS below) */

/* ---------- lobby: hero (two-line serif title, second line gold italic) and room cards ---------- */
html[data-skin="bnbg"] .hero{border-radius:var(--bnbg-r-lg)}
html[data-skin="bnbg"] .hero:after{background:radial-gradient(circle,rgba(241,210,122,.10),transparent 70%)}
html[data-skin="bnbg"] .hero .ribbon{background:transparent;border:0;padding:0;margin:0 0 4px;font-size:11.5px;font-weight:500;letter-spacing:.2em;color:var(--bnbg-eyebrow)}
html[data-skin="bnbg"] .hero h1{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.02em;line-height:1.12}
html[data-skin="bnbg"] .hero h1 span{color:var(--bnbg-text);-webkit-text-fill-color:currentColor;background:none}
html[data-skin="bnbg"] .hero h1 span+span{font-style:italic;color:var(--bnbg-gold-italic)}
html[data-skin="bnbg"] #app.en .hero h1{font-family:var(--bnbg-serif);letter-spacing:0}
html[data-skin="bnbg"] .hero p{color:var(--bnbg-text-2);opacity:1}
html[data-skin="bnbg"] .room{border-radius:var(--bnbg-r);padding:13px 15px 12px}
html[data-skin="bnbg"] .room h3{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);letter-spacing:.06em;text-shadow:none}
html[data-skin="bnbg"] #app.en .room h3{letter-spacing:0}
html[data-skin="bnbg"] .room .lv{right:13px;top:13px}
html[data-skin="bnbg"] .room .tag{border-color:rgba(201,169,95,.55);color:var(--bnbg-label)}
html[data-skin="bnbg"] .room .deco{right:-2px;bottom:-4px;filter:grayscale(1) sepia(1) saturate(1.3) hue-rotate(-10deg) brightness(.9);opacity:.34}
html[data-skin="bnbg"] .advisory{padding:12px 16px;border-radius:var(--bnbg-r);color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .advisory b{color:var(--bnbg-eyebrow)}
html[data-skin="bnbg"] #nogl{padding:10px 14px;border-radius:var(--bnbg-r)}

/* ---------- table HUD: info box, seat name plates, status chips, bubbles, phase banners, claim bar housing ---------- */
html[data-skin="bnbg"] .info{padding:6px 12px 7px;border-radius:12px;font-weight:400;color:var(--bnbg-text)}
html[data-skin="bnbg"] .info b{font-weight:500;letter-spacing:.14em;color:#EBD49C} /* one step lighter than the eyebrow token: 16px on the sm grain needs it for AA */
html[data-skin="bnbg"] .seat .nm{padding:6px 10px;border-radius:10px}
html[data-skin="bnbg"] .seat .nm b{color:var(--bnbg-text)}
html[data-skin="bnbg"] .seat.turn .nm{border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi)}
html[data-skin="bnbg"] .status{border-radius:8px;color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] .bubble{border-radius:12px;padding:8px 12px;color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] .bubble.emo{padding:3px 9px}
html[data-skin="bnbg"] .phase-banner{border-radius:var(--bnbg-r);padding:10px 22px 11px;color:var(--bnbg-text);font-family:var(--bnbg-serif);font-weight:400;letter-spacing:.06em}
html[data-skin="bnbg"] #app.en .phase-banner{letter-spacing:.01em}
html[data-skin="bnbg"] .phase-banner small{font-family:var(--bnbg-font);color:var(--bnbg-muted);opacity:1;font-weight:400;letter-spacing:.04em;margin-top:2px}
html[data-skin="bnbg"] .phase-banner .cd{background:rgba(7,7,7,.6);border:1px solid var(--bnbg-gold);color:var(--bnbg-gold-bright);font-family:var(--bnbg-num-light);font-weight:400}
html[data-skin="bnbg"] #g-spect .phase-banner{padding:8px 16px}
/* claim / own-turn bar: a leather housing; the countdown ring keeps running round its edge, buttons sit inside the stitch */
html[data-skin="bnbg"] #g-actions:not(.hide){--bnbg-l-inset:9px;border-radius:24px;padding:14px 16px 18px}
html[data-skin="bnbg"] .chip{padding:6px 12px;font-family:var(--bnbg-font);color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .chip small{color:var(--bnbg-text)}
html[data-skin="bnbg"] :is(.ting-pop,.picker){border-radius:var(--bnbg-r);padding:12px 14px}
html[data-skin="bnbg"] .ting-pop .w b{color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .ting-pop .w i{color:var(--bnbg-muted)}
html[data-skin="bnbg"] .ting-pop .note{color:var(--bnbg-muted)}
html[data-skin="bnbg"] :is(.ting-pop,.picker):hover{border-color:var(--bnbg-leather-edge-hi)}
/* chat pop-up: a leather panel; its phrase / emoji buttons are dark recessed wells */
html[data-skin="bnbg"] .pop{border-radius:var(--bnbg-r);padding:16px}
html[data-skin="bnbg"] :is(.pop .grid button,.pop .ph button){background:var(--mj-well);border:1px solid var(--bnbg-well-line);box-shadow:var(--mj-well-sh);color:var(--bnbg-text);font-weight:400}
html[data-skin="bnbg"] :is(.pop .grid button,.pop .ph button):hover{border-color:var(--bnbg-leather-edge-hi)}
/* rest reminder: a leather toast plate */
html[data-skin="bnbg"] #rest{border-radius:var(--bnbg-r);padding:12px 12px 12px 18px;font-weight:400}

/* ---------- win banner + seal stamps: leather plates, metal type ---------- */
html[data-skin="bnbg"] #banner{left:0;right:0;width:max-content;max-width:94vw;margin:-.5em auto 0;padding:.22em .7em .26em;border-radius:var(--bnbg-r);color:var(--bnbg-gold-hi)!important;font-weight:600;letter-spacing:.16em;-webkit-text-stroke:0}
html[data-skin="bnbg"] #banner small{margin-top:8px}
html[data-skin="bnbg"] .stamp{color:transparent!important;-webkit-text-fill-color:transparent;
  background:var(--bnbg-metal),var(--bnbg-leather-grain) 0 0/160px 160px repeat,var(--bnbg-leather-base);
  -webkit-background-clip:text,padding-box,padding-box;background-clip:text,padding-box,padding-box;
  border:1px solid var(--bnbg-leather-edge-hi)!important;border-radius:var(--bnbg-r);line-height:1.2;padding:.16em .55em .2em;
  box-shadow:inset 0 0 0 4px var(--bnbg-leather-rim),var(--bnbg-leather-hi),0 18px 44px rgba(0,0,0,.7),0 0 40px rgba(212,175,55,.2);
  outline:1px dashed var(--bnbg-stitch-c);outline-offset:-7px;filter:none}

/* ---------- result (结算) card: two-line title, ledger rows as recessed wells, light numbers ---------- */
html[data-skin="bnbg"] .card.result .res-head h2:after{content:'下局再战。';display:block;font-style:italic;font-size:.62em;color:var(--bnbg-gold-italic);margin-top:2px;letter-spacing:.04em}
html[data-skin="bnbg"] .card.result:has(.res-row.mine .net.gain) .res-head h2:after{content:'胡得漂亮。'}
html[data-skin="bnbg"] #app.en .card.result .res-head h2:after{content:'The next hand awaits.';letter-spacing:0}
html[data-skin="bnbg"] #app.en .card.result:has(.res-row.mine .net.gain) .res-head h2:after{content:'Beautifully won.'}
html[data-skin="bnbg"] :is(.res-row,.panel,.sday){background:var(--mj-well);border:1px solid var(--bnbg-well-line);box-shadow:var(--mj-well-sh);border-radius:var(--bnbg-r)}
html[data-skin="bnbg"] .res-row.mine{border-color:var(--bnbg-leather-edge-hi);background:linear-gradient(90deg,rgba(212,175,55,.12),rgba(5,5,5,.3) 60%),var(--bnbg-leather-grain-sm) 0 0/120px 120px repeat,#141312;box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(161,124,52,.25)}
html[data-skin="bnbg"] .res-row .net{font-family:var(--bnbg-num-light);font-weight:300;font-size:30px;-webkit-text-stroke:0;text-shadow:none;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
html[data-skin="bnbg"] .net.gain{color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .net.loss{color:var(--bnbg-muted)}
html[data-skin="bnbg"] .net.zero{color:var(--bnbg-text);opacity:.8}
html[data-skin="bnbg"] .res-row .who b{font-weight:500;color:var(--bnbg-text)}
html[data-skin="bnbg"] .ledger .l{color:var(--bnbg-muted)}
@media (max-height:520px) and (min-width:600px){
  html[data-skin="bnbg"] .card.result .res-head h2:after{display:inline;margin:0 0 0 .5em;font-size:.8em}
  html[data-skin="bnbg"] .card.result .res-row .net{font-size:22px}
}
/* sign-in days: wells inside the leather card; today glows like the world's claimable labels */
html[data-skin="bnbg"] .sday{color:var(--bnbg-muted);font-weight:500}
html[data-skin="bnbg"] .sday.today{border-color:var(--bnbg-leather-edge-glow);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(179,138,58,.5),0 0 18px rgba(230,193,117,.3)}
html[data-skin="bnbg"] .sday.d7{background:radial-gradient(ellipse at 50% 20%,rgba(212,175,55,.16),transparent 70%),var(--mj-well);color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .panel{padding:10px 12px}

/* =====================================================================================================================
   LEATHER FIX PASS (art review of the leather pass, 2026-10-22)
   ===================================================================================================================== */
/* Modal cards scroll (rules, settings, long results). The stitched frame now lives in an 11px border band: the 1px edge and
   the 6px dark rim are one pre-drawn SVG ring (no filter, sized to the card), the leather fills the border box, and the
   dashed stitch (the kit's outline, 9px in) sits inside that band. The scroll area is the padding box, so scrolled text
   and tiles are clipped 2px inside the stitch and can never run across it. */
html[data-skin="bnbg"] .card{border:11px solid transparent;border-radius:var(--bnbg-r-lg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='20' fill='none' stroke='%230B0A09' stroke-width='14'/%3E%3Crect width='100%25' height='100%25' rx='20' fill='none' stroke='%234A3D22' stroke-width='2'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat border-box,
    var(--bnbg-leather-grain) 0 0/160px 160px repeat border-box,var(--bnbg-leather-base) border-box;
  box-shadow:var(--bnbg-l-drop);outline-offset:-9px;padding:13px 12px 12px;scrollbar-color:rgba(212,175,55,.4) transparent}
html[data-skin="bnbg"] .card.result{padding:11px 8px 10px}
@media (max-height:520px) and (min-width:600px){html[data-skin="bnbg"] .card.result{padding:6px 10px 6px}}

/* breathing room between the stitch and the content of the lobby room cards; the faded decorations sit inside the stitch */
html[data-skin="bnbg"] .room{padding:15px 17px 16px;isolation:isolate}
html[data-skin="bnbg"] .room .lv{right:16px;top:15px}
html[data-skin="bnbg"] .room .deco{right:9px;bottom:9px;width:54px;height:54px;z-index:-1}
html[data-skin="bnbg"] .room .tag{background:rgba(12,12,11,.88)}
html[data-skin="bnbg"] .room.locked .tag{background:rgba(12,12,11,.88)}

/* big numbers are the light face, lining figures (the 我的雀豆 balance under the coin) */
html[data-skin="bnbg"] .card>canvas+h2{font-family:var(--bnbg-num-light);font-weight:300;font-size:40px;color:var(--bnbg-text);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}

/* win moment: the toast plate never sits on the win banner plate (the banner waits for the stamp: fx.js Banner.show) */
html[data-skin="bnbg"] #app.banner-on #toast{opacity:0!important}
@media (max-height:500px){
  html[data-skin="bnbg"] #banner{top:20%!important;font-size:clamp(26px,9vh,44px);padding:.14em .5em}
  html[data-skin="bnbg"] #app.en #banner{font-size:clamp(22px,7.5vh,36px)}
}

/* =====================================================================================================================
   LEATHER FIX PASS 2 (final art review, 2026-10-22)
   ===================================================================================================================== */
/* ONE shared grain texture. The feTurbulence tile is rasterised at device resolution, so on 2x / 3x phones the same
   baseFrequency gave grain at 1/2 or 1/3 of the approved 1x target's size (read as sandpaper). The token is redefined per
   pixel density so the grain's CSS size matches the target, and the chip variant is the same tile (chips draw it at 120px). */
html[data-skin="bnbg"]{--bnbg-leather-grain-sm:var(--bnbg-leather-grain)}
@media (min-resolution:1.5dppx){html[data-skin="bnbg"]{--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.63' 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")}}
@media (min-resolution:2dppx){html[data-skin="bnbg"]{--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.48' 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")}}
@media (min-resolution:3dppx){html[data-skin="bnbg"]{--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.32' 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")}}

/* The stitch as a real ::after border on this game's own surfaces (the kit's inset outline is square on iOS Safari < 16.4,
   still common in WeChat, and would cut across every rounded corner). Radius = surface radius - stitch inset.
   .card keeps the outline: it is the scroll container (an ::after would scroll away with the content). */
html[data-skin="bnbg"] :is(.room,.advisory,.phase-banner,.ting-pop,.picker,.pop,.chip){--mj-r:var(--bnbg-r)}
html[data-skin="bnbg"] :is(#rest,#nogl,#banner,#toast){--mj-r:var(--bnbg-r)}
html[data-skin="bnbg"] :is(.info,.bubble){--mj-r:12px}
html[data-skin="bnbg"] .seat .nm{--mj-r:10px}
html[data-skin="bnbg"] .status{--mj-r:8px}
html[data-skin="bnbg"] #g-actions{--mj-r:24px}
html[data-skin="bnbg"] :is(.info,.advisory,.phase-banner,.seat .nm){position:relative}
html[data-skin="bnbg"] #nogl{position:relative}
html[data-skin="bnbg"] :is(.room,.advisory,.phase-banner,.ting-pop,.picker,.pop,.chip,.info,.bubble,.seat .nm,.status){outline:0}
html[data-skin="bnbg"] :is(#rest,#nogl,#banner,#toast,#g-actions){outline:0}
html[data-skin="bnbg"] :is(.room,.advisory,.phase-banner,.ting-pop,.picker,.pop,.chip,.info,.bubble,.seat .nm,.status)::after,
html[data-skin="bnbg"] :is(#rest,#nogl,#banner,#toast,#g-actions:not(.hide))::after{content:'';position:absolute;inset:var(--bnbg-l-inset);border:1px dashed var(--bnbg-l-stitch);border-radius:max(0px,calc(var(--mj-r) - var(--bnbg-l-inset)));pointer-events:none}
html[data-skin="bnbg"] .room:focus-visible{outline:1.5px solid var(--bnbg-gold-bright);outline-offset:2px}

/* claim housing on narrow phones (< 375px): slimmer padding so it never covers the player's own name plate */
@media (max-width:374px){html[data-skin="bnbg"] #g-actions:not(.hide){padding:10px 10px 12px;gap:8px;--bnbg-l-inset:7px}}

/* locked room cards and claimed sign-in days: the leather plate stays opaque (translucency turned it grey), only the content dims */
html[data-skin="bnbg"] .room.locked{opacity:1}
html[data-skin="bnbg"] .room.locked>:not(.tag):not(.deco){opacity:.7}
html[data-skin="bnbg"] .sday.done{opacity:1}
html[data-skin="bnbg"] .sday.done>*{opacity:.6}

/* result card header: breathing room under the stitch; on landscape phones the details pill joins the header row and the
   top-scorer chip sits inside its row (it was clipped by the scrolling row list and overlapped the second column) */
html[data-skin="bnbg"] .card.result .res-head{margin:4px 0 6px}
@media (max-height:520px) and (min-width:600px){
  html[data-skin="bnbg"] .card.result .res-head{margin:2px 0 4px}
  html[data-skin="bnbg"] .card.result .res-head .lnk{position:static;margin-left:2px}
  html[data-skin="bnbg"] .card.result .big-ribbon{top:auto;bottom:6px;right:10px}
}
html[data-skin="bnbg"] #app.en .big-ribbon{bottom:9px}

/* English on leather: Latin text does not take the CJK letter-spacing */
html[data-skin="bnbg"] #app.en .advisory b{letter-spacing:.14em;text-transform:uppercase;font-size:12px}
html[data-skin="bnbg"] #app.en .info b{letter-spacing:.02em}

/* icon buttons: full 44px targets */
html[data-skin="bnbg"] .ibtn{width:44px;height:44px}

/* ting pop-up: the candidates are centred over the note instead of hugging the left edge */
html[data-skin="bnbg"] .ting-pop{justify-content:center;column-gap:16px}

/* floating +/- coin deltas pass UNDER the HUD plates (above the table), so they never sit on the info box, a seat plate
   or the spectate plate */
html[data-skin="bnbg"] .float{z-index:1}

/* =====================================================================================================================
   BLACK + GOLD PASS (owner decision 2026-10-22 "black leather cool vibe", kit v1.2.1; art review of 04ee587)
   ===================================================================================================================== */
/* the ground: the kit's 10% gold glow (and its #app:before glow) read olive-brown over the near-black twill on the lobby header
   and the whole area above the table (the 3D canvas is transparent there). A neutral light lift keeps the same depth. */
html[data-skin="bnbg"] #app{background:
    radial-gradient(ellipse 120% 70% at 50% 18%,rgba(236,232,224,.05) 0,rgba(236,232,224,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,.02),transparent 60%)!important}
html[data-skin="bnbg"] .bnbg-ground{background:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(236,232,224,.05) 0,transparent 55%),url(assets/background.webp) center/540px repeat,var(--bnbg-bg)}

/* the top seat's dealer badge: the taller opaque leather info box (#g-top sits above the seats) half-covered it, so in this skin
   it moves to the avatar's free bottom-left corner (the 缺 badge keeps bottom-right, the 托管 badge top-right) */
html[data-skin="bnbg"] #seat2 .b-zhuang{top:auto;bottom:-4px;left:-8px}

/* settings toggle, off state: a neutral steel knob instead of the kit's warm greige (>= 3:1 on the #0B0B0B track) */
html[data-skin="bnbg"] .tog i,html[data-skin="bnbg"] .tog:not(:has(i)):after{background:linear-gradient(180deg,#8C8B88,#5A5957)}

/* long modals (rules, settings, result details): scrolled content no longer meets the stitch with a hard cut. Two sticky
   pseudo-elements (the classic corner frets, already retired in this skin; sticky offsets = -padding, since sticky
   positions inside the padding) lay a soft rim shadow over the top / bottom edge of
   the scroll area. They take no layout space, span the whole scrollport, and a scroll-driven animation shows each one only
   while content is actually scrolled under it (a card that does not scroll never shows them; browsers without scroll
   timelines keep the plain clip 2px inside the stitch). */
html[data-skin="bnbg"] .card:before,html[data-skin="bnbg"] .card:after{display:none}
@supports (animation-timeline:scroll()){
  html[data-skin="bnbg"] .card:before,html[data-skin="bnbg"] .card:after{display:block;content:'';position:sticky;z-index:4;left:auto;right:auto;
    flex:none;width:auto;height:12px;opacity:0;filter:none;transform:none;pointer-events:none;
    animation:mj-rimfade linear both;animation-timeline:scroll(nearest block)}
  html[data-skin="bnbg"] .card:before{top:-12px;margin:-12px -12px 0;background:linear-gradient(rgba(11,10,9,.92),rgba(11,10,9,0));animation-range:0px 28px}
  html[data-skin="bnbg"] .card:after{bottom:-12px;margin:0 -12px -12px;background:linear-gradient(rgba(11,10,9,0),rgba(11,10,9,.92));animation-direction:reverse;animation-range:calc(100% - 28px) 100%}
  html[data-skin="bnbg"] .card.result:before{top:-11px;height:11px;margin:-11px -8px 0}
  html[data-skin="bnbg"] .card.result:after{bottom:-10px;height:10px;margin:0 -8px -10px}
  @media (max-height:520px) and (min-width:600px){
    html[data-skin="bnbg"] .card.result:before{top:-6px;height:6px;margin:-6px -10px 0}
    html[data-skin="bnbg"] .card.result:after{bottom:-6px;height:6px;margin:0 -10px -6px}
  }
}
@keyframes mj-rimfade{from{opacity:0}to{opacity:1}}

/* =====================================================================================================================
   ROOM PICKER (场次) + LOBBY TIER STRIP + TODAY STRIP  — added with the tier screen.
   Same leather pass as the room cards: the tier artwork is a dark gold-washed watermark here, never the cream classic art.
   ===================================================================================================================== */
html[data-skin="bnbg"] :is(.rmode,.daily){--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"] .tchip{--bnbg-l-rim:3px;--bnbg-l-rimc:var(--bnbg-leather-rim-sm);--bnbg-l-inset:5px;--bnbg-l-stitch:var(--bnbg-stitch-c-sm);--bnbg-l-drop:0 10px 24px rgba(0,0,0,.55)}
html[data-skin="bnbg"] :is(.rmode,.daily,.tchip){--bnbg-eyebrow:#DDC07A;--bnbg-label:#DCCDA4;--bnbg-muted:#DCD4C2;--bnbg-muted-2:#D8D0BD}
html[data-skin="bnbg"] :is(.rmode,.daily,.tchip){
  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);border-radius:var(--bnbg-r)}
html[data-skin="bnbg"] .tchip:hover{border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi)}
html[data-skin="bnbg"] :is(.tchip,.room):focus-visible{outline:1.5px solid var(--bnbg-gold-bright);outline-offset:2px}
html[data-skin="bnbg"] .tchip:active{translate:none;transform:translateY(1px)}
/* the picker's top row and section label */
html[data-skin="bnbg"] .rtop h2{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.06em}
html[data-skin="bnbg"] #app.en .rtop h2{font-family:var(--bnbg-serif);letter-spacing:0}
html[data-skin="bnbg"] .seclabel{color:var(--bnbg-text);font-weight:500;letter-spacing:.14em}
html[data-skin="bnbg"] .seclabel small{color:var(--bnbg-muted);font-weight:400;letter-spacing:.02em}
html[data-skin="bnbg"] .seclabel i{color:var(--bnbg-gold)}
html[data-skin="bnbg"] #app.en .seclabel{letter-spacing:.02em}
/* mode + today strips */
html[data-skin="bnbg"] .rmode{padding:11px 13px}
html[data-skin="bnbg"] .rmode .rm b{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);letter-spacing:.06em}
html[data-skin="bnbg"] .rmode .rm small,html[data-skin="bnbg"] .daily .dl small{color:var(--bnbg-muted);opacity:1;font-weight:400}
html[data-skin="bnbg"] .rmode canvas{border-color:var(--bnbg-gold);background:#17150F}
html[data-skin="bnbg"] .daily{padding:11px 13px}
html[data-skin="bnbg"] .daily .dl b{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);letter-spacing:.14em}
html[data-skin="bnbg"] #app.en .daily .dl b{letter-spacing:.02em}
html[data-skin="bnbg"] .daily .dots i{background:#1A1916;border:1px solid var(--bnbg-leather-edge);border-radius:2px}
html[data-skin="bnbg"] .daily .dots i.on{background:var(--bnbg-fill);border-color:#B8913A}
html[data-skin="bnbg"] .daily .dcheck{color:var(--bnbg-muted);font-weight:500;font-family:var(--bnbg-font)}
html[data-skin="bnbg"] .daily .dcheck i{background:#14130F;border:1px solid #B8913A;color:var(--bnbg-gold-hi)}
/* tier cards: artwork becomes a gold-washed watermark, the scrim a leather-dark veil */
html[data-skin="bnbg"] .rart{filter:grayscale(1) sepia(1) saturate(1.35) hue-rotate(-10deg) brightness(.58) contrast(1.04);opacity:.42}
html[data-skin="bnbg"] :is(.rscrim,.room.t0 .rscrim,.room.t1 .rscrim,.room.t2 .rscrim,.room.t3 .rscrim){
  background:linear-gradient(100deg,rgba(12,12,11,.93) 0,rgba(12,12,11,.80) 42%,rgba(12,12,11,.40) 72%,rgba(12,12,11,.14) 100%)}
html[data-skin="bnbg"] .rbase b{color:var(--bnbg-text);font-family:var(--bnbg-num-light);font-weight:400}
html[data-skin="bnbg"] .rbase u{color:var(--bnbg-muted);font-weight:400}
html[data-skin="bnbg"] .rfoot{color:var(--bnbg-muted);font-weight:400;background:linear-gradient(rgba(12,12,11,0),rgba(12,12,11,.82) 45%,rgba(12,12,11,.93))}
html[data-skin="bnbg"] .rfoot b{color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] .rribs span{background:rgba(12,12,11,.88);border:1px solid rgba(201,169,95,.55);border-right:0;color:var(--bnbg-label);font-weight:400;letter-spacing:.14em;text-shadow:none}
html[data-skin="bnbg"] #scr-rooms .room.sel{box-shadow:inset 0 0 0 var(--bnbg-l-rim) var(--bnbg-l-rimc),var(--bnbg-leather-hi),var(--bnbg-l-drop),0 0 0 1.5px var(--bnbg-gold-bright)}
html[data-skin="bnbg"] #scr-rooms .room .lv{right:auto;top:auto}
/* lobby tier chips: the same watermark treatment at chip scale */
html[data-skin="bnbg"] .tchip img{filter:grayscale(1) sepia(1) saturate(1.35) hue-rotate(-10deg) brightness(.58) contrast(1.04);opacity:.40}
html[data-skin="bnbg"] .tchip:before{background:linear-gradient(rgba(12,12,11,0) 0,rgba(12,12,11,.80) 38%,rgba(12,12,11,.93) 56%)}
html[data-skin="bnbg"] .tchip b{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);letter-spacing:.06em}
html[data-skin="bnbg"] #app.en .tchip b{font-family:var(--bnbg-serif);letter-spacing:0}
html[data-skin="bnbg"] .tchip small{color:var(--bnbg-muted);font-weight:400}
html[data-skin="bnbg"] .tchip em{color:var(--bnbg-text);font-family:var(--bnbg-num-light);font-weight:400}
html[data-skin="bnbg"] .tchip.locked{filter:none;opacity:.7}
/* the win multiplier plate over the 胡 disc */
html[data-skin="bnbg"] .hmult{background:rgba(7,7,7,.88);border:1px solid var(--bnbg-gold);color:var(--bnbg-gold-bright);font-family:var(--bnbg-num-light);font-weight:400;text-shadow:none;letter-spacing:.04em}

/* =====================================================================================================================
   COMMERCIAL PASS: the new classic pieces (bevelled display type, medallion buttons, countdown rings, 缺一门 hint, seat
   labels, swap arrows, painted mascot) re-dressed for black + gold. Classic's painted enamel discs never show here.
   ===================================================================================================================== */
html[data-skin="bnbg"] .dsp{-webkit-text-fill-color:currentColor;color:var(--bnbg-gold-hi);font-family:var(--bnbg-serif);font-weight:400;letter-spacing:.06em}
html[data-skin="bnbg"] .dsp:before,html[data-skin="bnbg"] .dsp:after{display:none}
html[data-skin="bnbg"] .hero h1 .dsp{color:var(--bnbg-text)}
html[data-skin="bnbg"] .hero h1 .dsp+.dsp{color:var(--bnbg-gold-italic);font-style:italic}
html[data-skin="bnbg"] .hero .hmascot{filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
html[data-skin="bnbg"] .rtop h2 .dsp,html[data-skin="bnbg"] .seclabel .dsp,html[data-skin="bnbg"] .room h3 .dsp{color:var(--bnbg-text)}
html[data-skin="bnbg"] .mbtn{border:1.5px solid transparent;background:var(--bnbg-fill) padding-box,linear-gradient(158deg,#FFF3C8,#B8913A 50%,#F1D27A) border-box;color:var(--bnbg-ink);font-family:var(--bnbg-serif);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .mbtn[disabled]{filter:grayscale(.7) brightness(.7)}
html[data-skin="bnbg"] .mbtn:active{transform:translateY(1px)}
html[data-skin="bnbg"] .flow .phase-banner .ftitle{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.06em}
html[data-skin="bnbg"] .cdring .bg{stroke:rgba(212,175,55,.18);fill:rgba(7,7,7,.6)}
html[data-skin="bnbg"] .cdring .fg{stroke:var(--bnbg-gold-bright)}
html[data-skin="bnbg"] .cdring.hot .fg{stroke:var(--bnbg-red)}
html[data-skin="bnbg"] .cdring b{font-family:var(--bnbg-num-light);font-weight:400;color:var(--bnbg-gold-hi);text-shadow:none}
html[data-skin="bnbg"] .qhint{font-family:var(--bnbg-serif);font-weight:400;color:var(--bnbg-text);background:rgba(7,7,7,.82);border:1px solid rgba(212,175,55,.55);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.2em}
html[data-skin="bnbg"] .qhint i{background:var(--bnbg-gold);border:0}
html[data-skin="bnbg"] .sstat .dsp{color:var(--bnbg-gold-hi);text-shadow:0 2px 8px rgba(0,0,0,.9)}
html[data-skin="bnbg"] .sstat .dots i{background:var(--bnbg-gold-bright);box-shadow:none}
html[data-skin="bnbg"] .swapfx path.ab{stroke:var(--bnbg-gold-bright);filter:drop-shadow(0 4px 10px rgba(0,0,0,.8))}
html[data-skin="bnbg"] .swapfx path.fl{stroke:#FFF0B7;opacity:.8}
html[data-skin="bnbg"] .swapfx path.hd{fill:var(--bnbg-gold-bright);stroke:none}
html[data-skin="bnbg"] .swapfx .sft{background:var(--bnbg-leather-sm);border:1px solid var(--bnbg-leather-edge);box-shadow:0 10px 24px rgba(0,0,0,.6);border-radius:var(--bnbg-r)}
html[data-skin="bnbg"] .swapfx .sft .dsp{color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .swapfx .sft small{color:var(--bnbg-muted);font-family:var(--bnbg-font)}
html[data-skin="bnbg"] .rmtag{background:transparent;border:1px solid rgba(212,175,55,.6);color:var(--bnbg-label);box-shadow:none;font-weight:500;letter-spacing:.08em}
html[data-skin="bnbg"] .room.tier .rfoot{margin:0;padding:7px 12px}
html[data-skin="bnbg"] .room.tier .rpic{height:58%}
html[data-skin="bnbg"] .tchip img{opacity:.62;filter:grayscale(1) sepia(1) saturate(1.35) hue-rotate(-10deg) brightness(.74) contrast(1.06)}
html[data-skin="bnbg"] .room.tier .rart{opacity:.6;filter:grayscale(1) sepia(1) saturate(1.35) hue-rotate(-10deg) brightness(.72) contrast(1.06)}

/* ---------- 胡 moment (2026-11 review): the same three beats as classic, in black and gold ----------
   a pale-gold column of light on the winning tile (no screen blend: on the black table it reads as metal light), the
   leather 胡 plate above it, then the banner / fan plate, then the coins */
html[data-skin="bnbg"] .hupillar{mix-blend-mode:screen;background:linear-gradient(to top,rgba(255,246,220,.98),rgba(241,210,122,.78) 18%,rgba(212,175,55,.34) 58%,rgba(212,175,55,0));box-shadow:0 0 34px 6px rgba(212,175,55,.34);border-radius:3px 3px 6px 6px}
html[data-skin="bnbg"] .hupillar i{background:radial-gradient(closest-side,rgba(255,240,200,.9),rgba(212,175,55,.45) 55%,rgba(212,175,55,0))}
html[data-skin="bnbg"] .fanplate{background:var(--bnbg-leather-sm,#141311);border:1px solid var(--bnbg-leather-edge,#3a3224);box-shadow:0 10px 24px rgba(0,0,0,.6);border-radius:var(--bnbg-r);color:var(--bnbg-text,#EDE3CC);font-family:var(--bnbg-font);font-weight:500}
html[data-skin="bnbg"] .fanplate b{font-family:var(--bnbg-serif);font-weight:500;color:var(--bnbg-gold-hi);letter-spacing:.12em}
html[data-skin="bnbg"] .fanplate span{color:var(--bnbg-muted);font-weight:400}

/* ---------- tier art (2026-11 review): the painted scenes read at roughly half brightness under the gold, not as empty boxes.
   Sepia-toned and lifted; the veil only darkens where the text sits (titles at the top, numbers at the foot) ---------- */
html[data-skin="bnbg"] .tchip img,html[data-skin="bnbg"] .room.tier .rart{opacity:.92;filter:grayscale(1) sepia(.85) saturate(1.2) hue-rotate(-8deg) brightness(.98) contrast(1.05)}
html[data-skin="bnbg"] .tchip:before{background:linear-gradient(rgba(12,12,11,.12) 0,rgba(12,12,11,0) 20%,rgba(12,12,11,.5) 48%,rgba(12,12,11,.9) 64%)}
html[data-skin="bnbg"] .room.tier .rscrim{background:linear-gradient(180deg,rgba(12,12,11,.6) 0,rgba(12,12,11,.18) 30%,rgba(12,12,11,.06) 62%,rgba(12,12,11,.82) 100%)}

/* ---------- landscape phones: the BNBG hero keeps its eyebrow and button inside the stitched rim ---------- */
@media (orientation:landscape) and (max-height:520px) and (min-width:600px){
  html[data-skin="bnbg"] #lob>.hero{padding:14px 16px 12px}
  html[data-skin="bnbg"] #lob .hero h1{font-size:clamp(20px,6.2vh,25px);line-height:1.12}
  html[data-skin="bnbg"] #lob .hero p{margin:2px 0 6px}
  html[data-skin="bnbg"] #lob .hero .btn{padding:5px 16px;min-height:38px}
}