/* =====================================================================
   مونوبولي سوريا — واجهة اللوحة
   كل لون ومسافة من متغيّر في :root. لا أصول خارجية: CSS فقط.
   ===================================================================== */

:root {
  /* الألوان الأساسية */
  --felt: #0c3b2d;
  --felt-deep: #07251c;
  --felt-black: #041711;
  --cream: #f6efe0;
  --cream-2: #e9dcc2;
  --gold: #c9a13b;
  --gold-light: #e8d18d;
  --ink: #16241d;
  --ink-soft: #34443a;
  --muted: #6b7a70;
  --danger: #b3402f;
  --danger-light: #df9a8c;
  --white: #fffdf7;
  --black: #000000;

  /* ألوان المجموعات — نفس قيم GROUPS */
  --g-brown: #8b5e3c;
  --g-lb: #7fb3d5;
  --g-pink: #c96fa8;
  --g-orange: #e08a3c;
  --g-red: #c0392b;
  --g-yellow: #d4b02c;
  --g-green: #2e7d5b;
  --g-blue: #1f4e79;
  --g-trans: #4f6058;
  --g-util: #74877c;
  --g-special: #a7863c;
  --g-corner: #d7c5a0;

  /* أسطح وحدود */
  --surface: color-mix(in srgb, var(--felt) 88%, var(--black));
  --surface-2: color-mix(in srgb, var(--felt) 74%, var(--black));
  --surface-3: color-mix(in srgb, var(--felt) 60%, var(--black));
  --felt-muted: color-mix(in srgb, var(--cream) 58%, var(--felt));
  --felt-line: color-mix(in srgb, var(--gold) 28%, transparent);
  --felt-line-soft: color-mix(in srgb, var(--white) 9%, transparent);
  --tile-bg: var(--cream);
  --tile-bg-2: color-mix(in srgb, var(--cream) 86%, var(--cream-2));
  --scrim: color-mix(in srgb, var(--felt-black) 78%, transparent);

  /* الظلال */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--black) 34%, transparent);
  --sh-2: 0 8px 20px color-mix(in srgb, var(--black) 38%, transparent);
  --sh-3: 0 24px 60px color-mix(in srgb, var(--black) 55%, transparent);
  --sh-inset: inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 0 1px var(--gold);

  /* مقياس المسافات 8px */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-half: calc(var(--s-1) / 2);

  /* الاستدارة */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 18px;
  --r-pill: 999px;

  /* الطباعة */
  --font-ar: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  --fs-xs: clamp(10px, 1vw, 11px);
  --fs-1: clamp(11px, 1.1vw, 12.5px);
  --fs-2: clamp(12px, 1.3vw, 14px);
  --fs-3: clamp(14px, 1.5vw, 16px);
  --fs-4: clamp(17px, 2vw, 21px);
  --fs-5: clamp(21px, 2.8vw, 30px);
  --fs-6: clamp(28px, 4.2vw, 48px);
  --lh-tight: 1.15;

  /* أبعاد اللوحة */
  --topbar-h: 64px;
  --panel-w: 340px;
  --page-pad: var(--s-4);
  --line-w: 1px;
  --board-radius: var(--r-3);
  --band: clamp(6px, 0.9cqi, 11px);
  --tile-name: clamp(9.5px, 1.5cqi, 14px);
  --tile-pad: clamp(1px, 0.35cqi, 4px);
  --token-size: clamp(9px, 1.5cqi, 15px);
  --piece-size: calc(var(--token-size) * 1.25);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  font-family: var(--font-ar);
  color: var(--cream);
  background:
    radial-gradient(1100px 520px at 78% -12%, color-mix(in srgb, var(--felt) 70%, var(--gold)) 0%, transparent 62%),
    radial-gradient(900px 520px at 8% 108%, color-mix(in srgb, var(--felt) 78%, var(--white)) 0%, transparent 58%),
    linear-gradient(165deg, var(--surface), var(--felt-black) 72%);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image:
    repeating-linear-gradient(45deg, var(--white) 0 var(--line-w), transparent var(--line-w) var(--s-1)),
    repeating-linear-gradient(-45deg, var(--white) 0 var(--line-w), transparent var(--line-w) var(--s-1));
  mix-blend-mode: overlay;
}
#app { position: relative; z-index: 1; min-height: 100%; }
.hidden { display: none !important; }
button, input, select, textarea { font-family: inherit; }
h1, h2, p { margin: 0; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ============================== الأزرار ============================== */
.btn {
  --btn-bg: color-mix(in srgb, var(--white) 7%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: var(--line-w) solid var(--felt-line-soft);
  border-radius: var(--r-3);
  background: var(--btn-bg);
  color: var(--cream);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: var(--lh-tight, 1.15);
  transition: background .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--white) 13%, transparent); border-color: var(--felt-line); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(170deg, var(--gold-light), var(--gold) 52%, color-mix(in srgb, var(--gold) 62%, var(--ink)));
  border-color: color-mix(in srgb, var(--gold) 60%, var(--ink));
  color: var(--ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 24%, transparent), var(--sh-inset);
}
.btn.ghost { background: transparent; }
.btn.danger { background: color-mix(in srgb, var(--danger) 82%, var(--black)); border-color: color-mix(in srgb, var(--danger) 60%, var(--black)); color: var(--white); }
.btn.small { min-height: 34px; padding: var(--s-1) var(--s-3); font-size: var(--fs-1); border-radius: var(--r-2); }
.btn.big { width: 100%; min-height: 50px; font-size: var(--fs-3); }
.btn.icon { width: 40px; min-height: 40px; padding: 0; border-radius: var(--r-pill); font-size: var(--fs-3); }

