:root{
  --bg: #0f1425;
  --card: #171e34;
  --primary: #3b82f6;
  --text: #e6ebff;
  --muted: #8aa0c8;
  --board: #2443d6;
  --board-dark: #1c37b6;
  --shadow: rgba(0,0,0,0.3);
  --p1: #f43f5e; /* قرمز */
  --p2: #f59e0b; /* طلایی */
  --success: #10b981;
  --error: #ef4444;
}

* { box-sizing: border-box; }
body.page { margin:0; background: radial-gradient(1200px 600px at 50% -10%, #182044, #0c1020); color: var(--text); font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, "Vazirmatn", sans-serif; }

.container { max-width: 920px; margin: 6vh auto; padding: 16px; }
h1, h2, h3 { margin: 8px 0 12px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

.card { background: var(--card); border-radius: 14px; padding: 16px; box-shadow: 0 10px 30px var(--shadow); margin-bottom: 16px; }
.row { display:flex; align-items:center; }
.gap { gap: 8px; }
.mt { margin-top: 12px; }
.muted, .note { color: var(--muted); }
.note { text-align:center; margin-top: 12px; }

.input { flex:1; padding: 12px 14px; border-radius: 10px; border:1px solid #2a3252; background: #11172b; color: var(--text); outline: none; }
.btn { padding: 12px 16px; border:0; border-radius: 10px; background:#2a3252; color: var(--text); cursor:pointer; }
.btn.primary { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.btn.small { padding: 8px 12px; border-radius: 8px; }

.topbar { display:flex; justify-content:space-between; align-items:center; padding: 10px 12px; background: #0c1224; border-bottom: 1px solid #1a2344; position: sticky; top:0; }
.status { font-weight:600; text-align:center; }
.share { color: var(--muted); font-size: 12px; margin-top: 4px; text-align:center; }

.profile-mini { display:flex; align-items:center; gap:12px; }
.avatar { width: 42px; height: 42px; display:grid; place-items:center; font-size: 24px; background:#101634; border-radius: 12px; }
.avatar.xl { width: 64px; height: 64px; font-size: 36px; }
.uname { font-weight: 700; }
.stats { color: #c9d6ff; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item, .room { display:flex; align-items:center; justify-content:space-between; background:#11172b; border:1px solid #2a3252; border-radius: 12px; padding: 10px; }
.item .left, .room .left { display:flex; align-items:center; gap: 10px; }
.room .right .btn { padding: 8px 12px; }

.join { display:flex; gap:8px; }
.auth-card .form { display:flex; flex-direction:column; gap:8px; }
.error { background:#2a1323; border:1px solid var(--error); color:#ffb4b4; padding:8px 10px; border-radius:10px; }
.success { background:#0f2a20; border:1px solid var(--success); color:#baf7d9; padding:8px 10px; border-radius:10px; }

.form label { font-size: 12px; color:#a9bbff; margin-top:4px; }

.avatar-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; margin-top:8px; }
.avatar-option { display:flex; align-items:center; justify-content:center; background:#0f1430; border:1px solid #2a3252; border-radius:10px; padding:10px; cursor:pointer; }
.avatar-option input { display:none; }
.avatar-option span { font-size: 24px; }
.avatar-option input:checked + span, .avatar-option:hover { outline: 2px solid var(--primary); }

.game-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding: 16px; }
.board {
  width: min(92vw, 560px);
  aspect-ratio: 7 / 6;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--board), var(--board-dark));
  box-shadow: 0 16px 30px var(--shadow), inset 0 -6px 14px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  position: relative;
}
.board .cell { position: relative; cursor: pointer; }
.board .cell .disc {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0) 50%), #0a1130;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.6);
  transition: transform 140ms ease, background-color 140ms ease;
}
.board .cell.empty .disc { background: radial-gradient(110% 110% at 30% 30%, rgba(255,255,255,0.2), rgba(255,255,255,0) 55%), #0a1130; }
.board .cell.p1 .disc { background: radial-gradient(100% 100% at 35% 30%, #ffd7d7, rgba(255,255,255,0) 45%), var(--p1); }
.board .cell.p2 .disc { background: radial-gradient(100% 100% at 35% 30%, #fff0c9, rgba(255,255,255,0) 45%), var(--p2); }
.board .cell:hover .disc { transform: translateY(-2%); }

.pill { padding: 6px 10px; border-radius: 999px; background:#121a34; color: var(--muted); font-size: 12px; }
.pill.p1 { border: 2px solid var(--p1); color:#ffd0d6; }
.pill.p2 { border: 2px solid var(--p2); color:#ffe7b8; }

@media (max-width: 820px){
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .board { gap: 8px; padding: 8px; }
}