/* ============================================================
   MICRAFFIN — СЛОЙ ЭФФЕКТОВ (красивый режим + смена языка)
   ============================================================
   Всё рисуется в #mfFxLayer поверх страницы. Слой не перехватывает
   события, поэтому кликам, вводу и выделению текста не мешает.
   Подключается всем ролям: в строгой теме эффекты те же, но сдержаннее
   (см. блок «строгая тема» внизу файла).
   ============================================================ */

.mf-fx-layer {
    position: fixed;
    inset: 0;
    z-index: 99998;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* ============================================================
   ВЗРЫВ (переключение на арабский)
   ============================================================ */

.mf-fx-flash {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 235, 0.95) 0%,
        rgba(255, 180, 58, 0.7) 35%,
        rgba(255, 90, 40, 0) 70%);
    animation: mf-fx-flash 0.9s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

@keyframes mf-fx-flash {
    0%   { transform: scale(1);   opacity: 1; }
    45%  { transform: scale(46);  opacity: 0.85; }
    100% { transform: scale(70);  opacity: 0; }
}

.mf-fx-shockwave {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 190, 90, 0.75);
    animation: mf-fx-shockwave 1.1s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

@keyframes mf-fx-shockwave {
    0%   { transform: scale(0.4); opacity: 0.9; border-width: 3px; }
    100% { transform: scale(34);  opacity: 0;   border-width: 0.5px; }
}

.mf-fx-shard {
    position: absolute;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 12px currentColor;
    animation: mf-fx-shard 1.6s cubic-bezier(0.12, 0.75, 0.25, 1) forwards;
}

@keyframes mf-fx-shard {
    0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        opacity: 0;
    }
    12% { opacity: 1; }
    100% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                   scale(1) rotate(var(--rot));
        opacity: 0;
    }
}