/* ============================== اللوبي ============================== */
.lobby-screen { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6) var(--s-4); }
.lobby-wrap { width: min(620px, 100%); }
.brand-block { text-align: center; margin-block-end: var(--s-5); }
.brand-mark, .tb-mark, .hub-mark {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 900;
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 55%, color-mix(in srgb, var(--gold) 65%, var(--ink)));
  box-shadow: var(--sh-2), var(--sh-inset);
}
.brand-mark { width: 72px; height: 72px; margin: 0 auto var(--s-4); border-radius: var(--r-4); font-size: var(--fs-5); }
.brand-block h1 {
  font-size: var(--fs-6);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--gold-light);
  background: linear-gradient(175deg, var(--white), var(--gold-light) 48%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--black) 35%, transparent));
}
.lobby-sub { margin-block-start: var(--s-2); color: var(--felt-muted); font-size: var(--fs-1); letter-spacing: .04em; }
.lobby-card {
  position: relative;
  padding: var(--s-5);
  border: var(--line-w) solid var(--felt-line);
  border-radius: var(--r-4);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--sh-3), var(--sh-inset);
}
.lobby-card::before {
  content: '';
  position: absolute;
  inset: var(--s-1);
  border: var(--line-w) solid color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: var(--r-3);
  pointer-events: none;
}
label { display: block; margin-block-end: var(--s-2); color: var(--felt-muted); font-size: var(--fs-1); font-weight: 700; }
input, select {
  width: 100%;
  padding: var(--s-3) var(--s-3);
  border: var(--line-w) solid var(--felt-line-soft);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--black) 30%, transparent);
  color: var(--cream);
  font-size: var(--fs-2);
  font-weight: 600;
  transition: border-color .16s, box-shadow .16s;
}
input::placeholder { color: color-mix(in srgb, var(--cream) 42%, var(--felt)); font-weight: 400; }
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: var(--focus-ring); }
select option { background: var(--surface-2); color: var(--cream); }
.join-row { display: flex; gap: var(--s-2); }
.join-row + .join-row { margin-block-start: var(--s-2); }
.join-row input { flex: 1; min-width: 0; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: #f0d77a; }
.hint { margin-block-start: var(--s-3); color: var(--felt-muted); font-size: var(--fs-xs); line-height: 1.75; }
.lobby-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); margin-block: var(--s-4) var(--s-1); }
.lobby-player {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border: var(--line-w) solid var(--felt-line-soft);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--white) 5%, transparent);
  font-size: var(--fs-2);
  font-weight: 600;
}
.dot { width: 11px; height: 11px; flex: none; border-radius: var(--r-pill); background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 8%, transparent); }
.lobby-player .tag { margin-inline-start: auto; padding: var(--s-half) var(--s-2); border: var(--line-w) solid var(--felt-line); border-radius: var(--r-pill); color: var(--gold-light); font-size: var(--fs-xs); font-weight: 700; }
.kick { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-inline-start: auto; padding: 0; border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-2); background: transparent; color: var(--danger-light); }
.kick:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }
#startBtn { margin-block-start: var(--s-4); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-4); padding-block-start: var(--s-3); border-block-start: var(--line-w) solid var(--felt-line-soft); color: var(--felt-muted); font-size: var(--fs-xs); }
.share code { max-width: 100%; overflow: hidden; padding: var(--s-2) var(--s-3); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-2); background: color-mix(in srgb, var(--black) 42%, transparent); color: var(--cream); direction: ltr; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.share .btn { margin-inline-start: auto; }

/* ========================== الشريط العلوي ========================== */
.game-screen { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--topbar-h);
  padding-inline: var(--s-4);
  border-block-end: var(--line-w) solid var(--felt-line);
  background: color-mix(in srgb, var(--felt-black) 82%, transparent);
  box-shadow: var(--sh-1);
  backdrop-filter: blur(12px);
}
.tb-brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.tb-mark { width: 34px; height: 34px; flex: none; border-radius: var(--r-2); font-size: var(--fs-2); }
.tb-name { color: var(--gold-light); font-size: var(--fs-3); font-weight: 900; white-space: nowrap; }
.tb-mid { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin-inline: auto; }
.turn-chip { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 32vw; overflow: hidden; padding: var(--s-1) var(--s-3); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 5%, transparent); font-size: var(--fs-1); font-weight: 700; white-space: nowrap; }
.turn-chip #turnChipName { overflow: hidden; text-overflow: ellipsis; }
.tdot { width: 10px; height: 10px; flex: none; border-radius: var(--r-pill); background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 9%, transparent); }
.phase-pill { padding: var(--s-1) var(--s-3); border: var(--line-w) solid var(--felt-line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold-light); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.phase-pill[data-phase="buy"] { border-color: color-mix(in srgb, var(--g-green) 70%, transparent); background: color-mix(in srgb, var(--g-green) 18%, transparent); color: color-mix(in srgb, var(--g-green) 40%, var(--white)); }
.phase-pill[data-phase="auction"] { border-color: color-mix(in srgb, var(--g-orange) 70%, transparent); background: color-mix(in srgb, var(--g-orange) 18%, transparent); color: color-mix(in srgb, var(--g-orange) 35%, var(--white)); }
.phase-pill[data-phase="manage"] { border-color: color-mix(in srgb, var(--g-lb) 60%, transparent); background: color-mix(in srgb, var(--g-lb) 16%, transparent); color: color-mix(in srgb, var(--g-lb) 40%, var(--white)); }
.phase-pill[data-phase="raiseFunds"] { border-color: color-mix(in srgb, var(--danger) 70%, transparent); background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger-light); }
.phase-pill[data-phase="over"], .phase-pill[data-phase="waiting"] { border-color: var(--felt-line-soft); background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--cream-2); }
.tb-actions { display: flex; align-items: center; gap: var(--s-1); }
.zoomctl { display: inline-flex; align-items: center; gap: var(--s-half); padding: var(--s-half); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 5%, transparent); }
.zoomctl .btn.icon { width: 26px; min-height: 26px; font-size: var(--fs-2); }
.zoomlevel { min-width: 38px; color: var(--felt-muted); text-align: center; font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.only-mobile { display: none; }

/* ============================== التخطيط ============================== */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  gap: var(--s-3);
  width: 100%;
  max-width: 1640px;
  min-height: 0;
  margin-inline: auto;
  padding: var(--s-3);
  flex: 1;
}
.board-wrap { display: grid; place-items: center; min-width: 0; min-height: 0; }

