/* ============================================================
   KARMA — общий стиль (интерфейс в духе Clash Royale: тёмная ночь, объёмные «сочные» кнопки).
   Разделы рисуются через эти классы, поэтому изменения здесь применяются ко всей игре сразу.
   Макет утверждён 2026-10-20.
   ============================================================ */

:root {
    --bg: #12101C;          /* ночной фон */
    --surface: #2A2342;     /* верх карточки */
    --surface-2: #1F1A31;   /* низ карточки */
    --edge: #3A3158;        /* обводки */
    --sole: #0D0A18;        /* «подошва» объёмных элементов */
    --line: rgba(255, 255, 255, 0.07);
    --text: #F3EFFF;
    --muted: #9D96BA;
    --gold: #F7C548;  --gold-2: #B7841C;
    --violet: #8B5CF6; --violet-2: #5B32C2;
    --green: #3DD68C; --green-2: #1E9A5C;
    --red: #F2605C;   --red-2: #B23431;
    --blue: #4FA8F7;
    --display: "Rubik", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
    --radius: 18px;
    /* Цвет раздела для карточек (как у карточки профессии): фон-градиент, рамка, свечение */
    --acc: #8B5CF6; --acc-bg: #261A44; --acc-edge: rgba(139, 92, 246, 0.38); --acc-glow: rgba(139, 92, 246, 0.12);
}
#tab-fight      { --acc: #F2605C; --acc-bg: #3A1620; --acc-edge: rgba(242, 96, 92, 0.38);  --acc-glow: rgba(242, 96, 92, 0.12); }
#tab-business   { --acc: #F7C548; --acc-bg: #382A12; --acc-edge: rgba(247, 197, 72, 0.36); --acc-glow: rgba(247, 197, 72, 0.10); }
#tab-collection { --acc: #A78BFA; --acc-bg: #2A1B4A; --acc-edge: rgba(167, 139, 250, 0.40); --acc-glow: rgba(167, 139, 250, 0.12); }
#tab-clan       { --acc: #4FA8F7; --acc-bg: #13284A; --acc-edge: rgba(79, 168, 247, 0.38); --acc-glow: rgba(79, 168, 247, 0.12); }
#tab-games      { --acc: #3DD68C; --acc-bg: #0F3326; --acc-edge: rgba(61, 214, 140, 0.36); --acc-glow: rgba(61, 214, 140, 0.10); }
#tab-admin      { --acc: #9D96BA; --acc-bg: #2A2342; --acc-edge: var(--edge); --acc-glow: transparent; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }

