/* ================= صفحه بازی: حالت میز ================= */
@property --tlx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --tly { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --tlc { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tla { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --k { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  /* میز و تخته، تم روشن: کتان کاهی زیر نور گرم */
  --felt: oklch(0.91 0.028 84);
  --felt-2: oklch(0.83 0.04 78);
  --lamp: oklch(0.99 0.035 92 / 0.85);
  --mote: oklch(0.72 0.09 80 / 0.55);
  --tile: oklch(0.985 0.012 88);
  --tile-h: oklch(0.965 0.032 88);
  --tile-ink: oklch(0.27 0.04 245);
  --tile-ink-2: oklch(0.47 0.035 245);
  --board-line: oklch(0.84 0.04 84);
  --board-in: oklch(0.945 0.036 88);
  --girih: oklch(0.7 0.07 195 / 0.45);
  --girih-dot: oklch(0.76 0.13 78 / 0.75);
  --board-edge: oklch(0.36 0.07 205);
  --board-edge-2: oklch(0.27 0.06 205);
  --frame: oklch(0.36 0.07 205);
  --inlay: oklch(0.8 0.13 80);
  --pip: oklch(0.24 0.035 245);
}
:root[data-theme='dark'] {
  /* تم تیره: میز ماهوتی لاجوردی، تخته‌ی شب با نوارهای رنگی درخشان و منبت طلایی */
  --felt: oklch(0.235 0.04 212);
  --felt-2: oklch(0.13 0.025 228);
  --lamp: oklch(0.6 0.09 78 / 0.3);
  --mote: oklch(0.9 0.09 85 / 0.6);
  --tile: oklch(0.255 0.028 238);
  --tile-h: oklch(0.3 0.034 238);
  --tile-ink: oklch(0.94 0.012 85);
  --tile-ink-2: oklch(0.74 0.022 232);
  --board-line: oklch(0.16 0.024 240);
  --board-in: oklch(0.2 0.034 226);
  --girih: oklch(0.72 0.1 80 / 0.26);
  --girih-dot: oklch(0.82 0.13 80 / 0.55);
  --board-edge: oklch(0.15 0.022 240);
  --board-edge-2: oklch(0.1 0.02 240);
  --frame: oklch(0.19 0.03 232);
  --inlay: oklch(0.74 0.12 78);
}

.game {
  --hud-w: 350px;
  --seat-w: clamp(176px, 15vw, 250px);
  min-height: 100dvh; display: grid; grid-template-columns: var(--hud-w) 1fr;
  background: var(--felt-2); overflow: hidden;
}
.game-empty { min-height: 100dvh; align-content: center; }

/* ---------- میز ---------- */
.arena {
  position: relative; min-width: 0; height: 100dvh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: var(--seat-w) minmax(0, 1fr) var(--seat-w); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: 'sa stage sb' 'sa console sb';
  gap: 14px clamp(8px, 1.4vw, 22px); padding: 18px clamp(12px, 1.6vw, 24px) 18px;
  background:
    radial-gradient(circle at var(--tlx) var(--tly), color-mix(in oklch, var(--tlc) calc(var(--tla) * 34%), transparent), transparent 38%),
    radial-gradient(ellipse 58% 52% at 50% 44%, var(--lamp), transparent 74%),
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--felt) 0%, var(--felt-2) 100%);
  transition: --tlx 900ms var(--ease), --tly 900ms var(--ease), --tlc 900ms var(--ease), --tla 600ms var(--ease);
}
/* بافت ماهوت و سایه‌ی لبه‌های میز */
.arena::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.arena::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, oklch(0.05 0.02 250 / 0.28) 100%); }
:root[data-theme='dark'] .arena::after { background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 50%, oklch(0.03 0.02 250 / 0.6) 100%); }

.dust { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dust i { position: absolute; left: var(--x); bottom: -8px; width: 3px; height: 3px; border-radius: 50%; background: var(--mote); opacity: 0; will-change: transform, opacity;
  animation: mote var(--d) linear infinite; animation-delay: calc(var(--k) * -1.7s); }
.dust i:nth-child(3n) { width: 2px; height: 2px; }
.dust i:nth-child(4n) { width: 4px; height: 4px; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.8; } 70% { opacity: 0.5; } 100% { transform: translate(40px, -105dvh); opacity: 0; } }

/* ---------- صندلی‌ها ---------- */
.seats-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; z-index: 3; min-width: 0; }
.seats-col.side-a { grid-area: sa; }
.seats-col.side-b { grid-area: sb; flex-direction: column-reverse; }
.players.strip { display: none; }

.seat-card {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: 'av name' 'av money' 'pips pips';
  gap: 1px 12px; align-items: center; padding: 14px 14px 12px; border-radius: 20px;
  /* شیشه‌ی مات: پس‌زمینه تار می‌شود ولی متن روی لایه‌ای به‌اندازه‌ی کافی پررنگ می‌نشیند */
  background: linear-gradient(160deg, color-mix(in oklch, var(--surface), transparent 12%), color-mix(in oklch, var(--surface), transparent 24%));
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 86%);
  box-shadow: var(--sh-md), inset 0 1px 0 oklch(1 0 0 / 0.16);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease), border-color 600ms var(--ease), background-color 600ms var(--ease), opacity 400ms var(--ease);
  overflow: visible;
}
.seat-card > *:not(.seat-turn) { position: relative; z-index: 1; }
.seat-card:not(.active):not(.out) .pawn-badge { filter: saturate(0.8); }
.pname, .pmoney { text-shadow: 0 1px 0 color-mix(in oklch, var(--surface), transparent 40%); }
.seat-av { grid-area: av; position: relative; width: 56px; height: 56px; }
.seat-av .pawn-badge { width: 56px; height: 56px; }
.seat-no { position: absolute; top: -6px; inset-inline-start: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--paper-3); color: var(--ink-2); z-index: 2; }
.seat-av .ring { position: absolute; inset: -9px; border-radius: 50%; opacity: 0; transition: opacity 400ms var(--ease);
  background: conic-gradient(from 0deg, var(--pc) calc(var(--k) * 360deg), color-mix(in oklch, var(--pc), transparent 82%) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.seat-card.low .seat-av .ring { background: conic-gradient(from 0deg, var(--pom) calc(var(--k) * 360deg), color-mix(in oklch, var(--pom), transparent 80%) 0); }
.seat-card.jailed .seat-av .pawn-badge { filter: grayscale(0.55); }
.seat-card.active .seat-av .pawn3d { animation: pawnHop 1.6s var(--ease) infinite; }
@keyframes pawnHop { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 0 -12%; } 88% { translate: 0 2%; } }
.seat-card.jailed .seat-av::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 9px, oklch(0.18 0.02 250 / 0.6) 9px 12px); }
.pinfo { grid-area: name; display: grid; min-width: 0; line-height: 1.35; align-self: end; }
.pname { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname small { color: var(--teal-d); font-weight: 700; }
.pmeta { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmoney-wrap { grid-area: money; display: inline-flex; align-items: center; gap: 6px; align-self: start; }
.pmoney { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.01em; }
.pmoney.up { animation: flashUp 900ms var(--ease); }
.pmoney.down { animation: flashDown 900ms var(--ease); }
@keyframes flashUp { 30% { color: var(--ok); scale: 1.14; } }
@keyframes flashDown { 30% { color: var(--pom); scale: 1.14; } }
.coin-ic { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, oklch(0.94 0.12 92), var(--saffron) 55%, var(--saffron-d)); box-shadow: inset 0 0 0 2px oklch(0.72 0.14 75); flex: none; }
.pips { grid-area: pips; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pips.empty { font-size: var(--fs-xs); color: var(--ink-3); }
.pip-g { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: var(--paper-2); }
.pip-g.full { box-shadow: 0 0 0 1.5px var(--gc), 0 0 10px -2px var(--gc); }
.pip-g i { width: 8px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--gc), transparent 35%); }
.pip-g i.on { background: var(--gc); box-shadow: none; }
.pip-g i.mort { background: repeating-linear-gradient(45deg, var(--gc) 0 2px, transparent 2px 4px); }
.pip-x { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; background: var(--paper-2); font-size: 11px; }
.pip-x b { font-size: 11px; }

/* صندلی کسی که نوبتش است */
.seat-card.active {
  opacity: 1; border-color: color-mix(in oklch, var(--pc), transparent 25%);
  background: linear-gradient(160deg, color-mix(in oklch, color-mix(in oklch, var(--pc) 16%, var(--surface)), transparent 8%), color-mix(in oklch, color-mix(in oklch, var(--pc) 10%, var(--surface)), transparent 18%));
  box-shadow: 0 0 0 1px var(--pc), 0 20px 44px -18px color-mix(in oklch, var(--pc), transparent 20%), 0 0 70px -14px color-mix(in oklch, var(--pc), transparent 45%);
}
.side-a .seat-card.active { transform: translateX(-12px) scale(1.045); }
.side-b .seat-card.active { transform: translateX(12px) scale(1.045); }
.seat-card.active .seat-av .ring { opacity: 1; }
.seat-card.active::after { content: ''; position: absolute; top: calc(50% - 10px); width: 12px; height: 20px; background: var(--pc); }
.side-a .seat-card.active::after { left: -11px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.side-b .seat-card.active::after { right: -11px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.seat-card.active::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 0; background: linear-gradient(105deg, transparent 30%, color-mix(in oklch, var(--pc), transparent 80%) 48%, transparent 66%) no-repeat;
  background-size: 250% 100%; animation: shine 1.4s var(--ease) both; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.seat-turn { position: absolute; top: -11px; inset-inline-end: 14px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--pc); color: var(--on-accent);
  font-size: 11px; font-weight: 800; box-shadow: 0 6px 14px -6px var(--pc); animation: turnIn 520ms var(--ease) both; white-space: nowrap; }
@keyframes turnIn { from { opacity: 0; transform: translateY(6px) scale(0.9); } }
.seat-card.out { opacity: 0.4; filter: grayscale(1); }
.seat-card.out .pname { text-decoration: line-through; }

/* ---------- کنسول اقدام زیر تخته ---------- */
.console { grid-area: console; justify-self: center; width: min(740px, 100%); z-index: 4; padding-top: 8px; }
.console:empty { display: none; }
.prompt { display: grid; gap: var(--sp-3); align-content: center; }
.console .prompt {
  padding: 14px 18px; border-radius: 22px; background: color-mix(in oklch, var(--surface), transparent 10%);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 86%);
  box-shadow: var(--sh-lg), inset 0 1px 0 oklch(1 0 0 / 0.14); transition: box-shadow 500ms var(--ease), border-color 500ms var(--ease);
}
.game.my-turn .console .prompt { border-color: color-mix(in oklch, var(--saffron), transparent 35%);
  box-shadow: var(--sh-lg), 0 0 0 4px color-mix(in oklch, var(--saffron), transparent 84%), 0 0 60px -16px color-mix(in oklch, var(--saffron), transparent 40%); }
