/* ============================================================
   NOCTIS HUD — основа дизайн-системы игровой оболочки
   Две арт-директории на одних токенах:
     [data-art="real"]  — фотореал: приглушённо, без свечения
     [data-art="anime"] — аниме: неон, свечение, стекло
   Все размеры масштабируются от вьюпорта → один HUD на всех устройствах.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Exo+2:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

:root {
  /* ---- Типографика ----
     Марка — Chakra Petch: квадратная техно-грань, только латинский логотип
     (кириллицы у него нет — на русском тексте не применять).
     Заголовки — Exo 2: та же техничная пластика, но с кириллицей. */
  --font-brand: "Chakra Petch", "Exo 2", sans-serif;
  --font-display: "Exo 2", "Segoe UI", sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;

  --fs-micro: clamp(9px, 1.05vmin, 12px); /* @kind font */
  --fs-cap: clamp(10px, 1.25vmin, 14px); /* @kind font */
  --fs-body: clamp(12px, 1.5vmin, 16px); /* @kind font */
  --fs-lead: clamp(14px, 1.9vmin, 20px); /* @kind font */
  --fs-title: clamp(18px, 2.8vmin, 32px); /* @kind font */
  --fs-hero: clamp(26px, 5vmin, 64px); /* @kind font */

  --track-wide: 0.12em; /* @kind other */
  --track-ui: 0.01em; /* @kind other */

  /* ---- Ритм и геометрия ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 26px; --r-pill: 999px;

  /* Кнопки HUD: тянутся от вьюпорта, но не мельче пальца (44px) */
  --hud-btn: clamp(44px, 4.4vmin, 58px); /* @kind spacing */
  --hud-btn-sm: clamp(38px, 3.4vmin, 46px); /* @kind spacing */
  --hud-slot: clamp(48px, 5.2vmin, 68px); /* @kind spacing */
  --hud-gap: clamp(6px, 0.9vmin, 12px); /* @kind spacing */
  --hud-pad: clamp(10px, 1.6vmin, 22px); /* @kind spacing */
  --hud-edge: max(clamp(10px, 1.8vmin, 26px), env(safe-area-inset-left, 0px)); /* @kind spacing */
  --hud-edge-b: max(clamp(10px, 1.8vmin, 26px), env(safe-area-inset-bottom, 0px)); /* @kind spacing */

  --line: 1px; /* @kind spacing */

  /* ---- Слои ---- */
  --z-scene: 0; /* @kind other */
  --z-hud: 10; /* @kind other */
  --z-panel: 20; /* @kind other */
  --z-modal: 30; /* @kind other */
  --z-toast: 40; /* @kind other */

  /* ---- Движение ---- */
  --e-out: cubic-bezier(.22, .61, .36, 1); /* @kind other */
  --e-in-out: cubic-bezier(.6, .04, .34, 1); /* @kind other */
  --e-spring: cubic-bezier(.34, 1.4, .64, 1); /* @kind other */
  --d-1: 120ms; /* @kind other */
  --d-2: 200ms; /* @kind other */
  --d-3: 320ms; /* @kind other */
  --d-4: 560ms; /* @kind other */

  /* ---- База: нейтрали (общие для обоих режимов) ---- */
  --ink: oklch(0.97 0.004 250);
  --ink-2: oklch(0.82 0.008 250);
  --ink-3: oklch(0.64 0.012 250);
  --ink-4: oklch(0.48 0.014 250);
  --void: oklch(0.14 0.008 250);

  /* ---- Семантика состояний ---- */
  --ok: oklch(0.76 0.15 155);
  --warn: oklch(0.79 0.15 78);
  --bad: oklch(0.66 0.19 22);
  --hp: oklch(0.72 0.17 145);
  --mp: oklch(0.72 0.13 250);
  --xp: oklch(0.83 0.14 92);
  --rare: oklch(0.68 0.17 265);
  --epic: oklch(0.66 0.2 305);

  /* Бренд-константа для взрослой ветки контента: не зависит от арт-режима. */
  --adult: #7a1e3a;
  --adult-ink: oklch(0.96 0.02 20);
}