/* =============================== اللوحة =============================== */
.board {
  position: relative;
  isolation: isolate;
  direction: rtl; /* في RTL يبدأ العمود 1 من اليمين: الخانة 0 أسفل اليمين */
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: repeat(11, minmax(0, 1fr));
  gap: var(--line-w);
  width: min(100%, 92dvh, calc(100dvh - var(--topbar-h) - var(--s-6)));
  aspect-ratio: 1;
  padding: var(--line-w);
  overflow: hidden;
  border: var(--s-1) solid var(--cream-2);
  border-radius: var(--board-radius);
  background: var(--ink);
  box-shadow:
    0 0 0 var(--line-w) var(--gold),
    var(--sh-3),
    inset 0 0 0 var(--line-w) color-mix(in srgb, var(--white) 22%, transparent);
}
.board::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 var(--s-1) color-mix(in srgb, var(--cream) 34%, transparent),
    inset 0 0 0 calc(var(--s-1) + var(--line-w)) color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none;
}
.board-hub {
  grid-area: 2 / 2 / 11 / 11;
  direction: rtl;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

/* مواضع الخانات 0–39 في شبكة RTL: العمود 1 يميناً، والحركة عكس عقارب الساعة */
.tile[data-index="0"] { grid-area: 11 / 1; }
.tile[data-index="1"] { grid-area: 11 / 2; }
.tile[data-index="2"] { grid-area: 11 / 3; }
.tile[data-index="3"] { grid-area: 11 / 4; }
.tile[data-index="4"] { grid-area: 11 / 5; }
.tile[data-index="5"] { grid-area: 11 / 6; }
.tile[data-index="6"] { grid-area: 11 / 7; }
.tile[data-index="7"] { grid-area: 11 / 8; }
.tile[data-index="8"] { grid-area: 11 / 9; }
.tile[data-index="9"] { grid-area: 11 / 10; }
.tile[data-index="10"] { grid-area: 11 / 11; }
.tile[data-index="11"] { grid-area: 10 / 11; }
.tile[data-index="12"] { grid-area: 9 / 11; }
.tile[data-index="13"] { grid-area: 8 / 11; }
.tile[data-index="14"] { grid-area: 7 / 11; }
.tile[data-index="15"] { grid-area: 6 / 11; }
.tile[data-index="16"] { grid-area: 5 / 11; }
.tile[data-index="17"] { grid-area: 4 / 11; }
.tile[data-index="18"] { grid-area: 3 / 11; }
.tile[data-index="19"] { grid-area: 2 / 11; }
.tile[data-index="20"] { grid-area: 1 / 11; }
.tile[data-index="21"] { grid-area: 1 / 10; }
.tile[data-index="22"] { grid-area: 1 / 9; }
.tile[data-index="23"] { grid-area: 1 / 8; }
.tile[data-index="24"] { grid-area: 1 / 7; }
.tile[data-index="25"] { grid-area: 1 / 6; }
.tile[data-index="26"] { grid-area: 1 / 5; }
.tile[data-index="27"] { grid-area: 1 / 4; }
.tile[data-index="28"] { grid-area: 1 / 3; }
.tile[data-index="29"] { grid-area: 1 / 2; }
.tile[data-index="30"] { grid-area: 1 / 1; }
.tile[data-index="31"] { grid-area: 2 / 1; }
.tile[data-index="32"] { grid-area: 3 / 1; }
.tile[data-index="33"] { grid-area: 4 / 1; }
.tile[data-index="34"] { grid-area: 5 / 1; }
.tile[data-index="35"] { grid-area: 6 / 1; }
.tile[data-index="36"] { grid-area: 7 / 1; }
.tile[data-index="37"] { grid-area: 8 / 1; }
.tile[data-index="38"] { grid-area: 9 / 1; }
.tile[data-index="39"] { grid-area: 10 / 1; }

/* ============================== الخانات ============================== */
.tile {
  position: relative;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: max(2px, var(--tile-pad));
  padding-block-end: calc(var(--tile-pad) + var(--token-gutter, 0px));
  border: 0;
  border-radius: var(--r-1);
  background: linear-gradient(178deg, var(--white), var(--tile-bg) 58%, var(--tile-bg-2));
  color: var(--ink);
  font-family: inherit;
  font-size: var(--tile-name);
  line-height: 1.02;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .16s, filter .16s, transform .16s;
}
.tile:hover { z-index: 4; box-shadow: inset 0 0 0 var(--line-w) var(--gold), var(--sh-2); }
.tile:focus-visible { outline: none; box-shadow: var(--focus-ring); z-index: 5; }
.tile:not(.tile--corner)[data-side="bottom"] { padding-block-start: calc(var(--tile-pad) + var(--band)); }
.tile:not(.tile--corner)[data-side="top"] { padding-block-end: calc(var(--tile-pad) + var(--band) + var(--token-gutter, 0px)); }
.tile:not(.tile--corner)[data-side="left"] { padding-inline-end: calc(var(--tile-pad) + var(--band)); }
.tile:not(.tile--corner)[data-side="right"] { padding-inline-start: calc(var(--tile-pad) + var(--band)); }

.tile-band { position: absolute; z-index: 2; background: var(--g-special); }
.tile[data-side="bottom"] .tile-band { inset: 0 0 auto 0; height: var(--band); }
.tile[data-side="top"] .tile-band { inset: auto 0 0 0; height: var(--band); }
.tile[data-side="left"] .tile-band { inset: 0 0 0 auto; width: var(--band); }
.tile[data-side="right"] .tile-band { inset: 0 auto 0 0; width: var(--band); }
.tile-band[data-group="brown"] { background: var(--g-brown); }
.tile-band[data-group="lb"] { background: var(--g-lb); }
.tile-band[data-group="pink"] { background: var(--g-pink); }
.tile-band[data-group="orange"] { background: var(--g-orange); }
.tile-band[data-group="red"] { background: var(--g-red); }
.tile-band[data-group="yellow"] { background: var(--g-yellow); }
.tile-band[data-group="green"] { background: var(--g-green); }
.tile-band[data-group="blue"] { background: var(--g-blue); }
.tile-band[data-group="trans"] { background: var(--g-trans); }
.tile-band[data-group="util"] { background: var(--g-util); }
.tile--tax .tile-band { background: var(--danger); }
.tile--chance .tile-band, .tile--chest .tile-band { background: var(--gold); }

.tile-icon { font-size: clamp(12px, 2.5cqi, 22px); line-height: 1; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--black) 30%, transparent)); }
.tile:not(.tile--corner) .tile-icon { position: absolute; z-index: 2; inset-block-start: calc(var(--tile-pad) + var(--band)); inset-inline-end: var(--tile-pad); opacity: .72; font-size: clamp(10px, 1.7cqi, 15px); }
.tile-price:empty, .tile-status:empty { display: none; }
.tile-name {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--tile-name);
  align-self: center;
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
  word-break: normal;
}
.tile-name--short { display: none; }
.tile-price {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: end;
  color: var(--ink-soft);
  direction: ltr;
  font-size: calc(var(--tile-name) * .78);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}
