/**
 * assets/css/game.css — Игровое поле: доска, норы, крот, всплывающий опыт, сообщения раунда,
 * кнопка «Играть» и защита от автокликов.
 *
 * Выделено из общего styles.css при разборе стилей по модулям
 * (исходные строки 367–408, 523–559, 606–618, 619–635, 636–648, 649–660, 661–736, 1068–1131, 3606–3669, 3670–4014, 4015–4140, 4141–4179, 4180–4430).
 */

/* --- Game --- */

.title { font-weight: 950; font-size: var(--ui-size-value); letter-spacing: .2px; }

/*
 * Пять правил голой `.btn` сняты вместе с их цветом.
 *
 * Класс `btn` без имени раздела не ставит ни один вид игры (живые кнопки
 * — `ui-btn`, `ui-button-*` и именные), он остался только в макетах
 * `huli*.html`. А красили эти правила прежний мир: оранжевая тень
 * `rgba(255,120,0,.30)`, подпись числом `#1a0f22` и стеклянный вариант
 * `ghost` на белой прозрачности. Вместе с ними ушли из `base.css`
 * последние читатели `--brand1`, `--brand2`, `--glass-border` и
 * `--shadow-in` — система кнопок §36 ТЗ живёт в `ui-frame.css`.
 */

/* ====== СООБЩЕНИЯ ИГРЫ ======
 * Реплика мини-игры бонусов. Прежние правила задавали цвет по классам
 * `.game-message.success` и родне, но модуль ставит имя через дефис
 * (`game-message-success`) — ни одно из них никогда не срабатывало, а
 * фон приходил строкой стиля из самого модуля. Отсюда чёрная таблетка
 * поверх игры и материальная зелёно-синяя гамма, которой в проекте нет.
 * Имена приведены к тому, что действительно ставит модуль.
 */
.game-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  max-width: 84%;
  padding: 10px var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  border: var(--ui-border) solid var(--ui-panel-edge);
  background: var(--ui-dirt-wide), var(--ui-dirt),
              linear-gradient(180deg, var(--ui-panel-main), var(--ui-panel-dark));
  box-shadow: var(--ui-shadow-soft), inset 0 2px 0 rgba(255, 255, 255, .10);
  color: var(--ui-text-main);
  font-family: var(--ui-font-condensed);
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  pointer-events: none;
  /* Не ступень лестницы, а СРОК ЖИЗНИ реплики: кадр сам показывает,
     держит и убирает её, поэтому число здесь целое, как у полосы тоста. */
  animation: tamGameMessage 2s ease-in-out both;
}

/* Смысл несёт кромка и подсветка, а не заливка: заливка одна на все
   реплики, иначе таблетка спорит по цвету с наградой внутри игры. */
.game-message-success { border-color: var(--ui-green); box-shadow: var(--ui-shadow-soft), var(--ui-glow-green); }
.game-message-error   { border-color: var(--ui-red);   box-shadow: var(--ui-shadow-soft), var(--ui-glow-red); }
.game-message-warning { border-color: var(--ui-gold);  box-shadow: var(--ui-shadow-soft), var(--ui-glow-gold); }
.game-message-info    { border-color: var(--ui-blue);  box-shadow: var(--ui-shadow-soft), var(--ui-glow-blue); }

@keyframes tamGameMessage {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  24%  { transform: translate(-50%, -50%) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.96); }
}

/* ====== ИСПРАВЛЕНИЯ ДЛЯ ПРОГРЕСС БАРА ====== */

/* ====== ЗАЩИТА ОТ АВТО-УДАРОВ ====== */
.hole {
  position: relative;
  transition: transform var(--tam-b-mole) ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Отключаем выделение текста во время игры */
#board {
  user-select: none;
  -webkit-user-select: none;
}

/*
 * Правила `#btnPlay` сняты. Такой кнопки в игре нет: единственный код,
 * который её создавал, лежит в `_private/legacy/app.js` и со страницы не
 * подключается. Заодно ушёл сине-лиловый градиент `#4da3ff → #a64aff` —
 * главное действие в проекте золотое (`.ui-button-gold`).
 */

