/* Экономия видеокарты (29.09.2026: на Galaxy S22+ телефон грелся и после нагрева тормозил).
   Подключается последним.
   1) Размытие «стекла» (backdrop-filter) пересчитывается каждый кадр, пока под ним что-то движется —
      фон погоды, сцена рыбалки. Фон игры и так размыт заранее (*_blur.webp), поэтому стекло — просто
      полупрозрачная плашка; где под ней резкое содержимое (меню, шторки, окна, уведомления) — плотнее.
   2) Фон вкладок не «дышит» и не смешивается режимами наложения каждый кадр; дождь и гроза двигают
      слой целиком, а не перерисовывают его.
   3) Минуту без касаний анимации вкладок и страниц засыпают (html.idle, js/core/idle.js); касание будит. */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.tabbar { background: rgba(10, 20, 22, .96) !important; }
.sheet { background: rgba(12, 22, 24, .97); }
.modal-backdrop { background: rgba(3, 8, 10, .8); }
.notice, .confirm, .celebrate { background: rgba(14, 26, 28, .97); }
.toast { background: rgba(14, 31, 34, .97); }

/* фон вкладок: картинка стоит, лучи и солнце не крутятся, зерно без наложения */
.w-bg { animation: none; will-change: auto; transform: scale(1.04); }
.w-grain { mix-blend-mode: normal; opacity: .22; }
.fx-rays, .fx-sun { animation: none; }
.fx-rain, .fx-storm { background: none; animation: none; overflow: hidden; }
.fx-rain > i, .fx-storm > i { position: absolute; left: 0; right: -40px; bottom: 0; will-change: transform; }
.fx-rain > i { top: -110px; background-size: 17px 110px; animation: fxRainT .75s linear infinite;
  background-image: linear-gradient(102deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 47%, rgba(226, 238, 240, .22) 48%, rgba(255, 255, 255, 0) 49%); }
.fx-rain.far > i { top: -70px; background-size: 11px 70px; animation: fxRainTf 1.05s linear infinite; }
.fx-storm > i { top: -96px; background-size: 12px 96px; animation: fxStormT .42s linear infinite;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(220, 232, 244, .28) 47.5%, rgba(255, 255, 255, 0) 49%); }
@keyframes fxRainT { from { transform: translate(0, 0); } to { transform: translate(-24px, 110px); } }
@keyframes fxRainTf { from { transform: translate(0, 0); } to { transform: translate(-15px, 70px); } }
@keyframes fxStormT { from { transform: translate(0, 0); } to { transform: translate(-36px, 96px); } }

/* облака, туман и радуга — мягкие градиенты вместо размытия фильтром (его пересчитывали каждый кадр) */
.fx-cloud { filter: none; background: radial-gradient(closest-side, rgba(20, 30, 36, .5), rgba(20, 30, 36, .3) 50%, rgba(20, 30, 36, 0)); }
.fx-fog { filter: none; background: radial-gradient(closest-side, rgba(228, 238, 236, .26), rgba(228, 238, 236, .14) 50%, rgba(228, 238, 236, 0)); }
.fx-rainbow { filter: none; }

/* сон анимаций вкладок и страниц */
html.idle .app-bg *, html.idle #pages *, html.idle #pages *::before, html.idle #pages *::after, html.idle #tabbar * {
  animation-play-state: paused !important; }

/* ── страницы разделов (30.09.2026) ──
   4) Закрытое не рисуется: экран под открытой страницей и фон вкладок, когда страница въехала (.covered,
      body.paged — js/core/nav.js), скрытые вкладки, всё под сценой рыбалки (body.in-scene).
   5) Атмосферы разделов (.page-fx) — морось, блики на воде, пузырьки, пылинки, искры — нарисованы один раз
      на слое ::before, и слой едет transform; раньше ехал фон, и весь экран перерисовывался каждый кадр.
      Наложение screen у светлых бликов на тёмном фоне почти не отличимо от обычного, а стоит видеокарте
      лишнего прохода по экрану — выключено.
   6) Блики по кнопкам и выделенным строкам, бегущая кромка «Поддержать», поток по полосам прогресса —
      тоже слои с transform; «металл» на кнопках стоит (блик по кнопке остаётся). */