body.board-fit .tile-icon { display: none; }
.tile.has-tokens { --token-gutter: calc(var(--piece-size) + 3px); }
.tile-price.is-neg { color: var(--danger); }
.tile-price.is-pos { color: color-mix(in srgb, var(--g-green) 78%, var(--ink)); }
.tile-status { display: flex; align-items: center; justify-content: center; gap: var(--s-0); min-height: var(--s-1); max-width: 100%; }
.owner-dot { width: clamp(4px, .75cqi, 7px); height: clamp(4px, .75cqi, 7px); flex: none; border-radius: var(--r-pill); background: var(--muted); box-shadow: 0 0 0 var(--line-w) color-mix(in srgb, var(--white) 80%, transparent); }
.house-pips { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-half); }
.house-pips .pip { width: clamp(3px, .48cqi, 5px); height: clamp(4px, .66cqi, 7px); border-radius: var(--line-w); background: var(--g-green); box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.house-pips .hotel { width: clamp(7px, 1.1cqi, 12px); height: clamp(4px, .66cqi, 7px); border-radius: var(--line-w); background: var(--danger); box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.tile-tokens { position: absolute; z-index: 4; inset-block-end: var(--tile-pad); inset-inline-end: var(--tile-pad); display: flex; flex-wrap: nowrap; align-items: center; gap: 1px; max-width: calc(100% - var(--s-1)); pointer-events: none; }
.tile-tokens:empty { display: none; }
.piece { display: grid; place-items: center; width: var(--piece-size); height: var(--piece-size); flex: none; overflow: hidden; border: 1.5px solid var(--cream); border-radius: var(--r-pill); background: var(--pc, var(--muted)); color: var(--white); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4); line-height: 1; }
.piece + .piece { margin-inline-start: calc(var(--piece-size) * -0.25); }
.piece-letter { display: block; color: var(--white); font-size: calc(var(--piece-size) * .62); font-weight: 900; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, .55); }
.piece.is-current { transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--gold), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4); }
.piece--more { background: var(--ink); }
.piece--more .piece-letter { font-size: calc(var(--piece-size) * .52); }
.tile.is-owned { box-shadow: inset 0 0 0 var(--line-w) color-mix(in srgb, var(--owner, var(--muted)) 58%, transparent); }
.tile.is-current { z-index: 3; box-shadow: inset 0 0 0 calc(var(--line-w) * 2) var(--gold), inset 0 0 0 calc(var(--line-w) * 3) var(--ink), var(--sh-1); }
.tile.is-landed { z-index: 3; box-shadow: 0 0 0 calc(var(--line-w) * 2) var(--gold), 0 0 var(--s-4) color-mix(in srgb, var(--gold) 70%, transparent); }
.tile.is-mortgaged::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22; background: repeating-linear-gradient(45deg, var(--danger) 0 var(--s-0), transparent var(--s-0) calc(var(--s-2) - var(--s-0))); }
.tile.is-mortgaged .tile-name { text-decoration: line-through; text-decoration-thickness: var(--line-w); }
.tile--corner { background: linear-gradient(160deg, var(--cream), var(--g-corner)); }
.tile--corner .tile-name { font-size: calc(var(--tile-name) * 1.05); }
.tile--corner .tile-price { color: var(--ink); }
.tile--free .tile-icon, .tile--jail .tile-icon { filter: grayscale(.15); }

