/* EMC mobile redesign v2 - clean app-like mobile layer */

@media (max-width: 420px) {
    :root {
        --m-page: min(100% - 22px, 520px);
        --m-pad: 12px;
    }

    .guide-title,
    .shop-title,
    .page-title,
    .skin-title,
    .support-title,
    .soon-title,
    .legal-title {
        font-size: clamp(2.05rem, 10.5vw, 3.1rem) !important;
    }

    .license-title,
    .shop-name,
    .skin-help-title,
    .support-card h2,
    .legal-card h2,
    .effect-name {
        font-size: clamp(1.55rem, 7.6vw, 2.25rem) !important;
    }

    .home-label {
        font-size: clamp(1.8rem, 9.5vw, 2.65rem) !important;
    }

    .home-row,
    .license-card,
    .step-card,
    .shop-card,
    .checkout-card,
    .skin-card,
    .skin-help,
    .support-card,
    .soon-card,
    .legal-card,
    .effect-card,
    .player-card,
    .rank-panel {
        border-radius: 18px !important;
        padding: 14px !important;
    }
}

/* EMC mobile pixel final v3 - no huge Syne */

@media (max-width: 860px) {
    :root {
        --px-bg: #fff0df;
        --px-card: rgba(255,255,255,.56);
        --px-ink: #2a0c0b;
        --px-muted: rgba(42,12,11,.66);
        --px-line: rgba(42,12,11,.72);
        --px-pink: #ff3d96;
        --px-shadow: 4px 4px 0 rgba(42,12,11,.16);
    }

    body {
        background:
            radial-gradient(circle at 20% 0%, rgba(255,255,255,.70), transparent 34%),
            linear-gradient(180deg, #fff8ee 0%, var(--px-bg) 100%) !important;
    }

    /* Главная - Minecraft vibe, без гигантского шрифта */
    html:not(.open-menu-instant) body.index-body:not(.index-menu-open):not(.index-menu-ready):not(:has(.pastel-panel.slide-in)) {
        background: #14000a !important;
        overflow: hidden !important;
    }

    html:not(.open-menu-instant) body.index-body:not(.index-menu-open):not(.index-menu-ready):not(:has(.pastel-panel.slide-in)) #bg-canvas {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    body.index-body .core {
        width: min(100% - 28px, 420px) !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: 28px 0 !important;
        display: grid !important;
        align-content: center !important;
        gap: 18px !important;
    }

    body.index-body .title-container {
        width: 100% !important;
        display: grid !important;
        gap: 10px !important;
    }

    body.index-body .title-container h1,
    body.index-body .title-container h2 {
        margin: 0 !important;
        width: 100% !important;
        color: #fff0f5 !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(1.05rem, 6vw, 1.65rem) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        text-shadow: 3px 3px 0 rgba(255,0,127,.34) !important;
    }

    body.index-body .title-container h2 {
        color: #ffb6dc !important;
    }

    .mobile-landing-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.index-body .btn-enter,
    .mobile-account-action {
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 0 !important;
        border: 3px solid #fff0f5 !important;
        background: rgba(255,240,245,.12) !important;
        color: #fff0f5 !important;
        box-shadow: 4px 4px 0 rgba(255,0,127,.40) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 8px !important;
        line-height: 1.35 !important;
        text-transform: uppercase !important;
    }

    body.index-body .btn-enter {
        background: var(--px-pink) !important;
        color: #fff0f5 !important;
    }

    /* Меню */
    html.open-menu-instant .home-top,
    body.index-body.index-menu-open .home-top,
    body.index-body:has(.pastel-panel.slide-in) .home-top {
        border-bottom: 3px solid var(--px-line) !important;
        padding: 8px 0 12px !important;
    }

    html.open-menu-instant .home-top .brand,
    body.index-body.index-menu-open .home-top .brand,
    body.index-body:has(.pastel-panel.slide-in) .home-top .brand {
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7.5px !important;
        line-height: 1.55 !important;
        color: var(--px-ink) !important;
        max-width: 180px !important;
    }

    .mobile-menu-account {
        min-height: 34px !important;
        height: 34px !important;
        min-width: 92px !important;
        border-radius: 0 !important;
        border: 3px solid var(--px-line) !important;
        background: rgba(255,255,255,.36) !important;
        color: var(--px-ink) !important;
        box-shadow: 3px 3px 0 rgba(42,12,11,.14) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7px !important;
        text-transform: uppercase !important;
    }

    .big-title,
    html.open-menu-instant .big-title,
    body.index-body.index-menu-open .big-title,
    body.index-body:has(.pastel-panel.slide-in) .big-title {
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(1.15rem, 6.2vw, 1.7rem) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        color: var(--px-ink) !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    .big-title span {
        color: var(--px-pink) !important;
    }

    .home-row,
    html.open-menu-instant .home-row,
    body.index-body.index-menu-open .home-row,
    body.index-body:has(.pastel-panel.slide-in) .home-row {
        min-height: 64px !important;
        padding: 12px !important;
        border-radius: 0 !important;
        border: 3px solid var(--px-line) !important;
        background: var(--px-card) !important;
        box-shadow: var(--px-shadow) !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }

    .home-num,
    html.open-menu-instant .home-num,
    body.index-body.index-menu-open .home-num,
    body.index-body:has(.pastel-panel.slide-in) .home-num {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 0 !important;
        border: 2px solid var(--px-line) !important;
        background: rgba(255,61,150,.14) !important;
        color: var(--px-pink) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7px !important;
    }

    .home-label,
    html.open-menu-instant .home-label,
    body.index-body.index-menu-open .home-label,
    body.index-body:has(.pastel-panel.slide-in) .home-label {
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(.9rem, 4.8vw, 1.22rem) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        color: var(--px-ink) !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-transform: uppercase !important;
    }

    /* Все мобильные заголовки - меньше и пиксельные */
    .guide-title,
    .shop-title,
    .page-title,
    .skin-title,
    .support-title,
    .soon-title,
    .legal-title,
    .selected-player span,
    .license-title,
    .shop-name,
    .skin-help-title,
    .support-card h2,
    .legal-card h2,
    .effect-name {
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(.95rem, 4.8vw, 1.35rem) !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        color: var(--px-ink) !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-align: left !important;
    }

    .guide-title br,
    .shop-title br,
    .page-title br,
    .skin-title br,
    .support-title br,
    .soon-title br,
    .legal-title br {
        display: none !important;
    }

    .guide-label,
    .shop-kicker,
    .soon-kicker,
    .tiny-title {
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7px !important;
        line-height: 1.45 !important;
        border-radius: 0 !important;
        text-transform: uppercase !important;
    }

    /* Карточки - квадратные, как Minecraft UI */
    .license-card,
    .step-card,
    .shop-card,
    .checkout-card,
    .skin-card,
    .skin-help,
    .support-card,
    .soon-card,
    .legal-card,
    .effect-card,
    .player-card,
    .rank-panel {
        border-radius: 0 !important;
        border: 3px solid var(--px-line) !important;
        background: var(--px-card) !important;
        box-shadow: var(--px-shadow) !important;
        padding: 14px !important;
    }

    .license-top {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .license-num {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 0 !important;
        border: 2px solid var(--px-line) !important;
        background: rgba(255,61,150,.14) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7px !important;
    }

    /* Текст внутри карточек читаемый, но не огромный */
    .skin-subtitle,
    .support-lead,
    .soon-text,
    .legal-card p,
    .legal-card li,
    .effect-desc,
    .shop-desc,
    .step-card p,
    .skin-help li,
    .auth-text,
    .rank-meta-line {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 800 !important;
        color: var(--px-muted) !important;
        text-transform: none !important;
    }

    /* Кнопки */
    .shop-price,
    .shop-button,
    .guide-button,
    .copy-button,
    .pixel-button,
    .skin-button,
    .skin-upload,
    .support-button,
    .soon-button,
    .pay-main-button,
    .pay-second-button,
    .auth-form button,
    .auth-social,
    .auth-tab,
    .topup-presets button,
    .server-copy,
    .emc-footer-btn {
        border-radius: 0 !important;
        border: 3px solid var(--px-line) !important;
        box-shadow: 3px 3px 0 rgba(42,12,11,.16) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7.5px !important;
        line-height: 1.45 !important;
        text-transform: uppercase !important;
    }

    .shop-button,
    .guide-button,
    .copy-button,
    .pixel-button,
    .skin-button,
    .skin-upload,
    .support-button,
    .soon-button,
    .pay-main-button,
    .auth-form button {
        background: var(--px-ink) !important;
        color: #fff0df !important;
    }

    .shop-price {
        background: rgba(255,61,150,.14) !important;
        color: var(--px-pink) !important;
    }

    .server-copy {
        background: rgba(255,255,255,.42) !important;
        color: var(--px-ink) !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Footer */
    .emc-footer {
        background: rgba(255,240,223,.92) !important;
        border-top: 3px solid rgba(42,12,11,.25) !important;
    }

    .emc-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 390px) {
    body.index-body .title-container h1,
    body.index-body .title-container h2 {
        font-size: clamp(.92rem, 5.35vw, 1.36rem) !important;
    }

    .home-label,
    html.open-menu-instant .home-label,
    body.index-body.index-menu-open .home-label,
    body.index-body:has(.pastel-panel.slide-in) .home-label {
        font-size: clamp(.78rem, 4.35vw, 1rem) !important;
    }

    .guide-title,
    .shop-title,
    .page-title,
    .skin-title,
    .support-title,
    .soon-title,
    .legal-title,
    .selected-player span,
    .license-title,
    .shop-name,
    .skin-help-title,
    .support-card h2,
    .legal-card h2,
    .effect-name {
        font-size: clamp(.82rem, 4.35vw, 1.12rem) !important;
    }
}

/* EMC mobile auth fullscreen v4 */

@media (max-width: 860px) {
    body.auth-screen-open {
        overflow: hidden !important;
        height: 100dvh !important;
    }

    body.auth-screen-open > *:not(.auth-modal) {
        pointer-events: none !important;
    }

    .auth-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 30000 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        display: none !important;
        place-items: stretch !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(255,255,255,.09), transparent 34%),
            linear-gradient(180deg, #16060c 0%, #070203 100%) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: hidden !important;
    }

    .auth-modal.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .auth-box {
        position: relative !important;
        inset: auto !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;

        display: grid !important;
        grid-template-rows: auto auto auto 1fr auto !important;
        align-content: start !important;
        gap: 14px !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #fff0f5 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .auth-box::before {
        content: "EL MUNDO DE CHICAS" !important;
        display: block !important;
        width: calc(100% - 54px) !important;
        min-height: 34px !important;
        padding-top: 4px !important;
        color: rgba(255,240,245,.74) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 8px !important;
        line-height: 1.55 !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
    }

    .auth-close {
        position: fixed !important;
        top: calc(14px + env(safe-area-inset-top)) !important;
        right: 14px !important;
        z-index: 2 !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        border: 3px solid rgba(255,240,245,.82) !important;
        border-radius: 0 !important;
        background: rgba(255,240,245,.08) !important;
        color: #fff0f5 !important;
        box-shadow: 4px 4px 0 rgba(255,0,127,.34) !important;

        font-family: 'Press Start 2P', monospace !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .auth-title {
        width: 100% !important;
        margin: 26px 0 0 !important;
        padding: 0 !important;
        color: #fff0f5 !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(1.05rem, 5.5vw, 1.45rem) !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        text-shadow: 3px 3px 0 rgba(255,0,127,.30) !important;
    }

    .auth-text {
        margin: -6px 0 2px !important;
        color: rgba(255,240,245,.72) !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
        text-transform: none !important;
    }

    /* OAuth пока не подключен - на мобильном убираем мусор */
    .auth-socials,
    .auth-divider {
        display: none !important;
    }

    .auth-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .auth-tab {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 8px !important;

        border: 3px solid rgba(255,240,245,.58) !important;
        border-radius: 0 !important;
        background: rgba(255,240,245,.07) !important;
        color: rgba(255,240,245,.78) !important;
        box-shadow: none !important;

        font-family: 'Press Start 2P', monospace !important;
        font-size: 7.5px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .auth-tab.active {
        border-color: #ff3d96 !important;
        background: #ff3d96 !important;
        color: #fff0f5 !important;
        box-shadow: 4px 4px 0 rgba(255,240,245,.18) !important;
    }

    .auth-form {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .auth-form input {
        width: 100% !important;
        min-height: 54px !important;
        height: 54px !important;
        padding: 0 14px !important;

        border: 3px solid rgba(255,240,245,.62) !important;
        border-radius: 0 !important;
        background: rgba(255,240,245,.10) !important;
        color: #fff0f5 !important;
        box-shadow: none !important;
        outline: none !important;

        font-family: 'JetBrains Mono', monospace !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-transform: none !important;
    }

    .auth-form input::placeholder {
        color: rgba(255,240,245,.48) !important;
    }

    .auth-form input:focus {
        border-color: #ff3d96 !important;
        background: rgba(255,240,245,.14) !important;
    }

    .auth-form button,
    #authSubmit {
        width: 100% !important;
        min-height: 54px !important;
        height: 54px !important;
        margin-top: 2px !important;
        padding: 0 14px !important;

        border: 3px solid #ff3d96 !important;
        border-radius: 0 !important;
        background: #ff3d96 !important;
        color: #fff0f5 !important;
        box-shadow: 4px 4px 0 rgba(255,240,245,.20) !important;

        font-family: 'Press Start 2P', monospace !important;
        font-size: 8px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .auth-form button:disabled,
    #authSubmit:disabled {
        opacity: .58 !important;
        box-shadow: none !important;
    }

    .auth-message {
        min-height: 22px !important;
        margin: 0 !important;
        color: #ffb6dc !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;
        text-transform: none !important;
    }

    /* На auth-экране ничего сзади визуально не должно проявляться */
    body.auth-screen-open .site-loader,
    body.auth-screen-open .emc-footer,
    body.auth-screen-open #transition-overlay,
    body.auth-screen-open .core,
    body.auth-screen-open #bg-canvas {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.auth-screen-open .auth-modal {
        visibility: visible !important;
    }
}

@media (max-width: 390px) {
    .auth-box {
        padding-left: 14px !important;
        padding-right: 14px !important;
        gap: 12px !important;
    }

    .auth-title {
        font-size: clamp(.95rem, 5.2vw, 1.25rem) !important;
    }

    .auth-tab,
    .auth-form button,
    #authSubmit {
        font-size: 7px !important;
    }
}

/* EMC mobile landing/auth social override v5 */

@media (max-width: 860px) {
    /* Главная: только одна кнопка Войти */
    .mobile-landing-actions,
    .mobile-landing-account,
    .mobile-menu-account {
        display: none !important;
    }

    body.index-body .btn-enter {
        width: min(100%, 320px) !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        border: 3px solid #fff0f5 !important;
        background: var(--pink) !important;
        color: #fff0f5 !important;
        box-shadow: 4px 4px 0 rgba(255,0,127,.42) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 8.5px !important;
        line-height: 1.35 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    /* Auth: вернуть Google/Kick/Twitch на fullscreen-экране */
    .auth-socials {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .auth-divider {
        display: block !important;
        margin: 0 !important;
        color: rgba(255,240,245,.52) !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .auth-social {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 12px !important;
        border-radius: 0 !important;
        border: 3px solid rgba(255,240,245,.58) !important;
        background: rgba(255,240,245,.08) !important;
        color: #fff0f5 !important;
        box-shadow: 4px 4px 0 rgba(255,0,127,.22) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7.5px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }
.auth-tabs {
        margin-top: 2px !important;
    }
}

/* EMC effects balance + legal mobile final */
/* EMC logo link + skin head hard fallback */

@media (max-width: 860px) {
    .logo-small,
    .brand {
        cursor: pointer !important;
    }
}

/* Никогда не показывать всю развертку скина, даже до canvas */
.skin-head[data-skin-url],
.player-head[data-skin-url],
.selected-skin-head[data-skin-url],
.skin-head.skin-head-fallback,
.player-head.skin-head-fallback,
.selected-skin-head.skin-head-fallback {
    background-size: 800% 800% !important;
    background-position: 14.285714% 14.285714% !important;
    background-repeat: no-repeat !important;
    image-rendering: pixelated !important;
    overflow: hidden !important;
}

/* Когда JS сделал canvas-кроп, он ставит inline cover и выигрывает. */

/* EMC mobile clean numbers/auth final */

@media (max-width: 860px) {
    /*
       Mobile: убираем цифровые бейджи.
       На телефоне они занимают место и ломают кнопки.
    */
    .home-num,
    .license-num,
    .skin-num,
    .step-num,
    .support-card-num,
    .soon-kicker,
    .guide-label {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    /* Меню: только суть - Инструкция / Покупки / Эффекты */
    html.open-menu-instant .home-row,
    body.index-body.index-menu-open .home-row,
    body.index-body:has(.pastel-panel.slide-in) .home-row {
        min-height: 58px !important;
        grid-template-columns: 1fr !important;
        padding: 13px 14px !important;
        align-items: center !important;
        justify-items: start !important;
        gap: 0 !important;
    }

    html.open-menu-instant .home-label,
    body.index-body.index-menu-open .home-label,
    body.index-body:has(.pastel-panel.slide-in) .home-label {
        width: 100% !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(.86rem, 4.4vw, 1.08rem) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-transform: uppercase !important;
    }

    /* Инструкции: карточки без боковой цифры */
    .license-top,
    .skin-steps li,
    .support-card-top {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .license-card,
    .step-card,
    .skin-help,
    .support-card,
    .legal-card,
    .shop-card,
    .effect-card,
    .player-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .license-title,
    .step-card h2,
    .skin-help-title,
    .support-card h2,
    .legal-card h2,
    .shop-name,
    .effect-name {
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(.84rem, 4.3vw, 1.08rem) !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-transform: uppercase !important;
    }

    .guide-title,
    .shop-title,
    .page-title,
    .skin-title,
    .support-title,
    .soon-title,
    .legal-title {
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(1rem, 5vw, 1.35rem) !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-transform: uppercase !important;
    }

    .guide-title br,
    .shop-title br,
    .page-title br,
    .skin-title br,
    .support-title br,
    .soon-title br,
    .legal-title br,
    .license-title br,
    .skin-help-title br {
        display: none !important;
    }

    /* OAuth: никаких букв перед текстом. Только Google / Twitch / Kick */
    .auth-social::before,
    .auth-social::after,
    .auth-social[data-oauth-provider="google"]::before,
    .auth-social[data-oauth-provider="kick"]::before,
    .auth-social[data-oauth-provider="twitch"]::before {
        display: none !important;
        content: none !important;
    }

    .auth-social {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        text-indent: 0 !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7.5px !important;
        line-height: 1.35 !important;
        text-transform: uppercase !important;
    }
}

@media (max-width: 390px) {
    html.open-menu-instant .home-label,
    body.index-body.index-menu-open .home-label,
    body.index-body:has(.pastel-panel.slide-in) .home-label,
    .license-title,
    .step-card h2,
    .skin-help-title,
    .support-card h2,
    .legal-card h2,
    .shop-name,
    .effect-name {
        font-size: clamp(.78rem, 4.1vw, .96rem) !important;
    }

    .guide-title,
    .shop-title,
    .page-title,
    .skin-title,
    .support-title,
    .soon-title,
    .legal-title {
        font-size: clamp(.92rem, 4.7vw, 1.16rem) !important;
    }
}

/* EMC mobile compat fix44 start */
/* Без :has(). Нужно для старых мобильных WebView и Telegram-браузеров. */

@media (max-width: 860px) {
    html:not(.open-menu-instant) body.index-body:not(.index-menu-open):not(.index-menu-ready) > .emc-footer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.open-menu-instant body.index-body,
    body.index-body.index-menu-open,
    body.index-body.index-menu-ready {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
        color: var(--px-ink, #2a0c0b) !important;
        background:
            radial-gradient(circle at 20% 0%, rgba(255,255,255,.70), transparent 34%),
            linear-gradient(180deg, #fff8ee 0%, var(--px-bg, #fff0df) 100%) !important;
    }

    html.open-menu-instant body.index-body #bg-canvas,
    body.index-body.index-menu-open #bg-canvas,
    body.index-body.index-menu-ready #bg-canvas,
    html.open-menu-instant body.index-body > .core,
    body.index-body.index-menu-open > .core,
    body.index-body.index-menu-ready > .core {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.open-menu-instant body.index-body #transition-overlay,
    body.index-body.index-menu-open #transition-overlay,
    body.index-body.index-menu-ready #transition-overlay,
    html.open-menu-instant body.index-body .pastel-panel,
    body.index-body.index-menu-open .pastel-panel,
    body.index-body.index-menu-ready .pastel-panel,
    html.open-menu-instant body.index-body .home-page,
    body.index-body.index-menu-open .home-page,
    body.index-body.index-menu-ready .home-page {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        background:
            radial-gradient(circle at 20% 0%, rgba(255,255,255,.70), transparent 34%),
            linear-gradient(180deg, #fff8ee 0%, var(--px-bg, #fff0df) 100%) !important;
    }

    html.open-menu-instant body.index-body .home-page,
    body.index-body.index-menu-open .home-page,
    body.index-body.index-menu-ready .home-page {
        padding: 18px 14px 22px !important;
    }

    html.open-menu-instant body.index-body .home-layout,
    body.index-body.index-menu-open .home-layout,
    body.index-body.index-menu-ready .home-layout {
        width: min(100%, 560px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-rows: auto auto auto !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    html.open-menu-instant body.index-body .home-main,
    body.index-body.index-menu-open .home-main,
    body.index-body.index-menu-ready .home-main {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 8px 0 0 !important;
        overflow: visible !important;
    }

    html.open-menu-instant body.index-body .home-main::after,
    body.index-body.index-menu-open .home-main::after,
    body.index-body.index-menu-ready .home-main::after {
        display: none !important;
        content: none !important;
    }

    html.open-menu-instant body.index-body .home-top,
    body.index-body.index-menu-open .home-top,
    body.index-body.index-menu-ready .home-top,
    html.open-menu-instant body.index-body .home-bottom,
    body.index-body.index-menu-open .home-bottom,
    body.index-body.index-menu-ready .home-bottom {
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        border-color: rgba(42,12,11,.72) !important;
    }

    html.open-menu-instant body.index-body .big-title,
    body.index-body.index-menu-open .big-title,
    body.index-body.index-menu-ready .big-title {
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(1.05rem, 5.8vw, 1.55rem) !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        color: var(--px-ink, #2a0c0b) !important;
    }

    html.open-menu-instant body.index-body .home-menu,
    body.index-body.index-menu-open .home-menu,
    body.index-body.index-menu-ready .home-menu {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    html.open-menu-instant body.index-body .home-row,
    body.index-body.index-menu-open .home-row,
    body.index-body.index-menu-ready .home-row {
        width: 100% !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        justify-items: start !important;
        gap: 0 !important;
        padding: 13px 14px !important;
        border: 3px solid var(--px-line, rgba(42,12,11,.72)) !important;
        background: var(--px-card, rgba(255,255,255,.56)) !important;
        box-shadow: var(--px-shadow, 4px 4px 0 rgba(42,12,11,.16)) !important;
        color: var(--px-ink, #2a0c0b) !important;
        text-decoration: none !important;
    }

    html.open-menu-instant body.index-body .home-num,
    body.index-body.index-menu-open .home-num,
    body.index-body.index-menu-ready .home-num {
        display: none !important;
    }

    html.open-menu-instant body.index-body .home-label,
    body.index-body.index-menu-open .home-label,
    body.index-body.index-menu-ready .home-label {
        width: 100% !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: clamp(.86rem, 4.4vw, 1.08rem) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        color: var(--px-ink, #2a0c0b) !important;
        text-transform: uppercase !important;
    }

    html.open-menu-instant body.index-body > .emc-footer,
    body.index-body.index-menu-open > .emc-footer,
    body.index-body.index-menu-ready > .emc-footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        margin-top: 0 !important;
        padding: 16px 12px 18px !important;
        background: rgba(255,240,223,.92) !important;
        border-top: 3px solid rgba(42,12,11,.25) !important;
        pointer-events: auto !important;
    }

    html.open-menu-instant body.index-body .emc-footer-card,
    body.index-body.index-menu-open .emc-footer-card,
    body.index-body.index-menu-ready .emc-footer-card {
        width: min(520px, 100%) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html.open-menu-instant body.index-body .emc-footer-grid,
    body.index-body.index-menu-open .emc-footer-grid,
    body.index-body.index-menu-ready .emc-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}
/* EMC mobile compat fix44 end */

/* EMC rating performance consolidated start */

/*
   One final rating layer.
   Replaces all previous rating patch layers to reduce style recalculation and repaint cost.
*/

body.effects-body {
    --emc-rating-ink: rgba(42, 12, 11, .90);
    --emc-rating-muted: rgba(42, 12, 11, .58);

    --emc-rating-pink: #d84d95;
    --emc-rating-blue: #4f75d8;

    --emc-rating-bg-a: rgba(255, 240, 223, .62);
    --emc-rating-bg-b: rgba(255, 224, 202, .50);
    --emc-rating-row-bg: rgba(255, 232, 220, .34);
    --emc-rating-row-hover: rgba(255, 232, 220, .44);

    --emc-rating-border: rgba(42, 12, 11, .28);
    --emc-rating-border-soft: rgba(42, 12, 11, .13);

    overflow-x: hidden !important;
}

/* Old rank markup should never render if it still exists somewhere. */
body.effects-body .rank-meta-line,
body.effects-body .rank-head-row,
body.effects-body .rank-title,
body.effects-body .rank-table,
body.effects-body .rank-summary,
body.effects-body .rank-stat-card,
body.effects-body .rank-row,
body.effects-body .rank-score-box,
body.effects-body .rank-chip-row {
    display: none !important;
}

/* Hide side ratings in selected-player mode. */
body.effects-body.player-selected .emc-rating-panel,
body.effects-body.player-selected .rank-panel {
    display: none !important;
}

/* Base panel reset. */
body.effects-body .emc-rating-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    display: block !important;
    position: relative !important;
    inset: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    contain: layout paint style !important;
}

body.effects-body .emc-rating-card {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    gap: 13px !important;

    padding: 17px !important;
    border: 3px solid var(--emc-rating-border) !important;
    background:
        linear-gradient(135deg, var(--emc-rating-bg-a), var(--emc-rating-bg-b)) !important;
    box-shadow: 4px 4px 0 rgba(42, 12, 11, .045) !important;

    contain: layout paint style !important;
}

/* Title. */
body.effects-body .emc-rating-title {
    min-width: 0 !important;
    min-height: 54px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 0 !important;

    padding: 0 8px 13px !important;
    border-bottom: 2px solid rgba(42, 12, 11, .20) !important;
}

body.effects-body .emc-rating-title b {
    display: none !important;
}

body.effects-body .emc-rating-title span {
    width: 100% !important;
    min-width: 0 !important;

    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    text-align: center !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

body.effects-body .emc-rating-w .emc-rating-title span {
    color: var(--emc-rating-pink) !important;
}

body.effects-body .emc-rating-m .emc-rating-title span {
    color: var(--emc-rating-blue) !important;
}

body.effects-body .emc-rating-title::after {
    display: block !important;
    margin-top: 5px !important;

    text-align: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    color: var(--emc-rating-muted) !important;
}

body.effects-body .emc-rating-w .emc-rating-title::after {
    content: "Woman" !important;
}

body.effects-body .emc-rating-m .emc-rating-title::after {
    content: "Man" !important;
}

/* Summary. */
body.effects-body .emc-rating-summary {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.effects-body .emc-rating-stat {
    min-width: 0 !important;
    min-height: 62px !important;

    display: grid !important;
    align-content: center !important;
    gap: 5px !important;

    padding: 11px 12px !important;
    border: 2px solid var(--emc-rating-border-soft) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
        rgba(255, 232, 220, .28) !important;
    box-shadow: none !important;
}

body.effects-body .emc-rating-stat small,
body.effects-body .emc-rating-stat strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.effects-body .emc-rating-stat small {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--emc-rating-muted) !important;
    text-transform: none !important;
}

body.effects-body .emc-rating-stat strong {
    font-family: 'JetBrains Mono', monospace !important;
    font-variant-numeric: tabular-nums !important;
    font-size: clamp(15px, 1.14vw, 18px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
    color: var(--emc-rating-ink) !important;
}

body.effects-body .emc-rating-stat-buff strong {
    color: var(--emc-rating-pink) !important;
}

body.effects-body .emc-rating-stat-debuff strong {
    color: var(--emc-rating-blue) !important;
}

/* Rows. */
body.effects-body .emc-rating-list {
    min-width: 0 !important;
    display: grid !important;
    gap: 10px !important;
    contain: layout paint style !important;
}

body.effects-body .emc-rating-row {
    min-width: 0 !important;
    min-height: 68px !important;

    display: grid !important;
    grid-template-columns: 30px 46px minmax(0, 1fr) minmax(42px, auto) minmax(42px, auto) minmax(54px, auto) !important;
    align-items: center !important;
    gap: 9px !important;

    padding: 10px !important;
    border: 2px solid var(--emc-rating-border-soft) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
        var(--emc-rating-row-bg) !important;
    box-shadow: none !important;

    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    contain: layout paint style !important;
}

@media (hover: hover) {
    body.effects-body .emc-rating-row:hover {
        background:
            linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
            var(--emc-rating-row-hover) !important;
        transform: none !important;
        box-shadow: none !important;
    }
}

body.effects-body .emc-rating-place {
    min-width: 0 !important;
    color: rgba(42, 12, 11, .50) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-align: left !important;
}

body.effects-body .emc-rating-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    display: grid !important;
    place-items: center !important;

    border: 2px solid rgba(42, 12, 11, .22) !important;
    background-color: rgba(255, 232, 220, .40) !important;
    background-size: 800% 800% !important;
    background-position: 14.285714% 14.285714% !important;
    background-repeat: no-repeat !important;
    image-rendering: pixelated !important;

    overflow: hidden !important;
    box-shadow: none !important;
}

body.effects-body .emc-rating-avatar::before,
body.effects-body .emc-rating-avatar::after,
body.effects-body .emc-rating-avatar-fallback::before,
body.effects-body .emc-rating-avatar-fallback::after {
    display: none !important;
    content: none !important;
}

body.effects-body .emc-rating-avatar-fallback {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(255, 236, 224, .92), rgba(255, 219, 204, .76)) !important;
}

body.effects-body .emc-rating-avatar-fallback i {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    font-style: normal !important;
    line-height: 1 !important;
    transform: none !important;
}

body.effects-body .emc-rating-avatar-fallback i::before {
    content: "♡" !important;

    display: block !important;
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: 'JetBrains Mono', monospace !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}

body.effects-body .emc-rating-w .emc-rating-avatar-fallback i::before {
    color: rgba(216, 77, 149, .72) !important;
}

body.effects-body .emc-rating-m .emc-rating-avatar-fallback i::before {
    color: rgba(79, 117, 216, .72) !important;
}

body.effects-body .emc-rating-name {
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: var(--emc-rating-ink) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-transform: none !important;
}

body.effects-body .emc-rating-badge,
body.effects-body .emc-rating-score {
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-family: 'JetBrains Mono', monospace !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
    text-align: right !important;
    text-transform: none !important;
}

body.effects-body .emc-rating-buff {
    color: var(--emc-rating-pink) !important;
}

body.effects-body .emc-rating-debuff {
    color: var(--emc-rating-blue) !important;
}

body.effects-body .emc-rating-score {
    font-size: 13px !important;
    color: var(--emc-rating-ink) !important;
}

body.effects-body .emc-rating-row[data-negative="1"] .emc-rating-score {
    color: var(--emc-rating-blue) !important;
}

body.effects-body .emc-rating-empty {
    padding: 12px !important;
    border: 2px solid var(--emc-rating-border-soft) !important;
    background: rgba(255, 232, 220, .28) !important;
    color: var(--emc-rating-muted) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

/* Desktop side layout. */
@media (min-width: 1241px) {
    body.effects-body:not(.player-selected) {
        display: grid !important;
        grid-template-columns:
            minmax(320px, 410px)
            minmax(560px, 720px)
            minmax(320px, 410px) !important;
        grid-template-areas:
            "emc-rating-w emc-main emc-rating-m"
            "emc-footer emc-footer emc-footer" !important;
        grid-template-rows: minmax(calc(100dvh - 118px), auto) auto !important;

        column-gap: clamp(18px, 2vw, 30px) !important;
        row-gap: 0 !important;

        align-items: start !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 100dvh !important;
        padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.6vw, 44px) 0 !important;
        overflow-x: hidden !important;
    }

    body.effects-body:not(.player-selected) > .site-page.effects-center {
        grid-area: emc-main !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: calc(100dvh - 118px) !important;
        margin: 0 !important;
        padding: 0 0 44px !important;
        align-self: stretch !important;
    }

    body.effects-body:not(.player-selected) > .emc-rating-w {
        grid-area: emc-rating-w !important;
    }

    body.effects-body:not(.player-selected) > .emc-rating-m {
        grid-area: emc-rating-m !important;
    }

    body.effects-body:not(.player-selected) > .emc-rating-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;

        position: sticky !important;
        top: clamp(16px, 2vw, 24px) !important;
        align-self: start !important;

        max-height: calc(100dvh - 44px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.effects-body:not(.player-selected) > .emc-footer {
        grid-area: emc-footer !important;
        width: calc(100% + clamp(36px, 5.2vw, 88px)) !important;
        margin-left: calc(clamp(18px, 2.6vw, 44px) * -1) !important;
        margin-right: calc(clamp(18px, 2.6vw, 44px) * -1) !important;
        margin-top: 0 !important;
        align-self: end !important;
    }
}

/* Tighter desktop. */
@media (min-width: 1241px) and (max-width: 1460px) {
    body.effects-body:not(.player-selected) {
        grid-template-columns:
            minmax(300px, 372px)
            minmax(520px, 650px)
            minmax(300px, 372px) !important;
        column-gap: clamp(14px, 1.6vw, 22px) !important;
        padding-left: clamp(14px, 1.8vw, 26px) !important;
        padding-right: clamp(14px, 1.8vw, 26px) !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-card {
        padding: 15px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-title span {
        font-size: 12px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-title::after {
        font-size: 11px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-row {
        min-height: 62px !important;
        grid-template-columns:
            26px
            40px
            minmax(0, 1fr)
            minmax(38px, auto)
            minmax(38px, auto)
            minmax(50px, auto) !important;
        gap: 8px !important;
        padding: 9px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-avatar-fallback i::before {
        font-size: 23px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-name {
        font-size: 14px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-badge {
        font-size: 11px !important;
    }

    body.effects-body:not(.player-selected) .emc-rating-score {
        font-size: 12px !important;
    }
}

/* Tablet and mobile: panels stack. */
@media (max-width: 1240px) {
    body.effects-body {
        display: block !important;
        padding: 0 !important;
    }

    body.effects-body > .emc-rating-panel {
        position: relative !important;
        top: auto !important;
        width: min(900px, calc(100% - 28px)) !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 18px auto 0 !important;
    }
}

@media (max-width: 720px) {
    body.effects-body .emc-rating-card {
        padding: 14px !important;
        border-width: 3px !important;
        box-shadow: 3px 3px 0 rgba(42, 12, 11, .04) !important;
    }

    body.effects-body .emc-rating-title {
        min-height: 48px !important;
        padding-bottom: 11px !important;
    }

    body.effects-body .emc-rating-title span {
        font-size: 10px !important;
    }

    body.effects-body .emc-rating-title::after {
        font-size: 10px !important;
    }

    body.effects-body .emc-rating-stat {
        min-height: 56px !important;
        padding: 10px !important;
    }

    body.effects-body .emc-rating-row {
        min-height: 60px !important;
        grid-template-columns: 26px 38px minmax(0, 1fr) minmax(42px, auto) !important;
        gap: 7px !important;
        padding: 9px !important;
    }

    body.effects-body .emc-rating-badge {
        display: none !important;
    }

    body.effects-body .emc-rating-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    body.effects-body .emc-rating-avatar-fallback i::before {
        font-size: 22px !important;
    }

    body.effects-body .emc-rating-place {
        font-size: 7px !important;
    }

    body.effects-body .emc-rating-name {
        font-size: 12px !important;
    }

    body.effects-body .emc-rating-score {
        font-size: 11px !important;
    }
}

@media (max-width: 420px) {
    body.effects-body .emc-rating-panel {
        width: calc(100% - 20px) !important;
    }

    body.effects-body .emc-rating-stat small {
        font-size: 10px !important;
    }

    body.effects-body .emc-rating-stat strong {
        font-size: 13px !important;
    }
}

/* Keep rating UI cheap. */
body.effects-body .emc-rating-panel,
body.effects-body .emc-rating-card,
body.effects-body .emc-rating-row,
body.effects-body .emc-rating-stat,
body.effects-body .emc-rating-avatar {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* EMC rating performance consolidated end */

/* EMC mobile selected effect progress fix start */

/*
   Fix selected player mobile cards:
   description must never overlap the progress bar.
*/

@media (max-width: 760px) {
    body.effects-body.player-selected .effect-panel {
        gap: 12px !important;
    }

    body.effects-body.player-selected .effect-card {
        position: relative !important;
        min-height: 118px !important;
        height: auto !important;

        display: grid !important;
        align-content: start !important;
        gap: 7px !important;

        padding: 13px 13px 62px 13px !important;
        overflow: hidden !important;
    }

    body.effects-body.player-selected .effect-name {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        padding-right: 86px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 13px !important;
        line-height: 1.28 !important;
    }

    body.effects-body.player-selected .effect-desc {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        padding-right: 0 !important;
        margin: 0 !important;

        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;

        font-size: 12px !important;
        line-height: 1.42 !important;
    }

    body.effects-body.player-selected .effect-progress-text {
        position: absolute !important;
        top: 11px !important;
        right: 11px !important;

        min-width: 70px !important;
        min-height: 28px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 8px !important;
        line-height: 1 !important;
        z-index: 2 !important;
    }

    body.effects-body.player-selected .effect-progress-bar {
        position: absolute !important;
        left: 13px !important;
        right: 13px !important;
        bottom: 13px !important;

        height: 15px !important;
        z-index: 1 !important;
    }
}

@media (max-width: 420px) {
    body.effects-body.player-selected .effect-card {
        min-height: 126px !important;
        padding-bottom: 66px !important;
    }

    body.effects-body.player-selected .effect-name {
        padding-right: 78px !important;
        font-size: 12px !important;
    }

    body.effects-body.player-selected .effect-desc {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    body.effects-body.player-selected .effect-progress-text {
        min-width: 64px !important;
        font-size: 7px !important;
    }
}

/* EMC mobile selected effect progress fix end */













/* EMC how stable typography start */

/*
   Final stable how-pages design:
   - English product names are not used in huge display titles
   - no weird wrapping
   - action/copy buttons stay under step text
   - bigger than minimal, but stable
*/

body.how-final-body {
    overflow-x: hidden !important;
    text-transform: none !important;
}

body.how-final-body .optional-button {
    display: none !important;
}

/* Page width */
body.how-final-body > .site-page {
    width: min(1020px, calc(100% - clamp(30px, 6vw, 78px))) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(22px, 3vw, 36px) !important;
    padding-bottom: clamp(40px, 5vw, 72px) !important;
}

body.how-final-body .page-header {
    margin-bottom: clamp(26px, 4vw, 46px) !important;
}

/* Intro */
body.how-final-body .guide-stack {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    gap: 18px !important;
    margin: 0 auto !important;
}

body.how-final-body .guide-intro {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
    margin: 0 0 8px !important;
    justify-items: start !important;
    text-align: left !important;
}

body.how-final-body .guide-label {
    width: fit-content !important;
    min-height: 0 !important;
    padding: 8px 11px !important;
    border: 3px solid rgba(42, 12, 11, .52) !important;
    background: rgba(255, 232, 220, .36) !important;
    color: rgba(42, 12, 11, .70) !important;
    box-shadow: 3px 3px 0 rgba(255, 0, 127, .08) !important;

    font-family: 'Press Start 2P', monospace !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.how-final-body .guide-title {
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 !important;

    color: var(--ink) !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(3.15rem, 5.35vw, 5.6rem) !important;
    font-weight: 800 !important;
    line-height: .86 !important;
    letter-spacing: -.058em !important;
    text-align: left !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Choice page */
body.how-choice-body .guide-stack {
    max-width: 940px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;
}

body.how-choice-body .guide-intro {
    grid-column: 1 / -1 !important;
}

body.how-choice-body .license-card {
    min-height: 176px !important;
    display: grid !important;
    align-items: end !important;

    padding: clamp(20px, 2.3vw, 28px) !important;
    border: 4px solid rgba(42, 12, 11, .72) !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.20), transparent 32%),
        rgba(255, 232, 220, .34) !important;
    box-shadow: 7px 7px 0 rgba(255, 0, 127, .12) !important;

    color: var(--ink) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transform: none !important;
}

body.how-choice-body .license-card:hover {
    background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.26), transparent 32%),
        rgba(255, 232, 220, .46) !important;
    box-shadow: 5px 5px 0 rgba(255, 0, 127, .20) !important;
    transform: translate(2px, 2px) !important;
}

body.how-choice-body .license-top {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
}

body.how-choice-body .license-num {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;

    border: 3px solid rgba(42, 12, 11, .52) !important;
    background: rgba(255, 255, 255, .18) !important;
    color: var(--pink) !important;

    font-family: 'Press Start 2P', monospace !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

body.how-choice-body .license-title {
    min-width: 0 !important;
    margin: 0 !important;

    color: var(--ink) !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(2.65rem, 4vw, 4.35rem) !important;
    font-weight: 800 !important;
    line-height: .88 !important;
    letter-spacing: -.048em !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Manual pages */
body.how-manual-body .guide-stack {
    max-width: 920px !important;
    gap: 16px !important;
}

body.how-manual-body .step-card {
    width: 100% !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 16px !important;

    padding: clamp(18px, 2.2vw, 24px) !important;
    border: 4px solid rgba(42, 12, 11, .66) !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 30%),
        rgba(255, 232, 220, .32) !important;
    box-shadow: 6px 6px 0 rgba(42, 12, 11, .08) !important;

    overflow: hidden !important;
}

body.how-manual-body .step-num {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;

    border: 3px solid rgba(42, 12, 11, .52) !important;
    background: rgba(255, 255, 255, .18) !important;
    color: var(--pink) !important;

    font-family: 'Press Start 2P', monospace !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

body.how-manual-body .step-body {
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
}

body.how-manual-body .step-title {
    min-width: 0 !important;
    margin: 0 !important;

    color: var(--ink) !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(2.15rem, 3.25vw, 3.35rem) !important;
    font-weight: 800 !important;
    line-height: .92 !important;
    letter-spacing: -.044em !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

body.how-manual-body .step-text {
    max-width: 680px !important;
    margin: 0 !important;

    color: rgba(42, 12, 11, .70) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Actions under the step text */
body.how-manual-body .step-actions {
    grid-column: 2 !important;
    width: min(390px, 100%) !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    justify-self: start !important;
    align-content: start !important;

    margin-top: 4px !important;
}

body.how-manual-body .guide-button,
body.how-manual-body .server-ip-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 14px !important;
    border: 4px solid rgba(42, 12, 11, .76) !important;
    background: rgba(42, 12, 11, .94) !important;
    color: var(--peach-light) !important;
    box-shadow: 5px 5px 0 rgba(255, 0, 127, .18) !important;

    font-family: 'Press Start 2P', monospace !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.how-manual-body .guide-button:hover,
body.how-manual-body .server-ip-button:hover {
    background: var(--pink) !important;
    color: var(--peach-light) !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 3px 3px 0 rgba(42, 12, 11, .22) !important;
}

/* Copy/IP button */
body.how-manual-body .server-ip-button {
    min-height: 66px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 5px !important;

    background: rgba(255, 255, 255, .18) !important;
    color: var(--ink) !important;
}

body.how-manual-body .server-ip-button span {
    display: block !important;
    width: 100% !important;

    font-family: 'JetBrains Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: normal !important;
}

body.how-manual-body .server-ip-button small {
    display: block !important;
    width: 100% !important;
    margin-top: 2px !important;

    font-family: 'Press Start 2P', monospace !important;
    font-size: 7px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    color: rgba(42, 12, 11, .62) !important;
}

/* Keep English words calm wherever they remain */
body.how-final-body .guide-label,
body.how-final-body .step-text,
body.how-final-body .guide-button,
body.how-final-body .server-ip-button {
    font-variant-ligatures: none !important;
}

/* Tablet */
@media (max-width: 900px) {
    body.how-final-body > .site-page {
        width: min(720px, calc(100% - 28px)) !important;
        padding-top: 18px !important;
    }

    body.how-final-body .guide-title {
        font-size: clamp(2.75rem, 11vw, 4.8rem) !important;
    }

    body.how-choice-body .guide-stack {
        max-width: 660px !important;
        grid-template-columns: 1fr !important;
    }

    body.how-choice-body .license-card {
        min-height: 126px !important;
    }

    body.how-choice-body .license-title {
        font-size: clamp(2.35rem, 9vw, 3.8rem) !important;
    }

    body.how-manual-body .step-card {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    body.how-manual-body .step-title {
        font-size: clamp(2.15rem, 8.2vw, 3.45rem) !important;
    }

    body.how-manual-body .step-actions {
        width: min(420px, 100%) !important;
    }
}

/* Mobile */
@media (max-width: 520px) {
    body.how-final-body > .site-page {
        width: calc(100% - 22px) !important;
    }

    body.how-final-body .guide-label {
        font-size: 8px !important;
    }

    body.how-final-body .guide-title {
        font-size: clamp(2.4rem, 11.8vw, 3.9rem) !important;
        line-height: .9 !important;
    }

    body.how-choice-body .license-card {
        min-height: 108px !important;
        padding: 16px !important;
    }

    body.how-choice-body .license-top {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.how-choice-body .license-num,
    body.how-manual-body .step-num {
        width: 42px !important;
        height: 42px !important;
    }

    body.how-choice-body .license-title {
        font-size: clamp(2.05rem, 9vw, 3rem) !important;
    }

    body.how-manual-body .step-card {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }

    body.how-manual-body .step-body,
    body.how-manual-body .step-actions {
        grid-column: 1 !important;
    }

    body.how-manual-body .step-title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }

    body.how-manual-body .step-text {
        font-size: 14px !important;
    }

    body.how-manual-body .guide-button {
        font-size: 8px !important;
    }

    body.how-manual-body .server-ip-button span {
        font-size: 14px !important;
    }
}

/* EMC how stable typography end */

/* EMC how choice text fit start */

/*
   Fix how.html choice cards:
   "Есть лицензия" / "Нет лицензии" must always fit.
*/

body.how-choice-body .license-card {
    min-height: 168px !important;
    align-items: stretch !important;
    padding: 22px !important;
}

body.how-choice-body .license-top {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    align-content: space-between !important;
    align-items: start !important;
    gap: 18px !important;
}

body.how-choice-body .license-num {
    width: 42px !important;
    height: 42px !important;
    justify-self: start !important;
}

body.how-choice-body .license-title {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    display: block !important;
    margin: 0 !important;

    font-size: clamp(2.2rem, 3.05vw, 3.25rem) !important;
    line-height: .95 !important;
    letter-spacing: -.035em !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
    body.how-choice-body .license-title {
        font-size: clamp(1.95rem, 3vw, 2.65rem) !important;
    }
}

@media (max-width: 900px) {
    body.how-choice-body .license-card {
        min-height: 132px !important;
        padding: 18px !important;
    }

    body.how-choice-body .license-top {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 14px !important;
    }

    body.how-choice-body .license-num {
        width: 44px !important;
        height: 44px !important;
    }

    body.how-choice-body .license-title {
        font-size: clamp(2rem, 8vw, 3.15rem) !important;
        line-height: .92 !important;
    }
}

@media (max-width: 520px) {
    body.how-choice-body .license-card {
        min-height: 104px !important;
        padding: 15px !important;
    }

    body.how-choice-body .license-top {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.how-choice-body .license-num {
        width: 40px !important;
        height: 40px !important;
    }

    body.how-choice-body .license-title {
        font-size: clamp(1.65rem, 7.4vw, 2.45rem) !important;
        line-height: .96 !important;
    }
}

/* EMC how choice text fit end */

/* EMC how choice hover mobile polish start */

/*
   how.html polish:
   - desktop hover highlights choice title in pink
   - mobile layout is stable and readable
*/

@media (hover: hover) and (pointer: fine) {
    body.how-choice-body .license-card .license-title {
        transition: color .12s ease, text-shadow .12s ease !important;
    }

    body.how-choice-body .license-card:hover .license-title {
        color: var(--pink) !important;
        text-shadow: 1px 1px 0 rgba(255,255,255,.26) !important;
    }

    body.how-choice-body .license-card:hover .license-num {
        color: var(--pink) !important;
        border-color: rgba(255, 0, 127, .62) !important;
        background: rgba(255, 0, 127, .08) !important;
    }
}

/* Mobile/tablet hardening */
@media (max-width: 900px) {
    body.how-choice-body > .site-page {
        width: min(680px, calc(100% - 28px)) !important;
        padding-top: 18px !important;
    }

    body.how-choice-body .guide-stack {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.how-choice-body .guide-intro {
        margin-bottom: 2px !important;
    }

    body.how-choice-body .license-card {
        min-height: 118px !important;
        padding: 16px !important;
        border-width: 3px !important;
        box-shadow: 4px 4px 0 rgba(255, 0, 127, .10) !important;
    }

    body.how-choice-body .license-top {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body.how-choice-body .license-num {
        width: 42px !important;
        height: 42px !important;
        font-size: 8px !important;
    }

    body.how-choice-body .license-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: .96 !important;
        letter-spacing: -.032em !important;
        color: var(--ink) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body.how-choice-body .license-card:active .license-title {
        color: var(--pink) !important;
    }

    body.how-choice-body .license-card:active .license-num {
        color: var(--pink) !important;
        border-color: rgba(255, 0, 127, .58) !important;
    }
}

@media (max-width: 520px) {
    body.how-choice-body > .site-page {
        width: calc(100% - 22px) !important;
    }

    body.how-choice-body .guide-title {
        font-size: clamp(2.3rem, 11.4vw, 3.55rem) !important;
        line-height: .92 !important;
    }

    body.how-choice-body .license-card {
        min-height: 104px !important;
        padding: 14px !important;
    }

    body.how-choice-body .license-top {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    body.how-choice-body .license-num {
        width: 38px !important;
        height: 38px !important;
    }

    body.how-choice-body .license-title {
        font-size: clamp(1.7rem, 7.6vw, 2.35rem) !important;
        line-height: 1 !important;
        letter-spacing: -.026em !important;
    }
}

/* EMC how choice hover mobile polish end */

/* EMC effects names no ellipsis final */
body.effects-body .rank-table {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

body.effects-body .rank-head-row,
body.effects-body .rank-row {
    grid-template-columns: 32px 34px minmax(14ch, 1fr) max-content !important;
    gap: 6px !important;
    align-items: center !important;
}

body.effects-body .rank-row {
    min-width: 250px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

body.effects-body .rank-place {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

body.effects-body .rank-row .skin-head {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
}

body.effects-body .rank-name {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
}

body.effects-body .rank-score {
    justify-self: end !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    letter-spacing: -0.04em !important;
}

body.effects-body .emc-rating-name,
body.effects-body .emc-rank-name,
body.effects-body .rating-name,
body.effects-body .rank-player-name,
body.effects-body .emc-rating-player-name {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: none !important;
}

body.effects-body.player-selected .skin-stage-wrap,
body.effects-body.player-selected .selected-player {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
    overflow: visible !important;
}

body.effects-body.player-selected .selected-player span,
body.effects-body.player-selected #selectedPlayerName {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    font-family: 'JetBrains Mono', monospace !important;
    font-size: clamp(28px, 4.6vw, 46px) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.075em !important;
    text-align: center !important;
    text-transform: none !important;
    transform: none !important;
}

body.effects-body.player-selected .selected-player small,
body.effects-body.player-selected #selectedPlayerPlace {
    width: 100% !important;
    text-align: center !important;
}

@media (min-width: 1480px) {
    body.effects-body:not(.player-selected) .rank-name {
        font-size: 11.5px !important;
    }

    body.effects-body:not(.player-selected) .rank-row {
        min-width: 270px !important;
    }
}

@media (max-width: 620px) {
    body.effects-body .rank-head-row,
    body.effects-body .rank-row {
        grid-template-columns: 28px 30px minmax(14ch, 1fr) max-content !important;
        gap: 5px !important;
    }

    body.effects-body .rank-row {
        min-width: 238px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    body.effects-body .rank-place {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
    }

    body.effects-body .rank-row .skin-head {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        flex-basis: 28px !important;
    }

    body.effects-body .rank-name {
        font-size: 10.5px !important;
        letter-spacing: -0.075em !important;
    }

    body.effects-body .rank-score {
        font-size: 9.5px !important;
    }

    body.effects-body.player-selected .selected-player span,
    body.effects-body.player-selected #selectedPlayerName {
        font-size: clamp(24px, 7.6vw, 36px) !important;
        letter-spacing: -0.085em !important;
    }
}