/* =========================================================================
   آزمایشگاه باکارات — پوستهٔ میز تمرینی
   فقط در صفحه‌هایی بارگذاری می‌شود که میز یا نمایش کوچک آن را دارند.

   میز عمداً تیره‌تر از بقیهٔ سایت است: در Material 3 این کار یک «surface»
   جداگانه می‌سازد و باعث می‌شود چشم بداند اینجا ناحیهٔ تعاملی است، نه متن.
   رنگ‌ها از همان پالت برند می‌آیند (زرشکی تیره + زغالی) و هیچ درخشش یا
   نئونی در کار نیست.
   ========================================================================= */

/* ---------- سربرگ فشردهٔ صفحهٔ بازی ---------- */
/* هدف: میز باید تا حد ممکن نزدیک بالای صفحه بماند. */
.play-head { padding-block: 0.5rem 0; }
.play-head h1 { font: var(--md-sys-typescale-headline-large); margin-bottom: 0.3em; }
.play-head .lede { font: var(--md-sys-typescale-body-medium); margin-bottom: 0; }
.play-stage { padding-block: 1rem 2rem; }

/* ---------- ظرف میز ---------- */
.bl-table {
  --felt: #1c1b1d;
  --felt-deep: #141315;
  --felt-edge: #302c31;
  --wine: #4d1626;
  --wine-soft: rgba(196, 122, 141, 0.16);
  --brass: #d8b47a;
  --brass-dim: rgba(216, 180, 122, 0.28);
  --paper: #f2eee9;
  --paper-dim: #a9a29b;
  --p-tint: #7fb0e0;
  --b-tint: #e39a9a;
  --t-tint: #79cdae;
  --up: #7ed3ac;
  --down: #f0a19c;

  max-width: 1000px;
  margin-inline: auto;
  background: linear-gradient(168deg, #232125, #171618);
  border: 1px solid var(--felt-edge);
  border-radius: var(--md-sys-shape-xl);
  box-shadow: var(--md-sys-elevation-3);
  color: var(--paper);
  padding: 0.85rem;
  overflow: hidden;
}
@media (min-width: 640px) {
  .bl-table { padding: 1.25rem; }
}

/* ---------- نوار حالت تمرینی ---------- */
.bl-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  background: var(--wine-soft);
  border: 1px solid var(--brass-dim);
  border-radius: var(--md-sys-shape-md);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.9rem;
}
.bl-banner__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--brass);
  color: #1c1408;
  border-radius: var(--md-sys-shape-full);
  padding: 0.3em 0.95em;
  font: var(--md-sys-typescale-label-medium);
}
.bl-banner__text {
  margin: 0;
  font: var(--md-sys-typescale-body-small);
  color: var(--paper-dim);
}

