/* =========================================================
   Striver — XMB (PlayStation 3)
   Фон: видео аквариума · иконки разделов:
   Oxygen, KDE (LGPL), серые · шрифт M PLUS 1p (OFL)
   ========================================================= */

/* многоточие берём из системного шрифта: в M PLUS 1p оно японское, по центру строки, а не у базовой линии */
@font-face {
  font-family: "Dots";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Segoe UI"), local("Roboto"), local("DejaVu Sans");
  unicode-range: U+2026;
}

:root {
  --font: "Dots", "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  --cat-icon: 68px;
  --col: 140px;
  /* красная и голубая кайма по бокам букв — сведение лучей как у кинескопа (VHS) */
  --shadow: -1px 0 rgba(255, 30, 90, .3), 1px 0 rgba(30, 210, 255, .3), 0 1px 2px rgba(0, 0, 0, .45);
  --glow: -1.5px 0 rgba(255, 30, 90, .4), 1.5px 0 rgba(30, 210, 255, .4), 0 0 10px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .45);
  --ease: cubic-bezier(.25, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  min-height: 100vh;
  font: 400 16px/1.45 var(--font);
  color: #fff;
  background: linear-gradient(160deg, #0d3a7a, #06183a);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Фон: видео аквариума ---------- */
.bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: #04121f;
  pointer-events: none;
}
.bg video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* затемнение, чтобы белый текст читался поверх яркого видео */
.bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 10, 25, .35) 0%, rgba(0, 10, 25, .08) 42%, rgba(0, 10, 25, .3) 100%),
    linear-gradient(90deg, rgba(0, 10, 25, .25), rgba(0, 10, 25, 0) 60%);
}

/* картинка с кассеты (js/vhs.js) проявляется поверх видео с первым кадром */
.bg__tape {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .6s;
}
.bg__tape.is-on { opacity: 1; }

/* ---------- Термометр в правом верхнем углу: анимация Animation Factory ---------- */
.status {
  position: fixed; z-index: 2;
  /* отступ справа тот же, что сверху: термометр стоит ровно в углу */
  top: clamp(18px, 4.5vh, 44px);
  right: clamp(18px, 4.5vh, 44px);
  pointer-events: none;
  transition: opacity .25s, visibility .25s;
}
.baro__gif { display: block; height: 52px; width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }

/* ---------- Без JS: обычные списки ---------- */
.xmb { position: relative; z-index: 1; padding: 72px 20px 40px; }
.cat__label { margin: 32px 0 12px; font-weight: 400; font-size: 22px; }
.cat__items { margin: 0; padding: 0; list-style: none; }
.item { margin: 10px 0; }
.item__row { display: flex; align-items: center; gap: 18px; color: #fff; text-decoration: none; }
.item__icon { flex: none; display: grid; place-items: center; width: var(--col); }
.item__icon img { display: block; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.item__text { min-width: 0; }
.item__title { display: block; font-size: clamp(16px, 1.45vw, 21px); text-shadow: var(--shadow); }
.item__sub { display: block; max-width: 440px; font-size: clamp(13px, 1.05vw, 15px); color: rgba(255, 255, 255, .86); text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 10px rgba(0, 0, 0, .35); }

/* превью видео и фото */
.item__icon--video img { width: 96px; height: 54px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35); filter: none; background: rgba(0, 0, 0, .25); }
.item__icon--photo img { width: 54px; height: 54px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35); filter: none; }

/* аватарка в стеклянной рамке с экрана входа aMSN 2 вместо белого контура;
   рамка режется на 9 частей, поэтому бортик остаётся ровным при любом размере аватарки */
.avatar { position: relative; display: block; line-height: 0; }
.item__icon--photo .avatar img,
.xmb-on .item.is-selected .item__icon--photo .avatar img { border: 0; border-radius: 0; box-shadow: none; }
/* аватарка с рамкой чуть меньше остальных снимков */
.xmb-on .item.is-selected .item__icon--photo .avatar img { width: 84px; height: 84px; }
.avatar::after {
  content: "";
  position: absolute; inset: -10px;
  border: 10px solid transparent;
  border-image: url(../assets/frames/amsn-dp-border.png) 8 stretch;
  opacity: .72; /* слегка прозрачная: сквозь рамку видно фон */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
  pointer-events: none;
}