.prompt-text { font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.prompt-text small { font-weight: 400; color: var(--ink-2); width: 100%; }
.prompt-text.warn { color: var(--pom); }
.prompt-text.waiting { flex-wrap: nowrap; gap: 12px; }
.prompt-text.waiting > span:nth-child(2) { display: grid; line-height: 1.3; }
.prompt-text.waiting > span:nth-child(2) small { width: auto; font-size: var(--fs-xs); color: var(--ink-3); }

.timer-text { margin-inline-start: auto; min-width: 2.4em; height: 2.4em; display: inline-grid; place-items: center; border-radius: 50%; background: var(--paper-3); font-size: var(--fs-sm); font-weight: 800; }
.timer-text:empty { display: none; }
.prompt-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.prompt-actions .btn.lg { flex: 1; }
.prompt-actions.wrap .btn.sm { flex: 1; }
.bid-input { width: 110px; min-height: 36px; font-size: var(--fs-sm); }
.my-turn .roll-btn { animation: nudge 1.8s var(--ease) infinite; box-shadow: 0 2px 0 var(--saffron-d), 0 0 0 0 color-mix(in oklch, var(--saffron), transparent 40%); }
@keyframes nudge { 0%, 65%, 100% { transform: none; } 80% { transform: translateY(-3px); } }
.offer, .auction-head { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--sp-3); align-items: center; }
.offer > div, .auction-head > div { display: grid; line-height: 1.4; }
.offer small, .auction-head small { color: var(--ink-3); font-size: var(--fs-xs); }
.swatch { width: 12px; height: 40px; border-radius: 4px; }
.auction { display: grid; gap: var(--sp-3); }
.auction-high { text-align: left; }
.auction-high b { font-size: var(--fs-xl); font-weight: 900; display: block; line-height: 1; }
.auction-timer { height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.auction-timer i { display: block; height: 100%; background: var(--saffron); transform-origin: right; transition: transform 200ms linear; }
.auction-timer i.low { background: var(--pom); }
.trade-alert { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--saffron); background: var(--saffron-l); color: var(--ink); cursor: pointer; font-weight: 600; text-align: start; }
.trade-alert b { margin-inline-start: auto; color: var(--teal-d); }

/* ---------- پنل کناری ---------- */
.hud { height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--surface); border-inline-end: 1px solid var(--line); z-index: 5; min-width: 0; }
.hud-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.hud-title { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.hud-title small { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-tools { display: flex; }
.hud-tools .icon-btn { width: 40px; height: 40px; }

.tab-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.tab-bar button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border: 0; background: transparent; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-3); border-bottom: 2px solid transparent; }
.tab-bar button[aria-selected='true'] { color: var(--teal-d); border-bottom-color: var(--teal); }
.tab-bar .icon { width: 18px; height: 18px; }
.tab-bar .badge { position: absolute; top: 4px; left: 8px; }
.tab-body { overflow-y: auto; padding: var(--sp-3); display: grid; gap: var(--sp-3); align-content: start; min-height: 0; }

.prop-list { display: grid; gap: var(--sp-4); }
.prop-group { display: grid; gap: 2px; }
.pg-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding-bottom: 4px; }
.pg-head .swatch { width: 14px; height: 14px; border-radius: 4px; }
.pg-head small { color: var(--ink-3); margin-inline-start: auto; }
.prop { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
.prop:hover { background: var(--paper-2); }
.prop.mort { background: repeating-linear-gradient(-45deg, var(--paper), var(--paper) 6px, var(--paper-2) 6px, var(--paper-2) 12px); }
.prop-main { display: flex; justify-content: space-between; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); }
.prop-main small { font-weight: 400; }
.prop-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.prop-actions .btn.sm { min-height: 32px; padding: 0 10px; font-size: 0.8rem; }
.bank-stock { font-size: var(--fs-xs); text-align: center; }


.game-chat { height: auto; min-height: 160px; max-height: 40vh; }
.quick-chat { display: flex; gap: 4px; flex-wrap: wrap; }
.quick-chat .chip { border: 0; cursor: pointer; min-height: 30px; }
.game-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.game-log li { padding: 6px 8px; border-radius: 8px; }
.game-log li:first-child { background: var(--teal-l); font-weight: 600; }

/* ---------- صحنه و تخته ---------- */
.stage { grid-area: stage; position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; perspective: 1800px; perspective-origin: 50% 28%; touch-action: manipulation; user-select: none; }
.board-wrap {
  --tilt: 40deg; --rot: 0deg; --shift: 0px; --lx: 30%; --ly: 20%; --sx: 3px; --sy: 3px; --bw: 600px; --bh: 600px; --bs: 600px; --u: 50px;
  --cz: 0px; --roll: 0deg; --cx: 0px; --cy: 0px; --ch: 0px; --sc: 1; --cam-ms: 800ms;
  --thick: calc(var(--u) * 0.3);
  position: relative; width: var(--bw); height: var(--bh); transform-style: preserve-3d;
  /* یک فهرست تبدیل برای هر دو دید؛ در نمای از بالا cz/cx/cy/ch صفرند و در دید اول شخص دوربین را می‌سازند */
  transform: translateY(var(--shift)) translateZ(var(--cz)) rotateZ(var(--roll)) rotateX(var(--tilt)) rotateZ(var(--rot)) scale3d(var(--sc), var(--sc), var(--sc)) translate3d(var(--cx), var(--cy), var(--ch));
  transition: transform 800ms var(--ease);
}
.stage.flat.flat-done .board-wrap { transform: translateY(var(--shift)) rotateZ(var(--rot)); }
/* دوبعدیِ نشسته: بدون پرسپکتیو و فضای سه‌بعدی تا متن خانه‌ها تیز رندر شود (نه به‌صورت بافت مات) */
.stage.flat.flat-done { perspective: none; }
.stage.flat.flat-done .board-wrap { transform-style: flat; }

/* ---------- دید اول شخص ---------- */
/* دنیای بزرگ‌شده (برای تیز ماندن متن از نزدیک) وسط صحنه قفل می‌شود و بیرون از صحنه بریده می‌شود */
.stage.big-world { overflow: hidden; }
.board-wrap.big { position: absolute; left: 50%; top: 50%; margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2); }
.board-wrap.cam-anim { transition: transform var(--cam-ms) cubic-bezier(0.65, 0, 0.3, 1); }
.board-wrap.cam-anim .pawn { transition: transform var(--cam-ms) cubic-bezier(0.65, 0, 0.3, 1); }
.stage.cam-anim { transition: perspective var(--cam-ms) cubic-bezier(0.65, 0, 0.3, 1), perspective-origin var(--cam-ms) cubic-bezier(0.65, 0, 0.3, 1); }
.board-wrap.cam-snap, .board-wrap.cam-snap .token, .board-wrap.cam-snap .pawn, .board-wrap.cam-live { transition: none !important; }
.stage.fp { touch-action: none; cursor: grab; }
/* در دید اول شخص خود دوربین زمان‌بندی را کنترل می‌کند (نگاه با کشیدن باید بی‌تأخیر باشد) */
.stage.fp .board-wrap:not(.cam-anim) { transition: none; }
.stage.fp.looking { cursor: grabbing; }
/* ---------- کارایی دید اول شخص ---------- */
/* فیلترهای همیشگی خانه‌ها هر خانه را یک سطح رندر جدا می‌کردند؛ در دنیای بزرگِ اول شخص (و بدون hover) لازم نیستند */
.stage.fp .tile, .stage.fp .tile:hover { filter: none; transition: none; }
.stage.fp .ticon, .stage.fp .cicon { filter: none; }
.stage.fp .tile:hover .band::after { background-position: 130% 0; }
/* در حین کشیدن اسلایدر اندازه، همه‌چیز بی‌تأخیر دنبال کند */
.board-wrap.zooming, .board-wrap.zooming .token, .board-wrap.zooming .pawn { transition: none !important; }
/* backdrop-filter روی پنل‌های شناور، پشت صحنه‌ای که هر فریم عوض می‌شود یعنی تار کردن دوباره‌ی کل صفحه در هر فریم */
.fp-on .seat-card, .fp-on .console .prompt, .fp-on .tile-info, .fp-on .fp-hint, .fp-on .mobile-tools { -webkit-backdrop-filter: none; backdrop-filter: none; }
.fp-on .seat-card { background: color-mix(in oklch, var(--surface), transparent 5%); }
.fp-on .console .prompt, .fp-on .tile-info { background: color-mix(in oklch, var(--surface), transparent 3%); }
.fp-on .dust { display: none; }
/* اتاق و میزِ پشت تخته؛ خط افق از روی زاویه‌ی دوربین حساب می‌شود */
/* لایه‌ی بلندِ آسمان/میز که افقش وسط خودش است؛ JS فقط آن را بالا و پایین می‌برد (بدون رنگ‌آمیزی دوباره در هر فریم) */
.fp-sky { display: none; position: absolute; left: 0; right: 0; top: -150%; height: 400%; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg,
    oklch(0.2 0.03 250) 30%, oklch(0.3 0.035 240) calc(50% - 2px),
    color-mix(in oklch, var(--felt), oklch(0.5 0.02 80) 20%) 50%, var(--felt-2) 72%);
  will-change: transform; contain: strict; }
