/* BNBG Black Gold: Guandan specifics the shared kit cannot know (seats, score halves, table chips, hand, counter, result cards).
   Linked after skin-bnbg.css; every rule is scoped to html[data-skin="bnbg"], so classic is untouched. Visual only: coins stay play coins. */
html[data-skin="bnbg"]{--us:#D4AF37;--them:#A9B6C2;--obs:linear-gradient(162deg,#22231F 0%,#0B0C0B 58%,#080909 100%)}
html[data-skin="bnbg"] body{background:#0A0A0A}
/* ---------- screens ---------- */
html[data-skin="bnbg"] #scr-splash{background:linear-gradient(rgba(10,10,10,.82) 0,rgba(10,10,10,.35) 24%,rgba(10,10,10,0) 40%,rgba(10,10,10,0) 55%,rgba(10,10,10,.8) 74%,#0A0A0A 100%)}
html[data-skin="bnbg"] #scr-lobby{background:linear-gradient(rgba(10,10,10,0) 0,rgba(10,10,10,0) 30%,rgba(10,10,10,.72) 58%,rgba(10,10,10,.94) 100%)}
html[data-skin="bnbg"] #hud{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s}
html[data-skin="bnbg"] .logo{font-weight:700;letter-spacing:.06em;font-size:clamp(46px,13.5vw,86px)}
html[data-skin="bnbg"] .logo span{font-size:.24em;margin-top:14px;letter-spacing:.42em}
/* the second half of the name (掼蛋) keeps the metal fill and the logo's own tracking */
html[data-skin="bnbg"] .logo em{-webkit-text-fill-color:transparent;letter-spacing:inherit;text-transform:none}
html[data-skin="bnbg"] .lob-title .logo{font-size:clamp(36px,10.5vw,58px)}
html[data-skin="bnbg"] .tagl{font-size:clamp(13px,3.6vw,16px);margin-top:14px}
html[data-skin="bnbg"] .bnbg-mark.lg{margin:0 auto 18px;gap:14px}
html[data-skin="bnbg"] .bnbg-mark.lg:before,html[data-skin="bnbg"] .bnbg-mark.lg:after{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,#B79D62)}
html[data-skin="bnbg"] .bnbg-mark.lg:after{background:linear-gradient(270deg,transparent,#B79D62)}
html[data-skin="bnbg"] .bnbg-mark.lg span{font-size:11.5px;letter-spacing:.42em;padding-left:.42em}
html[data-skin="bnbg"] #sp-mascot{filter:drop-shadow(0 10px 24px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(212,175,55,.22))}
html[data-skin="bnbg"] .ver{opacity:.8}
html[data-skin="bnbg"] .agebox{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .advis p{color:var(--bnbg-text-2)}
html[data-skin="bnbg"] #nogl{background:#1A0E10;border:1px solid rgba(255,107,128,.55);color:#FFC7CF}
/* ---------- BG crest switch ---------- */
html[data-skin="bnbg"] .crest{border-radius:50%;border:1px solid var(--bnbg-gold);background:radial-gradient(circle at 50% 30%,#262421 0,#0C0C0C 72%);box-shadow:0 0 0 1px rgba(212,175,55,.2),inset 0 1px 0 rgba(255,240,183,.14),0 6px 16px rgba(0,0,0,.55),0 0 18px rgba(212,175,55,.22)}
html[data-skin="bnbg"] .crest img{width:25px;height:25px;filter:drop-shadow(0 0 6px rgba(212,175,55,.35))}
html[data-skin="bnbg"] .crest:active{transform:translateY(1px)}
html[data-skin="bnbg"] #hud .bnbg-mark.lob span{font-size:10px}
/* ---------- HUD: level plate + score halves (us = gold, them = platinum: the two teams stay as distinct as red / teal) ---------- */
html[data-skin="bnbg"] .lvl b{color:var(--bnbg-gold-hi);font-weight:600;font-size:16px}
html[data-skin="bnbg"] .score{padding:0}
html[data-skin="bnbg"] .score span{font-weight:500;letter-spacing:.02em}
html[data-skin="bnbg"] .score .us{background:linear-gradient(180deg,rgba(212,175,55,.26),rgba(212,175,55,.08));color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .score .them{background:linear-gradient(180deg,rgba(169,182,194,.2),rgba(169,182,194,.05));color:#D7DEE5;border-left:1px solid var(--bnbg-line-soft)}
html[data-skin="bnbg"] .score .us b{color:#F6E08A}html[data-skin="bnbg"] .score .them b{color:#EEF2F5}
html[data-skin="bnbg"] .score span.bk:before{background:var(--bnbg-fill);color:#1C1406;border-radius:4px;font-weight:700}
/* ---------- lobby ---------- */
html[data-skin="bnbg"] .prof .pav{border:1px solid var(--bnbg-champagne);border-radius:50%;background:radial-gradient(circle at 50% 35%,#2E2C29,#121110 70%);box-shadow:0 0 0 3px rgba(10,10,10,.9),0 0 0 4px rgba(183,157,98,.45)}
html[data-skin="bnbg"] .prof .pn{font-weight:500;letter-spacing:.02em}
html[data-skin="bnbg"] .prof .pt{color:var(--bnbg-label);font-weight:400}
html[data-skin="bnbg"] .prof .pc{color:var(--bnbg-gold-hi);font-weight:500;text-shadow:none;font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .tierbar{background:#070707;border:1px solid #76623B}html[data-skin="bnbg"] .tierbar i{background:linear-gradient(90deg,#A67C2D,#E8C771 70%,#FFF0B2)}
html[data-skin="bnbg"] .qs{font-size:24px;min-height:62px;letter-spacing:.24em}
html[data-skin="bnbg"] .tile b{font-weight:500;letter-spacing:.04em}html[data-skin="bnbg"] .tile small{color:var(--bnbg-muted);opacity:1;font-weight:400}
html[data-skin="bnbg"] .diffbox .dl{font-weight:500;color:var(--bnbg-label);letter-spacing:.08em}html[data-skin="bnbg"] .diffbox .dl small{color:var(--bnbg-muted);opacity:1;letter-spacing:0}
html[data-skin="bnbg"] .seg.wide{display:grid;border-radius:999px;padding:3px;gap:2px}
html[data-skin="bnbg"] .seg.wide button{border-radius:999px;font-size:15px}
html[data-skin="bnbg"] .seg.wide button.on{background:linear-gradient(180deg,#2B2925,#121110);border:0;box-shadow:inset 0 0 0 1px rgba(232,199,106,.55),0 0 16px rgba(212,175,55,.18)}
html[data-skin="bnbg"] .sib{color:var(--bnbg-text-2);font-weight:500;text-shadow:0 1px 6px #000;letter-spacing:.06em}
html[data-skin="bnbg"] .sib i{border-radius:50%;border:1px solid var(--bnbg-line);background:radial-gradient(circle at 50% 30%,#232220 0,#0C0C0C 72%);box-shadow:inset 0 1px 0 rgba(255,240,183,.12),0 8px 20px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .sib i svg{width:26px;height:26px}html[data-skin="bnbg"] .sib i img{width:30px;height:30px}
html[data-skin="bnbg"] .lob-foot{color:var(--bnbg-muted);opacity:1;letter-spacing:.04em}
/* ---------- table: seats, chips, status ---------- */
html[data-skin="bnbg"] .seat .av{--team:var(--us);border:1px solid #0A0A0A;background:radial-gradient(circle at 50% 35%,#2E2C29,#121110 70%);box-shadow:0 0 0 2px var(--team),0 0 0 3px rgba(10,10,10,.8),0 10px 24px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .seat.t1 .av{--team:var(--them)}
html[data-skin="bnbg"] .seat.turn .av{box-shadow:0 0 0 2px #F6E08A,0 0 0 4px rgba(10,10,10,.8),0 0 22px rgba(241,210,122,.6)}
html[data-skin="bnbg"] .seat .ring .bg{stroke:rgba(255,255,255,.08)}html[data-skin="bnbg"] .seat .ring .fg{stroke:#F1D27A;filter:drop-shadow(0 0 4px rgba(241,210,122,.7))}
html[data-skin="bnbg"] .seat .ring circle{stroke-width:4}
html[data-skin="bnbg"] :is(.seat .cnt,.seat .tm){background:#0E0D0C;color:var(--bnbg-gold-hi);border:1px solid var(--bnbg-champagne);box-shadow:0 4px 12px rgba(0,0,0,.6);font-weight:600;font-family:var(--bnbg-num)}
html[data-skin="bnbg"] :is(.seat .cnt.warn,.seat .tm.low){background:#1E0F12;color:#FF8FA0;border-color:rgba(255,107,128,.7)}
html[data-skin="bnbg"] .seat .medal{background:var(--bnbg-fill);color:#1C1406;border:1px solid rgba(0,0,0,.6);box-shadow:0 0 0 1px rgba(212,175,55,.5),0 4px 10px rgba(0,0,0,.5)}
html[data-skin="bnbg"] :is(.seat .medal.p3,.seat .medal.p4){background:linear-gradient(180deg,#C9CED3,#8C939A);color:#111}
html[data-skin="bnbg"] #seat-0 .eggs{color:var(--bnbg-gold-hi);font-weight:500;text-shadow:0 1px 6px #000}
html[data-skin="bnbg"] .clabel.bomb{background:var(--bnbg-fill);color:#1C1406;text-shadow:none;border-color:#FFF0B7;box-shadow:0 0 18px rgba(212,175,55,.45)}
html[data-skin="bnbg"] #g-status.trib{background:var(--bnbg-fill);color:#1C1406;border-color:#FFF0B7}
/* action row: the kit button, sized for the table (the ID rules above out-rank the kit's .btn shadow) */
html[data-skin="bnbg"] #g-act .btn{border-radius:999px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,240,183,.16),inset 0 -6px 12px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.55)}
html[data-skin="bnbg"] #g-act .btn.gold,html[data-skin="bnbg"] #g-act .btn.big:not(.grey){box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px rgba(0,0,0,.55),0 0 22px rgba(212,175,55,.25)}
html[data-skin="bnbg"] #g-act .btn.big:not(.grey):not([disabled]){background:var(--bnbg-fill) padding-box,linear-gradient(158deg,#FFF3C8,#B8913A 50%,#F1D27A) border-box;color:#1C1406;font-weight:600}
html[data-skin="bnbg"] #g-act .btn.grey,html[data-skin="bnbg"] #g-act .btn[disabled]{box-shadow:none}
/* your hand */
html[data-skin="bnbg"] .hc img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
html[data-skin="bnbg"] .hc.sel img{filter:drop-shadow(0 0 1px #F6E08A) drop-shadow(0 0 8px rgba(241,210,122,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.55))}
html[data-skin="bnbg"] .hc.sel:before{background:var(--bnbg-metal);border:0;height:4px;top:-7px;box-shadow:0 0 8px rgba(241,210,122,.8)}
html[data-skin="bnbg"] .hc.wild:after{box-shadow:inset 0 0 8px 3px rgba(212,175,55,.75);animation-name:bnbg-wglow}
@keyframes bnbg-wglow{50%{box-shadow:inset 0 0 12px 5px rgba(246,224,138,.95)}}
html[data-skin="bnbg"] .hc.trib img{filter:drop-shadow(0 0 7px #F1D27A) drop-shadow(0 3px 6px rgba(0,0,0,.55))}
/* card counter + wide side panel */
html[data-skin="bnbg"] .cc small{color:var(--bnbg-muted);font-weight:500;opacity:1}html[data-skin="bnbg"] .cc b{color:var(--bnbg-gold-hi);font-weight:600;font-family:var(--bnbg-num)}
html[data-skin="bnbg"] .cc.zero b{color:#FF8FA0}html[data-skin="bnbg"] .cc.zero small{opacity:.6}html[data-skin="bnbg"] .cc.lv small{color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] #sp-score .tm.us{background:linear-gradient(180deg,rgba(212,175,55,.26),rgba(212,175,55,.06));color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] #sp-score .tm.them{background:linear-gradient(180deg,rgba(169,182,194,.2),rgba(169,182,194,.04));color:#D7DEE5}
html[data-skin="bnbg"] #sp-score .tm b{font-weight:500}html[data-skin="bnbg"] #sp-score .tm small{font-weight:500;letter-spacing:.08em}
html[data-skin="bnbg"] #sp-score .lv{color:var(--bnbg-gold-hi);font-weight:500;letter-spacing:.06em}
html[data-skin="bnbg"] #sp-log .lg{font-weight:400;border-bottom-color:rgba(183,157,98,.12)}html[data-skin="bnbg"] #sp-log .lg b{color:var(--bnbg-label);font-weight:500;opacity:1}
html[data-skin="bnbg"] #sp-log .lg.bomb{color:var(--bnbg-gold-hi)}html[data-skin="bnbg"] #sp-log .lg.pass{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] :is(#sp-chat button,.chatgrid button){background:rgba(250,248,244,.03);border:1px solid var(--bnbg-line-soft);color:var(--bnbg-text);font-weight:400}
html[data-skin="bnbg"] #app.nogl #g-stage:before{background:radial-gradient(#1C1B1A,#0A0A0A);border:6px solid #121110;box-shadow:0 0 0 1px #B79D62,inset 0 0 0 2px rgba(212,175,55,.45),0 20px 50px rgba(0,0,0,.7)}
/* ---------- stamp / banner ---------- */
/* stamp: metal text on a dark plate inside the kit's hairline double frame (two background layers: metal clipped to the text, plate to the box) */
html[data-skin="bnbg"] #stamp{-webkit-text-fill-color:transparent;font-weight:600;font-size:clamp(48px,15vw,104px);line-height:1.15;background-image:var(--bnbg-metal),linear-gradient(rgba(10,10,10,.86),rgba(10,10,10,.86));-webkit-background-clip:text,padding-box;background-clip:text,padding-box}
html[data-skin="bnbg"] #stamp[data-tone="cool"]{background-image:linear-gradient(180deg,#FFFFFF 0%,#D7DEE5 40%,#8C939A 75%,#C9CED3 100%),linear-gradient(rgba(10,10,10,.86),rgba(10,10,10,.86));border-color:rgba(201,206,211,.6)}
html[data-skin="bnbg"] #banner{font-weight:600;padding:16px 0 18px;font-size:clamp(34px,10vw,64px)}
html[data-skin="bnbg"] #banner small{color:var(--bnbg-label);font-weight:500;letter-spacing:.22em;text-shadow:none;margin-top:12px}
/* ---------- cards (modals) ---------- */
html[data-skin="bnbg"] .card{padding:20px 18px}
html[data-skin="bnbg"] .ribbon.grey{background:transparent;color:var(--bnbg-muted)}
html[data-skin="bnbg"] .mdl canvas{border:1px solid var(--bnbg-champagne);background:radial-gradient(circle at 50% 35%,#2E2C29,#121110 70%)}
html[data-skin="bnbg"] .mdl.t1 canvas{border-color:#A9B6C2;background:radial-gradient(circle at 50% 35%,#2C3238,#101214 70%)}
html[data-skin="bnbg"] .mdl b,html[data-skin="bnbg"] .stats b,html[data-skin="bnbg"] .dy b,html[data-skin="bnbg"] .rules-list b{color:var(--bnbg-gold-hi);font-weight:500}
html[data-skin="bnbg"] .mdl.p3 b,html[data-skin="bnbg"] .mdl.p4 b{color:#C9CED3}
html[data-skin="bnbg"] .lvchg{font-weight:500;letter-spacing:.04em}html[data-skin="bnbg"] .lvchg.up{color:var(--bnbg-gold-hi)}html[data-skin="bnbg"] .lvchg.down{color:#C9CED3}
html[data-skin="bnbg"] .coinrow{color:var(--bnbg-gold-hi);font-weight:500;font-variant-numeric:tabular-nums}
html[data-skin="bnbg"] .dy.done{opacity:.55}
html[data-skin="bnbg"] .task small{color:var(--bnbg-muted);opacity:1}
html[data-skin="bnbg"] .lesson{color:var(--bnbg-text-2);font-weight:400;line-height:1.7}
html[data-skin="bnbg"] .lesson-cards img{filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
html[data-skin="bnbg"] .dots i{background:rgba(183,157,98,.3)}html[data-skin="bnbg"] .dots i.on{background:var(--bnbg-gold-hi);box-shadow:0 0 8px rgba(241,210,122,.6)}
html[data-skin="bnbg"] .props button{border-radius:50%;border:1px solid var(--bnbg-line);background:radial-gradient(circle at 50% 30%,#232220 0,#0C0C0C 72%);box-shadow:0 8px 20px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .set.tap span,html[data-skin="bnbg"] .set>span{letter-spacing:.02em}
/* the HUD and the action row must still fit a 360px phone with Plex's wider latin: tighter tracking there */
html[data-skin="bnbg"] .lvl small{letter-spacing:.02em}html[data-skin="bnbg"] .score span{letter-spacing:0}
@media (max-width:379px){html[data-skin="bnbg"] .lvl{padding:0 6px}html[data-skin="bnbg"] .lvl small{letter-spacing:0;font-size:9.5px}}
html[data-skin="bnbg"] #g-act .btn{letter-spacing:.02em;padding:6px 14px}html[data-skin="bnbg"] #g-act .btn.big{padding:6px 20px}html[data-skin="bnbg"] #g-act .chip{padding:4px 11px}
/* five English buttons (with 同花顺) must clear both screen edges on a 390px phone */
@media (max-width:419px){html[data-skin="bnbg"] #g-act{gap:6px}html[data-skin="bnbg"] #g-act .btn{padding:6px 12px}html[data-skin="bnbg"] #g-act .btn.big{padding:6px 17px}html[data-skin="bnbg"] #g-act .chip{padding:4px 9px}}
/* settings rows wrap instead of squeezing (long EN labels, Plex latin); segmented controls then sit right-aligned on their own line */
html[data-skin="bnbg"] .set{flex-wrap:wrap;row-gap:6px}html[data-skin="bnbg"] .set>.seg{margin-left:auto}
html[data-skin="bnbg"] .seg button{letter-spacing:.02em;padding:0 12px}
html[data-skin="bnbg"] #app.land #g-act .btn{border-radius:999px}
/* the in-game 减弱动效 / Reduced motion setting (html.reduce-motion) also stops the kit's breathing glow and sheen */
html[data-skin="bnbg"].reduce-motion .btn.pulse{animation:none}html[data-skin="bnbg"].reduce-motion .btn:after{transition:none}html[data-skin="bnbg"].reduce-motion .hc.wild:after{animation:none}
/* ================= v1.0.1 review fixes ================= */
/* action row: 出牌 / Play stays the only gold fill; the combo chip (同花顺 / Str. Flush) is secondary lacquer with gold type */
html[data-skin="bnbg"] #g-act .btn.gold.chip{background:var(--bnbg-lacquer) padding-box,linear-gradient(158deg,#FFF0B7,#A37B35 50%,#E5C576) border-box;border:1px solid transparent;color:#F5DF9D;font-weight:500;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,240,183,.14),0 6px 16px rgba(0,0,0,.5)}
html[data-skin="bnbg"] #g-act .btn.gold.chip:after{background-image:linear-gradient(105deg,transparent 30%,rgba(255,240,183,.14) 48%,transparent 66%)}
html[data-skin="bnbg"] #g-act .btn.gold.chip:before{content:'';display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;transform:rotate(45deg);background:linear-gradient(135deg,#FFF3C8,#D4AF37);box-shadow:0 0 6px rgba(241,210,122,.7)}
/* one primary rule everywhere: gold fill = the single hero action of a card (继续 on the hand result = 再来一局 on the match result; 下一课) */
html[data-skin="bnbg"] .card .btn.pulse:not(.grey):not(.gold){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"] .card .btn.pulse:not(.grey):not(.gold):after{background-image:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%)}
/* arranged-hand group underlines: a hairline with a soft glow (colours come from the BNBG ramp in ui.js) */
html[data-skin="bnbg"] .gline{height:3px;box-shadow:0 0 6px currentColor}
/* EN: mixed-case Latin is set tight; only the uppercase eyebrows and the uppercase Quick Start keep the tracking */
html[data-skin="bnbg"][lang=en] .qs{text-transform:uppercase;letter-spacing:.14em;font-size:20px}
html[data-skin="bnbg"][lang=en] .card h2{letter-spacing:.02em}
html[data-skin="bnbg"][lang=en] .tagl{letter-spacing:.01em;max-width:30ch;margin-inline:auto;text-wrap:balance}
/* brand mark collisions: landscape lobby drops the wordmark (the lantern string crossed it); the splash title gets a soft scrim off the table rim */
html[data-skin="bnbg"] #app.land .bnbg-mark.lob span{display:none}
html[data-skin="bnbg"] #scr-splash .sp-title{position:relative;isolation:isolate}
html[data-skin="bnbg"] #scr-splash .sp-title:before{content:'';position:absolute;inset:-26% -20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 52%,rgba(10,10,10,.9) 0,rgba(10,10,10,.8) 68%,rgba(10,10,10,0) 100%)}
html[data-skin="bnbg"] #scr-splash .tagl{text-shadow:0 1px 10px #000,0 0 2px #000}
html[data-skin="bnbg"] #app.cnt-on:not(.wide) #seat-2 .nm{visibility:hidden}
/* crest: a 48px hit target (38px visible) */
html[data-skin="bnbg"] .crest:after{content:'';position:absolute;inset:-5px;border-radius:50%}
/* 签到 / new-item dot: a small gold jewel, not a flat disc */
html[data-skin="bnbg"] .sib .dot{width:10px;height:10px;right:0;top:0;background:#F1D27A;border:1.5px solid #0A0A0A;box-shadow:0 0 8px rgba(241,210,122,.7)}
/* the wild card's glow tab reads as metal */
html[data-skin="bnbg"] .hc.wild:after{background:linear-gradient(180deg,rgba(246,224,138,.18),rgba(212,175,55,0) 55%)}
/* settings: card back / felt only applies to the classic table; BNBG has its own back and felt */
.set.backrow .setnote{display:none}
html[data-skin="bnbg"] .set.backrow>.seg{opacity:.45;pointer-events:none}
html[data-skin="bnbg"] .set.backrow .setnote{display:block;flex-basis:100%;text-align:right;font-size:11.5px;color:var(--bnbg-muted);letter-spacing:.02em}
/* the kit stops the breathing glow on the system reduce-motion query; this game also lets the player force full motion
   (减弱动效 = 关), which clears html.reduce-motion, so restore the kit's motion in that case */
@media (prefers-reduced-motion:reduce){
  html[data-skin="bnbg"]:not(.reduce-motion) .btn.pulse{animation:bnbg-breathe 2.6s ease-in-out infinite}
  html[data-skin="bnbg"]:not(.reduce-motion) .btn:after{transition:background-position .7s ease}
}
/* ================= v1.1 leather (BNBG world CR 126/127; kit skin-bnbg.css §19) =================
   Every panel, plate and HUD surface is grained black leather (kit v1.2): #4A3D22 edge, dark inner rim, dashed gold stitch (an inset
   outline, so padding stays larger than the inset). Kit components (.card, .pill, #toast, #banner, .advis, .seg) turn leather by
   themselves; the Guandan surfaces below reuse the kit tokens. Buttons stay gold / lacquer. */
/* sizes: md = lobby plates, mode tiles, card counter | panel = desktop side panels | sm = status, name plates, bubbles, combo labels */
html[data-skin="bnbg"] :is(.prof,.diffbox,.tile,.gp),html[data-skin="bnbg"] #counter{--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"] .gp{--bnbg-l-rim:6px;--bnbg-l-inset:9px;--bnbg-l-drop:0 22px 54px rgba(0,0,0,.66)}
html[data-skin="bnbg"] :is(.seat .nm,.bub,.clabel),html[data-skin="bnbg"] #g-status{--bnbg-l-rim:2px;--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)}
/* small text on leather: the kit's AA-lifted tokens (measured on the lightest 2% of the grain) */
html[data-skin="bnbg"] :is(.prof,.diffbox,.tile,.gp,.seat .nm,.bub,.clabel),html[data-skin="bnbg"] :is(#counter,#g-status){--bnbg-eyebrow:#D4B46A;--bnbg-label:#DCCDA4;--bnbg-muted:#D2C8B2;--bnbg-muted-2:#CFC5AE}
html[data-skin="bnbg"] :is(.prof,.diffbox,.tile,.gp,.seat .nm,.bub,.clabel),html[data-skin="bnbg"] :is(#counter,#g-status){
  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: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(.seat .nm,.bub,.clabel),html[data-skin="bnbg"] #g-status{background:var(--bnbg-leather-sm)}
/* ---------- HUD pills (kit leather): light cream numbers, eyebrow captions; the two teams keep gold vs platinum ---------- */
html[data-skin="bnbg"] .lvl{padding:0 13px}
html[data-skin="bnbg"] .lvl b{font-family:var(--bnbg-num-light);font-weight:400;color:var(--bnbg-text);font-size:17px;letter-spacing:.02em}
html[data-skin="bnbg"] .lvl small{color:var(--bnbg-eyebrow);font-weight:500}
html[data-skin="bnbg"] .score .us{background:linear-gradient(180deg,rgba(212,175,55,.2),rgba(212,175,55,.04))}
html[data-skin="bnbg"] .score .them{background:linear-gradient(180deg,rgba(169,182,194,.16),rgba(169,182,194,.03));border-left:1px solid var(--bnbg-leather-edge)}
html[data-skin="bnbg"] .score span{padding:0 10px}html[data-skin="bnbg"] .score span b{font-family:var(--bnbg-num-light);font-weight:400;font-size:19px}
/* ---------- lobby: profile plate, mode tiles (tappable leather), difficulty box ---------- */
html[data-skin="bnbg"] .prof{border-radius:18px;padding:10px 16px 10px 10px}
html[data-skin="bnbg"] .prof .pn{font-family:var(--bnbg-serif);font-weight:400;letter-spacing:.01em;color:var(--bnbg-text)}
html[data-skin="bnbg"] .prof .pc{font-family:var(--bnbg-num-light);font-weight:400;font-size:20px;color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .tile{border-radius:16px;padding:11px 12px;translate:none;color:var(--bnbg-text)}
html[data-skin="bnbg"] .tile:hover{border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi)}
html[data-skin="bnbg"] .tile:active{transform:translateY(1px);border-color:var(--bnbg-leather-edge-hi);--bnbg-l-stitch:var(--bnbg-stitch-hi)}
html[data-skin="bnbg"] .tile .ti,html[data-skin="bnbg"] .tile.jade .ti{border:1px solid rgba(161,124,52,.85);border-radius:10px;background:var(--bnbg-well);color:var(--bnbg-gold-italic);font-family:var(--bnbg-serif);font-weight:400;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,240,210,.08)}
html[data-skin="bnbg"] .tile b{font-family:var(--bnbg-serif);font-weight:400;letter-spacing:.02em}
html[data-skin="bnbg"] .diffbox{border-radius:18px;padding:12px 14px 13px}
html[data-skin="bnbg"] .diffbox .dl{color:var(--bnbg-eyebrow);letter-spacing:.16em}
html[data-skin="bnbg"] .diffbox .seg{background:var(--bnbg-well);border-color:var(--bnbg-well-line);outline:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,240,210,.06)}
/* ---------- table: status plate, seat name plates, speech bubbles, combo labels ---------- */
html[data-skin="bnbg"] #g-status{padding:6px 14px;border-radius:14px;color:var(--bnbg-text);font-weight:500;letter-spacing:.04em}
html[data-skin="bnbg"] #g-status.you{border-color:var(--bnbg-leather-edge-glow);--bnbg-l-stitch:var(--bnbg-stitch-hi);color:#F6E08A;text-shadow:none;box-shadow:inset 0 0 0 2px var(--bnbg-leather-rim-sm),inset 0 1px 0 rgba(255,240,210,.16),0 8px 20px rgba(0,0,0,.55),0 0 22px rgba(230,193,117,.32)}
html[data-skin="bnbg"] #g-status.trib{background:var(--bnbg-fill);--bnbg-l-stitch:rgba(28,20,6,.5);border-color:#FFF0B7}
html[data-skin="bnbg"] .seat .nm{padding:3px 10px;line-height:16px;border-radius:10px;font-weight:500;letter-spacing:.04em}
html[data-skin="bnbg"] .bub{padding:7px 13px;border-radius:14px;color:var(--bnbg-text);font-weight:500;font-family:var(--bnbg-font)}
html[data-skin="bnbg"] .bub.pass{color:var(--bnbg-muted);letter-spacing:.12em}
html[data-skin="bnbg"] .clabel{padding:4px 12px;border-radius:12px;color:var(--bnbg-gold-hi);font-weight:500;letter-spacing:.06em;font-family:var(--bnbg-font)}
html[data-skin="bnbg"] .clabel.bomb{--bnbg-l-stitch:rgba(28,20,6,.5)}
/* action bar housing: a stitched leather tray under the action buttons (the buttons themselves stay lacquer / gold) */
html[data-skin="bnbg"] #g-act{isolation:isolate}
html[data-skin="bnbg"] #g-act:before{content:'';position:absolute;z-index:-1;inset:-4px 4px;border-radius:32px;pointer-events:none;
  background:var(--bnbg-leather);border:1px solid var(--bnbg-leather-edge);box-shadow:inset 0 0 0 4px var(--bnbg-leather-rim),var(--bnbg-leather-hi),0 12px 30px rgba(0,0,0,.55);
  outline:1px dashed var(--bnbg-stitch-c);outline-offset:-7px}
html[data-skin="bnbg"] #app.land #g-act:before{inset:-6px -8px}
/* the 理牌 / 同花顺 chips are BUTTONS that carry .chip: keep the kit button face, not the leather chip (zero-specificity :where, so .btn.grey still wins) */
html[data-skin="bnbg"] .btn:where(.chip){background:var(--bnbg-lacquer) padding-box,var(--bnbg-rim) border-box;border:1.5px solid transparent;color:var(--bnbg-btn-text);outline:0}
html[data-skin="bnbg"] .btn:where(.chip):focus-visible{outline:1.5px solid var(--bnbg-gold-bright);outline-offset:3px}
/* card counter (phone) + side panels (desktop) */
html[data-skin="bnbg"] #counter{padding:9px 13px;border-radius:16px}
html[data-skin="bnbg"] .gp{border-radius:20px;padding:15px 17px}
html[data-skin="bnbg"] .gp h5{color:var(--bnbg-eyebrow);opacity:1;font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:11px}
html[data-skin="bnbg"] #sp-score .tm{border:1px solid var(--bnbg-well-line);border-radius:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
html[data-skin="bnbg"] #sp-score .tm b{font-family:var(--bnbg-num-light);font-weight:300;color:var(--bnbg-text)}
html[data-skin="bnbg"] #sp-score .tm.us b{color:#F6E08A}
html[data-skin="bnbg"] :is(#sp-counter .cc,#sp-chat button){background:var(--bnbg-well);border:1px solid var(--bnbg-well-line)}
/* ---------- banner plate (kit leather): keep the big metal type inside the stitch ---------- */
html[data-skin="bnbg"] #banner{padding:18px 20px 20px;border-radius:20px}
/* ---------- modals (kit leather cards): serif titles, the result cards' gold-italic second line, recessed wells ---------- */
html[data-skin="bnbg"] .card{padding:22px 20px}
html[data-skin="bnbg"] .card h2{font-size:27px;letter-spacing:.06em;margin:6px 0 12px}html[data-skin="bnbg"] .card h2.big{font-size:36px;letter-spacing:.04em}
html[data-skin="bnbg"] .card h2 .l2{display:block!important;font-size:.6em;letter-spacing:.04em;margin-top:8px}
html[data-skin="bnbg"][lang=en] .card h2 .l2{letter-spacing:.01em}
html[data-skin="bnbg"] .card .foot{bottom:-22px;margin:10px -20px -22px;padding:16px 20px 20px;background:linear-gradient(rgba(14,13,12,0) 0,rgba(14,13,12,.95) 14px,var(--bnbg-leather-deep) 26px)}
html[data-skin="bnbg"] .xclose{right:2px;top:2px;border:1px solid rgba(212,175,55,.45);background:radial-gradient(circle at 50% 30%,#2B2925 0,#121110 75%);color:var(--bnbg-gold-hi);box-shadow:inset 0 1px 0 rgba(255,240,210,.14),0 6px 16px rgba(0,0,0,.6);font-weight:300;font-size:26px}
html[data-skin="bnbg"] .sec{color:var(--bnbg-eyebrow);opacity:1;font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:11.5px;border-bottom:1px solid rgba(201,169,95,.2);padding-bottom:6px;margin-top:18px}
html[data-skin="bnbg"] :is(.mdl,.stats div,.task,.dy,.rules-list div){background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,240,210,.05);color:var(--bnbg-text-2)}
html[data-skin="bnbg"] .stats b{font-family:var(--bnbg-num-light);font-weight:300;font-size:26px;color:var(--bnbg-text)}
html[data-skin="bnbg"] .dy.today{border-color:var(--bnbg-leather-edge-glow);background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(12,12,11,.5));box-shadow:inset 0 1px 0 rgba(255,240,210,.12),0 0 16px rgba(230,193,117,.24)}
html[data-skin="bnbg"] .coinrow{font-family:var(--bnbg-num-light);font-weight:400}
/* HUD pills: 38px (the round buttons' size) with the stitch 3px in, so the two-line level plate clears it */
html[data-skin="bnbg"] #hud .pill{height:38px;--bnbg-l-rim:2px;--bnbg-l-inset:3px}
html[data-skin="bnbg"] .lvl{line-height:1.02}html[data-skin="bnbg"] .lvl b{font-size:16px}html[data-skin="bnbg"] .lvl small{font-size:10px}
/* desktop: the action tray hugs the buttons instead of spanning the table width */
html[data-skin="bnbg"] #app.wide #g-act{justify-self:center;padding:0 14px}
html[data-skin="bnbg"] #app.wide #g-act:before{inset:-6px 0}
/* AA on leather: the "none left" red of the card counter is lifted a step (#FF8FA0 measured 3.7:1 on the lightest grain) */
html[data-skin="bnbg"] .cc.zero b{color:#FFB3BF}
html[data-skin="bnbg"] .lvl small{color:#EFDDAB}   /* the small HUD pill is lighter leather than a card: 5:1 here */
/* 360px phones: the leather pills give back the width the light numbers took, so 打2 / 第1局 and both scores stay whole */
@media (max-width:379px){html[data-skin="bnbg"] .lvl{padding:0 7px}html[data-skin="bnbg"] .score span{padding:0 6px}html[data-skin="bnbg"] .score span b{font-size:17px}}
html[data-skin="bnbg"][lang=en] .diffbox .dl>span{text-transform:uppercase;font-size:12px}
/* ================= v1.1.1 leather review fixes ================= */
/* modal footer: reads as the card's own leather (grain over the leather's dark tone (--bnbg-leather-deep), the 6px dark rim on its sides and
   bottom) instead of a flat black tray, and carries the card's stitch itself, so the dashed line runs all the way round.
   It still reaches the card edge, so nothing scrolls visibly underneath it. */
html[data-skin="bnbg"] .card .foot{border-radius:0 0 19px 19px;background:none}
/* the leather layer is masked in over its first 22px, so the grain fades in with the dark (no hard band edge over the rows) */
html[data-skin="bnbg"] .card .foot:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--bnbg-leather-grain) 0 0/160px 160px,linear-gradient(rgba(14,13,12,.6) 0,rgba(14,13,12,.92) 18px,var(--bnbg-leather-deep) 30px);
  box-shadow:inset 6px 0 0 var(--bnbg-leather-rim),inset -6px 0 0 var(--bnbg-leather-rim),inset 0 -6px 0 var(--bnbg-leather-rim);
  -webkit-mask-image:linear-gradient(transparent 0,#000 22px);mask-image:linear-gradient(transparent 0,#000 22px)}
html[data-skin="bnbg"] .card .foot:after{content:'';position:absolute;left:8px;right:8px;bottom:8px;top:22px;pointer-events:none;
  border:1px dashed var(--bnbg-stitch-c);border-top:0;border-radius:0 0 11px 11px}
/* action tray: clear of the screen edge / safe area, and at least 4px between the button rims and the stitch */
html[data-skin="bnbg"] #app.land #g-act{margin-right:0;margin-bottom:calc(var(--hand-h,120px) + 12px)}
html[data-skin="bnbg"] #app.land #g-act:before{inset:-10px -12px;outline-offset:-5px}
html[data-skin="bnbg"] #app.wide #g-act:before{inset:-11px -2px;outline-offset:-5px}
/* the last v1.0 black pieces of the bottom-left HUD: your coin readout gets a small stitched leather housing, the card-count
   and timer chips are leather (too small to stitch); the warn / low red variants keep their own fill */
html[data-skin="bnbg"] #seat-0 .eggs{background:var(--bnbg-leather-sm);border:1px solid var(--bnbg-leather-edge);border-radius:999px;padding:3px 11px 3px 5px;
  box-shadow:inset 0 0 0 2px var(--bnbg-leather-rim-sm),var(--bnbg-leather-hi),0 6px 14px rgba(0,0,0,.5);outline:1px dashed var(--bnbg-stitch-c-sm);outline-offset:-4px;text-shadow:none;color:#F6E08A}
html[data-skin="bnbg"] :is(.seat .cnt,.seat .tm):not(.warn):not(.low){background:var(--bnbg-leather-sm);border-color:var(--bnbg-leather-edge-hi);color:#F6E08A;box-shadow:inset 0 1px 0 rgba(255,240,210,.14),0 4px 12px rgba(0,0,0,.6)}
/* Georgia's old-style figures bob in serif names ("Guest 7210"): lining figures */
html[data-skin="bnbg"] :is(.prof .pn,.card h2,.tile b){font-variant-numeric:lining-nums}
/* landscape / phone: the open card counter covers the partner seat; hide its avatar too (its gold ring poked above the plate) */
html[data-skin="bnbg"] #app.cnt-on:not(.wide) #seat-2 .av{visibility:hidden}
/* quick-chat phrases: the same recessed well as the other rows inside a leather card (they washed out on the grain) */
html[data-skin="bnbg"] :is(#sp-chat button,.chatgrid button){background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,240,210,.05)}
html[data-skin="bnbg"] :is(#sp-chat button,.chatgrid button):active{border-color:var(--bnbg-leather-edge-hi)}
/* splash 16+ age badge: small leather to sit with the leather health notice */
html[data-skin="bnbg"] .age{background:var(--bnbg-leather-sm);border-color:var(--bnbg-leather-edge);box-shadow:inset 0 0 0 2px var(--bnbg-leather-rim-sm),var(--bnbg-leather-hi);outline:1px dashed var(--bnbg-stitch-c-sm);outline-offset:-4px}
html[data-skin="bnbg"] .age small{border-top-color:rgba(201,169,95,.55)}
/* phone action tray: 7px of leather above / below the buttons and the stitch 4px in, so the stitch clears every button rim by
   4px+ (it ran behind the 5-button row's rims); 7px keeps it off the coin pill above at 360x740 */
html[data-skin="bnbg"] #g-act:before{inset:-7px 4px;outline-offset:-4px}
html[data-skin="bnbg"] #seat-0 .eggs{padding-top:2px;padding-bottom:2px}
/* 360px phones: the 5-button row was wider than the tray; slimmer buttons (still 44px+ tall, 48px+ wide) and a tray 2px wider */
@media (max-width:379px){html[data-skin="bnbg"] #g-act{gap:5px}html[data-skin="bnbg"] #g-act .btn{padding:6px 10px}html[data-skin="bnbg"] #g-act .btn.big{padding:6px 15px}
  html[data-skin="bnbg"] #g-act .chip{padding:4px 9px}html[data-skin="bnbg"] #g-act:before{inset:-7px -2px}}
/* HUD level pill (38px, stitch 3px in): tighter two-line 打2 / 第1局 so the glyph tops clear the stitch */
html[data-skin="bnbg"] .lvl{line-height:.98}html[data-skin="bnbg"] .lvl b{font-size:15px}
/* card counter (phone grid): 大王 / 小王 overran their columns and read as one word; a column gap and smaller joker labels */
@media (max-width:420px){html[data-skin="bnbg"] #app #counter.on{column-gap:4px}}
html[data-skin="bnbg"] #counter .cc:nth-child(-n+2) small{font-size:10.5px;letter-spacing:0}
/* EN rules card: the leather card's larger padding pushed Close below the fold at 390x844; tighter rows fit it like classic */
html[data-skin="bnbg"] .rules-list div{padding:5px 10px;margin:3px 0}
/* desktop play log: older rows fade out under a leather lip instead of running under the stitch and the bottom rim. The lip and
   its own stitch are sticky pseudo-elements moved to the end of the (flex column) log; positioned boxes paint over the panel's
   outline stitch, so the ::after redraws the bottom run of the stitch (8px in, radius 20 - 9) on top of the lip. */
html[data-skin="bnbg"] #sp-log{display:flex;flex-direction:column;padding-bottom:0}
html[data-skin="bnbg"] #sp-log>*{flex-shrink:0}
html[data-skin="bnbg"] #sp-log:before{content:'';order:98;flex-shrink:0;position:sticky;bottom:0;height:46px;margin:0 -17px;border-radius:0 0 19px 19px;pointer-events:none;
  background:var(--bnbg-leather-grain) 0 0/160px 160px,linear-gradient(var(--bnbg-leather-deep),var(--bnbg-leather-deep));
  box-shadow:inset 6px 0 0 var(--bnbg-leather-rim),inset -6px 0 0 var(--bnbg-leather-rim),inset 0 -6px 0 var(--bnbg-leather-rim);
  -webkit-mask-image:linear-gradient(transparent 0,#000 22px);mask-image:linear-gradient(transparent 0,#000 22px)}
html[data-skin="bnbg"] #sp-log:after{content:'';order:99;flex-shrink:0;position:sticky;bottom:8px;height:16px;margin:-24px -9px 8px;pointer-events:none;
  border:1px dashed var(--bnbg-stitch-c);border-top:0;border-radius:0 0 11px 11px}
/* phone portrait: the opaque leather toast sat on the partner's avatar + name plate; drop it just below them */
html[data-skin="bnbg"] #app:not(.land):not(.wide) #toast{top:calc(140px + var(--sat))}
/* old WebKit / Chromium (no outline-follows-radius: iOS <= 16.3, Chrome < 94; detected via the lh unit, Safari 16.4 / Chrome 109)
   draw the dashed outline square, and on pills and the round-ended tray its corners poke out past the curve. Rim only there. */
@supports not (width:1lh){
  html[data-skin="bnbg"] :is(.pill,.chip,.bnbg-leather-sm,#g-status,.bub,.age,#seat-0 .eggs):not(:focus-visible),
  html[data-skin="bnbg"] #g-act:before{outline-style:none}
}
/* ================= v1.2.1 black review fixes (owner: true black + gold; measured in review/black-art) ================= */
/* ground: the kit's gold haze (rgba(212,175,55,.10) + .06) over near-black reads as dark olive behind the HUD and seats (R-B +15);
   a neutral champagne lift keeps the soft glow without the brown (R-B ~ +1). background.webp itself is neutral. */
html[data-skin="bnbg"] #app{background:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(255,244,222,.045) 0,rgba(255,244,222,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) 50% 0/max(1200px,100%) auto no-repeat,var(--bnbg-bg)}
html[data-skin="bnbg"] #app:before{background:radial-gradient(ellipse at 50% 0,rgba(255,244,222,.03),transparent 60%)!important}
html[data-skin="bnbg"] .bnbg-ground{background:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(255,244,222,.045) 0,transparent 55%),url(assets/background.webp) 50% 0/max(1200px,100%) auto no-repeat,var(--bnbg-bg)}
/* 我方 / Us team tile: a translucent gold wash over black renders khaki; black with a gold hairline and gold type instead (them stays platinum) */
html[data-skin="bnbg"] :is(.score .us,#sp-score .tm.us){background:linear-gradient(180deg,rgba(255,240,210,.07),rgba(255,240,210,0)),#0E0D0C;box-shadow:inset 0 0 0 1px rgba(232,199,106,.6),inset 0 0 14px rgba(212,175,55,.12)}
/* toggles (on), active round buttons, disabled button rims: the kit's last olive-brown fills */
html[data-skin="bnbg"] .tog.on{background:linear-gradient(180deg,#1A1917,#0B0B0A);border-color:var(--bnbg-gold);box-shadow:inset 0 0 0 1px rgba(212,175,55,.35),inset 0 1px 3px rgba(0,0,0,.7)}
html[data-skin="bnbg"] .ibtn.on,html[data-skin="bnbg"] .ibtn.active{background:radial-gradient(circle at 50% 30%,#2B2925 0,#121110 75%)}
html[data-skin="bnbg"] .btn[disabled],html[data-skin="bnbg"] .btn.off,html[data-skin="bnbg"] .btn:disabled{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}
/* landscape phones: the result card's serif title + gold-italic line pushed 大厅 / 继续 below the card; one-line title and a sticky
   leather footer (the .card .foot treatment) so the buttons always show. Quick chat's Close gets the same footer. */
html[data-skin="bnbg"] #app.land .card.result h2 .l2{display:none!important}
html[data-skin="bnbg"] #app.land .card.result h2.big{font-size:26px;margin:0 0 6px}
html[data-skin="bnbg"] #app.land :is(.card.result,.card:has(> .chatgrid))>.row:last-child{position:sticky;bottom:-22px;z-index:3;margin:8px -20px -22px;padding:12px 20px 18px;border-radius:0 0 19px 19px}
html[data-skin="bnbg"] #app.land :is(.card.result,.card:has(> .chatgrid))>.row:last-child:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--bnbg-leather-grain) 0 0/160px 160px,linear-gradient(rgba(14,13,12,.6) 0,rgba(14,13,12,.92) 14px,var(--bnbg-leather-deep) 24px);
  box-shadow:inset 6px 0 0 var(--bnbg-leather-rim),inset -6px 0 0 var(--bnbg-leather-rim),inset 0 -6px 0 var(--bnbg-leather-rim);
  -webkit-mask-image:linear-gradient(transparent 0,#000 14px);mask-image:linear-gradient(transparent 0,#000 14px)}
html[data-skin="bnbg"] #app.land :is(.card.result,.card:has(> .chatgrid))>.row:last-child:after{content:'';position:absolute;left:8px;right:8px;bottom:8px;top:16px;pointer-events:none;
  border:1px dashed var(--bnbg-stitch-c);border-top:0;border-radius:0 0 11px 11px}
/* settings: a long toggle label wraps beside its toggle instead of pushing it onto its own line; landscape fits one more row */
html[data-skin="bnbg"] .card .set.tap{flex-wrap:nowrap}html[data-skin="bnbg"] .card .set.tap>span{flex:1;min-width:0}html[data-skin="bnbg"] .card .set.tap .tog{flex:none}
html[data-skin="bnbg"] #app.land .card .set{padding-top:6px;padding-bottom:6px}html[data-skin="bnbg"] #app.land .card h2{margin:2px 0 6px}
/* the locked 牌背 / 桌布 segment (BNBG has its own back + felt; the note below it says so): readable while inactive (~4.6:1) */
html[data-skin="bnbg"] .set.backrow>.seg{opacity:.62}
/* action tray: no empty stitched tray while dealing; in landscape a lone button (理牌 / Sort) stands without a leather ring */
html[data-skin="bnbg"] #g-act:not(:has(> .btn:not(.hide):not([hidden]))):before{display:none}
html[data-skin="bnbg"] #app.land #g-act:not(:has(> .btn:not(.hide):not([hidden]) ~ .btn:not(.hide):not([hidden]))):before{display:none}
/* 360px portrait: the stitched counter was wider than classic and covered both side avatars; it now fits between them */
@media (max-width:380px){html[data-skin="bnbg"] #app:not(.land):not(.wide) #counter{max-width:calc(100% - 2 * 64px);padding:6px 8px;--bnbg-l-inset:3px;--bnbg-l-rim:3px}}
/* landscape: the first-lead toast sat on the partner's avatar (top centre); it starts just right of it */
html[data-skin="bnbg"] #app.land #toast{max-width:min(380px,calc(50% - 60px))}

/* ============================================================
   加倍 / 锁牌 / 四炸 / 段位章 — the 2026-11 play-feedback layer.
   The brand stays visual: gold, champagne and black, never the classic skin's
   lucky red or flame orange, and the Gold Eggs stay play coins in both skins.
   ============================================================ */
/* 加倍 decision, floating on the table */
html[data-skin="bnbg"] #dblovl .dbl-ask{font-family:var(--bnbg-font);font-weight:500;letter-spacing:.14em;color:var(--bnbg-gold-hi);text-shadow:none}
html[data-skin="bnbg"] #dblovl .dbl-cd{background:var(--bnbg-lacquer,#121110);border:1px solid var(--bnbg-gold-bright,#D4AF37);box-shadow:0 0 12px rgba(212,175,55,.35);color:var(--bnbg-gold-hi);font-weight:600}
html[data-skin="bnbg"] #dblovl .dbl-call{font-family:var(--bnbg-serif,var(--bnbg-font));font-weight:500;color:#E7E3DA;-webkit-text-stroke:0;text-shadow:0 2px 12px rgba(0,0,0,.6);letter-spacing:.2em}
html[data-skin="bnbg"] #dblovl .dbl-call.yes{color:var(--bnbg-gold-hi);text-shadow:0 2px 14px rgba(212,175,55,.35)}
html[data-skin="bnbg"] #dblovl .dbl-wait{font-family:var(--bnbg-font);font-weight:400;color:var(--bnbg-text-2);text-shadow:none;letter-spacing:.16em}
html[data-skin="bnbg"] #dblovl .dbl-note{background:rgba(10,10,10,.86);border:1px solid var(--bnbg-line-soft);border-radius:999px;color:var(--bnbg-text-2);font-weight:400;letter-spacing:.02em}
html[data-skin="bnbg"] #dblovl .btn i{opacity:.7}
/* the seat's answer: a black plate with a gold hairline, gold-filled when the seat doubled */
html[data-skin="bnbg"] .seat .dbt{background:var(--bnbg-lacquer,#121110);border:1px solid var(--bnbg-line-soft);box-shadow:none;color:var(--bnbg-muted);font-family:var(--bnbg-font);font-weight:500;letter-spacing:.08em}
html[data-skin="bnbg"] .seat .dbt.yes{background:var(--bnbg-metal,linear-gradient(180deg,#F1D27A,#A8862A));border-color:var(--bnbg-gold-bright,#D4AF37);color:#1A1712}
/* 倍数 chip inside the level pill */
html[data-skin="bnbg"] .lvl .mx{background:var(--bnbg-metal,linear-gradient(180deg,#F1D27A,#A8862A));border:1px solid var(--bnbg-gold-bright,#D4AF37);color:#1A1712;font-weight:600}
html[data-skin="bnbg"] .lvl .mx.hot{background:linear-gradient(180deg,#FFF0B2,#D4AF37);color:#1A1712}
/* 没有大过上家的牌 */
html[data-skin="bnbg"] #nobig b{background:rgba(10,10,10,.9);border:1px solid var(--bnbg-line-soft);border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.6);color:var(--bnbg-text);font-family:var(--bnbg-font);font-weight:500;letter-spacing:.1em}
html[data-skin="bnbg"] .card p.why{color:var(--bnbg-muted);font-weight:400;opacity:1}
/* 本局结算 stage: black and gold. The kit's leather panel is switched off for this one overlay (it plays over the table). */
html[data-skin="bnbg"] .seat .tr{background:rgba(10,10,10,.82);border:1px solid var(--bnbg-line-soft);color:var(--bnbg-text-2);font-family:var(--bnbg-font);font-weight:500;text-shadow:none}
html[data-skin="bnbg"] .gtag{background:var(--bnbg-lacquer,#121110);border:1px solid rgba(212,175,55,.6);color:var(--bnbg-gold-hi);font-family:var(--bnbg-font);font-weight:500;box-shadow:0 4px 10px rgba(0,0,0,.5)}
html[data-skin="bnbg"] .gtag.sf,html[data-skin="bnbg"] .gtag.jokerbomb{background:var(--bnbg-metal,linear-gradient(180deg,#F1D27A,#A8862A));color:#1A1712}
html[data-skin="bnbg"] .seat.urgent .av{box-shadow:0 0 0 2px #F1D27A,0 0 22px rgba(241,210,122,.7)}
html[data-skin="bnbg"] #modal.resv{background:radial-gradient(ellipse 75% 55% at 50% 44%,rgba(5,5,5,.6) 0,rgba(5,5,5,.84) 70%,rgba(5,5,5,.92) 100%)}
html[data-skin="bnbg"] #modal .card.result.stage{background:none;border:0;box-shadow:none;outline:0}
html[data-skin="bnbg"] #modal .card.result.stage:before,html[data-skin="bnbg"] #modal .card.result.stage:after{display:none}
html[data-skin="bnbg"] .rs-band{background:linear-gradient(90deg,rgba(14,13,12,0) 0,rgba(14,13,12,.94) 16%,#1A1712 50%,rgba(14,13,12,.94) 84%,rgba(14,13,12,0) 100%);box-shadow:inset 0 1px 0 rgba(241,210,122,.75),inset 0 -1px 0 rgba(241,210,122,.75),0 10px 30px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .rs-band:before,html[data-skin="bnbg"] .rs-band:after{height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent)}
html[data-skin="bnbg"] .rs-band.lose{box-shadow:inset 0 1px 0 rgba(201,206,211,.55),inset 0 -1px 0 rgba(201,206,211,.55),0 10px 30px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .rs-title i{font-family:var(--bnbg-serif,var(--bnbg-font));font-weight:500;color:var(--bnbg-gold-hi);-webkit-text-stroke:0;text-shadow:0 2px 12px rgba(212,175,55,.35);letter-spacing:.18em}
html[data-skin="bnbg"] .rs-band.lose .rs-title i{color:#E7E3DA;text-shadow:0 2px 12px rgba(201,206,211,.25)}
html[data-skin="bnbg"] .rs-sub{font-family:var(--bnbg-font);font-weight:400;color:var(--bnbg-text-2);text-shadow:none;letter-spacing:.12em}
html[data-skin="bnbg"] .rs-medal:before{background:repeating-conic-gradient(from 0deg,rgba(241,210,122,.16) 0 9deg,rgba(241,210,122,0) 9deg 22deg)}
html[data-skin="bnbg"] .rs-medal:after{background:radial-gradient(circle,rgba(212,175,55,.28),rgba(212,175,55,0) 68%)}
html[data-skin="bnbg"] .rs-tier small{color:var(--bnbg-label);font-family:var(--bnbg-font);font-weight:500;opacity:1}
html[data-skin="bnbg"] .rs-tier b{font-family:var(--bnbg-font);font-weight:500;color:var(--bnbg-gold-hi);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.08em}
html[data-skin="bnbg"] .rs-stars i{background:#0A0A0A;outline:1px solid rgba(212,175,55,.3)}
html[data-skin="bnbg"] .rs-stars i.on{background:linear-gradient(180deg,#FFF0B2,#D4AF37);filter:drop-shadow(0 0 5px rgba(241,210,122,.6))}
html[data-skin="bnbg"] .rs-bar{background:#070707;border:1px solid var(--bnbg-line-soft);box-shadow:none}
html[data-skin="bnbg"] .rs-bar i{background:linear-gradient(90deg,#A8862A,#D4AF37 60%,#F1D27A);box-shadow:none}
html[data-skin="bnbg"] .rs-pts span{color:var(--bnbg-muted);opacity:1}html[data-skin="bnbg"] .rs-pts b{color:var(--bnbg-gold-hi);font-weight:500}html[data-skin="bnbg"] .rs-pts b.dn{color:#C9CED3}
html[data-skin="bnbg"] .rs-lines .lvchg{text-shadow:none;font-weight:500}
html[data-skin="bnbg"] .rs-lines .coinrow{text-shadow:none;font-weight:500;color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .rs-dlt{background:var(--bnbg-lacquer,#121110);border:1px solid var(--bnbg-line-soft);box-shadow:0 8px 20px rgba(0,0,0,.6)}
html[data-skin="bnbg"] .rs-dlt small{background:#1A1A1A;color:#C9CED3;font-family:var(--bnbg-font);font-weight:500}
html[data-skin="bnbg"] .rs-dlt b{font-family:var(--bnbg-font);font-weight:500;color:#D2C8B2}
html[data-skin="bnbg"] .rs-dlt.up{border-color:rgba(212,175,55,.6)}
html[data-skin="bnbg"] .rs-dlt.up small{background:var(--bnbg-metal,linear-gradient(180deg,#F1D27A,#A8862A));color:#1A1712}
html[data-skin="bnbg"] .rs-dlt.up b{color:var(--bnbg-gold-hi);text-shadow:none}

/* the turn clock: lacquer body with a champagne rim and gold numerals (crimson-rose in the last five seconds) */
html[data-skin="bnbg"] .clk{--clk-body:#1A1814;--clk-face:#0E0D0C;--clk-line:#D4AF37;--clk-num:#F6E08A}
html[data-skin="bnbg"] .clk .body,html[data-skin="bnbg"] .clk .bell{stroke-width:1.8}html[data-skin="bnbg"] .clk .leg,html[data-skin="bnbg"] .clk .knob{stroke-width:2.4}
html[data-skin="bnbg"] .clk svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
html[data-skin="bnbg"] .clk b{font-family:var(--bnbg-num,var(--bnbg-font));font-weight:500}
html[data-skin="bnbg"] .clk.low{--clk-body:#2A1216;--clk-face:#1E0F12;--clk-line:#FF8FA0;--clk-num:#FF8FA0}
html[data-skin="bnbg"] .seat .co{background:rgba(10,10,10,.82);border:1px solid var(--bnbg-line-soft);color:var(--bnbg-gold-hi);font-family:var(--bnbg-num,var(--bnbg-font));font-weight:500;text-shadow:none}