/* глянец iOS 6 для логотипов без собственного блика */
.icon-tile {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  overflow: hidden;
  border-radius: 11px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.icon-tile::after {
  content: "";
  position: absolute;
  left: -20%; right: -20%; top: -62%;
  height: 112%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .1));
  pointer-events: none;
}
.item__icon .icon-tile img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.icon-tile--twitch { background: linear-gradient(#8b6bd0, #6441a5 55%, #4b2f80); }
.item__icon .icon-tile--twitch img { width: 56%; height: auto; object-fit: contain; filter: brightness(0) invert(1); }

/* панель «О себе» справа */
.item__panel { margin: 14px 0 0 calc(var(--col) + 18px); max-width: 400px; text-shadow: var(--shadow); }
.panel__note { margin: 0 0 14px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.panel__facts { display: grid; gap: 10px; margin: 0; }
.panel__facts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .28); }
.panel__facts dt { font-size: 14px; color: rgba(255, 255, 255, .7); }
.panel__facts dd { margin: 0; }
.panel__facts a { text-underline-offset: 1px; }

/* пока скрипт не собрал XMB, не показываем запасную вёрстку — иначе при загрузке мигают обычные списки */
.js:not(.xmb-on):not(.xmb-failed) .xmb { visibility: hidden; }

/* ---------- XMB ---------- */
.xmb-on, .xmb-on body { height: 100%; overflow: hidden; }
.xmb-on .xmb {
  position: fixed; inset: 0;
  padding: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.xmb-on .cat__label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ряд разделов всегда поверх: при листании пункты проходят под кнопками, а не по ним */
.xmb-on .xmb-cats { position: relative; z-index: 2; }

/* ряд разделов */
.xmb-cat {
  position: absolute; top: 0; left: 0;
  display: grid; justify-items: center;
  width: var(--cat-icon);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  opacity: .5;
  transition: transform .32s var(--ease), opacity .32s;
}
.xmb-cat img {
  display: block;
  width: var(--cat-icon); height: var(--cat-icon);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  transition: transform .32s var(--ease), filter .32s ease;
}
.xmb-cat__label {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(13px, 1.05vw, 16px);
  text-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .25s;
}
.xmb-cat.is-current { opacity: 1; }
.xmb-cat.is-current img { transform: scale(1.12); }
.xmb-cat.is-current .xmb-cat__label { opacity: 1; }
.xmb-cat:hover { opacity: .85; }
.xmb-cat.is-current:hover { opacity: 1; }
/* без рамки фокуса и серого квадрата при нажатии: выбранный раздел и так виден */
.xmb-cat:focus, .xmb-cat:focus-visible { outline: none; }
.xmb-cat, .item__row { -webkit-tap-highlight-color: transparent; }

/* столбец пунктов */
.xmb-on .item {
  position: absolute; top: 0; left: var(--ix, 20vw);
  width: min(760px, calc(100vw - var(--ix, 20vw) - 20px));
  margin: 0;
  opacity: .6;
  transition: transform .32s var(--ease), opacity .25s;
  will-change: transform;
}
.xmb-on .cat:not(.is-current) .item { opacity: 0; pointer-events: none; }
.xmb-on .item.is-far { visibility: hidden; }
.xmb-on .item__row { cursor: pointer; }
.xmb-on .item__row:focus { outline: none; }
.xmb-on .item__icon { height: 58px; }
.xmb-on .item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xmb-on .item__sub,
.xmb-on .item__panel { display: none; }

.xmb-on .item.is-selected { opacity: 1; }
.xmb-on .item.is-selected .item__icon { height: 100px; }
.xmb-on .item.is-selected .item__icon > img { width: 88px; height: 88px; }
.xmb-on .item.is-selected .item__icon--video img { width: 136px; height: 76px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 0 16px rgba(255, 255, 255, .3); }
.xmb-on .item.is-selected .item__icon--photo img { width: 96px; height: 96px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 0 16px rgba(255, 255, 255, .3); }
.xmb-on .item.is-selected .icon-tile { width: 80px; height: 80px; border-radius: 18px; }
.xmb-on .item.is-selected .item__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  text-shadow: var(--glow);
}
.xmb-on .item.is-selected .item__sub { display: block; margin-top: 4px; }
.xmb-on .item.is-selected .item__panel {
  display: block;
  position: absolute; top: 4px;
  left: calc(var(--col) + 18px + 440px + 56px);
  width: min(380px, calc(100vw - var(--ix, 20vw) - var(--col) - 540px));
  margin: 0;
}

/* «О себе»: текст ближе к аватарке, она уже остальных иконок */
@media (min-width: 641px) {
  .xmb-on #striver .item__text { margin-left: -22px; }
}

@media (max-width: 1180px) {
  .xmb-on .item.is-selected .item__panel {
    position: static;
    width: auto;
    max-width: 420px;
    margin: 16px 0 0 calc(var(--col) + 18px);
  }
}

/* первая раскладка без анимации */
.xmb-init .xmb-cat,
.xmb-init .xmb-cat img,
.xmb-init .item { transition: none !important; }

/* иконки Oxygen в стиле Frutiger Aero: обесцвечены до серебристых, глянец и объём сохраняются */
img[src*="icons/aero/"] { filter: grayscale(1) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
/* выбранная иконка — в родных цветах Oxygen */
.xmb-cat.is-current img[src*="icons/aero/"],
.item.is-selected .item__icon img[src*="icons/aero/"] { filter: grayscale(0) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }

/* ---------- Анимированные стикеры (TGS) вместо иконок: рисует js/stickers.js ---------- */
.item__tgs {
  display: block;
  width: 48px; height: 48px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  opacity: 0;
  transition: opacity .3s;
}
.item__tgs.is-ready { opacity: 1; }
/* обычная иконка у daytag — только если стикер не загрузился, иначе она мелькает перед ним */
.js [data-tgs]:not(.tgs-failed) > :not(.item__tgs) { visibility: hidden; }
.xmb-on .item.is-selected .item__tgs { width: 88px; height: 88px; }
@media (max-width: 640px) {
  .item__tgs { width: 40px; height: 40px; }
  .xmb-on .item.is-selected .item__tgs { width: 64px; height: 64px; }
}

/* ---------- Игра поверх сайта ---------- */
.play { position: fixed; inset: 0; z-index: 30; background: #000; }
.play__frame { display: block; width: 100%; height: 100%; border: 0; }
/* только крестик, без подложки: тень держит его читаемым на любом фоне игры */
.play__close {
  position: absolute;
  top: clamp(8px, 2.5vh, 20px);
  right: clamp(8px, 2.5vw, 20px);
  padding: 6px 8px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit; font-size: 24px; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6);
  opacity: .75;
  cursor: pointer;
  transition: opacity .2s;
}
.play__close:hover, .play__close:focus-visible { opacity: 1; outline: none; }

/* ---------- Просмотр фото ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .92);
  touch-action: none;
}
.viewer__img,
.viewer__video {
  max-width: 94vw;
  max-height: 84vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  -webkit-user-drag: none;
  user-select: none;
}
.viewer__video { background: #000; }
.viewer__bar {
  position: absolute; left: 0; right: 0;
  bottom: clamp(10px, 3vh, 28px);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}
.viewer__btn {
  padding: 6px 14px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.viewer__btn:hover, .viewer__btn:focus-visible { opacity: 1; outline: none; }
.viewer.is-single .viewer__bar { display: none; }
.viewer__close { position: absolute; top: clamp(10px, 3vh, 28px); right: clamp(10px, 3vw, 32px); font-size: 20px; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 640px) {
  :root { --cat-icon: 44px; --col: 96px; }
  .xmb-cat__label { font-size: 12px; }
  .xmb-on .item__icon { height: 50px; }
  .item__icon img { width: 40px; height: 40px; }
  .item__icon--video img { width: 80px; height: 45px; }
  .item__icon--photo img { width: 46px; height: 46px; }
  .icon-tile { width: 40px; height: 40px; border-radius: 9px; }
  /* на телефоне название выбранного пункта показываем целиком, без многоточия */
  .xmb-on .item.is-selected .item__title { display: block; overflow: visible; white-space: normal; }
  /* строка выстраивается от верха: обложка стоит на месте, как бы ни рос текст */
  .xmb-on .item.is-selected .item__row { align-items: flex-start; }
  /* текст занимает всю высоту строки и стоит в ней по центру: короткая подпись
     оказывается по центру обложки, а длинная — вровень с её верхом и растёт вниз */
  .xmb-on .item.is-selected .item__text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* срезаем полуинтерлиньяж по краям блока, иначе буквы садятся ниже обложки */
  .xmb-on .item.is-selected .item__text > :first-child { margin-top: -9px; }
  .xmb-on .item.is-selected .item__text > :last-child { margin-bottom: -9px; }
  .xmb-on .item.is-selected .item__icon { height: auto; }
  .xmb-on .item.is-selected .item__icon > img { width: 64px; height: 64px; }
  .xmb-on .item.is-selected .item__icon--video img { width: 92px; height: 52px; }
  .xmb-on .item.is-selected .item__icon--photo img { width: 76px; height: 76px; }
  .xmb-on .item.is-selected .item__icon--photo .avatar img { width: 66px; height: 66px; }
  /* аватарка «О себе» чуть выше текста */
  .xmb-on #striver .item__icon--photo { transform: translateY(-10px); }
  .avatar::after { inset: -8px; border-width: 8px; }
  .xmb-on .item.is-selected .icon-tile { width: 62px; height: 62px; border-radius: 14px; }
  .status { right: clamp(14px, 5vw, 20px); }
  .baro__gif { height: 42px; }
  /* на телефоне термометр уходит, как только листаешь пункты, и возвращается на первом */
  .items-scrolled .status { opacity: 0; visibility: hidden; }
  .item__row { gap: 12px; }
  .item__panel, .xmb-on .item.is-selected .item__panel { margin-left: calc(var(--col) + 12px); }
  .panel__note { margin-bottom: 10px; font-size: 13px; }
  .panel__facts { gap: 8px; }
  .panel__facts div { grid-template-columns: 72px 1fr; gap: 10px; padding-top: 8px; }
  .panel__facts dt { font-size: 12px; line-height: 1.6; }
  .panel__facts dd { font-size: 14px; }
}

/* ---------- VHS: экран телевизора поверх сайта ----------
   клики и нажатия проходят насквозь; в просмотре фото и видео и в играх эффекта нет — там чистая картинка */
.vhs { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.vhs-off .vhs { display: none; }
/* строки развёртки */
.vhs::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .28) 50%, rgba(0, 0, 0, 0));
  background-size: 100% 3px;
}
/* края кинескопа темнее */
.vhs::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45));
}
/* зерно и полоса трекинга: над аквариумом их рисует шейдер (js/vhs.js),
   эти слои — запасные, когда WebGL нет */
