/* =====================================================================
   ALL GAME TESTS — дизайн-токены
   Палитра взята со скрина брендбука Majestic (розовый/чёрный/белый).
   Тёмная тема = инверсия ink/paper, акцент чуть ярче для контраста.
   ===================================================================== */

:root,
[data-theme="light"] {
  /* Базовая палитра */
  --agt-ink:        #0A0A0A;   /* текст / обводки */
  --agt-paper:      #FFFFFF;   /* фон */
  --agt-paper-soft: #FAFAFA;   /* фон карточек */
  --agt-accent:     #E6007E;   /* фирменный розовый Majestic */
  --agt-accent-ink: #FFFFFF;   /* текст поверх акцента */
  --agt-accent-tint:#FDE6F1;   /* лёгкая розовая подложка */
  --agt-line:       #F6BEDA;   /* декоративная тонкая линия (как на скрине) */
  --agt-muted:      #6B6B6B;   /* второстепенный текст */
  --agt-border:     #E7E5E3;   /* нейтральные разделители */

  /* Служебные акценты (не из брендбука, добавлены под функциональные состояния) */
  --agt-success:    #16A34A;
  --agt-danger:     #DC2626;
  --agt-warning:    #D97706;

  /* Тени / радиусы */
  --agt-radius-sm:  10px;
  --agt-radius-md:  16px;
  --agt-radius-lg:  24px;
  --agt-shadow:     0 6px 24px rgba(10,10,10,0.08);

  /* Штриховка неактивных серверов (диагональные линии) */
  --agt-stripe-a: rgba(10,10,10,0.05);
  --agt-stripe-b: transparent;
}

[data-theme="dark"] {
  --agt-ink:         #F5F5F5;
  --agt-paper:       #0A0A0A;
  --agt-paper-soft:  #151515;
  --agt-accent:      #FF3399;   /* чуть ярче на тёмном фоне для контраста */
  --agt-accent-ink:  #0A0A0A;
  --agt-accent-tint: #2A0E1C;
  --agt-line:        #4A1530;
  --agt-muted:       #9A9A9A;
  --agt-border:      #262626;

  --agt-success:     #22C55E;
  --agt-danger:      #EF4444;
  --agt-warning:     #F59E0B;

  --agt-shadow:      0 6px 24px rgba(0,0,0,0.45);

  --agt-stripe-a: rgba(255,255,255,0.06);
  --agt-stripe-b: transparent;
}

/* ── Типографика ──────────────────────────────────────────────────────
   Display: Unbounded (жирный, геометричный, с характером — близко к
   скрину логотипа и к стилю reduxlab.ru).
   Текст: Manrope (нейтральный, отлично читается на кириллице).
   Обе подключаются как локальные @font-face в fonts.css (self-host,
   без внешних CDN — не тянем сторонние домены на прод). */
:root {
  --agt-font-display: 'AGT Display', 'Unbounded', system-ui, sans-serif;
  --agt-font-body:    'AGT Body', 'Manrope', system-ui, sans-serif;

  --agt-fs-h1: clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem);
  --agt-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --agt-fs-h3: 1.25rem;
  --agt-fs-body: 1rem;
  --agt-fs-small: 0.875rem;

  --agt-lh-tight: 1.1;
  --agt-lh-body: 1.6;
}

* { box-sizing: border-box; }

body {
  background: var(--agt-paper);
  color: var(--agt-ink);
  font-family: var(--agt-font-body);
  font-size: var(--agt-fs-body);
  line-height: var(--agt-lh-body);
  margin: 0;
  transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3, .agt-display {
  font-family: var(--agt-font-display);
  line-height: var(--agt-lh-tight);
  margin: 0 0 .5em;
}
h1 { font-size: var(--agt-fs-h1); }
h2 { font-size: var(--agt-fs-h2); }
h3 { font-size: var(--agt-fs-h3); }

a { color: inherit; }

/* ── Кнопки ── */
.agt-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--agt-font-display);
  font-weight: 700;
  font-size: .95rem;
  padding: .85rem 1.4rem;
  border-radius: var(--agt-radius-sm);
  border: 2px solid var(--agt-ink);
  background: var(--agt-accent);
  color: var(--agt-accent-ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.agt-btn:hover  { transform: translateY(-2px); box-shadow: var(--agt-shadow); }
.agt-btn:active { transform: translateY(0); }
.agt-btn--outline {
  background: transparent;
  color: var(--agt-ink);
  border-color: var(--agt-ink);
}
.agt-btn--ghost {
  background: transparent;
  border-color: var(--agt-border);
  color: var(--agt-muted);
}

/* ── Карточки серверов ── */
.agt-server-card {
  position: relative;
  border: 2px solid var(--agt-ink);
  border-radius: var(--agt-radius-md);
  background: var(--agt-paper-soft);
  padding: 1.25rem;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease;
}
.agt-server-card--active {
  cursor: pointer;
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--agt-ink);
}
.agt-server-card--active::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--agt-accent);
}
.agt-server-card--active:hover {
  transform: translate(-3px, -5px) rotate(-1deg);
  box-shadow: 7px 9px 0 var(--agt-ink);
  border-color: var(--agt-accent);
}
.agt-server-card--active:active { transform: translate(0,0) rotate(0); box-shadow: 2px 2px 0 var(--agt-ink); }