.tabroot.covered, .page.covered, body.paged .app-bg, body.paged .tabbar { visibility: hidden; }
.tabroot.covered *, .tabroot.covered *::before, .tabroot.covered *::after, .page.covered *, .page.covered *::before, .page.covered *::after,
.tabroot:not(.active) *, .tabroot:not(.active) *::before, .tabroot:not(.active) *::after, body.paged .app-bg *, body.paged #tabbar *,
body.in-scene #pages *, body.in-scene #pages *::before, body.in-scene #pages *::after, body.in-scene .app-bg *, body.in-scene #tabbar * {
  animation-play-state: paused !important; }

.page-fx i { mix-blend-mode: normal !important; }
.theme-smug .page-fx i:nth-child(3), .theme-yacht .page-fx i:nth-child(2), .theme-deep .page-fx i:nth-child(1), .theme-deep .page-fx i:nth-child(3),
.theme-hall .page-fx i:nth-child(2), .theme-club .page-fx i:nth-child(1), .theme-gold .page-fx i:nth-child(1) { background: none; animation: none; overflow: hidden; }
.theme-smug .page-fx i:nth-child(3)::before, .theme-yacht .page-fx i:nth-child(2)::before, .theme-deep .page-fx i:nth-child(1)::before,
.theme-deep .page-fx i:nth-child(3)::before, .theme-hall .page-fx i:nth-child(2)::before, .theme-club .page-fx i:nth-child(1)::before,
.theme-gold .page-fx i:nth-child(1)::before { content: ""; position: absolute; will-change: transform; }
/* контрабандисты: морось */
.theme-smug .page-fx i:nth-child(3)::before { left: 0; right: -24px; top: -140px; bottom: 0; animation: pfDrizzle .8s linear infinite;
  background: repeating-linear-gradient(104deg, rgba(210, 215, 225, .07) 0 1px, transparent 1px 11px) 0 0 / 140px 140px; }
@keyframes pfDrizzle { to { transform: translate(-24px, 140px); } }
/* яхт-клуб: блики на воде (узор повторяется через 86px — слой проходит один период) */
.theme-yacht .page-fx i:nth-child(2)::before { left: -86px; right: 0; top: 0; bottom: 0; animation: pfGlint 2.25s linear infinite;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 36px, rgba(255, 255, 255, .09) 36px 40px, rgba(255, 255, 255, 0) 40px 86px); }
@keyframes pfGlint { to { transform: translateX(86px); } }
/* аквариум: блики на дне и пузырьки */
.theme-deep .page-fx i:nth-child(1)::before { left: -60px; top: -24px; right: 0; bottom: 0; animation: pfCaustic 7s ease-in-out infinite alternate;
  background: radial-gradient(40px 14px at 20% 10%, rgba(200, 255, 245, .16), transparent 70%), radial-gradient(60px 18px at 70% 16%, rgba(200, 255, 245, .14), transparent 70%),
    radial-gradient(50px 16px at 45% 26%, rgba(200, 255, 245, .1), transparent 70%);
  background-size: 220px 120px; }
@keyframes pfCaustic { to { transform: translate(60px, 24px); } }
.theme-deep .page-fx i:nth-child(3)::before { left: 0; right: 0; top: 0; bottom: -240px; animation: pfBubbles 4.5s linear infinite;
  background-image: radial-gradient(circle at 20px 20px, rgba(220, 245, 240, .55) 0 2px, transparent 3px), radial-gradient(circle at 90px 70px, rgba(220, 245, 240, .45) 0 3px, transparent 4px),
    radial-gradient(circle at 160px 140px, rgba(220, 245, 240, .4) 0 2px, transparent 3px), radial-gradient(circle at 60px 200px, rgba(220, 245, 240, .5) 0 1.5px, transparent 2.5px);
  background-size: 200px 240px; }
