/* ------------------------------------------------------------------ *
 * Vikibil Games — общий визуальный слой хаба и каталога.
 *
 * Байкальская зима: глубокая вода, лёд, холодный свет — и редкие тёплые
 * акценты, потому что сплошной синий читается как мёртвый. Никаких веб-шрифтов
 * и библиотек: страница обязана открываться мгновенно во встроенном браузере
 * соцсети, а не «через секунду».
 * ------------------------------------------------------------------ */

:root {
  /* вода и лёд */
  --abyss:      #040d18;
  --deep:       #071a2e;
  --water:      #0c2b48;
  --water-lit:  #14406b;
  --ice:        #e8f4fb;
  --ice-dim:    #9db8cd;
  --ice-faint:  #6b8aa3;

  /* акценты */
  --accent:     #5cc8f5;
  --accent-hot: #8fe0ff;
  --ember:      #ffb469;   /* тёплый: закат над льдом */
  --jade:       #6ddba4;   /* «работает / готово» */

  /* поверхности */
  --line:       rgba(140, 190, 225, .16);
  --line-lit:   rgba(140, 190, 225, .38);
  --card:       rgba(255, 255, 255, .045);
  --card-lit:   rgba(255, 255, 255, .075);
  --glass:      rgba(7, 26, 46, .72);

  --radius:     16px;
  --radius-sm:  10px;
  --tap:        44px;
  --pad:        clamp(1rem, 4vw, 2.5rem);
  --shell:      68rem;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ice);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-synthesis-weight: none;
  overflow-x: hidden;                 /* горизонтальный скролл недопустим */
  background: var(--abyss);
}

/* Фон: три мягких пятна света поверх глубины. Чистый CSS — ни одного
   загружаемого файла, поэтому первый экран не ждёт сети. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 70% at 50% -8%, var(--water) 0%, transparent 62%),
    radial-gradient(80% 50% at 108% 4%, rgba(92, 200, 245, .12) 0%, transparent 58%),
    radial-gradient(90% 60% at -10% 92%, rgba(255, 180, 105, .07) 0%, transparent 60%),
    var(--abyss);
}

/* Едва заметная ледяная сетка — даёт поверхности фактуру, весит ноль. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(140, 190, 225, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 190, 225, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: calc(env(safe-area-inset-left) + var(--pad)) calc(env(safe-area-inset-right) + var(--pad));
}

/* ---------- типографика ---------- */

h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.12; font-weight: 660; }
p { margin: 0; text-wrap: pretty; }

.eyebrow {
  margin: 0 0 .7rem;
  color: var(--accent);
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

.lead { color: var(--ice-dim); font-size: clamp(1rem, 2.7vw, 1.15rem); }
.muted { color: var(--ice-faint); font-size: .88rem; }

.section-head { margin-bottom: clamp(1.1rem, 3vw, 1.7rem); }
.section-head h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
.section-head p { margin-top: .45rem; color: var(--ice-dim); font-size: .95rem; max-width: 42rem; }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55ch;
  min-height: var(--tap); padding: .78rem 1.5rem;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-size: .97rem; font-weight: 640; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: filter .2s var(--ease), transform .12s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary { background: linear-gradient(158deg, var(--accent-hot), var(--accent)); color: #04121f; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-lit); color: var(--ice); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(92, 200, 245, .1); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

:where(a, button):focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; }

/* ---------- карточки и панели ---------- */

.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
  transition: border-color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.card:hover { border-color: var(--line-lit); background: var(--card-lit); }
.card:focus-within { border-color: var(--accent); }

.panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass); padding: clamp(1.1rem, 3.4vw, 1.7rem);
}

.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .24em .72em .24em .58em;
  border: 1px solid var(--line); border-radius: 99px;
  color: var(--ice-faint); font-size: .74rem; font-weight: 560; letter-spacing: .03em;
}
.chip::before { content: ''; width: .46em; height: .46em; border-radius: 50%; background: currentColor; }
.chip.ready { color: var(--jade); border-color: rgba(109, 219, 164, .32); }
.chip.soon  { color: var(--ember); border-color: rgba(255, 180, 105, .3); }

/* ---------- обложки ---------- */

.art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, var(--water), var(--abyss)); }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 13, 24, .88) 100%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}