/* BreakLobby v7 — one global table, piece and emblem design system. */
:root,
:root[data-board-theme="walnut"] {
  --game-table-frame-a: #170c07;
  --game-table-frame-b: #633719;
  --game-table-frame-c: #d3a456;
  --game-table-light-a: #f0d49f;
  --game-table-light-b: #d1aa72;
  --game-table-light-c: #ad7844;
  --game-table-dark-a: #85583a;
  --game-table-dark-b: #643b23;
  --game-table-dark-c: #422315;
  --game-table-accent: #dda94e;
  --game-table-accent-soft: #f4d896;
  --game-table-screen-a: #120a06;
  --game-table-screen-b: #4b2815;
  --game-table-screen-c: #211008;
  --game-table-track-a: #0b0908;
  --game-table-track-b: #332a22;
  --game-table-light-track-a: #8b6b48;
  --game-table-light-track-b: #e1c99b;
}

:root[data-board-theme="emerald"] {
  --game-table-frame-a: #071b15;
  --game-table-frame-b: #154f3b;
  --game-table-frame-c: #c5a34f;
  --game-table-light-a: #f2e4bd;
  --game-table-light-b: #d4bd83;
  --game-table-light-c: #aa8d4f;
  --game-table-dark-a: #276c55;
  --game-table-dark-b: #174b3a;
  --game-table-dark-c: #0b2e24;
  --game-table-accent: #d4b85f;
  --game-table-accent-soft: #f5e4a6;
  --game-table-screen-a: #06130f;
  --game-table-screen-b: #174b39;
  --game-table-screen-c: #0a241b;
  --game-table-track-a: #06120e;
  --game-table-track-b: #173c30;
  --game-table-light-track-a: #89784f;
  --game-table-light-track-b: #ead9a8;
}

:root[data-board-theme="midnight"] {
  --game-table-frame-a: #070b17;
  --game-table-frame-b: #172e58;
  --game-table-frame-c: #9ebdd8;
  --game-table-light-a: #eaf2fb;
  --game-table-light-b: #b6cbe1;
  --game-table-light-c: #7898b8;
  --game-table-dark-a: #314d7c;
  --game-table-dark-b: #1e3460;
  --game-table-dark-c: #111d3c;
  --game-table-accent: #b9d2e8;
  --game-table-accent-soft: #eef8ff;
  --game-table-screen-a: #040713;
  --game-table-screen-b: #172b52;
  --game-table-screen-c: #0a1128;
  --game-table-track-a: #050814;
  --game-table-track-b: #1b2c4c;
  --game-table-light-track-a: #70869f;
  --game-table-light-track-b: #d5e3ef;
}

:root[data-board-theme="sandstone"] {
  --game-table-frame-a: #5b321f;
  --game-table-frame-b: #a9663e;
  --game-table-frame-c: #f0cf91;
  --game-table-light-a: #fff1cc;
  --game-table-light-b: #e9c992;
  --game-table-light-c: #c99561;
  --game-table-dark-a: #bd6d4e;
  --game-table-dark-b: #934c37;
  --game-table-dark-c: #6f3328;
  --game-table-accent: #f0c271;
  --game-table-accent-soft: #fff0bd;
  --game-table-screen-a: #3d2016;
  --game-table-screen-b: #a25e3f;
  --game-table-screen-c: #6d3827;
  --game-table-track-a: #5a3123;
  --game-table-track-b: #9d6a4a;
  --game-table-light-track-a: #a77955;
  --game-table-light-track-b: #f3d8aa;
}

:root,
:root[data-checker-set="ivory-onyx"] {
  --game-piece-light-stroke: #3d2818;
  --game-piece-light-shadow: #8c6132;
  --game-piece-dark-stroke: #e4bd69;
  --game-piece-dark-shadow: #000000;
}

:root[data-checker-set="ruby-pearl"] {
  --game-piece-light-stroke: #5e3528;
  --game-piece-light-shadow: #a07a55;
  --game-piece-dark-stroke: #f0b39f;
  --game-piece-dark-shadow: #390910;
}

:root[data-checker-set="sapphire-gold"] {
  --game-piece-light-stroke: #563813;
  --game-piece-light-shadow: #90651b;
  --game-piece-dark-stroke: #b8d7ff;
  --game-piece-dark-shadow: #061226;
}

