/* ===========================================================
   KARTA — design code for Kout (كوت بو ستة)
   A refined card-table aesthetic, mobile-first, RTL-native.
   =========================================================== */

/* ── Tokens (dark — default) ─────────────────────────────── */
:root, .theme-dark {
  /* Surface stack — graphite with a felt-green undertone (hue 160) */
  --bg:        oklch(18% 0.012 165);
  --bg-2:      oklch(22% 0.018 165);
  --surface:   oklch(26% 0.022 165);
  --surface-2: oklch(31% 0.024 165);
  --line:      oklch(38% 0.022 165 / 0.6);
  --line-soft: oklch(38% 0.022 165 / 0.25);

  /* Text */
  --ink:       oklch(96% 0.008 90);
  --ink-2:     oklch(82% 0.012 90);
  --ink-3:     oklch(64% 0.014 90);
  --ink-4:     oklch(48% 0.014 90);

  /* Two-team identity */
  --team-a:        oklch(74% 0.16 25);     /* warm rose */
  --team-a-soft:   oklch(74% 0.16 25 / 0.16);
  --team-a-line:   oklch(74% 0.16 25 / 0.45);

  --team-b:        oklch(76% 0.13 220);    /* cool cyan */
  --team-b-soft:   oklch(76% 0.13 220 / 0.16);
  --team-b-line:   oklch(76% 0.13 220 / 0.45);

  /* Semantic */
  --gold:      oklch(82% 0.13 85);         /* trophy / mvp */
  --danger:    oklch(64% 0.18 28);         /* lose */
  --danger-soft: oklch(64% 0.18 28 / 0.18);

  /* Felt vignette tint (radial) */
  --felt: radial-gradient(120% 80% at 50% 0%,
            oklch(28% 0.03 160 / 0.7) 0%,
            transparent 60%);

  /* Card watermark (suit) */
  --suit-ink: oklch(60% 0.02 90 / 0.10);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px rgb(0 0 0 / 0.25);
  --shadow-press: inset 0 0 0 1px var(--line);
}

/* ── Tokens (light) ─────────────────────────────────────── */
.theme-light {
  --bg:        oklch(97% 0.005 90);
  --bg-2:      oklch(95% 0.007 90);
  --surface:   oklch(99% 0.004 90);
  --surface-2: oklch(100% 0 0);
  --line:      oklch(82% 0.012 160 / 0.8);
  --line-soft: oklch(82% 0.012 160 / 0.45);

  --ink:       oklch(20% 0.015 165);
  --ink-2:     oklch(38% 0.015 165);
  --ink-3:     oklch(54% 0.015 165);
  --ink-4:     oklch(68% 0.012 165);

  --team-a:        oklch(58% 0.18 25);
  --team-a-soft:   oklch(58% 0.18 25 / 0.10);
  --team-a-line:   oklch(58% 0.18 25 / 0.45);

  --team-b:        oklch(54% 0.16 235);
  --team-b-soft:   oklch(54% 0.16 235 / 0.10);
  --team-b-line:   oklch(54% 0.16 235 / 0.45);

  --gold:      oklch(70% 0.15 80);
  --danger:    oklch(54% 0.20 28);
  --danger-soft: oklch(54% 0.20 28 / 0.10);

  --felt: radial-gradient(120% 80% at 50% 0%,
            oklch(94% 0.014 160) 0%,
            transparent 60%);

  --suit-ink: oklch(20% 0.015 165 / 0.06);
  --shadow-1: 0 1px 2px rgb(20 30 25 / 0.04), 0 8px 24px rgb(20 30 25 / 0.06);
  --shadow-press: inset 0 0 0 1px var(--line);
}

/* ── Reset + base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02';
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* ── App shell ──────────────────────────────────────────── */
.app {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
  background: var(--bg);
  background-image: var(--felt);
  color: var(--ink);
  direction: rtl;
}

/* ── Type scale ─────────────────────────────────────────── */
.t-display  { font-size: 64px; font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-h1       { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.t-h2       { font-size: 20px; font-weight: 700; line-height: 1.2; }
.t-h3       { font-size: 16px; font-weight: 700; line-height: 1.3; }
.t-body     { font-size: 15px; font-weight: 500; line-height: 1.45; }
.t-small    { font-size: 13px; font-weight: 500; line-height: 1.4; }
.t-eyebrow  { font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.t-mono     { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px; border-radius: 14px;
  font-size: 15px; font-weight: 700;
  border: 1px solid transparent;
  transition: transform .08s ease, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.35; pointer-events: none; }

.btn-primary {
  background: var(--ink); color: var(--bg);
}
.btn-primary:active { background: var(--ink-2); }

.btn-ghost {
  background: var(--surface); color: var(--ink-2);
  border-color: var(--line-soft);
}
.btn-ghost:active { background: var(--surface-2); color: var(--ink); }

.btn-icon {
  width: 40px; height: 40px; padding: 0; border-radius: 12px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-soft);
}

/* ── Inputs ─────────────────────────────────────────────── */
.input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.input:focus { border-color: var(--ink-3); background: var(--surface-2); outline: none; }
.input::placeholder { color: var(--ink-4); font-weight: 400; }

/* ── Surface card ───────────────────────────────────────── */
.surface {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
}

/* ── Suit glyph reusable ────────────────────────────────── */
.suit { font-feature-settings: normal; line-height: 1; display: inline-block; }
.suit-red   { color: oklch(68% 0.20 25); }
.suit-black { color: var(--ink); }

/* ── Scrollbar ──────────────────────────────────────────── */
.scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar { width: 0; }

/* ── Utility ─────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }