/* ==========================================================================
   لایه‌ی اتصال میز بازی به سیستم طراحی «تخته‌نرد پلی».
   این فایل فقط متغیرها و کلاس‌های کمکی موردنیاز کامپوننت‌های بازی را تأمین
   می‌کند؛ منطق و ساختار خود بازی از پروژه‌ی مرجع بدون تغییر منتقل شده است.
   ========================================================================== */

:root {
  --c-ivory: var(--ivory);
  --c-ivory-dim: var(--ivory-dim);
  --c-muted: var(--muted);
  --c-brass: var(--brass);
  --c-brass-bright: var(--brass-lit);
  --c-brass-deep: var(--brass-deep);
  --c-turquoise: var(--teal-deep);
  --c-turquoise-bright: var(--teal);
  --c-win: var(--green);
  --c-loss: var(--red);
  --c-panel: #1a1108;
  --c-panel-2: #24170d;

  --c-point-ivory: #e9d9b4;
  --c-point-ivory-2: #d5bd8c;
  --c-point-walnut: #4d2e16;
  --c-point-walnut-2: #38200f;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-1: var(--sh-1);
  --shadow-2: var(--sh-2);
  --shadow-brass: var(--ring), 0 6px 18px rgba(0, 0, 0, 0.45);
  --fs-base: 1rem;
}

