:root {
  --bg: #f6efe1;
  --ink: #292016;
  --muted: #6e6254;
  --panel: rgba(255, 250, 238, 0.9);
  --line: rgba(74, 51, 28, 0.18);
  --accent: #276b78;
  --accent-strong: #174b56;
  --warn: #a64036;
  --wood: #9e6a3d;
  --wood-dark: #6e4324;
  --shadow: 0 22px 52px rgba(55, 35, 18, 0.16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Vazirmatn, Tahoma, sans-serif;
  background:
    repeating-linear-gradient(90deg, rgba(132, 83, 42, 0.05) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, rgba(39, 107, 120, 0.13), transparent 34%),
    linear-gradient(315deg, rgba(207, 164, 54, 0.17), transparent 36%),
    var(--bg);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  padding: 0.78rem 1rem;
  background: linear-gradient(180deg, #338395, var(--accent-strong));
  color: white;
  cursor: pointer;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 16px rgba(23, 75, 86, 0.18);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.58; cursor: wait; transform: none; }
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.92);
}
form { display: grid; gap: 0.7rem; }

.ch-home-shell, .ch-rules-shell, .ch-room-shell {
  width: min(1220px, calc(100vw - 2rem));
  margin: 0 auto;
}
.ch-home-body, .ch-rules-body, .ch-room-body { padding: 1rem 0 2rem; }
.ch-home-header, .ch-room-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ch-home-header h1, .ch-room-topbar h1 {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.8rem, 3vw, 3rem);
}
.ch-home-header p { margin: 0; color: var(--muted); line-height: 1.8; }
.ch-back-link, .ch-help-link { color: var(--accent-strong); font-weight: 800; }
.ch-help-link {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.72);
}
.ch-lobby-grid, .ch-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.ch-panel, .ch-status-panel, .ch-player-list, .ch-actions, .ch-board-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.ch-panel h2 { margin: 0 0 0.75rem; }
.ch-panel p { margin: 0; color: var(--muted); line-height: 1.9; }
.ch-color-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.ch-color-list li {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}
.ch-color-list span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--piece-color);
}
.ch-messages { margin-bottom: 1rem; }
.ch-message, .ch-live-error {
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: rgba(166, 64, 54, 0.12);
  color: var(--warn);
  font-weight: 700;
}
.ch-live-error { margin-bottom: 1rem; }

.ch-table {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.ch-side { display: grid; gap: 1rem; }
.ch-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.ch-stat-row + .ch-stat-row { margin-top: 0.75rem; }
.ch-stat-row article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(241, 225, 196, 0.58)),
    rgba(247, 243, 235, 0.7);
}
.ch-stat-row span, .ch-player span, .ch-win-box span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
}
.ch-stat-row strong { display: block; margin-top: 0.25rem; }
.ch-player-list { display: grid; gap: 0.65rem; }
.ch-player {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--piece-color) 36%, var(--line));
  border-radius: 8px;
  padding: 0.75rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--piece-color) 18%, white), rgba(255, 255, 255, 0.72));
}
.ch-player.is-current {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--piece-color) 48%, transparent),
    0 9px 20px color-mix(in srgb, var(--piece-color) 18%, transparent);
}
.ch-player b {
  display: inline-flex;
  min-width: 3rem;
  justify-content: center;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  background: rgba(255, 255, 255, 0.72);
}
.ch-actions { display: grid; gap: 0.75rem; }
.ch-roll-button {
  min-height: 4rem;
  font-size: 1.25rem;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.4), transparent 26%),
    linear-gradient(180deg, #c04a44, #8e2927);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32), 0 14px 24px rgba(142, 41, 39, 0.24);
}
.ch-move-list {
  display: grid;
  gap: 0.55rem;
}
.ch-move-list button { width: 100%; }
.ch-board-move-form { display: none; }
.ch-muted { color: var(--muted); margin: 0; line-height: 1.8; }
.ch-win-box {
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(39, 145, 101, 0.28);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(39, 145, 101, 0.12);
}
.ch-win-box strong { font-size: 1.45rem; }

