/*
 * Iskropixel — общий стиль сайта.
 * Палитра: BLK-NX64 (https://lospec.com/palette-list/blk-nx64).
 * Используем только цвета из палитры; номера в комментариях — индексы в ней.
 */

:root {
  --c-black: #000000;     /* 0 */
  --c-ink: #12173d;       /* 1 */
  --c-navy: #293268;      /* 2 */
  --c-indigo: #464b8c;    /* 3 */
  --c-periwinkle: #6b74b2;/* 4 */
  --c-lavender: #909edd;  /* 5 */
  --c-ice: #c1d9f2;       /* 6 */
  --c-white: #ffffff;     /* 7 */
  --c-sky: #8cdaff;       /* 27 */
  --c-butter: #ffe091;    /* 42 */
  --c-coral: #ff6675;     /* 46 */
  --c-red: #dd3745;       /* 47 */
  --c-wine: #a52639;      /* 48 */
  --c-blush: #ffccd0;     /* 63 */

  --bg: var(--c-periwinkle);
  --panel: var(--c-navy);
  --panel-inner: var(--c-indigo);
  --border: var(--c-ink);
  --text: var(--c-white);
  --text-muted: var(--c-ice);
  --link: var(--c-sky);
  --accent: var(--c-red);
  --accent-hover: var(--c-coral);
  --accent-shadow: var(--c-wine);
  --highlight: var(--c-butter);

  /* Размер "пикселя" интерфейса — толщина рамок, тени и т.п. */
  --px: 4px;

  /* Пиксельные шрифты чёткие только в кратных размерах:
     Galmuri9 — 10, 20, 30px; Tiny5 — 16, 24, 32, 40px. */
  --font-body: "Galmuri9", "Courier New", monospace;
  --font-display: "Tiny5", var(--font-body);
}

/* ---------- Шрифты ---------- */
/* Обрезаны до латиницы и кириллицы, лицензии (OFL) лежат рядом в /fonts. */
@font-face {
  font-family: "Galmuri9";
  src: url("/fonts/Galmuri9.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Tiny5";
  src: url("/fonts/Tiny5-Regular.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Языки ---------- */
/* Текст на обоих языках лежит в разметке, лишний скрываем. */
html[lang="ru"] body [lang="en"],
html[lang="en"] body [lang="ru"] {
  display: none !important;
}

/* ---------- База ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 20px;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  line-height: 1.5;
  color: var(--text);
  /* Фон нарисован так, чтобы повторяться сверху вниз; шире 1920 — растягивается по ширине. */
  background: var(--bg) url("/img/background.png") center top / max(100%, 1920px) auto repeat-y;
  image-rendering: pixelated;
}

img {
  image-rendering: pixelated;
  max-width: 100%;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--highlight);
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
}

:focus-visible {
  outline: var(--px) solid var(--highlight);
  outline-offset: var(--px);
}

/* ---------- Пиксельная рамка ---------- */
/* Рамка со "срезанными" углами из box-shadow. Временная — заменим на графику. */
.pixel-box {
  background: var(--panel);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

/* ---------- Каркас страницы ---------- */
.page {
  width: min(960px, 100% - 32px);
  margin: 0 auto;
  padding: 24px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 20px;
}

.logo {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text);
  text-decoration: none;
}

.logo:hover {
  color: var(--highlight);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  flex: 1;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--highlight);
}

.site-nav a[aria-current="page"]::before {
  content: "> ";
}

.lang-switch {
  display: flex;
  gap: 8px;
}

.lang-switch button {
  font-family: var(--font-display);
  font-size: 16px;
  padding: 4px 10px;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--panel-inner);
}

.lang-switch button[aria-pressed="true"] {
  color: var(--c-ink);
  background: var(--highlight);
}

.section {
  padding: 24px;
}

.section-title {
  font-size: 32px;
  color: var(--highlight);
}

.site-footer {
  text-align: center;
  color: var(--c-ink);
}

/* ---------- Кнопки ---------- */
.button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  padding: 8px 18px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  background: var(--accent);
  box-shadow: 0 var(--px) 0 0 var(--accent-shadow);
}