.stage.fp .fp-sky { display: block; animation: fpFade 900ms var(--ease) both; }
/* لبه‌های تار و تیره‌ی دید (vignette)؛ در لحظه‌ی کوبیده شدن به زمین پررنگ‌تر می‌شود */
.stage.fp::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, oklch(0.08 0.03 240 / 0.55) 100%);
  animation: fpFade 900ms var(--ease) both; }
.stage.fp.thump::after { animation: fpThump 480ms cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes fpFade { from { opacity: 0; } }
@keyframes fpThump {
  0% { opacity: 1; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 30%, oklch(0.06 0.03 240 / 0.8) 100%); }
  100% { opacity: 1; }
}
/* سایه‌های بزرگِ مات در دنیای بزرگ خیلی سنگین‌اند و از نزدیک هم دیده نمی‌شوند */
.board-wrap.big .board-shadow, .board-wrap.big .shape.slab-shadow { display: none; }
/* مهره‌ی خودِ بازیکن در دید اول شخص دیده نمی‌شود (چشمِ او هستیم) */
.token { transition: transform 380ms var(--ease), opacity 400ms var(--ease); }
.stage.fp .token.self { opacity: 0; }
/* گرد و خاکِ فرود */
.puff { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.puff i { position: absolute; left: 0; top: 0; width: calc(var(--u) * 0.2); height: calc(var(--u) * 0.2); margin: calc(var(--u) * -0.1) 0 0 calc(var(--u) * -0.1); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--rc), oklch(0.92 0.02 85) 65%) 0%, transparent 70%);
  animation: puff 780ms cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.puff.big i { width: calc(var(--u) * 0.34); height: calc(var(--u) * 0.34); margin: calc(var(--u) * -0.17) 0 0 calc(var(--u) * -0.17); animation-duration: 1050ms; }
@keyframes puff {
  from { transform: rotate(var(--a)) translateX(calc(var(--u) * 0.1)) scale(0.4); opacity: 0.95; }
  to { transform: rotate(var(--a)) translateX(calc(var(--u) * 0.62 * var(--d))) scale(1.6); opacity: 0; }
}
.puff.big i { animation-name: puffBig; }
@keyframes puffBig {
  from { transform: rotate(var(--a)) translateX(calc(var(--u) * 0.15)) scale(0.5); opacity: 1; }
  to { transform: rotate(var(--a)) translateX(calc(var(--u) * 1.05 * var(--d))) scale(2); opacity: 0; }
}
/* راهنمای کوچک در دید اول شخص */
.fp-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 6; padding: 6px 12px; border-radius: var(--r-pill); background: oklch(0.12 0.03 240 / 0.7); color: oklch(0.97 0.01 85); font-size: var(--fs-xs); pointer-events: none; animation: fpHint 4.5s var(--ease) forwards; backdrop-filter: blur(6px); white-space: nowrap; }
@keyframes fpHint { 0% { opacity: 0; translate: -50% 8px; } 8%, 80% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }
.icon-btn[aria-pressed='true'] { background: var(--teal-l); color: var(--teal-d); }

/* تخته‌ی مربعی کلاسیک */
.board { position: absolute; inset: 0; display: grid; direction: ltr; }
.board.square {
  --c: calc(var(--bs) * 0.13); --w: calc((var(--bs) - 2 * var(--c)) / 9);
  grid-template-columns: var(--c) repeat(9, 1fr) var(--c); grid-template-rows: var(--c) repeat(9, 1fr) var(--c);
  background: var(--board-line); border-radius: calc(var(--bs) * 0.01);
  font-size: max(7px, calc(var(--bs) / 62)); gap: 1px; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--bs) * 0.004) var(--inlay);
}
.frame { position: absolute; inset: calc(var(--bs) * -0.024); border-radius: calc(var(--bs) * 0.02); transform-style: preserve-3d; transform: translateZ(-0.5px);
  background:
    linear-gradient(135deg, oklch(1 0 0 / 0.08), transparent 40%, oklch(0 0 0 / 0.15)),
    var(--frame);
  box-shadow: inset 0 0 0 calc(var(--bs) * 0.006) color-mix(in oklch, var(--inlay), transparent 55%), inset 0 0 0 calc(var(--bs) * 0.009) var(--frame), inset 0 0 0 calc(var(--bs) * 0.0105) color-mix(in oklch, var(--inlay), transparent 70%); }
.board-shadow { position: absolute; inset: calc(var(--bs) * -0.024); transform: translateZ(calc(var(--thick) * -1 - 2px)) translate(calc(var(--bs) * 0.012), calc(var(--bs) * 0.04)); border-radius: 8%;
  background: radial-gradient(closest-side, oklch(0.08 0.03 240 / 0.5) 80%, transparent); }
.stage.flat .board-shadow { transform: translate(0, calc(var(--bs) * 0.012)); }
.edge { position: absolute; background: var(--board-edge); }
.edge.e-s { left: 0; right: 0; top: 100%; height: var(--thick); transform-origin: top; transform: rotateX(-90deg); background: linear-gradient(var(--board-edge), var(--board-edge-2)); }
.edge.e-n { left: 0; right: 0; bottom: 100%; height: var(--thick); transform-origin: bottom; transform: rotateX(90deg); }
.edge.e-e { top: 0; bottom: 0; left: 100%; width: var(--thick); transform-origin: left; transform: rotateY(90deg); background: var(--board-edge-2); }
.edge.e-w { top: 0; bottom: 0; right: 100%; width: var(--thick); transform-origin: right; transform: rotateY(-90deg); background: var(--board-edge-2); }
.board-light { position: absolute; inset: 0; pointer-events: none; border-radius: calc(var(--bs) * 0.012);
  /* روکش شیشه‌ای تخته: بازتاب ملایم و لبه‌ی براق، بدون شستن رنگ متن‌ها */
  background:
    linear-gradient(118deg, transparent 32%, oklch(1 0 0 / 0.03) 40%, oklch(1 0 0 / 0.01) 47%, transparent 52%),
    radial-gradient(circle at 30% 20%, oklch(1 0.02 90 / 0.08), transparent 55%);
  overflow: hidden; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28), inset 0 0 0 1px oklch(1 0 0 / 0.07), inset 0 -1px 0 oklch(0 0 0 / 0.12);
  mix-blend-mode: normal; transform: translateZ(0.5px); }
:root[data-theme='dark'] .board-light { background:
    linear-gradient(118deg, transparent 32%, oklch(1 0 0 / 0.045) 40%, oklch(1 0 0 / 0.015) 47%, transparent 52%),
    radial-gradient(circle at 30% 20%, oklch(0.95 0.03 90 / 0.06), transparent 40%); }
.is-shaped .board-light { display: none; }

/* تخته‌های شکل‌دار (چهارباغ، پیچ‌وتاب، مارپیچ) */
.shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.shape.plate .p { fill: var(--board-line); }
.shape.plate .in { fill: var(--board-in); }
.shape.plate .gl { fill: none; stroke: var(--girih); stroke-width: 0.028; }
.shape.plate .gd { fill: var(--girih-dot); }
.shape.slab { transform: translateZ(calc(var(--thick) * -1)); }
.shape.slab rect { fill: var(--board-edge); }
.shape.slab-shadow { transform: translateZ(calc(var(--thick) * -1 - 2px)) translate(calc(var(--u) * 0.15), calc(var(--u) * 0.4)); opacity: 0.35; }
.shape.slab-shadow rect { fill: oklch(0.06 0.03 240); }
.stage.flat .shape.slab { transform: translate(0, calc(var(--u) * 0.12)); }
.board.shaped { font-size: max(6px, calc(var(--u) * 0.145)); transform: translateZ(0.5px); }
.board.shaped .tile { margin: 1.5px; border-radius: calc(var(--u) * 0.1); }

/* ---------- خانه‌ها ---------- */
.tile { position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; overflow: hidden; outline-offset: -2px; color: var(--tile-ink);
  background: linear-gradient(180deg, color-mix(in oklch, var(--tile), oklch(1 0 0) 5%), var(--tile) 55%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07), inset 0 -1px 0 oklch(0 0 0 / 0.1);
  /* کارایی: filter همیشگی روی ۴۰ خانه هر خانه را یک سطح رندر جدا در فضای سه‌بعدی می‌کرد (سنگین‌ترین بخش تخته).
     حالت hover با یک لایه‌ی نورِ inset شبیه‌سازی می‌شود که فقط همان یک خانه را رنگ می‌کند. */
  transition: box-shadow 200ms var(--ease); }