/*
 * Кадры промаха и текстовых надписей сняты (заход 96).
 *
 * `missHeartBeat`, `missTextPulse`, `missGlow`, `textTiltLeft`,
 * `textTiltRight`, `xpShine`, `lifePulse` — семь наборов, которые не
 * запускало ни одно правило и ни одна строка кода. Правила, которые их
 * читали, сняли раньше вместе со старым слоем надписей над полем; от
 * него остались только подписи-заголовки («Эффект для потери жизней»,
 * «Фоновый контейнер для текста», «Иконки рядом с текстом») над пустым
 * местом.
 *
 * Живой промах в игре есть и работает своим путём: на арене лунка
 * получает класс `miss` (`modules/pvp/pvp.js`), правило — `pvp.css`.
 * Летящие цифры — `.tam-float` в `mvp.css`, они набраны прямо по полю
 * без подложки и наклонов (§73 ТЗ).
 */

/* ===== СТИЛИ ДЛЯ НОВОЙ СИСТЕМЫ ПОЛЯ ===== */

/* Фоновая картинка */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Путь относительно файла стилей: из assets/css это на уровень выше. */
  background-image: url('../osnovanie.webp?26090901');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

:root {
      --gap: 8px;
      --cell: 220px;
      --holeW: 220px;
      --holeH: 155px;

      /* Земля (JS подстроит под фон).
         Поле боя — единственное место игры, где тепло уцелело после смены
         палитры 28 августа, и эта четвёрка — его собственная шкала грунта,
         а не остаток прежней темы: сверху освещённый песок, снизу тень в
         норе. На словарь она не переводится (§103). */
      --soil-1:#ffcf84;
      --soil-2:#f2a24b;
      --soil-3:#c35a24;
      --soil-4:#4a1c10;

      /* дыра — ЖЁСТКО темная */
      --pit-0:#020101;
      --pit-1:#070202;
      --pit-2:#000000;

      /* эффекты */
      --ember:#ffb24a;
      --ember2:#ff6a1a;
      --spark:#ffd07a;

      /* ambient от фона */
      --amb-r: 255;
      --amb-g: 170;
      --amb-b: 90;
      --amb: rgba(var(--amb-r),var(--amb-g),var(--amb-b),1);
      --amb-soft: rgba(var(--amb-r),var(--amb-g),var(--amb-b),.18);
      --amb-rim: rgba(var(--amb-r),var(--amb-g),var(--amb-b),.26);

      /* parallax */
      --px: 0px;
      --py: 0px;

      /* ===== КЛЮЧЕВО ДЛЯ “РЕАЛИСТИЧНО ВЫЛЕЗ ИЗ ДЫРЫ” =====
         groundY — линия “плоскости земли” по спрайту (ниже скрываем OUT-часть).
         Подкрути на 1–2% если у твоего mole_up другая компоновка. */
      --groundY: 54%;

      --ui: rgba(255,255,255,.08);
      --ui2: rgba(255,255,255,.12);
    }

/* Контейнер игрового поля */
#board {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ===== Board ===== */
    .boardWrap {
      position:fixed; inset:0;
      z-index:2;
      display:grid;
      place-items:center;
      padding: 110px 16px 22px;
    }
    .board {
      width:min(92vw, calc(var(--cell) * 3 + var(--gap) * 2));
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      align-items:center;
      justify-items:center;
      background: transparent !important;
      border:none !important;
      outline:none !important;
      box-shadow:none !important;
    }
    .cell {
      width: min(90%, var(--cell));
      aspect-ratio: 1 / 1;
      display:grid;
      place-items:center;
      background: transparent !important;
      overflow: visible;
      border:none !important;
      outline:none !important;
      box-shadow:none !important;
    }
    .cell::before,