/* ============================ مركز اللوحة ============================ */
.board-hub {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(4px, 1.4cqi, 14px);
  overflow: hidden;
  padding: 4%;
  border-radius: var(--r-2);
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--felt) 62%, var(--gold)) 0%, var(--felt) 46%, var(--felt-deep) 100%);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--black) 45%, transparent), inset 0 0 0 var(--line-w) var(--felt-line);
}
.board-hub::before {
  content: '';
  position: absolute;
  inset: 4%;
  border: var(--line-w) solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: var(--r-1);
  pointer-events: none;
}
.board-hub::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--gold) 6%, transparent) 0 var(--line-w), transparent var(--line-w) var(--s-4)),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--gold) 6%, transparent) 0 var(--line-w), transparent var(--line-w) var(--s-4));
}
.hub-watermark { position: absolute; inset-inline: 0; top: 50%; z-index: 0; transform: translateY(-50%) rotate(-8deg); color: var(--cream); opacity: .045; font-size: clamp(28px, 10cqi, 96px); font-weight: 900; line-height: 1; text-align: center; white-space: nowrap; pointer-events: none; }
.hub-brand { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-1); }
.hub-mark { width: clamp(30px, 5.2cqi, 54px); height: clamp(30px, 5.2cqi, 54px); border-radius: var(--r-2); font-size: clamp(14px, 2.3cqi, 24px); }
.hub-title { color: var(--gold-light); font-size: clamp(18px, 3.9cqi, 42px); font-weight: 900; line-height: 1.1; letter-spacing: .01em; text-shadow: 0 2px 8px color-mix(in srgb, var(--black) 40%, transparent); }
.hub-sub { color: color-mix(in srgb, var(--cream) 62%, var(--felt)); font-size: clamp(8px, 1.15cqi, 12px); letter-spacing: .04em; }
.hub-dice { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(4px, 1.1cqi, 10px); }
.die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--s-half);
  width: clamp(24px, 4.3cqi, 46px);
  height: clamp(24px, 4.3cqi, 46px);
  padding: clamp(3px, .55cqi, 6px);
  border-radius: var(--r-2);
  background: linear-gradient(172deg, var(--white), var(--cream-2));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cream-2) 55%, var(--muted)), var(--sh-2), var(--sh-inset);
}
.die i { width: 62%; height: 62%; align-self: center; justify-self: center; border-radius: var(--r-pill); background: var(--ink); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--white) 28%, transparent); }
.die i.empty { background: transparent; box-shadow: none; }
.die.blank { position: relative; border: var(--line-w) dashed color-mix(in srgb, var(--cream) 30%, transparent); background: color-mix(in srgb, var(--white) 8%, transparent); box-shadow: none; }
.die.blank i { display: none; }
.die.blank::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--cream) 42%, transparent); font-size: clamp(12px, 2cqi, 20px); font-weight: 900; }
.die.roll { animation: dieRoll .5s cubic-bezier(.3, 1.4, .5, 1); }
.hub-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-half); min-width: 58%; max-width: 90%; padding: clamp(4px, 1.2cqi, 12px) clamp(6px, 1.8cqi, 18px); border-radius: var(--r-2); background: linear-gradient(180deg, var(--white), var(--cream-2)); color: var(--ink); box-shadow: var(--sh-2), var(--sh-inset); }
.hub-card .t { font-size: clamp(9px, 1.5cqi, 15px); font-weight: 900; line-height: 1.2; }
.hub-card .d { color: var(--ink-soft); font-size: clamp(8px, 1.2cqi, 12px); line-height: 1.45; text-align: center; }
.hub-rule { position: relative; z-index: 2; width: 38%; height: var(--line-w); background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7; }
.hub-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); }
.hub-meta span { padding: var(--s-half) var(--s-2); border: var(--line-w) solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 4%, transparent); color: color-mix(in srgb, var(--cream) 55%, var(--felt)); font-size: clamp(7px, .95cqi, 10px); white-space: nowrap; }

/* بطاقة الفرصة/الصندوق القابلة للقلب */
.card-flip { position: absolute; inset: 8%; z-index: 5; display: grid; place-items: center; perspective: 900px; }
.card-flip-inner { position: relative; width: min(280px, 88%); aspect-ratio: 1.45; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.card-flip.is-flipped .card-flip-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-2); padding: var(--s-3); border: calc(var(--line-w) * 2) solid var(--gold); border-radius: var(--r-3); background: linear-gradient(170deg, var(--white), var(--cream-2)); color: var(--ink); text-align: center; box-shadow: var(--sh-3); backface-visibility: hidden; }
.card-back { background: radial-gradient(circle at 50% 40%, var(--felt), var(--felt-deep)); color: var(--gold-light); font-weight: 900; }
.card-back span { font-size: var(--fs-4); }
.card-front { transform: rotateY(180deg); }
.card-kicker { padding: var(--s-half) var(--s-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--ink); font-size: var(--fs-xs); font-weight: 800; }
.card-face p { color: var(--ink); font-size: var(--fs-2); line-height: 1.6; }