.tile:hover { box-shadow: inset 0 0 0 999px oklch(1 0 0 / 0.07), inset 0 1px 0 oklch(1 0 0 / 0.07), inset 0 -1px 0 oklch(0 0 0 / 0.1); }
/* محتوای هر خانه خلاف چرخش تخته می‌چرخد تا از دید کاربر همیشه صاف باشد؛ چیدمان بر اساس ضلعِ روی صفحه (data-ss) */
.tile .ti { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--c); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; direction: rtl;
  rotate: calc(var(--rot) * -1); transition: rotate 800ms var(--ease); }
.tile[data-ss='top'] .ti { flex-direction: column-reverse; }
.tile[data-ss='top'] .tname { padding: 0 5% 6%; }
.tile[data-ss='top'] .tprice { margin: 0 0 auto; padding: 8% 0 0; }
.tile[data-ss='top'] .ticon { margin: 0 0 12%; }
.tile[data-ss='left'] .ti, .tile[data-ss='right'] .ti {
  width: var(--c); height: var(--w); display: grid; grid-template-columns: 24% minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; align-items: center; justify-items: center; }
.tile[data-ss='right'] .ti { grid-template-columns: minmax(0, 1fr) 24%; }
.tile[data-ss='left'] .ti > :first-child, .tile[data-ss='right'] .ti > :first-child { grid-row: 1 / -1; grid-column: 1; align-self: stretch; }
.tile[data-ss='right'] .ti > :first-child { grid-column: 2; }
.tile[data-ss='left'] .ti > .tname, .tile[data-ss='left'] .ti > .tprice { grid-column: 2; }
.tile[data-ss='right'] .ti > .tname, .tile[data-ss='right'] .ti > .tprice { grid-column: 1; }
.tile[data-ss='left'] .ti > .tname, .tile[data-ss='right'] .ti > .tname { grid-row: 2; padding: 0 6%; }
.tile[data-ss='left'] .ti > .tprice, .tile[data-ss='right'] .ti > .tprice { grid-row: 3; margin: 0; padding: 4% 0 0; }
.tile[data-ss='left'] .band, .tile[data-ss='right'] .band { width: 100%; height: 100%; }
.tile[data-ss='left'] .band { box-shadow: inset 1px 0 0 oklch(0 0 0 / 0.25); }
.tile[data-ss='right'] .band { box-shadow: inset -1px 0 0 oklch(0 0 0 / 0.25); }
.tile[data-ss='left'] .houses, .tile[data-ss='right'] .houses { flex-direction: column; }
.tile[data-ss='left'] .houses .house, .tile[data-ss='right'] .houses .house { width: 56%; height: 15%; }
.tile[data-ss='left'] .houses .hotel, .tile[data-ss='right'] .houses .hotel { width: 64%; height: 44%; }
.tile[data-ss='left'] .ticon, .tile[data-ss='right'] .ticon { margin: 0; display: grid; place-items: center; font-size: 1.8em; }
.tile.corner .ti { width: var(--c); height: var(--c); justify-content: center; gap: 2%; }
.go-arrow { rotate: var(--rot); transition: rotate 800ms var(--ease); }
.tile.flat .ti { inset: 0; left: 0; top: 0; width: auto; height: auto; translate: none; }
.tile.flat.special .ti { justify-content: center; gap: 3%; }

.band { position: relative; width: 100%; height: 22%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklch, var(--gc), oklch(1 0 0) 16%), var(--gc) 55%, color-mix(in oklch, var(--gc), oklch(0 0 0) 14%));
  box-shadow: inset 0 -1px 0 oklch(0 0 0 / 0.25); }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.4) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0; transition: background-position 700ms var(--ease); }
.tile:hover .band::after { background-position: -130% 0; }
:root[data-theme='dark'] .band { box-shadow: inset 0 -1px 0 oklch(0 0 0 / 0.35), 0 2px 10px -2px color-mix(in oklch, var(--gc), transparent 30%); }
.board.shaped .band { height: 21%; }
.tname { font-weight: 900; line-height: 1.2; padding: 6% 5% 0; font-size: 1em; word-break: break-word; -webkit-font-smoothing: antialiased; }
/* هاله‌ی هم‌رنگ خانه دور متن تا روی هر نور و بازتابی خوانا بماند */
.tname, .tprice, .go-sub, .tile .cicon + .tname { text-shadow: 0 0 0.25em var(--tile), 0 0 0.08em var(--tile); }
.board.shaped .tname { padding: 5% 7% 0; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tprice { margin-top: auto; padding-bottom: 8%; font-size: 0.95em; color: var(--tile-ink-2); font-weight: 700; }
.ticon { font-size: 2.2em; line-height: 1; margin-top: 10%; text-shadow: 0 1px 1px oklch(0 0 0 / 0.2); }
.board.shaped .ticon { font-size: 2.1em; margin-top: 9%; }
.ticon.chance { font-size: 2.8em; font-weight: 900; color: var(--teal-d); }
.cicon { font-size: 2.8em; line-height: 1; text-shadow: 0 2px 3px oklch(0 0 0 / 0.25); }
.tile.corner .tname, .tile.special .tname { font-size: 1.05em; font-weight: 900; padding: 0; }
.go-arrow { font-size: 2.2em; font-weight: 900; color: var(--pom); line-height: 0.8; }
.go-sub { font-size: 0.78em; color: var(--tile-ink-2); padding: 0 4%; }
.tile.t-go { background: linear-gradient(160deg, color-mix(in oklch, var(--saffron) 38%, var(--tile)), color-mix(in oklch, var(--saffron) 16%, var(--tile))); }
.tile.t-gotojail { background: linear-gradient(160deg, color-mix(in oklch, var(--pom) 30%, var(--tile)), color-mix(in oklch, var(--pom) 12%, var(--tile))); }
.tile.t-jail { background: repeating-linear-gradient(90deg, var(--tile) 0 14%, color-mix(in oklch, var(--tile-ink), var(--tile) 88%) 14% 17%); }
.tile.t-parking { background: linear-gradient(160deg, color-mix(in oklch, var(--teal) 26%, var(--tile)), color-mix(in oklch, var(--teal) 10%, var(--tile))); }
.tile.go-flash { animation: goFlash 900ms var(--ease); }
@keyframes goFlash { 0% { box-shadow: inset 0 0 0 999px oklch(1 0.05 85 / 0.45); } }

.houses { display: flex; gap: 6%; justify-content: center; align-items: center; height: 100%; width: 100%; position: relative; z-index: 1; }
.houses .house { width: 16%; height: 62%; background: linear-gradient(oklch(0.72 0.16 150), oklch(0.52 0.14 150)); border-radius: 2px 2px 1px 1px; clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%); box-shadow: 0 0 0 1px oklch(0.98 0.01 90); animation: popIn 480ms var(--ease) both; }
.houses .hotel { width: 46%; height: 72%; background: linear-gradient(oklch(0.66 0.2 25), oklch(0.48 0.18 25)); border-radius: 2px; box-shadow: 0 0 0 1px oklch(0.98 0.01 90), 0 0 10px oklch(0.6 0.2 25 / 0.6); animation: popIn 480ms var(--ease) both; }
@keyframes popIn { from { transform: scale(0) translateY(-10px); opacity: 0; } }
.owner-dot { position: absolute; bottom: 3%; left: 50%; translate: -50% 0; width: 40%; height: 7%; border-radius: 99px; background: var(--oc); opacity: 0; transition: opacity 300ms; box-shadow: 0 0 8px var(--oc); }
.tile.owned .owner-dot { opacity: 1; }
.tile.owned { background: linear-gradient(180deg, color-mix(in oklch, var(--oc) 10%, var(--tile)), color-mix(in oklch, var(--oc) 20%, var(--tile))); }
.tile.mortgaged .ti > *:not(.owner-dot) { opacity: 0.35; }
.tile.mortgaged .ti::after { content: 'رهن'; position: absolute; inset: auto 0 38% 0; text-align: center; font-weight: 900; color: var(--pom); font-size: 0.9em; }
.tile.here { box-shadow: inset 0 0 0 2px var(--hc, var(--saffron)), inset 0 0 18px color-mix(in oklch, var(--hc, var(--saffron)), transparent 45%); }
/* تپش خانه‌ی نوبت با opacity یک لایه‌ی جدا (کامپوزیت روی GPU)؛ انیمیشنِ box-shadow هر فریم کل تخته را دوباره رنگ می‌کرد */
.tile.here::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; will-change: opacity;
  box-shadow: inset 0 0 0 3px var(--hc, var(--saffron)), inset 0 0 28px color-mix(in oklch, var(--hc, var(--saffron)), transparent 30%);
  animation: hereGlow 1.8s var(--ease) infinite alternate; }
@keyframes hereGlow { to { opacity: 1; } }
.tile.landed { animation: landed 800ms var(--ease); }
@keyframes landed { 0% { box-shadow: inset 0 0 0 999px oklch(1 0 0 / 0.4); } }
.tile.stamped::before { content: ''; position: absolute; inset: 6%; border-radius: 12%; border: 3px solid var(--oc); z-index: 2; pointer-events: none; animation: stamp 700ms var(--ease) forwards; }
@keyframes stamp { 0% { transform: scale(1.8) rotate(-12deg); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 0; } }

/* مرکز تخته‌ی مربعی */
.board-center { grid-row: 2 / 11; grid-column: 2 / 11; position: relative; background: var(--board-in); display: grid; place-items: center; overflow: hidden; }
.girih { position: absolute; inset: 0; opacity: 0.9;
  background:
    conic-gradient(from 22.5deg at 50% 50%, var(--girih) 0 12.5%, transparent 0 25%, var(--girih) 0 37.5%, transparent 0 50%, var(--girih) 0 62.5%, transparent 0 75%, var(--girih) 0 87.5%, transparent 0) 0 0 / calc(var(--bs) * 0.09) calc(var(--bs) * 0.09);
  -webkit-mask-image: radial-gradient(circle at center, transparent 24%, black 62%); mask-image: radial-gradient(circle at center, transparent 24%, black 62%); }