.agt-server-card--inactive {
  cursor: not-allowed;
  color: var(--agt-muted);
  background-image: repeating-linear-gradient(
    45deg,
    var(--agt-stripe-a) 0 10px,
    var(--agt-stripe-b) 10px 20px
  );
}
.agt-server-card--inactive .agt-server-card__badge {
  background: var(--agt-paper);
  border: 1px dashed var(--agt-muted);
  color: var(--agt-muted);
}

.agt-server-card__badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--agt-fs-small);
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--agt-accent-tint);
  color: var(--agt-accent);
  font-weight: 600;
}

/* ── Компактный список неактивных серверов (не занимает экран крупными карточками) ── */
.agt-inactive-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--agt-font-display);
  font-weight: 700; font-size: .85rem;
  color: var(--agt-muted);
  background: none; border: 1px dashed var(--agt-border);
  border-radius: 999px; padding: .5rem 1rem;
  cursor: pointer; margin-top: .25rem;
}
.agt-inactive-toggle:hover { border-color: var(--agt-muted); color: var(--agt-ink); }
.agt-inactive-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem;
}
.agt-inactive-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--agt-muted);
  border: 1px dashed var(--agt-border); border-radius: 999px;
  padding: .35rem .75rem .35rem .55rem;
  background-image: repeating-linear-gradient(45deg, var(--agt-stripe-a) 0 6px, var(--agt-stripe-b) 6px 12px);
}

/* ── Rockstar/GTA-флёр: хэлфтон-паттерн, наклонные акценты, звёзды розыска ── */
.agt-halftone {
  background-image: radial-gradient(var(--agt-accent) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: .5;
}
[data-theme="dark"] .agt-halftone { opacity: .35; }

.agt-hero { position: relative; overflow: hidden; }
.agt-hero__halftone {
  position: absolute; top: -20px; right: -40px; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none; z-index: 0;
}
.agt-hero h1 {
  position: relative; z-index: 1;
  transform: skew(-2deg);
  text-shadow: 4px 4px 0 var(--agt-accent-tint);
}
[data-theme="dark"] .agt-hero h1 { text-shadow: 4px 4px 0 var(--agt-accent-tint); }

.agt-section-title {
  display: inline-flex; align-items: center; gap: .6rem;
  position: relative;
}
.agt-section-title::before {
  content: ''; display: inline-block; width: 10px; height: 2.2rem;
  background: var(--agt-accent); transform: skew(-12deg); border-radius: 2px;
}

.agt-wanted-stars { display: inline-flex; gap: .15rem; color: var(--agt-accent); vertical-align: middle; }
.agt-wanted-stars .agt-icon { width: .95em; height: .95em; }

/* ── Декоративная линия с точками (как на брендовом скрине) ── */
.agt-deco-line { position: absolute; pointer-events: none; opacity: .5; }
.agt-deco-dot  { fill: var(--agt-accent); stroke: var(--agt-ink); stroke-width: 2; }

/* ── Мобильная адаптация ── */
table.agt-table { display: block; overflow-x: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .agt-wrap { padding: 1.5rem 1rem; }
  .agt-card { padding: 1.25rem; }
  .agt-inline-form { flex-direction: column; align-items: stretch; }
  .agt-inline-form select, .agt-inline-form input { width: 100%; }
  .agt-btn { width: 100%; justify-content: center; }
  .agt-nav { width: 100%; }
  .agt-nav .agt-btn { flex: 1 1 auto; }
  .agt-hero h1 { transform: none; text-shadow: none; }
}