/* Короткая встряска страницы на взрыве */
body.mf-fx-quake {
    animation: mf-fx-quake 0.62s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes mf-fx-quake {
    0%, 100% { transform: translate(0, 0); }
    12%  { transform: translate(-7px, 3px) rotate(-0.35deg); }
    26%  { transform: translate(6px, -4px) rotate(0.3deg); }
    41%  { transform: translate(-5px, -2px) rotate(-0.22deg); }
    58%  { transform: translate(4px, 3px) rotate(0.18deg); }
    74%  { transform: translate(-2px, -1px) rotate(-0.1deg); }
    88%  { transform: translate(1px, 1px); }
}

/* ============================================================
   ПАДАЮЩИЕ ФЛАГИ (переключение на ru / en, красивый режим)
   ============================================================
   Полотнище рисуем градиентом, а не эмодзи: флаговые эмодзи не
   отображаются в Windows, и эффект был бы пустым у половины людей.
   ============================================================ */

.mf-fx-flag {
    position: absolute;
    top: -60px;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
    animation: mf-fx-fall var(--fall, 3.4s) cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}

/* Флаг РФ: белый / синий / красный */
.mf-fx-flag-ru {
    background: linear-gradient(to bottom,
        #ffffff 0 33.33%,
        #0039a6 33.33% 66.66%,
        #d52b1e 66.66% 100%);
}

/* Флаг Великобритании: диагонали + крест поверх синего */
.mf-fx-flag-en {
    background:
        /* красный прямой крест */
        linear-gradient(to bottom, transparent 40%, #cf142b 40% 60%, transparent 60%),
        linear-gradient(to right,  transparent 40%, #cf142b 40% 60%, transparent 60%),
        /* белый прямой крест */
        linear-gradient(to bottom, transparent 33%, #fff 33% 67%, transparent 67%),
        linear-gradient(to right,  transparent 33%, #fff 33% 67%, transparent 67%),
        /* белые диагонали */
        linear-gradient(to bottom right, transparent 44%, #fff 44% 56%, transparent 56%),
        linear-gradient(to bottom left,  transparent 44%, #fff 44% 56%, transparent 56%),
        #00247d;
}

@keyframes mf-fx-fall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    8%  { opacity: 1; }
    92% { opacity: 1; }
    100% {
        transform: translate(var(--sway, 0), calc(100vh + 120px)) rotate(var(--spin, 180deg));
        opacity: 0;
    }
}

/* ============================================================
   КРАСИВЫЙ РЕЖИМ: фоновые частицы по страницам
   ============================================================ */

.mf-fx-ambient {
    position: absolute;
    bottom: -40px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    animation-name: mf-fx-rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes mf-fx-rise {
    0%   { transform: translate(0, 0) rotate(0deg);            opacity: 0; }
    10%  { opacity: 0.5; }
    90%  { opacity: 0.5; }
    100% { transform: translate(var(--drift, 0), -110vh) rotate(240deg); opacity: 0; }
}

.mf-fx-slot  { color: var(--ui-warning, #d1a03f); text-shadow: 0 0 10px currentColor; }
.mf-fx-money { color: var(--ui-success, #4fae7d);  text-shadow: 0 0 10px currentColor; }
.mf-fx-spark { color: var(--ui-accent-light, var(--ui-accent-light)); text-shadow: 0 0 12px currentColor; }
.mf-fx-lead  { color: var(--ui-accent, var(--ui-accent));       text-shadow: 0 0 10px currentColor; }

/* ---- Казино в красивом режиме: автомат оживает ---- */
body.mf-fancy-casino .casino-machine {
    border-color: var(--ui-warning, #d1a03f);
    box-shadow: 0 0 0 1px rgba(209, 160, 63, 0.25),
                0 8px 40px -18px rgba(209, 160, 63, 0.7);
    animation: mf-fancy-machine 4.5s ease-in-out infinite;
}

@keyframes mf-fancy-machine {
    0%, 100% { box-shadow: 0 0 0 1px rgba(209, 160, 63, 0.22),
                           0 8px 34px -20px rgba(209, 160, 63, 0.55); }
    50%      { box-shadow: 0 0 0 1px rgba(209, 160, 63, 0.42),
                           0 10px 48px -14px rgba(209, 160, 63, 0.85); }
}

body.mf-fancy-casino .machine-lever {
    animation: mf-fancy-lever 2.6s ease-in-out infinite;
}

@keyframes mf-fancy-lever {
    0%, 88%, 100% { filter: brightness(1); }
    94%           { filter: brightness(1.35); }
}

/* Угловой слот в красивом режиме крутится заметнее */
body.mf-fancy-mode .mf-slot-corner {
    opacity: 0.9;
    border-color: var(--ui-warning, #d1a03f);
    box-shadow: 0 0 18px -6px rgba(209, 160, 63, 0.8);
}

/* ---- Статистика в красивом режиме ---- */
body.mf-fancy-stats .stat-card,
body.mf-fancy-stats .mf-week-panel {
    position: relative;
    overflow: hidden;
}

/* Пробегающий блик по карточкам — с задержкой по индексу,
   чтобы карточки «перекликались», а не мигали разом */
body.mf-fancy-stats .stat-card::after,
body.mf-fancy-stats .mf-week-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 100%);
    animation: mf-fancy-sheen 5.5s ease-in-out infinite;
    pointer-events: none;
}

body.mf-fancy-stats .stats-grid > .stat-card:nth-child(2)::after { animation-delay: 0.5s; }
body.mf-fancy-stats .stats-grid > .stat-card:nth-child(3)::after { animation-delay: 1.0s; }
body.mf-fancy-stats .stats-grid > .stat-card:nth-child(4)::after { animation-delay: 1.5s; }
body.mf-fancy-stats .stats-grid > .stat-card:nth-child(5)::after { animation-delay: 2.0s; }
body.mf-fancy-stats .stats-grid > .stat-card:nth-child(6)::after { animation-delay: 2.5s; }

@keyframes mf-fancy-sheen {
    0%, 65%, 100% { left: -60%; }
    88%           { left: 115%; }
}

body.mf-fancy-stats .main-chart-container {
    border-color: var(--ui-border-accent);
    box-shadow: 0 0 40px -24px var(--ui-accent, var(--ui-accent));
}

/* ============================================================
   ПАСХАЛКА: JACKPOT (код Konami)
   ============================================================ */

.mf-fx-jackpot {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 40px;
    border-radius: 12px;
    background: linear-gradient(160deg, #1a1206 0%, #241a08 100%);
    border: 2px solid #d1a03f;
    box-shadow: 0 0 60px -10px rgba(209, 160, 63, 0.9);
    pointer-events: auto;
    cursor: pointer;
    animation: mf-fx-jackpot-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both,
               mf-fx-jackpot-out 0.5s ease-in 3.3s both;
}

.mf-fx-jackpot-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 5px;
    color: #ffd76e;
    text-shadow: 0 0 22px rgba(255, 200, 90, 0.95);
    animation: mf-fx-jackpot-pulse 0.65s ease-in-out infinite alternate;
}

.mf-fx-jackpot-reels {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 14px;
    color: #fff3d0;
    text-shadow: 0 0 16px rgba(255, 190, 60, 0.85);
}

.mf-fx-jackpot-sub {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #b08d4d;
}

@keyframes mf-fx-jackpot-in {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

@keyframes mf-fx-jackpot-out {
    to { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
}

@keyframes mf-fx-jackpot-pulse {
    from { transform: scale(1);    filter: brightness(1); }
    to   { transform: scale(1.06); filter: brightness(1.3); }
}

.mf-fx-coin {
    position: absolute;
    top: -40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8 0%, #e0b043 45%, #9c7420 100%);
    box-shadow: 0 0 10px -2px rgba(255, 200, 90, 0.8);
    animation: mf-fx-fall var(--fall, 3s) cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}

/* ============================================================
   СТРОГАЯ ТЕМА: те же эффекты, но тише
   ============================================================
   Работник может включить красивый режим, но интерфейс всё равно
   остаётся рабочим: частицы бледнее, свечения слабее.
   ============================================================ */

body.mf-strict .mf-fx-ambient { opacity: 0; }
body.mf-strict .mf-fx-ambient { animation-name: mf-fx-rise-quiet; }

@keyframes mf-fx-rise-quiet {
    0%   { transform: translate(0, 0) rotate(0deg);            opacity: 0; }
    10%  { opacity: 0.22; }
    90%  { opacity: 0.22; }
    100% { transform: translate(var(--drift, 0), -110vh) rotate(180deg); opacity: 0; }
}

body.mf-strict.mf-fancy-stats .stat-card::after,
body.mf-strict.mf-fancy-stats .mf-week-panel::after {
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.035) 50%,
        transparent 100%);
}

/* ============================================================
   ДОСТУПНОСТЬ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .mf-fx-ambient,
    .mf-fx-flag,
    .mf-fx-coin { animation-duration: 0.001s; animation-iteration-count: 1; opacity: 0; }

    body.mf-fx-quake { animation: none; }

    body.mf-fancy-casino .casino-machine,
    body.mf-fancy-casino .machine-lever,
    body.mf-fancy-stats .stat-card::after,
    body.mf-fancy-stats .mf-week-panel::after { animation: none; }
}

/* На телефоне фоновых частиц меньше смысла, а батарею они едят —
   оставляем только эффекты смены языка и джекпот. */
@media (max-width: 768px) {
    .mf-fx-ambient { display: none; }
}