.logo { position: relative; display: grid; justify-items: center; line-height: 1; pointer-events: none; }
.board-center .logo { transform: rotate(-45deg); }
.board-center .logo, .board-center .deck, .deco-logo .logo, .deco-deck .deck { rotate: calc(var(--rot) * -1); transition: rotate 800ms var(--ease); }
.logo span { display: block; padding: 0.35em 0.9em; background: linear-gradient(180deg, oklch(0.62 0.2 25), oklch(0.5 0.19 25)); color: var(--on-accent); font-weight: 900; font-size: calc(var(--bs) * 0.06); border-radius: 0.2em;
  box-shadow: 0 0.08em 0 oklch(0.36 0.14 25), 0 0 0 0.05em var(--inlay), 0 0.3em 0.6em -0.2em oklch(0.1 0.05 25 / 0.6); text-shadow: 0 0.04em 0 oklch(0.35 0.14 25); }
.logo small { margin-top: 0.7em; font-weight: 800; color: var(--tile-ink-2); font-size: calc(var(--bs) * 0.02); letter-spacing: 0.02em; }
.deco-logo { display: grid; place-items: center; position: relative; z-index: 1; }
.deco-logo .logo span { font-size: calc(var(--u) * 0.62); }
.deco-logo .logo small { font-size: calc(var(--u) * 0.2); }
.deco-deck { display: grid; place-items: center; position: relative; z-index: 1; pointer-events: none; }
.deck { position: absolute; width: calc(var(--bs) * 0.15); height: calc(var(--bs) * 0.1); border-radius: 8%; display: grid; place-items: center; align-content: center; color: var(--on-accent); font-size: calc(var(--bs) * 0.016);
  background: linear-gradient(160deg, oklch(0.62 0.1 196), oklch(0.48 0.1 200));
  box-shadow: 0 2px 0 oklch(0.3 0.06 205), 0 4px 0 oklch(0.95 0.02 90), 0 6px 0 oklch(0.3 0.06 205), 0 8px 0 oklch(0.95 0.02 90), 0 10px 0 oklch(0.3 0.06 205), 0 16px 20px -8px oklch(0.1 0.04 240 / 0.6), inset 0 0 0 0.25em oklch(1 0 0 / 0.12); }
.deco-deck .deck { position: relative; width: min(82%, calc(var(--u) * 2.2)); height: auto; aspect-ratio: 1.45; font-size: calc(var(--u) * 0.2); }
.deck b { font-size: 1.1em; } .deck i { font-style: normal; font-size: 1.7em; line-height: 1; }
.board-center .deck.chance { top: 16%; left: 16%; transform: rotate(-45deg); }
.board-center .deck.chest { bottom: 16%; right: 16%; transform: rotate(-45deg); }
.deck.chest { background: linear-gradient(160deg, oklch(0.86 0.14 84), oklch(0.74 0.15 72)); color: var(--on-gold);
  box-shadow: 0 2px 0 var(--saffron-d), 0 4px 0 oklch(0.95 0.02 90), 0 6px 0 var(--saffron-d), 0 8px 0 oklch(0.95 0.02 90), 0 10px 0 var(--saffron-d), 0 16px 20px -8px oklch(0.1 0.04 240 / 0.6), inset 0 0 0 0.25em oklch(1 0 0 / 0.18); }

/* ---------- افکت‌های روی تخته ---------- */
.fx-layer, .token-layer, .dice-layer { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; transform: translateZ(1px); }
.ripple { position: absolute; left: 0; top: 0; width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); margin: calc(var(--u) * -0.6) 0 0 calc(var(--u) * -0.6); border-radius: 50%;
  border: 2px solid var(--rc); box-shadow: 0 0 14px var(--rc), inset 0 0 12px var(--rc); animation: ripple 1s var(--ease) forwards; }
.ripple.big { width: calc(var(--u) * 2); height: calc(var(--u) * 2); margin: calc(var(--u) * -1) 0 0 calc(var(--u) * -1); border-width: 3px; animation-duration: 1.4s; }
@keyframes ripple { from { scale: 0.2; opacity: 1; } to { scale: 1.6; opacity: 0; } }
.trail { position: absolute; left: 0; top: 0; width: calc(var(--u) * 0.3); height: calc(var(--u) * 0.3); margin: calc(var(--u) * -0.15) 0 0 calc(var(--u) * -0.15); border-radius: 50%;
  background: radial-gradient(circle, var(--rc), transparent 70%); animation: trail 900ms ease-out forwards; }
@keyframes trail { from { scale: 1.4; opacity: 0.9; } to { scale: 0.2; opacity: 0; } }

/* ---------- مهره‌ها ---------- */
.token { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.token.moving { transition: none; }
.token.out { display: none; }
.tshadow { position: absolute; width: calc(var(--bs) * 0.044); height: calc(var(--bs) * 0.044); left: calc(var(--bs) * -0.022); top: calc(var(--bs) * -0.022); border-radius: 50%; background: radial-gradient(closest-side, oklch(0.1 0.04 240 / 0.5), oklch(0.1 0.04 240 / 0.25) 60%, transparent); transform: translate(3px, 3px); }
.halo { position: absolute; width: calc(var(--bs) * 0.08); height: calc(var(--bs) * 0.08); left: calc(var(--bs) * -0.04); top: calc(var(--bs) * -0.04); border-radius: 50%; border: 2px solid var(--pc); opacity: 0; box-shadow: 0 0 14px var(--pc), inset 0 0 10px var(--pc); }
.token.current .halo { animation: halo 1.7s var(--ease) infinite; }
@keyframes halo { 0% { scale: 0.6; opacity: 0.95; } 100% { scale: 1.45; opacity: 0; } }
.pawn {
  position: absolute; left: 0; top: 0; width: calc(var(--bs) * 0.048); height: calc(var(--bs) * 0.07);
  transform-origin: 50% 100%;
  transform: translate(-50%, -94%) rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1));
}
.stage.flat .pawn { transform: translate(-50%, -70%) rotateZ(calc(var(--rot) * -1)); }
.pawn .pawn3d { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.pawn .pw-contact { display: none; }
/* بدون filter روی عنصرِ متحرک: drop-shadow روی چیزی که هر فریم تکان می‌خورد یعنی رنگ‌آمیزی دوباره در هر فریم */
.token.current .pawn .pawn3d { animation: bob 1.4s var(--ease) infinite alternate; will-change: translate; }
.token.landing .pawn .pawn3d { animation: land 460ms var(--ease); }
.token.jailed .pawn .pawn3d { opacity: 0.7; }
@keyframes bob { to { translate: 0 calc(var(--bs) * -0.01); } }
@keyframes land { 0% { scale: 1.2 0.8; } 60% { scale: 0.95 1.06; } }

/* ---------- تاس ---------- */
/* opacity روی والد، سه‌بعدی بودن تاس را صاف می‌کرد؛ برای همین از visibility استفاده می‌شود */
.dice-layer { visibility: hidden; }
.dice-layer.show { visibility: visible; }
.die3d { position: absolute; left: 0; top: 0; width: var(--ds); height: var(--ds); transform-style: preserve-3d; will-change: transform; }
/* مش مکعب گرد: هر تکه با matrix3d در جای خودش قرار می‌گیرد (dice.js) */
.die3d > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.die-core { background: rgb(214 208 194); }
.die3d .dp { background: rgb(246 242 232); }
.die3d .dp.tri { clip-path: polygon(0 0, 100% 0, 0 100%); }
.die3d .face { display: grid; padding: 4%; grid-template: repeat(3, 1fr) / repeat(3, 1fr); background: rgb(246 242 232); }
.die3d .face i { width: 76%; height: 76%; border-radius: 50%; place-self: center;
  background: radial-gradient(circle at 58% 62%, oklch(0.4 0.03 245), var(--pip) 72%);
  box-shadow: inset 0 calc(var(--ds) * 0.018) calc(var(--ds) * 0.026) oklch(0 0 0 / 0.65), 0 calc(var(--ds) * 0.006) 0 oklch(1 0 0 / 0.85); }
.die3d .f1 i, .die3d .f5 i:nth-child(5), .die3d .f3 i:nth-child(2) { grid-area: 2 / 2; background: radial-gradient(circle at 42% 38%, oklch(0.66 0.2 25), oklch(0.47 0.19 25)); }
.die3d .f1 i { width: 100%; height: 100%; }
.die3d .f2 i:nth-child(1), .die3d .f3 i:nth-child(1), .die3d .f4 i:nth-child(1), .die3d .f5 i:nth-child(1), .die3d .f6 i:nth-child(1) { grid-area: 1 / 1; }
.die3d .f2 i:nth-child(2), .die3d .f3 i:nth-child(3), .die3d .f4 i:nth-child(2), .die3d .f5 i:nth-child(2), .die3d .f6 i:nth-child(2) { grid-area: 3 / 3; }
.die3d .f4 i:nth-child(3), .die3d .f5 i:nth-child(3), .die3d .f6 i:nth-child(3) { grid-area: 1 / 3; }
.die3d .f4 i:nth-child(4), .die3d .f5 i:nth-child(4), .die3d .f6 i:nth-child(4) { grid-area: 3 / 1; }
.die3d .f6 i:nth-child(5) { grid-area: 2 / 1; } .die3d .f6 i:nth-child(6) { grid-area: 2 / 3; }
.die-shadow { position: absolute; left: 0; top: 0; width: var(--ds); height: var(--ds); border-radius: 30%; background: radial-gradient(closest-side, oklch(0.08 0.03 240 / 0.55), transparent); }
.dice-layer.double .die3d .face i { outline: calc(var(--ds) * 0.02) solid color-mix(in oklch, var(--saffron), transparent 20%); outline-offset: calc(var(--ds) * 0.01); }

/* ---------- اطلاعات خانه ---------- */
.tile-info { position: absolute; top: var(--sp-4); left: 50%; translate: -50% 0; width: min(320px, calc(100% - 32px)); background: color-mix(in oklch, var(--surface), transparent 8%); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; z-index: 6; border: 1px solid var(--line); }
.ti-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); color: var(--ink); }
.ti-head b { font-size: var(--fs-lg); background: var(--surface); border-radius: 8px; padding: 2px 10px; }
.ti-head .icon-btn { background: var(--surface); width: 36px; height: 36px; }
.ti-body { padding: var(--sp-4); display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.ti-body table { width: 100%; border-collapse: collapse; }
.ti-body td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.ti-body td:last-child { text-align: left; font-weight: 700; }
.ti-body tr.on td { color: var(--teal-d); font-weight: 800; }
.ti-body tr.sub td { color: var(--ink-3); }

/* ---------- بنر نوبت ---------- */
.turn-banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 7;
  display: flex; align-items: center; gap: 12px; padding: 10px 26px 10px 12px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-weight: 900; font-size: var(--fs-lg); white-space: nowrap;
  box-shadow: var(--sh-lg), 0 0 0 2px var(--pc), 0 0 50px -8px var(--pc); }