.cell::after { content:none !important; }

    /* ===== Hole container ===== */
    .hole {
      position:relative;
      width: min(90%, var(--holeW));
      height: var(--holeH);
      transform: translateY(12px);
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      will-change: transform;
      background: transparent !important;
      border:none !important;
      outline:none !important;
      box-shadow:none !important;
    }

    /* “прилипание” к фону (контактная тень, не парение) */
    .hole::before {
      content:"";
      position:absolute;
      left:50%;
      bottom: 18px;
      transform: translateX(-50%);
      width: 96%;
      height: 42%;
      background: radial-gradient(closest-side, rgba(0,0,0,.66), rgba(0,0,0,0));
      filter: blur(16px);
      opacity: .95;
      z-index: 0;
      mix-blend-mode: multiply;
      pointer-events:none;
    }

    /* ===== Layering: BACK (pit) -> MOLE -> FRONT (rim) ===== */
    .holeBackSvg,
.holeFrontSvg {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      pointer-events:none;
      will-change: transform, filter;
      transform: translate(calc(var(--px) * .10), calc(var(--py) * .08));
      
    }
   
   .holeFrontSvg {
  filter: none !important;      /* важно */
  background: transparent !important;
}

    /* ===== Effects: ruffle / sparks / dust / shockwave / debris ===== */
    .ruffle,
.sparks,
.dust,
.shockwave,
.debris {
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .ruffle { z-index: 5; opacity:0; }
    .sparks { z-index: 6; opacity:0; }
    .dust { z-index: 6; opacity:0; }
    .shockwave { z-index: 7; opacity:0; }
    .debris { z-index: 7; opacity:0; }

    .ruffle i {
      position:absolute;
      left:50%;
      top:56%;
      width: 8px;
      height: 8px;
      border-radius: var(--ui-radius-pill);
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.20), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, var(--soil-1), var(--soil-3));
      box-shadow: var(--ui-shadow-soft);
      transform: translate(-50%,-50%);
      opacity:0;
      filter: saturate(1.1);
    }

    .sparks b {
      position:absolute;
      left:50%;
      top:52%;
      width: 3px;
      height: 3px;
      border-radius: var(--ui-radius-pill);
      background: radial-gradient(circle, var(--spark), rgba(255,255,255,0));
      box-shadow: 0 0 var(--ui-glow-md) color-mix(in srgb, var(--spark) 55%, transparent);
      transform: translate(-50%,-50%);
      opacity:0;
    }

    .dust {
      left:50%;
      top:54%;
      width: 84%;
      height: 64%;
      transform: translate(-50%,-50%) scale(.92);
      filter: blur(1px);
      mix-blend-mode: screen;
    }
    .dust::before,