@keyframes pfBubbles { to { transform: translateY(-240px); } }
/* трофейный зал: пылинки в луче */
.theme-hall .page-fx i:nth-child(2)::before { left: -60px; right: 0; top: -220px; bottom: 0; animation: pfDust 16s linear infinite;
  background-image: radial-gradient(circle at 30px 40px, rgba(255, 230, 190, .5) 0 1px, transparent 2px), radial-gradient(circle at 120px 160px, rgba(255, 230, 190, .4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 200px 90px, rgba(255, 230, 190, .35) 0 1px, transparent 2px);
  background-size: 240px 220px; }
@keyframes pfDust { to { transform: translate(60px, 220px); } }
/* клуб и «Поддержать»: искры вверх */
.theme-club .page-fx i:nth-child(1)::before { left: -40px; right: 0; top: 0; bottom: -400px; animation: pfSparks 7s linear infinite;
  background-image: radial-gradient(circle at 40px 300px, rgba(255, 170, 80, .8) 0 1.5px, transparent 2.5px), radial-gradient(circle at 170px 200px, rgba(255, 200, 110, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 280px 360px, rgba(255, 150, 70, .7) 0 1.5px, transparent 2.5px);
  background-size: 320px 400px; }
@keyframes pfSparks { to { transform: translate(40px, -400px); } }
.theme-gold .page-fx i:nth-child(1)::before { left: -40px; right: 0; top: 0; bottom: -420px; animation: pfSparksG 9s linear infinite;
  background-image: radial-gradient(circle at 30px 320px, rgba(255, 220, 140, .85) 0 1.5px, transparent 2.5px), radial-gradient(circle at 150px 200px, rgba(255, 236, 180, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 260px 380px, rgba(255, 210, 120, .75) 0 1.5px, transparent 2.5px), radial-gradient(circle at 330px 120px, rgba(255, 236, 180, .6) 0 1px, transparent 2px);
  background-size: 360px 420px; }
@keyframes pfSparksG { to { transform: translate(40px, -420px); } }

/* блик по кнопке: полоса на ::before едет внутри .hb-shine */
.hb-shine { background: none; animation: none; overflow: hidden; border-radius: inherit; mix-blend-mode: normal; }
.hb-shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 52%; will-change: transform; transform: translateX(-170%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0)); animation: tpShineT 3.8s ease-in-out 2.2s infinite; }
@keyframes tpShineT { 0% { transform: translateX(-170%); } 45%, 100% { transform: translateX(330%); } }
/* блик по выделенной строке или карточке: сам ::after — полоса (у родителя overflow: hidden) */
.hb-row.hl::after, .tp-row.hl::after, .tp-card.hl::after, .pf-cell:not(.dark):not(.more)::after, .pf-auto::after, .pf-support::after {
  right: auto; width: 48%; mix-blend-mode: normal; background-size: auto; will-change: transform; transform: translateX(-240%); animation-name: tpSweepT; }
.hb-row.hl::after, .tp-row.hl::after, .tp-card.hl::after { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 244, 214, .2) 50%, rgba(255, 255, 255, 0)); }
.pf-cell:not(.dark):not(.more)::after { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 244, 214, .35) 50%, rgba(255, 255, 255, 0)); }
.pf-auto::after { background-image: linear-gradient(105deg, rgba(169, 228, 208, 0), rgba(210, 255, 240, .2) 50%, rgba(169, 228, 208, 0)); }
.pf-support::after { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 244, 214, .22) 50%, rgba(255, 255, 255, 0)); }
@keyframes tpSweepT { 0% { transform: translateX(-240%); } 45%, 100% { transform: translateX(410%); } }
/* блик по золотой рыбе: полоса внутри силуэта (маска на .tp-named-shine) */
.tp-named-shine, .bk-named-shine { background: none; animation: none; mix-blend-mode: normal; }
.tp-named-shine::before, .bk-named-shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 64%; will-change: transform; transform: translateX(-222%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 252, 232, .95) 50%, rgba(255, 255, 255, 0)); animation: tpNamedT 2.8s ease-in-out infinite; }
.bk-named-shine::before { animation-duration: 2.6s; }
@keyframes tpNamedT { 0% { transform: translateX(-222%); } 60%, 100% { transform: translateX(328%); } }
/* «Поддержать»: кромка крутится слоем, а не перерисовкой градиента */
.pf-sup-edge { background: none; animation: none; overflow: hidden; }
.pf-sup-edge::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; will-change: transform;
  background: conic-gradient(rgba(243, 210, 139, .3) 0deg, #FFE39A 40deg, rgba(243, 210, 139, .3) 90deg, rgba(243, 210, 139, .3) 180deg, #FFF4DA 220deg, rgba(243, 210, 139, .3) 270deg);
  transform: translate(-50%, -50%); animation: pfEdgeT 4s linear infinite; }