.ch-board-wrap {
  overflow: auto;
  padding: clamp(0.7rem, 1.8vw, 1.25rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 32%),
    repeating-linear-gradient(90deg, rgba(116, 73, 34, 0.2) 0 7px, rgba(160, 105, 54, 0.22) 7px 15px),
    linear-gradient(180deg, #b97b44, #7b4a28);
}
.ch-board {
  --cell-size: clamp(3.25rem, 8.2vw, 5.7rem);
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  width: max-content;
  margin: 0 auto;
  padding: clamp(0.35rem, 0.9vw, 0.6rem);
  border: clamp(0.28rem, 0.8vw, 0.45rem) solid var(--wood-dark);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 28%),
    repeating-linear-gradient(0deg, rgba(95, 57, 27, 0.18) 0 4px, transparent 4px 13px),
    var(--wood);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 18px rgba(59, 34, 15, 0.24),
    0 20px 34px rgba(52, 32, 18, 0.24);
}
.ch-cell {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.22rem;
  border: 1px solid rgba(87, 55, 26, 0.2);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.58), transparent 33%),
    linear-gradient(135deg, #f7ecd4, #dfc79d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), inset 0 -3px 0 rgba(99, 60, 28, 0.1);
}
.ch-cell::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(114, 78, 40, 0.18);
  pointer-events: none;
}
.ch-cell.is-edge {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.64), transparent 34%),
    linear-gradient(135deg, #f3dbb6, #cfa46d);
}
.ch-cell:nth-child(3n + 1) { filter: saturate(1.04); }
.ch-cell:nth-child(4n + 2) { filter: brightness(1.035); }
.ch-cell.is-move-target {
  cursor: pointer;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 251, 204, 0.92), transparent 35%),
    linear-gradient(135deg, #fff1a8, #e4b84d);
  box-shadow:
    inset 0 0 0 3px rgba(39, 107, 120, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(255, 244, 165, 0.48);
}
.ch-cell.is-move-target::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: 3px solid rgba(39, 107, 120, 0.62);
  box-shadow: 0 0 18px rgba(39, 107, 120, 0.32);
  animation: ch-target-pulse 980ms ease-in-out infinite;
  pointer-events: none;
}
.ch-cell.is-move-target.is-waiting:not(:has(.ch-piece.is-moving)) {
  filter: saturate(0.74) brightness(0.92);
}
.ch-move-target-label {
  position: absolute;
  inset-inline: 0.22rem;
  bottom: 0.22rem;
  z-index: 4;
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 0.12rem 0.24rem;
  background: rgba(255, 255, 255, 0.86);
  color: #174b56;
  font-size: clamp(0.56rem, 1.4vw, 0.76rem);
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 4px 10px rgba(54, 35, 17, 0.14);
  pointer-events: none;
  white-space: nowrap;
}
.ch-piece {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.08rem;
  height: 2.08rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92) 0 10%, rgba(255, 255, 255, 0.38) 11% 20%, transparent 21%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--piece-color) 86%, white) 0 34%, var(--piece-color) 35% 58%, color-mix(in srgb, var(--piece-color) 68%, black) 59% 100%);
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    inset -5px -7px 9px rgba(0, 0, 0, 0.22),
    inset 3px 4px 6px rgba(255, 255, 255, 0.34),
    0 8px 0 color-mix(in srgb, var(--piece-color) 55%, black),
    0 12px 17px rgba(37, 24, 14, 0.34);
  transform: translateY(-4px);
  z-index: 1;
}
.ch-piece.is-moving {
  z-index: 7;
  animation: ch-piece-hop 180ms ease-in-out infinite alternate;
}
.ch-piece.is-safe::after {
  content: "";
  position: absolute;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #fff4a5;
  box-shadow: 0 0 0 2px rgba(86, 54, 18, 0.18), 0 0 12px rgba(255, 230, 100, 0.8);
  transform: translate(-0.68rem, -0.68rem);
}