/* ========================== اللوحة الجانبية ========================== */
.side-panel {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: calc(100dvh - var(--topbar-h) - var(--s-5));
  overflow: auto;
  padding: var(--s-3);
  border: var(--line-w) solid var(--felt-line);
  border-radius: var(--r-4);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--sh-2), var(--sh-inset);
  scrollbar-color: color-mix(in srgb, var(--gold) 40%, transparent) transparent;
  scrollbar-width: thin;
}
.side-panel::-webkit-scrollbar { width: var(--s-2); }
.side-panel::-webkit-scrollbar-thumb { border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 32%, transparent); }
.dice-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-3); background: linear-gradient(160deg, color-mix(in srgb, var(--white) 7%, transparent), color-mix(in srgb, var(--white) 2%, transparent)); }
.dice-mini { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--r-3); background: linear-gradient(170deg, var(--white), var(--cream-2)); box-shadow: var(--sh-1), var(--sh-inset); font-size: var(--fs-4); }
.dice-meta { min-width: 0; }
.dice-sum { color: var(--gold-light); font-size: var(--fs-2); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.turn-sub { margin-block-start: var(--s-half); overflow: hidden; color: var(--felt-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.actions { display: grid; gap: var(--s-2); }
.actions .btn { width: 100%; }
.actions .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.actions .waiting { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3); border: var(--line-w) dashed var(--felt-line-soft); border-radius: var(--r-2); background: color-mix(in srgb, var(--white) 4%, transparent); color: var(--felt-muted); font-size: var(--fs-1); text-align: center; }
.actions .waiting::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: var(--r-pill); background: var(--gold); animation: softPulse 1.5s ease-in-out infinite; }
.section-label { display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-1); color: var(--felt-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; }
.section-label::after { content: ''; flex: 1; height: var(--line-w); background: var(--felt-line-soft); }

/* ============================ تحصيل الدين ============================ */
.raise-banner { display: grid; gap: var(--s-2); padding: var(--s-3); border: var(--line-w) solid color-mix(in srgb, var(--danger) 65%, transparent); border-radius: var(--r-3); background: linear-gradient(170deg, color-mix(in srgb, var(--danger) 24%, transparent), color-mix(in srgb, var(--danger) 8%, transparent)); box-shadow: inset 0 0 0 var(--line-w) color-mix(in srgb, var(--danger-light) 20%, transparent); }
.raise-head { display: flex; align-items: center; gap: var(--s-2); color: var(--danger-light); font-size: var(--fs-2); }
.raise-debt { color: var(--cream); font-size: var(--fs-2); line-height: 1.6; }
.raise-debt b { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.raise-hint { color: color-mix(in srgb, var(--cream) 70%, var(--danger)); font-size: var(--fs-xs); line-height: 1.65; }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.panel-actions .btn { flex: 1 1 100px; }

/* ========================= المزاد والتداول ========================= */
.auction-panel, .trade-panel { display: grid; gap: var(--s-2); padding: var(--s-3); border: var(--line-w) solid var(--felt-line); border-radius: var(--r-3); background: linear-gradient(180deg, var(--surface-2), var(--surface-3)); box-shadow: var(--sh-inset); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.panel-head h2 { color: var(--gold-light); font-size: var(--fs-3); font-weight: 900; }
.panel-tag { overflow: hidden; padding: var(--s-half) var(--s-2); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-pill); color: var(--cream-2); font-size: var(--fs-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.auction-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.auction-stats > div { display: grid; gap: var(--s-half); padding: var(--s-2); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-2); background: color-mix(in srgb, var(--black) 18%, transparent); }
.auction-stats span { color: var(--felt-muted); font-size: var(--fs-xs); }
.auction-stats b { overflow: hidden; color: var(--gold-light); font-size: var(--fs-2); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.auction-panel label, .trade-panel label { margin-block: var(--s-1) 0; }
.auction-panel input, .trade-panel input, .trade-panel select { padding: var(--s-2) var(--s-3); font-size: var(--fs-2); }
.auction-panel input { text-align: center; font-variant-numeric: tabular-nums; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.trade-col { display: grid; align-content: start; gap: var(--s-1); min-width: 0; margin: 0; padding: var(--s-2); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-2); }
.trade-col legend { padding-inline: var(--s-1); color: var(--gold-light); font-size: var(--fs-xs); font-weight: 800; }
.trade-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); min-height: var(--s-5); }
.trade-chips:empty::before { content: 'لا عقارات'; align-self: center; color: var(--felt-muted); font-size: var(--fs-xs); }
.trade-chip { padding: var(--s-half) var(--s-2); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 5%, transparent); color: var(--cream); font-size: var(--fs-xs); font-weight: 700; }
.trade-chip:hover { border-color: var(--felt-line); }
.trade-chip[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-light); }
.switch { display: flex; align-items: center; gap: var(--s-1); margin-block: var(--s-1) 0; color: var(--cream-2); font-size: var(--fs-xs); font-weight: 600; }
.switch input { width: auto; accent-color: var(--gold); }
.trade-panel .panel-actions { margin-block-start: var(--s-1); }

