/* ===== DESIGN TOKENS — "Oyun Atölyesi" (Playful Swiss-Grid) ===== */
:root {
  /* Color — chrome/neutrals */
  --canvas: #F7F5F1;
  --surface: #FFFFFF;
  --surface-2: #F0EEE8;
  --line: #E4E1D8;
  --line-soft: #ECEAE2;
  --line-strong: #D2CFC3;

  --text: #26241F;
  --text-muted: #6B6859;
  --text-faint: #9B977F;

  /* Color — accent (slate-indigo) */
  --accent: #4C5FD5;
  --accent-ink: #2B3590;
  --accent-soft: #E7E9FB;
  --accent-hover: #3E4FC2;

  /* Color — semantic */
  --ok: #2F9E6E;
  --ok-soft: #E3F6EC;
  --info-soft: #E8EEFC;
  --info-ink: #35508F;
  --warn: #C98A1C;
  --warn-soft: #FBF0DD;
  --crit: #D64545;
  --crit-soft: #FCEAEA;

  /* Color — game-card suits */
  --card-a: #FF8A5B;
  --card-b: #4C5FD5;
  --card-c: #2FB5A0;
  --card-d: #F2C14E;
  --card-back: #3A3F6B;
  --card-back-2: #4C5FD5;

  /* Radius */
  --radius-card: 10px;
  --radius-control: 8px;
  --radius-nav: 7px;
  --radius-pill: 9999px;
  --radius-mem-card: 12px;

  /* Spacing */
  --gutter: 32px;
  --card-pad: 18px;
  --cell-pad-y: 12px;
  --cell-pad-x: 18px;

  /* Type */
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-page-title: 17px;
  --fs-card-title: 13.5px;
  --fs-cell: 13px;
  --fs-label: 13px;
  --fs-desc: 12.5px;
  --fs-smallcaps: 10.5px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;
  --dur-med: 420ms;

  /* Shadow */
  --shadow-whisper: 0 1px 2px rgba(38, 36, 31, 0.04), 0 1px 1px rgba(38, 36, 31, 0.03);
  --shadow-modal: 0 24px 64px rgba(38, 36, 31, 0.22);
  --shadow-focus: 0 0 0 3px rgba(76, 95, 213, 0.22);
}

/* ===== Aliases for consumers expecting flat token names (styles.css fallback vars) ===== */
:root {
  --ink: var(--text);
  --muted: var(--text-muted);
  --border: var(--line);
  --radius: var(--radius-card);
  --radius-sm: var(--radius-control);
  --shadow: var(--shadow-whisper);
  --success: var(--ok);
  --accent-ink: #FFFFFF;
  --font-sans: var(--font-body);
  --font-display: var(--font-heading);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ===== LAYOUT SHELL ===== */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; width: 1280px; margin: 0 auto; }

/* Lightened topbar: title only + player chip. No breadcrumb, no global search. */
.topbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 14px; font-weight: 650; color: var(--text);
}

.topbar-player-chip {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.shell-body { display: flex; flex: 1; }

/* ===== RAIL ===== */
.rail {
  width: 212px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.rail-group { display: flex; flex-direction: column; gap: 2px; }
.rail-group:first-child { margin-bottom: 14px; }
.rail-cta { font-size: 13px; }
.rail-label {
  font-size: var(--fs-smallcaps); font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 6px 10px 8px;
}
.rail-item {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px;
  border-radius: var(--radius-nav);
  color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail-item:hover { background: #F7F7F3; color: var(--text); }
.rail-item .icon { width: 17px; height: 17px; flex-shrink: 0; }
.rail-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.rail-item.danger { color: var(--crit); }
.rail-item.danger:hover { background: var(--crit-soft); }
.rail-divider { height: 1px; background: var(--line); margin: 12px 4px; }

/* ===== CONTENT ===== */
.content { flex: 1; padding: 28px var(--gutter) 60px; min-width: 0; }
.page-head { margin-bottom: 22px; }
.page-title { font-family: var(--font-heading); font-size: var(--fs-page-title); font-weight: 650; margin: 0 0 4px; }
.page-subtitle { font-size: var(--fs-desc); color: var(--text-muted); margin: 0; }

.section-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-whisper);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--card-pad) var(--card-pad) 4px;
}
.card-title { font-size: var(--fs-card-title); font-weight: 600; margin: 0; }
.muted-text { font-size: 13px; color: var(--text-muted); }
.muted-text-sm { font-size: 12.5px; color: var(--text-muted); }

/* ===== STATUS / STAT ROW (game HUD, reused SaveBar anatomy) ===== */
.status-card { padding-bottom: 0; }
.status-row {
  display: flex; gap: 40px;
  padding: var(--card-pad);
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: var(--fs-smallcaps); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.stat-value { font-family: var(--font-heading); font-size: 22px; font-weight: 650; color: var(--text); }

/* Single-action footer: one primary/secondary action only (Duraklat).
   "Yeni Oyun" lives permanently in the rail as the sole filled-accent CTA. */
.status-footer {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: 12px var(--card-pad);
}
.status-left { display: flex; align-items: center; gap: 8px; }
.status-actions { display: flex; gap: 10px; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-control);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  min-height: 36px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: var(--accent); opacity: 0.55; cursor: default; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-full { width: 100%; }

/* Real :focus-visible only — no manufactured demo classes anywhere */
.btn:focus-visible, input:focus-visible, .mem-card:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* ===== FIELD ROW ===== */
.field-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--card-pad);
  border-top: 1px solid var(--line-soft);
}
.field-row:first-of-type { border-top: none; }
.field-label { display: flex; flex-direction: column; gap: 2px; }
.field-label span:first-child { font-size: var(--fs-label); font-weight: 500; }
.field-hint { font-size: var(--fs-desc); color: var(--text-muted); }

