/* 고스톱 Go-Stop - BNBG Black Gold per-game layer (linked after skin-bnbg.css). Everything is scoped under
   html[data-skin="bnbg"]; classic is untouched. Kit v1.2.1: black leather grounds with gold stitching, thin
   gold hairlines, metallic gold display type, and the kit's gold primary / black-lacquer secondary buttons.
   The 48 hwatu faces are drawn in code and are NOT restyled - a player has to read them identically in both
   skins, so only the table, the plates and the chrome change. */

html[data-skin="bnbg"],html[data-skin="bnbg"] body{background:#0A0A0A}
/* With the 3D table on, the cloth is a canvas at z-index -1. A negative-z child paints above the ROOT
   background but below the body's own, and this skin gives the body a background of its own - which is
   why the classic skin showed the cloth and this one showed a black page. The body steps aside here; the
   html background underneath stays as the colour the page falls back to if the canvas ever fails. */
html[data-skin="bnbg"] body.felt3d{background:none}
html[data-skin="bnbg"] body{
  background:
    radial-gradient(ellipse 130% 80% at 50% 8%,#1C1B19 0%,transparent 60%),
    linear-gradient(180deg,#121211,#0A0A0A 70%,#050505);
  color:var(--bnbg-text);font-family:var(--bnbg-font)}

/* ---------- topbar ---------- */
html[data-skin="bnbg"] h1{
  font-weight:600;letter-spacing:.07em;text-shadow:none;-webkit-text-stroke:0;
  background:var(--bnbg-metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.65))}
html[data-skin="bnbg"] #h-sub{color:var(--bnbg-eyebrow);font-weight:500;letter-spacing:.24em;font-size:10.5px}

html[data-skin="bnbg"] button{
  background:var(--bnbg-fill);color:var(--bnbg-ink);border:1px solid var(--bnbg-gold);
  border-radius:var(--bnbg-r);box-shadow:0 6px 16px rgba(0,0,0,.5);font-weight:600;letter-spacing:.02em}
html[data-skin="bnbg"] button:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(0,0,0,.55)}
html[data-skin="bnbg"] button:disabled{filter:none;opacity:.42;box-shadow:none;transform:none}
html[data-skin="bnbg"] .icon,
html[data-skin="bnbg"] #hint,
html[data-skin="bnbg"] #peek,
html[data-skin="bnbg"] #coin-btn{
  background:var(--bnbg-lacquer);color:var(--bnbg-gold-hi);border:1px solid var(--bnbg-hair)}
html[data-skin="bnbg"] #coin-btn{border-color:var(--bnbg-gold);font-weight:500}
html[data-skin="bnbg"] #stop{
  background:linear-gradient(180deg,#8C3A22,#5E2213);color:var(--bnbg-cream);border:1px solid #C06A42}

/* ---------- the table and the intro, in stitched leather ---------- */
html[data-skin="bnbg"] #table,
html[data-skin="bnbg"] #intro{
  background:linear-gradient(180deg,rgba(4,4,4,.42),rgba(12,12,11,.28)),
    var(--bnbg-leather-grain) 0 0/160px 160px repeat,#141312;
  border:1px solid var(--bnbg-gold);border-radius:var(--bnbg-r-lg);
  box-shadow:var(--bnbg-l-drop),inset 0 1px 0 rgba(255,240,210,.07)}
html[data-skin="bnbg"] #intro-goal{color:var(--bnbg-label);font-weight:400}
html[data-skin="bnbg"] .ip b{color:var(--bnbg-gold-hi);font-weight:500;letter-spacing:.04em}
html[data-skin="bnbg"] .ip span{color:var(--bnbg-label);font-weight:400}
html[data-skin="bnbg"] .ip canvas{border:1px solid var(--bnbg-hair);box-shadow:0 4px 10px rgba(0,0,0,.55)}
html[data-skin="bnbg"] .slot .box{border:1px dashed var(--bnbg-hair)}
html[data-skin="bnbg"] .who{color:var(--bnbg-label);font-weight:500}
html[data-skin="bnbg"] .who b{color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] .advisory{color:var(--bnbg-label);opacity:.7;font-weight:400}

/* ---------- sheets ---------- */
html[data-skin="bnbg"] .sheet{background:rgba(5,5,5,.78)}
html[data-skin="bnbg"] .sheet .card2{
  background:linear-gradient(180deg,rgba(6,6,6,.4),rgba(14,14,13,.26)),
    var(--bnbg-leather-grain) 0 0/160px 160px repeat,#121211;
  color:var(--bnbg-text);border:1px solid var(--bnbg-gold);border-bottom:0;
  border-radius:var(--bnbg-r-lg) var(--bnbg-r-lg) 0 0}
html[data-skin="bnbg"] .row{border-bottom:1px solid var(--bnbg-hair);font-weight:500;color:var(--bnbg-text)}
html[data-skin="bnbg"] h2{color:var(--bnbg-gold-hi);font-weight:500;letter-spacing:.06em}
html[data-skin="bnbg"] select{
  background:var(--bnbg-input);color:var(--bnbg-text);border:1px solid var(--bnbg-hair);
  border-radius:var(--bnbg-r-sm);box-shadow:none;font-weight:500}
html[data-skin="bnbg"] input[type=checkbox]{accent-color:var(--bnbg-gold)}
html[data-skin="bnbg"] .how{color:var(--bnbg-label);font-weight:400}
html[data-skin="bnbg"] .rrow{border-bottom:1px solid var(--bnbg-hair);font-weight:400}
html[data-skin="bnbg"] .rrow b{color:var(--bnbg-gold-hi)}
html[data-skin="bnbg"] #r-title.won{color:#8FE0A6}
html[data-skin="bnbg"] #r-title.lost{color:#E0836A}
html[data-skin="bnbg"] #r-title.draw{color:var(--bnbg-label)}

html[data-skin="bnbg"] #toast{
  background:var(--bnbg-card);color:var(--bnbg-text);border:1px solid var(--bnbg-gold);
  box-shadow:0 10px 26px rgba(0,0,0,.6);font-weight:500}