/* کلاس‌های کمکی که کامپوننت‌های منتقل‌شده به آن‌ها تکیه دارند */
.btn-turquoise { background: linear-gradient(180deg, var(--teal), var(--teal-deep)); color: #05211e; }
.btn-turquoise:hover:not(:disabled) { filter: brightness(1.07); color: #05211e; }
.btn-secondary { background: transparent; border-color: rgba(201, 162, 74, 0.5); color: var(--brass-lit); }
.btn-danger { background: #7f2e26; color: var(--ivory); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.badge { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs-xs); font-weight: 700; padding: 0.22em 0.7em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); }
.badge-mode { color: var(--brass-lit); border-color: rgba(201,162,74,0.45); }
.badge-tutorial { color: var(--teal); border-color: rgba(63,191,174,0.45); }

.notice { border-radius: var(--r-md); padding: 0.8rem 1rem; font-size: var(--fs-sm); border: 1px solid; display: flex; gap: 0.6rem; }
.notice-warn { background: rgba(217,164,65,0.1); border-color: rgba(217,164,65,0.38); color: #f0dcae; }
.notice-info { background: rgba(63,191,174,0.1); border-color: rgba(63,191,174,0.35); color: #bdeee6; }

.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.text-center { text-align: center; }
.hidden { display: none !important; }

.modal-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(10,6,3,0.82); backdrop-filter: blur(4px); }
.modal-box { width: 100%; background: linear-gradient(160deg, #24170d, #1a1108); border: 1px solid rgba(201,162,74,0.4); border-radius: var(--r-xl); padding: 1.6rem; box-shadow: var(--sh-2); max-height: 92vh; overflow-y: auto; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 520px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-cell { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 0.6rem 0.7rem; text-align: center; }
.stat-cell .label { font-size: var(--fs-xs); color: var(--muted); }
.stat-cell .value { font-size: var(--fs-lg); font-weight: 800; color: var(--ivory); }
.stat-cell.win .value { color: var(--green); }
.stat-cell.loss .value { color: var(--red); }

.result-title { text-align: center; font-size: var(--fs-2xl); margin-bottom: 0.3rem; }
.result-title.win { color: var(--green); }
.result-title.loss { color: var(--red); }
.result-badge { display: inline-block; margin: 0 auto 0.6rem; }

/* پیشنهاد شریک تبلیغاتی داخل بازی */
.bonus-pop { position: relative; text-align: center; }
.bonus-close { position: absolute; top: -0.5rem; left: -0.3rem; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--muted); cursor: pointer; }
.bonus-title { margin: 0.1rem 0 0; font-size: var(--fs-xl); line-height: 1.7; }
.bonus-sub { margin: 0.6rem 0 0; font-size: var(--fs-sm); color: var(--ivory-dim); }
.bonus-ctas { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.bonus-ctas .btn { text-decoration: none; }
.bonus-disclosure { margin: 0.9rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
.bonus-inline { margin-top: 1.1rem; padding: 1rem; text-align: center; border: 1px solid rgba(201,162,74,0.32); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(201,162,74,0.1), rgba(201,162,74,0.03)); }
.bonus-inline-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }

/* رنگ‌بندی اختصاصی میز این دامنه: نمد سبز تیره پشت مثلث‌ها */
.bg-board { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px),
  linear-gradient(160deg, #14453d, #0e332d) !important;
}
.bg-shell { background: linear-gradient(160deg, #2a1a0e, #150d06); }


/* --- میز بازی (منتقل‌شده از پروژه‌ی مرجع، بدون تغییر) --- */
/* =========================================================================
   بازی تخته‌نرد — استایل میز بازی و رابط تعاملی
   ========================================================================= */

.bg-app { --stage-max: 980px; }

.bg-shell {
  background: linear-gradient(160deg, #2a1a0e, #17100a);
  border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: var(--r-xl);
  padding: 1rem;
  box-shadow: var(--shadow-2);
}
@media (min-width: 700px) { .bg-shell { padding: 1.4rem; } }

.bg-topbar {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 0.9rem;
}
.bg-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: 999px; padding: 0.3rem 0.8rem; font-size: var(--fs-sm); font-weight: 700;
}
.bg-chip .k { color: var(--c-muted); font-weight: 600; font-size: var(--fs-xs); }
.bg-chip .v { color: var(--c-brass-bright); }

/* ------------------------------------------------------------- player rows */
.bg-playerbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.4rem 0.7rem; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22);
  font-size: var(--fs-sm);
}
.bg-playerbar.active { border-color: var(--c-brass); box-shadow: 0 0 0 1px rgba(201,162,74,0.4) inset; }
.bg-playerbar .who { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.bg-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.3); }
.bg-dot.human { background: radial-gradient(circle at 35% 30%, #ffffff, #cdbf9e 75%); }
.bg-dot.computer { background: radial-gradient(circle at 35% 30%, #a9702f, #4c2a10 78%); }

/* ------------------------------------------------------------------ board */
.bg-stage { display: flex; gap: 0.5%; width: 100%; max-width: var(--stage-max); margin-inline: auto; direction: ltr; }

.bg-board {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  aspect-ratio: 11 / 9;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #6b4326, #4a2c15);
  border: clamp(6px, 1.6vw, 14px) solid #35200f;
  border-radius: 10px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.55), var(--shadow-1);
  overflow: hidden;
  position: relative;
}

.bg-row { flex: 1 1 50%; display: flex; }
.bg-quad { flex: 1 1 auto; display: flex; }
.bg-point { flex: 1 1 0; position: relative; background: transparent; border: 0; padding: 0; cursor: default;
  display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bg-point .tri { position: absolute; inset: 0; z-index: 0; }
.bg-row.top .bg-point .tri { clip-path: polygon(0 0, 100% 0, 50% 92%); }
.bg-row.bottom .bg-point .tri { clip-path: polygon(50% 8%, 0 100%, 100% 100%); }
.bg-point.ivory .tri { background: linear-gradient(180deg, var(--c-point-ivory), var(--c-point-ivory-2)); }
.bg-point.walnut .tri { background: linear-gradient(180deg, var(--c-point-walnut), var(--c-point-walnut-2)); }
.bg-row.bottom .bg-point.ivory .tri { background: linear-gradient(0deg, var(--c-point-ivory), var(--c-point-ivory-2)); }
.bg-row.bottom .bg-point.walnut .tri { background: linear-gradient(0deg, var(--c-point-walnut), var(--c-point-walnut-2)); }

.bg-point .pnum {
  position: absolute; z-index: 3; font-size: clamp(7px, 1.3vw, 11px);
  color: rgba(255,255,255,0.55); font-weight: 700; pointer-events: none;
}
.bg-row.top .bg-point .pnum { top: 1px; }
.bg-row.bottom .bg-point .pnum { bottom: 1px; }

/* checker stack inside a point */
.bg-checkers { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 2%; }
.bg-row.bottom .bg-checkers { flex-direction: column-reverse; padding-top: 0; padding-bottom: 2%; margin-top: auto; }

/* interactive states */
.bg-point.selectable { cursor: pointer; }
.bg-point.target { cursor: pointer; }
.bg-point.target::after {
  content: ""; position: absolute; z-index: 4; left: 50%; top: 50%;
  width: 34%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(70, 208, 191, 0.35);
  border: 2px solid var(--c-turquoise-bright); box-shadow: 0 0 12px rgba(70,208,191,0.6);
  animation: pulse 1.1s var(--ease) infinite;
}
.bg-point.selectable::before {
  content: ""; position: absolute; inset: 6% 12%; z-index: 1; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(230, 199, 102, 0.6) inset;
}
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* checker disc */
.bg-checker {
  width: 84%; aspect-ratio: 1; border-radius: 50%;
  margin-block: -6%; /* overlap when stacked */
  background-size: cover; background-position: center;
  box-shadow: 0 2px 3px rgba(0,0,0,0.5); position: relative;
}
.bg-checker:first-child { margin-block-start: 0; }
.bg-checker.human { background-image: url("/board/checker-white.webp"); border: 1px solid rgba(120,100,60,0.4); }
.bg-checker.computer { background-image: url("/board/checker-brown.webp"); }
.bg-checker.top { box-shadow: 0 2px 5px rgba(0,0,0,0.55); }
.bg-count {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.72); color: #fff; font-size: clamp(9px,1.6vw,13px);
  font-weight: 800; border-radius: 999px; padding: 0 5px; min-width: 18px; text-align: center;
  border: 1px solid rgba(255,255,255,0.25);
}
.bg-row.top .bg-count { top: 40%; }
.bg-row.bottom .bg-count { bottom: 40%; }

/* central bar */
.bg-bar {
  flex: 0 0 7%; background: linear-gradient(180deg, #2a1a0e, #1c1108);
  border-inline: clamp(3px,0.8vw,7px) solid #35200f;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative;
}
.bg-row.bottom .bg-bar { justify-content: flex-end; }
.bg-bar .bg-checkers { padding: 4% 0; }
.bg-bar.bartarget { cursor: pointer; box-shadow: 0 0 0 2px var(--c-turquoise-bright) inset; }
.bg-bar.barsel { box-shadow: 0 0 0 2px var(--c-brass-bright) inset; }

/* off trays */
.bg-offcol { flex: 0 0 8.5%; display: flex; flex-direction: column; gap: 0.5%; min-width: 34px; }
.bg-tray {
  flex: 1 1 50%; border: 2px solid #35200f; border-radius: 8px;
  background: linear-gradient(160deg, #23150a, #160d06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px; position: relative; gap: 2px;
}
.bg-tray.target { cursor: pointer; box-shadow: 0 0 0 2px var(--c-turquoise-bright) inset; }
.bg-tray .off-bar { width: 80%; height: 7%; min-height: 4px; border-radius: 3px; }
.bg-tray .off-bar.human { background: linear-gradient(90deg, #f0e6cd, #cdbf9e); }
.bg-tray .off-bar.computer { background: linear-gradient(90deg, #a9702f, #5c3316); }
.bg-tray .off-label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 700; }
.bg-tray .off-num { font-size: var(--fs-lg); font-weight: 800; color: var(--c-ivory); }

/* --------------------------------------------------------------- dice */
.bg-dicebox { display: flex; align-items: center; gap: 0.5rem; }
.bg-die {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(160deg, #f6efdc, #d9caa6);
  box-shadow: var(--shadow-1), inset 0 -3px 6px rgba(0,0,0,0.2);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 6px; gap: 1px; position: relative;
}
.bg-die.rolling { animation: shake 0.5s var(--ease); }
.bg-die.used { opacity: 0.4; filter: grayscale(0.6); }
.bg-die.doubles { box-shadow: 0 0 0 2px var(--c-turquoise-bright), var(--shadow-1); }
.bg-die .pip { width: 8px; height: 8px; border-radius: 50%; background: #2a1a0e; align-self: center; justify-self: center; }
@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) translateY(-3px); } 75% { transform: rotate(14deg) translateY(2px); } }

/* pip position map for a die face */
.bg-die[data-v="1"] .pip:nth-child(1) { grid-area: 2 / 2; }
.bg-die .pip { display: none; }
.bg-die[data-v="1"] .p5, .bg-die[data-v="3"] .p5, .bg-die[data-v="5"] .p5 { display: block; grid-area: 2 / 2; }
.bg-die[data-v="2"] .p1, .bg-die[data-v="3"] .p1, .bg-die[data-v="4"] .p1, .bg-die[data-v="5"] .p1, .bg-die[data-v="6"] .p1 { display: block; grid-area: 1 / 1; }
.bg-die[data-v="2"] .p9, .bg-die[data-v="3"] .p9, .bg-die[data-v="4"] .p9, .bg-die[data-v="5"] .p9, .bg-die[data-v="6"] .p9 { display: block; grid-area: 3 / 3; }
.bg-die[data-v="4"] .p3, .bg-die[data-v="5"] .p3, .bg-die[data-v="6"] .p3 { display: block; grid-area: 1 / 3; }
.bg-die[data-v="4"] .p7, .bg-die[data-v="5"] .p7, .bg-die[data-v="6"] .p7 { display: block; grid-area: 3 / 1; }
.bg-die[data-v="6"] .p4 { display: block; grid-area: 2 / 1; }
.bg-die[data-v="6"] .p6 { display: block; grid-area: 2 / 3; }

/* ------------------------------------------------------------- controls */
.bg-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 1rem; }
.bg-actionbar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }

.bg-cube {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(160deg, #efe6cf, #cbbb95); color: #2a1a0e; font-weight: 900; font-size: 1.1rem;
  box-shadow: var(--shadow-1); border: 1px solid rgba(0,0,0,0.2);
}

/* ------------------------------------------------------------- side panels */
.bg-layout { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .bg-layout { grid-template-columns: 260px 1fr 260px; align-items: start; } }
.bg-panel { background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 0.8rem; }
.bg-panel h4 { font-size: var(--fs-sm); color: var(--c-brass); margin-bottom: 0.5rem; }
.bg-loglist { list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); color: var(--c-ivory-dim); max-height: 220px; overflow-y: auto; }
.bg-loglist li { padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.bg-dicehist { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bg-dicehist .hd { font-size: var(--fs-xs); background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,74,0.2); border-radius: 6px; padding: 1px 6px; }

.bg-status { text-align: center; min-height: 1.5em; color: var(--c-ivory); font-weight: 600; margin: 0.4rem 0; }
.bg-hint { border-radius: var(--r-md); border: 1px solid rgba(70,208,191,0.4); background: rgba(47,179,163,0.1); padding: 0.8rem 1rem; }
.bg-hint h4 { color: var(--c-turquoise-bright); margin-bottom: 0.3rem; }

/* --------------------------------------------------------------- menu */
.bg-menu { max-width: 640px; margin-inline: auto; }
.bg-optgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; }
.bg-opt {
  border: 1px solid rgba(201,162,74,0.3); background: rgba(0,0,0,0.24); color: var(--c-ivory-dim);
  border-radius: var(--r-md); padding: 0.7rem; cursor: pointer; font-family: inherit; font-weight: 700;
  min-height: 48px; transition: all 0.15s var(--ease);
}
.bg-opt:hover { border-color: var(--c-brass); color: var(--c-ivory); }
.bg-opt.selected { background: rgba(201,162,74,0.16); border-color: var(--c-brass-bright); color: var(--c-ivory); box-shadow: var(--shadow-brass); }
.bg-mode-card { text-align: start; }
.bg-mode-card small { display: block; color: var(--c-muted); font-weight: 600; margin-top: 0.2rem; font-size: var(--fs-xs); }

/* settings */
.bg-setrow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.bg-setrow label { font-weight: 600; color: var(--c-ivory-dim); font-size: var(--fs-sm); }
.bg-select { background: #1c1108; color: var(--c-ivory); border: 1px solid rgba(201,162,74,0.3); border-radius: 8px; padding: 0.4rem 0.6rem; font-family: inherit; min-height: 40px; }
.bg-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid rgba(201,162,74,0.3); background: rgba(0,0,0,0.4); cursor: pointer; flex: 0 0 auto; }
.bg-switch .knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-muted); transition: all 0.15s var(--ease); }
.bg-switch.on { background: rgba(47,179,163,0.3); border-color: var(--c-turquoise); }
.bg-switch.on .knob { inset-inline-start: 22px; background: var(--c-turquoise-bright); }

.result-title { text-align: center; font-size: var(--fs-2xl); margin-bottom: 0.3rem; }
.result-title.win { color: var(--c-win); }
.result-title.loss { color: var(--c-loss); }
.result-badge { display: inline-block; margin: 0 auto 0.6rem; }