/* ===== BADGES ===== */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.badge-ok { background: var(--ok-soft); color: #216E4C; }
.badge-info { background: var(--info-soft); color: var(--info-ink); }
.badge-warn-soft { background: var(--warn-soft); color: #8A5F10; }
.badge-neutral { background: var(--surface-2); color: var(--text-muted); }

/* ===== GAME BOARD / MEMORY CARDS ===== */
.board-card { padding-bottom: var(--card-pad); }
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 96px);
  gap: 14px;
  padding: 6px var(--card-pad) var(--card-pad);
}
.mem-card {
  width: 96px; height: 96px;
  border-radius: var(--radius-mem-card);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mem-card.face-down {
  background: linear-gradient(135deg, var(--card-back), var(--card-back-2));
}
.mem-card.face-down:hover { transform: translateY(-2px); }
.mem-back-mark { color: rgba(255,255,255,0.55); font-family: var(--font-heading); font-size: 22px; font-weight: 650; }
.mem-card.flipped { background: var(--surface); border: 1.5px solid var(--line-strong); }
.mem-card.matched { background: var(--ok-soft); border: 1.5px solid var(--ok); cursor: default; opacity: 0.9; }
.mem-icon { width: 36px; height: 36px; }

/* Card-suit color utility classes — presentation stays token-driven, out of markup `style` attrs */
.mem-icon-a { color: var(--card-a); }
.mem-icon-b { color: var(--card-b); }
.mem-icon-c { color: var(--card-c); }
.mem-icon-d { color: var(--card-d); }

/* Win modal trophy icon — token-driven, no inline style */
.win-badge-icon { fill: var(--accent); }

/* ===== DIFFICULTY BAND (plan-band pattern) ===== */
.difficulty-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.diff-col {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 20px;
  box-shadow: var(--shadow-whisper);
}
.diff-col.diff-current { border: 2px solid var(--accent); padding: 21px 19px; }
.current-badge {
  position: absolute; top: -11px; left: 20px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 650; padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.diff-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.diff-name { font-family: var(--font-heading); font-size: 16px; font-weight: 650; margin: 0; }
.diff-price { font-family: var(--font-heading); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.diff-desc { font-size: var(--fs-desc); color: var(--text-muted); margin: 0 0 16px; }
.diff-features { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.diff-features li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check { width: 15px; height: 15px; flex-shrink: 0; }

/* ===== TABLE ===== */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: var(--fs-smallcaps); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 650;
  padding: 10px var(--cell-pad-x); border-bottom: 1px solid var(--line);
}
.th-sortable { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sort-arrow { width: 12px; height: 12px; }
.data-table td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  font-size: var(--fs-cell);
  border-bottom: 1px solid var(--line-soft);
}
.data-table tr:last-child td { border-bottom: none; }
.row-hover, .data-table tbody tr:hover { background: #F7F7F3; }

/* ===== EMPTY STATE ===== */
.empty-state-demo { border-style: dashed; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 20px; gap: 6px;
}
.empty-icon { width: 36px; height: 36px; color: var(--text-faint); margin-bottom: 10px; }
.empty-title { font-size: 14px; font-weight: 650; margin: 0; }
.empty-subtitle { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(38,36,31,0.4);
  display: flex; align-items: center; justify-content: center;
}
.modal.win-modal {
  width: 420px; background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  padding: 32px 28px 24px;
  text-align: center;
}
.win-badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.win-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.win-subtitle { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.win-stats { display: flex; justify-content: center; gap: 28px; margin-bottom: 24px; }
.win-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.win-actions { display: flex; gap: 10px; justify-content: center; }

/* ===== ICONS ===== */
.icon { width: 18px; height: 18px; color: inherit; }
.icon-sm { width: 15px; height: 15px; }

/* ===== RESPONSIVE (reference breakpoints; primary target is 1280px desktop) ===== */
@media (max-width: 1024px) {
  .app-shell { width: 100%; }
  .rail { width: 180px; }
  .difficulty-band { grid-template-columns: 1fr; }
}