/* =====================================================================
   gamelog — оформление профиля «Cyberpunk» (неон: маджента + циан).

   Действует ТОЛЬКО внутри элемента с атрибутом data-profile-theme:
     <div class="page-layout" data-profile-theme="cyberpunk">
   Значение берётся из настроек ВЛАДЕЛЬЦА профиля, поэтому гости видят
   его профиль в том оформлении, которое он выбрал. Шапка, меню, плашки
   и подвал сайта остаются в стандартном виде — так видно, где
   «территория пользователя», а где сайт.

   Подключается после app.css только на странице профиля с этой темой
   (accounts/profile.html, User.profile_theme_css). Нужна поддержка
   вложенности CSS (Chrome 120+, Firefox 117+, Safari 17.2+); в старых
   браузерах профиль просто останется стандартным. Анимации профиля
   (раздел 7) — только при html.motion-on, его ставит static/js/motion.js.

   Город — cyberpunk/city.svg и city-motion.svg рядом с этим файлом,
   генератор — scripts/gen_cyberpunk_city.py. Оформление нарисовано в
   Claude Design (15–16.10.2026), doc/temy-profilya.md.
   ===================================================================== */

[data-profile-theme="cyberpunk"]{

  /* ============ 1. Токены (переопределяются только внутри профиля) ============ */
  --bg:             #0b0912;
  --bg-elevated:    #100d1a;
  --surface:        #151122;
  --surface-hover:  #1f1931;
  --surface-sunken: #07060c;

  --border:        #2d2542;
  --border-subtle: #1c1729;
  --border-strong: #463a66;

  --text-primary:   #eeecff;
  --text-secondary: #aba6cc;
  --text-tertiary:  #8a84b0;   /* ≥ 4.5:1 на --surface */

  --neon-pink:  #ff2a6d;
  --neon-cyan:  #05d9e8;
  --neon-pink-glow: 0 0 6px rgba(255,42,109,.55), 0 0 18px rgba(255,42,109,.25);
  --neon-cyan-glow: 0 0 6px rgba(5,217,232,.55),  0 0 18px rgba(5,217,232,.22);

  --accent:        #ff2a6d;
  --accent-fg:     #ff7aa6;
  --accent-soft:   rgba(255,42,109,.14);
  --accent-border: rgba(255,42,109,.5);

  --status-completed:    #2ee59d; --status-completed-fg: #7ff5c4;
  --status-completed-bg: rgba(46,229,157,.12);  --status-completed-bd: rgba(46,229,157,.42);
  --status-playing:      #05d9e8; --status-playing-fg:   #7aeef6;
  --status-playing-bg:   rgba(5,217,232,.12);   --status-playing-bd:   rgba(5,217,232,.42);
  --status-played:       #6f8cff; --status-played-fg:    #a9bbff;
  --status-played-bg:    rgba(111,140,255,.12); --status-played-bd:    rgba(111,140,255,.42);
  --status-paused:       #ffc53d; --status-paused-fg:    #ffdc85;
  --status-paused-bg:    rgba(255,197,61,.12);  --status-paused-bd:    rgba(255,197,61,.42);
  --status-planned:      #b967ff; --status-planned-fg:   #d4a4ff;
  --status-planned-bg:   rgba(185,103,255,.13); --status-planned-bd:   rgba(185,103,255,.45);
  --status-dropped:      #ff6b3d; --status-dropped-fg:   #ffa384;
  --status-dropped-bg:   rgba(255,107,61,.12);  --status-dropped-bd:   rgba(255,107,61,.42);
  --status-100:          #e8f7ff; --status-100-fg:       #ffffff;
  --status-100-bg:       rgba(232,247,255,.12); --status-100-bd:       rgba(232,247,255,.45);

  --cover-1: #2a1f4a; --cover-2: #4a1d3f; --cover-3: #1b3a4a; --cover-4: #3a1f5c;
  --cover-5: #5a1f35; --cover-6: #1f4a48; --cover-7: #2f2266; --cover-8: #4a2a1f;

  --radius-xs: 1px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.7), 0 0 0 1px rgba(255,42,109,.08);
  --shadow-lg: 0 18px 40px -10px rgba(0,0,0,.75), 0 0 24px -6px rgba(255,42,109,.25);

  --corner: 14px;
  --corner-w: 2px;

  /* ============ 2. «Сцена» профиля: рамка, сетка, зарева, сканлайны ============ */
  color: var(--text-primary);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  border-image: none;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)) top / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(900px 420px at 100% 0%, rgba(255,42,109,.12), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(5,217,232,.09), transparent 60%),
    linear-gradient(rgba(185,103,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(185,103,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  box-shadow: 0 0 40px -12px rgba(255,42,109,.35);

  @media (max-width: 620px){ padding: var(--space-3); }

  /* ============ 2а. Неоновый город на заднем плане ============
     Два слоя одного размера (1600×520), лежат друг на друге:
       ::before — статичный город (city.svg);
       ::after  — движение: машины, огни антенн, мерцание вывесок
                  (city-motion.svg) + затухание города в фон страницы.
     Слои позади контента (isolation + z-index:-1), панели над ними
     полупрозрачные — город просвечивает. */
  --city-h: clamp(300px, 36vw, 520px);
  --surface-glass: rgba(21,17,34,.86);
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--city-h) * .55);   /* полоса неба с машинами над шапкой профиля */

  &::before, &::after{
    content:""; position:absolute; inset: 0 0 auto 0; height: var(--city-h);
    z-index:-1; pointer-events:none;
    background-repeat: no-repeat;
    /* город чуть приподнят: в полосу над шапкой попадают крыши всех трёх планов */
    background-position: center calc(var(--city-h) * -.14);
  }
  &::before{
    background-image: url("cyberpunk/city.c49608213eb3.svg");
    background-size: auto 100%;
  }
  &::after{
    background-image:
      linear-gradient(to bottom, transparent 48%, var(--bg) 86%),
      url("cyberpunk/city-motion.52e30229d527.svg");
    background-size: 100% 100%, auto 100%;
    background-position: 0 0, center calc(var(--city-h) * -.14);
    will-change: transform;        /* свой слой: перерисовывается только он, а не весь профиль */
  }
  /* анимации выключены (система или настройка) — город остаётся, машины и огни нет */
  :root:not(.motion-on) &::after{
    background-image: linear-gradient(to bottom, transparent 48%, var(--bg) 86%);
  }

  ::selection{ background: var(--neon-pink); color:#0b0912; }
  :focus-visible{ outline-color: var(--neon-cyan); box-shadow: var(--neon-cyan-glow); }

  /* ============ 3. Заголовки ============ */
  .block-head h2,
  .recent-card h2, .friends-card h2{
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--text-sm);
  }
  .block-head h2::before,
  .recent-card h2::before, .friends-card h2::before{ content:"// "; color: var(--neon-pink); }

  .profile-name, .profile-header h1, .profile-header h2{
    font-family: var(--font-mono);
    text-transform: uppercase;
    text-shadow: -2px 0 rgba(255,42,109,.6), 2px 0 rgba(5,217,232,.6);
  }
  .profile-avatar{ box-shadow: 0 0 0 2px var(--neon-pink), var(--neon-pink-glow); }

  /* ============ 4. Панели с неоновыми уголками ============
     Фоновые градиенты, а не ::before/clip-path — не конфликтуют с
     существующими псевдоэлементами и не обрезают выпадающие меню. */
  :is(.profile-header, .recent-card, .friends-card, .stat-card, .status-chart,
      .note-card, .mchart, .edit-card){
    border-color: var(--border);
    background:
      linear-gradient(var(--neon-pink), var(--neon-pink)) top left / var(--corner) var(--corner-w) no-repeat,
      linear-gradient(var(--neon-pink), var(--neon-pink)) top left / var(--corner-w) var(--corner) no-repeat,
      linear-gradient(var(--neon-cyan), var(--neon-cyan)) bottom right / var(--corner) var(--corner-w) no-repeat,
      linear-gradient(var(--neon-cyan), var(--neon-cyan)) bottom right / var(--corner-w) var(--corner) no-repeat,
      linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
      var(--surface-glass);
    box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
  }

  .callout{ background: var(--surface-glass); }

  .game-card:hover{
    border-color: var(--accent-border);
    box-shadow: 0 0 0 1px rgba(255,42,109,.35), 0 0 22px -6px rgba(255,42,109,.5);
  }

  /* ============ 5. Кнопки ============ */
  .btn-primary{
    background: var(--neon-pink); color: #0b0912;
    text-transform: uppercase; letter-spacing: .06em;
    font-family: var(--font-mono); font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow: var(--neon-pink-glow);
  }
  .btn-primary:hover{ filter:none; background:#ff4f86; }
  .btn-ghost{ background: transparent; border-color: rgba(5,217,232,.35); }
  .btn-ghost:hover{
    background: rgba(5,217,232,.08); border-color: var(--neon-cyan);
    color: var(--neon-cyan); box-shadow: var(--neon-cyan-glow);
  }

  /* ============ 6. Прогресс, статусы, ссылки ============ */
  .progress-track{ background: var(--surface-sunken); border-color: var(--border); border-radius:0; }
  .progress-fill{
    border-radius:0;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
    box-shadow: 0 0 8px rgba(255,42,109,.6);
  }
  .status-badge{ font-family: var(--font-mono); letter-spacing:.03em; }
  .status-badge .dot{ box-shadow: 0 0 6px currentColor; }

  a:where(:not([class])){ color: var(--neon-cyan); text-decoration-color: rgba(5,217,232,.45); }

  /* ============ 7. Анимации профиля ============
     Работают только при html.motion-on (решает motion.js). Всё, что
     крутится постоянно, — на маленьких элементах: перерисовка дешёвая. */
  :root.motion-on &{
    /* ник: короткий «сбой сигнала» раз в 7 секунд */
    .profile-name{ animation: cp-glitch 7s linear 1.5s infinite; }

    /* аватар: неоновая рамка «дышит» */
    .profile-avatar{ animation: cp-breathe 3.2s ease-in-out infinite alternate; }

    /* заголовки блоков: мигающий курсор терминала */
    :is(.block-head, .recent-card, .friends-card) h2::after{
      content:"_"; margin-left:3px; color: var(--neon-cyan);
      animation: cp-caret 1.05s steps(1) infinite;
    }

    /* панели: при наведении загорается голубая обводка */
    :is(.profile-header, .recent-card, .friends-card, .stat-card, .status-chart, .note-card, .mchart, .edit-card){
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    :is(.profile-header, .recent-card, .friends-card, .stat-card, .status-chart, .note-card, .mchart, .edit-card):hover{
      border-color: rgba(5,217,232,.45);
      box-shadow: 0 0 0 1px rgba(5,217,232,.18), 0 0 26px -8px rgba(5,217,232,.45);
    }

    /* главная кнопка: дрожит при наведении */
    .btn-primary:hover{ animation: cp-jitter 280ms steps(2) 1; }

    /* строки «Недавние события / игры / друзья»: подсветка слева при наведении */
    :is(.recent-card, .friends-card) a{ transition: background-color .15s ease, box-shadow .15s ease; }
    :is(.recent-card, .friends-card) a:hover{ box-shadow: inset 2px 0 0 var(--neon-pink); background: rgba(255,42,109,.06); }
  }
  @media (prefers-contrast: more), (prefers-reduced-transparency: reduce){
    --surface-glass: var(--surface);
  }
  @media (prefers-contrast: more){
    background: var(--bg);
    .profile-name, .profile-header h1, .profile-header h2{ text-shadow:none; }
  }
}

/* ---- ключевые кадры профиля (вне вложенности: @keyframes внутри правила не работают) ---- */
@keyframes cp-glitch{
  0%, 93%, 100%{ translate: 0; clip-path: none;
                 text-shadow: -2px 0 rgba(255,42,109,.6), 2px 0 rgba(5,217,232,.6); }
  94%{ translate: -3px 0; clip-path: inset(10% 0 55% 0);
       text-shadow: -5px 0 #ff2a6d, 4px 0 #05d9e8; }
  95%{ translate: 3px 0;  clip-path: inset(55% 0 8% 0);
       text-shadow: 5px 0 #ff2a6d, -4px 0 #05d9e8; }
  96%{ translate: -1px 0; clip-path: inset(30% 0 30% 0); }
  97%{ translate: 2px 0;  clip-path: none;
       text-shadow: -3px 0 #ff2a6d, 3px 0 #05d9e8; }
}
@keyframes cp-breathe{
  from{ box-shadow: 0 0 0 2px #ff2a6d, 0 0 6px rgba(255,42,109,.45), 0 0 14px rgba(255,42,109,.2); }
  to  { box-shadow: 0 0 0 2px #ff2a6d, 0 0 10px rgba(255,42,109,.75), 0 0 30px rgba(255,42,109,.4); }
}
@keyframes cp-caret{ 50%{ opacity:0; } }
@keyframes cp-jitter{
  0%  { translate: 0 0; }
  33% { translate: -2px 1px; }
  66% { translate: 2px -1px; }
  100%{ translate: 0 0; }
}


/* =====================================================================
   8. Фон на всю страницу (16.10.2026, по просьбе Christopher)

   На профиле с темой у <body> стоит data-page-theme="cyberpunk"
   (accounts/profile.html, {% block body_attrs %}). Сцена — сетка,
   зарева, сканлайны — и неоновый город переезжают из рамки профиля на
   всю страницу: город закреплён вверху окна (position:fixed), контент
   прокручивается поверх него, панели полупрозрачные — город
   просвечивает. Токены сайта при этом не меняются: шапка, меню и
   подвал остаются стандартными, цвета фона заданы здесь же.
   ===================================================================== */
body[data-page-theme="cyberpunk"]{
  --cp-bg: #0b0912;
  --cp-city-h: clamp(300px, 36vw, 520px);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(1100px 520px at 100% 0%, rgba(255,42,109,.14), transparent 60%),
    radial-gradient(900px 480px at 0% 100%, rgba(5,217,232,.10), transparent 60%),
    linear-gradient(rgba(185,103,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(185,103,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--cp-bg);
  background-attachment: fixed;

  /* Город — под шапкой сайта, на всю ширину окна: шире 1600 px картинка
     повторяется. Слои те же, что были в рамке профиля. */
  &::before, &::after{
    content:""; position:fixed; inset: 0 0 auto 0; height: var(--cp-city-h);
    z-index:-1; pointer-events:none;
    background-repeat: repeat-x;
    background-position: center calc(var(--cp-city-h) * -.06);
  }
  &::before{
    background-image: url("cyberpunk/city.c49608213eb3.svg");
    background-size: auto 100%;
  }
  &::after{
    background-image:
      linear-gradient(to bottom, transparent 50%, var(--cp-bg) 92%),
      url("cyberpunk/city-motion.52e30229d527.svg");
    background-size: 100% 100%, auto 100%;
    background-repeat: no-repeat, repeat-x;
    background-position: 0 0, center calc(var(--cp-city-h) * -.06);
    will-change: transform;
  }
  @media (prefers-contrast: more){ background: var(--cp-bg); }
}
:root:not(.motion-on) body[data-page-theme="cyberpunk"]::after{
  background-image: linear-gradient(to bottom, transparent 50%, var(--cp-bg) 92%);
}

/* Рамка профиля больше не рисует свою сцену и свой город — она
   прозрачная, полоса неба над шапкой профиля остаётся, в ней виден
   городской фон страницы. */
body[data-page-theme="cyberpunk"] [data-profile-theme="cyberpunk"]{
  background: none;
  border-color: transparent;
  box-shadow: none;
  &::before, &::after{ content: none; }
}