/* ════════════════════════════════════════════════════════════════════
   الطاولة — هوية «الجوز الفاخر»
   إطار جوز طبيعي × أوتاد عنبرية/فيروزية × أحجار عاجية وأبنوس × نرد حمراء
   كلاسات معزولة bw- — تعمل داخل المنصة ومستقلة
   ════════════════════════════════════════════════════════════════════ */

.bw-stage {
  --bw-frame-1: #6b4423;     /* جوز فاتح */
  --bw-frame-2: #3a2410;     /* جوز غامق */
  --bw-field: #e9d9b4;       /* حقل رملّي */
  --bw-field-2: #d9c49a;
  --bw-tri-a: #c07830;       /* أوتاد عنبرية */
  --bw-tri-b: #1f4e52;       /* أوتاد فيروزية داكنة */
  --bw-ivory: #f4ecd8;
  --bw-ebony: #241c14;
  --bw-red: #b8402e;         /* النرد التقليدية */
  --bw-brass: #c89a4e;
  --bw-goldtext: #f2d489;
  --bw-ink: #f2e8d0;
  --bw-green-ok: #43c78f;

  position: relative; display: block; height: 100%; width: 100%; max-width: 100%; margin: 0;
  background:
    radial-gradient(110% 90% at 50% 0%, #2c1d10 0%, #170e06 66%, #0d0804 100%);
  overflow: hidden; color: var(--bw-ink); font-family: inherit;
}
/* داخل المنصة: المسرح يرث ارتفاع الحاوية (app-fs ملء الشاشة) — fitGameStage
   يقيس offsetWidth/Height ويطبّق scale؛ ارتفاع 100dvh هنا كان يقصّ أسفل الشاشة */
#gamePageBody .bw-stage { height: 100%; }

.bw-screen { display: none; position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.bw-screen.bw-screen-active { display: block; }

/* ══════════════ القائمة — لوح جوز ══════════════ */
.bw-menu-decor {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 30% at 50% 0%, rgba(200, 154, 78, 0.12), transparent 70%),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.015) 0 3px, transparent 3px 11px);
}
.bw-menu-card {
  position: relative; max-width: 400px; margin: 4vh auto 20px; padding: 22px 22px 24px;
  background:
    linear-gradient(160deg, rgba(107, 68, 35, 0.35), rgba(40, 24, 10, 0.6)),
    linear-gradient(180deg, #1c1208, #120b05);
  border: 2px solid rgba(200, 154, 78, 0.5);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(242, 212, 137, 0.1), inset 0 0 44px rgba(0, 0, 0, 0.4), 0 18px 50px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.bw-logo { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.bw-logo-die {
  width: 40px; height: 40px; border-radius: 9px; position: relative;
  background: linear-gradient(160deg, var(--bw-ivory), #e2d5b4);
  border: 1px solid rgba(90, 66, 30, 0.5);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 15%; gap: 5%;
  transform: rotate(-9deg);
}
.bw-logo-die.alt { transform: rotate(8deg) translateY(4px); background: linear-gradient(160deg, #d86a4e, var(--bw-red)); }
/* النقط: خلية مطفأة شفافة، و«on» نقطة ظاهرة — داخل شبكة 3×3 (padding 15%) */
.bp { border-radius: 50%; background: rgba(51, 32, 12, 0); display: block; }
.bp.on { background: #33200c; }
.bw-logo-die.alt .bp.on { background: rgba(255, 245, 230, 0.92); }
.bw-title { margin: 2px 0 0; font-size: 30px; font-weight: 900; letter-spacing: 1px; color: var(--bw-goldtext); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.bw-tagline { margin: 4px 0 16px; color: #c4b090; font-size: 12.5px; }

.bw-field { margin: 12px 0; text-align: right; }
.bw-flabel { font-size: 12px; font-weight: 800; color: #d3bd92; margin-bottom: 6px; }
.bw-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.bw-segbtn {
  flex: 1 1 auto; min-width: 70px; padding: 9px 10px; cursor: pointer;
  background: rgba(14, 9, 4, 0.7); color: #c4b090;
  border: 1px solid rgba(200, 154, 78, 0.35); border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; transition: all 0.16s ease;
}
.bw-segbtn:hover { border-color: rgba(200, 154, 78, 0.7); color: #ecdfba; }
.bw-segbtn.selected {
  background: linear-gradient(150deg, rgba(192, 120, 48, 0.3), rgba(31, 78, 82, 0.25));
  border-color: var(--bw-brass); color: var(--bw-goldtext);
  box-shadow: 0 0 12px rgba(192, 120, 48, 0.22), inset 0 0 0 1px rgba(242, 212, 137, 0.15);
}

.bw-betrow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bw-betbtn {
  width: 38px; height: 38px; border-radius: 50%; font-size: 19px; cursor: pointer;
  background: rgba(14, 9, 4, 0.8); color: var(--bw-goldtext);
  border: 1px solid rgba(200, 154, 78, 0.5); font-family: inherit;
}
.bw-betfield {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(14, 9, 4, 0.85); border: 1px solid rgba(200, 154, 78, 0.45);
  border-radius: 20px; padding: 6px 14px; color: #f4e9c8;
}
.bw-coin::before { content: '🪙'; font-size: 13px; }
.bw-betinput { width: 64px; background: none; border: none; outline: none; color: #f4e9c8; font-family: inherit; font-size: 15px; font-weight: 800; text-align: center; }
.bw-bethint { margin-top: 7px; color: #a89470; font-size: 11px; text-align: center; }

.bw-go {
  width: 100%; margin-top: 14px; padding: 13px 18px; cursor: pointer;
  background: linear-gradient(135deg, #c07830, #8c5220);
  color: #fff3e0; border: none; border-radius: 10px;
  font-family: inherit; font-size: 16px; font-weight: 900;
  box-shadow: 0 5px 18px rgba(192, 120, 48, 0.32);
  transition: transform 0.14s ease, box-shadow 0.2s;
}
.bw-go:hover { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(192, 120, 48, 0.45); }
.bw-go:active { transform: translateY(1px); }
.bw-go.danger { background: linear-gradient(135deg, #b4523f, #8c3324); color: #ffe9dd; }
.bw-resume {
  width: 100%; margin-top: 9px; padding: 11px 18px; cursor: pointer;
  background: rgba(14, 9, 4, 0.8); color: var(--bw-goldtext);
  border: 1px solid rgba(200, 154, 78, 0.55); border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 800;
}
.bw-ruleslink { margin-top: 14px; background: none; border: none; cursor: pointer; color: #a89470; font-family: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.bw-ruleslink:hover { color: var(--bw-goldtext); }

/* ══════════════ الطبقات ══════════════ */
.bw-layer {
  position: absolute; inset: 0; z-index: 30; padding: 16px;
  background: rgba(10, 6, 3, 0.74); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.bw-sheet {
  width: 100%; max-width: 380px; padding: 22px 20px;
  background: linear-gradient(165deg, #241609, #140c05);
  border: 2px solid rgba(200, 154, 78, 0.55); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(242, 212, 137, 0.1);
  text-align: center; max-height: 92%; overflow-y: auto;
}
.bw-sheet.small { max-width: 330px; }
.bw-sheet-em { font-size: 44px; margin-bottom: 4px; }
.bw-sheet-title { font-size: 18px; font-weight: 900; color: var(--bw-goldtext); margin-bottom: 10px; }
.bw-overtype { font-size: 13px; font-weight: 800; color: #ecb46a; margin-bottom: 4px; }
.bw-askrow { display: flex; gap: 8px; }
.bw-askrow .bw-go, .bw-askrow .bw-resume { margin-top: 0; }
.bw-rules-doc { text-align: right; }
.bw-rule { font-size: 12.5px; line-height: 1.9; color: #dccfae; padding: 8px 2px; border-bottom: 1px dashed rgba(200, 154, 78, 0.25); }
.bw-rule b { color: var(--bw-goldtext); }
.bw-scorerows { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 4px; }
.bw-srow {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(12, 8, 4, 0.7); border: 1px solid rgba(200, 154, 78, 0.25);
  border-radius: 8px; padding: 8px 13px; font-size: 13px; color: var(--bw-ink);
}
.bw-srow b { color: #f2d489; font-size: 14px; }
.bw-amount { font-size: 22px; font-weight: 900; margin: 2px 0 6px; }
.bw-amount .plus { color: var(--bw-green-ok); }

.bw-toast {
  position: fixed; top: 54px; left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 60; background: rgba(22, 14, 7, 0.95); color: #f2e6c4;
  border: 1px solid rgba(200, 154, 78, 0.5); border-radius: 10px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 800;
  opacity: 0; pointer-events: none; transition: all 0.22s ease;
}
.bw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bw-toast.err { color: #f0b3a6; border-color: rgba(200, 90, 70, 0.55); }

/* ══════════════ شاشة اللعب ══════════════ */
#bwPlay { display: none; flex-direction: column; padding: 8px; gap: 6px; }
#bwPlay.bw-screen-active { display: flex; }

/* HUD */
.bw-hud {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(180deg, #241608, #150d05);
  border: 1px solid rgba(200, 154, 78, 0.45); border-radius: 10px; padding: 5px 10px;
}
.bw-seat { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bw-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, rgba(192, 120, 48, 0.4), rgba(15, 9, 4, 0.9));
  border: 1.5px solid rgba(200, 154, 78, 0.55); color: var(--bw-goldtext);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.bw-seatmeta { display: flex; flex-direction: column; min-width: 0; }
.bw-seatmeta.end { align-items: flex-end; }
.bw-seatrow { display: flex; align-items: center; gap: 8px; }
.bw-seatrow.end { flex-direction: row-reverse; }
.bw-seatname { font-size: 11.5px; font-weight: 800; color: #ecdfba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.bw-seatscore { font-size: 17px; font-weight: 900; color: var(--bw-goldtext); line-height: 1.1; }
.bw-seatpip { font-size: 9.5px; color: #a89470; font-weight: 700; white-space: nowrap; }
.bw-hudmid { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; flex: 1; }
.bw-hudmatch { font-size: 10px; color: #a89470; font-weight: 700; white-space: nowrap; }
.bw-hudstatus { font-size: 12px; font-weight: 800; color: #f2e6c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ══════════════ الرقعة ══════════════ */
.bw-board {
  position: relative; width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(160deg, var(--bw-frame-1) 0%, #4a2e15 40%, var(--bw-frame-2) 100%);
  border: 3px solid var(--bw-brass); border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(30, 17, 6, 0.9), inset 0 0 46px rgba(0, 0, 0, 0.45), 0 0 26px rgba(200, 154, 78, 0.16);
  padding: 7px;
}
.bw-points {
  flex: 1 1 auto; min-width: 0; display: grid;
  grid-template-columns: repeat(6, 1fr) 26px repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  background: linear-gradient(180deg, var(--bw-field), var(--bw-field-2));
  border-radius: 6px;
  box-shadow: inset 0 0 24px rgba(90, 60, 20, 0.35);
  overflow: hidden;
}
.bw-col { position: relative; cursor: pointer; }
.bw-tri { position: absolute; inset-inline: 0; height: 60%; pointer-events: none; clip-path: polygon(9% 0, 91% 0, 50% 97%); }
.bw-col.top .bw-tri { top: 0; }
.bw-col.bot .bw-tri { bottom: 0; transform: scaleY(-1); }
/* التناوب: عنبري/فيروزي */
.bw-col:nth-child(odd) .bw-tri { background: linear-gradient(180deg, var(--bw-tri-a), rgba(150, 88, 30, 0.85)); }
.bw-col:nth-child(even) .bw-tri { background: linear-gradient(180deg, var(--bw-tri-b), rgba(22, 58, 60, 0.9)); }
.bw-col.bot .bw-tri { filter: brightness(0.94); }
.bw-colnum { position: absolute; z-index: 1; font-size: 8px; color: rgba(60, 40, 16, 0.55); font-weight: 800; inset-inline: 0; text-align: center; }
.bw-col.top .bw-colnum { top: 1px; }
.bw-col.bot .bw-colnum { bottom: 1px; }

.bw-chks {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5%; padding: 2px;
}
.bw-col.top .bw-chks { justify-content: flex-start; padding-top: 2px; }
.bw-col.bot .bw-chks { justify-content: flex-end; padding-bottom: 2px; }

/* الأحجار */
.bw-chk {
  width: 86%; max-width: 46px; aspect-ratio: 1; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.bw-chk.sq { margin-top: -56%; }
.bw-chk.w {
  background: radial-gradient(circle at 34% 30%, #fffdf4 0%, var(--bw-ivory) 45%, #cdbb92 100%);
  border: 1px solid rgba(90, 66, 30, 0.6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -2px 3px rgba(120, 90, 40, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.8);
  color: #4a3213;
}
.bw-chk.b {
  background: radial-gradient(circle at 34% 30%, #4c4034 0%, var(--bw-ebony) 48%, #0d0a06 100%);
  border: 1px solid rgba(200, 154, 78, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 2px 2px rgba(242, 212, 137, 0.18);
  color: var(--bw-goldtext);
}
.bw-chk span { position: relative; z-index: 2; }

/* الأدمن */
.bw-bar {
  border-radius: 8px; cursor: pointer; position: relative; z-index: 2;
  background: linear-gradient(180deg, #4a2e15, #241505);
  border: 1.5px solid rgba(200, 154, 78, 0.5);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 8px 2px; margin: 0 2px;
}
.bw-bar.src { border-color: #f2d489; box-shadow: 0 0 12px rgba(242, 212, 137, 0.5); }
.bw-bar .bw-chk { width: 82%; }
.bw-bar-cnt { font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 7px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(200, 154, 78, 0.4); }
.bw-bar-cnt.t { color: #b8c4dd; } .bw-bar-cnt.b { color: var(--bw-goldtext); }

/* حالات المصدر/الوجهة */
.bw-col.src::after {
  content: ''; position: absolute; inset: 2px; border-radius: 6px; pointer-events: none;
  border: 1.5px solid rgba(242, 212, 137, 0.55);
}
.bw-col.selc::after { border: 2px solid var(--bw-goldtext); box-shadow: 0 0 14px rgba(242, 212, 137, 0.55); }
.bw-col.dst::after {
  content: ''; position: absolute; inset: 2px; border-radius: 6px; pointer-events: none;
  border: 2px dashed var(--bw-green-ok); animation: bwDst 0.9s infinite;
}
@keyframes bwDst { 50% { border-color: rgba(67, 199, 143, 0.35); } }

/* صواني الإخراج */
.bw-traycol { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; gap: 5px; padding-inline-start: 5px; }
.bw-tray {
  flex: 1 1 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, rgba(20, 12, 5, 0.55), rgba(20, 12, 5, 0.3));
  border: 1.5px solid rgba(200, 154, 78, 0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px; overflow: hidden;
}
.bw-tray.top { justify-content: flex-start; }
.bw-tray.bottom { justify-content: flex-end; }
.bw-tray.dst { border: 2px dashed var(--bw-green-ok); box-shadow: 0 0 12px rgba(67, 199, 143, 0.35); }
.bw-tray-lbl { font-size: 8.5px; color: #c4b090; font-weight: 800; letter-spacing: 0.5px; }
.bw-tray-pile { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.bw-tray.top .bw-tray-pile { flex-direction: column-reverse; }
.bw-tray .bw-chk { width: 74%; max-width: 30px; }

/* النرد */
.bw-dicebar {
  width: 100%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, #241608, #150d05);
  border: 1px solid rgba(200, 154, 78, 0.4); border-radius: 10px;
  padding: 6px 10px; min-height: 52px;
}
.bw-dice { display: flex; gap: 7px; align-items: center; }
.bw-die {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(160deg, #d86a4e, var(--bw-red));
  border: 1px solid rgba(90, 30, 18, 0.65);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 235, 220, 0.5);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 16%; gap: 6%; transition: opacity 0.3s, transform 0.3s;
}
.bw-die i { border-radius: 50%; background: rgba(70, 20, 10, 0.35); }
.bw-die i.on { background: radial-gradient(circle at 38% 32%, #fff0e2, #f0ddc4); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
.bw-die.dbl { outline: 1.5px solid rgba(242, 212, 137, 0.6); outline-offset: 1px; }
.bw-die.used { opacity: 0.28; transform: scale(0.88); }

.bw-rollbtn {
  padding: 10px 20px; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, #c07830, #8c5220);
  color: #fff3e0; font-family: inherit; font-size: 14px; font-weight: 900;
  box-shadow: 0 3px 14px rgba(192, 120, 48, 0.35); transition: transform 0.15s;
}
.bw-rollbtn:hover { transform: translateY(-1px); }
.bw-rollbtn.pulse { animation: bwBtnPulse 1.2s infinite; }
@keyframes bwBtnPulse { 50% { box-shadow: 0 0 22px rgba(192, 120, 48, 0.65); transform: scale(1.04); } }
.bw-tools { display: flex; gap: 7px; margin-inline-start: auto; }
.bw-tool {
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(14, 9, 4, 0.85); color: var(--bw-goldtext);
  border: 1px solid rgba(200, 154, 78, 0.5);
  font-family: inherit; font-size: 12px; font-weight: 800;
}
.bw-tool:disabled { opacity: 0.4; cursor: default; }
.bw-tool.danger { border-color: rgba(200, 90, 70, 0.45); color: #eeb3a4; }

[hidden] { display: none !important; }

/* ══════════════ الاستجابة ══════════════ */
@media (max-width: 640px) {
  .bw-title { font-size: 25px; }
  .bw-seatname { max-width: 62px; font-size: 10.5px; }
  .bw-seatpip { display: none; }
  .bw-hudstatus { font-size: 11px; }
  .bw-bar { width: 20px; }
  .bw-traycol { width: 40px; }
  .bw-tray-lbl { display: none; }
  .bw-rollbtn { padding: 9px 14px; font-size: 12.5px; }
}
@media (max-height: 700px) {
  .bw-hud { padding: 3px 8px; }
  .bw-die { width: 28px; height: 28px; }
  .bw-dicebar { min-height: 44px; }
  .bw-menu-card { margin-top: 2vh; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .bw-menu-card { max-width: 520px; }
}