.turn-banner:not(.has-player) { padding-inline: 26px; }

.turn-banner.mine { background: var(--saffron); color: var(--on-gold); font-size: var(--fs-xl); box-shadow: var(--sh-lg), 0 0 0 3px oklch(0.95 0.08 90 / 0.6), 0 0 80px -6px var(--saffron); }

/* ---------- کارت شانس/سرنوشت ---------- */
.card-veil { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: radial-gradient(circle at 50% 45%, oklch(0.1 0.02 250 / 0.25), oklch(0.05 0.02 250 / 0.6)); opacity: 0; }
.card-holder { position: fixed; z-index: var(--z-overlay); width: 0; height: 0; perspective: 1200px; cursor: pointer; }
.card3d { position: absolute; width: min(320px, 80vw); aspect-ratio: 1.45; left: 0; top: 0; translate: -50% -50%; transform-style: preserve-3d; }
.cface { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(1px); display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px 22px; text-align: center; box-shadow: var(--sh-lg), 0 0 60px -10px oklch(0.8 0.12 80 / 0.5); }
.cback { background: oklch(0.53 0.1 196); color: var(--on-accent); background-image: conic-gradient(from 45deg, oklch(0.6 0.1 196) 0 25%, transparent 0 50%, oklch(0.6 0.1 196) 0 75%, transparent 0); background-size: 22px 22px; box-shadow: var(--sh-lg), inset 0 0 0 6px oklch(0.45 0.09 200), inset 0 0 0 8px oklch(0.8 0.13 80); }
.card3d.chest .cback { background-color: oklch(0.8 0.15 78); color: var(--on-gold); background-image: conic-gradient(from 45deg, oklch(0.85 0.14 82) 0 25%, transparent 0 50%, oklch(0.85 0.14 82) 0 75%, transparent 0); box-shadow: var(--sh-lg), inset 0 0 0 6px oklch(0.7 0.14 70), inset 0 0 0 8px oklch(0.97 0.03 90); }
.cback b { font-size: 2rem; font-weight: 900; background: inherit; padding: 0 12px; }
.cback i { font-style: normal; font-size: 2.6rem; }
.cfront { background: oklch(0.985 0.01 88); color: oklch(0.27 0.04 245); transform: rotateY(180deg) translateZ(1px); border: 6px solid oklch(0.53 0.1 196); box-shadow: var(--sh-lg), inset 0 0 0 2px oklch(0.8 0.13 80); }
.card3d.chest .cfront { border-color: oklch(0.8 0.15 78); }
.ctitle { font-weight: 900; color: oklch(0.43 0.09 200); font-size: var(--fs-lg); }
.card3d.chest .ctitle { color: oklch(0.5 0.12 70); }
.cfront p { font-size: 1.05rem; font-weight: 600; line-height: 1.7; }
.cfront small { color: oklch(0.55 0.025 245); font-size: var(--fs-xs); }

.fly-coin { position: fixed; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; z-index: var(--z-fx); pointer-events: none;
  background: radial-gradient(circle at 35% 35%, oklch(0.94 0.12 92), var(--saffron) 55%, var(--saffron-d)); box-shadow: inset 0 0 0 2px oklch(0.72 0.14 75), 0 0 10px oklch(0.85 0.15 85 / 0.6); }
.float-text { position: fixed; z-index: var(--z-fx); pointer-events: none; font-weight: 900; color: var(--gold-ink); font-size: 1.15rem; text-shadow: 0 1px 0 var(--surface), 0 0 12px var(--surface); white-space: nowrap; }
.float-text.bad { color: var(--pom); font-size: 1.4rem; }

/* ---------- پایان بازی ---------- */
.game-over { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, oklch(0.2 0.04 245 / 0.45), oklch(0.08 0.03 245 / 0.75)); padding: var(--sp-4); }
.game-over[hidden] { display: none; }
.go-card { width: min(500px, 100%); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-6); display: grid; gap: var(--sp-4); box-shadow: var(--sh-lg), 0 0 0 1px var(--line); animation: viewIn 500ms var(--ease); }
.go-card h2 { font-size: var(--fs-2xl); font-weight: 900; }
.go-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.go-list li { display: grid; grid-template-columns: 60px 1fr auto 56px; gap: var(--sp-3); align-items: center; padding: 8px; border-radius: var(--r-md); }
.go-list li.me { background: var(--teal-l); }
.go-name { font-weight: 700; display: flex; align-items: center; gap: 10px; min-width: 0; }


/* ---------- تمرین ---------- */
.practice-setup { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-4); }
.ps-card { width: min(560px, 100%); display: grid; gap: var(--sp-4); justify-items: start; }
.ps-card h1 { font-size: var(--fs-xl); }
.ps-card .pwf-block { width: 100%; }

/* ---------- تخته در اندازه‌های متوسط: صندلی‌ها باریک‌تر ---------- */
@media (max-width: 1280px) and (min-width: 901px) {
  .game { --hud-w: 310px; --seat-w: 168px; }
  .seat-card { grid-template-columns: 44px minmax(0, 1fr); padding: 12px 10px 10px; gap: 1px 10px; }
  .seat-av, .seat-av .pawn-badge { width: 44px; height: 44px; }
  .pmoney { font-size: 1.05rem; }
}

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .arena { height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'strip' 'stage'; padding: 0 0 150px; gap: 0; }
  .seats-col, .console { display: none; }
  .players.strip { grid-area: strip; list-style: none; margin: 0; display: flex; gap: 8px; overflow-x: auto; padding: 14px 10px 8px; scrollbar-width: none; z-index: 3; }
  .players.strip .seat-card { flex: none; grid-template-columns: 34px auto; grid-template-areas: 'av name' 'av money'; gap: 0 8px; padding: 6px 12px 6px 10px; border-radius: 14px; }
  .players.strip .seat-av, .players.strip .seat-av .pawn-badge { width: 34px; height: 34px; }
  .players.strip .seat-av .ring { inset: -6px; }
  .players.strip .seat-no { display: none; }
  .players.strip .pname { font-size: var(--fs-xs); max-width: 76px; }
  .players.strip .pmoney { font-size: var(--fs-sm); }
  .players.strip .pmoney-wrap .coin-ic { width: 12px; height: 12px; }
  .players.strip .seat-card.active { transform: none; }
  .players.strip .seat-card.active::after { display: none; }
  .players.strip .seat-turn { top: -9px; font-size: 10px; padding: 0 8px; }
  .hud { position: fixed; inset-inline: 0; bottom: 0; height: auto; max-height: 78dvh; grid-template-rows: auto auto minmax(0, 1fr); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -14px 34px -12px oklch(0.05 0.02 250 / 0.5); padding-bottom: var(--safe-b); z-index: var(--z-sheet); }
  .hud-head { display: none; }
  .hud .prompt { order: 1; border-top: 0; padding: var(--sp-3); background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .hud .tab-bar { order: 2; }
  .hud .tab-body { order: 3; display: none; max-height: 50dvh; }
  .hud.sheet-open .tab-body { display: grid; }
  .game.my-turn .hud { box-shadow: 0 -14px 34px -12px oklch(0.05 0.02 250 / 0.5), 0 -2px 0 color-mix(in oklch, var(--saffron), transparent 30%); }
  .tile-info { top: auto; bottom: 160px; left: 8px; right: 8px; translate: none; width: auto; }
  .mobile-tools { display: flex; }
  .turn-banner { top: 36%; font-size: var(--fs-md); }
  .turn-banner.mine { font-size: var(--fs-lg); }
  .prompt-actions .btn.lg { min-height: 52px; }
}
@media (min-width: 901px) { .mobile-tools { display: none; } }
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .game { grid-template-columns: 320px 1fr; }
  .hud { position: static; max-height: none; height: 100dvh; border-radius: 0; grid-template-rows: auto auto minmax(0, 1fr); }
  .hud .tab-body { display: grid; }
  .arena { padding-bottom: 0; }
}
@media (max-height: 760px) and (min-width: 901px) { .seats-col .pips { display: none; } .seats-col { gap: 12px; } }
.mobile-tools { position: absolute; top: 70px; inset-inline-end: 6px; flex-direction: column; gap: 2px; z-index: 4; background: color-mix(in oklch, var(--surface), transparent 12%); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.mobile-tools .icon-btn { width: 40px; height: 40px; }

/* ---------- مهره‌های سه‌بعدی به جای آواتار ---------- */
.pawn-badge { position: relative; flex: none; display: grid; place-items: end center; border-radius: 50%; width: 44px; height: 44px;
  background:
    radial-gradient(ellipse 60% 18% at 50% 86%, oklch(0.05 0.02 250 / 0.35), transparent 70%),
    radial-gradient(circle at 50% 28%, color-mix(in oklch, var(--pc) 34%, var(--surface)), color-mix(in oklch, var(--pc) 10%, var(--paper-2)) 72%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), inset 0 -8px 14px -8px color-mix(in oklch, var(--pc), black 35%), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--pc), 0 6px 14px -6px color-mix(in oklch, var(--pc), black 30%); }
