/* RUCKUS — tasarım token'ları (DESIGN.md §12.2). Menüler (base.css) ve HUD (hud.css) bunun ÜSTÜNE kurulur.
   Bu dosya sadece değişken + ikon temeli + birkaç yardımcı sınıf içerir; bileşen stili YOK.
   Yazı tipleri (Barlow / Barlow Condensed) index.html'de Google Fonts'tan bağlanır — burada @import yok. */

:root {
  /* ---------------------------------------------------------------- §12.2 (sözleşme — değiştirme, silme) */
  /* zemin & yüzeyler */
  --bg-0: #07090f; --bg-1: #0d111b; --bg-2: #141a28; --bg-3: #1c2436;
  --glass: rgba(16, 21, 34, .72); --glass-strong: rgba(12, 16, 27, .88); --glass-blur: 14px;
  --stroke: rgba(255, 255, 255, .08); --stroke-2: rgba(255, 255, 255, .16); --stroke-accent: rgba(255, 207, 51, .55);
  /* metin */
  --tx-0: #f3f5fa; --tx-1: #b9c1d4; --tx-2: #7d879e; --tx-inv: #0b0e16;
  /* vurgu (tek ana vurgu: volt sarı) */
  --accent: #ffcf33; --accent-2: #ffb300; --accent-glow: rgba(255, 207, 51, .35);
  --cyan: #3ddcff; --violet: #9b6bff; --success: #35e08c; --danger: #ff4d5e; --warn: #ff9f1c;
  --team-red: #ff5a4f; --team-blue: #3fa0ff;
  /* nadirlik (shared RARITIES ile aynı) */
  --r0: #b4b9c2; --r1: #5fd35b; --r2: #3fa9ff; --r3: #c25cff; --r4: #ffb52e; --r5: #ff4fd8;
  /* tipografi */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif; /* 700/800, çoğunlukla BÜYÜK HARF, italik vurgu */
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;                 /* 500/600/700 */
  --fs-hero: clamp(40px, 7vw, 84px); --fs-h1: clamp(26px, 4.2vw, 40px); --fs-h2: clamp(18px, 2.6vw, 24px);
  --fs-body: clamp(13px, 1.6vw, 15px); --fs-small: 12px; --tracking-display: .02em;
  /* şekil & gölge */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --skew: -8deg;
  --shadow-1: 0 6px 18px rgba(0, 0, 0, .35); --shadow-2: 0 14px 40px rgba(0, 0, 0, .5);
  /* hareket */
  --ease: cubic-bezier(.2, .8, .2, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* ---------------------------------------------------------------- ekler (v3 marka katmanı) */
  /* zemin: tam ekran arka planlar için hazır katmanlar (koyu gradyan + çok hafif üst ışık) */
  --bg-grad: radial-gradient(120% 90% at 50% -10%, #1a2236 0%, #0d111b 45%, #07090f 100%);
  --bg-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  --glass-hi: rgba(255, 255, 255, .07);         /* camın üst kenarındaki 1px aydınlık çizgi */
  --glass-hover: rgba(24, 31, 48, .8);          /* cam yüzey üstüne gelince / basılıyken */
  --scrim: rgba(4, 6, 10, .66);                 /* modal arkası karartma */
  /* vurgu türevleri */
  --accent-soft: rgba(255, 207, 51, .12);       /* seçili kart iç dolgusu, çip zemini */
  --accent-ink: #0b0e16;                        /* vurgu dolgu üstündeki metin/ikon (= --tx-inv) */
  --accent-grad: linear-gradient(180deg, #ffe066 0%, #ffcf33 48%, #ffb300 100%); /* .btn-primary dolgusu */
  --danger-soft: rgba(255, 77, 94, .14); --success-soft: rgba(53, 224, 140, .14);
  --cyan-soft: rgba(61, 220, 255, .14); --violet-soft: rgba(155, 107, 255, .16);
  /* odak halkası (klavye/erişilebilirlik) ve ışımalar */
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  --glow-accent: 0 0 0 1px var(--stroke-accent), 0 0 22px var(--accent-glow);
  --shadow-inset-hi: inset 0 1px 0 var(--glass-hi);
  /* şekil */
  --r-xs: 4px; --r-xl: 24px; --r-pill: 999px;
  --skew-back: 8deg;                            /* eğik kutunun içindeki metni düzeltmek için ters açı */
  --cut: 10px;                                  /* köşesi kesik (chamfer) panel/buton kesik boyu */
  /* boşluk ölçeği (4'lük) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* tipografi ekleri */
  --fs-tiny: 10px; --fs-label: 11px;            /* çip/etiket (BÜYÜK HARF + harf aralığı) */
  --tracking-label: .12em; --tracking-wide: .06em;
  --lh-tight: 1.05; --lh-body: 1.4;
  /* dokunma alanı (§12.3: min 44px, telefonda 48px) */
  --tap-min: 44px; --tap-phone: 48px;
  /* hareket ekleri (zıplama/sallanma eğrisi YOK — §12.3) */
  --dur-4: 480ms; --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);     /* sinematik giriş: hızlı başlar, yumuşak ve aşmadan oturur */
  /* katman sırası (menü / HUD / üst katmanlar ortak ölçek) */
  --z-scene: 0; --z-ui: 10; --z-hud: 20; --z-overlay: 40; --z-modal: 60; --z-toast: 80; --z-top: 100;
  /* çentik / güvenli alan */
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ SVG ikon temeli (public/js/ui/icons.js → icon())
   Boyut width/height özniteliğinden gelir; renk = currentColor (ikonun içindeki dolgu/çizgi sprite'ta tanımlı). */
.ic {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  overflow: visible;
  pointer-events: none; /* tıklama her zaman ikonu içeren butona gitsin (e.target = buton) */
}
/* metinle aynı boyda ikon (width/height özniteliklerini ezer) */
.ic-1em { width: 1em; height: 1em; }
/* renk yardımcıları */
.ic-accent { color: var(--accent); }
.ic-muted { color: var(--tx-2); }
.ic-soft { color: var(--tx-1); }
.ic-ink { color: var(--accent-ink); }
.ic-danger { color: var(--danger); }
.ic-success { color: var(--success); }
.ic-warn { color: var(--warn); }
.ic-cyan { color: var(--cyan); }
.ic-violet { color: var(--violet); }
.ic-red { color: var(--team-red); }
.ic-blue { color: var(--team-blue); }
.ic-r0 { color: var(--r0); } .ic-r1 { color: var(--r1); } .ic-r2 { color: var(--r2); }
.ic-r3 { color: var(--r3); } .ic-r4 { color: var(--r4); } .ic-r5 { color: var(--r5); }
/* ışıma (seçili / nadir) */
.ic-glow { filter: drop-shadow(0 0 6px currentColor); }
/* silah silüetini sola baktır (örn. killfeed'de kurbana doğru) */
.ic-flip { transform: scaleX(-1); }
/* yükleniyor / yeniden bağlanıyor */
.ic-spin { animation: ic-spin 900ms linear infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ic-spin { animation-duration: 2400ms; }
}

/* ------------------------------------------------------------------ genel yardımcılar (u- önekli, bileşen değil) */
.u-tnum { font-variant-numeric: tabular-nums; }
.u-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.u-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}