.vhs__noise {
  position: absolute; inset: -60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .1;
  animation: vhs-noise .5s steps(5) infinite;
}
@keyframes vhs-noise { to { transform: translate(-60px, 40px); } }
.vhs__band {
  position: absolute; left: 0; right: 0; top: 0;
  height: 14vh;
  transform: translateY(-30vh); /* ждёт за экраном; проход запускает js/vhs.js */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 600px 100%,
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0));
  opacity: .55;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.vhs-gl .vhs__noise,
.vhs-gl .vhs__band { display: none; }


/* сбой трекинга: всё на экране дёргается, кайма у букв разъезжается */
.vhs-glitch {
  --shadow: -4px 0 rgba(255, 30, 90, .6), 4px 0 rgba(30, 210, 255, .6), 0 1px 2px rgba(0, 0, 0, .45);
  --glow: -5px 0 rgba(255, 30, 90, .6), 5px 0 rgba(30, 210, 255, .6), 0 0 10px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .45);
}
.vhs-glitch .xmb,
.vhs-glitch .status { animation: vhs-jerk .3s steps(1, end) both; }
@keyframes vhs-jerk {
  0%   { transform: translateX(-6px) skewX(3deg); }
  30%  { transform: translate(5px, 1px) skewX(-2deg); }
  60%  { transform: translateX(-2px); }
  100% { transform: none; }
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}