/* ============================== اللاعبون ============================== */
.players { display: grid; gap: var(--s-1); }
.player-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border: var(--line-w) solid transparent;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--white) 4%, transparent);
  transition: background .18s, border-color .18s;
}
.player-ribbon .ribbon-disc { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r-2); background: var(--pc, var(--muted)); color: var(--white); box-shadow: inset 0 0 0 var(--line-w) color-mix(in srgb, var(--white) 32%, transparent); font-size: var(--fs-2); font-weight: 900; }
.player-ribbon .ribbon-main { display: grid; gap: var(--s-half); min-width: 0; }
.player-ribbon .ribbon-name { overflow: hidden; color: var(--cream); font-size: var(--fs-2); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.player-ribbon .ribbon-worth { overflow: hidden; color: var(--felt-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.player-ribbon .ribbon-cash { color: var(--gold-light); font-size: var(--fs-2); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.player-ribbon .ribbon-cash i { color: var(--felt-muted); font-size: var(--fs-xs); font-style: normal; font-weight: 600; }
.player-ribbon .ribbon-cash.is-neg { color: var(--danger-light); }
.player-ribbon .jail-badge { position: absolute; inset-block-start: var(--s-half); inset-inline-start: var(--s-half); padding: 0 var(--s-half); border-radius: var(--r-pill); background: color-mix(in srgb, var(--danger) 85%, var(--black)); color: var(--white); font-size: var(--fs-xs); line-height: 1.5; }
.player-ribbon.is-turn { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 17%, transparent), color-mix(in srgb, var(--gold) 3%, transparent)); animation: ribbonPulse 2.2s ease-in-out infinite; }
.player-ribbon.is-me .ribbon-name::after { content: ' · أنت'; color: var(--felt-muted); font-size: var(--fs-xs); font-weight: 600; }
.player-ribbon.is-out { opacity: .42; }
.player-ribbon.is-out .ribbon-name { text-decoration: line-through; }

/* ============================== السجل ============================== */
.log { display: grid; gap: var(--s-1); max-height: 210px; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.log li { overflow-wrap: anywhere; padding: var(--s-2) var(--s-2); border-inline-start: 3px solid color-mix(in srgb, var(--white) 14%, transparent); border-radius: var(--r-1); background: color-mix(in srgb, var(--white) 4%, transparent); color: color-mix(in srgb, var(--cream) 88%, var(--felt)); font-size: var(--fs-xs); line-height: 1.55; animation: logIn .22s ease-out; }
.log li:nth-child(n+6) { display: none; }
.log li.gain { border-inline-start-color: var(--g-green); }
.log li.good { border-inline-start-color: color-mix(in srgb, var(--g-green) 65%, var(--gold)); }
.log li.pay { border-inline-start-color: var(--danger); }
.log li.bad { border-inline-start-color: var(--g-orange); }
.log li.card { border-inline-start-color: var(--gold); }
.log li.turn { border-inline-start-color: var(--g-lb); background: color-mix(in srgb, var(--g-lb) 9%, transparent); }
.log li.auction { border-inline-start-color: var(--g-orange); }
.log li.trade { border-inline-start-color: var(--g-pink); }
.log li.bankrupt { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.panel-foot-note { padding-block-start: var(--s-2); border-block-start: var(--line-w) solid var(--felt-line-soft); color: var(--felt-muted); font-size: var(--fs-xs); line-height: 1.75; }
.panel-foot-note b { color: var(--cream-2); }

/* ============================== النوافذ ============================== */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--s-4); background: var(--scrim); backdrop-filter: blur(6px); animation: fadeIn .18s ease-out; }
.modal-card { position: relative; width: min(480px, 100%); max-height: 88dvh; overflow: auto; padding: var(--s-5); border-radius: var(--r-4); background: linear-gradient(180deg, var(--white), var(--cream) 70%, var(--cream-2)); color: var(--ink); box-shadow: var(--sh-3), inset 0 0 0 var(--line-w) color-mix(in srgb, var(--white) 80%, transparent); animation: cardIn .22s ease-out; }
.modal-x { position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: var(--line-w) solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-size: var(--fs-2); }
.modal-x:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.modal-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal-card h3 { margin-block-end: var(--s-2); color: var(--felt); font-size: var(--fs-4); }
.modal-card p, .modal-card li { color: var(--ink-soft); font-size: var(--fs-2); line-height: 1.8; }
.modal-card ol { padding-inline-start: var(--s-5); }

/* سند الملك */
.deed { overflow: hidden; border: calc(var(--line-w) * 2) solid var(--ink); border-radius: var(--r-3); background: var(--white); }
.deed-head { display: grid; gap: var(--s-half); padding: var(--s-3); background: var(--group, var(--g-special)); color: var(--white); text-align: center; text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 35%, transparent); }
.deed-group { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; opacity: .92; }
.deed-name { margin: 0; font-size: var(--fs-4); font-weight: 900; line-height: 1.25; }
.deed-owner { font-size: var(--fs-xs); font-weight: 600; opacity: .9; }
.deed-body { display: grid; gap: var(--s-3); padding: var(--s-3); }
.deed-rents { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.deed-rents caption { margin-block-end: var(--s-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-align: start; }
.deed-rents th { padding: var(--s-1) var(--s-2); border-block-end: var(--line-w) dashed color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink-soft); font-size: var(--fs-1); font-weight: 600; text-align: start; }
.deed-rents td { padding: var(--s-1) var(--s-2); border-block-end: var(--line-w) dashed color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); direction: ltr; font-size: var(--fs-1); font-weight: 800; text-align: end; }
.deed-rents tr:nth-child(even) { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.deed-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: 0; }
.deed-meta > div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); padding: var(--s-2); border: var(--line-w) solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: var(--r-1); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.deed-meta dt { color: var(--muted); font-size: var(--fs-xs); }
.deed-meta dd { margin: 0; color: var(--ink); font-size: var(--fs-2); font-variant-numeric: tabular-nums; font-weight: 800; }
.deed-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.deed-actions .btn { min-height: 40px; padding: var(--s-2); border-color: color-mix(in srgb, var(--ink) 22%, transparent); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-size: var(--fs-1); }
.deed-actions .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 25%, transparent); }
.deed-actions .btn.primary { border-color: color-mix(in srgb, var(--gold) 55%, var(--ink)); color: var(--ink); }

/* =============================== الفوز =============================== */
.win-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--s-4); background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--gold) 24%, transparent), var(--scrim) 64%); backdrop-filter: blur(6px); animation: fadeIn .25s ease-out; }
.win-card { width: min(420px, 100%); padding: var(--s-6) var(--s-5); border-radius: var(--r-4); background: linear-gradient(180deg, var(--white), var(--cream-2)); color: var(--ink); text-align: center; box-shadow: var(--sh-3), inset 0 0 0 var(--line-w) color-mix(in srgb, var(--white) 80%, transparent); animation: cardIn .32s ease-out; }
.win-crown { font-size: 52px; line-height: 1; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--gold) 55%, transparent)); animation: crownBounce 1.6s ease-in-out infinite; }
.win-card h2 { margin: var(--s-2) 0 var(--s-1); color: var(--felt); font-size: var(--fs-5); font-weight: 900; }
.win-card p { margin-block-end: var(--s-4); color: var(--ink-soft); font-size: var(--fs-2); }
.toast { position: fixed; inset-inline: 0; bottom: var(--s-5); z-index: 80; width: fit-content; max-width: 88vw; margin-inline: auto; padding: var(--s-2) var(--s-5); border: var(--line-w) solid var(--felt-line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--felt-black) 94%, transparent); color: var(--cream); font-size: var(--fs-2); font-weight: 600; box-shadow: var(--sh-2); animation: toastIn .25s ease-out; }
.conn { position: fixed; inset-inline-start: var(--s-3); bottom: var(--s-3); z-index: 90; max-width: 70vw; padding: var(--s-2) var(--s-3); border: var(--line-w) solid var(--felt-line-soft); border-radius: var(--r-2); background: color-mix(in srgb, var(--danger) 85%, var(--black)); color: var(--white); font-size: var(--fs-xs); }
.conn.ok { color: color-mix(in srgb, var(--g-green) 45%, var(--white)); }
.conn.bad { color: var(--danger-light); }
.mobile-bar { display: none; }