:root[data-checker-set="mint-graphite"] {
  --game-piece-light-stroke: #174d3a;
  --game-piece-light-shadow: #317a5d;
  --game-piece-dark-stroke: #cbe2ed;
  --game-piece-dark-shadow: #05090d;
}

.hybrid-screen {
  --hybrid-gold: var(--game-table-accent);
  --hybrid-gold-light: var(--game-table-accent-soft);
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--game-table-frame-c) 24%, transparent), transparent 50%),
    linear-gradient(90deg, var(--game-table-screen-a), var(--game-table-screen-b) 48%, var(--game-table-screen-a)),
    repeating-linear-gradient(92deg, var(--game-table-screen-c) 0 4px, var(--game-table-screen-b) 5px 54px, var(--game-table-screen-a) 56px 60px);
}

.hybrid-board-frame {
  border-color: var(--game-table-accent);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 31%),
    repeating-linear-gradient(90deg, var(--game-table-frame-a) 0 3px, var(--game-table-frame-b) 4px 25px, var(--game-table-frame-a) 27px 31px);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.62),
    0 0 0 3px var(--game-table-frame-a),
    0 0 0 6px color-mix(in srgb, var(--game-table-accent) 78%, transparent),
    inset 0 0 28px rgba(0, 0, 0, 0.72),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.hybrid-board {
  border-color: color-mix(in srgb, var(--game-table-accent-soft) 64%, transparent);
  outline-color: var(--game-table-frame-a);
  background: var(--game-table-frame-b);
}

.hybrid-square.is-light,
.chess-square.light {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.15), transparent 45%),
    linear-gradient(135deg, var(--game-table-light-a), var(--game-table-light-b) 66%, var(--game-table-light-c));
}

.hybrid-square.is-dark,
.chess-square.dark {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.075), transparent 46%),
    linear-gradient(135deg, var(--game-table-dark-a), var(--game-table-dark-b) 66%, var(--game-table-dark-c));
}

.hybrid-file-axis,
.hybrid-rank-axis,
.hybrid-bearoff-ruler,
.hybrid-bearoff > strong {
  color: var(--game-table-accent-soft);
}

.hybrid-bearoff {
  border-color: var(--game-table-accent);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), transparent 46%),
    repeating-linear-gradient(92deg, var(--game-table-frame-a) 0 3px, var(--game-table-frame-b) 4px 28px, var(--game-table-frame-a) 30px 34px);
}

.hybrid-bearoff-white {
  color: var(--game-piece-light-stroke);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 48%),
    repeating-linear-gradient(92deg, var(--game-table-light-c) 0 3px, var(--game-table-light-a) 4px 28px, var(--game-table-light-b) 30px 34px);
}

.hybrid-bearoff-track {
  background: linear-gradient(90deg, var(--game-table-track-a), var(--game-table-track-b) 50%, var(--game-table-track-a));
}

.hybrid-bearoff-white .hybrid-bearoff-track {
  background: linear-gradient(90deg, var(--game-table-light-track-a), var(--game-table-light-track-b) 50%, var(--game-table-light-track-a));
}

.hybrid-checker-discs i,
.hybrid-captured-token,
.hybrid-bearoff-white .hybrid-bearoff-track span {
  border-color: var(--checker-light-edge);
  background:
    radial-gradient(ellipse at 34% 18%, var(--checker-light-shine), transparent 25%),
    linear-gradient(180deg, var(--checker-light-center) 0 23%, var(--checker-light-mid) 31% 63%, var(--checker-light-edge) 72% 100%);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.58),
    inset 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 1px color-mix(in srgb, var(--game-piece-light-stroke) 68%, transparent);
}

.hybrid-checker-stack.black .hybrid-checker-discs i,
.hybrid-captured-token.black,
.hybrid-bearoff-black .hybrid-bearoff-track span {
  border-color: var(--checker-dark-edge);
  background:
    radial-gradient(ellipse at 34% 18%, var(--checker-dark-shine), transparent 24%),
    linear-gradient(180deg, var(--checker-dark-center) 0 22%, var(--checker-dark-mid) 31% 64%, var(--checker-dark-edge) 73% 100%);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.74),
    inset 0 1px rgba(255, 255, 255, 0.17),
    0 0 0 1px color-mix(in srgb, var(--game-piece-dark-stroke) 62%, transparent);
}

.hybrid-checker-count {
  border-color: var(--game-piece-light-stroke);
  color: var(--game-piece-light-stroke);
  background: var(--checker-light-center);
}