body {
    font-family: var(--body); font-weight: 700;
    color: var(--text);
    min-height: 100vh;
    background:
        radial-gradient(520px 300px at 50% -80px, rgba(139, 92, 246, 0.22), transparent 70%),
        radial-gradient(420px 280px at 100% 100%, rgba(247, 197, 72, 0.06), transparent 70%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(247, 197, 72, 0.3); }

.app { max-width: 480px; margin: 0 auto; padding: 0 14px calc(110px + env(safe-area-inset-bottom)); }

h1, h2, h3, .display { font-family: var(--display); font-weight: 800; letter-spacing: 0.3px; }

/* ---------- шапка: аватар слева, Карма и золото справа ---------- */
.header {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    margin: 0 -14px; padding: 10px 14px 8px;
    background: rgba(18, 16, 28, 0.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.me { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; background: none; border: 0; color: inherit;
      cursor: pointer; padding: 0; text-align: left; font: inherit; box-shadow: none; position: relative; }
.me-avatar {
    position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-size: 25px;
    background: linear-gradient(160deg, #3B2F6B, #241C44); border: 2px solid var(--gold); box-shadow: 0 3px 0 var(--gold-2);
}
.me-badge {
    position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); min-width: 22px; padding: 0 5px; height: 17px; border-radius: 9px;
    background: var(--blue); border: 2px solid var(--bg); font: 800 11px/13px var(--display); display: grid; place-items: center; color: white;
}
.me-badge:empty { display: none; }
.me-text { min-width: 0; }
.me-name { font: 800 17px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-sub { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me.has-badge::after { top: -3px; left: 38px; right: auto; }
.purse { display: flex; gap: 6px; flex-shrink: 0; }

/* «Монетки» в шапке: золото (→ история) и Карма (→ магазин) */
.gold {
    position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px 0 6px; border-radius: 10px;
    border: 0; cursor: pointer; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1.5px var(--edge);
    color: var(--text); font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gold-coin { font-size: 17px; line-height: 1; }
.gold.karma { box-shadow: inset 0 0 0 1.5px var(--violet); }
.karma-plus { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; margin-left: 1px;
              background: var(--green); box-shadow: 0 2px 0 var(--green-2); color: #08301B; font: 800 13px/1 var(--display); }
.gold:active { transform: translateY(1px); }
.gold.flash-plus { animation: gold-flash-plus 0.6s ease-out; }
.gold.flash-minus { animation: gold-flash-minus 0.6s ease-out; }
@keyframes gold-flash-plus { 0% { box-shadow: inset 0 0 0 2px var(--green), 0 0 16px rgba(61, 214, 140, 0.7); } 100% { box-shadow: inset 0 0 0 1.5px var(--edge); } }
@keyframes gold-flash-minus { 0% { box-shadow: inset 0 0 0 2px var(--red), 0 0 16px rgba(242, 96, 92, 0.7); } 100% { box-shadow: inset 0 0 0 1.5px var(--edge); } }
.gold-delta {
    position: absolute; right: 6px; top: 100%; margin-top: 4px; padding: 2px 8px; border-radius: 8px; z-index: 5;
    font: 800 12px var(--display); pointer-events: none; animation: gold-delta 1.4s ease-out forwards;
}
.gold-delta.plus { color: var(--green); background: rgba(13, 10, 24, 0.9); }
.gold-delta.minus { color: var(--red); background: rgba(13, 10, 24, 0.9); }
@keyframes gold-delta { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
@media (max-width: 370px) { .gold { font-size: 13px; padding: 0 7px 0 5px; } .me-name { font-size: 15px; } }

/* ---------- быстрые кнопки под шапкой ---------- */
.quick { display: flex; gap: 8px; margin: 2px -14px 6px; padding: 2px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.side-btn { position: relative; flex-shrink: 0; width: 60px; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; padding: 0; box-shadow: none; }
.side-btn .disc {
    width: 50px; height: 50px; margin: 0 auto; border-radius: 15px; display: grid; place-items: center; font-size: 25px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--edge), 0 3px 0 var(--sole);
}
.side-btn small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--muted); text-align: center; white-space: nowrap; }
.side-btn:active .disc { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--edge), 0 1px 0 var(--sole); }
.side-btn.has-badge::after { top: -3px; right: 4px; }
/* Спрятанные подвкладки (Город, Рыбалка, праздник): открываются изнутри экрана, подсвечивается родитель (main.js showSub) */
.sub-btn[data-parent] { display: none !important; }
.back-chip { display: inline-block; width: auto; margin: 0 0 8px; padding: 6px 12px; border: 0; border-radius: 12px; cursor: pointer;
             background: rgba(255, 255, 255, 0.06); color: var(--muted); font: 800 12px var(--body); box-shadow: inset 0 0 0 1.5px var(--edge); }
/* Переключатель внутри экрана (🏹 Охота ⇄ 🎣 Рыбалка) */
.seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 14px; background: rgba(13, 10, 24, 0.55); box-shadow: inset 0 0 0 1.5px var(--edge); }
.seg button { flex: 1; margin: 0; padding: 8px 4px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--muted);
              font: 800 13px var(--body); box-shadow: none; }
.seg button.on { background: linear-gradient(180deg, #FFDC74, var(--gold)); color: #3A2600; box-shadow: 0 2px 0 var(--gold-2); }
/* 🎃 плитки праздника */
.hw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hw-tile { position: relative; margin: 0; padding: 16px 8px; border: 0; border-radius: 16px; cursor: pointer; text-align: center; color: var(--text);
           background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--edge), 0 4px 0 var(--sole); }
.hw-tile .ic { display: block; font-size: 34px; margin-bottom: 4px; }
.hw-tile b { font: 800 14px var(--display); }
.hw-tile small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
/* 🎁 🔔 ☰ — значки без подписей (hub.js), у 🔔 — цифра дел */
.hub-btn { width: 54px; }
.hub-btn .disc { width: 46px; height: 46px; font-size: 23px; }
.hub-count { position: absolute; top: -4px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red);
             color: #fff; font: 900 11px/18px var(--display); text-align: center; box-shadow: 0 0 0 2px var(--bg, #0D0A18); }
/* 📻 Эфир (услуга Музыкального лейбла): строка между кнопками под шапкой; пусто — просто распорка */
.radio-bar { flex: 1; min-width: 0; align-self: center; cursor: pointer; }
.radio-bar.on { padding: 6px 10px; border-radius: 12px; background: linear-gradient(90deg, #3B0764cc, #1E1B4Bcc); border: 1px solid #7C3AED;
                font: 800 11px/1.3 var(--display, inherit); color: #E9D5FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-bar .rb-txt { display: inline-block; animation: rb-in 0.5s ease-out; }
@keyframes rb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- нижняя панель: 5 разделов, «Бой» в центре ---------- */
.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; margin: 0 auto; max-width: 480px;
    display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr; align-items: end; gap: 0;
    padding: 0 6px calc(8px + env(safe-area-inset-bottom)); height: calc(84px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(18, 16, 28, 0), #0E0C17 30%); border: none; border-radius: 0;
}
.tab-btn {
    position: relative; border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; padding: 6px 0 2px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: none !important; min-width: 0;
}
/* Все вкладки одинаковые (центральная «Бой» — чуть крупнее); открытая — большой светящийся золотой квадрат */
.tab-btn .ic {
    width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 25px; line-height: 1;
    filter: grayscale(0.35) brightness(0.85); background: transparent; box-shadow: none;
    transition: transform 0.18s ease, background 0.18s, box-shadow 0.18s, width 0.18s, height 0.18s, font-size 0.18s;
}
.tab-btn .lbl { font: 800 11px var(--display); letter-spacing: 0.3px; white-space: nowrap; }
.tab-btn.center .ic { font-size: 29px; }
.tab-btn.active { color: var(--text); }
.tab-btn.active .ic {
    width: 50px; height: 50px; font-size: 28px; filter: none; transform: translateY(-10px);
    background: linear-gradient(180deg, #FFDC74, var(--gold)); box-shadow: 0 4px 0 var(--gold-2), 0 0 0 3px #0E0C17, 0 0 20px rgba(247, 197, 72, 0.55);
}
.tab-btn.center.active .ic { width: 54px; height: 54px; font-size: 31px; }
.tab-btn.active .lbl { margin-top: -10px; color: var(--gold); }
.has-badge::after { content: ''; position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
                    background: var(--red); box-shadow: 0 0 0 2px var(--bg); z-index: 2; }
.tab-btn.has-badge::after { right: calc(50% - 20px); }

.tab { display: none; }
.tab.active { display: block; }
.tab.tab-enter { animation: tab-in 0.25s ease-out; }
.tab h2 { font-size: 22px; margin: 10px 2px 10px; }

/* ---------- подвкладки: «чипы» ---------- */
/* padding сверху/снизу — место под красную точку и «подошву» чипа: ряд прокручивается вбок и срезает всё, что торчит за край */
.subtabs { display: flex; gap: 6px; margin: 1px -14px 8px; padding: 6px 14px 5px; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.sub-btn {
    flex-shrink: 0; position: relative; height: 34px; padding: 0 13px; border: 0; border-radius: 11px; cursor: pointer; white-space: nowrap;
    background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1.5px var(--edge); color: var(--muted); font: 800 13px var(--body);
}
.sub-btn.active { color: #2B1B00; background: linear-gradient(180deg, #FFD86A, var(--gold)); box-shadow: 0 3px 0 var(--gold-2); }
.sub-btn.has-badge::after { top: -4px; right: -2px; }
.subtab { display: none; }
.subtab.active { display: block; }
/* Свайп между подвкладками — новая въезжает с той стороны, куда листали */
.subtab.swipe-from-right { animation: swipe-in-right 0.25s ease-out; }
.subtab.swipe-from-left { animation: swipe-in-left 0.25s ease-out; }
@keyframes swipe-in-right { from { opacity: 0.3; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes swipe-in-left { from { opacity: 0.3; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }

/* ---------- карточки ---------- */
.cards { display: grid; gap: 10px; }
.card {
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(145deg, var(--acc-bg), var(--surface-2) 72%);
    border: 0; border-radius: var(--radius);
    padding: 14px; margin-bottom: 10px;
    box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 4px 0 var(--sole), 0 6px 22px var(--acc-glow);
}
/* Большой полупрозрачный смайлик в углу — ставит cards.js из заголовка карточки */
.card-wm {
    position: absolute; right: -12px; top: -16px; z-index: -1; font-size: 84px; line-height: 1;
    opacity: 0.11; pointer-events: none; user-select: none; transform: rotate(-8deg);
}
.card h3 img.emj { filter: drop-shadow(0 0 8px var(--acc-glow)) drop-shadow(0 0 3px var(--acc-edge)); }
.tab.tab-enter .card { animation: card-in 0.3s ease-out both; }
.tab.tab-enter .card:nth-child(2) { animation-delay: 0.03s; }
.tab.tab-enter .card:nth-child(3) { animation-delay: 0.06s; }
.tab.tab-enter .card:nth-child(4) { animation-delay: 0.09s; }
.card h3 { font-size: 17px; margin-bottom: 8px; color: var(--text); }

.info-block {
    background: linear-gradient(145deg, var(--acc-bg), var(--surface-2) 72%);
    box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 4px 0 var(--sole);
    padding: 14px; border-radius: var(--radius); line-height: 1.6;
}

/* ---------- кнопки: объёмные, при нажатии опускаются ---------- */
button {
    font-family: inherit; font-weight: 800;
    transition: transform 0.06s ease, filter 0.15s, opacity 0.15s, box-shadow 0.06s;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.38);
}
button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.38); }
button:disabled { cursor: not-allowed; box-shadow: none; opacity: 0.75; }
.card button { padding: 10px; background: linear-gradient(180deg, #FFDC74, var(--gold)); color: #3A2600; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- поля ввода ---------- */
input, select, textarea { font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.card input, .card select {
    width: 100%; padding: 10px; background: var(--sole); color: var(--text);
    border: 1.5px solid var(--edge); border-radius: 11px; font-weight: 700;
}
input:focus, select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(247, 197, 72, 0.15); }
input::placeholder { color: #6B6588; }

/* ---------- 👤 профиль — лист снизу (секция tab-home) ---------- */
.home-scrim { position: fixed; inset: 0; z-index: 960; background: rgba(5, 4, 10, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.home-scrim.open { opacity: 1; pointer-events: auto; }
.tab.home-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 970; margin: 0 auto; max-width: 480px;
    max-height: 92vh; overflow-y: auto; padding: 10px 14px calc(24px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #262040, var(--surface-2) 140px); border-radius: 24px 24px 0 0; box-shadow: 0 -1.5px 0 var(--edge);
    transform: translateY(105%); visibility: hidden; transition: transform 0.28s cubic-bezier(.2, .9, .3, 1.05), visibility 0s 0.28s;
    scrollbar-width: none;
}
.tab.home-sheet.open { transform: none; visibility: visible; transition: transform 0.28s cubic-bezier(.2, .9, .3, 1.05); }
.sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--edge); margin: 0 auto 6px; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 11px; border: 0; cursor: pointer;
           background: rgba(255, 255, 255, 0.07); color: var(--text); font: 800 16px var(--display); box-shadow: none; z-index: 2; }
.prof-hero { text-align: center; padding: 8px 0 2px; }
.prof-avatar { position: relative; width: 84px; height: 84px; margin: 0 auto; border-radius: 24px; display: grid; place-items: center; font-size: 46px;
               background: linear-gradient(160deg, #3B2F6B, #241C44); border: 3px solid var(--gold); box-shadow: 0 0 22px rgba(247, 197, 72, 0.3), 0 4px 0 var(--gold-2); }
.prof-avatar .me-badge { height: 22px; font-size: 13px; bottom: -11px; padding: 0 8px; }
.nick-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; max-width: 100%; }
.nick-row #profile-nick { font: 800 25px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pencil { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 14px; box-shadow: none; }
.nick-edit { display: none; gap: 6px; margin: 10px auto 0; max-width: 320px; }
.nick-edit.on { display: flex; }
.nick-edit input { flex: 1; min-width: 0; height: 40px; border-radius: 11px; border: 0; padding: 0 12px; background: var(--sole); color: var(--text);
                   font: 800 15px var(--body); box-shadow: inset 0 0 0 1.5px var(--gold); }
.nick-edit button { height: 40px; padding: 0 14px; border: 0; border-radius: 11px; cursor: pointer; background: linear-gradient(180deg, #5EEBA6, var(--green));
                    box-shadow: 0 3px 0 var(--green-2); color: #06301A; font: 800 15px var(--display); }
.nick-hint-line { font-size: 11px; color: var(--muted); margin-top: 4px; }
.title-pill { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 8px; background: rgba(247, 197, 72, 0.12); color: var(--gold); font-size: 12px; }
.title-pill:empty { display: none; }
/* 🏅 легендарный титул — золотой с бегущим блеском (titles.js, titleHtml) */
.title-legend { background: linear-gradient(90deg, #FFD45C 0%, #FFF3C4 45%, #FFD45C 60%, #F59E0B 100%); background-size: 220% auto;
                -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: title-shine 2.6s linear infinite; }
@keyframes title-shine { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .title-legend { animation: none; } }
.prof-line { margin-top: 8px; font-size: 12px; color: var(--muted); }
.prof-bonuses { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.menu { display: grid; gap: 8px; margin: 14px 0 6px; }
.menu > button, .menu > a {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; cursor: pointer; width: 100%;
    color: var(--text); font: 800 14px var(--body); text-align: left; text-decoration: none;
    background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1.5px var(--edge), 0 3px 0 var(--sole);
}
.menu .m-ic { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
.menu .m-go { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ============================================================
   🎨 ЭТАП 2: старая палитра разделов → новая (без переписывания каждого шаблона).
   Разделы рисуют разметку с inline-цветами старой серой темы (#111827, #374151, #FFD700…);
   здесь они подменяются на токены «ночь + объём». Новые шаблоны лучше сразу писать на токенах.
   ============================================================ */
/* Тёмные «утопленные» плашки внутри карточек */
:is([style*="background:#111827"], [style*="background: #111827"], [style*="background:#0D0D14"], [style*="background:#15151E"],
    [style*="background:#16161E"], [style*="background: #16161E"]):not(button) {
    background: rgba(13, 10, 24, 0.55) !important;
}
/* Светлее — подложки строк/блоков */
:is([style*="background:#1F2937"], [style*="background: #1F2937"], [style*="background:#252535"], [style*="background:#2A2A35"]):not(button) {
    background: rgba(255, 255, 255, 0.05) !important;
}
/* Окно поверх игры (профиль игрока, журнал, история) */
#game-overlay > div { background: linear-gradient(180deg, var(--surface), var(--surface-2) 40%) !important;
                      border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--edge), 0 6px 0 var(--sole), 0 20px 50px rgba(0, 0, 0, 0.6) !important; border-radius: 20px !important; }
/* Рамки и разделители */
[style*="border-top:1px solid #374151"], [style*="border-top: 1px solid #374151"], [style*="border-top:1px solid #2A2A3A"],
[style*="border-bottom:1px solid #374151"] { border-color: rgba(255, 255, 255, 0.07) !important; }
:is([style*="border:1px solid #374151"], [style*="border: 1px solid #374151"], [style*="border:1px solid #4B5563"],
    [style*="border: 1px solid #4B5563"], [style*="border:1px solid #2A2A3A"], [style*="border:1px solid #444"]) {
    border-color: var(--edge) !important;
}
/* Текст */
[style*="color:#9CA3AF"], [style*="color: #9CA3AF"], [style*="color:#888"] { color: var(--muted) !important; }
[style*="color:#6B7280"], [style*="color: #6B7280"] { color: #6B6488 !important; }
[style*="color:#E0E0E0"], [style*="color: #E0E0E0"], [style*="color:#F3F4F6"], [style*="color:#F9FAFB"], [style*="color:#E5E7EB"] { color: var(--text) !important; }
[style*="color:#FFD700"]:not(button) { color: var(--gold) !important; }
[style*="color:#10B981"]:not(button), [style*="color:#34D399"]:not(button) { color: var(--green) !important; }
[style*="color:#F87171"]:not(button), [style*="color:#EF4444"]:not(button) { color: var(--red) !important; }

/* Плоские кнопки старой темы → объёмные «сочные» */
button:is([style*="background:#FFD700"], [style*="background: #FFD700"], [style*="background:#F59E0B"], [style*="background:linear-gradient(135deg,#FFD700"]) {
    background: linear-gradient(180deg, #FFDC74, var(--gold)) !important; color: #3A2600 !important; box-shadow: 0 3px 0 var(--gold-2) !important;
}
button:is([style*="background:#10B981"], [style*="background: #10B981"], [style*="background:linear-gradient(135deg,#10B981"]) {
    background: linear-gradient(180deg, #5BE3A2, var(--green)) !important; color: #05301B !important; box-shadow: 0 3px 0 var(--green-2) !important;
}
button:is([style*="background:#EF4444"], [style*="background: #EF4444"], [style*="background:#DC2626"], [style*="background:#7F1D1D"]) {
    background: linear-gradient(180deg, #FF8A86, var(--red)) !important; color: #3D0605 !important; box-shadow: 0 3px 0 var(--red-2) !important;
}
button:is([style*="background:#3B82F6"], [style*="background: #3B82F6"]) {
    background: linear-gradient(180deg, #7CC0FA, var(--blue)) !important; color: #06213D !important; box-shadow: 0 3px 0 #2B6FB0 !important;
}
button:is([style*="background:#8B5CF6"], [style*="background:#7C3AED"], [style*="background:#4C1D95"], [style*="background:#6D28D9"], [style*="background:linear-gradient(135deg,#8B5CF6"]) {
    background: linear-gradient(180deg, #A78BFA, var(--violet)) !important; color: #fff !important; box-shadow: 0 3px 0 var(--violet-2) !important;
}
button:is([style*="background:#374151"], [style*="background: #374151"], [style*="background:#2A2A35"], [style*="background:#1F2937"], [style*="background:#252535"]) {
    background: rgba(255, 255, 255, 0.06) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1.5px var(--edge), 0 3px 0 var(--sole) !important;
}
button:is([style*="background:#4B5563"], [style*="background: #4B5563"]) {
    background: var(--edge) !important; color: #8E87AD !important; box-shadow: 0 2px 0 var(--sole) !important;
}
/* Скругления старых кнопок — как у новых */
button[style*="border-radius:6px"], button[style*="border-radius: 6px"], button[style*="border-radius:8px"] { border-radius: 12px !important; }
/* Старые поля ввода */
input:is([style*="background:#111827"], [style*="background:#252535"]), select:is([style*="background:#111827"], [style*="background:#252535"]) {
    background: var(--sole) !important; border-color: var(--edge) !important; border-radius: 10px !important;
}

/* ---------- 🏢 здания: плитка-иконка, бейдж уровня, кнопка сбора ---------- */
.b-ic {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center; font-size: 28px;
    background: radial-gradient(circle at 50% 35%, var(--acc-edge), rgba(13, 10, 24, 0.6) 75%);
    box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 0 14px var(--acc-glow), 0 3px 0 var(--sole);
}
.b-lvl { font: 800 11px var(--body); color: var(--acc); padding: 1px 7px; border-radius: 8px; background: rgba(13, 10, 24, 0.5); vertical-align: 2px; }
.b-chev { color: var(--muted); font-size: 14px; transition: transform 0.2s; display: inline-block; }
.b-chev.open { transform: rotate(180deg); }
.card .btn-collect {
    width: 100%; padding: 13px; border-radius: 14px; font: 900 15px var(--display); letter-spacing: 0.5px; color: #05301B;
    background: linear-gradient(180deg, #5BE3A2, var(--green)); box-shadow: 0 4px 0 var(--green-2);
}
.card .btn-collect:disabled { background: var(--edge); color: #8E87AD; box-shadow: 0 2px 0 var(--sole); opacity: 1; }
.btn-collect-all {
    width: 100%; margin-bottom: 12px; padding: 15px; border: 0; border-radius: 16px; cursor: pointer;
    font: 900 17px var(--display); color: #3A2600; background: linear-gradient(180deg, #FFE27F, var(--gold));
    box-shadow: 0 5px 0 var(--gold-2), 0 8px 22px rgba(247, 197, 72, 0.3);
}
.btn-collect-all:disabled { color: #8E87AD; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--edge), 0 3px 0 var(--sole); }
.card.shop-card { box-shadow: inset 0 0 0 1.5px var(--edge), 0 4px 0 var(--sole); background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), var(--surface-2) 70%); }
.card.shop-card.can { box-shadow: inset 0 0 0 1.5px var(--gold), 0 4px 0 var(--sole), 0 0 18px rgba(247, 197, 72, 0.15); }

/* ---------- 🐉 арена босса и полоса HP ---------- */
.card .boss-arena {
    height: 170px; border: 0; border-radius: 18px;
    box-shadow: inset 0 0 0 1.5px rgba(242, 96, 92, 0.35), inset 0 -40px 60px -30px rgba(0, 0, 0, 0.8), 0 4px 0 var(--sole);
}
.card .boss-arena::before {   /* «пол» под боссом */
    content: ""; position: absolute; left: 18%; right: 18%; bottom: 16px; height: 22px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65), transparent 70%);
}
.card .boss-arena::after {    /* луч прожектора сверху */
    content: ""; position: absolute; top: -30px; left: 30%; right: 30%; height: 150px; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0, rgba(255, 220, 160, 0.16), transparent 70%);
}
.hp-bar {
    position: relative; height: 26px; margin: 10px 0; border-radius: 13px; overflow: hidden;
    background: var(--sole); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1.5px var(--edge);
}
.hp-fill {
    height: 100%; border-radius: 13px; transition: width 0.5s ease;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hp) 70%, white), var(--hp) 55%);
    background-color: var(--hp);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}
.card .boss-attack-btn { padding: 15px !important; border-radius: 16px !important; font: 900 16px var(--display) !important; letter-spacing: 0.3px; }
.card .boss-attack-btn:not(:disabled) { box-shadow: 0 5px 0 var(--red-2), 0 8px 20px rgba(242, 96, 92, 0.35) !important; }
/* flex, а не grid: смайлик (картинка emoji.js) и цифры — в одну строку, а не друг под другом */
.hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
           font: 900 13px/1 var(--display); color: #fff; text-shadow: 0 1px 2px #000; }
.hp-text img.emj { height: 14px; vertical-align: 0; margin: 0; }

/* ---------- ℹ️ свёрнутые пояснения (foldHtml в progress.js) ---------- */
.fold { margin: 6px 0; }
.fold > summary {
    list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px;
    font: 800 11px var(--body); color: var(--muted); padding: 3px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.05);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "▾"; font-size: 10px; transition: transform 0.15s; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold-body { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(13, 10, 24, 0.45); }
/* ❓ пояснения (progress.js foldHtml/showTip): кружок «?» или пилюля с названием, окошко — поверх всех окон */
/* !important — общие правила кнопок (.card button: отступ 10px и золотой фон) иначе сдвигают «?» и перекрашивают */
button.tip-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 22px !important; height: 22px !important;
           min-width: 0; margin: 0 0 0 4px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
           vertical-align: middle; cursor: pointer; background: rgba(255, 255, 255, 0.08) !important; color: var(--muted) !important;
           font: 900 13px/1 var(--display) !important; text-align: center; box-shadow: inset 0 0 0 1.5px var(--edge) !important; transform: none; }
button.tip-chip { display: inline-block !important; width: auto !important; margin: 6px 4px 0 0 !important; padding: 5px 10px !important; border: 0 !important;
            border-radius: 999px !important; cursor: pointer; background: rgba(255, 255, 255, 0.06) !important; color: var(--muted) !important;
            font: 800 11.5px var(--body) !important; line-height: 1.2 !important; box-shadow: inset 0 0 0 1.5px var(--edge) !important; }
#tip-pop { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px;
           background: rgba(5, 4, 10, 0.6); animation: tip-in 0.15s ease-out; }
#tip-pop .tip-box { position: relative; width: 100%; max-width: 380px; max-height: 75vh; overflow-y: auto; padding: 16px 16px 14px; border-radius: 18px;
                    background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--edge), 0 8px 0 var(--sole); }
#tip-pop .tip-title { font: 800 16px var(--display); margin: 0 26px 8px 0; }
#tip-pop .tip-body { font-size: 13px; line-height: 1.5; color: var(--text); }
#tip-pop .tip-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%;
                      background: rgba(255, 255, 255, 0.07); color: var(--muted); font-size: 13px; box-shadow: none; cursor: pointer; }
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 📦 кейсы: витрина из трёх «ящиков» ---------- */
.case-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.case-box {
    position: relative; overflow: hidden; cursor: pointer; min-width: 0; padding: 12px 6px 8px; border-radius: 16px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform 0.1s;
    background: radial-gradient(circle at 50% 26%, var(--c2), transparent 62%), linear-gradient(180deg, #2A2342, #17132A);
    box-shadow: inset 0 0 0 1.5px var(--c2), 0 4px 0 var(--sole);
}
.case-box:active { transform: translateY(2px); }
.case-box.legend { box-shadow: inset 0 0 0 1.5px var(--c), 0 4px 0 var(--sole), 0 0 18px var(--c3); }
.case-box.legend::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 40%, rgba(255, 230, 150, 0.22) 50%, transparent 60%); animation: case-shine 3.2s ease-in-out infinite;
}
.case-ic { font-size: 44px; line-height: 1; margin: 2px 0 4px; filter: drop-shadow(0 4px 10px var(--c2)); animation: case-float 3s ease-in-out infinite; }
.case-box:nth-child(2) .case-ic { animation-delay: -1s; }
.case-box:nth-child(3) .case-ic { animation-delay: -2s; }
.case-name { font: 900 14px var(--display); color: var(--c); text-shadow: 0 2px 0 var(--sole); }
.case-line { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card .case-buy {
    margin-top: 6px; width: 100%; padding: 7px 4px; border-radius: 11px; white-space: nowrap; font: 900 12.5px var(--display);
    background: linear-gradient(180deg, #5BE3A2, var(--green)); color: #05301B; box-shadow: 0 3px 0 var(--green-2);
}
.card .case-buy.poor { background: var(--edge); color: var(--red); box-shadow: 0 3px 0 var(--sole); }
.case-buy s { display: block; font-size: 9.5px; opacity: 0.65; }
.case-hero { font-size: 72px; text-align: center; line-height: 1; filter: drop-shadow(0 0 20px var(--c)); }
.case-hero.shaking { animation: case-shake 0.35s ease-in-out infinite; }
.case-hero.burst { animation: case-burst 0.6s ease-out; }
@keyframes case-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes case-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes case-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.03); } 75% { transform: rotate(6deg) scale(1.03); } }
@keyframes case-burst { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- 🔐 сейф: стальная дверца, кодовые барабаны, штурвал ---------- */
.vault { position: relative; max-width: 330px; margin: 0 auto; perspective: 1000px; }
.vault-inside {
    position: absolute; inset: 6px; border-radius: 20px; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 45%, #7A5410, #241705 70%); box-shadow: inset 0 0 30px #000, inset 0 0 0 4px #15100A;
}
.vault-door {
    position: relative; z-index: 1; padding: 16px 14px 14px; border-radius: 22px; transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.35, 0.1, 0.2, 1);
    background: linear-gradient(160deg, #5C6577, #3A4152 40%, #272C38);
    box-shadow: inset 0 0 0 2px #707A8F, inset 0 0 0 7px #2B303C, inset 0 0 0 8px #4D5567, 0 6px 0 var(--sole), 0 12px 30px rgba(0, 0, 0, 0.45);
}
.vault.open .vault-door { transform: rotateY(-105deg); }
.vault.alarm .vault-door { animation: vault-alarm 0.5s ease-in-out 4; }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #C9D1E3, #4D5567 70%); box-shadow: 0 1px 0 #1A1E29; }
.vault-plate { font: 900 10px var(--display); letter-spacing: 3px; color: #AEB6C8; text-shadow: 0 1px 0 #1A1E29; }
.lamps { display: flex; justify-content: center; gap: 6px; margin: 8px 0 10px; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: #1A1E29; box-shadow: inset 0 1px 2px #000; }
.lamp.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.lamp.used { background: #7A2422; }
.lamp.win { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.dial-window {
    display: flex; justify-content: center; gap: 8px; padding: 10px; border-radius: 14px;
    background: #12151D; box-shadow: inset 0 3px 8px #000, 0 1px 0 #707A8F;
}
.drum { width: 62px; display: flex; flex-direction: column; gap: 5px; }
.card .drum-btn {
    height: 28px; padding: 0; border-radius: 8px; font-size: 12px; color: #DDE3EF;
    background: linear-gradient(180deg, #5C6577, #3A4152); box-shadow: 0 3px 0 #1A1E29;
}
.drum-face {
    height: 96px; overflow: hidden; border-radius: 10px; touch-action: none; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #1B1F2A 0%, #9AA2B2 22%, #F4F6FA 50%, #9AA2B2 78%, #1B1F2A 100%);
    box-shadow: inset 0 0 0 2px #2B303C; transition: box-shadow 0.2s;
}
.drum-digits { display: flex; flex-direction: column; align-items: center; color: #1A1E29; }
.drum-digits span { height: 32px; line-height: 32px; }
.drum-digits .cur { font: 900 32px var(--display); }
.drum-digits .dim { font: 800 20px var(--display); opacity: 0.4; }
.drum-digits.spin-up { animation: drum-up 0.18s ease-out; }
.drum-digits.spin-down { animation: drum-down 0.18s ease-out; }
.drum.hit .drum-face { box-shadow: inset 0 0 0 2px #2B303C, 0 0 0 3px var(--green), 0 0 16px var(--green); }
.drum.near .drum-face { box-shadow: inset 0 0 0 2px #2B303C, 0 0 0 3px #E5AE22, 0 0 14px #E5AE22; }
.drum.miss .drum-face { box-shadow: inset 0 0 0 2px #2B303C, 0 0 0 3px #5B6170; }
.drum.dup .drum-face, .drum.alarm .drum-face { box-shadow: inset 0 0 0 2px #2B303C, 0 0 0 3px var(--red), 0 0 14px var(--red); }
.card .vault-wheel {
    position: relative; display: block; width: 72px; height: 72px; margin: 14px auto 2px; padding: 0; border-radius: 50%;
    background: radial-gradient(circle, #2B303C 30%, #5C6577 32%, #3A4152 60%, #272C38 62%, #8C95A8 64%, #4D5567 72%);
    box-shadow: 0 4px 0 var(--sole); transition: transform 0.5s;
}
.card .vault-wheel:not(:disabled):active { transform: rotate(45deg); box-shadow: 0 4px 0 var(--sole); }
.vault-wheel.turning { animation: wheel-turn 0.8s linear infinite; }
.vault-wheel .spoke { position: absolute; left: 50%; top: 5px; bottom: 5px; width: 8px; margin-left: -4px; border-radius: 4px; background: linear-gradient(90deg, #8C95A8, #DDE3EF, #8C95A8); }
.vault-wheel .hub { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
                    background: radial-gradient(circle at 35% 35%, #FFE7A0, var(--gold) 55%, var(--gold-2)); }
.card .safe-input {
    display: block; width: 100%; max-width: 230px; margin: 10px auto 0; padding: 9px 10px; text-align: center; border-radius: 12px;
    background: #12151D; color: #F4F6FA; border: 1.5px solid #4D5567; box-shadow: inset 0 2px 6px #000;
    font: 900 20px var(--display); letter-spacing: 8px;
}
.card .safe-input:focus { border-color: var(--gold); }
.safe-input::placeholder { font: 700 13px var(--body); letter-spacing: 0; color: #8C95A8; }
.vault-hint { font-size: 11px; color: #AEB6C8; margin-top: 4px; }
.vault-status { margin-top: 12px; font-size: 13px; color: var(--muted); }
.safe-log { margin-top: 12px; padding: 10px; border-radius: 14px; background: rgba(13, 10, 24, 0.5); }
.safe-log-title { font: 800 11px var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.safe-log-row { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 4px 0; }
.safe-log-row .n { width: 18px; font-size: 11px; color: var(--muted); }
.safe-pin { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font: 900 15px var(--display); color: #fff; }
.safe-pin.hit { background: var(--green-2); }
.safe-pin.near { background: #C08A12; }
.safe-pin.miss { background: #4A4560; }
.safe-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.safe-legend .safe-pin { width: 12px; height: 12px; border-radius: 4px; }
@keyframes drum-up { from { transform: translateY(32px); } to { transform: none; } }
@keyframes drum-down { from { transform: translateY(-32px); } to { transform: none; } }
@keyframes wheel-turn { to { transform: rotate(360deg); } }
@keyframes vault-alarm { 0%, 100% { transform: none; filter: none; } 25% { transform: translateX(-4px); } 50% { filter: drop-shadow(0 0 14px var(--red)); } 75% { transform: translateX(4px); } }

/* ---------- прокрутка ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
    .tab.tab-enter, .tab.tab-enter .card, .subtab.swipe-from-right, .subtab.swipe-from-left { animation: none; }
    button, .tab.home-sheet, .home-scrim, .vault-door { transition: none; }
    .case-ic, .case-box.legend::after, .case-hero, .drum-digits, .vault-wheel, .vault.alarm .vault-door { animation: none !important; }
}

/* 🚀 Ракета (rocket.js): ночное небо, след, множитель по центру */
.rocket-sky { position: relative; height: 210px; border-radius: 14px; overflow: hidden;
    background: radial-gradient(ellipse at 20% 110%, #3B1D6E 0%, transparent 55%), linear-gradient(180deg, #050816 0%, #0E1A3A 60%, #1E2B5C 100%);
    border: 1px solid #2A3870; box-shadow: inset 0 0 40px rgba(0,0,0,0.6); }
.rocket-sky.boom { animation: rocket-shake 0.4s; background: radial-gradient(circle at 50% 50%, #7F1D1D 0%, #050816 70%); }
.rocket-stars { position: absolute; inset: -50%; background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #cbd5ff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent), radial-gradient(1px 1px at 80% 80%, #fff, transparent),
    radial-gradient(1px 1px at 45% 50%, #9fb4ff, transparent), radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent);
    background-size: 120px 120px; opacity: 0.8; animation: rocket-stars 6s linear infinite; }
.rocket-trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.rocket-trail polyline { fill: none; stroke: #F59E0B; stroke-width: 1.2; vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px #F97316); stroke-dasharray: 3 2; }
.rocket-ship { position: absolute; font-size: 34px; transform: translate(-50%, 50%) rotate(0deg); transition: none; z-index: 2;
    filter: drop-shadow(0 0 8px rgba(251,191,36,0.7)); }
.rocket-ship.fly { animation: rocket-wobble 0.25s ease-in-out infinite alternate; }
.rocket-mult { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-family: Rubik, sans-serif; font-weight: 900;
    font-size: 44px; text-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 18px rgba(255,255,255,0.25); z-index: 1; pointer-events: none; }
.rocket-auto { position: absolute; right: 8px; top: 8px; font-size: 11px; color: #FDE68A; background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 8px; }
@keyframes rocket-stars { from { transform: translate(0, 0); } to { transform: translate(-120px, 120px); } }
@keyframes rocket-wobble { from { transform: translate(-50%, 50%) rotate(-3deg); } to { transform: translate(-50%, 50%) rotate(3deg) scale(1.04); } }
@keyframes rocket-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* 🏞️ Место битвы босса (work.js → bossSceneHtml): небо, силуэт вдали, пол, предметы, частицы. Арена из косметики — свой пейзаж */
.boss-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.boss-arena .boss-avatar { position: relative; z-index: 2; }
.card .boss-arena::before { z-index: 1; }
.bs-far { position: absolute; left: 0; bottom: 30px; width: 100%; height: 70px; }
.bs-floor { position: absolute; left: -5%; right: -5%; bottom: 0; height: 36px; border-radius: 50% 50% 0 0 / 16px 16px 0 0; }
.bs-prop { position: absolute; bottom: 10px; font-size: 30px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6)); opacity: 0.95; }
.bs-prop.left { left: 6%; } .bs-prop.right { right: 6%; }
.bs-moon { position: absolute; top: 10px; right: 14%; font-size: 26px; filter: drop-shadow(0 0 14px rgba(255, 240, 200, 0.7)); }
.bs-aurora { position: absolute; left: -20%; right: -20%; top: -10%; height: 60%; opacity: 0.45; filter: blur(8px);
    background: linear-gradient(100deg, transparent 10%, #2DD4BF 30%, #818CF8 50%, #34D399 70%, transparent 90%);
    animation: bs-aurora 8s ease-in-out infinite alternate; }
.bs-air { position: absolute; animation-iteration-count: infinite; animation-timing-function: linear; }
.bs-ember { bottom: 20px; width: 3px; height: 3px; border-radius: 50%; background: #FDBA74; box-shadow: 0 0 6px 2px rgba(249, 115, 22, 0.8); animation-name: bs-up; }
.bs-snow { top: -6px; width: 4px; height: 4px; border-radius: 50%; background: #F0F9FF; opacity: 0.85; animation-name: bs-down; }
.bs-coin { top: -20px; font-size: 13px; animation-name: bs-down; }
.bs-star { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation-name: bs-twinkle; animation-timing-function: ease-in-out; }
.bs-bat { top: 18%; font-size: 14px; animation-name: bs-bat; }
@keyframes bs-up { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(18px, -150px); opacity: 0; } }
@keyframes bs-down { from { transform: translate(0, 0); } to { transform: translate(-14px, 190px); } }
@keyframes bs-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes bs-bat { 0% { transform: translate(-60px, 0) scale(0.8); } 50% { transform: translate(60px, -18px) scale(1); } 100% { transform: translate(180px, 6px) scale(0.8); } }
@keyframes bs-aurora { from { transform: translateX(-8%) skewX(-6deg); } to { transform: translateX(8%) skewX(6deg); } }
@media (prefers-reduced-motion: reduce) { .bs-air, .bs-aurora { animation: none !important; } }.boss-arena.mini { height: 120px; margin: 0 0 8px; }
.boss-arena.mini .boss-avatar { font-size: 62px; }
/* 🐉 Живой босс (work.js → bossLifeHtml): одна «жизнь» на цикл — оглядка, разворот, прыжок, рык, выпад. Все части — по одним часам */
.boss-arena .boss-avatar { animation: boss-breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
.boss-body { display: inline-block; transform-origin: 50% 100%; animation: boss-life 10s infinite; animation-timing-function: ease-in-out; }
.boss-face { display: inline-block; }
.boss-shadow { position: absolute; left: 50%; bottom: 14px; width: 110px; height: 18px; margin-left: -55px; border-radius: 50%; z-index: 1;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.75), transparent 70%); animation: boss-shadow-life 10s infinite ease-in-out; }
.boss-arena.mini .boss-shadow { width: 76px; margin-left: -38px; bottom: 10px; }
.boss-aura { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 200, 120, 0.22), transparent 65%); animation: boss-aura 3s ease-in-out infinite; }
.boss-aura.rage { background: radial-gradient(circle, rgba(239, 68, 68, 0.5), transparent 65%); animation-duration: 1s; }
.boss-roar { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; z-index: 3; pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 18px rgba(255, 200, 120, 0.6), inset 0 0 18px rgba(255, 200, 120, 0.4);
    opacity: 0; animation: boss-roar-life 10s infinite linear; }
.boss-roar-text { position: absolute; left: 0; right: 0; top: 8%; text-align: center; z-index: 4; pointer-events: none; opacity: 0;
    font: 900 24px var(--display, Rubik, sans-serif); color: #FDE68A; letter-spacing: 2px; text-shadow: 0 3px 0 #000, 0 0 14px rgba(249, 115, 22, 0.9);
    animation: boss-roar-text-life 10s infinite ease-out; }
.boss-arena.mini .boss-roar-text { font-size: 17px; }
.boss-claws { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; z-index: 3; pointer-events: none; opacity: 0;
    animation: boss-claws-life 10s infinite linear; }
.boss-claws i { position: absolute; top: 0; width: 5px; height: 90px; border-radius: 3px; transform: rotate(28deg);
    background: linear-gradient(180deg, transparent, #FCA5A5 30%, #DC2626 60%, transparent); box-shadow: 0 0 8px rgba(239, 68, 68, 0.9); }
.boss-claws i:nth-child(1) { left: 22px; } .boss-claws i:nth-child(2) { left: 42px; } .boss-claws i:nth-child(3) { left: 62px; }
.boss-scene.life { animation: boss-scene-life 10s infinite linear; }
@keyframes boss-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(1.04, 0.97); } }
@keyframes boss-aura { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes boss-life {
    0%, 16% { transform: translate(0, 0) rotate(0) scale(1, 1); }
    20%, 24% { transform: translate(-12px, 0) rotate(-6deg) scale(1, 1); }                 /* оглядывается */
    28%, 33% { transform: translate(10px, 0) rotate(4deg) scale(-1, 1); }                  /* разворот в другую сторону */
    37% { transform: translate(0, 0) rotate(0) scale(1, 1); }
    42% { transform: translate(0, 4px) rotate(0) scale(1.14, 0.8); }                      /* присел */
    47% { transform: translate(0, -38px) rotate(0) scale(0.9, 1.14); }                    /* прыжок */
    51% { transform: translate(0, 0) rotate(0) scale(1.2, 0.78); }                        /* приземлился */
    55%, 60% { transform: translate(0, 0) rotate(0) scale(1, 1); }
    63% { transform: translate(0, -4px) rotate(-4deg) scale(0.93, 1.07); }                /* набирает воздух */
    66% { transform: translate(0, 0) rotate(3deg) scale(1.28, 1.28); }                    /* РЫК */
    68% { transform: translate(0, 0) rotate(-3deg) scale(1.3, 1.3); }
    70% { transform: translate(0, 0) rotate(3deg) scale(1.3, 1.3); }
    72% { transform: translate(0, 0) rotate(-3deg) scale(1.3, 1.3); }
    74% { transform: translate(0, 0) rotate(2deg) scale(1.26, 1.26); }
    78%, 82% { transform: translate(0, 0) rotate(0) scale(1, 1); }
    85% { transform: translate(0, -6px) rotate(0) scale(0.92, 0.92); }                   /* замах */
    88% { transform: translate(0, 14px) rotate(0) scale(1.5, 1.5); }                     /* выпад на игрока */
    92%, 100% { transform: translate(0, 0) rotate(0) scale(1, 1); } }
@keyframes boss-shadow-life {
    0%, 37%, 55%, 82%, 92%, 100% { transform: scale(1); opacity: 0.8; }
    42% { transform: scale(1.2); opacity: 0.9; } 47% { transform: scale(0.5); opacity: 0.3; } 51% { transform: scale(1.3); opacity: 1; }
    66%, 74% { transform: scale(1.25); } 88% { transform: scale(1.45); opacity: 1; } }
@keyframes boss-roar-life { 0%, 65% { transform: scale(0.3); opacity: 0; } 66% { transform: scale(0.5); opacity: 1; } 71% { transform: scale(1.8); opacity: 0.6; }
    71.1% { transform: scale(0.5); opacity: 0.9; } 76% { transform: scale(2.3); opacity: 0; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes boss-roar-text-life { 0%, 65% { transform: scale(0.4); opacity: 0; } 67% { transform: scale(1.25); opacity: 1; } 69% { transform: scale(1) rotate(-2deg); }
    71% { transform: scale(1.05) rotate(2deg); } 74% { transform: scale(1); opacity: 1; } 78%, 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes boss-claws-life { 0%, 87% { transform: scale(0.6) translate(-10px, -10px); opacity: 0; } 88.5% { transform: scale(1.1) translate(0, 0); opacity: 1; }
    93% { transform: scale(1.1); opacity: 0.8; } 97%, 100% { transform: scale(1.1); opacity: 0; } }
@keyframes boss-scene-life { 0%, 50%, 53%, 65%, 76%, 87%, 90%, 100% { transform: scale(1.05) translate(0, 0); }
    51% { transform: scale(1.05) translate(0, 4px); } 52% { transform: scale(1.05) translate(0, -2px); }
    67%, 71%, 75% { transform: scale(1.05) translate(-3px, 2px); } 69%, 73% { transform: scale(1.05) translate(3px, -2px); }
    88% { transform: scale(1.08) translate(0, 3px); } }
@media (prefers-reduced-motion: reduce) { .boss-body, .boss-shadow, .boss-roar, .boss-roar-text, .boss-claws, .boss-scene.life, .boss-aura { animation: none !important; } }
.boss-arena .boss-avatar.defeated { animation: none; }

/* 🛡️ Фаза «Щит» у босса: голубой пузырь, при пробитии серией — трескается */
.boss-shield { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -78px 0 0 -75px; border-radius: 50%; z-index: 3; pointer-events: none;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.05) 55%, rgba(147, 197, 253, 0.35) 72%, rgba(191, 219, 254, 0.75) 75%, transparent 77%);
    box-shadow: 0 0 22px rgba(96, 165, 250, 0.55); animation: boss-shield 2.4s ease-in-out infinite; }
.boss-shield.broken { animation: boss-shield-break 0.6s ease-out forwards; }
.boss-arena.mini .boss-shield { width: 110px; height: 110px; margin: -58px 0 0 -55px; }
@keyframes boss-shield { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes boss-shield-break { 0% { transform: scale(1); opacity: 1; filter: brightness(2); } 100% { transform: scale(1.35); opacity: 0; } }
/* ---------- 🏆 рейтинг (31.10): разделы, пьедестал, строки, своё место ---------- */
.lb-groups, .lb-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; scrollbar-width: none; }
.lb-groups::-webkit-scrollbar, .lb-cats::-webkit-scrollbar { display: none; }
button.lb-group { flex: 1 0 auto; padding: 9px 12px; border: 0; border-radius: 14px; cursor: pointer; white-space: nowrap;
    font: 800 13px var(--display); color: var(--text); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px var(--edge), 0 3px 0 var(--sole); }
button.lb-group.on { background: linear-gradient(180deg, #FFDC74, var(--gold)); color: #3A2600; box-shadow: 0 3px 0 var(--gold-2); }
button.lb-cat { padding: 6px 11px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; font: 800 12px var(--body);
    color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1.5px var(--edge); }
button.lb-cat.on { color: #FFF; background: rgba(247, 197, 72, 0.16); box-shadow: inset 0 0 0 1.5px var(--gold); }
.lb-card { padding-bottom: 8px; }
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 14px 0 6px; }
.lb-col { flex: 1; min-width: 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.lb-col.me .lb-pname { color: var(--gold); }
.lb-crown { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.lb-col:nth-child(2) .lb-crown { font-size: 26px; animation: lb-crown 2.4s ease-in-out infinite; }
@keyframes lb-crown { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
.lb-pname { max-width: 100%; margin-top: 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pval { font: 800 13px var(--display); color: var(--gold); margin: 1px 0 5px; white-space: nowrap; }
.lb-step { width: 100%; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font: 900 20px var(--display); color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 3px 0 var(--sole); }
.lb-step-1 { background: linear-gradient(180deg, #FFD966, #C8901A); color: #4A2E00; }
.lb-step-2 { background: linear-gradient(180deg, #D7DEE8, #8A96A8); color: #2B3240; }
.lb-step-3 { background: linear-gradient(180deg, #E6A46B, #9C5A2A); color: #3E1F08; }
.lb-list { margin-top: 6px; border-top: 1px solid var(--line); }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.lb-row.me { background: rgba(79, 168, 247, 0.12); border-radius: 10px; }
.lb-place { width: 24px; text-align: center; font: 800 13px var(--display); color: var(--muted); flex: none; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.lb-val { font: 800 13px var(--display); color: var(--gold); white-space: nowrap; }
.lb-unit { font-size: 10px; color: var(--muted); font-weight: 700; }
.lb-me { position: sticky; bottom: 8px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px;
    padding: 10px 14px; border-radius: 16px; background: linear-gradient(180deg, #2B3A7A, #1C2554); box-shadow: inset 0 0 0 1.5px #4F5FB0, 0 4px 0 var(--sole); }
/* ---------- 🎓 Наставник (coach.js): подсветка, заглушки вокруг, окно подсказки ---------- */
.coach-block { position: fixed; z-index: 4000; background: transparent; }
#coach-spot { position: fixed; z-index: 4001; pointer-events: none; border-radius: 14px; border: 2.5px solid var(--gold);
    box-shadow: 0 0 0 9999px rgba(5, 4, 12, 0.74), 0 0 20px rgba(247, 197, 72, 0.7); transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
#coach-spot.pulse { animation: coach-pulse 1.3s ease-in-out infinite; }
@keyframes coach-pulse { 0%, 100% { border-color: var(--gold); } 50% { border-color: #FFF3C4; box-shadow: 0 0 0 9999px rgba(5, 4, 12, 0.74), 0 0 34px rgba(247, 197, 72, 1); } }
#coach-pop { position: fixed; z-index: 4002; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 420px; transition: top 0.25s; }
.coach-box { padding: 14px; border-radius: 16px; background: linear-gradient(180deg, var(--surface), var(--surface-2));
    box-shadow: inset 0 0 0 1.5px var(--gold), 0 6px 0 var(--sole), 0 12px 30px rgba(0, 0, 0, 0.6); }
.coach-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.coach-head b { color: var(--gold); font: 800 16px var(--display); }
.coach-head span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.coach-text { font-size: 14px; line-height: 1.45; color: var(--text); }
.coach-hint { margin-top: 8px; font-size: 12px; color: #FDE68A; animation: coach-hint 1.2s ease-in-out infinite; }
@keyframes coach-hint { 50% { opacity: 0.45; } }
.coach-btns { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
button.coach-skip { flex: 1; margin: 0; padding: 9px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--muted);
    font: 800 12px var(--body); box-shadow: inset 0 0 0 1.5px var(--edge); cursor: pointer; }
button.coach-next { flex: 1; margin: 0; padding: 10px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #FFDC74, var(--gold));
    color: #3A2600; font: 800 14px var(--display); box-shadow: 0 3px 0 var(--gold-2); cursor: pointer; }
body.coaching #tutorial-bar { display: none; }
body.coach-paused #coach-spot, body.coach-paused #coach-pop, body.coach-paused .coach-block { display: none; }
/* 💣 Мины и ↕️ Хай-лоу (casino_solo.js) */
.mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 320px; margin: 0 auto; }
.mn-cell { aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 10px; font-size: 22px; cursor: pointer;
    background: linear-gradient(180deg, #4B5563, #374151); box-shadow: 0 3px 0 #1F2937; transition: transform 0.1s; }
.mn-cell:not([disabled]):active { transform: translateY(2px); box-shadow: 0 1px 0 #1F2937; }
.mn-cell.open { background: linear-gradient(180deg, #10B981, #047857); box-shadow: 0 3px 0 #064E3B; animation: mn-pop 0.25s; }
.mn-cell.mine { background: #3F1D1D; box-shadow: none; opacity: 0.85; }
.mn-cell.boom { background: radial-gradient(circle, #F87171, #7F1D1D); box-shadow: 0 0 14px #EF4444; animation: mn-pop 0.3s; }
.mn-cell.dim { opacity: 0.35; }
.mn-cell[disabled] { cursor: default; }
@keyframes mn-pop { 0% { transform: scale(0.7); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.hl-card { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 54px; border-radius: 6px;
    background: #F9FAFB; font-weight: 900; font-size: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.hl-card.big { width: 92px; height: 130px; border-radius: 12px; font-size: 34px; box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 0 0 3px #FFD700; animation: mn-pop 0.25s; }
.hl-card.back { background: repeating-linear-gradient(45deg,#1E3A8A,#1E3A8A 6px,#2563EB 6px,#2563EB 12px); }
.hl-hist { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.hl-mini .hl-card { width: 26px; height: 36px; font-size: 10px; }
.hl-mini.lose .hl-card { box-shadow: 0 0 0 2px #EF4444; }
.hl-mini.skip .hl-card { opacity: 0.45; }
.hl-mini.hi .hl-card, .hl-mini.lo .hl-card { box-shadow: 0 0 0 2px #10B981; }
.hl-btn { flex: 1; margin: 0; padding: 10px 4px; border: 0; border-radius: 10px; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.hl-btn span { font-size: 12px; opacity: 0.9; }
.hl-btn.hi { background: linear-gradient(180deg, #3B82F6, #1D4ED8); box-shadow: 0 3px 0 #1E3A8A; }
.hl-btn.lo { background: linear-gradient(180deg, #F59E0B, #B45309); box-shadow: 0 3px 0 #78350F; }

/* 💎 Переливающийся ник (nickHtml, цвет «grad:…») */
.nick-grad { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: nick-rainbow 4s linear infinite; font-weight: 800; }
/* 💎 Живая аура платных аватаров и гербов (avatarCircle, PREMIUM_AURA в profile.js) */
.av-aura::before, .av-aura::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; }
.av-aura::before { background: var(--aura); animation: av-spin 3s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.av-aura::after { box-shadow: 0 0 12px 1px var(--aura-glow); animation: av-pulse 2.2s ease-in-out infinite; }
@keyframes av-spin { to { transform: rotate(360deg); } }
@keyframes av-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.av-fire    { --aura: conic-gradient(#FDE047, #F97316, #EF4444, #F97316, #FDE047); --aura-glow: #F97316; }
.av-gold    { --aura: conic-gradient(#FFF7CC, #FBBF24, #B45309, #FBBF24, #FFF7CC); --aura-glow: #FBBF24; }
.av-neon    { --aura: conic-gradient(#22D3EE, #E879F9, #22D3EE, #E879F9, #22D3EE); --aura-glow: #22D3EE; }
.av-magic   { --aura: conic-gradient(#A855F7, #6366F1, #EC4899, #A855F7); --aura-glow: #A855F7; }
.av-holy    { --aura: conic-gradient(#FFFFFF, #FDE68A, #FFFFFF, #FDE68A, #FFFFFF); --aura-glow: #FDE68A; }
.av-hell    { --aura: conic-gradient(#7F1D1D, #EF4444, #111111, #EF4444, #7F1D1D); --aura-glow: #DC2626; }
.av-rainbow { --aura: conic-gradient(#F87171, #FBBF24, #34D399, #38BDF8, #A78BFA, #F472B6, #F87171); --aura-glow: #F472B6; }
.av-ice     { --aura: conic-gradient(#E0F2FE, #7DD3FC, #FFFFFF, #38BDF8, #E0F2FE); --aura-glow: #7DD3FC; }
.av-jungle  { --aura: conic-gradient(#4ADE80, #166534, #A3E635, #166534, #4ADE80); --aura-glow: #4ADE80; }
/* 08.11: новые ауры */
.av-storm   { --aura: conic-gradient(#1E3A8A, #FDE047, #1E3A8A, #93C5FD, #1E3A8A); --aura-glow: #FDE047; }
.av-storm::after { animation: av-flash 2.6s steps(1) infinite; }
@keyframes av-flash { 0%, 100% { opacity: 0.3; } 8% { opacity: 1; } 10% { opacity: 0.3; } 14% { opacity: 1; } 18% { opacity: 0.4; } }
.av-toxic   { --aura: conic-gradient(#A3E635, #15803D, #D9F99D, #15803D, #A3E635); --aura-glow: #84CC16; }
.av-cosmic  { --aura: conic-gradient(#1E1B4B, #7C3AED, #22D3EE, #F0ABFC, #1E1B4B); --aura-glow: #8B5CF6; }
.av-cosmic::before { animation-duration: 6s; }
.av-sakura  { --aura: conic-gradient(#FBCFE8, #F472B6, #FFF1F2, #F9A8D4, #FBCFE8); --aura-glow: #F9A8D4; }
.av-shadow  { --aura: conic-gradient(#000000, #4B5563, #111827, #6B21A8, #000000); --aura-glow: #6B21A8; }
.av-blood   { --aura: conic-gradient(#450A0A, #DC2626, #7F1D1D, #F87171, #450A0A); --aura-glow: #B91C1C; }
.av-blood::after { animation: av-pulse 1.1s ease-in-out infinite; }

/* 💎 Живые цвета ника («fx:ключ» в COSMETICS["color"], nickHtml) — у каждого свой эффект */
.nick-fx { font-weight: 800; }
.nfx-aurora, .nfx-sunset, .nfx-flame, .nfx-ocean, .nfx-sakura, .nfx-frost, .nfx-galaxy, .nfx-royal_gold {
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nfx-aurora { background-image: linear-gradient(90deg, #34D399, #22D3EE, #A78BFA, #34D399); background-size: 300% 100%;
    animation: nfx-slide 7s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #34D39988); }
.nfx-sunset { background-image: linear-gradient(180deg, #FDE68A, #FB923C, #F43F5E, #A855F7, #FDE68A); background-size: 100% 40px;
    animation: nfx-down 3s linear infinite; }
.nfx-flame { background-image: linear-gradient(0deg, #FDE047 15%, #F97316 50%, #DC2626 90%); animation: nfx-flicker 1.3s infinite; }
.nfx-ocean { background-image: linear-gradient(180deg, #BAE6FD 0%, #38BDF8 35%, #1D4ED8 70%, #BAE6FD 100%); background-size: 100% 200%;
    animation: nfx-wave 2.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #3B82F6aa); }
.nfx-sakura { background-image: linear-gradient(110deg, transparent 38%, #FFFFFF 50%, transparent 62%), linear-gradient(90deg, #F9A8D4, #F472B6, #FBCFE8);
    background-size: 250% 100%, 100% 100%; animation: nfx-shine 3.6s ease-in-out infinite; }
.nfx-frost { background-image: linear-gradient(110deg, transparent 40%, #FFFFFF 50%, transparent 60%), linear-gradient(180deg, #F0F9FF, #7DD3FC);
    background-size: 250% 100%, 100% 100%; animation: nfx-shine 1.8s linear infinite; filter: drop-shadow(0 0 3px #BAE6FD); }
.nfx-royal_gold { background-image: linear-gradient(110deg, transparent 40%, #FFFBEB 50%, transparent 60%),
    linear-gradient(180deg, #FEF3C7 0%, #FBBF24 45%, #B45309 55%, #FDE68A 100%);
    background-size: 250% 100%, 100% 100%; animation: nfx-shine 2.6s ease-in-out infinite; filter: drop-shadow(0 1px 0 #78350F); }
.nfx-galaxy { background-image: radial-gradient(1.2px 1.2px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, #FDE68A, transparent), linear-gradient(90deg, #818CF8, #C084FC, #F472B6, #818CF8);
    background-size: 22px 16px, 30px 18px, 26px 14px, 300% 100%; animation: nfx-space 9s linear infinite; filter: drop-shadow(0 0 3px #A855F7); }
.nfx-ghost { color: #F3F4F6; animation: nfx-ghost 3.2s ease-in-out infinite; }
.nfx-neon { color: #FDF4FF; text-shadow: 0 0 3px #F0ABFC, 0 0 8px #E879F9, 0 0 14px #C026D3; animation: nfx-neon 4s infinite; }
.nfx-glitch { color: #FFFFFF; text-shadow: 1px 0 #F43F5E, -1px 0 #22D3EE; animation: nfx-glitch 2.4s steps(1) infinite; display: inline-block; }
/* 🎃 праздничные (03.11): кровавая луна — кровь стекает по буквам + капля; тыква — свеча в фонаре; яд — кислота ползёт вверх + пузырь */
.nfx-bloodmoon, .nfx-pumpkin, .nfx-toxic { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; position: relative; }
.nfx-bloodmoon { background-image: linear-gradient(180deg, #FF8A8A 0%, #E8384F 22%, #7F0716 48%, #C1121F 70%, #FF8A8A 100%); background-size: 100% 34px;
    animation: nfx-down 2.8s linear infinite, nfx-blood 2.2s ease-in-out infinite; }
.nfx-bloodmoon::after { content: ''; position: absolute; left: 62%; top: 72%; width: 3px; height: 5px; border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    background: #B3001B; box-shadow: 0 0 3px #FF2D45; animation: nfx-drip 3.4s ease-in infinite; }
.nfx-pumpkin { background-image: radial-gradient(ellipse at 50% 85%, #FFF3B0 0%, #FDBA3C 30%, #F97316 60%, #9A3412 100%); background-size: 100% 100%;
    animation: nfx-candle 1.6s infinite; }
.nfx-toxic { background-image: linear-gradient(0deg, #1A4D0F 0%, #5FD12E 30%, #C6FF5E 50%, #5FD12E 70%, #1A4D0F 100%); background-size: 100% 30px;
    animation: nfx-up 2.4s linear infinite, nfx-toxglow 1.8s ease-in-out infinite; }
.nfx-toxic::after { content: ''; position: absolute; left: 30%; bottom: 10%; width: 4px; height: 4px; border-radius: 50%;
    background: #C6FF5E; box-shadow: 0 0 4px #8BE04E; animation: nfx-bubble 2.6s ease-out infinite; }
@keyframes nfx-up { from { background-position: 0 0; } to { background-position: 0 -30px; } }
@keyframes nfx-blood { 0%, 100% { filter: drop-shadow(0 0 2px #7F0716); } 50% { filter: drop-shadow(0 0 6px #E8384F) drop-shadow(0 1px 0 #3B0008); } }
@keyframes nfx-drip { 0%, 35% { transform: translateY(0) scaleY(0.4); opacity: 0; } 45% { transform: translateY(0) scaleY(1); opacity: 1; }
    90% { transform: translateY(12px) scaleY(1.4); opacity: 0.9; } 100% { transform: translateY(15px); opacity: 0; } }
@keyframes nfx-candle { 0%, 100% { filter: drop-shadow(0 0 3px #F97316) brightness(1); } 20% { filter: drop-shadow(0 0 7px #FDBA3C) brightness(1.25); }
    45% { filter: drop-shadow(0 0 2px #C2410C) brightness(0.9); } 70% { filter: drop-shadow(0 0 6px #FB923C) brightness(1.15); } }
@keyframes nfx-toxglow { 0%, 100% { filter: drop-shadow(0 0 2px #3F9E1A); } 50% { filter: drop-shadow(0 0 7px #8BE04E); } }
@keyframes nfx-bubble { 0% { transform: translateY(0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.2); opacity: 0; } }
@keyframes nfx-slide { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes nfx-down { from { background-position: 0 0; } to { background-position: 0 40px; } }
@keyframes nfx-wave { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes nfx-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes nfx-space { from { background-position: 0 0, 0 0, 0 0, 0% 0; } to { background-position: 44px 16px, -60px 18px, 52px -14px, 300% 0; } }
@keyframes nfx-flicker { 0%, 100% { filter: drop-shadow(0 0 3px #F97316) brightness(1); } 25% { filter: drop-shadow(0 -2px 6px #FB923C) brightness(1.2); }
    55% { filter: drop-shadow(0 0 2px #DC2626) brightness(0.92); } 80% { filter: drop-shadow(0 -1px 5px #FDBA74) brightness(1.1); } }
@keyframes nfx-ghost { 0%, 100% { opacity: 1; text-shadow: 0 0 8px #FFFFFFAA; } 50% { opacity: 0.3; text-shadow: 0 0 2px #FFFFFF44; } }
@keyframes nfx-neon { 0%, 88%, 92%, 96%, 100% { opacity: 1; } 90%, 94% { opacity: 0.35; text-shadow: none; } }
@keyframes nfx-glitch { 0%, 100% { transform: none; text-shadow: 1px 0 #F43F5E, -1px 0 #22D3EE; }
    82% { transform: translateX(1px); text-shadow: -2px 0 #F43F5E, 2px 0 #22D3EE; } 86% { transform: translateX(-1px) skewX(-8deg); text-shadow: 2px 1px #F43F5E, -2px -1px #22D3EE; }
    90% { transform: none; text-shadow: 1px 0 #F43F5E, -1px 0 #22D3EE; } }

/* 💎 Живые значки у ника (COSMETICS["badge"] со словарём, badgeHtml в progress.js) */
.nb { display: inline-block; position: relative; line-height: 1; vertical-align: baseline; }
.nb::after { pointer-events: none; }
.nb-fire { animation: nb-flicker 1.2s infinite; }
.nb-fire::after { content: ''; position: absolute; left: 50%; top: 15%; width: 3px; height: 3px; border-radius: 50%;
    background: #FDE047; box-shadow: 0 0 4px #F97316; animation: nb-spark 1.4s ease-out infinite; }
.nb-spin { animation: nb-spin 3s linear infinite; filter: drop-shadow(0 0 3px #67E8F9); }
.nb-crown { animation: nb-sway 2.4s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 0 4px #FBBF24); }
.nb-storm { animation: nb-storm 3s infinite; }
.nb-beat { animation: nb-beat 1.1s ease-in-out infinite; filter: drop-shadow(0 0 3px #F43F5E); }
.nb-portal { animation: nb-spin2d 4s linear infinite, nb-portal 2s ease-in-out infinite alternate; }
.nb-orbit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%;
    background: #E0F2FE; box-shadow: 0 0 4px #7DD3FC; animation: nb-orbit 2.2s linear infinite; }
.nb-dragon { animation: nb-sway 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.nb-dragon::after { content: ''; position: absolute; left: 70%; top: 30%; width: 8px; height: 6px; border-radius: 50%;
    background: radial-gradient(#FDE047, #F97316 55%, transparent 70%); animation: nb-puff 2.8s ease-out infinite; }
.nb-flap { animation: nb-flap 0.8s ease-in-out infinite; }
/* 🌹 Цветущая роза (08.11): покачивается и светится, вниз слетает лепесток */
.nb-bloom { animation: nb-bloom 2.6s ease-in-out infinite; }
.nb-bloom::after { content: ''; position: absolute; left: 55%; top: 35%; width: 5px; height: 4px; border-radius: 60% 0 60% 0;
    background: #F43F5E; box-shadow: 0 0 3px #FB7185; animation: nb-petal 2.6s ease-in infinite; }
@keyframes nb-bloom { 0%, 100% { transform: rotate(-6deg) scale(1); filter: drop-shadow(0 0 2px #F43F5E); }
    50% { transform: rotate(6deg) scale(1.1); filter: drop-shadow(0 0 6px #FB7185); } }
@keyframes nb-petal { 0%, 40% { transform: translate(0, 0) rotate(0); opacity: 0; } 50% { opacity: 1; }
    100% { transform: translate(7px, 14px) rotate(160deg); opacity: 0; } }
.nb-karma { animation: nb-karma 2.4s ease-in-out infinite; }
.nb-karma::after { content: ''; position: absolute; left: 20%; bottom: 60%; width: 60%; height: 6px; border-radius: 50%;
    background: radial-gradient(#4ADE8088, transparent 70%); filter: blur(1px); animation: nb-smoke 2.4s ease-out infinite; }
.nb-shoot { animation: nb-shoot 3.5s ease-in-out infinite; filter: drop-shadow(0 0 4px #FDE68A); }
.nb-grow { animation: nb-bob 2.6s ease-in-out infinite; }
.nb-grow.nb-max { filter: drop-shadow(0 0 4px #FBBF24); }
.nb-cycle { display: inline-grid; }
.nb-cycle > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.35s; }
.nb-cycle > span.on { opacity: 1; }
.nb-no { font-size: 0.55em; font-weight: 800; color: #FDE68A; margin-left: 1px; }
/* 🎃 праздничные значки (03.11) */
.nb-pumpkin { animation: nfx-candle 1.6s infinite; }
.nb-bat { animation: nb-flap 0.5s ease-in-out infinite, nb-bob 1.4s ease-in-out infinite; }
.nb-spider { animation: nb-dangle 2.6s ease-in-out infinite; transform-origin: 50% -60%; }
.nb-web { animation: nb-sway 3s ease-in-out infinite; filter: drop-shadow(0 0 2px #E5E7EB); }
.nb-skull { animation: nb-skull 2.8s ease-in-out infinite; }
@keyframes nb-dangle { 0%, 100% { transform: translateY(-2px) rotate(-6deg); } 50% { transform: translateY(2px) rotate(6deg); } }
@keyframes nb-skull { 0%, 70%, 100% { transform: none; filter: drop-shadow(0 0 2px #A855F7); } 76% { transform: rotate(-10deg) scale(1.1); filter: drop-shadow(0 0 6px #C084FC); }
    84% { transform: rotate(8deg) scale(1.1); } 92% { transform: none; } }
@keyframes nb-flicker { 0%, 100% { filter: drop-shadow(0 0 3px #F97316); } 40% { filter: drop-shadow(0 -2px 6px #FB923C) brightness(1.15); } 70% { filter: drop-shadow(0 0 2px #DC2626) brightness(0.92); } }
@keyframes nb-spark { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(0, -11px); opacity: 0; } }
@keyframes nb-spin { to { transform: rotateY(360deg); } }
@keyframes nb-spin2d { to { transform: rotate(360deg); } }
@keyframes nb-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes nb-storm { 0%, 80%, 100% { filter: drop-shadow(0 0 2px #60A5FA); transform: none; }
    83% { filter: drop-shadow(0 0 9px #BFDBFE) brightness(1.8); transform: translateX(1px); } 86% { filter: drop-shadow(0 0 2px #60A5FA); transform: translateX(-1px); }
    89% { filter: drop-shadow(0 0 9px #BFDBFE) brightness(1.8); transform: none; } }
@keyframes nb-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@keyframes nb-portal { from { filter: drop-shadow(0 0 2px #A855F7); } to { filter: drop-shadow(0 0 7px #C084FC); } }
@keyframes nb-orbit { from { transform: rotate(0deg) translateX(0.75em); } to { transform: rotate(360deg) translateX(0.75em); } }
@keyframes nb-puff { 0%, 55% { transform: scale(0.3); opacity: 0; } 65% { opacity: 1; } 100% { transform: translateX(10px) scale(1.4); opacity: 0; } }
@keyframes nb-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.45); } }
@keyframes nb-karma { 0%, 100% { filter: drop-shadow(0 0 2px #22C55E); } 50% { filter: drop-shadow(0 0 7px #4ADE80); } }
@keyframes nb-smoke { 0% { transform: translateY(4px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-8px) scale(1.4); opacity: 0; } }
@keyframes nb-shoot { 0%, 70%, 100% { transform: none; } 78% { transform: translate(3px, -3px) rotate(12deg); } 86% { transform: translate(-1px, 1px); } }
@keyframes nb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* 💎 Живые платные аватары (PREMIUM_LIVE в profile.js): движение смайлика + частицы в профиле */
.avl { display: inline-block; line-height: 1; transform-origin: 50% 70%; }
.avl-float  { animation: avl-float 2.6s ease-in-out infinite; }
.avl-drift  { animation: avl-drift 5s ease-in-out infinite; }
.avl-tilt   { animation: avl-tilt 3.2s ease-in-out infinite; }
.avl-wobble { animation: avl-wobble 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.avl-flap   { animation: avl-flap 0.9s ease-in-out infinite; }
.avl-breathe { animation: avl-breathe 2.8s ease-in-out infinite; }
.avl-chomp  { animation: avl-chomp 3s ease-in-out infinite; }
.avl-shake  { animation: avl-shake 3.5s infinite; }
.avl-bounce { animation: avl-bounce 1.8s cubic-bezier(.3,.7,.4,1) infinite; transform-origin: 50% 100%; }
/* 08.11: новые движения */
.avl-spin   { animation: avl-spin 7s linear infinite; transform-origin: 50% 50%; }
.avl-pulse  { animation: avl-pulse 1.2s ease-in-out infinite; transform-origin: 50% 50%; }
.avl-zap    { animation: avl-zap 2.4s steps(1) infinite; }
.avl-sway   { animation: avl-sway 3.4s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes avl-spin  { to { transform: rotate(360deg); } }
@keyframes avl-pulse { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 56% { transform: scale(1); } }
@keyframes avl-zap   { 0%, 100% { transform: none; filter: none; } 6% { transform: translate(-3%, 1%); filter: brightness(1.8) drop-shadow(0 0 4px #FDE047); }
    9% { transform: translate(3%, -1%); filter: none; } 12% { transform: none; filter: brightness(1.6); } 15% { filter: none; } }
@keyframes avl-sway  { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes avl-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@keyframes avl-drift  { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(0, -8%) rotate(6deg); } }
@keyframes avl-tilt   { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg) scale(1.05); } 85% { transform: rotate(8deg); } }
@keyframes avl-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes avl-flap   { 0%, 100% { transform: scaleX(1) translateY(0); } 50% { transform: scaleX(0.7) translateY(-5%); } }
@keyframes avl-breathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.15); } }
@keyframes avl-chomp  { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg) scale(1.08); } 82% { transform: rotate(4deg); } 88% { transform: rotate(-6deg) scale(1.05); } }
@keyframes avl-shake  { 0%, 78%, 100% { transform: translate(0, 0); } 80% { transform: translate(-4%, 0) rotate(-4deg); } 84% { transform: translate(4%, 0) rotate(4deg); }
    88% { transform: translate(-3%, 0); } 92% { transform: translate(3%, 0); } }
@keyframes avl-bounce { 0%, 100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(0) scaleY(0.9) scaleX(1.06); } 45% { transform: translateY(-12%) scaleY(1.04); } 70% { transform: translateY(0); } }
.avl-spark { position: absolute; bottom: 10%; pointer-events: none; opacity: 0; animation: avl-spark 2.7s ease-out infinite; }
@keyframes avl-spark { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-180%) scale(1.1); } }

/* 🎁 Коробка в слотах: карточка приза (casino.js slotPrizeShow) */
.slot-box-card { position:relative; margin:0 0 10px; padding:12px 10px; border-radius:14px; text-align:center; overflow:hidden;
    background:radial-gradient(circle at 50% 30%, rgba(244,114,182,0.28), rgba(17,24,39,0.95) 70%); border:2px solid #F472B6;
    box-shadow:0 0 18px rgba(244,114,182,0.45); animation:sbx-in .45s cubic-bezier(.2,1.4,.4,1); }
.slot-box-card.rare { border-color:#FFD54A; background:radial-gradient(circle at 50% 30%, rgba(255,213,74,0.35), rgba(17,24,39,0.95) 70%);
    box-shadow:0 0 26px rgba(255,213,74,0.7); }
.slot-box-name { font-size:12px; font-weight:800; color:#F9A8D4; letter-spacing:.5px; }
.slot-box-card.rare .slot-box-name { color:#FFD54A; }
.slot-box-icon { font-size:46px; line-height:1.1; margin:4px 0; animation:sbx-pop .7s .15s both cubic-bezier(.2,1.6,.4,1); }
.slot-box-prize { font-size:14px; font-weight:800; color:#fff; }
@keyframes sbx-in { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@keyframes sbx-pop { 0% { transform:translateY(30px) scale(.3) rotate(-20deg); opacity:0; } 100% { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .slot-box-card, .slot-box-icon { animation:none; } }