/* ---------- نوار اعتبار و کلیدها ---------- */
.bl-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.bl-purse { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bl-purse__cell {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--felt-edge);
  border-radius: var(--md-sys-shape-md);
  padding: 0.4rem 0.75rem;
  min-width: 92px;
}
.bl-purse__label {
  display: block;
  font: var(--md-sys-typescale-label-small);
  color: var(--paper-dim);
}
.bl-purse__value {
  display: block;
  font: var(--md-sys-typescale-title-medium);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.bl-purse__cell--lead .bl-purse__value {
  font: var(--md-sys-typescale-headline-small);
  color: var(--brass);
}
.bl-purse__cell--wide { display: none; }
@media (min-width: 560px) {
  .bl-purse__cell--wide { display: block; }
}

.bl-switches { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bl-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0.35em 0.9em;
  border-radius: var(--md-sys-shape-full);
  border: 1px solid var(--felt-edge);
  background: rgba(0, 0, 0, 0.28);
  color: var(--paper-dim);
  font: var(--md-sys-typescale-label-medium);
  cursor: pointer;
  transition: background var(--md-sys-motion-short) var(--md-sys-motion-standard),
    color var(--md-sys-motion-short) var(--md-sys-motion-standard);
}
.bl-switch:hover { background: rgba(255, 255, 255, 0.06); color: var(--paper); }
.bl-switch.is-on {
  background: var(--brass);
  border-color: var(--brass);
  color: #1c1408;
}
.bl-switch__icon { font-size: 1em; line-height: 1; }

/* ---------- چیدمان اصلی ---------- */
.bl-layout { display: grid; gap: 0.9rem; }
@media (min-width: 900px) {
  .bl-layout { grid-template-columns: minmax(0, 1fr) 264px; gap: 1.1rem; align-items: start; }
}
.bl-main { min-width: 0; }

/* ---------- سطح میز ---------- */
.bl-felt {
  background: radial-gradient(120% 100% at 50% 0%, #2a2126 0%, var(--felt) 55%, var(--felt-deep) 100%);
  border: 1px solid var(--felt-edge);
  border-radius: var(--md-sys-shape-lg);
  padding: 0.85rem 0.7rem 1rem;
}
@media (min-width: 640px) {
  .bl-felt { padding: 1.2rem 1.1rem 1.3rem; }
}

/* ---------- دو دست ---------- */
.bl-seats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
@media (min-width: 640px) { .bl-seats { gap: 1rem; } }

.bl-seat {
  position: relative;
  min-width: 0;
  border-radius: var(--md-sys-shape-md);
  border: 1px solid transparent;
  padding: 0.55rem 0.5rem 0.7rem;
  transition: border-color var(--md-sys-motion-medium) var(--md-sys-motion-standard),
    background var(--md-sys-motion-medium) var(--md-sys-motion-standard);
}
.bl-seat--player { background: rgba(127, 176, 224, 0.07); }
.bl-seat--banker { background: rgba(227, 154, 154, 0.07); }
.bl-seat.is-winner { border-color: var(--brass); background: rgba(216, 180, 122, 0.12); }
.bl-seat.is-tie { border-color: var(--t-tint); }

.bl-seat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.bl-seat__name {
  margin: 0;
  font: var(--md-sys-typescale-title-small);
  color: var(--paper);
  min-width: 0;
}
.bl-seat__name span {
  display: block;
  font: var(--md-sys-typescale-label-small);
  font-weight: 400;
  color: var(--paper-dim);
  letter-spacing: 0.06em;
}
.bl-seat--player .bl-seat__name { color: var(--p-tint); }
.bl-seat--banker .bl-seat__name { color: var(--b-tint); }
.bl-seat__score {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: var(--md-sys-shape-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--felt-edge);
  font: var(--md-sys-typescale-headline-small);
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.bl-seat__cards {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  min-height: 76px;
}
@media (min-width: 640px) {
  .bl-seat__cards { gap: 0.4rem; min-height: 104px; }
}
.bl-seat__flag {
  display: none;
  margin-top: 0.5rem;
  font: var(--md-sys-typescale-label-small);
  color: var(--brass);
}
.bl-seat.is-winner .bl-seat__flag { display: block; }

/* ---------- کارت ---------- */
.bl-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(46px, 12.5vw, 68px);
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: #fbf8f4;
  color: #1b1a19;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bl-card.is-red { color: #b3242c; }
.bl-card.is-black { color: #1f2a33; }
.bl-card.is-blank {
  background: repeating-linear-gradient(135deg, #26232a 0 5px, #201d24 5px 10px);
  box-shadow: inset 0 0 0 1px var(--felt-edge);
}
.bl-card__weave {
  width: 62%;
  height: 62%;
  border-radius: 4px;
  border: 1px solid rgba(216, 180, 122, 0.18);
}
.bl-card__corner {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 4px;
  display: grid;
  justify-items: center;
  line-height: 1;
  font-size: clamp(0.6rem, 1.9vw, 0.78rem);
  font-weight: 700;
  direction: ltr;
}
.bl-card__corner--end {
  inset-block-start: auto;
  inset-inline-start: auto;
  inset-block-end: 3px;
  inset-inline-end: 4px;
  transform: rotate(180deg);
}
.bl-card__corner i { font-style: normal; font-size: 0.9em; }
.bl-card__pip {
  font-size: clamp(1.15rem, 4vw, 1.7rem);
  line-height: 1;
}
.bl-card.is-dealt { animation: bl-deal 260ms var(--md-sys-motion-standard) both; }
@keyframes bl-deal {
  from { opacity: 0; transform: translateY(-8px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ---------- پیام وضعیت ---------- */
.bl-status {
  display: grid;
  gap: 0.15rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--felt-edge);
  border-radius: var(--md-sys-shape-md);
  padding: 0.7rem 0.85rem;
  margin: 0 0 0.9rem;
  min-height: 74px;
  align-content: center;
}
.bl-status__headline {
  font: var(--md-sys-typescale-title-small);
  color: var(--paper);
}
.bl-status__headline.is-win { color: var(--up); }
.bl-status__headline.is-lose { color: var(--down); }
.bl-status__headline.is-push { color: var(--t-tint); }
.bl-status__detail {
  font: var(--md-sys-typescale-body-small);
  color: var(--paper-dim);
}

/* ---------- خانه‌های شرط ---------- */
.bl-spots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
@media (min-width: 640px) { .bl-spots { gap: 0.6rem; } }
.bl-spots--side {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0.4rem;
}
@media (min-width: 640px) { .bl-spots--side { margin-top: 0.6rem; } }

.bl-spot {
  position: relative;
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  align-content: center;
  min-height: 78px;
  padding: 0.5rem 0.3rem;
  border-radius: var(--md-sys-shape-md);
  border: 1.5px solid var(--felt-edge);
  background: rgba(0, 0, 0, 0.3);
  color: var(--paper);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-short) var(--md-sys-motion-standard),
    background var(--md-sys-motion-short) var(--md-sys-motion-standard),
    transform var(--md-sys-motion-short) var(--md-sys-motion-standard);
}
.bl-spot:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.bl-spot:active:not(:disabled) { transform: scale(0.985); }
.bl-spot:disabled { cursor: default; opacity: 0.72; }
.bl-spot--player { border-color: rgba(127, 176, 224, 0.4); }
.bl-spot--banker { border-color: rgba(227, 154, 154, 0.4); }
.bl-spot--tie { border-color: rgba(121, 205, 174, 0.4); }
.bl-spot--small { min-height: 58px; }

.bl-spot__title { font: var(--md-sys-typescale-title-small); }
.bl-spot--player .bl-spot__title { color: var(--p-tint); }
.bl-spot--banker .bl-spot__title { color: var(--b-tint); }
.bl-spot--tie .bl-spot__title { color: var(--t-tint); }
.bl-spot__latin {
  font: var(--md-sys-typescale-label-small);
  color: var(--paper-dim);
  letter-spacing: 0.08em;
}
.bl-spot__pay { font: var(--md-sys-typescale-label-small); color: var(--paper-dim); }
.bl-spot__amount {
  min-height: 1.4em;
  font: var(--md-sys-typescale-label-large);
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.bl-spot.is-staked { background: rgba(216, 180, 122, 0.14); border-color: var(--brass-dim); }
.bl-spot.is-won {
  border-color: var(--brass);
  background: rgba(216, 180, 122, 0.24);
  box-shadow: 0 0 0 1px var(--brass) inset;
}

/* ---------- کنسول کنترل ---------- */
.bl-console { margin-top: 0.9rem; display: grid; gap: 0.7rem; }

.bl-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.bl-rail__label {
  font: var(--md-sys-typescale-label-medium);
  color: var(--paper-dim);
  margin-inline-end: 0.2rem;
}
.bl-chip {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--md-sys-shape-full);
  border: 2px dashed rgba(216, 180, 122, 0.35);
  background: rgba(0, 0, 0, 0.32);
  color: var(--paper);
  font: var(--md-sys-typescale-label-large);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--md-sys-motion-short) var(--md-sys-motion-standard),
    background var(--md-sys-motion-short) var(--md-sys-motion-standard),
    border-color var(--md-sys-motion-short) var(--md-sys-motion-standard);
}
.bl-chip:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.bl-chip:disabled { opacity: 0.5; cursor: default; }
.bl-chip.is-selected {
  background: var(--brass);
  border-color: #fff;
  border-style: solid;
  color: #1c1408;
  transform: translateY(-2px);
}
/* روی صفحه‌های خیلی باریک هر پنج ژتون باید در یک ردیف جا شوند */
@media (max-width: 400px) {
  .bl-rail { gap: 0.35rem; }
  .bl-rail__label { flex-basis: 100%; margin-bottom: -0.1rem; }
  .bl-chip { width: 48px; height: 48px; font: var(--md-sys-typescale-label-medium); }
}

.bl-acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
@media (min-width: 640px) {
  .bl-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* دکمه‌های Outlined روی سطح تیره باید کنتراست خودشان را داشته باشند */
.bl-table .m3-btn--outlined {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--felt-edge);
  font: var(--md-sys-typescale-label-medium);
  padding-inline: 0.8em;
}
.bl-table .m3-btn--outlined:hover { color: var(--paper); }
.bl-table .m3-btn--text { color: var(--brass); }
.bl-table .m3-btn--tonal {
  background: rgba(216, 180, 122, 0.18);
  color: var(--brass);
}
.bl-table .m3-btn--tonal:hover { color: var(--brass); }

.bl-deal {
  width: 100%;
  min-height: 54px;
  font: var(--md-sys-typescale-title-medium);
  background: var(--brass);
  color: #1c1408;
}
.bl-deal:hover { background: #e3c391; color: #1c1408; }

.bl-empty {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
  background: rgba(163, 35, 28, 0.16);
  border: 1px solid rgba(227, 154, 154, 0.35);
  border-radius: var(--md-sys-shape-md);
  padding: 0.9rem;
}
.bl-empty p { margin: 0; font: var(--md-sys-typescale-body-medium); }

.bl-note {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.4rem;
  font: var(--md-sys-typescale-body-small);
  color: var(--paper-dim);
}
.bl-note p { margin: 0; }
.bl-note a { color: var(--brass); }

.bl-noscript {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: var(--md-sys-shape-md);
  background: rgba(163, 35, 28, 0.2);
  font: var(--md-sys-typescale-body-medium);
}
.bl-noscript a { color: var(--brass); }

/* ---------- پنل کناری ---------- */
.bl-side { display: grid; gap: 0.7rem; align-content: start; }
@media (max-width: 899px) {
  .bl-side { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
.bl-card-panel {
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--felt-edge);
  border-radius: var(--md-sys-shape-md);
  padding: 0.85rem 0.9rem;
}
.bl-card-panel__title {
  margin: 0 0 0.6rem;
  font: var(--md-sys-typescale-title-small);
  color: var(--paper);
}
.bl-card-panel__empty,
.bl-card-panel__hint {
  margin: 0.55rem 0 0;
  font: var(--md-sys-typescale-body-small);
  color: var(--paper-dim);
}

/* مسیر نتایج */
.bl-road {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-height: 108px;
  overflow-y: auto;
}
.bl-bead {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--md-sys-shape-full);
  font-size: 0.7rem;
  font-weight: 700;
  color: #12100f;
  direction: ltr;
}
.bl-bead.is-player { background: var(--p-tint); }
.bl-bead.is-banker { background: var(--b-tint); }
.bl-bead.is-tie { background: var(--t-tint); }

.bl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  font: var(--md-sys-typescale-label-small);
  color: var(--paper-dim);
}
.bl-legend li { display: flex; align-items: center; gap: 0.35rem; margin: 0; }

/* آمار */
.bl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.bl-stat { text-align: center; }
.bl-stat__value {
  display: block;
  font: var(--md-sys-typescale-title-medium);
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.bl-stat__value.is-up { color: var(--up); }
.bl-stat__value.is-down { color: var(--down); }
.bl-stat__label { font: var(--md-sys-typescale-label-small); color: var(--paper-dim); }

/* تاریخچه */
.bl-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.bl-log__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: var(--md-sys-shape-xs);
  background: rgba(255, 255, 255, 0.04);
  font: var(--md-sys-typescale-body-small);
}
.bl-log__who { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.bl-log__score { color: var(--paper-dim); font-variant-numeric: tabular-nums; direction: ltr; }
.bl-log__net { font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-log__net.is-up { color: var(--up); }
.bl-log__net.is-down { color: var(--down); }
.bl-log__net.is-flat { color: var(--paper-dim); }
.bl-pill {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: var(--md-sys-shape-full);
  font-size: 0.72rem;
  font-weight: 700;
  color: #12100f;
}
.bl-pill.is-player { background: var(--p-tint); }
.bl-pill.is-banker { background: var(--b-tint); }
.bl-pill.is-tie { background: var(--t-tint); }

.bl-credit-acts { display: grid; gap: 0.4rem; }

/* ---------- نمایش کوچک صفحهٔ اصلی ---------- */
.bl-demo {
  --felt-edge: #302c31;
  --paper: #f2eee9;
  --paper-dim: #a9a29b;
  --brass: #d8b47a;
  --p-tint: #7fb0e0;
  --b-tint: #e39a9a;
  --t-tint: #79cdae;

  background: linear-gradient(168deg, #232125, #171618);
  border: 1px solid var(--felt-edge);
  border-radius: var(--md-sys-shape-lg);
  padding: 1rem;
  color: var(--paper);
}
.bl-demo__felt { display: grid; gap: 0.6rem; }
.bl-demo__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 78px;
}
.bl-demo__who {
  flex-shrink: 0;
  width: 4.5em;
  font: var(--md-sys-typescale-label-large);
  color: var(--paper-dim);
}
.bl-demo__cards { display: flex; gap: 0.3rem; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.bl-demo__score {
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
  font: var(--md-sys-typescale-headline-small);
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}
.bl-demo__result {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--felt-edge);
  font: var(--md-sys-typescale-body-small);
  color: var(--paper-dim);
}
.bl-demo__result.is-player { color: var(--p-tint); }
.bl-demo__result.is-banker { color: var(--b-tint); }
.bl-demo__result.is-tie { color: var(--t-tint); }
.bl-demo__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.bl-demo__foot .m3-btn { flex: 1 1 170px; }
.bl-demo .m3-btn--tonal { background: rgba(216, 180, 122, 0.18); color: var(--brass); }
.bl-demo .m3-btn--tonal:hover { color: var(--brass); }
.bl-demo .m3-btn--filled { background: var(--brass); color: #1c1408; }
.bl-demo .m3-btn--filled:hover { background: #e3c391; color: #1c1408; }