@keyframes pfEdgeT { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* полосы прогресса: цвет стоит, по нему бежит светлая волна */
.tp-bar i, .tk-bar i, .hb-legs span.now i { position: relative; overflow: hidden; animation: none; transition: none; }
.tp-bar i { background: var(--accent); }
.tp-bar.mint i { background: var(--aqua); }
.tp-bar.red i { background: linear-gradient(90deg, #E07A6E, var(--red)); }
.theme-smug .tp-bar i { background: #C98A48; }
.tk-bar i, .hb-legs span.now i { background: var(--accent); }
.tp-bar i::after, .tk-bar i::after, .hb-legs span.now i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; will-change: transform;
  background: linear-gradient(90deg, rgba(255, 241, 201, 0), rgba(255, 241, 201, .9) 60%, rgba(255, 241, 201, 0)); transform: translateX(-100%); animation: tpFlowT 2.8s linear infinite; }
.tp-bar.mint i::after { background: linear-gradient(90deg, rgba(226, 255, 246, 0), rgba(226, 255, 246, .9) 60%, rgba(226, 255, 246, 0)); }
.theme-smug .tp-bar i::after { background: linear-gradient(90deg, rgba(240, 192, 128, 0), rgba(240, 192, 128, .9) 60%, rgba(240, 192, 128, 0)); }
.tp-bar.red i::after { display: none; }
.hb-legs span.now i::after { animation-duration: 2.4s; }
@keyframes tpFlowT { to { transform: translateX(100%); } }
.page.intro .tp-bar i { animation: hbGrow 1.1s cubic-bezier(.2, .8, .2, 1) .45s both; }
.tk.intro .tk-bar i { animation: hbGrow 1.2s cubic-bezier(.2, .8, .2, 1) calc(420ms + var(--i, 0) * 90ms) both; }
/* «металл»: градиент стоит */
.tp-btn.metal, .btn-gold.metal, .btn-metal, .tp-plaque-plate, .tk-card.done { animation: none; }
.tk.intro .tk-card.done { animation: hbRise .55s cubic-bezier(.2, .8, .2, 1) calc(260ms + var(--i, 0) * 90ms) both; }
/* поход: лодка и отрезок двигаются раз в секунду на доли пикселя — без плавных переходов (они пересчитывали
   раскладку каждый кадр), текущий отрезок мерцает рамкой-слоем */
.tmv-boat, .tmv-legs span.now i { transition: none; }
.tmv-legs span.now { animation: none; }
.tmv-legs span.now::after { content: ""; position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 0 0 3px rgba(243, 210, 139, .3), 0 0 14px 2px rgba(243, 210, 139, .35);
  opacity: 0; will-change: opacity, transform; animation: tmvPingT 1.8s ease-out infinite; }
@keyframes tmvPingT { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.02, 1.5); } }
/* пульсации вниманием («готово», «событие», «бой»): кольцо тенью box-shadow раздувалось и перерисовывало карточку
   каждый кадр — теперь готовый ореол на ::after гаснет и чуть расходится (opacity/transform). Где у карточки
   overflow: hidden и ореол снаружи обрезался бы — вспыхивает кайма внутри (::before). */
.hb-sea.event, .hb-sea.ready, .tk-streak.ready, .tk-fight, .bk-ring.full, .hh-step.cur .hh-step-i, .pf-skill-ico,
.tk-week.done, .pf-auto.live, .fx-wanted.hot, .tp-btn.pulse { animation: none; }
.tk-streak, .tk-fight, .hh-step-i, .pf-skill-ico { position: relative; }
.hb-sea.event, .tk-streak.ready, .hh-step.cur .hh-step-i, .tk-week.done, .tp-btn.pulse { --halo: 243, 210, 139; }
.hb-sea.ready, .pf-auto.live, .tp-btn.mint.pulse { --halo: 169, 228, 208; }
.tk-fight, .bk-ring.full { --halo: 242, 154, 142; }
.fx-wanted.hot { --halo: 227, 106, 86; }
.pf-skill-ico { --halo: 201, 182, 255; }
.hb-sea.event::after, .hb-sea.ready::after, .tk-streak.ready::after, .tk-fight::after, .bk-ring.full::after, .hh-step.cur .hh-step-i::after, .pf-skill-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity, transform;
  box-shadow: 0 0 0 5px rgba(var(--halo), .3), 0 0 18px 4px rgba(var(--halo), .26); animation: tpHaloT 2.2s ease-out 1s infinite; }