.dust::after {
      content:"";
      position:absolute;
      inset:-10%;
      border-radius: var(--ui-radius-pill);
      background:
        radial-gradient(closest-side at 40% 65%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(closest-side at 60% 58%, rgba(255,255,255,.12), transparent 62%),
        radial-gradient(closest-side at 50% 76%, var(--amb-soft), transparent 66%);
      opacity:.95;
      transform: scale(.88);
    }
    .dust::after {
      background:
        radial-gradient(closest-side at 46% 62%, rgba(0,0,0,.22), transparent 66%),
        radial-gradient(closest-side at 66% 56%, rgba(0,0,0,.16), transparent 64%),
        radial-gradient(closest-side at 50% 74%, rgba(0,0,0,.12), transparent 70%);
      mix-blend-mode: multiply;
      opacity:.55;
    }

    .shockwave {
      left:50%;
      top:56%;
      width: 26px;
      height: 26px;
      border-radius:var(--ui-radius-pill);
      transform: translate(-50%,-50%) scale(.12);
      border: 2px solid rgba(255,255,255,.14);
      box-shadow: 0 0 var(--ui-glow-lg) var(--amb-soft);
    }

    .debris s {
      position:absolute;
      left:50%;
      top:56%;
      width: 14px;
      height: 8px;
      border-radius: var(--ui-radius-md);
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(0,0,0,0) 60%),
        linear-gradient(180deg, var(--soil-2), var(--soil-4));
      box-shadow: var(--ui-shadow-soft), inset 0 1px 0 rgba(255,255,255,.10);
      transform: translate(-50%,-50%) rotate(0deg);
      opacity:0;
      filter: saturate(1.08);
      will-change: transform, opacity;
    }

    /* triggers */
    /* Времена разлёта стоят числами законно — оговорка 3 лестницы
       движения (`game-ui.css`): доли обязаны гаснуть вразнобой. */
    .hole.pop .ruffle { opacity:1; }
    .hole.pop .ruffle i { animation: dirtBurst .40s ease-out forwards; }

    .hole.pop .sparks { opacity:1; }
    .hole.pop .sparks b { animation: sparkBurst .55s ease-out forwards; }

    .hole.hit .dust { animation: dustPuff .32s ease-out 1; }
    .hole.hit .shockwave { animation: wave .28s ease-out 1; }

    .hole.pop .debris { opacity:1; }
    .hole.pop .debris s { animation: debrisFly .44s ease-out forwards; }

    .hole.hit .holeFrontSvg { animation: rimHit var(--tam-b-shake) ease-in-out 1; }
    .hole.pop .holeFrontSvg { animation: rimShake var(--tam-t-state) ease-in-out 1; }

    /* “рыхление обода” */
    .hole.pop .holeFrontSvg .rim {
      animation: rimLift var(--tam-t-panel) cubic-bezier(.2,.9,.2,1) 1;
    }
    .hole.pop .holeFrontSvg .clod {
      animation: clodPop var(--tam-b-rise) cubic-bezier(.2,.9,.2,1) 1;
    }
    .hole.hit .holeFrontSvg .rim {
      animation: rimSquash var(--tam-b-shake) cubic-bezier(.2,.9,.2,1) 1;
    }
    .hole.hit .holeFrontSvg .crackFX {
      animation: crackFlash var(--tam-b-flash) ease-out 1;
    }

    /* strata / rimlight parallax */
    .holeBackSvg .strata {
      transform: translate(calc(var(--px) * .24), calc(var(--py) * .18));
      transform-origin: 50% 60%;
      will-change: transform;
      opacity:.78;
    }
    .holeBackSvg .ambientTop {
      transform: translate(calc(var(--px) * .18), calc(var(--py) * .12));
      will-change: transform;
      mix-blend-mode: screen;
      opacity:.85;
    }
    .holeFrontSvg .rimSweep {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: 50% 55%;
    }
    .hole.is-up .holeFrontSvg .rimSweep {
      animation: sweep 1.35s ease-in-out infinite;
    }

    @keyframes sweep {
      0%{ opacity:0; transform: translateX(-22%) skewX(-14deg); }
      20%{ opacity:.55; }
      55%{ opacity:.35; }
      100%{ opacity:0; transform: translateX(24%) skewX(-14deg); }
    }

    @keyframes rimLift {
      0%{ transform: translateY(0) scaleY(1); }
      55%{ transform: translateY(-2px) scaleY(1.02); }
      100%{ transform: translateY(0) scaleY(1); }
    }
    @keyframes rimSquash {
      0%{ transform: translateY(0) scaleY(1); }
      60%{ transform: translateY(1px) scaleY(.985); }
      100%{ transform: translateY(0) scaleY(1); }
    }
    @keyframes clodPop {
      0%{ transform: translateY(0) scale(1); }
      45%{ transform: translateY(-3px) scale(1.03); }
      100%{ transform: translateY(0) scale(1); }
    }

    @keyframes rimShake {
      0%{ transform: translateY(0) rotate(0deg); }
      25%{ transform: translateY(-1px) rotate(-.5deg); }
      50%{ transform: translateY(0) rotate(.45deg); }
      75%{ transform: translateY(1px) rotate(-.3deg); }
      100%{ transform: translateY(0) rotate(0deg); }
    }
    @keyframes rimHit {
      0%{ transform: translateY(0) scale(1); }
      45%{ transform: translateY(1px) scale(.993); }
      100%{ transform: translateY(0) scale(1); }
    }

    @keyframes dirtBurst {
      0%{ opacity:0; transform: translate(-50%,-50%) scale(.35); }
      30%{ opacity:1; }
      100%{
        opacity:0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.95);
      }
    }

    @keyframes sparkBurst {
      0%{ opacity:0; transform: translate(-50%,-50%) scale(.5); }
      20%{ opacity:1; }
      100%{
        opacity:0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.1);
      }
    }

    @keyframes crackFlash {
      0%{ opacity:0; }
      20%{ opacity:1; }
      100%{ opacity:0; }
    }

    @keyframes dustPuff {
      0%{ opacity:0; transform: translate(-50%,-50%) scale(.90); }
      18%{ opacity:1; }
      100%{ opacity:0; transform: translate(-50%,-58%) scale(1.06); }
    }

    @keyframes wave {
      0%{ opacity:0; transform: translate(-50%,-50%) scale(.2); }
      25%{ opacity:.9; }
      100%{ opacity:0; transform: translate(-50%,-50%) scale(3.6); }
    }

    @keyframes debrisFly {
      0%{ opacity:0; transform: translate(-50%,-50%) scale(.55) rotate(0deg); }
      18%{ opacity:1; }
      100%{
        opacity:0;
        transform:
          translate(calc(-50% + var(--dx2)), calc(-50% + var(--dy2)))
          scale(.98)
          rotate(var(--rot2));
      }
    }

    /* ===== responsive ===== */
    @media (max-width: 480px) {

      :root {
        --gap: 2px;
        --cell: 150px;
        --holeW: 170px;
        --holeH: 124px;
      }
      .boardWrap { padding-top: 92px; }
}

    .hint {
      position:fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(10px + env(safe-area-inset-bottom));
      z-index:3;
      font-size: var(--ui-size-small);
      color: rgba(255,255,255,.75);
      text-shadow: var(--ui-text-shadow-sm);
      pointer-events:none;
    }

