/* 오목 Omok - 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 board keeps its wood so the stones stay readable - only its surround becomes leather and gold. */

html[data-skin="bnbg"],html[data-skin="bnbg"] body{background:#0A0A0A}
html[data-skin="bnbg"] body{
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,#1C1B19 0%,transparent 62%),
    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:.26em;font-size:10.5px}
html[data-skin="bnbg"] html[lang=en] #h-sub{letter-spacing:.12em}

/* the kit's buttons: gold primary, black lacquer secondary, no toon drop shadow */
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"] #undo,
html[data-skin="bnbg"] #hint{
  background:var(--bnbg-lacquer);color:var(--bnbg-gold-hi);border:1px solid var(--bnbg-hair)}
html[data-skin="bnbg"] #coin-btn{
  background:var(--bnbg-lacquer);color:var(--bnbg-gold-hi);border:1px solid var(--bnbg-gold);font-weight:500}

/* ---------- turn bar ---------- */
html[data-skin="bnbg"] .dot{border:1px solid var(--bnbg-gold);box-shadow:0 0 10px rgba(212,175,55,.26)}
html[data-skin="bnbg"] .dot.white{background:radial-gradient(circle at 34% 30%,#FFF8E8,#D9CDB0)}
html[data-skin="bnbg"] #status{color:var(--bnbg-text);font-weight:500}
html[data-skin="bnbg"] #movecount{
  background:var(--bnbg-well);border:1px solid var(--bnbg-well-line);color:var(--bnbg-label);font-weight:500}

/* ---------- the board, in a stitched leather surround ---------- */
html[data-skin="bnbg"] .plate{
  background:linear-gradient(180deg,rgba(4,4,4,.4),rgba(12,12,11,.26)),
    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"] canvas{border:1px solid var(--bnbg-hair);box-shadow:var(--bnbg-l-inset)}
/* The optional 3D view keeps the same leather plate and gold hairline; the scene's own materials, lights
   and the stitched-leather rail round the board are built in scene3d.js from the kit's bnbg-three.js. */
html[data-skin="bnbg"] #board3d{border:1px solid var(--bnbg-hair);box-shadow:none;background:transparent}
html[data-skin="bnbg"] #view-btn{color:var(--bnbg-gold-hi);letter-spacing:.06em}

html[data-skin="bnbg"] .advisory{color:var(--bnbg-label);opacity:.7;letter-spacing:.02em}

/* ---------- settings sheet ---------- */
html[data-skin="bnbg"] .sheet{background:rgba(5,5,5,.78)}
html[data-skin="bnbg"] .sheet .card{
  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"] .how{color:var(--bnbg-label);font-weight:400}

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}