.tk-fight::after { animation-duration: 2.4s; }
.bk-ring.full::after { animation-duration: 2s; }
@keyframes tpHaloT { 0% { opacity: 1; transform: scale(.985); } 100% { opacity: 0; transform: scale(1.025); } }
.hh-step.cur .hh-step-i { box-shadow: inset 0 0 0 2px var(--accent); }
.tk-week.done::before, .pf-auto.live::before, .fx-wanted.hot::before, .tp-btn.pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity;
  box-shadow: inset 0 0 0 2px rgba(var(--halo), .75), inset 0 0 22px rgba(var(--halo), .4); animation: tpRimT 2.2s ease-out 1s infinite; }
.tp-btn.pulse::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 0 18px rgba(255, 255, 255, .45); }
.fx-wanted.hot { box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.fx-wanted.hot::before { box-shadow: inset 0 0 0 1px rgba(var(--halo), .6), inset 0 0 44px rgba(var(--halo), .42); animation: tpRimInOutT 2.4s ease-in-out infinite; }
@keyframes tpRimT { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tpRimInOutT { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.hb.intro .hb-sea.event, .hb.intro .hb-sea.ready { animation: hbRise .6s cubic-bezier(.2, .8, .2, 1) .72s both; }
.tk.intro .tk-streak.ready { animation: hbRise .55s cubic-bezier(.2, .8, .2, 1) .15s both; }
.tk.intro .tk-week.done { animation: tkPop .5s cubic-bezier(.3, 1.4, .5, 1) calc(560ms + var(--i, 0) * 80ms) both; }
.tk.intro .tk-fight { animation: hbRise .6s cubic-bezier(.2, .8, .2, 1) .8s both; }
.bk.intro .bk-ring.full { animation: bkRingIn .75s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.pf.intro .pf-auto.live { animation: hbRise .6s cubic-bezier(.2, .8, .2, 1) 1s both; }
/* кнопки «забрать» дышат масштабом, без тени */
.tk-claim { animation-name: tkClaimT; }
.pf-cta.gold { animation-name: pfCtaT; }
@keyframes tkClaimT { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pfCtaT { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* точки «есть новое»: круг расходится слоем */
.hb-ping, .tp-ping, .pf-dot { animation: none; }
.pf-dot { position: relative; }
.hb-ping::after, .tp-ping::after, .pf-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: rgba(169, 228, 208, .55);
  pointer-events: none; will-change: opacity, transform; animation: tpPingT 2s ease-out infinite; }
.pf-dot::after { inset: 0; animation-duration: 1.6s; }
@keyframes tpPingT { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }
/* свечение фильтром пересчитывалось каждый кадр: огонёк серии светится ровно и качается, значки и свежие
   достижения вспыхивают ореолом-слоем */
.tk-flame { animation-name: tkFlameT; filter: drop-shadow(0 0 7px rgba(255, 170, 80, .75)); }
@keyframes tkFlameT { from { transform: scale(.94) rotate(-3deg); } to { transform: scale(1.08) rotate(3deg); } }
.pf-badge.on .pf-hex { animation-name: pfBadgeT; }
@keyframes pfBadgeT { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.1); } }
.pf-badge.on .pf-hex::before, .ach-cell.fresh .pf-hex::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(243, 210, 139, .55), rgba(243, 210, 139, 0)); will-change: opacity; }
.pf-badge.on .pf-hex::before { animation: pfBadgeGlowT 4s ease-in-out infinite; animation-delay: inherit; }
@keyframes pfBadgeGlowT { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } }
.ach-cell.fresh .pf-hex { animation-name: achFreshT; }
.ach-cell.fresh .pf-hex::before { animation: achFreshGlowT 1.6s ease-in-out infinite; }
@keyframes achFreshT { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes achFreshGlowT { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* кнопка заброса ждёт: кольцо расходится слоем */
#fishing[data-st="idle"] .main-btn::before { animation: none; }
#fishing[data-st="idle"] .main-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; will-change: opacity, transform;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .2), 0 0 16px 4px rgba(255, 255, 255, .16); animation: knRimT 2.6s ease-out infinite; }
@keyframes knRimT { 0% { opacity: 1; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.14); } }
/* лучи за рыбой в профиле: был круг 900×900 с маской и наложением (больше экрана, каждый кадр) — теперь
   готовая картинка лучей с угасанием к краю, вдвое меньше, просто вращается */
.pf-rays { width: 560px; height: 560px; margin: -280px 0 0 -280px; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='280' cy='280' r='267'%3E%3Cstop offset='0' stop-color='%23FFE2AA' stop-opacity='.14'/%3E%3Cstop offset='.19' stop-color='%23FFE2AA' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23FFE2AA' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M280 280L280.0 0.0A280 280 0 0 1 294.7 0.4ZM280 280L338.2 6.1A280 280 0 0 1 352.5 9.5ZM280 280L393.9 24.2A280 280 0 0 1 407.1 30.5ZM280 280L444.6 53.5A280 280 0 0 1 456.2 62.4ZM280 280L488.1 92.6A280 280 0 0 1 497.6 103.8ZM280 280L522.5 140.0A280 280 0 0 1 529.5 152.9ZM280 280L546.3 193.5A280 280 0 0 1 550.5 207.5ZM280 280L558.5 250.7A280 280 0 0 1 559.6 265.3ZM280 280L558.5 309.3A280 280 0 0 1 556.6 323.8ZM280 280L546.3 366.5A280 280 0 0 1 541.4 380.3ZM280 280L522.5 420.0A280 280 0 0 1 514.8 432.5ZM280 280L488.1 467.4A280 280 0 0 1 478.0 478.0ZM280 280L444.6 506.5A280 280 0 0 1 432.5 514.8ZM280 280L393.9 535.8A280 280 0 0 1 380.3 541.4ZM280 280L338.2 553.9A280 280 0 0 1 323.8 556.6ZM280 280L280.0 560.0A280 280 0 0 1 265.3 559.6ZM280 280L221.8 553.9A280 280 0 0 1 207.5 550.5ZM280 280L166.1 535.8A280 280 0 0 1 152.9 529.5ZM280 280L115.4 506.5A280 280 0 0 1 103.8 497.6ZM280 280L71.9 467.4A280 280 0 0 1 62.4 456.2ZM280 280L37.5 420.0A280 280 0 0 1 30.5 407.1ZM280 280L13.7 366.5A280 280 0 0 1 9.5 352.5ZM280 280L1.5 309.3A280 280 0 0 1 0.4 294.7ZM280 280L1.5 250.7A280 280 0 0 1 3.4 236.2ZM280 280L13.7 193.5A280 280 0 0 1 18.6 179.7ZM280 280L37.5 140.0A280 280 0 0 1 45.2 127.5ZM280 280L71.9 92.6A280 280 0 0 1 82.0 82.0ZM280 280L115.4 53.5A280 280 0 0 1 127.5 45.2ZM280 280L166.1 24.2A280 280 0 0 1 179.7 18.6ZM280 280L221.8 6.1A280 280 0 0 1 236.2 3.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* золотые надписи (имя именной рыбы, вес) переливаются три раза при открытии вкладки и дальше стоят:
   перелив — перерисовка текста каждый кадр, а он лежит под вращающимися лучами */
.pf-goldtext, .bk-goldtext { animation-iteration-count: 3; }
.pf.intro .pf-w b { animation: tkGoldText 3.2s linear 3, hbPop .55s ease-out 1.7s both; }
/* заставка после исчезновения — совсем прочь: её кольца и поплавок иначе крутились вечно (js/main.js) */
#boot.off { display: none; }

@media (prefers-reduced-motion: reduce) {
  .page-fx i::before, .hb-shine::before, .tp-named-shine::before, .bk-named-shine::before, .pf-sup-edge::before, .tp-bar i::after, .tk-bar i::after,
  .hb-legs span.now i::after, .tmv-legs span.now::after, .hb-sea::after, .tk-streak::after, .tk-fight::after, .bk-ring::after, .hh-step-i::after,
  .pf-skill-ico::after, .tk-week::before, .pf-auto::before, .fx-wanted::before, .tp-btn::before, .hb-ping::after, .tp-ping::after, .pf-dot::after,
  .pf-hex::before, #fishing .main-btn::after { animation: none !important; }
}