/* ============================== الحركة ============================== */
@keyframes dieRoll {
  0% { transform: rotate(0) translateY(0); }
  35% { transform: rotate(-16deg) translateY(-8px); }
  65% { transform: rotate(11deg) translateY(-3px); }
  100% { transform: none; }
}
@keyframes softPulse { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ribbonPulse {
  0%, 100% { box-shadow: inset 0 0 0 var(--line-w) color-mix(in srgb, var(--gold) 40%, transparent); }
  50% { box-shadow: inset 0 0 0 var(--line-w) var(--gold), 0 0 var(--s-2) color-mix(in srgb, var(--gold) 22%, transparent); }
}
@keyframes logIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes crownBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ============================== التجاوب ============================== */
html, body { max-width: 100%; overflow-x: hidden; }
@media (min-width: 721px) {
  .game-screen { height: 100dvh; min-height: 0; overflow: hidden; }
  .game-layout { height: 100%; }
}
@media (max-width: 1080px) {
  :root { --panel-w: 310px; }
  .tb-name { font-size: var(--fs-2); }
  .turn-chip { max-width: 24vw; }
}
@media (max-width: 900px) {
  .topbar { padding-inline: var(--s-2); gap: var(--s-2); }
  .tb-mark { width: 30px; height: 30px; }
  .zoomctl { display: none; }
  .only-mobile { display: inline-flex; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 286px; gap: var(--s-2); padding: var(--s-2); }
  .side-panel { padding: var(--s-2); }
}
@media (max-width: 720px) {
  :root { --topbar-h: 56px; }
  .game-screen { min-height: 0; }
  .topbar { height: var(--topbar-h); padding-inline: var(--s-2); gap: var(--s-1); }
  .tb-name { font-size: var(--fs-1); }
  .tb-mid { gap: var(--s-1); }
  .turn-chip { max-width: 26vw; padding-inline: var(--s-2); font-size: var(--fs-xs); }
  .phase-pill { padding-inline: var(--s-2); font-size: var(--fs-xs); }
  .tb-actions { gap: var(--s-half); }
  .tb-actions #myPropsBtn, .tb-actions .zoomctl, .tb-actions #zoomBtn { display: none; }
  .tb-actions .btn.icon { width: 34px; min-height: 34px; }
  .game-layout { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); padding-block-end: 0; }
  .board-wrap { width: 100%; }
  .board { width: 100%; max-width: 100%; }
  .side-panel { width: calc(100% + var(--s-4)); height: auto; max-height: none; margin-inline: calc(var(--s-2) * -1); padding: var(--s-3); padding-block-end: calc(var(--s-4) + env(safe-area-inset-bottom)); overflow: visible; border-end-start-radius: 0; border-end-end-radius: 0; border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: 0 -8px 30px color-mix(in srgb, var(--black) 32%, transparent); }
  .dice-card { padding: var(--s-2); }
  .log { max-height: none; }
  .toast { bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}
@media (max-width: 960px) {
  /* اللوحة على الهاتف: شريط تمرير أفقي بعرض متغيّر ٧٦٠–١٢٤٠px لتبقى الخانات مقروءة */
  .board-wrap {
    width: 100%;
    height: min(68dvh, 620px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    place-items: start;
  }
  .board { width: var(--board-w, 860px); height: var(--board-w, 860px); max-width: none; }
  body.board-fit { --tile-name: clamp(7px, 1.8cqi, 14px); }
  body.board-fit .board { width: 100%; height: auto; }
  body.board-fit .board-wrap { height: auto; overflow: hidden; }
  body.board-fit .tile-name { line-height: 1.02; }
  body.board-fit .tile-status { display: none; }
  body.board-fit .tile-name--full { display: none; }
  body.board-fit .tile-name--short { display: -webkit-box; }
  #boardZoomBtn, #boardZoomOut, #boardZoomIn { display: inline-flex; }
}
@media (min-width: 961px) {
  #boardZoomBtn, #boardZoomOut, #boardZoomIn { display: none; }
}
#boardZoomBtn, #boardZoomOut, #boardZoomIn {
  position: fixed;
  inset-block-end: calc(var(--s-3) + env(safe-area-inset-bottom));
  z-index: 60;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--line-w) solid var(--gold);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--felt-black) 88%, transparent);
  color: var(--gold-light);
  font-size: 20px;
  line-height: 1;
  box-shadow: var(--sh-2), inset 0 0 0 var(--line-w) color-mix(in srgb, var(--white) 12%, transparent);
  backdrop-filter: blur(6px);
}
#boardZoomOut { inset-inline-start: var(--s-3); }
#boardZoomBtn { inset-inline-start: calc(var(--s-3) + 50px); }
#boardZoomIn { inset-inline-start: calc(var(--s-3) + 100px); }
#boardZoomBtn[aria-pressed="true"] { background: var(--gold); color: var(--felt-black); }
#boardZoomOut:disabled, #boardZoomIn:disabled { opacity: .35; cursor: default; }
@media (max-width: 420px) {
  .tb-mark { width: 26px; height: 26px; font-size: var(--fs-1); }
  .tb-name { display: none; }
  .turn-chip { max-width: 30vw; }
  .brand-block h1 { font-size: clamp(26px, 9vw, 38px); }
  .lobby-card { padding: var(--s-4); }
  .trade-cols { grid-template-columns: 1fr; }
  .deed-actions { grid-template-columns: 1fr; }
}
@container (max-width: 899px) {
  /* خانة أصغر من ٨٠px: الأيقونة تُزاح والقطع تبقى بحجمها الكامل */
  .tile-icon { display: none; }
}
@container (max-width: 520px) {
  /* على الشاشات الضيقة: الاسمان أهم من الأيقونة — سطران بلا قصّ */
  .tile-name { -webkit-line-clamp: 2; line-height: 1.08; font-size: calc(var(--tile-name) * .9); }
  .tile-price { line-height: 1; font-size: calc(var(--tile-name) * .78); }
  .tile-status { min-height: 3px; }
  .tile-icon { display: none; }
  .hub-sub, .hub-meta, .hub-card .d { display: none; }
  .hub-card { min-width: 0; padding: var(--s-half) var(--s-2); }
  .hub-mark { width: 24px; height: 24px; font-size: 11px; }
  .hub-dice { gap: var(--s-1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}