/* ── Fonty (lokalni) ──────────────────────────────────────────────────────── */
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap;
  src: url('/fonts/bebas-neue-400.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 300; font-display: swap;
  src: url('/fonts/dm-sans-300.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap;
  src: url('/fonts/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap;
  src: url('/fonts/dm-sans-500.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap;
  src: url('/fonts/dm-sans-600.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.ttf') format('truetype'); }

/* ── Promenne ────────────────────────────────────────────────────────────── */
:root {
  --bg:       #eef0eb;
  --bg2:      #f7f8f5;
  --surface:  #ffffff;
  --border:   #dde2d8;
  --border2:  #c8d0c2;

  --green:    #1e5631;
  --green2:   #2e7d4a;
  --grass:    #5a9e2f;
  --grass-bg: #eef6e7;
  --lime-dim: #f4fce3;

  --text:     #1a1f17;
  --text2:    #4e5e48;
  --text3:    #8a9c84;

  --win:      #2a7a3d;
  --win-bg:   #e8f5ec;
  --draw:     #a05c00;
  --draw-bg:  #fff3e0;
  --loss:     #b52f2f;
  --loss-bg:  #fdeaea;

  --blue:     #2255c4;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-data:    'IBM Plex Mono', monospace;
  --r:  6px;
  --r2: 4px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--grass); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrapper { max-width: 1080px; margin: 0 auto; padding: 0 24px 64px; }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.span-2 { grid-column: span 2; }
@media (max-width: 740px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}

/* ── Utility classes ─────────────────────────────────────────────────────── */
.tc { text-align: center; }
.nowrap { white-space: nowrap; }
.dim { color: var(--text3); }
.c-text { color: var(--text); }
.c-text2 { color: var(--text2); }
.c-text3 { color: var(--text3); }
.c-win { color: var(--win); }
.c-draw { color: var(--draw); }
.c-loss { color: var(--loss); }
.c-green { color: var(--green); }
.c-blue { color: var(--blue); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-sm { font-size: 12px; }
.font-data { font-family: var(--font-data); }
.font-display { font-family: var(--font-display); }
.upper { letter-spacing: .08em; text-transform: uppercase; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-14 { margin-bottom: 14px; }
.mb-20 { margin-bottom: 20px; }
.mb-28 { margin-bottom: 28px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-22 { margin-top: 22px; }
.ml-auto { margin-left: auto; }
.text-right { text-align: right; }
.flex-1 { flex: 1; }
.no-decoration { text-decoration: none; }