.hybrid-checker-stack.black .hybrid-checker-count {
  border-color: var(--game-piece-dark-stroke);
  color: var(--game-piece-dark-stroke);
  background: var(--checker-dark-mid);
}

.hybrid-chess-piece {
  isolation: isolate;
  overflow: visible;
}

.hybrid-chess-symbol {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.hybrid-chess-piece.white {
  color: var(--checker-light-center);
  -webkit-text-stroke: 1.7px var(--game-piece-light-stroke);
  text-shadow:
    0 1px 0 var(--checker-light-shine),
    0 3px 0 var(--game-piece-light-shadow),
    0 7px 8px rgba(0, 0, 0, 0.74),
    0 0 3px var(--game-piece-light-stroke);
}

.hybrid-chess-piece.black {
  color: var(--checker-dark-center);
  -webkit-text-stroke: 1.55px var(--game-piece-dark-stroke);
  text-shadow:
    0 1px 0 var(--checker-dark-shine),
    0 4px 0 var(--game-piece-dark-shadow),
    0 7px 8px rgba(0, 0, 0, 0.82);
}

.hybrid-checker-emblem {
  position: absolute;
  inset: 12% 34%;
  z-index: 4;
  border: 1px solid color-mix(in srgb, var(--game-table-accent-soft) 82%, transparent);
  background-color: rgba(12, 10, 8, 0.16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52);
  font-size: clamp(0.34rem, 0.65vw, 0.6rem);
  font-style: normal;
  pointer-events: none;
}

.hybrid-chess-identity {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 5;
  width: 27%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--game-table-accent-soft) 84%, transparent);
  background-color: rgba(12, 10, 8, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.62);
  font-size: clamp(0.35rem, 0.75vw, 0.68rem);
  pointer-events: none;
}

.hybrid-checker-emblem.is-none,
.hybrid-chess-identity.is-none {
  opacity: 0;
}

.hybrid-board[data-active-layer="checkers"] .hybrid-chess-piece,
.hybrid-board[data-active-layer="chess"] .hybrid-checker-stack {
  opacity: 0.74;
}

.chess-board {
  border-color: var(--game-table-frame-b);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, var(--game-table-frame-b), var(--game-table-frame-a));
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.46),
    inset 0 0 0 2px color-mix(in srgb, var(--game-table-accent) 54%, transparent),
    inset 0 0 28px rgba(0, 0, 0, 0.28);
}

.chess-piece-white {
  background:
    radial-gradient(circle at 34% 24%, var(--checker-light-shine), transparent 20%),
    radial-gradient(circle at 50% 45%, var(--checker-light-center) 0 26%, var(--checker-light-mid) 68%, var(--checker-light-edge) 100%);
  box-shadow:
    inset 0 0 0 1px var(--checker-light-shine),
    inset 0 0 0 4px color-mix(in srgb, var(--checker-light-edge) 58%, transparent),
    0 5px 9px rgba(0, 0, 0, 0.48);
}

.chess-piece-black {
  background:
    radial-gradient(circle at 32% 22%, var(--checker-dark-shine), transparent 18%),
    radial-gradient(circle at 48% 44%, var(--checker-dark-center) 0 18%, var(--checker-dark-mid) 62%, var(--checker-dark-edge) 100%);
  box-shadow:
    inset 0 0 0 1px var(--game-piece-dark-stroke),
    inset 0 0 0 4px color-mix(in srgb, var(--checker-dark-edge) 62%, transparent),
    0 5px 9px rgba(0, 0, 0, 0.58);
}

.chess-piece-white .chess-piece-symbol {
  color: var(--checker-light-center);
  -webkit-text-stroke: 1.6px var(--game-piece-light-stroke);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.58), 0 0 8px var(--checker-light-shine);
}

.chess-piece-black .chess-piece-symbol {
  color: var(--checker-dark-center);
  -webkit-text-stroke: 1.35px var(--game-piece-dark-stroke);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.72);
}

.design-copy {
  max-width: 820px;
}

.global-design-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -2px 0 5px;
}

.global-design-scope span {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--game-table-accent) 56%, transparent);
  border-radius: 999px;
  color: var(--game-table-accent-soft);
  background: color-mix(in srgb, var(--game-table-frame-b) 72%, rgba(8, 9, 13, 0.9));
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.035em;
}

@media (max-width: 760px) {
  .hybrid-checker-emblem {
    inset: 13% 35%;
  }

  .hybrid-chess-identity {
    width: 25%;
  }
}