.pawn-badge .pawn3d { width: 60%; height: 84%; margin-bottom: 7%; overflow: visible; filter: drop-shadow(0 2px 1.5px oklch(0.05 0.02 250 / 0.35)); }
.pawn-badge .pw-contact { display: none; }
.pawn-badge.md { width: 56px; height: 56px; }
.pawn-badge.sm { width: 34px; height: 34px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 0 0 1.5px var(--surface), 0 0 0 3px var(--pc); }
.pawn-badge.xs { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px var(--pc); }
.turn-banner .pawn-badge { width: 40px; height: 40px; }
.go-name .pawn-badge { width: 36px; height: 36px; }
.owner-name { display: inline-flex; align-items: center; gap: 4px; }
.pawn3d.inline { width: 16px; height: 22px; overflow: visible; }

/* ---------- معامله ---------- */
.trade-card, .trade-compose { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.trade-card.incoming { border-color: color-mix(in oklch, var(--pc), transparent 30%); background: linear-gradient(180deg, color-mix(in oklch, var(--pc) 10%, var(--paper)), var(--paper) 60%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--pc), transparent 85%), 0 18px 36px -22px var(--pc); animation: tradeIn 520ms var(--ease) both; }
@keyframes tradeIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.trade-card.pending { border-style: dashed; }
.tc-head { display: flex; align-items: center; gap: 10px; }
.tc-head > div { display: grid; line-height: 1.35; }
.tc-head small { color: var(--ink-3); font-size: var(--fs-xs); }
.tdots::after { content: '…'; display: inline-block; animation: dots 1.2s steps(4) infinite; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } }
.tc-title { display: flex; align-items: baseline; justify-content: space-between; }
.tc-title small { color: var(--ink-3); font-size: var(--fs-xs); }
.tc-actions { display: flex; gap: 8px; }
.tc-actions .btn:first-child { flex: 1; }

.twho { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.twho-btn { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink-2);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease); }
.twho-btn span { font-weight: 700; font-size: var(--fs-xs); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twho-btn small { font-size: 11px; color: var(--ink-3); }
.twho-btn:hover { transform: translateY(-1px); }
.twho-btn[aria-pressed='true'] { border-color: var(--pc); background: color-mix(in oklch, var(--pc) 14%, var(--surface)); color: var(--ink); box-shadow: 0 0 0 1px var(--pc); }

.tblock, .tside { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--pc); }
.tside-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-sm); }
.tside-h small { margin-inline-start: auto; color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); }
.tside-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tnone { font-size: var(--fs-xs); margin: 0; }
.tswap { justify-self: center; display: grid; place-items: center; width: 30px; height: 30px; margin: -14px 0; z-index: 1; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--teal-d); box-shadow: var(--sh-sm); }
.tswap .icon { width: 16px; height: 16px; rotate: 90deg; }

.pcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-width: 84px; min-height: 70px; padding: 0 0 6px; border-radius: 10px; overflow: hidden; text-align: center; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); }
button.pcard { cursor: pointer; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease); }
button.pcard:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px oklch(0.1 0.02 250 / 0.5); }
.pcard-band { height: 14px; background: var(--gc); display: grid; place-items: center; font-size: 10px; line-height: 1; }
.pcard-name { font-size: 11px; font-weight: 800; line-height: 1.3; padding: 5px 4px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-price { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.pcard.mort { background: repeating-linear-gradient(-45deg, var(--paper), var(--paper) 5px, var(--paper-2) 5px, var(--paper-2) 10px); }
.pcard.mort .pcard-price { color: var(--pom); }
.pcard-check { position: absolute; top: 18px; inset-inline-end: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--on-accent); opacity: 0; scale: 0.5; transition: opacity 180ms, scale 220ms var(--ease); }
.pcard-check .icon { width: 12px; height: 12px; }
.pcard.on { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); background: color-mix(in oklch, var(--teal) 10%, var(--paper)); }
.pcard.on .pcard-check { opacity: 1; scale: 1; }
.tchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--paper-2); font-size: var(--fs-sm); }
.tchip.money { background: var(--saffron-l); color: var(--gold-ink); }

.tmoney { display: grid; gap: 6px; }
.tmoney-field { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); }
.tmoney-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in oklch, var(--teal), transparent 80%); }
.tmoney-in.input { border: 0; background: transparent; box-shadow: none; min-height: 38px; padding: 0; flex: 1; min-width: 0; font-weight: 800; }
.tmoney-field small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.tmoney-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.tmoney-quick .chip { border: 0; cursor: pointer; min-height: 28px; }
.tmoney-quick .chip:disabled { opacity: 0.4; cursor: default; }
.tcards { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper .icon-btn { width: 30px; height: 30px; font-weight: 900; }

.tbalance { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.tbalance-bar { position: relative; height: 8px; border-radius: 4px; background: color-mix(in oklch, var(--pom), transparent 70%); }
.tbalance-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in oklch, var(--ok), transparent 20%); transition: width 400ms var(--ease); }
.tbalance-bar b { position: absolute; top: 50%; width: 3px; height: 16px; translate: 50% -50%; background: var(--ink); border-radius: 2px; transition: inset-inline-start 400ms var(--ease); }
.tbalance-bar::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--ink-3); opacity: 0.6; }
.tbalance-lbl { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); }
.tbalance-lbl b { font-size: var(--fs-xs); color: var(--ink-2); }
.tbalance.good .tbalance-lbl b { color: var(--ok-ink); }
.tbalance.bad .tbalance-lbl b { color: var(--pom); }
.tbalance.fair .tbalance-lbl b { color: var(--teal-d); }

/* ================= v1.3: صحنه‌ی پرتاب تاس ================= */
.dice-roller { position: fixed; inset: 0; z-index: calc(var(--z-fx) - 2); pointer-events: none; --ds: 80px; --cx: 50vw; --cy: 50vh; }
.dice-roller.on { pointer-events: auto; }
/* پس‌زمینه تار و تاریک می‌شود تا همه‌ی توجه روی تاس باشد؛ فقط opacity انیمیت می‌شود، نه شعاع blur (روان‌تر) */
.dr-veil { position: absolute; inset: 0; opacity: 0; transition: opacity 320ms var(--ease);
  -webkit-backdrop-filter: blur(9px) saturate(1.2) brightness(0.8); backdrop-filter: blur(9px) saturate(1.2) brightness(0.8);
  background: radial-gradient(circle at var(--cx) var(--cy), oklch(0.2 0.03 240 / 0.05) 0, oklch(0.1 0.03 240 / 0.35) calc(var(--ds) * 4), oklch(0.06 0.03 240 / 0.62) 100%); }
.dice-roller.on .dr-veil { opacity: 1; }
.dice-roller.suspense .dr-veil { transition-duration: 600ms;
  background: radial-gradient(circle at var(--cx) var(--cy), oklch(0.2 0.03 240 / 0) 0, oklch(0.08 0.03 240 / 0.55) calc(var(--ds) * 3), oklch(0.04 0.03 240 / 0.82) 100%); }
.dr-scene { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; perspective: calc(var(--ds) * 13); opacity: 0; transition: opacity 220ms var(--ease), transform 420ms var(--ease); }
.dice-roller.on .dr-scene { opacity: 1; }
.dice-roller.leaving .dr-scene { opacity: 0; transform: scale(0.7); transition-duration: 260ms; }
.dice-roller.impact .dr-scene { animation: drShake 260ms var(--ease); }
@keyframes drShake { 20% { translate: 0 3px; } 45% { translate: -2px -1px; } 70% { translate: 1px 1px; } }
.dr-floor { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateX(46deg); }
.dr-spot { position: absolute; width: calc(var(--ds) * 9); height: calc(var(--ds) * 6); left: calc(var(--ds) * -4.5); top: calc(var(--ds) * -3); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, oklch(0.97 0.05 88 / 0.3), oklch(0.9 0.08 80 / 0.1) 40%, transparent 68%); transition: opacity 400ms var(--ease), scale 600ms var(--ease); }
.dice-roller.suspense .dr-spot { scale: 0.72; opacity: 1; animation: spotPulse 520ms var(--ease) infinite alternate; }
@keyframes spotPulse { to { opacity: 0.65; } }
.dice-roller .die3d { left: calc(var(--ds) * -0.5); top: calc(var(--ds) * -0.5); }
.dice-roller .die-shadow { left: calc(var(--ds) * -0.5); top: calc(var(--ds) * -0.5); border-radius: 50%; background: radial-gradient(closest-side, oklch(0.05 0.03 240 / 0.75) 40%, transparent); will-change: transform, opacity; }
.dice-roller.double .die3d .face i { outline: calc(var(--ds) * 0.012) solid color-mix(in oklch, var(--saffron), transparent 20%); outline-offset: calc(var(--ds) * 0.01); }
.dr-total { position: absolute; left: var(--cx); top: calc(var(--cy) - var(--ds) * 1.75); translate: -50% -50%; display: grid; justify-items: center; line-height: 1; opacity: 0; scale: 0.4; pointer-events: none;
  transition: opacity 240ms var(--ease), scale 520ms cubic-bezier(0.16, 1, 0.3, 1); }