.ch-die-stat .ch-die-face {
  margin-top: 0.35rem;
}
.ch-die-slot {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  min-height: 4.35rem;
}
.ch-die-empty {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.42);
}
.ch-die-hidden {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 9px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74), transparent 24%),
    linear-gradient(145deg, #fffdf8, #e7dcc9);
  border: 1px solid rgba(80, 55, 32, 0.18);
  box-shadow: inset -5px -6px 10px rgba(104, 77, 51, 0.18), inset 3px 3px 7px rgba(255, 255, 255, 0.86);
}
.ch-die-hidden::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 3px solid rgba(39, 107, 120, 0.22);
  border-top-color: rgba(39, 107, 120, 0.9);
  animation: ch-mini-spin 620ms linear infinite;
}
.ch-die-result-label {
  font-size: 0.78rem;
  color: var(--accent-strong);
  line-height: 1.2;
}
.ch-die-face,
.ch-dice-side {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.12rem;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.92), transparent 24%),
    linear-gradient(145deg, #fffdf8, #e7dcc9);
  border: 1px solid rgba(80, 55, 32, 0.18);
  box-shadow: inset -5px -6px 10px rgba(104, 77, 51, 0.18), inset 3px 3px 7px rgba(255, 255, 255, 0.86);
}
.ch-die-face {
  position: relative;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 9px;
  padding: 0.38rem;
}
.ch-die-number {
  position: absolute;
  inset: auto 50% 50% auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #17120e;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  transform: translate(50%, 50%);
  box-shadow: 0 3px 9px rgba(32, 20, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.ch-die-face i,
.ch-dice-side i {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
}
.face-1 i:nth-child(5),
.face-2 i:nth-child(1),
.face-2 i:nth-child(9),
.face-3 i:nth-child(1),
.face-3 i:nth-child(5),
.face-3 i:nth-child(9),
.face-4 i:nth-child(1),
.face-4 i:nth-child(3),
.face-4 i:nth-child(7),
.face-4 i:nth-child(9),
.face-5 i:nth-child(1),
.face-5 i:nth-child(3),
.face-5 i:nth-child(5),
.face-5 i:nth-child(7),
.face-5 i:nth-child(9),
.face-6 i:nth-child(1),
.face-6 i:nth-child(3),
.face-6 i:nth-child(4),
.face-6 i:nth-child(6),
.face-6 i:nth-child(7),
.face-6 i:nth-child(9) {
  background:
    radial-gradient(circle at 35% 32%, #555, #14100d 68%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.16);
}

#ch-modal-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.ch-dice-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(30, 22, 15, 0.38);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: auto;
  perspective: 900px;
}
.ch-dice-overlay.is-open { opacity: 1; }
.ch-dice-card {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
}
.ch-dice-stage {
  width: 8.2rem;
  height: 8.2rem;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.ch-die-inline-stage {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  perspective: 700px;
}
.ch-dice-cube {
  --dice-size: 5.6rem;
  position: relative;
  width: var(--dice-size);
  height: var(--dice-size);
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.18,.82,.24,1.08);
}
.ch-die-inline-stage .ch-dice-cube {
  --dice-size: 2.55rem;
}
.ch-die-inline-stage .ch-dice-side {
  border-radius: 9px;
  padding: 0.34rem;
}
.ch-dice-cube.is-rolling {
  animation: ch-dice-tumble 560ms linear infinite;
}
.ch-dice-cube.result-1 { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.ch-dice-cube.result-2 { transform: rotateX(90deg) rotateY(0deg) rotateZ(-8deg); }
.ch-dice-cube.result-3 { transform: rotateX(0deg) rotateY(-90deg) rotateZ(5deg); }
.ch-dice-cube.result-4 { transform: rotateX(0deg) rotateY(90deg) rotateZ(-5deg); }
.ch-dice-cube.result-5 { transform: rotateX(-90deg) rotateY(0deg) rotateZ(8deg); }
.ch-dice-cube.result-6 { transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg); }
.ch-dice-side {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 0.74rem;
  backface-visibility: hidden;
}
.ch-dice-side.front { transform: translateZ(calc(var(--dice-size) / 2)); }
.ch-dice-side.back { transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); }
.ch-dice-side.right { transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2)); }
.ch-dice-side.left { transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.ch-dice-side.top { transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2)); }
.ch-dice-side.bottom { transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.ch-dice-shadow {
  width: 7.4rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(10px);
  transform: translateY(-0.25rem);
  animation: ch-dice-shadow 560ms linear infinite;
}
.ch-dice-overlay.has-result .ch-dice-shadow {
  animation: none;
  width: 6.4rem;
  opacity: 0.72;
}

@keyframes ch-dice-tumble {
  0% { transform: rotateX(20deg) rotateY(30deg) rotateZ(0deg) translateY(-0.15rem); }
  22% { transform: rotateX(150deg) rotateY(88deg) rotateZ(42deg) translateY(-1.35rem); }
  48% { transform: rotateX(248deg) rotateY(190deg) rotateZ(118deg) translateY(0.2rem); }
  73% { transform: rotateX(334deg) rotateY(280deg) rotateZ(205deg) translateY(-0.9rem); }
  100% { transform: rotateX(380deg) rotateY(390deg) rotateZ(360deg) translateY(-0.15rem); }
}

@keyframes ch-dice-shadow {
  0%, 100% { transform: translateY(-0.25rem) scale(1); opacity: 0.56; }
  42% { transform: translateY(-0.25rem) scale(0.72); opacity: 0.28; }
  70% { transform: translateY(-0.25rem) scale(1.12); opacity: 0.68; }
}

@keyframes ch-target-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.64; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes ch-piece-hop {
  0% { transform: translateY(-4px) scale(1); }
  100% { transform: translateY(-15px) scale(1.06); }
}

@keyframes ch-mini-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .ch-table, .ch-lobby-grid, .ch-rules-grid { grid-template-columns: 1fr; }
  .ch-side { order: 2; }
  .ch-board-wrap { order: 1; }
  .ch-home-header, .ch-room-topbar { align-items: stretch; }
  .ch-board { --cell-size: clamp(2.65rem, 12.4vw, 4rem); }
  .ch-piece { width: 1.62rem; height: 1.62rem; font-size: 0.68rem; }
  .ch-move-target-label { font-size: 0.52rem; }
  .ch-dice-stage { width: 7rem; height: 7rem; }
  .ch-dice-cube { --dice-size: 4.9rem; }
  .ch-die-inline-stage .ch-dice-cube { --dice-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-dice-cube.is-rolling,
  .ch-dice-shadow {
    animation-duration: 1100ms;
  }
}