/* emc responsive stability layer v620 */
html {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100dvh;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

:where(.site-page, .site-shell, .shop-shell, .checkout-shell, .skin-shell, .admin) {
    width: min(var(--emc-page-max, 1120px), calc(100% - clamp(24px, 6vw, 56px))) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.site-page,
.site-shell,
.skin-shell {
    min-height: auto !important;
    padding-top: clamp(20px, 3vw, 34px) !important;
    padding-bottom: clamp(24px, 4vw, 48px) !important;
}

.shop-shell {
    --emc-page-max: 1120px;
}

.checkout-shell {
    --emc-page-max: 860px;
}

.effects-center {
    --emc-page-max: 900px;
}

.page-header,
.site-header,
.effects-header,
.top {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: clamp(14px, 3vw, 24px) !important;
}

.site-header .brand,
.page-header .logo-small,
.effects-header .logo-small,
.top .brand {
    grid-column: 1 !important;
    justify-self: start !important;
}

.site-header .back-link,
.page-header .back-link,
.effects-header .back-link,
.top .back-link {
    grid-column: 3 !important;
    justify-self: end !important;
}

/* footer is part of the page, not a detached black overlay */
.site-footer,
body.effects-body .site-footer,
.admin .site-footer,
.home-bottom .site-footer {
    display: block !important;
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    clear: both !important;
    float: none !important;
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: clamp(30px, 5vw, 56px) 0 0 !important;
    padding: 0 0 clamp(22px, 3vw, 34px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    z-index: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    text-transform: none !important;
}

.site-footer-card,
.site-footer-brand,
.site-footer-title,
.site-footer-text,
.site-footer-actions {
    display: none !important;
}

.site-footer-inner {
    width: min(var(--emc-page-max, 1120px), calc(100% - clamp(24px, 6vw, 56px))) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 13px 0 0 !important;
    border-top: 3px solid rgba(42, 12, 11, .22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
}

.site-footer-link,
.site-footer-dev {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    color: rgba(42, 12, 11, .68) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

.site-footer-link::before,
.site-footer-link::after,
.site-footer-dev::before,
.site-footer-dev::after {
    content: none !important;
    display: none !important;
}

.site-footer-link:hover,
.site-footer-dev:hover {
    color: var(--pink) !important;
    background: transparent !important;
}

.site-footer-dev span,
.site-footer-dev b,
.site-footer-dev small {
    color: inherit !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

.site-footer-dev span {
    opacity: .62 !important;
}

/* home/menu stability */
.home-layout,
.home-main,
.home-menu,
.home-bottom,
.home-bottom-grid {
    min-width: 0 !important;
}

.home-bottom-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.home-label,
.big-title,
.server-copy {
    max-width: 100% !important;
}

/* common responsive grids */
.shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important;
    gap: clamp(16px, 3vw, 24px) !important;
}

.shop-card,
.checkout-card,
.skin-card,
.skin-help,
.license-card,
.step-card,
.support-panel,
.legal-card {
    overflow-wrap: anywhere !important;
}

.shop-card {
    min-height: auto !important;
}

.skin-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 280px), .85fr) !important;
}

.page-hero {
    min-width: 0 !important;
}

/* effects page: remove resize spacer and make normal document flow */
.effects-footer-spacer {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.effects-body,
body.effects-body main,
body.effects-body .site-page,
body.effects-body .effects-center,
body.effects-body .players-board,
body.effects-body .player-detail,
body.effects-body .effects-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.effects-body .site-page.effects-center {
    width: min(900px, calc(100% - clamp(24px, 6vw, 56px))) !important;
    min-height: 0 !important;
    padding-bottom: clamp(22px, 4vw, 42px) !important;
}

body.effects-body .player-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)) !important;
    gap: clamp(12px, 2vw, 18px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

body.effects-body .player-card,
body.effects-body .effect-card,
body.effects-body .rank-panel {
    overflow-wrap: anywhere !important;
}

body.effects-body .player-detail {
    width: min(940px, 100%) !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap: clamp(16px, 3vw, 24px) !important;
}

body.effects-body:not(.player-selected) .player-detail {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.effects-body.player-selected .player-detail {
    display: grid !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

body.effects-body.player-selected .players-board,
body.effects-body.player-selected .rank-panel {
    display: none !important;
}

body.effects-body .rank-panel {
    position: static !important;
    inset: auto !important;
    width: min(900px, calc(100% - clamp(24px, 6vw, 56px))) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 20px auto 0 !important;
    animation: none !important;
}

body.effects-body .rank-table {
    max-height: none !important;
    overflow: visible !important;
}

body.effects-body .rank-row {
    grid-template-columns: 42px 34px minmax(0, 1fr) minmax(46px, auto) !important;
}

@media (min-width: 1480px) {
    body.effects-body .site-page.effects-center {
        width: min(720px, max(560px, calc(100vw - 760px))) !important;
    }

    body.effects-body .rank-panel {
        position: fixed !important;
        top: 96px !important;
        bottom: 28px !important;
        width: clamp(260px, 17vw, 330px) !important;
        max-height: calc(100dvh - 124px) !important;
        overflow: auto !important;
        margin: 0 !important;
    }

    body.effects-body .rank-panel-left {
        left: clamp(16px, 2vw, 30px) !important;
        right: auto !important;
    }

    body.effects-body .rank-panel-right {
        right: clamp(16px, 2vw, 30px) !important;
        left: auto !important;
    }
}

@media (max-width: 900px) {
    .page-header,
    .site-header,
    .effects-header,
    .top {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .site-header .brand,
    .page-header .logo-small,
    .effects-header .logo-small,
    .top .brand,
    .site-header .back-link,
    .page-header .back-link,
    .effects-header .back-link,
    .top .back-link,
    .mini-profile-center {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .skin-layout,
    body.effects-body .player-detail {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    :where(.site-page, .site-shell, .shop-shell, .checkout-shell, .skin-shell, .admin),
    .site-footer-inner,
    body.effects-body .site-page.effects-center,
    body.effects-body .rank-panel {
        width: calc(100% - 24px) !important;
    }

    .site-page,
    .site-shell,
    .skin-shell {
        padding-top: 18px !important;
        padding-bottom: 30px !important;
    }

    .home-page {
        padding: 18px 12px !important;
    }

    .big-title {
        font-size: clamp(3rem, 17vw, 4.6rem) !important;
    }

    .home-row {
        min-height: 76px !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .home-label {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: clamp(1.65rem, 9vw, 2.8rem) !important;
    }

    .server-copy {
        width: 100% !important;
        font-size: clamp(.9rem, 4.2vw, 1.15rem) !important;
    }

    .site-footer {
        margin-top: 28px !important;
        padding-bottom: 22px !important;
    }

    .site-footer-inner {
        justify-content: flex-start !important;
        gap: 7px 14px !important;
    }

    .site-footer-link,
    .site-footer-dev,
    .site-footer-dev span,
    .site-footer-dev b,
    .site-footer-dev small {
        font-size: 11px !important;
        white-space: normal !important;
    }

    .site-footer-dev {
        width: 100% !important;
    }

    body.effects-body .rank-row {
        grid-template-columns: 34px 30px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
    }
}

/* staging design repair v720
   Narrow fixes only. Removes the bad v710 layout overrides and repairs heads/shop/menu/rank text. */

/* Short regular pages: keep footer at the bottom without making it a fixed overlay. */
@supports selector(body:has(> .site-page)) {
    body:not(.effects-body):has(> .site-page),
    body:not(.effects-body):has(> .site-shell),
    body:not(.effects-body):has(> .admin) {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.effects-body):has(> .site-page) > .site-page,
    body:not(.effects-body):has(> .site-shell) > .site-shell,
    body:not(.effects-body):has(> .admin) > .admin {
        flex: 1 0 auto !important;
    }

    body:not(.effects-body):has(> .site-page) > .site-footer,
    body:not(.effects-body):has(> .site-shell) > .site-footer,
    body:not(.effects-body):has(> .admin) > .site-footer {
        margin-top: auto !important;
    }
}

/* Home #menu: no cropping, no overlap. */
.open-menu-instant .home-layout,
.pastel-panel.slide-in .home-layout {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: clamp(14px, 2.4vh, 28px) !important;
}

.open-menu-instant .home-main,
.pastel-panel.slide-in .home-main {
    grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr) !important;
    gap: clamp(20px, 3vw, 38px) !important;
    align-items: center !important;
}

.open-menu-instant .home-question,
.pastel-panel.slide-in .home-question {
    min-width: 0 !important;
    overflow: visible !important;
    transform: none !important;
}

.open-menu-instant .big-title,
.pastel-panel.slide-in .big-title {
    max-width: none !important;
    font-size: clamp(3.2rem, 8vw, 8.9rem) !important;
    line-height: .74 !important;
    letter-spacing: -.08em !important;
}

.open-menu-instant .home-label,
.pastel-panel.slide-in .home-label {
    font-size: clamp(2rem, 3.8vw, 4.25rem) !important;
}

.open-menu-instant .home-bottom,
.pastel-panel.slide-in .home-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 48px !important;
}

/* The index menu is a fixed overlay, so the normal footer must be lifted onto it. */
.open-menu-instant body > .site-footer,
body:has(.pastel-panel.slide-in) > .site-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 7000 !important;
    margin: 0 !important;
    padding: 8px 0 10px !important;
    background: rgba(255, 232, 220, .72) !important;
    border-top: 2px solid rgba(42, 12, 11, .18) !important;
    backdrop-filter: blur(8px) !important;
}

.open-menu-instant body > .site-footer .site-footer-inner,
body:has(.pastel-panel.slide-in) > .site-footer .site-footer-inner {
    width: min(1280px, calc(100% - clamp(24px, 6vw, 56px))) !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

@media (max-width: 1120px) {
    .open-menu-instant .home-main,
    .pastel-panel.slide-in .home-main {
        display: block !important;
        height: auto !important;
    }

    .open-menu-instant .home-question,
    .pastel-panel.slide-in .home-question {
        padding: clamp(18px, 4vw, 28px) 0 clamp(18px, 4vw, 26px) !important;
    }

    .open-menu-instant .home-menu,
    .pastel-panel.slide-in .home-menu {
        border-left: 0 !important;
    }

    .open-menu-instant .home-label,
    .pastel-panel.slide-in .home-label {
        white-space: normal !important;
        overflow-wrap: normal !important;
    }
}

@media (max-width: 640px) {
    .open-menu-instant .home-bottom,
    .pastel-panel.slide-in .home-bottom {
        padding-bottom: 76px !important;
    }

    .open-menu-instant body > .site-footer,
    body:has(.pastel-panel.slide-in) > .site-footer {
        padding: 8px 12px 10px !important;
    }

    .open-menu-instant body > .site-footer .site-footer-inner,
    body:has(.pastel-panel.slide-in) > .site-footer .site-footer-inner {
        width: 100% !important;
    }
}

/* Shop: align buttons without stretching one button into a huge block. */
.shop-grid {
    align-items: stretch !important;
}

.shop-card {
    min-height: 440px !important;
    display: flex !important;
    flex-direction: column !important;
}

.shop-card-bottom {
    width: 100% !important;
    margin-top: auto !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

.shop-price,
.shop-card-bottom .shop-button {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.25 !important;
}

.shop-card-bottom .shop-button {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 820px) {
    .shop-card {
        min-height: auto !important;
    }
}

@media (max-width: 620px) {
    .shop-card-bottom {
        grid-template-columns: 1fr !important;
    }

    .shop-price,
    .shop-card-bottom .shop-button {
        width: 100% !important;
    }
}

/* Effects: restore real Minecraft head crop while JS/canvas is loading or blocked by CORS. */
body.effects-body .skin-head[data-skin-url],
body.effects-body .player-head[data-skin-url],
body.effects-body .selected-skin-head[data-skin-url],
body.effects-body .skin-head.skin-head-real,
body.effects-body .player-head.skin-head-real,
body.effects-body .selected-skin-head.skin-head-real {
    background-size: 800% 800% !important;
    background-position: 14.285714% 14.285714% !important;
    background-repeat: no-repeat !important;
    image-rendering: pixelated !important;
    overflow: hidden !important;
}

/* If skin-heads.js successfully draws the cropped canvas, it uses inline !important and wins over this fallback. */
body.effects-body .rank-row .skin-head,
body.effects-body .player-card .player-head {
    flex: 0 0 auto !important;
}

/* Effects ratings: give side tables enough width and make the totals readable instead of squeezed. */
body.effects-body .rank-meta-line {
    display: block !important;
    padding: 8px 0 12px !important;
    border-bottom: 4px solid var(--ink) !important;
    margin-bottom: 10px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: clamp(10px, .78vw, 12px) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
    color: rgba(42, 12, 11, .80) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    letter-spacing: 0 !important;
}

body.effects-body .rank-head-row,
body.effects-body .rank-row {
    grid-template-columns: 54px 48px minmax(0, 1fr) 62px !important;
    gap: 9px !important;
    align-items: center !important;
}

body.effects-body .rank-head-row span:first-child,
body.effects-body .rank-place,
body.effects-body .rank-score {
    white-space: nowrap !important;
}

body.effects-body .rank-name {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

@media (min-width: 1480px) {
    body.effects-body .site-page.effects-center {
        width: min(720px, max(560px, calc(100vw - 860px))) !important;
    }

    body.effects-body .rank-panel {
        width: clamp(330px, 19vw, 390px) !important;
        padding: 18px !important;
    }
}

@media (max-width: 640px) {
    body.effects-body .rank-head-row,
    body.effects-body .rank-row {
        grid-template-columns: 42px 36px minmax(0, 1fr) 50px !important;
        gap: 6px !important;
    }

    body.effects-body .rank-meta-line {
        font-size: 10px !important;
    }
}

/* Selected effects player: avatar/name on top, buff/debuff selection below. */
body.effects-body.player-selected .player-detail {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    margin: 24px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
}

body.effects-body.player-selected .skin-stage-wrap {
    order: 1 !important;
    justify-items: center !important;
}

body.effects-body.player-selected .effect-store-single {
    order: 2 !important;
    width: 100% !important;
}

body.effects-body.player-selected .skin-head-stage {
    width: min(292px, 100%) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
}

/* staging menu soft cards final v9 start */

/*
   #menu visual direction:
   - desktop: title left, cards right, only one center divider
   - mobile: no divider, clean vertical cards
   - no row stripes on buttons
*/

html.open-menu-instant body {
    overflow: hidden !important;
    padding-bottom: 0 !important;
    color: var(--ink) !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 55%, var(--peach-hot) 100%) !important;
}

html.open-menu-instant #transition-overlay,
body:has(.pastel-panel.slide-in) #transition-overlay {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

html.open-menu-instant .pastel-panel,
body:has(.pastel-panel.slide-in) .pastel-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

html.open-menu-instant .home-page,
body:has(.pastel-panel.slide-in) .home-page {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: clamp(22px, 3vw, 38px) clamp(24px, 4vw, 54px) 72px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
}

html.open-menu-instant .home-layout,
body:has(.pastel-panel.slide-in) .home-layout {
    width: min(1280px, 100%) !important;
    height: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: clamp(18px, 3vh, 30px) !important;
    overflow: hidden !important;
}

html.open-menu-instant .home-top,
body:has(.pastel-panel.slide-in) .home-top {
    padding-bottom: 14px !important;
    border-bottom: 4px solid rgba(42,12,11,.9) !important;
}

html.open-menu-instant .home-main,
body:has(.pastel-panel.slide-in) .home-main {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(410px, .92fr) minmax(470px, 1.08fr) !important;
    align-items: center !important;
    column-gap: clamp(58px, 7vw, 106px) !important;
    padding: clamp(10px, 2vh, 22px) 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

html.open-menu-instant .home-main::after,
body:has(.pastel-panel.slide-in) .home-main::after {
    content: "" !important;
    position: absolute !important;
    top: 7% !important;
    bottom: 7% !important;
    left: calc(50% - 3px) !important;
    width: 6px !important;
    background: rgba(42,12,11,.9) !important;
    box-shadow: 7px 0 0 rgba(255,0,127,.16) !important;
    pointer-events: none !important;
}

html.open-menu-instant .home-question,
body:has(.pastel-panel.slide-in) .home-question {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    text-align: left !important;
}

html.open-menu-instant .big-title,
body:has(.pastel-panel.slide-in) .big-title {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(5.35rem, 7.15vw, 7.75rem) !important;
    line-height: .75 !important;
    letter-spacing: -.08em !important;
    white-space: nowrap !important;
    color: var(--ink) !important;
    text-align: left !important;
    overflow: visible !important;
}

html.open-menu-instant .big-title span,
body:has(.pastel-panel.slide-in) .big-title span {
    display: block !important;
    color: var(--pink) !important;
    font-size: .96em !important;
    letter-spacing: -.083em !important;
}

html.open-menu-instant .home-menu,
body:has(.pastel-panel.slide-in) .home-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(14px, 2vh, 20px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
}

html.open-menu-instant .home-row,
body:has(.pastel-panel.slide-in) .home-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(92px, 11vh, 122px) !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns: clamp(46px, 4.5vw, 62px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(14px, 2vw, 24px) !important;

    padding: clamp(14px, 1.8vh, 20px) clamp(16px, 2.2vw, 28px) !important;

    border: 4px solid rgba(42,12,11,.92) !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: 8px 8px 0 rgba(255,0,127,.18) !important;

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

html.open-menu-instant .home-row::before,
html.open-menu-instant .home-row::after,
body:has(.pastel-panel.slide-in) .home-row::before,
body:has(.pastel-panel.slide-in) .home-row::after {
    display: none !important;
    content: none !important;
}

html.open-menu-instant .home-row:hover,
body:has(.pastel-panel.slide-in) .home-row:hover {
    background: rgba(255,255,255,.28) !important;
    box-shadow: 5px 5px 0 rgba(255,0,127,.30) !important;
    transform: translate(3px, 3px) !important;
}

html.open-menu-instant .home-num,
body:has(.pastel-panel.slide-in) .home-num {
    font-family: 'Press Start 2P', monospace !important;
    font-size: clamp(.68rem, .9vw, .84rem) !important;
    line-height: 1 !important;
    color: var(--pink) !important;
}

html.open-menu-instant .home-label,
body:has(.pastel-panel.slide-in) .home-label {
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(2.45rem, 3.6vw, 4rem) !important;
    line-height: .85 !important;
    letter-spacing: -.043em !important;
}

html.open-menu-instant .home-bottom,
body:has(.pastel-panel.slide-in) .home-bottom {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 14px !important;
    border-top: 4px solid rgba(42,12,11,.9) !important;
}

html.open-menu-instant .home-bottom-grid,
body:has(.pastel-panel.slide-in) .home-bottom-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
    gap: 22px !important;
    align-items: end !important;
}

html.open-menu-instant .server-copy,
body:has(.pastel-panel.slide-in) .server-copy {
    width: auto !important;
    max-width: 100% !important;
    min-height: 56px !important;
    font-size: clamp(1rem, 1.9vw, 1.55rem) !important;
}

/* menu footer */
html.open-menu-instant .site-footer,
body:has(.pastel-panel.slide-in) .site-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 7000 !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 8px clamp(16px, 4vw, 44px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(42,12,11,.20) !important;
    background: rgba(255,232,220,.76) !important;
    color: rgba(42,12,11,.82) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
}

html.open-menu-instant .site-footer-inner,
body:has(.pastel-panel.slide-in) .site-footer-inner {
    width: min(760px, 100%) !important;
    min-height: 30px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px 22px !important;
    flex-wrap: wrap !important;
}

html.open-menu-instant .site-footer-link,
html.open-menu-instant .site-footer-dev,
body:has(.pastel-panel.slide-in) .site-footer-link,
body:has(.pastel-panel.slide-in) .site-footer-dev {
    color: rgba(42,12,11,.76) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: .95 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
}

/* medium */
@media (max-width: 1120px) {
    html.open-menu-instant .home-main,
    body:has(.pastel-panel.slide-in) .home-main {
        grid-template-columns: minmax(330px, .88fr) minmax(400px, 1.12fr) !important;
        column-gap: clamp(44px, 5.8vw, 74px) !important;
    }

    html.open-menu-instant .big-title,
    body:has(.pastel-panel.slide-in) .big-title {
        font-size: clamp(4.2rem, 7vw, 5.85rem) !important;
    }

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

    html.open-menu-instant .home-row,
    body:has(.pastel-panel.slide-in) .home-row {
        min-height: clamp(82px, 10.4vh, 104px) !important;
    }
}

/* mobile */
@media (max-width: 860px) {
    html.open-menu-instant body {
        overflow-y: auto !important;
    }

    html.open-menu-instant #transition-overlay,
    body:has(.pastel-panel.slide-in) #transition-overlay {
        overflow-y: auto !important;
    }

    html.open-menu-instant .pastel-panel,
    body:has(.pastel-panel.slide-in) .pastel-panel {
        position: relative !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    html.open-menu-instant .home-page,
    body:has(.pastel-panel.slide-in) .home-page {
        height: auto !important;
        min-height: 100dvh !important;
        padding: 18px 16px 112px !important;
        overflow: visible !important;
    }

    html.open-menu-instant .home-layout,
    body:has(.pastel-panel.slide-in) .home-layout {
        width: min(100%, 560px) !important;
        height: auto !important;
        min-height: calc(100dvh - 130px) !important;
        grid-template-rows: auto auto auto !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    html.open-menu-instant .home-top,
    body:has(.pastel-panel.slide-in) .home-top {
        border-bottom-width: 3px !important;
        padding-bottom: 12px !important;
    }

    html.open-menu-instant .home-main,
    body:has(.pastel-panel.slide-in) .home-main {
        height: auto !important;
        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
        padding: 10px 0 2px !important;
        overflow: visible !important;
    }

    html.open-menu-instant .home-main::after,
    body:has(.pastel-panel.slide-in) .home-main::after {
        display: none !important;
    }

    html.open-menu-instant .big-title,
    body:has(.pastel-panel.slide-in) .big-title {
        width: 100% !important;
        font-size: clamp(3.35rem, 14.4vw, 4.65rem) !important;
        line-height: .8 !important;
        letter-spacing: -.072em !important;
        white-space: nowrap !important;
    }

    html.open-menu-instant .home-menu,
    body:has(.pastel-panel.slide-in) .home-menu {
        gap: 12px !important;
    }

    html.open-menu-instant .home-row,
    body:has(.pastel-panel.slide-in) .home-row {
        min-height: 76px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        padding: 12px 14px !important;
        border-width: 3px !important;
        box-shadow: 5px 5px 0 rgba(255,0,127,.16) !important;
    }

    html.open-menu-instant .home-label,
    body:has(.pastel-panel.slide-in) .home-label {
        font-size: clamp(1.65rem, 7.8vw, 2.38rem) !important;
        line-height: .88 !important;
        letter-spacing: -.04em !important;
    }

    html.open-menu-instant .home-bottom,
    body:has(.pastel-panel.slide-in) .home-bottom {
        border-top-width: 3px !important;
        padding-top: 12px !important;
    }

    html.open-menu-instant .home-bottom-grid,
    body:has(.pastel-panel.slide-in) .home-bottom-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    html.open-menu-instant .server-copy,
    body:has(.pastel-panel.slide-in) .server-copy {
        width: 100% !important;
        min-height: 50px !important;
        font-size: clamp(.86rem, 4.3vw, 1.08rem) !important;
        border-width: 3px !important;
    }

    html.open-menu-instant .site-footer,
    body:has(.pastel-panel.slide-in) .site-footer {
        min-height: 92px !important;
        padding: 8px 14px 10px !important;
    }

    html.open-menu-instant .site-footer-inner,
    body:has(.pastel-panel.slide-in) .site-footer-inner {
        width: min(430px, 100%) !important;
        justify-content: center !important;
        gap: 5px 14px !important;
    }

    html.open-menu-instant .site-footer-link,
    body:has(.pastel-panel.slide-in) .site-footer-link {
        order: 1 !important;
        font-size: 10px !important;
    }

    html.open-menu-instant .site-footer-dev,
    body:has(.pastel-panel.slide-in) .site-footer-dev {
        order: 2 !important;
        width: 100% !important;
        display: grid !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        margin-top: 2px !important;
        text-align: center !important;
        font-size: 10px !important;
        white-space: normal !important;
    }

    html.open-menu-instant .site-footer-dev span,
    html.open-menu-instant .site-footer-dev b,
    body:has(.pastel-panel.slide-in) .site-footer-dev span,
    body:has(.pastel-panel.slide-in) .site-footer-dev b {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 10px !important;
        line-height: 1.18 !important;
    }
}

@media (max-width: 420px) {
    html.open-menu-instant .home-page,
    body:has(.pastel-panel.slide-in) .home-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 114px !important;
    }

    html.open-menu-instant .big-title,
    body:has(.pastel-panel.slide-in) .big-title {
        font-size: clamp(3.05rem, 14.1vw, 3.9rem) !important;
    }

    html.open-menu-instant .home-row,
    body:has(.pastel-panel.slide-in) .home-row {
        min-height: 70px !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        padding: 10px 12px !important;
    }

    html.open-menu-instant .home-num,
    body:has(.pastel-panel.slide-in) .home-num {
        font-size: .56rem !important;
    }

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

/* staging menu soft cards final v9 end */

/* staging menu title balance fix10 start */

/* Desktop only: make "ЧТО НУЖНО?" bigger and closer to the center divider */
@media (min-width: 861px) {
    html.open-menu-instant .home-main,
    body:has(.pastel-panel.slide-in) .home-main {
        grid-template-columns: minmax(470px, .98fr) minmax(470px, 1.02fr) !important;
        column-gap: clamp(42px, 5.2vw, 78px) !important;
    }

    html.open-menu-instant .home-question,
    body:has(.pastel-panel.slide-in) .home-question {
        justify-content: flex-end !important;
        padding-right: clamp(8px, 1.2vw, 18px) !important;
    }

    html.open-menu-instant .big-title,
    body:has(.pastel-panel.slide-in) .big-title {
        font-size: clamp(6rem, 8vw, 8.75rem) !important;
        line-height: .735 !important;
        letter-spacing: -.084em !important;
    }

    html.open-menu-instant .big-title span,
    body:has(.pastel-panel.slide-in) .big-title span {
        font-size: .98em !important;
        letter-spacing: -.087em !important;
    }
}

@media (min-width: 861px) and (max-width: 1120px) {
    html.open-menu-instant .home-main,
    body:has(.pastel-panel.slide-in) .home-main {
        grid-template-columns: minmax(390px, .94fr) minmax(400px, 1.06fr) !important;
        column-gap: clamp(36px, 4.5vw, 56px) !important;
    }

    html.open-menu-instant .big-title,
    body:has(.pastel-panel.slide-in) .big-title {
        font-size: clamp(4.9rem, 7.8vw, 6.35rem) !important;
    }
}

/* staging menu title balance fix10 end */

/* staging mobile footer slim fix11 start */

/* Make #menu mobile footer thinner while keeping dev credit centered at bottom */
@media (max-width: 860px) {
    html.open-menu-instant .site-footer,
    body:has(.pastel-panel.slide-in) .site-footer {
        min-height: 62px !important;
        padding: 6px 12px 7px !important;
    }

    html.open-menu-instant .site-footer-inner,
    body:has(.pastel-panel.slide-in) .site-footer-inner {
        width: min(430px, 100%) !important;
        min-height: 48px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 3px 12px !important;
    }

    html.open-menu-instant .site-footer-link,
    body:has(.pastel-panel.slide-in) .site-footer-link {
        order: 1 !important;
        width: auto !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    html.open-menu-instant .site-footer-dev,
    body:has(.pastel-panel.slide-in) .site-footer-dev {
        order: 2 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        justify-items: center !important;
        gap: 0 !important;
        margin-top: 0 !important;
        text-align: center !important;
    }

    html.open-menu-instant .site-footer-dev span,
    html.open-menu-instant .site-footer-dev b,
    body:has(.pastel-panel.slide-in) .site-footer-dev span,
    body:has(.pastel-panel.slide-in) .site-footer-dev b {
        font-size: 9px !important;
        line-height: 1.05 !important;
    }

    html.open-menu-instant .home-page,
    body:has(.pastel-panel.slide-in) .home-page {
        padding-bottom: 82px !important;
    }

    html.open-menu-instant .home-layout,
    body:has(.pastel-panel.slide-in) .home-layout {
        min-height: calc(100dvh - 98px) !important;
    }
}

@media (max-width: 420px) {
    html.open-menu-instant .site-footer,
    body:has(.pastel-panel.slide-in) .site-footer {
        min-height: 58px !important;
        padding: 5px 10px 6px !important;
    }

    html.open-menu-instant .site-footer-inner,
    body:has(.pastel-panel.slide-in) .site-footer-inner {
        min-height: 44px !important;
        gap: 2px 10px !important;
    }

    html.open-menu-instant .site-footer-link,
    html.open-menu-instant .site-footer-dev span,
    html.open-menu-instant .site-footer-dev b,
    body:has(.pastel-panel.slide-in) .site-footer-link,
    body:has(.pastel-panel.slide-in) .site-footer-dev span,
    body:has(.pastel-panel.slide-in) .site-footer-dev b {
        font-size: 8.5px !important;
    }

    html.open-menu-instant .home-page,
    body:has(.pastel-panel.slide-in) .home-page {
        padding-bottom: 76px !important;
    }
}

/* staging mobile footer slim fix11 end */

/* staging motion smoothing fix24 start */

/*
   Motion direction:
   - animate only opacity/transform/color/background
   - no heavy blur/filter on fullscreen layers
   - no loader flash on every page click
   - keep animations, but make them shorter and consistent
*/

:root {
    --emc-motion-fast: 140ms;
    --emc-motion-main: 260ms;
    --emc-motion-slow: 380ms;
    --emc-motion-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Avoid global smooth scroll / layout surprises */
html {
    scroll-behavior: auto !important;
}

/* Fullscreen canvas: opacity only, no blur */
#bg-canvas {
    transition: opacity var(--emc-motion-main) var(--emc-motion-ease) !important;
    will-change: opacity !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

#bg-canvas.fade-out {
    opacity: .18 !important;
    filter: none !important;
}

/* Landing core: short and clean */
.core {
    transition:
        opacity var(--emc-motion-main) var(--emc-motion-ease),
        transform var(--emc-motion-main) var(--emc-motion-ease) !important;
    will-change: opacity, transform !important;
    backface-visibility: hidden !important;
}

.core.fade-out {
    opacity: 0 !important;
    transform: translateY(-10px) scale(.985) !important;
}

/* Menu panel: GPU-friendly */
#transition-overlay,
.pastel-panel,
.home-page,
.home-layout,
.home-main {
    backface-visibility: hidden !important;
}

.pastel-panel,
.home-page {
    will-change: opacity, transform !important;
}

/* Do not animate layout-like properties */
.btn-enter,
.home-row,
.shelf-row,
.shop-card,
.effect-card,
.player-card,
.license-card,
.step-card,
.back-link,
.pixel-button,
.copy-button,
.server-copy,
.effect-tab,
.pay-main-button,
.pay-second-button,
.auth-tab,
.auth-social {
    transition-property: opacity, transform, background-color, color, border-color, box-shadow !important;
    transition-duration: var(--emc-motion-fast) !important;
    transition-timing-function: var(--emc-motion-ease) !important;
}

/* Remove transition: all behavior on the landing button */
.btn-enter {
    transition:
        transform var(--emc-motion-fast) var(--emc-motion-ease),
        box-shadow var(--emc-motion-fast) var(--emc-motion-ease),
        background-color var(--emc-motion-fast) var(--emc-motion-ease),
        border-color var(--emc-motion-fast) var(--emc-motion-ease),
        color var(--emc-motion-fast) var(--emc-motion-ease) !important;
}

/* Press state should not use filter */
.is-pressing {
    filter: none !important;
    transform: translate(2px, 2px) !important;
}

/* Loader becomes almost invisible and cheap; no backdrop blur */
.site-loader {
    background: rgba(255, 232, 220, .18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition:
        opacity var(--emc-motion-fast) var(--emc-motion-ease),
        visibility 0s linear var(--emc-motion-fast) !important;
}

.site-loader-box {
    transform: translateY(4px) !important;
    transition:
        opacity var(--emc-motion-fast) var(--emc-motion-ease),
        transform var(--emc-motion-fast) var(--emc-motion-ease) !important;
}

/* Fixed/footer/rating panels should not use expensive backdrop blur */
.site-footer,
.rank-panel,
.mini-profile-center,
.auth-box,
.pay-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Footer should not animate size/position while navigating */
.site-footer,
.site-footer-inner,
.site-footer-link,
.site-footer-dev {
    transition-property: opacity, color, background-color, transform !important;
    transition-duration: var(--emc-motion-fast) !important;
    transition-timing-function: var(--emc-motion-ease) !important;
}

/* Effects page: reduce repaint cost during tab/player interactions */
body.effects-body .player-grid,
body.effects-body .players-board,
body.effects-body .player-detail,
body.effects-body .effect-store,
body.effects-body .effect-panel {
    contain: layout paint !important;
}

body.effects-body .effect-card,
body.effects-body .player-card,
body.effects-body .rank-row {
    transition:
        opacity var(--emc-motion-fast) var(--emc-motion-ease),
        transform var(--emc-motion-fast) var(--emc-motion-ease),
        background-color var(--emc-motion-fast) var(--emc-motion-ease),
        box-shadow var(--emc-motion-fast) var(--emc-motion-ease) !important;
}

/* Make hover movement smaller so UI does not feel like it jumps */
.home-row:hover,
.shop-card:hover,
.effect-card:hover,
.player-card:hover,
.license-card:hover,
.step-card:hover {
    transform: translate(2px, 2px) !important;
}

/* Keep menu footer fade, but short and stable */
body.index-body > .site-footer {
    transition:
        opacity var(--emc-motion-main) var(--emc-motion-ease),
        transform var(--emc-motion-main) var(--emc-motion-ease),
        visibility 0s linear var(--emc-motion-main) !important;
}

html:not(.open-menu-instant) body.index-body:has(.pastel-panel.slide-in) > .site-footer {
    transition:
        opacity var(--emc-motion-main) var(--emc-motion-ease) .18s,
        transform var(--emc-motion-main) var(--emc-motion-ease) .18s,
        visibility 0s linear .18s !important;
}

/* Respect users/devices that prefer less motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* staging motion smoothing fix24 end */

/* prod landing footer hard hide start */

/* Главный первый экран: footer вообще не показываем */
html:not(.open-menu-instant) body.index-body:not(:has(.pastel-panel.slide-in)) > .site-footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* На первом экране не нужен отступ под fixed footer */
html:not(.open-menu-instant) body.index-body:not(:has(.pastel-panel.slide-in)) {
    padding-bottom: 0 !important;
}

/* После входа в меню footer возвращается */
html.open-menu-instant body.index-body > .site-footer,
body.index-body:has(.pastel-panel.slide-in) > .site-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* prod landing footer hard hide end */

/* support page final fix25 start */

body.support-body {
    min-height: 100dvh !important;
    padding-bottom: calc(var(--emc-footer-h, 52px) + 28px) !important;
    overflow-x: hidden !important;
}

.support-page {
    width: min(1280px, calc(100% - clamp(28px, 6vw, 72px))) !important;
    min-height: calc(100dvh - var(--emc-footer-h, 52px) - 28px) !important;
    margin: 0 auto !important;
    padding: clamp(22px, 3vw, 38px) 0 clamp(34px, 5vw, 62px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(28px, 4vw, 54px) !important;
}

.support-page .page-header {
    width: 100% !important;
    margin: 0 !important;
}

.support-layout {
    min-height: min(620px, calc(100dvh - 180px - var(--emc-footer-h, 52px))) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .78fr) !important;
    align-items: center !important;
    gap: clamp(28px, 6vw, 76px) !important;
}

.support-hero {
    min-width: 0 !important;
    display: grid !important;
    gap: clamp(14px, 2vw, 22px) !important;
}

.support-title {
    margin: 0 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(5rem, 10vw, 9.6rem) !important;
    line-height: .78 !important;
    letter-spacing: -.08em !important;
    color: var(--ink) !important;
}

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

.support-lead {
    max-width: 660px !important;
    font-size: clamp(1rem, 1.4vw, 1.28rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
    color: rgba(42, 12, 11, .76) !important;
}

.support-card {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 18px !important;
    padding: clamp(18px, 2.4vw, 28px) !important;
    border: 5px solid var(--ink) !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: 8px 8px 0 rgba(255, 0, 127, .18) !important;
}

.support-card-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;
}

.support-card-num {
    min-width: 46px !important;
    min-height: 46px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 4px solid var(--ink) !important;
    background: var(--pink) !important;
    color: var(--peach-light) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 10px !important;
}

.support-card h2 {
    margin: 0 0 7px !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
    color: var(--ink) !important;
}

.support-card p {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
    color: rgba(42, 12, 11, .72) !important;
}

.support-copy {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(.9rem, 2vw, 1.35rem) !important;
}

.support-button {
    min-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    border: 4px solid var(--ink) !important;
    background: var(--ink) !important;
    color: var(--peach-light) !important;
    box-shadow: 6px 6px 0 var(--pink) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-align: center !important;
}

.support-button:hover {
    background: var(--pink) !important;
    color: var(--peach-light) !important;
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
}

@media (max-width: 920px) {
    .support-page {
        width: min(100% - 28px, 680px) !important;
        min-height: calc(100dvh - var(--emc-footer-h, 58px) - 22px) !important;
        padding-top: 18px !important;
        gap: 24px !important;
    }

    .support-layout {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 22px !important;
    }

    .support-title {
        font-size: clamp(3.8rem, 17vw, 6rem) !important;
    }

    .support-lead {
        font-size: 15px !important;
    }

    .support-card {
        padding: 18px !important;
        border-width: 4px !important;
        box-shadow: 5px 5px 0 rgba(255, 0, 127, .16) !important;
    }
}

@media (max-width: 420px) {
    .support-page {
        width: calc(100% - 24px) !important;
    }

    .support-title {
        font-size: clamp(3.2rem, 16vw, 4.5rem) !important;
    }

    .support-card-top {
        grid-template-columns: 1fr !important;
    }

    .support-card-num {
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .support-button {
        font-size: 8.5px !important;
    }
}

/* support page final fix25 end */

/* soon page final start */

body.soon-body {
    min-height: 100dvh !important;
    padding-bottom: calc(var(--emc-footer-h, 52px) + 24px) !important;
    overflow-x: hidden !important;
}

.soon-page {
    width: min(1280px, calc(100% - clamp(28px, 6vw, 72px))) !important;
    min-height: calc(100dvh - var(--emc-footer-h, 52px) - 24px) !important;
    margin: 0 auto !important;
    padding: clamp(22px, 3vw, 38px) 0 clamp(38px, 5vw, 70px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(28px, 4vw, 54px) !important;
}

.soon-layout {
    min-height: min(620px, calc(100dvh - 180px - var(--emc-footer-h, 52px))) !important;
    display: grid !important;
    place-items: center !important;
}

.soon-card {
    width: min(880px, 100%) !important;
    min-width: 0 !important;
    display: grid !important;
    gap: clamp(14px, 2vw, 22px) !important;
    padding: clamp(22px, 4vw, 44px) !important;
    border: 5px solid var(--ink) !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.34), transparent 28%),
        rgba(255,255,255,.16) !important;
    box-shadow: 10px 10px 0 rgba(255, 0, 127, .18) !important;
}

.soon-kicker {
    width: fit-content !important;
    padding: 8px 10px !important;
    border: 4px solid var(--ink) !important;
    background: var(--ink) !important;
    color: var(--peach-light) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

.soon-title {
    margin: 0 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(4.6rem, 9vw, 9.2rem) !important;
    line-height: .78 !important;
    letter-spacing: -.08em !important;
    color: var(--ink) !important;
}

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

.soon-text {
    max-width: 680px !important;
    margin: 0 !important;
    color: rgba(42, 12, 11, .76) !important;
    font-size: clamp(1rem, 1.4vw, 1.22rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
}

.soon-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 8px !important;
}

.soon-copy {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(.9rem, 2vw, 1.35rem) !important;
}

.soon-button {
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    border: 4px solid var(--ink) !important;
    background: var(--ink) !important;
    color: var(--peach-light) !important;
    box-shadow: 6px 6px 0 var(--pink) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-align: center !important;
}

.soon-button:hover {
    background: var(--pink) !important;
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
}

@media (max-width: 760px) {
    .soon-page {
        width: min(100% - 28px, 620px) !important;
        padding-top: 18px !important;
    }

    .soon-layout {
        min-height: 0 !important;
        place-items: start stretch !important;
    }

    .soon-card {
        padding: 20px !important;
        border-width: 4px !important;
        box-shadow: 6px 6px 0 rgba(255, 0, 127, .16) !important;
    }

    .soon-title {
        font-size: clamp(3.6rem, 16vw, 5.8rem) !important;
    }

    .soon-actions {
        grid-template-columns: 1fr !important;
    }

    .soon-button {
        width: 100% !important;
    }
}

@media (max-width: 420px) {
    .soon-page {
        width: calc(100% - 24px) !important;
    }

    .soon-title {
        font-size: clamp(3.15rem, 15vw, 4.4rem) !important;
    }

    .soon-button {
        font-size: 8.5px !important;
    }
}

/* soon page final end */

/* effects rating width fix26 start */

/*
   Ratings:
   - wider side panels on desktop
   - less dead space inside rows
   - player names get more room before ellipsis
   - footer reserve stays intact
*/

@media (min-width: 1480px) {
    body.effects-body:not(.player-selected) .site-page.effects-center {
        width: min(660px, max(520px, calc(100vw - 1040px))) !important;
    }

    body.effects-body:not(.player-selected) .rank-panel {
        width: clamp(410px, 23.5vw, 520px) !important;
        padding: 16px !important;
    }

    body.effects-body:not(.player-selected) .rank-panel-left {
        left: clamp(18px, 2.2vw, 42px) !important;
    }

    body.effects-body:not(.player-selected) .rank-panel-right {
        right: clamp(18px, 2.2vw, 42px) !important;
    }

    body.effects-body:not(.player-selected) .rank-head-row,
    body.effects-body:not(.player-selected) .rank-row {
        grid-template-columns: 38px 42px minmax(0, 1fr) 58px !important;
        gap: 7px !important;
    }

    body.effects-body:not(.player-selected) .rank-row {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.effects-body:not(.player-selected) .rank-head-row {
        padding-left: 8px !important;
        padding-right: 20px !important;
    }

    body.effects-body:not(.player-selected) .rank-place {
        width: 34px !important;
        min-width: 34px !important;
        height: 30px !important;
        font-size: 8px !important;
    }

    body.effects-body:not(.player-selected) .skin-head {
        width: 38px !important;
        height: 38px !important;
        border-width: 3px !important;
    }

    body.effects-body:not(.player-selected) .rank-name {
        font-size: 13px !important;
        letter-spacing: -.015em !important;
    }

    body.effects-body:not(.player-selected) .rank-score {
        min-width: 0 !important;
        font-size: 12px !important;
        padding-right: 0 !important;
    }

    body.effects-body:not(.player-selected) .rank-table {
        padding-right: 12px !important;
        margin-right: -2px !important;
    }
}

@media (min-width: 1241px) and (max-width: 1479px) {
    body.effects-body:not(.player-selected) .rank-panel {
        width: clamp(380px, 30vw, 460px) !important;
        padding: 15px !important;
    }

    body.effects-body:not(.player-selected) .rank-head-row,
    body.effects-body:not(.player-selected) .rank-row {
        grid-template-columns: 36px 40px minmax(0, 1fr) 54px !important;
        gap: 7px !important;
    }

    body.effects-body:not(.player-selected) .rank-row {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

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

    body.effects-body:not(.player-selected) .skin-head {
        width: 36px !important;
        height: 36px !important;
        border-width: 3px !important;
    }

    body.effects-body:not(.player-selected) .rank-table {
        padding-right: 12px !important;
    }
}

/* On tablet/mobile, keep full-width panels but reduce wasted cells too */
@media (max-width: 1240px) {
    body.effects-body .rank-panel {
        width: min(960px, calc(100% - 28px)) !important;
    }

    body.effects-body .rank-head-row,
    body.effects-body .rank-row {
        grid-template-columns: 38px 40px minmax(0, 1fr) 56px !important;
        gap: 7px !important;
    }

    body.effects-body .rank-row {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 620px) {
    body.effects-body .rank-panel {
        width: calc(100% - 20px) !important;
        padding: 12px !important;
    }

    body.effects-body .rank-head-row,
    body.effects-body .rank-row {
        grid-template-columns: 30px 32px minmax(0, 1fr) 46px !important;
        gap: 5px !important;
    }

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

    body.effects-body .rank-place {
        width: 28px !important;
        min-width: 28px !important;
        height: 26px !important;
        font-size: 7px !important;
    }

    body.effects-body .skin-head {
        width: 30px !important;
        height: 30px !important;
        border-width: 2px !important;
    }

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

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

    body.effects-body .rank-table {
        padding-right: 8px !important;
    }
}

/* effects rating width fix26 end */

/* emc human footer static fix39 start */

/*
   Human footer:
   - not fixed
   - not overlay
   - real bottom block
   - visible on index.html#menu
   - hidden only on the first landing screen /
*/

html,
body {
    min-height: 100dvh !important;
}

body {
    padding-bottom: 0 !important;
}

/* Normal page structure: content first, footer after it */
body:not(.index-body) {
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

body:not(.index-body) > .site-page,
body:not(.index-body) > .soon-page,
body:not(.index-body) > .support-page,
body:not(.index-body) > .legal-page,
body:not(.index-body) > main,
body:not(.index-body) > section:first-of-type {
    flex: 1 0 auto !important;
}

/* Kill old footer if any old HTML remains */
.site-footer {
    display: none !important;
}

/* New footer */
.emc-footer,
.emc-footer *,
.emc-footer *::before,
.emc-footer *::after {
    box-sizing: border-box !important;
}

.emc-footer {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;
    flex: 0 0 auto !important;

    margin: clamp(52px, 7vh, 90px) 0 0 !important;
    padding: clamp(20px, 3vw, 30px) clamp(16px, 4vw, 46px) !important;

    background:
        linear-gradient(180deg, rgba(255, 232, 220, .20), rgba(255, 232, 220, .74)) !important;
    border-top: 1px solid rgba(42, 12, 11, .12) !important;
    color: rgba(42, 12, 11, .78) !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.emc-footer-card {
    width: min(1120px, 100%) !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr) !important;
    align-items: center !important;
    gap: clamp(18px, 3vw, 34px) !important;
}

.emc-footer-title {
    font-family: 'Press Start 2P', monospace !important;
    font-size: clamp(.58rem, .82vw, .76rem) !important;
    line-height: 1.55 !important;
    color: rgba(42, 12, 11, .72) !important;
    text-transform: uppercase !important;
}

.emc-footer-title span {
    color: rgba(255, 0, 127, .72) !important;
}

.emc-footer-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.emc-footer-btn {
    min-width: 0 !important;
    min-height: 42px !important;

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

    padding: 9px 10px !important;

    border: 1px solid rgba(42, 12, 11, .16) !important;
    background: rgba(255, 255, 255, .18) !important;
    color: rgba(42, 12, 11, .76) !important;
    box-shadow: none !important;

    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.emc-footer-btn::before,
.emc-footer-btn::after {
    display: none !important;
    content: none !important;
}

.emc-footer-btn:hover {
    color: var(--pink) !important;
    background: rgba(255, 255, 255, .32) !important;
}

/* Landing screen: no footer */
html:not(.open-menu-instant) body.index-body:not(:has(.pastel-panel.slide-in)) > .emc-footer {
    display: none !important;
}

/*
   Menu screen:
   Make menu a normal document section so footer can live after it.
   It no longer overlays the footer.
*/
html.open-menu-instant body.index-body,
body.index-body:has(.pastel-panel.slide-in) {
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
    display: block !important;
}

html.open-menu-instant body.index-body > .emc-footer,
body.index-body:has(.pastel-panel.slide-in) > .emc-footer {
    display: block !important;
    margin-top: 0 !important;
}

html.open-menu-instant #transition-overlay,
body.index-body:has(.pastel-panel.slide-in) #transition-overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
}

html.open-menu-instant .pastel-panel,
body.index-body:has(.pastel-panel.slide-in) .pastel-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
}

html.open-menu-instant .home-page,
body.index-body:has(.pastel-panel.slide-in) .home-page {
    min-height: 100dvh !important;
    height: auto !important;
    padding-bottom: clamp(22px, 4vw, 48px) !important;
    overflow: visible !important;
}

html.open-menu-instant .home-layout,
body.index-body:has(.pastel-panel.slide-in) .home-layout {
    min-height: calc(100dvh - clamp(44px, 8vw, 76px)) !important;
    height: auto !important;
    overflow: visible !important;
}

/* Effects: no footer overlay and no spacer logic */
.effects-footer-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.effects-body,
body.effects-body:not(.player-selected),
body.effects-body.player-selected {
    padding-bottom: 0 !important;
}

body.effects-body .site-page.effects-center,
body.effects-body .effects-center,
body.effects-body main {
    padding-bottom: clamp(28px, 5vw, 60px) !important;
}

/* Ratings can end above their own viewport, footer is below document */
@media (min-width: 1241px) {
    body.effects-body:not(.player-selected) .rank-panel {
        bottom: 24px !important;
        max-height: calc(100dvh - 174px) !important;
    }

    body.effects-body:not(.player-selected) .rank-table {
        max-height: calc(100dvh - 300px) !important;
    }
}

/* Mobile */
@media (max-width: 860px) {
    .emc-footer {
        margin-top: 40px !important;
        padding: 18px 12px 20px !important;
        background: rgba(255, 232, 220, .82) !important;
    }

    .emc-footer-card {
        width: min(520px, 100%) !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .emc-footer-title {
        text-align: center !important;
        font-size: 9px !important;
    }

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

    .emc-footer-btn {
        min-height: 40px !important;
        padding: 8px 8px !important;
        font-size: 9.4px !important;
    }
}

@media (max-width: 420px) {
    .emc-footer {
        padding: 16px 10px 18px !important;
    }

    .emc-footer-grid {
        gap: 7px !important;
    }

    .emc-footer-btn {
        min-height: 38px !important;
        font-size: 8.7px !important;
    }
}

/* emc human footer static fix39 end */

/* menu animation cleanup fix40 start */

/*
   /        - landing animation visible
   /#menu   - landing animation removed
   click    - short transition, then landing is removed from layout
*/

body.index-body.index-menu-ready #bg-canvas,
html.open-menu-instant body.index-body #bg-canvas {
    display: none !important;
}

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

body.index-body.index-menu-open #transition-overlay,
html.open-menu-instant body.index-body #transition-overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.index-body.index-menu-open .pastel-panel,
html.open-menu-instant body.index-body .pastel-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.index-body.index-menu-open .home-page,
html.open-menu-instant body.index-body .home-page {
    opacity: 1 !important;
    visibility: visible !important;
}

/* During click transition keep landing only briefly, then JS adds index-menu-ready */
body.index-body.index-menu-animating > .core {
    pointer-events: none !important;
}

/* Menu is a normal page section now, footer can sit below it */
html.open-menu-instant body.index-body,
body.index-body.index-menu-open {
    overflow-y: auto !important;
    min-height: 100dvh !important;
}

/* Landing without menu: overlay must not catch clicks */
html:not(.open-menu-instant) body.index-body:not(.index-menu-open) #transition-overlay {
    pointer-events: none !important;
}

/* menu animation cleanup fix40 end */

/* menu/effects human layout fix41 start */

/*
   Fix41:
   - /#menu must be pastel menu, not dark landing leftovers
   - landing animation is fully removed after menu opens
   - effects side rating tables stop being fixed overlays
   - footer remains a real bottom block
*/

/* direct #menu and clicked menu: force pastel page state */
html.open-menu-instant body.index-body,
body.index-body.index-menu-open,
body.index-body.index-menu-ready {
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 55%, var(--peach-hot) 100%) !important;
    color: var(--ink) !important;
}

/* hide dark landing when menu is ready or direct #menu */
html.open-menu-instant body.index-body #bg-canvas,
body.index-body.index-menu-ready #bg-canvas {
    display: none !important;
}

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

/* menu is normal document content, not a dark fixed overlay */
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 {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 55%, var(--peach-hot) 100%) !important;
}

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 {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 55%, var(--peach-hot) 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 {
    position: relative !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
}

/* footer visible after menu, but below menu content */
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;
    position: relative !important;
    margin-top: 0 !important;
}

/* first landing still has no footer */
html:not(.open-menu-instant) body.index-body:not(.index-menu-open):not(.index-menu-ready) > .emc-footer {
    display: none !important;
}

/* EFFECTS: side ratings must not overlay the real footer */
body.effects-body:not(.player-selected) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    padding-bottom: 0 !important;
}

body.effects-body:not(.player-selected) > .site-page.effects-center {
    flex: 1 0 auto !important;
}

/*
   Replace old fixed side tables with real in-document side panels.
   Footer is below the full document, so nothing can ride over it.
*/
@media (min-width: 1241px) {
    body.effects-body:not(.player-selected) {
        --rank-side-w: clamp(360px, 22vw, 480px);
        --rank-gap: clamp(18px, 2vw, 30px);
    }

    body.effects-body:not(.player-selected) .site-page.effects-center {
        width: min(640px, calc(100vw - (var(--rank-side-w) * 2) - (var(--rank-gap) * 4))) !important;
        min-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-bottom: clamp(30px, 4vw, 56px) !important;
    }

    body.effects-body:not(.player-selected) .rank-panel {
        position: absolute !important;
        top: 96px !important;
        bottom: auto !important;
        width: var(--rank-side-w) !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    body.effects-body:not(.player-selected) .rank-panel-left {
        left: var(--rank-gap) !important;
        right: auto !important;
    }

    body.effects-body:not(.player-selected) .rank-panel-right {
        right: var(--rank-gap) !important;
        left: auto !important;
    }

    body.effects-body:not(.player-selected) .rank-table {
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
}

/* On smaller screens ratings are normal blocks */
@media (max-width: 1240px) {
    body.effects-body .rank-panel {
        position: static !important;
        inset: auto !important;
        width: min(900px, calc(100% - 24px)) !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 20px auto 0 !important;
    }

    body.effects-body .rank-table {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* menu/effects human layout fix41 end */

/* emc page ready transition fix42 start */

/*
   Light page reveal:
   Prevent footer/content from appearing separately while CSS/JS state is still being applied.
*/

html.emc-booting body {
    opacity: 0 !important;
}

html.emc-ready body {
    opacity: 1 !important;
}

html.emc-ready body {
    transition:
        opacity 180ms cubic-bezier(.22, .61, .36, 1),
        transform 180ms cubic-bezier(.22, .61, .36, 1) !important;
}

html.emc-leaving body {
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition:
        opacity 135ms cubic-bezier(.22, .61, .36, 1),
        transform 135ms cubic-bezier(.22, .61, .36, 1) !important;
}

/* Make footer appear with page, not before page */
html.emc-booting .emc-footer,
html.emc-booting .site-footer {
    opacity: 0 !important;
    visibility: hidden !important;
}

html.emc-ready .emc-footer {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Direct #menu should not look dark during boot */
html.open-menu-instant.emc-booting body.index-body {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 55%, var(--peach-hot) 100%) !important;
}

/* Slightly softer page reveal on mobile */
@media (max-width: 860px) {
    html.emc-ready body {
        transition:
            opacity 150ms cubic-bezier(.22, .61, .36, 1),
            transform 150ms cubic-bezier(.22, .61, .36, 1) !important;
    }

    html.emc-leaving body {
        transform: translateY(3px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.emc-ready body,
    html.emc-leaving body {
        transition: none !important;
        transform: none !important;
    }
}

/* emc page ready transition fix42 end */

/* effects loading reveal fix43 start */

/*
   Effects loading:
   - skeletons while players/ratings are loading
   - real cards reveal smoothly
   - prevents empty page/footer jump feeling
*/

body.effects-body .player-grid {
    min-height: 360px !important;
}

.effects-skeleton-card {
    min-height: 116px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;

    padding: 14px !important;
    border: 4px solid rgba(42, 12, 11, .24) !important;
    background: rgba(255, 255, 255, .12) !important;

    opacity: 0;
    transform: translateY(8px);
    animation: effectsSkeletonIn .28s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 22ms);
}

.effects-skeleton-head {
    width: 44px !important;
    height: 44px !important;
    display: block !important;
    border: 3px solid rgba(42, 12, 11, .18) !important;
    background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.32), rgba(255,255,255,.14)) !important;
    background-size: 220% 100% !important;
    animation: effectsSkeletonShine 1.15s linear infinite;
}

.effects-skeleton-lines {
    display: grid !important;
    gap: 9px !important;
}

.effects-skeleton-lines i,
.effects-skeleton-lines b {
    display: block !important;
    height: 12px !important;
    background: linear-gradient(90deg, rgba(42,12,11,.08), rgba(255,255,255,.30), rgba(42,12,11,.08)) !important;
    background-size: 220% 100% !important;
    animation: effectsSkeletonShine 1.15s linear infinite;
}

.effects-skeleton-lines i {
    width: 72% !important;
}

.effects-skeleton-lines b {
    width: 42% !important;
}

.effects-skeleton-rank {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 36px 38px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;

    padding: 7px 8px !important;
    border: 2px solid rgba(42, 12, 11, .12) !important;
    background: rgba(255, 255, 255, .10) !important;

    opacity: 0;
    transform: translateY(6px);
    animation: effectsSkeletonIn .24s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 24ms);
}

.effects-skeleton-rank span,
.effects-skeleton-rank i,
.effects-skeleton-rank b {
    display: block !important;
    height: 12px !important;
    background: linear-gradient(90deg, rgba(42,12,11,.08), rgba(255,255,255,.28), rgba(42,12,11,.08)) !important;
    background-size: 220% 100% !important;
    animation: effectsSkeletonShine 1.15s linear infinite;
}

.effects-skeleton-rank span {
    width: 28px !important;
}

.effects-skeleton-rank i {
    width: 34px !important;
    height: 34px !important;
}

.effects-skeleton-rank b {
    width: 100% !important;
}

body.effects-body.effects-loaded .effects-skeleton-card,
body.effects-body.effects-loaded .effects-skeleton-rank {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition:
        opacity 220ms cubic-bezier(.22, .61, .36, 1),
        transform 220ms cubic-bezier(.22, .61, .36, 1) !important;
}

/* Real content reveal */
body.effects-body .player-card.effects-will-reveal,
body.effects-body .rank-row.effects-will-reveal {
    opacity: 0;
    transform: translateY(10px);
}

body.effects-body .player-card.effects-will-reveal.effects-revealed,
body.effects-body .rank-row.effects-will-reveal.effects-revealed {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 280ms cubic-bezier(.22, .61, .36, 1),
        transform 280ms cubic-bezier(.22, .61, .36, 1),
        background-color 160ms cubic-bezier(.22, .61, .36, 1) !important;
    transition-delay: calc(var(--reveal-i, 0) * 22ms) !important;
}

/* Skin heads should not flash from blank to final */
body.effects-body .skin-head,
body.effects-body .mini-avatar,
body.effects-body .selected-skin-head {
    transition:
        opacity 180ms cubic-bezier(.22, .61, .36, 1),
        background-position 180ms cubic-bezier(.22, .61, .36, 1) !important;
}

@keyframes effectsSkeletonIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes effectsSkeletonShine {
    from {
        background-position: 140% 0;
    }
    to {
        background-position: -80% 0;
    }
}

@media (max-width: 860px) {
    body.effects-body .player-grid {
        min-height: 320px !important;
    }

    .effects-skeleton-card {
        min-height: 96px !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
        border-width: 3px !important;
    }

    .effects-skeleton-head {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .effects-skeleton-card,
    .effects-skeleton-rank,
    .effects-skeleton-head,
    .effects-skeleton-lines i,
    .effects-skeleton-lines b,
    .effects-skeleton-rank span,
    .effects-skeleton-rank i,
    .effects-skeleton-rank b,
    body.effects-body .player-card.effects-will-reveal.effects-revealed,
    body.effects-body .rank-row.effects-will-reveal.effects-revealed {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* effects loading reveal fix43 end */