/* ===== ПРИВЯЗКА К ГЕОМЕТРИИ ДЫРЫ (из SVG holeBackSVG) =====
   viewBox 520x360, внутренняя “дырка”:
   cx=260 (50%), cy=210 (~58.33%), rx=136 (~26.15% ширины), ry=70 (~19.44% высоты)
*/
:root {
  --hole-cx: 50%;
  --hole-rx: 27.2%;
  --hole-ry: 20.4%;
  --hole-cy: 58.8%;

  /* линия земли на спрайте (где обод “перекрывает”) */
  --mole-ground: 84%;
  --mole-up: -4%;
  --mole-start: 210%;
  --mole-down: 220%;
}

.holeBackSvg { z-index: 1; }
.holeRimBackSvg { z-index: 2; }
.moleInLayer { z-index: 3; }
.moleOutLayer { z-index: 4; }
.holeFrontSvg { z-index: 5; }

/* общий контейнер слоёв крота */
.moleInLayer,
.moleOutLayer {
  position:absolute;
  inset:0;
  pointer-events:none;
  transform: translate(calc(var(--px) * .10), calc(var(--py) * .08));
  background: transparent !important;
}

.moleInEllipse {
  position:absolute; inset:0;
  clip-path: ellipse(var(--hole-rx) var(--hole-ry) at var(--hole-cx) var(--hole-cy));
  -webkit-clip-path: ellipse(var(--hole-rx) var(--hole-ry) at var(--hole-cx) var(--hole-cy));
}

.holeBackSvg {
  filter: none !important;  /* важно */
}
.holeBackSvg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  will-change: transform, filter;
  transform: translate(calc(var(--px) * .10), calc(var(--py) * .08));
  z-index: 1; /* Добавьте это */
  filter: none !important;  /* важно - убираем фильтры */
}