.dr-total b { font-size: calc(var(--ds) * 0.9); font-weight: 900; color: oklch(0.98 0.02 88); text-shadow: 0 0.04em 0 oklch(0.4 0.08 70), 0 0 0.4em oklch(0.8 0.15 78 / 0.7); }
.dr-total small { margin-top: 6px; padding: 3px 14px; border-radius: var(--r-pill); background: var(--saffron); color: var(--on-gold); font-weight: 900; font-size: calc(var(--ds) * 0.2); box-shadow: 0 0 30px -4px var(--saffron); }
.dice-roller.revealed .dr-total { opacity: 1; scale: 1; }
.dice-roller.leaving .dr-total { opacity: 0; scale: 1.25; transition-duration: 240ms; }
/* وقتی تاس در حال چرخیدن است، انیمیشن‌های همیشگی زیر پرده متوقف می‌شوند تا پرتاب لگ نزند */
.dice-rolling .game *, .dice-rolling .game *::before, .dice-rolling .game *::after { animation-play-state: paused !important; }
.dice-rolling .game .seat-card, .dice-rolling .game .console .prompt { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .dr-veil { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ================= v1.3: جا افتادن کامل بخش معامله ================= */
.tab-body { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; scrollbar-gutter: stable; }
.tab-body > * { min-width: 0; }
.trade-card, .trade-compose { grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 12px; }
.trade-card > *, .trade-compose > *, .tblock > *, .tside > * { min-width: 0; }
.tc-title { gap: 8px; flex-wrap: wrap; }
.tc-title b { font-size: var(--fs-md); }
.tc-actions { flex-wrap: wrap; }
.tc-actions .btn { min-width: 0; }
.twho { grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr)); }
.twho-btn { min-width: 0; }
/* بدون نوار رنگی کناری: کل کادر با رنگ بازیکن رنگ می‌گیرد */
.tblock, .tside { grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid color-mix(in oklch, var(--pc), transparent 55%); border-inline-start-width: 1px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--pc) 8%, var(--surface)), var(--surface) 70%); }
.tside-h { min-width: 0; }
.tside-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tside-h small { flex: none; }
.pcard-grid { grid-template-columns: repeat(auto-fill, minmax(min(74px, 100%), 1fr)); }
.pcard { min-width: 0; }
.tmoney-field { min-width: 0; }
.tmoney-in.input { width: 0; }
.tbalance { min-width: 0; }
.tbalance-lbl { gap: 8px; }
.tbalance-lbl > span { flex: none; white-space: nowrap; }
.tbalance-lbl b { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= v1.3: تب‌های پنل بازی ================= */
.tab-bar { position: relative; --ti: 0; }
.tab-bar button { border-bottom: 0; transition: color 300ms var(--ease); }
.tab-bar button[aria-selected='true'] .icon { animation: tabIcon 520ms var(--ease); }
@keyframes tabIcon { 30% { transform: translateY(-3px) scale(1.15); } }
.tab-bar::after { content: ''; position: absolute; bottom: -1px; right: 0; width: 25%; height: 3px; border-radius: 3px 3px 0 0; background: var(--teal); pointer-events: none;
  transform: translateX(calc(var(--ti) * -100%)) scaleX(0.55); transition: transform 480ms cubic-bezier(0.2, 1, 0.3, 1), opacity 200ms; }
.tab-bar.no-sel::after { opacity: 0; }
.tab-body.tab-in-fwd > * { animation: tabInFwd 420ms var(--ease) both; }
.tab-body.tab-in-back > * { animation: tabInBack 420ms var(--ease) both; }
.tab-body.tab-in-fwd > *:nth-child(2), .tab-body.tab-in-back > *:nth-child(2) { animation-delay: 50ms; }
.tab-body.tab-in-fwd > *:nth-child(3), .tab-body.tab-in-back > *:nth-child(3) { animation-delay: 100ms; }
@keyframes tabInFwd { from { opacity: 0; transform: translateX(-28px); filter: blur(4px); } }
@keyframes tabInBack { from { opacity: 0; transform: translateX(28px); filter: blur(4px); } }

/* ---------- اسلایدر اندازه‌ی میز ---------- */
.zoom-ctl { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 7; display: flex; align-items: center; gap: 4px; padding: 4px 6px;
  border-radius: var(--r-pill, 999px); background: color-mix(in oklch, var(--surface), transparent 14%); border: 1px solid color-mix(in oklch, var(--ink), transparent 88%);
  box-shadow: var(--sh-sm); opacity: 0.72; transition: opacity 200ms var(--ease); touch-action: none; direction: ltr; }
.zoom-ctl:hover, .zoom-ctl:focus-within { opacity: 1; }
.zc-btn, .zc-val { border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; border-radius: 999px; }
.zc-btn { width: 26px; height: 26px; display: grid; place-items: center; font-size: 18px; font-weight: 700; line-height: 1; }
.zc-btn:hover, .zc-val:hover { background: color-mix(in oklch, var(--ink), transparent 90%); }
.zc-val { min-width: 44px; height: 26px; padding: 0 6px; font-size: var(--fs-xs, 12px); font-weight: 700; color: var(--ink-2, var(--ink)); }
.zc-range { --zp: 45%; -webkit-appearance: none; appearance: none; width: clamp(80px, 12vw, 140px); height: 22px; margin: 0; background: transparent; cursor: pointer; }
.zc-range::-webkit-slider-runnable-track { height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--saffron) 0 var(--zp), color-mix(in oklch, var(--ink), transparent 82%) var(--zp) 100%); }
.zc-range::-moz-range-track { height: 5px; border-radius: 99px; background: color-mix(in oklch, var(--ink), transparent 82%); }
.zc-range::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--saffron); }
.zc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--saffron); box-shadow: var(--sh-sm); }
.zc-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--saffron); box-shadow: var(--sh-sm); }
.zc-range:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 99px; }
.fp-on .zoom-ctl { background: color-mix(in oklch, var(--surface), transparent 6%); }
@media (max-width: 900px) { .zoom-ctl { top: 6px; padding: 2px 4px; } .zc-range { width: 90px; } .zc-val { min-width: 38px; } }


/* ================= v1.6: کارایی و سطح کیفیت =================
   data-perf روی <html> توسط js/perf.js تنظیم می‌شود (حدس از سخت‌افزار + پایش زنده‌ی نرخ فریم). */
.light-spot { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 50% 50%, oklch(1 0.02 90 / 0.09), transparent 38%); transform: translate3d(-20%, -30%, 0); }
:root[data-theme='dark'] .light-spot { background: radial-gradient(circle at 50% 50%, oklch(0.95 0.03 90 / 0.06), transparent 30%); }

/* کیفیت متوسط و پایین: backdrop-filter (تار کردن پشت پنل‌ها در هر فریم) خاموش؛ پنل‌ها کمی مات‌تر می‌شوند */
:root:not([data-perf='high']) .seat-card, :root:not([data-perf='high']) .console .prompt, :root:not([data-perf='high']) .tile-info,
:root:not([data-perf='high']) .fp-hint, :root:not([data-perf='high']) .mobile-tools, :root:not([data-perf='high']) .dr-veil,
:root:not([data-perf='high']) .dlg-veil, :root:not([data-perf='high']) .ms-tools .icon-btn, :root:not([data-perf='high']) .hud {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root:not([data-perf='high']) .seat-card { background: color-mix(in oklch, var(--surface), transparent 5%); }
:root:not([data-perf='high']) .console .prompt, :root:not([data-perf='high']) .tile-info { background: color-mix(in oklch, var(--surface), transparent 3%); }
:root:not([data-perf='high']) .dr-veil { background: radial-gradient(circle at var(--cx) var(--cy), oklch(0.1 0.03 240 / 0.3) 0, oklch(0.06 0.03 240 / 0.6) calc(var(--ds) * 4), oklch(0.04 0.03 240 / 0.78) 100%); }
:root:not([data-perf='high']) .dust, :root:not([data-perf='high']) .arena::before, :root:not([data-perf='high']) .light-spot { display: none; }
:root:not([data-perf='high']) .arena { transition: none; }

/* کیفیت پایین: هیچ انیمیشن بی‌پایانی روی تخته نیست؛ درخشش‌ها ثابت می‌شوند */
:root[data-perf='low'] .token.current .halo { animation: none; opacity: 0.7; scale: 1; box-shadow: none; }
:root[data-perf='low'] .token.current .pawn .pawn3d, :root[data-perf='low'] .seat-card.active .seat-av .pawn3d,
:root[data-perf='low'] .my-turn .roll-btn, :root[data-perf='low'] .dice-roller.suspense .dr-spot { animation: none; }
:root[data-perf='low'] .tile.here::after { animation: none; opacity: 0.8; will-change: auto; }
:root[data-perf='low'] .ripple { box-shadow: none; }
:root[data-perf='low'] .owner-dot, :root[data-perf='low'] .houses .hotel { box-shadow: none; }
:root[data-perf='low'] .band::after { display: none; }
:root[data-perf='low'] .seat-card { transition: none; }