.button:hover {
  color: var(--text);
  background: var(--accent-hover);
}

.button:active {
  transform: translateY(var(--px));
  box-shadow: none;
}

/* ---------- Главная ---------- */
.intro {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.avatar {
  width: 225px;
  height: 225px;
  flex: none;
  border: var(--px) solid var(--border);
}

.intro-text {
  flex: 1 1 280px;
}

.intro-text h1 {
  font-size: 40px;
}

.intro-text p {
  margin: 0 0 1em;
}

/* Карточки «галерея» и «YouTube» под приветствием. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  color: var(--text-muted);
  text-decoration: none;
}

.feature-card:hover {
  color: var(--highlight);
  background: var(--panel-inner);
}

.feature-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--px) solid var(--border);
  background: var(--border);
}

/* Логотипы платформ на месте картинки в карточке ссылок. */
.feature-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  gap: 8px;
  aspect-ratio: 16 / 9;
  padding: 12% 10%;
  border: var(--px) solid var(--border);
  background: var(--panel-inner);
}

.feature-mosaic .link-icon {
  width: 32px;
  height: 32px;
}

.feature-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  color: var(--highlight);
}

.feature-tag {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--text-muted);
}

/* ---------- Гостевая книга ---------- */
.guestbook-intro {
  margin: 0 0 16px;
  color: var(--text-muted);
}

.guestbook-form {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.guestbook-form label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
}

.guestbook-form input,
.guestbook-form textarea {
  font: inherit;
  padding: 8px 12px;
  border: 0;
  color: var(--text);
  background: var(--panel-inner);
  box-shadow: inset 0 var(--px) 0 0 var(--border);
  resize: vertical;
}

/* Ловушка для ботов: убрана с экрана, но остаётся в форме. */
.guestbook-form .guestbook-trap {
  position: absolute;
  left: -9999px;
}

.guestbook-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.guestbook-status {
  margin: 0;
  color: var(--text-muted);
}

.guestbook-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.guestbook-entry {
  padding: 12px 18px;
  background: var(--panel-inner);
}

.guestbook-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
}

.guestbook-meta strong {
  font-weight: 400;
  color: var(--highlight);
  overflow-wrap: anywhere;
}

.guestbook-meta time {
  color: var(--text-muted);
}

.guestbook-entry p {
  margin: 8px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.guestbook-reply {
  margin: 12px 0 0 24px;
  padding: 8px 14px;
  background: var(--panel);
}

.guestbook-reply strong {
  font-weight: 400;
  color: var(--c-coral);
}

.guestbook-reply p {
  margin: 4px 0 0;
}

.guestbook-note {
  color: var(--text-muted);
}

/* ---------- Ссылки ---------- */
.link-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.link-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel-inner);
  box-shadow: 0 var(--px) 0 0 var(--border);
}

.link-list a:hover {
  color: var(--c-ink);
  background: var(--highlight);
}

.link-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Логотип платформы — силуэт цвета текста: перекрашивается вместе со ссылкой. */
.link-icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.link-list .handle {
  color: inherit;
  opacity: 0.8;
  align-self: center;
  overflow-wrap: anywhere;
  text-align: right;
}

.links-intro {
  text-align: center;
  margin-bottom: 24px;
}

.links-intro .avatar {
  width: 128px;
  height: 128px;
}

/* ---------- Игры ---------- */
.game-list {
  display: grid;
  gap: 28px;
}

.game-card {
  display: grid;
  grid-template-columns: minmax(0, 315px) 1fr;
  gap: 20px;
  padding: 16px;
  background: var(--panel-inner);
}

.game-cover {
  display: block;
  aspect-ratio: 315 / 250;
  border: var(--px) solid var(--border);
  background: var(--border);
}

.game-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-info h2 {
  font-size: 32px;
}

.game-info p {
  margin: 0 0 12px;
}

.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.game-meta li {
  padding: 2px 8px;
  color: var(--c-ink);
  background: var(--text-muted);
}

.game-credits {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .game-card {
    grid-template-columns: 1fr;
  }

  .intro {
    justify-content: center;
    text-align: center;
  }
}