/* ВНУТРИ ДЫРЫ: режем слоем по эллипсу отверстия (pixel-perfect) */
.moleInLayer {
  clip-path: ellipse(var(--hole-rx) var(--hole-ry) at var(--hole-cx) var(--hole-cy));
  -webkit-clip-path: ellipse(var(--hole-rx) var(--hole-ry) at var(--hole-cx) var(--hole-cy));
}

/* OUT слой по умолчанию спрятан */
.moleOutLayer {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: clip-path var(--tam-t-state) ease, -webkit-clip-path var(--tam-t-state) ease;
  will-change: clip-path;
}

/* UP — открываем верх головы */
.hole.is-up .moleOutLayer {
  clip-path: inset(0 0 calc(100% - var(--mole-ground)) 0);
  -webkit-clip-path: inset(0 0 calc(100% - var(--mole-ground)) 0);
}

/* DOWN — закрываем обратно (анимацией) */
.hole.is-down .moleOutLayer {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
}

.moleMotion {
  position:absolute;
  left:50%;
  top:0;
  width:100%;
  height:100%;
  transform: translateX(-50%) translateY(var(--mole-start));
  transition: transform var(--tam-b-mole) cubic-bezier(.22,.9,.22,1);
  will-change: transform;
}

.hole.is-up .moleMotion {
  transform: translateX(-50%) translateY(var(--mole-up));
}

.hole.is-down .moleMotion {
  transform: translateX(-50%) translateY(var(--mole-down));
  transition: transform var(--tam-b-hide) ease;
}

/* сама голова: якорим так, чтобы "точка выхода" совпала с дырой */
.moleImg {
  position:absolute;
  left:50%;
  width:70%!important;
  height:auto;
  transform: translateX(-50%);
  bottom: 26%; /* ключ: сидит в дыре */
  filter: drop-shadow(var(--ui-art-shadow-md));
}
/* Принудительный порядок слоев */
.hole > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hole,
.moleInLayer,
.moleOutLayer,
.moleMotion {
  overflow: visible;
}

/* ===== +XP popup ===== */
.xpLayer {
  position:fixed;
  inset:0;
  z-index: 2;           /* под HUD (у HUD z-index:3), но над фоном */
  pointer-events:none;
}

.xpPop {
  position:absolute;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: var(--ui-size-title);
  color: rgba(255,255,255,.95);
  text-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 0 18px color-mix(in srgb, var(--spark) 35%, transparent);
  transform: translate(-50%,-50%);
  opacity:0;
  animation: xpFloat var(--tam-t-reward) ease-out forwards;
  will-change: transform, opacity;
}

.xpPop::after {
  content:"";
  position:absolute;
  inset:-14px -18px;
  border-radius: var(--ui-radius-pill);
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--spark) 18%, transparent), transparent 60%);
  filter: blur(2px);
  z-index:-1;
}

@keyframes xpFloat {
  0%   { opacity:0; transform: translate(-50%,-50%) translateY(10px) scale(.95); }
  15%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translateY(-44px) scale(1.08); }
}

/* ===== СТИЛИ ДЛЯ +XP POPUP ===== */
.xpLayer {
  position: fixed;
  inset: 0;
  z-index: 2; /* Под HUD (у HUD z-index: 3), но над фоном */
  pointer-events: none;
}

.xpPop {
  position: absolute;
  font-weight: 900;
  letter-spacing: 0.3px;
  font-size: var(--ui-size-title);
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 10px 22px rgba(0, 0, 0, 0.55),
    0 0 18px color-mix(in srgb, var(--spark) 35%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: xpFloat var(--tam-t-reward) ease-out forwards;
  will-change: transform, opacity;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.xpPop::after {
  content: "";
  position: absolute;
  inset: -14px -18px;
  border-radius: var(--ui-radius-pill);
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--spark) 18%, transparent), transparent 60%);
  filter: blur(2px);
  z-index: -1;
}