/* ==================== РЕАЛ (по умолчанию) ==================== */
:root,
[data-art="real"] {
  --art: "real"; /* @kind other */

  --accent: oklch(0.68 0.12 245);
  --accent-soft: oklch(0.68 0.12 245 / 0.16);
  --accent-ink: oklch(0.99 0 0);
  --accent-2: oklch(0.72 0.07 230);

  /* Стекло панелей */
  --glass: oklch(0.19 0.008 250 / 0.78);
  --glass-2: oklch(0.24 0.01 250 / 0.72);
  --glass-hi: oklch(0.99 0 0 / 0.07);
  --glass-brd: oklch(0.99 0 0 / 0.1);
  --glass-brd-hi: oklch(0.99 0 0 / 0.2);
  --glass-blur: 14px; /* @kind other */
  --glass-sat: 105%; /* @kind other */

  --shadow-1: 0 2px 10px oklch(0 0 0 / 0.35);
  --shadow-2: 0 10px 34px oklch(0 0 0 / 0.45);

  /* Свечение почти выключено: реал держит контраст, а не неон.
     Токены остаются «складываемыми» (0 0 0 transparent), чтобы их можно
     было перечислять в box-shadow вместе с тенями. */
  --glow-accent: 0 0 0 oklch(0 0 0 / 0);
  --glow-soft: 0 0 0 oklch(0 0 0 / 0);
  --ring-glow: 0 0 0 var(--line) oklch(0.72 0.12 245 / 0.85);
  --scrim: linear-gradient(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0)); /* @kind other */
  --sheen: linear-gradient(160deg, oklch(0.99 0 0 / 0.05), oklch(0.99 0 0 / 0) 46%); /* @kind other */
  --hud-alpha: 0.92; /* @kind other */
}

/* ==================== АНИМЕ ==================== */
[data-art="anime"] {
  --art: "anime"; /* @kind other */

  --accent: oklch(0.8 0.15 218);
  --accent-soft: oklch(0.8 0.15 218 / 0.2);
  --accent-ink: oklch(0.17 0.03 240);
  --accent-2: oklch(0.66 0.2 295);

  --glass: oklch(0.17 0.028 262 / 0.72);
  --glass-2: oklch(0.22 0.035 265 / 0.66);
  --glass-hi: oklch(0.99 0 0 / 0.1);
  --glass-brd: oklch(0.8 0.15 218 / 0.22);
  --glass-brd-hi: oklch(0.8 0.15 218 / 0.55);
  --glass-blur: 20px; /* @kind other */
  --glass-sat: 130%; /* @kind other */

  --shadow-1: 0 2px 12px oklch(0.1 0.05 260 / 0.5);
  --shadow-2: 0 14px 44px oklch(0.08 0.06 265 / 0.6);

  --glow-accent: 0 0 18px oklch(0.8 0.15 218 / 0.55), 0 0 44px oklch(0.8 0.15 218 / 0.22);
  --glow-soft: 0 0 14px oklch(0.8 0.15 218 / 0.28);
  --ring-glow: 0 0 0 1px oklch(0.8 0.15 218 / 0.9), 0 0 20px oklch(0.8 0.15 218 / 0.5);
  --scrim: linear-gradient(oklch(0.08 0.05 265 / 0.55), oklch(0.08 0.05 265 / 0)); /* @kind other */
  --sheen: linear-gradient(160deg, oklch(0.99 0 0 / 0.12), oklch(0.99 0 0 / 0) 42%); /* @kind other */
  --hud-alpha: 1; /* @kind other */
}

/* ==================== Сброс и базовый слой ==================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  letter-spacing: var(--track-ui);
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

.ds-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: 600; }
.ds-brand { font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.ds-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ds-cap { font-size: var(--fs-cap); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); }

/* Утилита стекла — единственный «класс» системы, всё остальное живёт в компонентах */
.ds-glass {
  background: var(--glass);
  border: var(--line) solid var(--glass-brd);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-1);
}

/* Заглушка под арт: полосатое поле + подпись, что сюда встанет */
.ds-plate {
  position: relative;
  background:
    repeating-linear-gradient(135deg, oklch(0.99 0 0 / 0.045) 0 8px, oklch(0.99 0 0 / 0) 8px 16px),
    var(--glass-2);
  border: var(--line) dashed var(--glass-brd-hi);
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
  text-align: center; overflow: hidden;
}

/* Полосы прокрутки внутри панелей: тонкие и приглушённые */
* { scrollbar-width: thin; scrollbar-color: oklch(0.99 0 0 / 0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb { background: oklch(0.99 0 0 / 0.16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box }
*::-webkit-scrollbar-thumb:hover { background: oklch(0.99 0 0 / 0.3); background-clip: content-box }

@keyframes ds-pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes ds-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes ds-sweep { from { transform: translateX(-120%) } to { transform: translateX(220%) } }
@keyframes ds-spin { to { transform: rotate(360deg) } }
@keyframes ds-breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.035) } }
@keyframes ds-bars { 0%, 100% { transform: scaleY(.18) } 50% { transform: scaleY(1) } }
@keyframes ds-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes ds-ring { 0% { transform: scale(.9); opacity: .7 } 100% { transform: scale(1.5); opacity: 0 } }
@keyframes ds-dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-2px) } }
/* Появление для элементов, у которых transform занят якорем (translateX(-50%)) */
@keyframes ds-fade { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}