/* low.css – уровни качества игры «Первый заказ». Подключать ПОСЛЕ game.css и render.css.
   html.low – слабое устройство (ставит perf.js), html.hi – мощное, html.paused – вкладка скрыта.
   Обычный уровень (без классов) = текущий вид игры, кроме раздела 0. */

/* ================= 0. Для всех уровней: размытие там, где оно ничего не даёт ================= */
/* Эти блоки лежат только на фоне-авроре, а аврора – уже мягкие радиальные градиенты.
   Размытие мягкого градиента визуально почти не меняет картинку (замер: README, «Размытие»),
   но стоит видеокарте каждый кадр, пока аврора плывёт. Размытие остаётся там, где под ним текст и фото:
   .hud, .msgr-h, .modal, .bob .bw, .ws-tabs, .pvoice, .lvlup, .assemble. */
.card,.title-phone .tp,.notif,.msgr,.ws .pane{backdrop-filter:none;-webkit-backdrop-filter:none}
/* карточки на титуле плавают – отдельный слой, чтобы движение не перерисовывало тень */
.title-phone .tp{will-change:transform}

/* ================= 1. html.low ================= */
/* 1.1 Никакого backdrop-filter вообще; там, где он был, фон плотнее, чтобы текст читался так же */
.low *,.low *:before,.low *:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.low .hud{background:rgba(13,11,26,.96)}
.low .msgr-h{background:rgb(24,20,44)}
.low .ws-tabs{background:rgb(13,11,26)}
.low .modal{background:rgba(6,5,14,.92)}
.low .modal .mh{background:rgb(19,16,36)}
.low .bob .bw{background:rgb(26,22,48)}
.low .pvoice,.low .lvlup{background:rgba(6,5,14,.86)}
.low .notif{background:rgb(36,31,62)}
.low .title-phone .tp{background:rgb(34,29,60)}
.low .card,.low .msgr,.low .pane{background:rgba(28,24,52,.94)}

/* 1.2 Аврора: 4 слоя по 60vmax -> один неподвижный слой с теми же пятнами */
.low .aurora i{display:none}
.low .aurora{background:
  radial-gradient(60vmax 60vmax at 10% -5%,rgba(107,85,255,.33),transparent 68%),
  radial-gradient(60vmax 60vmax at 105% 35%,rgba(255,95,168,.22),transparent 68%),
  radial-gradient(60vmax 60vmax at 40% 110%,rgba(255,158,107,.18),transparent 68%),
  radial-gradient(60vmax 60vmax at 95% 105%,rgba(46,201,178,.14),transparent 68%)}

/* 1.3 Бесконечные декоративные анимации – стоп (индикаторы ожидания оставлены: .typing-b, .sp, .ring, .gt.loading) */
.low .title-phone .tp{animation:none;will-change:auto}

/* 1.4 Большие мягкие тени на всплывающих и анимированных блоках -> короткие */
.low .notif,.low .pushn,.low .bank,.low .toast,.low .scard,.low .tcard,.low .review,.low .lvlchip,.low .pvw,.low .title-phone .tp{box-shadow:0 6px 16px rgba(0,0,0,.35)}
.low .bob .bw{box-shadow:0 -4px 18px rgba(0,0,0,.45)}
.low .btn{box-shadow:0 6px 14px rgba(139,124,255,.25)}
.low .logo .lb,.low .fin-hero .fav,.low .tg-box .tgi{box-shadow:none}
.low .fx .xp{text-shadow:0 2px 6px rgba(0,0,0,.6)}

/* 1.5 Конфетти: не больше 30 штук на экране (вместо 70–90), без изменений в game.js */
.low .fx .cf:nth-child(n+31){display:none}

/* 1.6 Анимации, которые меняют не transform/opacity: короче или без них */
.low .lab-out.flash{animation:none}
.low .hud .hstat.pulse{animation-duration:.4s}
.low .opt,.low .mt,.low .scam,.low .mode-c,.low .lab-out{transition-property:border-color,background-color,opacity,transform}
.low .screen{animation-duration:.25s}

/* 1.7 Боб: плотный фон вместо затемнения с размытием */
.low .bob.dim:before{background:rgba(5,4,12,.6)}

/* ================= 2. html.hi – «высокое» (perf.js ставит только на мощных и без reduced-motion) ================= */
@media (prefers-reduced-motion: no-preference){
  /* 2.1 Живой фон: аврора + медленное северное сияние (conic) и зерно. Анимируется только transform – работа композитора */
  .hi .aurora{transform:translate3d(calc(var(--tx,0) * -18px),calc(var(--ty,0) * -18px),0)}
  .hi .aurora:before{content:'';position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;
    background:conic-gradient(from 0deg,transparent 0 12%,rgba(139,124,255,.10) 20%,transparent 30% 55%,rgba(255,126,182,.08) 64%,transparent 74%);
    animation:hiSpin 90s linear infinite;will-change:transform}
  .hi .aurora:after{content:'';position:absolute;inset:0;opacity:.06;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  @keyframes hiSpin{to{transform:rotate(360deg)}}

  /* 2.2 Параллакс: карточки на титуле сдвигаются против фона (perf.js пишет --tx/--ty, от -1 до 1) */
  .hi .title-phone{transform:translate3d(calc(var(--tx,0) * 8px),calc(var(--ty,0) * 6px),0)}
  .hi .title-phone .tp:nth-child(2){translate:calc(var(--tx,0) * 5px) 0}
  .hi .title-phone .tp:nth-child(3){translate:calc(var(--tx,0) * -4px) 0}

  /* 2.3 Свечение главной кнопки: размытый слой рисуется один раз, пульсирует только opacity */
  .hi .btn:not(.ghost):not(.small){position:relative;isolation:isolate}
  .hi .btn:not(.ghost):not(.small):after{content:'';position:absolute;inset:-3px;width:auto;transform:none;border-radius:inherit;background:var(--grad);filter:blur(16px);opacity:.35;z-index:-1;animation:hiGlow 3.2s ease-in-out infinite;pointer-events:none}
  @keyframes hiGlow{50%{opacity:.7}}

  /* 2.4 Боб и логотип: мягкое свечение, плашка уровня с бликом */
  .hi .bob .bav{box-shadow:0 0 0 2px rgba(139,124,255,.5),0 0 22px rgba(139,124,255,.45)}
  .hi .logo .lb{animation:hiFloat 5s ease-in-out infinite}
  @keyframes hiFloat{50%{transform:rotate(-6deg) translateY(-5px)}}
  .hi .lvlchip{overflow:hidden}
  .hi .lvlchip:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:hiShine 1.2s .3s ease-out forwards}
  @keyframes hiShine{to{transform:translateX(120%)}}

  /* 2.5 Выбранный персонаж и ответ-«верно» светятся */
  .hi .looks button.on{box-shadow:0 0 0 2px var(--pink),0 0 26px rgba(255,126,182,.45)}
  .hi .opt.good{box-shadow:0 0 18px rgba(74,222,155,.28)}
}

/* ================= 3. Скрытая вкладка: все CSS-анимации на паузе ================= */
.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}