@keyframes xpFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(0.95); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-44px) scale(1.08); }
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {

  .xpPop {
    font-size: 18px;
  }
}

.fireflies {
  position:absolute;
  inset: 0;
  z-index: 1;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode: screen;
}

.firefly {
  position:absolute;
  left: var(--x, 50%);
  top:  var(--y, 45%);
  width: var(--w, 14px);
  height: var(--h, 22px);
  transform: translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(.8);
  opacity: 0;

  /* “огонёк” как капля */
  border-radius: 60% 60% 70% 70% / 55% 55% 85% 85%;

  /* Тело пламени: горячее ядро + желтый + оранжевый + прозрачный край */
  background:
    radial-gradient(circle at 50% 62%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,0) 35%),
    radial-gradient(circle at 50% 70%, var(--ui-gold-hi) 0 35%, color-mix(in srgb, var(--ui-gold-light) 95%, transparent) 50%, color-mix(in srgb, var(--ui-gold) 75%, transparent) 65%, transparent 78%),
    radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--ui-gold-dark) 55%, transparent) 0 35%, transparent 70%);

  filter:
    blur(.15px)
    drop-shadow(0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold-light) 35%, transparent))
    drop-shadow(0 0 var(--ui-glow-lg) color-mix(in srgb, var(--ui-gold) 18%, transparent));

  /* хвост (шлейф) */
}
.firefly::before {
  content:"";
  position:absolute;
  left:50%;
  top: 72%;
  width: 68%;
  height: 86%;
  transform: translateX(-50%) rotate(12deg);
  border-radius: var(--ui-radius-pill);
  background:
    radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--ui-gold-hi) 55%, transparent), color-mix(in srgb, var(--ui-gold-light) 15%, transparent) 40%, transparent 75%);
  filter: blur(1px);
  opacity: .65;
}

/* лёгкий “дымок/сияние” вокруг */
.firefly::after {
  content:"";
  position:absolute;
  inset: -40% -55%;
  border-radius: var(--ui-radius-pill);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--ui-gold-hi) 18%, transparent), color-mix(in srgb, var(--ui-gold) 8%, transparent) 35%, rgba(0,0,0,0) 70%);
  filter: blur(2px);
  opacity:.55;
}

/* движение как у искр/пламени: вверх, чуть в сторону, немного вращения */
.firefly {
  animation:
    flameFly var(--dur, 5.6s) linear infinite,
    flameFlicker .95s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes flameFly {
  0%{
    opacity: 0;
    transform: translate(-50%,-50%) translate(0,0) rotate(var(--rot,0deg)) scale(.65);
  }
  12%{ opacity: .95; }
  55%{ opacity: .65; }
  90%{ opacity: .2; }
  100%{
    opacity: 0;
    transform:
      translate(-50%,-50%)
      translate(var(--tx, 40px), var(--ty, -140px))
      rotate(calc(var(--rot,0deg) + var(--spin, 18deg)))
      scale(1);
  }
}

@keyframes flameFlicker {
  0%,100%{
    filter:
      blur(.15px)
      drop-shadow(0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold-light) 30%, transparent))
      drop-shadow(0 0 var(--ui-glow-lg) color-mix(in srgb, var(--ui-gold) 16%, transparent));
  }
  35%{
    filter:
      blur(.35px)
      drop-shadow(0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold-hi) 40%, transparent))
      drop-shadow(0 0 var(--ui-glow-lg) color-mix(in srgb, var(--ui-gold) 22%, transparent));
  }
  70%{
    filter:
      blur(.2px)
      drop-shadow(0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold-light) 33%, transparent))
      drop-shadow(0 0 var(--ui-glow-lg) color-mix(in srgb, var(--ui-gold) 18%, transparent));
  }
}

/* Profile Page Styles */

/* Settings */

/* Language Select */

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Support Section */

/* App Info */

/* Make avatar in header clickable */