body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    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%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    opacity: .07;
    background-image:
        linear-gradient(var(--ink) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}

.site-page {
    position: relative;
    z-index: 2;
    width: min(1020px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 26px 0 34px;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 6px solid var(--ink);
    padding-bottom: 16px;
    margin-bottom: 28px;
}

.back-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    text-decoration: none;
}

.back-link:hover {
    color: var(--pink);
}

.guide-stack {
    display: grid;
    gap: 18px;
}

.guide-intro {
    display: grid;
    gap: 12px;
    margin-bottom: 6px;
}

.guide-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pink);
}

.guide-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.7rem, 5.2vw, 4.8rem);
    line-height: .95;
    letter-spacing: -.05em;
    color: var(--ink);
}

.license-card {
    display: block;
    padding: 22px;
    border: 5px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, .12);
}

.license-card:hover {
    background: rgba(255, 255, 255, .28);
}

.license-top {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.license-num,
.step-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--pink);
}

.license-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: .94;
    letter-spacing: -.04em;
    color: var(--ink);
}

.license-card:hover .license-title {
    color: var(--pink);
}

.step-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) minmax(190px, 240px);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
}

.step-body {
    min-width: 0;
}

.step-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 3.25rem);
    line-height: .9;
    letter-spacing: -.045em;
    color: var(--ink);
}

.step-text {
    margin: 8px 0 0;
    max-width: 580px;
    font-size: clamp(.9rem, 1vw, 1rem);
    line-height: 1.45;
    text-transform: none;
}

.step-actions {
    display: grid;
    gap: 12px;
    align-content: center;
    justify-items: stretch;
}

.guide-button,
.copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--peach-light);
    background: var(--ink);
    border: 4px solid var(--ink);
    text-decoration: none;
    box-shadow: 6px 6px 0 var(--pink);
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
    cursor: pointer;
    text-align: center;
}

.guide-button:hover,
.copy-button:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--pink);
    background: var(--pink);
}

.server-ip-button {
    display: grid;
    gap: 6px;
    width: 100%;
    min-height: 72px;
    padding: 12px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--pink);
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}

.server-ip-button:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--pink);
    background: rgba(255, 255, 255, .32);
}

.server-ip-button span {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(.9rem, 1.25vw, 1.05rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    word-break: break-word;
}

.server-ip-button small {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.4;
    color: var(--pink);
    text-transform: uppercase;
}

.page-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(26px, 4vw, 46px);
    align-items: center;
}

.page-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(3.8rem, 8vw, 8.5rem);
    line-height: .82;
    letter-spacing: -.08em;
    color: var(--ink);
}

.page-title .pink {
    color: var(--pink);
}

.action-list {
    display: grid;
    border-left: 6px solid var(--ink);
}

.action-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 104px;
    align-items: center;
    padding: 18px 0 18px 24px;
    border-top: 5px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
}

.action-row:last-child {
    border-bottom: 5px solid var(--ink);
}

.action-row:hover {
    background: rgba(255, 255, 255, .28);
}

.action-num {
    font-family: 'Press Start 2P', monospace;
    font-size: .72rem;
    color: var(--pink);
}

.action-name {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: .85;
    letter-spacing: -.05em;
}

.form-box {
    display: grid;
    gap: 18px;
}

.input-line {
    width: 100%;
    min-height: 74px;
    padding: 0 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(.7rem, 1.2vw, .92rem);
    outline: none;
    text-transform: none;
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.big-choice {
    min-height: 110px;
    border: 5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.6rem, 5vw, 5.4rem);
    line-height: .8;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.big-choice:hover {
    color: var(--pink);
    background: rgba(255, 255, 255, .28);
}

.footer-ip {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 6px solid var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
}

@media (max-width: 820px) {
    .site-page {
        width: min(100% - 28px, 1020px);
        padding-top: 20px;
    }

    .page-header {
        display: block;
    }

    .back-link {
        display: inline-block;
        margin-top: 18px;
    }

    .guide-title {
        font-size: clamp(2.25rem, 9vw, 3.6rem);
    }

    .step-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step-actions {
        justify-items: stretch;
    }

    .guide-button,
    .copy-button {
        width: 100%;
    }

    .page-grid {
        display: block;
    }

    .action-list {
        margin-top: 24px;
        border-left: 0;
    }

    .action-row {
        grid-template-columns: 42px minmax(0, 1fr);
        padding-left: 0;
    }

    .choice-grid {
        grid-template-columns: 1fr;
    }
}

/* optional mods button */

.optional-button {
    justify-self: center;
    width: 168px;
    min-height: 46px;
    padding: 8px 10px;
    display: grid;
    gap: 3px;
    align-content: center;
    justify-items: center;
    color: var(--ink);
    background: rgba(255, 255, 255, .16);
    border-width: 3px;
    box-shadow: 4px 4px 0 rgba(42, 12, 11, .35);
}

.optional-button span {
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.2;
}

.optional-button small {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.2;
    color: var(--pink);
    text-transform: uppercase;
}

.optional-button:hover {
    color: var(--peach-light);
    background: var(--pink);
    box-shadow: 2px 2px 0 rgba(42, 12, 11, .45);
}

.optional-button:hover small {
    color: var(--peach-light);
}

@media (max-width: 820px) {
    .optional-button {
        width: 168px;
        max-width: 100%;
        justify-self: center;
    }
}

/* unified header and shelf pages v10 */

.site-page {
    width: min(1020px, calc(100% - 40px));
}

.page-header,
.home-top,
.top {
    width: 100%;
    border-bottom: 6px solid var(--ink);
}

.page-header {
    min-height: 74px;
}

.home-top,
.top {
    padding-bottom: 16px;
}

.shelf-page {
    display: grid;
    gap: 28px;
}

.shelf-head {
    display: grid;
    gap: 10px;
}

.shelf-list {
    display: grid;
    border-top: 5px solid var(--ink);
}

.shelf-row {
    min-height: 118px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 5px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
}

.shelf-row:hover {
    background: rgba(255, 255, 255, .28);
}

.shelf-row:hover .shelf-title {
    color: var(--pink);
}

.shelf-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--pink);
}

.shelf-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.2rem, 4.6vw, 4.7rem);
    line-height: .86;
    letter-spacing: -.05em;
    color: var(--ink);
}

@media (max-width: 820px) {
    .site-page {
        width: min(100% - 28px, 1020px);
    }

    .page-header,
    .home-top,
    .top {
        min-height: 68px;
    }

    .shelf-row {
        min-height: 94px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
    }

    .shelf-title {
        font-size: clamp(1.8rem, 8.4vw, 3.25rem);
    }
}

/* effects ratings v11 */

.effects-body {
    min-height: 100vh;
}

.effects-center {
    width: min(720px, calc(100% - 40px));
}

.rank-panel {
    position: fixed;
    top: 112px;
    width: 330px;
    padding: 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .16);
    color: var(--ink);
    z-index: 4;
    backdrop-filter: blur(4px);
}

.rank-panel-left {
    left: 28px;
    animation: rankInLeft .45s ease both;
}

.rank-panel-right {
    right: 28px;
    animation: rankInRight .45s ease both;
}

.rank-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 5px solid var(--ink);
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: .85;
    letter-spacing: -.055em;
}

.rank-title b {
    font: inherit;
}

.rank-panel-left .rank-title b {
    color: var(--pink);
}

.rank-panel-right .rank-title b {
    color: var(--blue);
}

.rank-table {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.rank-row {
    display: grid;
    grid-template-columns: 48px 38px minmax(0, 1fr) 64px;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    border-bottom: 2px solid rgba(42, 12, 11, .28);
    font-size: 13px;
    line-height: 1.2;
    text-transform: none;
}

.rank-row:last-child {
    border-bottom: 0;
}

.rank-head-row {
    min-height: 32px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    text-transform: uppercase;
    opacity: .72;
}

.rank-place {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--pink);
}

.rank-panel-right .rank-place {
    color: var(--blue);
}

.skin-head {
    width: 30px;
    height: 30px;
    border: 3px solid var(--ink);
    background:
        linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
    box-shadow: 3px 3px 0 rgba(42, 12, 11, .28);
}

.rank-panel-left .skin-head {
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .28), rgba(255,255,255,.1));
}

.rank-panel-right .skin-head {
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .28), rgba(255,255,255,.1));
}

.rank-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
}

.rank-score {
    text-align: right;
    font-weight: 800;
}

@keyframes rankInLeft {
    from {
        opacity: 0;
        transform: translateX(-38px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rankInRight {
    from {
        opacity: 0;
        transform: translateX(38px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 1500px) {
    .effects-center {
        width: min(620px, calc(100% - 40px));
    }

    .rank-panel {
        width: 300px;
    }

    .rank-row {
        grid-template-columns: 42px 34px minmax(0, 1fr) 54px;
        gap: 8px;
    }

    .rank-head-row {
        font-size: 7px;
    }
}

@media (max-width: 1240px) {
    .effects-center {
        width: min(900px, calc(100% - 40px));
    }

    .rank-panel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: min(900px, calc(100% - 40px));
        margin: 22px auto 0;
        animation: none;
    }

    .rank-panel-left {
        margin-top: 0;
    }
}

@media (max-width: 620px) {
    .rank-panel,
    .effects-center {
        width: min(100% - 28px, 900px);
    }

    .rank-panel {
        padding: 14px;
    }

    .rank-title {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .rank-row {
        grid-template-columns: 36px 32px minmax(0, 1fr) 46px;
        gap: 7px;
        font-size: 12px;
    }

    .rank-head-row {
        font-size: 6px;
    }

    .skin-head {
        width: 28px;
        height: 28px;
    }
}

/* effects ratings v12 */

.rank-panel {
    width: 390px;
    padding: 22px;
}

.rank-panel-left {
    left: 34px;
}

.rank-panel-right {
    right: 34px;
}

.rank-title {
    font-size: clamp(2.35rem, 3.25vw, 3.65rem);
    gap: 16px;
}

.rank-title b {
    min-width: 76px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    line-height: 1;
}

.rank-row {
    grid-template-columns: 64px 54px minmax(0, 1fr) 74px;
    gap: 12px;
    min-height: 58px;
    font-size: 15px;
}

.rank-head-row {
    min-height: 40px;
    font-size: 8px;
}

.rank-head-row span:first-child {
    width: fit-content;
    padding: 6px 7px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .16);
    opacity: 1;
}

.rank-place {
    width: 44px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .16);
    box-shadow: 3px 3px 0 rgba(42, 12, 11, .26);
}

.skin-head {
    width: 44px;
    height: 44px;
    border-width: 4px;
}

.rank-name {
    font-size: 15px;
}

.rank-score {
    font-size: 15px;
}

@media (max-width: 1500px) {
    .rank-panel {
        width: 350px;
    }

    .rank-row {
        grid-template-columns: 56px 48px minmax(0, 1fr) 64px;
        gap: 10px;
    }

    .skin-head {
        width: 40px;
        height: 40px;
    }

    .rank-title b {
        min-width: 66px;
        height: 58px;
    }
}

@media (max-width: 1240px) {
    .rank-panel {
        width: min(900px, calc(100% - 40px));
    }

    .rank-row {
        grid-template-columns: 64px 54px minmax(0, 1fr) 74px;
    }

    .skin-head {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 620px) {
    .rank-row {
        grid-template-columns: 52px 44px minmax(0, 1fr) 58px;
        gap: 8px;
        min-height: 54px;
        font-size: 12px;
    }

    .rank-head-row {
        font-size: 6px;
    }

    .rank-head-row span:first-child {
        padding: 5px;
        border-width: 2px;
    }

    .rank-place {
        width: 36px;
        height: 30px;
        border-width: 2px;
        font-size: 8px;
    }

    .skin-head {
        width: 36px;
        height: 36px;
        border-width: 3px;
    }

    .rank-title b {
        min-width: 54px;
        height: 50px;
    }
}

/* effects ratings v13 */

.effects-body {
    min-height: 100vh;
}

.effects-center {
    width: min(620px, calc(100% - 40px));
}

.rank-panel {
    position: fixed;
    top: 96px;
    bottom: 28px;
    width: 410px;
    padding: 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    z-index: 4;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rank-panel-left {
    left: 30px;
    animation: rankInLeft .35s ease both;
}

.rank-panel-right {
    right: 30px;
    animation: rankInRight .35s ease both;
}

.rank-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 5px solid var(--ink);
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.2rem, 2.7vw, 3rem);
    line-height: .9;
    letter-spacing: -.05em;
}

.rank-title b {
    width: 58px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .2);
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    overflow: hidden;
}

.rank-panel-left .rank-title b {
    color: var(--pink);
}

.rank-panel-right .rank-title b {
    color: var(--blue);
}

.rank-head-row {
    display: grid;
    grid-template-columns: 64px 54px minmax(0, 1fr) 76px;
    gap: 12px;
    align-items: center;
    min-height: 42px;
    margin-top: 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1.35;
    text-transform: uppercase;
}

.rank-head-row span:first-child {
    width: fit-content;
    padding: 5px 6px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
}

.rank-table {
    margin-top: 0;
    overflow-y: auto;
    min-height: 0;
    padding-right: 6px;
    scrollbar-width: thin;
}

.rank-table::-webkit-scrollbar {
    width: 8px;
}

.rank-table::-webkit-scrollbar-track {
    background: rgba(42, 12, 11, .12);
}

.rank-table::-webkit-scrollbar-thumb {
    background: var(--ink);
}

.rank-row {
    display: grid;
    grid-template-columns: 64px 54px minmax(0, 1fr) 76px;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    border-bottom: 2px solid rgba(42, 12, 11, .28);
    font-size: 15px;
    line-height: 1.2;
    text-transform: none;
}

.rank-place {
    width: 46px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    box-shadow: 3px 3px 0 rgba(42, 12, 11, .25);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--pink);
}

.rank-panel-right .rank-place {
    color: var(--blue);
}

.skin-head {
    width: 44px;
    height: 44px;
    border: 4px solid var(--ink);
    box-shadow: 3px 3px 0 rgba(42, 12, 11, .25);
}

.rank-panel-left .skin-head {
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .32), rgba(255, 255, 255, .12));
}

.rank-panel-right .skin-head {
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .32), rgba(255, 255, 255, .12));
}

.rank-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
}

.rank-score {
    text-align: right;
    font-weight: 800;
}

@keyframes rankInLeft {
    from {
        opacity: 0;
        transform: translateX(-34px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rankInRight {
    from {
        opacity: 0;
        transform: translateX(34px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 1540px) {
    .effects-center {
        width: min(540px, calc(100% - 40px));
    }

    .rank-panel {
        width: 360px;
    }

    .rank-title {
        grid-template-columns: minmax(0, 1fr) 52px;
        font-size: clamp(1.9rem, 2.4vw, 2.55rem);
    }

    .rank-title b {
        width: 52px;
        height: 46px;
        font-size: 18px;
    }

    .rank-head-row,
    .rank-row {
        grid-template-columns: 54px 48px minmax(0, 1fr) 62px;
        gap: 9px;
    }

    .skin-head {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 1260px) {
    .effects-center {
        width: min(900px, calc(100% - 40px));
    }

    .rank-panel {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: min(900px, calc(100% - 40px));
        max-height: 520px;
        margin: 22px auto 0;
        animation: none;
    }
}

@media (max-width: 620px) {
    .effects-center,
    .rank-panel {
        width: min(100% - 28px, 900px);
    }

    .rank-panel {
        padding: 14px;
        max-height: 520px;
    }

    .rank-title {
        grid-template-columns: minmax(0, 1fr) 48px;
        font-size: clamp(1.75rem, 8vw, 2.3rem);
    }

    .rank-title b {
        width: 48px;
        height: 42px;
        font-size: 15px;
    }

    .rank-head-row,
    .rank-row {
        grid-template-columns: 48px 42px minmax(0, 1fr) 54px;
        gap: 7px;
        font-size: 12px;
    }

    .rank-head-row {
        font-size: 6px;
    }

    .rank-place {
        width: 36px;
        height: 30px;
        font-size: 8px;
        border-width: 2px;
    }

    .skin-head {
        width: 34px;
        height: 34px;
        border-width: 3px;
    }
}

/* effects ratings v14 */

.rank-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.rank-title b {
    flex: 0 0 auto;
    width: 46px;
    height: 42px;
    min-width: 46px;
    font-size: 16px;
    margin-left: 2px;
}

.rank-table {
    padding-right: 22px;
    margin-right: -4px;
    scrollbar-width: thin;
}

.rank-row {
    padding-right: 14px;
}

.rank-head-row {
    padding-right: 30px;
}

.rank-score {
    padding-right: 4px;
}

.rank-table::-webkit-scrollbar {
    width: 12px;
}

.rank-table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .16);
    border-left: 3px solid var(--ink);
    box-shadow: inset 0 0 0 2px rgba(42, 12, 11, .16);
}

.rank-table::-webkit-scrollbar-thumb {
    background: var(--ink);
    border: 3px solid rgba(255, 255, 255, .16);
}

.rank-table::-webkit-scrollbar-thumb:hover {
    background: var(--pink);
}

.rank-panel-left .rank-table {
    scrollbar-color: var(--pink) rgba(255, 255, 255, .16);
}

.rank-panel-right .rank-table {
    scrollbar-color: var(--blue) rgba(255, 255, 255, .16);
}

.rank-panel-left .rank-table::-webkit-scrollbar-thumb:hover {
    background: var(--pink);
}

.rank-panel-right .rank-table::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
}

@media (max-width: 1540px) {
    .rank-title {
        gap: 10px;
    }

    .rank-title b {
        width: 42px;
        height: 38px;
        min-width: 42px;
        font-size: 14px;
    }

    .rank-table {
        padding-right: 20px;
    }

    .rank-row {
        padding-right: 12px;
    }

    .rank-head-row {
        padding-right: 28px;
    }
}

@media (max-width: 620px) {
    .rank-title {
        gap: 9px;
    }

    .rank-title b {
        width: 38px;
        height: 34px;
        min-width: 38px;
        font-size: 12px;
    }

    .rank-table {
        padding-right: 16px;
    }

    .rank-row {
        padding-right: 8px;
    }

    .rank-head-row {
        padding-right: 22px;
    }

    .rank-table::-webkit-scrollbar {
        width: 9px;
    }
}

/* players board v15 */

.players-board {
    display: grid;
    gap: 18px;
}

.player-search {
    width: 100%;
    height: 66px;
    padding: 0 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(.68rem, .9vw, .82rem);
    outline: none;
    text-transform: none;
}

.player-search::placeholder {
    color: rgba(42, 12, 11, .68);
    text-transform: uppercase;
}

.player-search:focus {
    border-color: var(--pink);
    background: rgba(255, 255, 255, .28);
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 16px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--ink) rgba(255, 255, 255, .16);
}

.player-grid::-webkit-scrollbar {
    width: 12px;
}

.player-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .16);
    border-left: 3px solid var(--ink);
}

.player-grid::-webkit-scrollbar-thumb {
    background: var(--ink);
    border: 3px solid rgba(255, 255, 255, .16);
}

.player-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 158px;
    padding: 14px 10px 12px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 5px 5px 0 rgba(42, 12, 11, .26);
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}

.player-card:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 rgba(42, 12, 11, .32);
    background: rgba(255, 255, 255, .28);
}

.player-head {
    width: 72px;
    height: 72px;
    border: 5px solid var(--ink);
    box-shadow: 4px 4px 0 rgba(42, 12, 11, .26);
}

.player-w .player-head {
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .34), rgba(255, 255, 255, .12));
}

.player-m .player-head {
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .34), rgba(255, 255, 255, .12));
}

.player-name {
    max-width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.player-place {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 5px 6px;
    border: 3px solid var(--ink);
    background: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1;
    color: var(--pink);
}

.player-m .player-place {
    color: var(--blue);
}

.player-rating {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px 6px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .22);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1;
}

@media (max-width: 1260px) {
    .player-grid {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

@media (max-width: 620px) {
    .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
        gap: 12px;
    }

    .player-card {
        min-height: 138px;
        padding: 12px 8px 10px;
    }

    .player-head {
        width: 58px;
        height: 58px;
        border-width: 4px;
    }

    .player-name {
        font-size: 12px;
    }

    .player-place,
    .player-rating {
        font-size: 7px;
        border-width: 2px;
    }
}

/* player grid cards v16 */

.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 18px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding-right: 14px;
}

.player-card {
    position: relative;
    min-height: 172px;
    padding: 18px 10px 14px;
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    gap: 10px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 5px 5px 0 rgba(42, 12, 11, .26);
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}

.player-card:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 rgba(42, 12, 11, .32);
    background: rgba(255, 255, 255, .28);
}

.player-head {
    width: 78px;
    height: 78px;
    display: block;
    border: 5px solid var(--ink);
    box-shadow: 4px 4px 0 rgba(42, 12, 11, .26);
}

.player-w .player-head {
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .36), rgba(255, 255, 255, .12));
}

.player-m .player-head {
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .36), rgba(255, 255, 255, .12));
}

.player-name {
    max-width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.player-position {
    padding: 6px 8px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1.2;
    color: var(--pink);
    text-transform: uppercase;
}

.player-m .player-position {
    color: var(--blue);
}

.player-rating,
.player-place {
    display: none !important;
}

@media (max-width: 1260px) {
    .player-grid {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

@media (max-width: 620px) {
    .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 12px;
    }

    .player-card {
        min-height: 148px;
        padding: 14px 8px 12px;
    }

    .player-head {
        width: 62px;
        height: 62px;
        border-width: 4px;
    }

    .player-name {
        font-size: 12px;
    }

    .player-position {
        font-size: 7px;
        border-width: 2px;
    }
}

/* player names v17 */

.player-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.player-card {
    min-height: 188px;
    padding-left: 12px;
    padding-right: 12px;
}

.player-name {
    max-width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    font-size: 13px;
    line-height: 1.22;
}

@media (max-width: 620px) {
    .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    }

    .player-card {
        min-height: 166px;
    }

    .player-name {
        min-height: 30px;
        font-size: 11px;
        line-height: 1.18;
    }
}

/* player detail v18 */

.players-board {
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

.player-selected .players-board {
    opacity: 0;
    transform: translateY(-70px);
    visibility: hidden;
    pointer-events: none;
}

.player-selected .rank-panel-left {
    transform: translateX(-115%);
    opacity: 0;
    pointer-events: none;
}

.player-selected .rank-panel-right {
    transform: translateX(115%);
    opacity: 0;
    pointer-events: none;
}

.rank-panel {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.player-detail {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 28px;
    align-items: start;
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    inset: 108px 0 auto 0;
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

.player-selected .player-detail {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    visibility: visible;
}

.skin-stage-wrap {
    display: grid;
    gap: 16px;
}

.detail-back {
    min-height: 50px;
    padding: 12px 16px;
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    box-shadow: 6px 6px 0 var(--pink);
    cursor: pointer;
}

.detail-back:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--pink);
    background: var(--pink);
}

.skin-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 6px solid var(--ink);
    background:
        linear-gradient(0deg, rgba(42, 12, 11, .18) 0 18%, transparent 18%),
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .24), transparent 36%),
        rgba(255, 255, 255, .14);
    overflow: hidden;
}

.skin-stage::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18%;
    height: 5px;
    background: var(--ink);
}

.runner {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 78px;
    height: 154px;
    transform: translateX(-50%);
    animation: runnerBounce .42s steps(2) infinite;
}

.runner-head,
.runner-body,
.runner-arm,
.runner-leg {
    position: absolute;
    display: block;
    border: 4px solid var(--ink);
    background: rgba(255, 0, 127, .3);
    box-shadow: 3px 3px 0 rgba(42, 12, 11, .25);
}

.runner-head {
    top: 0;
    left: 17px;
    width: 44px;
    height: 44px;
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .38), rgba(255, 255, 255, .16));
}

.runner-body {
    top: 48px;
    left: 22px;
    width: 34px;
    height: 54px;
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .22), rgba(255, 0, 127, .22));
}

.runner-arm {
    top: 52px;
    width: 18px;
    height: 46px;
    transform-origin: top center;
}

.runner-arm-left {
    left: 2px;
    animation: armLeft .42s steps(2) infinite;
}

.runner-arm-right {
    right: 2px;
    animation: armRight .42s steps(2) infinite;
}

.runner-leg {
    top: 106px;
    width: 20px;
    height: 48px;
    transform-origin: top center;
    background: rgba(42, 12, 11, .24);
}

.runner-leg-left {
    left: 17px;
    animation: legLeft .42s steps(2) infinite;
}

.runner-leg-right {
    right: 17px;
    animation: legRight .42s steps(2) infinite;
}

@keyframes runnerBounce {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes armLeft {
    0% { transform: rotate(18deg); }
    100% { transform: rotate(-18deg); }
}

@keyframes armRight {
    0% { transform: rotate(-18deg); }
    100% { transform: rotate(18deg); }
}

@keyframes legLeft {
    0% { transform: rotate(-14deg); }
    100% { transform: rotate(14deg); }
}

@keyframes legRight {
    0% { transform: rotate(14deg); }
    100% { transform: rotate(-14deg); }
}

.selected-player {
    padding: 16px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .14);
}

.selected-player span {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: .86;
    letter-spacing: -.05em;
    color: var(--ink);
}

.selected-player small {
    display: block;
    margin-top: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    color: var(--pink);
}

.effect-store {
    display: grid;
    gap: 18px;
}

.effect-section {
    padding: 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
}

.effect-section-head {
    padding-bottom: 14px;
    border-bottom: 5px solid var(--ink);
    margin-bottom: 14px;
}

.effect-label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 12px;
    border: 4px solid var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    background: rgba(255, 255, 255, .2);
}

.effect-label-buff {
    color: var(--pink);
}

.effect-label-debuff {
    color: var(--blue);
}

.effect-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.effect-card {
    min-height: 92px;
    padding: 13px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 4px 4px 0 rgba(42, 12, 11, .26);
}

.effect-card:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(42, 12, 11, .32);
    background: rgba(255, 0, 127, .16);
}

.debuff-card:hover {
    background: rgba(0, 240, 255, .14);
}

.effect-name {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.18;
    font-weight: 800;
    text-transform: none;
}

.effect-desc {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.35;
    opacity: .78;
    text-transform: none;
}

@media (max-width: 1260px) {
    .player-detail {
        position: relative;
        inset: auto;
        grid-template-columns: 1fr;
        margin-top: -20px;
    }

    .skin-stage {
        max-width: 420px;
    }

    .effect-list {
        grid-template-columns: 1fr;
    }

    .player-selected .rank-panel-left,
    .player-selected .rank-panel-right {
        transform: translateY(30px);
        display: none;
    }
}

@media (max-width: 620px) {
    .player-detail {
        gap: 18px;
    }

    .runner {
        transform: translateX(-50%) scale(.82);
        transform-origin: bottom center;
    }

    @keyframes runnerBounce {
        0% { transform: translateX(-50%) scale(.82) translateY(0); }
        100% { transform: translateX(-50%) scale(.82) translateY(-8px); }
    }

    .effect-section {
        padding: 14px;
    }

    .effect-card {
        min-height: 86px;
    }
}

/* player detail compact v19 */

.player-detail {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    position: absolute;
    inset: 108px 0 auto 0;
}

.skin-stage-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.detail-back {
    width: fit-content;
    min-height: 46px;
    padding: 11px 15px;
    font-size: 9px;
}

.skin-stage {
    width: min(260px, 100%);
    aspect-ratio: 1 / 1;
    justify-self: center;
    border-width: 5px;
}

.runner {
    width: 66px;
    height: 130px;
    transform: translateX(-50%) scale(.86);
    transform-origin: bottom center;
}

.runner-head {
    left: 15px;
    width: 38px;
    height: 38px;
}

.runner-body {
    top: 42px;
    left: 20px;
    width: 28px;
    height: 46px;
}

.runner-arm {
    top: 46px;
    width: 16px;
    height: 38px;
}

.runner-leg {
    top: 92px;
    width: 17px;
    height: 40px;
}

.runner-leg-left {
    left: 16px;
}

.runner-leg-right {
    right: 16px;
}

@keyframes runnerBounce {
    0% { transform: translateX(-50%) scale(.86) translateY(0); }
    100% { transform: translateX(-50%) scale(.86) translateY(-7px); }
}

.selected-player {
    width: 100%;
    padding: 15px 16px;
}

.selected-player span {
    font-size: clamp(2rem, 4.5vw, 3.3rem);
}

.effect-store {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.effect-section {
    width: 100%;
    padding: 16px;
}

.effect-list {
    grid-template-columns: 1fr;
    gap: 10px;
}

.effect-card {
    min-height: 78px;
    display: grid;
    align-content: center;
}

.effect-name {
    font-size: 13px;
}

.effect-desc {
    font-size: 12px;
}

.player-selected .effects-center {
    width: min(720px, calc(100% - 40px));
}

@media (max-width: 1260px) {
    .player-detail {
        position: relative;
        inset: auto;
        margin-top: -20px;
    }

    .player-selected .effects-center {
        width: min(900px, calc(100% - 40px));
    }
}

@media (max-width: 620px) {
    .player-selected .effects-center {
        width: min(100% - 28px, 900px);
    }

    .skin-stage {
        width: min(220px, 100%);
    }

    .effect-section {
        padding: 14px;
    }

    .effect-card {
        min-height: 76px;
    }
}

/* effect animations v20 */

.effect-animation-layer,
.effect-live-label {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.effect-live-label {
    inset: auto 12px 12px 12px;
    padding: 9px 10px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    animation: fxLabel .35s ease both;
}

.fx-wand,
.fx-book,
.fx-page,
.fx-pig,
.fx-speed,
.fx-animal,
.fx-aura,
.fx-muscle,
.fx-potato,
.fx-kick,
.fx-cloud,
.fx-heart,
.fx-chicken,
.fx-tnt,
.fx-boom,
.fx-house,
.fx-crack,
.fx-zombie,
.fx-shadow,
.fx-screamer,
.fx-portal,
.fx-dust,
.fx-text {
    position: absolute;
    display: block;
    box-sizing: border-box;
}

.runner-anim-invis {
    animation: runnerInvis 1.75s ease both !important;
}

.fx-wand {
    width: 62px;
    height: 10px;
    left: 58%;
    top: 36%;
    border: 3px solid var(--ink);
    background: var(--pink);
    transform: rotate(-28deg);
    animation: fxWand 1.4s ease both;
}

.fx-dust {
    width: 12px;
    height: 12px;
    border: 3px solid var(--ink);
    background: rgba(255,255,255,.7);
    animation: fxDust 1.25s ease both;
}

.fx-dust-a {
    left: 55%;
    top: 28%;
}

.fx-dust-b {
    left: 70%;
    top: 45%;
    animation-delay: .15s;
}

.fx-text {
    left: 18px;
    top: 18px;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--pink);
    animation: fxPop 1.25s ease both;
}

.fx-book {
    width: 56px;
    height: 42px;
    left: 50%;
    top: 34%;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.8);
    transform: translateX(-50%);
    animation: fxBook 1.5s ease both;
}

.fx-page {
    width: 28px;
    height: 36px;
    top: 30%;
    border: 3px solid var(--ink);
    background: rgba(255,255,255,.86);
    animation: fxPage 1.3s ease both;
}

.fx-page-a {
    left: 30%;
}

.fx-page-b {
    right: 30%;
    animation-delay: .16s;
}

.fx-pig {
    width: 72px;
    height: 42px;
    left: -80px;
    bottom: 18%;
    border: 4px solid var(--ink);
    background: #ff92c8;
    animation: fxPig 1.45s ease both;
}

.fx-pig::before {
    content: "";
    position: absolute;
    right: -18px;
    top: 6px;
    width: 28px;
    height: 28px;
    border: 4px solid var(--ink);
    background: #ff92c8;
}

.fx-speed {
    width: 42px;
    height: 5px;
    left: 20px;
    border: 2px solid var(--ink);
    background: var(--blue);
    animation: fxSpeed 1s ease both;
}

.fx-speed-a {
    top: 54%;
}

.fx-speed-b {
    top: 64%;
    animation-delay: .1s;
}

.fx-animal {
    width: 44px;
    height: 44px;
    border: 4px solid var(--ink);
    animation: fxAnimal 1.3s steps(3) both;
}

.fx-animal-a {
    left: 18%;
    top: 28%;
    background: var(--pink);
}

.fx-animal-b {
    left: 44%;
    top: 18%;
    background: var(--blue);
    animation-delay: .14s;
}

.fx-animal-c {
    right: 18%;
    top: 34%;
    background: rgba(255,255,255,.6);
    animation-delay: .26s;
}

.runner-anim-gigachad {
    animation: runnerGiga 1.65s ease both !important;
}

.fx-aura {
    inset: 22%;
    border: 6px solid var(--pink);
    animation: fxAura 1.35s ease both;
}

.fx-muscle {
    width: 38px;
    height: 28px;
    border: 4px solid var(--ink);
    background: var(--pink);
    animation: fxMuscle 1.2s ease both;
}

.fx-muscle-a {
    left: 20%;
    top: 38%;
}

.fx-muscle-b {
    right: 20%;
    top: 38%;
}

.fx-potato {
    width: 22px;
    height: 28px;
    border: 3px solid var(--ink);
    background: #b98236;
    animation: fxPotato 1.35s ease both;
}

.fx-potato-a { left: 18%; top: -10%; }
.fx-potato-b { left: 40%; top: -12%; animation-delay: .12s; }
.fx-potato-c { left: 62%; top: -10%; animation-delay: .24s; }
.fx-potato-d { left: 78%; top: -16%; animation-delay: .36s; }

.runner-anim-kick {
    animation: runnerKick 1.7s ease both !important;
}

.fx-kick {
    width: 70px;
    height: 28px;
    left: 14%;
    bottom: 30%;
    border: 4px solid var(--ink);
    background: var(--pink);
    animation: fxKick 1.1s ease both;
}

.fx-cloud {
    width: 90px;
    height: 24px;
    left: 50%;
    bottom: 18%;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.6);
    transform: translateX(-50%);
    animation: fxCloud 1.2s ease both;
}

.fx-heart {
    width: 24px;
    height: 24px;
    border: 3px solid var(--ink);
    background: var(--pink);
    transform: rotate(45deg);
    animation: fxHeart 1.3s ease both;
}

.fx-heart-a { left: 28%; top: 48%; }
.fx-heart-b { left: 48%; top: 38%; animation-delay: .12s; }
.fx-heart-c { left: 66%; top: 50%; animation-delay: .24s; }

.fx-chicken {
    width: 42px;
    height: 34px;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.86);
    animation: fxChicken 1.45s ease both;
}

.fx-chicken::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 8px;
    width: 14px;
    height: 12px;
    border: 3px solid var(--ink);
    background: #ffb000;
}

.fx-chicken-a { left: 18%; bottom: 22%; }
.fx-chicken-b { right: 18%; bottom: 22%; animation-delay: .18s; }

.fx-tnt {
    width: 58px;
    height: 58px;
    left: 50%;
    top: 44%;
    border: 5px solid var(--ink);
    background: #ff3030;
    transform: translate(-50%, -50%);
    animation: fxTnt 1.2s ease both;
}

.fx-tnt::after {
    content: "TNT";
    position: absolute;
    inset: 18px 4px auto;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    text-align: center;
}

.fx-boom {
    inset: 22%;
    border: 8px solid #ff3030;
    animation: fxBoom 1.3s ease both;
}

.fx-house {
    width: 86px;
    height: 62px;
    left: 50%;
    top: 44%;
    border: 5px solid var(--ink);
    background: rgba(255,255,255,.7);
    transform: translate(-50%, -50%);
    animation: fxHouse 1.45s ease both;
}

.fx-house::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -34px;
    height: 34px;
    border: 5px solid var(--ink);
    background: #7a3f2a;
    transform: skewX(-28deg);
}

.fx-crack {
    width: 60px;
    height: 5px;
    border: 2px solid var(--ink);
    background: var(--ink);
    animation: fxCrack 1.15s ease both;
}

.fx-crack-a {
    left: 34%;
    top: 38%;
    transform: rotate(34deg);
}

.fx-crack-b {
    left: 42%;
    top: 52%;
    transform: rotate(-28deg);
}

.fx-zombie {
    width: 96px;
    height: 150px;
    left: 50%;
    bottom: 18%;
    border: 6px solid var(--ink);
    background: #4caf50;
    transform: translateX(-50%);
    animation: fxZombie 1.55s ease both;
}

.fx-shadow {
    inset: 0;
    background: rgba(42, 12, 11, .32);
    animation: fxShadow 1.55s ease both;
}

.fx-screamer {
    inset: 0;
    background:
        radial-gradient(circle at center, #fff 0 8%, #ff0033 9% 24%, rgba(42,12,11,.88) 25% 100%);
    animation: fxScreamer 1.2s steps(2) both;
}

.fx-portal {
    width: 64px;
    height: 92px;
    top: 34%;
    border: 6px solid var(--ink);
    background:
        linear-gradient(135deg, rgba(0,240,255,.6), rgba(255,0,127,.5));
    animation: fxPortal 1.45s ease both;
}

.fx-portal-a {
    left: 14%;
}

.fx-portal-b {
    right: 14%;
    animation-delay: .18s;
}

.runner-anim-teleport {
    animation: runnerTeleport 1.45s steps(2) both !important;
}

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

@keyframes runnerInvis {
    0% { opacity: 1; transform: translateX(-50%) scale(.86); }
    55% { opacity: .28; transform: translateX(-20%) scale(.86); }
    100% { opacity: 0; transform: translateX(44%) scale(.86); }
}

@keyframes fxWand {
    0% { opacity: 0; transform: rotate(-28deg) translateY(18px); }
    30%, 70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-28deg) translateY(-26px); }
}

@keyframes fxDust {
    0% { opacity: 0; transform: scale(.5); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.8) translateY(-34px); }
}

@keyframes fxPop {
    0% { opacity: 0; transform: scale(.8); }
    40% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.15); }
}

@keyframes fxBook {
    0% { opacity: 0; transform: translateX(-50%) rotate(-20deg) scale(.7); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) rotate(16deg) scale(1.15); }
}

@keyframes fxPage {
    0% { opacity: 0; transform: translateY(20px) rotate(0); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50px) rotate(28deg); }
}

@keyframes fxPig {
    0% { opacity: 0; transform: translateX(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateX(420px); }
}

@keyframes fxSpeed {
    0% { opacity: 0; transform: translateX(80px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-30px); }
}

@keyframes fxAnimal {
    0% { opacity: 0; transform: scale(.5) rotate(0); }
    45% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.35) rotate(16deg); }
}

@keyframes runnerGiga {
    0% { transform: translateX(-50%) scale(.86); }
    50% { transform: translateX(-50%) scale(1.35); }
    100% { transform: translateX(-50%) scale(.86); }
}

@keyframes fxAura {
    0% { opacity: 0; transform: scale(.5); }
    45% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes fxMuscle {
    0% { opacity: 0; transform: translateY(20px); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes fxPotato {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(260px) rotate(120deg); }
}

@keyframes runnerKick {
    0% { transform: translateX(-50%) scale(.86) translateY(0); }
    45% { transform: translateX(-50%) scale(.86) translateY(-110px); }
    100% { transform: translateX(-50%) scale(.86) translateY(0); }
}

@keyframes fxKick {
    0% { opacity: 0; transform: translateX(-40px) rotate(-15deg); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(120px) rotate(15deg); }
}

@keyframes fxCloud {
    0% { opacity: 0; transform: translateX(-50%) scale(.6); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scale(1.4); }
}

@keyframes fxHeart {
    0% { opacity: 0; transform: rotate(45deg) translateY(20px) scale(.6); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translateY(-70px) scale(1.15); }
}

@keyframes fxChicken {
    0% { opacity: 0; transform: translateY(22px); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes fxTnt {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes fxBoom {
    0% { opacity: 0; transform: scale(.25); }
    55% { opacity: 1; background: rgba(255, 0, 0, .16); }
    100% { opacity: 0; transform: scale(1.8); }
}

@keyframes fxHouse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
    45% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 20%) scale(.7) rotate(8deg); }
}

@keyframes fxCrack {
    0% { opacity: 0; transform: scaleX(.2) rotate(34deg); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: scaleX(1.4) rotate(34deg); }
}

@keyframes fxZombie {
    0% { opacity: 0; transform: translateX(-50%) scale(.3); }
    40% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
}

@keyframes fxShadow {
    0% { opacity: 0; }
    45% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fxScreamer {
    0% { opacity: 0; transform: scale(.8); }
    30% { opacity: 1; transform: scale(1); }
    70% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.2); }
}

@keyframes fxPortal {
    0% { opacity: 0; transform: scaleY(.4); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: scaleY(1.25); }
}

@keyframes runnerTeleport {
    0% { opacity: 1; transform: translateX(-50%) scale(.86); }
    35% { opacity: 0; transform: translateX(-120%) scale(.86); }
    70% { opacity: 0; transform: translateX(80%) scale(.86); }
    100% { opacity: 1; transform: translateX(-50%) scale(.86); }
}

/* animation fix v21 */

.skin-stage {
    position: relative;
}

.effect-animation-layer {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

.effect-live-label {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 31;
    padding: 9px 10px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .86);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    pointer-events: none;
}

.effect-playing .effect-card {
    opacity: .55;
    cursor: wait;
    pointer-events: none;
}

.effect-card:disabled {
    opacity: .55;
    cursor: wait;
}

.runner-anim-invis {
    animation: runnerInvisFixed 1.6s ease both !important;
}

.runner-anim-gigachad {
    animation: runnerGigaFixed 1.6s ease both !important;
}

.runner-anim-kick {
    animation: runnerKickFixed 1.6s ease both !important;
}

.runner-anim-teleport {
    animation: runnerTeleportFixed 1.6s steps(2) both !important;
}

.fx-wand,
.fx-book,
.fx-page,
.fx-pig,
.fx-speed,
.fx-animal,
.fx-aura,
.fx-muscle,
.fx-potato,
.fx-kick,
.fx-cloud,
.fx-heart,
.fx-chicken,
.fx-tnt,
.fx-boom,
.fx-house,
.fx-crack,
.fx-zombie,
.fx-shadow,
.fx-screamer,
.fx-portal,
.fx-dust {
    position: absolute;
    display: block;
    box-sizing: border-box;
}

.fx-wand {
    width: 62px;
    height: 10px;
    left: 58%;
    top: 36%;
    border: 3px solid var(--ink);
    background: var(--pink);
    transform: rotate(-28deg);
    animation: fxWandFixed 1.3s ease both;
}

.fx-dust {
    width: 13px;
    height: 13px;
    border: 3px solid var(--ink);
    background: rgba(255,255,255,.8);
    animation: fxDustFixed 1.25s ease both;
}

.fx-dust-a {
    left: 54%;
    top: 28%;
}

.fx-dust-b {
    left: 70%;
    top: 45%;
    animation-delay: .1s;
}

.fx-book {
    width: 58px;
    height: 42px;
    left: 50%;
    top: 34%;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.86);
    transform: translateX(-50%);
    animation: fxPopFixed 1.35s ease both;
}

.fx-page {
    width: 28px;
    height: 36px;
    top: 30%;
    border: 3px solid var(--ink);
    background: rgba(255,255,255,.86);
    animation: fxFloatFixed 1.25s ease both;
}

.fx-page-a { left: 30%; }
.fx-page-b { right: 30%; animation-delay: .14s; }

.fx-pig {
    width: 74px;
    height: 42px;
    left: -90px;
    bottom: 18%;
    border: 4px solid var(--ink);
    background: #ff92c8;
    animation: fxPigFixed 1.35s ease both;
}

.fx-pig::before {
    content: "";
    position: absolute;
    right: -18px;
    top: 6px;
    width: 28px;
    height: 28px;
    border: 4px solid var(--ink);
    background: #ff92c8;
}

.fx-speed {
    width: 42px;
    height: 5px;
    left: 20px;
    border: 2px solid var(--ink);
    background: var(--blue);
    animation: fxSpeedFixed 1s ease both;
}

.fx-speed-a { top: 54%; }
.fx-speed-b { top: 64%; animation-delay: .1s; }

.fx-animal {
    width: 44px;
    height: 44px;
    border: 4px solid var(--ink);
    animation: fxPopFixed 1.25s ease both;
}

.fx-animal-a { left: 18%; top: 28%; background: var(--pink); }
.fx-animal-b { left: 44%; top: 18%; background: var(--blue); animation-delay: .14s; }
.fx-animal-c { right: 18%; top: 34%; background: rgba(255,255,255,.7); animation-delay: .26s; }

.fx-aura {
    inset: 22%;
    border: 6px solid var(--pink);
    animation: fxAuraFixed 1.25s ease both;
}

.fx-muscle {
    width: 38px;
    height: 28px;
    border: 4px solid var(--ink);
    background: var(--pink);
    animation: fxFloatFixed 1.2s ease both;
}

.fx-muscle-a { left: 20%; top: 38%; }
.fx-muscle-b { right: 20%; top: 38%; }

.fx-potato {
    width: 22px;
    height: 28px;
    border: 3px solid var(--ink);
    background: #b98236;
    animation: fxPotatoFixed 1.35s ease both;
}

.fx-potato-a { left: 18%; top: -10%; }
.fx-potato-b { left: 40%; top: -12%; animation-delay: .12s; }
.fx-potato-c { left: 62%; top: -10%; animation-delay: .24s; }
.fx-potato-d { left: 78%; top: -16%; animation-delay: .36s; }

.fx-kick {
    width: 70px;
    height: 28px;
    left: 14%;
    bottom: 30%;
    border: 4px solid var(--ink);
    background: var(--pink);
    animation: fxKickFixed 1s ease both;
}

.fx-cloud {
    width: 90px;
    height: 24px;
    left: 50%;
    bottom: 18%;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.7);
    transform: translateX(-50%);
    animation: fxCloudFixed 1.15s ease both;
}

.fx-heart {
    width: 24px;
    height: 24px;
    border: 3px solid var(--ink);
    background: var(--pink);
    transform: rotate(45deg);
    animation: fxHeartFixed 1.25s ease both;
}

.fx-heart-a { left: 28%; top: 48%; }
.fx-heart-b { left: 48%; top: 38%; animation-delay: .12s; }
.fx-heart-c { left: 66%; top: 50%; animation-delay: .24s; }

.fx-chicken {
    width: 42px;
    height: 34px;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.9);
    animation: fxFloatFixed 1.35s ease both;
}

.fx-chicken::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 8px;
    width: 14px;
    height: 12px;
    border: 3px solid var(--ink);
    background: #ffb000;
}

.fx-chicken-a { left: 18%; bottom: 22%; }
.fx-chicken-b { right: 18%; bottom: 22%; animation-delay: .18s; }

.fx-tnt {
    width: 58px;
    height: 58px;
    left: 50%;
    top: 44%;
    border: 5px solid var(--ink);
    background: #ff3030;
    transform: translate(-50%, -50%);
    animation: fxTntFixed 1.1s ease both;
}

.fx-tnt::after {
    content: "TNT";
    position: absolute;
    inset: 18px 4px auto;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    text-align: center;
}

.fx-boom {
    inset: 22%;
    border: 8px solid #ff3030;
    animation: fxBoomFixed 1.2s ease both;
}

.fx-house {
    width: 86px;
    height: 62px;
    left: 50%;
    top: 44%;
    border: 5px solid var(--ink);
    background: rgba(255,255,255,.7);
    transform: translate(-50%, -50%);
    animation: fxHouseFixed 1.35s ease both;
}

.fx-house::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -34px;
    height: 34px;
    border: 5px solid var(--ink);
    background: #7a3f2a;
    transform: skewX(-28deg);
}

.fx-crack {
    width: 60px;
    height: 5px;
    border: 2px solid var(--ink);
    background: var(--ink);
    animation: fxCrackFixed 1.15s ease both;
}

.fx-crack-a { left: 34%; top: 38%; transform: rotate(34deg); }
.fx-crack-b { left: 42%; top: 52%; transform: rotate(-28deg); }

.fx-zombie {
    width: 96px;
    height: 150px;
    left: 50%;
    bottom: 18%;
    border: 6px solid var(--ink);
    background: #4caf50;
    transform: translateX(-50%);
    animation: fxZombieFixed 1.45s ease both;
}

.fx-shadow {
    inset: 0;
    background: rgba(42, 12, 11, .34);
    animation: fxShadowFixed 1.45s ease both;
}

.fx-screamer {
    inset: 0;
    background:
        radial-gradient(circle at center, #fff 0 8%, #ff0033 9% 24%, rgba(42,12,11,.88) 25% 100%);
    animation: fxScreamerFixed 1.1s steps(2) both;
}

.fx-portal {
    width: 64px;
    height: 92px;
    top: 34%;
    border: 6px solid var(--ink);
    background:
        linear-gradient(135deg, rgba(0,240,255,.6), rgba(255,0,127,.5));
    animation: fxPortalFixed 1.35s ease both;
}

.fx-portal-a { left: 14%; }
.fx-portal-b { right: 14%; animation-delay: .16s; }

@keyframes runnerInvisFixed {
    0% { opacity: 1; transform: translateX(-50%) scale(.86); }
    55% { opacity: .28; transform: translateX(-20%) scale(.86); }
    100% { opacity: 0; transform: translateX(44%) scale(.86); }
}

@keyframes runnerGigaFixed {
    0% { transform: translateX(-50%) scale(.86); }
    50% { transform: translateX(-50%) scale(1.35); }
    100% { transform: translateX(-50%) scale(.86); }
}

@keyframes runnerKickFixed {
    0% { transform: translateX(-50%) scale(.86) translateY(0); }
    45% { transform: translateX(-50%) scale(.86) translateY(-110px); }
    100% { transform: translateX(-50%) scale(.86) translateY(0); }
}

@keyframes runnerTeleportFixed {
    0% { opacity: 1; transform: translateX(-50%) scale(.86); }
    35% { opacity: 0; transform: translateX(-120%) scale(.86); }
    70% { opacity: 0; transform: translateX(80%) scale(.86); }
    100% { opacity: 1; transform: translateX(-50%) scale(.86); }
}

@keyframes fxWandFixed {
    0% { opacity: 0; transform: rotate(-28deg) translateY(18px); }
    30%, 70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-28deg) translateY(-26px); }
}

@keyframes fxDustFixed {
    0% { opacity: 0; transform: scale(.5); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.8) translateY(-34px); }
}

@keyframes fxPopFixed {
    0% { opacity: 0; transform: scale(.7); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.18); }
}

@keyframes fxFloatFixed {
    0% { opacity: 0; transform: translateY(20px); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-45px); }
}

@keyframes fxPigFixed {
    0% { opacity: 0; transform: translateX(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateX(420px); }
}

@keyframes fxSpeedFixed {
    0% { opacity: 0; transform: translateX(80px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-30px); }
}

@keyframes fxAuraFixed {
    0% { opacity: 0; transform: scale(.5); }
    45% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes fxPotatoFixed {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(260px) rotate(120deg); }
}

@keyframes fxKickFixed {
    0% { opacity: 0; transform: translateX(-40px) rotate(-15deg); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(120px) rotate(15deg); }
}

@keyframes fxCloudFixed {
    0% { opacity: 0; transform: translateX(-50%) scale(.6); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scale(1.4); }
}

@keyframes fxHeartFixed {
    0% { opacity: 0; transform: rotate(45deg) translateY(20px) scale(.6); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translateY(-70px) scale(1.15); }
}

@keyframes fxTntFixed {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes fxBoomFixed {
    0% { opacity: 0; transform: scale(.25); }
    55% { opacity: 1; background: rgba(255, 0, 0, .16); }
    100% { opacity: 0; transform: scale(1.8); }
}

@keyframes fxHouseFixed {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
    45% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 20%) scale(.7) rotate(8deg); }
}

@keyframes fxCrackFixed {
    0% { opacity: 0; transform: scaleX(.2) rotate(34deg); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: scaleX(1.4) rotate(34deg); }
}

@keyframes fxZombieFixed {
    0% { opacity: 0; transform: translateX(-50%) scale(.3); }
    40% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
}

@keyframes fxShadowFixed {
    0% { opacity: 0; }
    45% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fxScreamerFixed {
    0% { opacity: 0; transform: scale(.8); }
    30% { opacity: 1; transform: scale(1); }
    70% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.2); }
}

@keyframes fxPortalFixed {
    0% { opacity: 0; transform: scaleY(.4); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: scaleY(1.25); }
}

/* clean player detail v22 */

.player-detail {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    position: absolute;
    inset: 108px 0 auto 0;
}

.skin-stage-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.detail-back {
    width: fit-content;
    min-height: 46px;
    padding: 11px 15px;
    font-size: 9px;
}

.skin-head-stage {
    width: min(260px, 100%);
    aspect-ratio: 1 / 1;
    justify-self: center;
    border: 5px solid var(--ink);
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .24), transparent 36%),
        rgba(255, 255, 255, .14);
    display: grid;
    place-items: center;
}

.selected-skin-head {
    width: 138px;
    height: 138px;
    display: block;
    border: 6px solid var(--ink);
    box-shadow: 6px 6px 0 rgba(42, 12, 11, .26);
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .34), rgba(255, 255, 255, .12));
}

.selected-skin-m {
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .34), rgba(255, 255, 255, .12));
}

.selected-skin-w {
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .34), rgba(255, 255, 255, .12));
}

.runner,
.runner-head,
.runner-body,
.runner-arm,
.runner-leg,
.effect-animation-layer,
.effect-live-label {
    display: none !important;
}

.selected-player {
    width: 100%;
    padding: 15px 16px;
}

.selected-player span {
    font-size: clamp(2rem, 4.5vw, 3.3rem);
}

.effect-store-single {
    width: 100%;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
}

.effect-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 5px solid var(--ink);
}

.effect-tab {
    min-height: 58px;
    border: 0;
    border-right: 5px solid var(--ink);
    background: rgba(255, 255, 255, .1);
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    cursor: pointer;
}

.effect-tab:last-child {
    border-right: 0;
}

.effect-tab.active {
    color: var(--peach-light);
    background: var(--ink);
}

.effect-tab:hover {
    color: var(--pink);
    background: rgba(255, 255, 255, .28);
}

.effect-tab.active:hover {
    color: var(--peach-light);
    background: var(--ink);
}

.effect-panel {
    display: none;
    grid-template-columns: 1fr;
    gap: 10px;
}

.effect-panel.active {
    display: grid;
}

.effect-card {
    min-height: 78px;
    display: grid;
    align-content: center;
}

.effect-card:disabled {
    opacity: 1;
    cursor: pointer;
}

.effect-playing .effect-card {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

@media (max-width: 1260px) {
    .player-detail {
        position: relative;
        inset: auto;
        margin-top: -20px;
    }
}

@media (max-width: 620px) {
    .skin-head-stage {
        width: min(220px, 100%);
    }

    .selected-skin-head {
        width: 112px;
        height: 112px;
    }

    .effect-store-single {
        padding: 14px;
    }

    .effect-tab {
        min-height: 52px;
        font-size: 8px;
    }
}

/* avatar frame tweak v23 */

.skin-head-stage {
    width: min(280px, 100%);
    aspect-ratio: 1 / 1;
    justify-self: center;
    display: grid;
    place-items: center;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .08);
}

.skin-stage-w {
    background:
        linear-gradient(135deg, rgba(255, 0, 127, .18), rgba(255, 255, 255, .08));
}

.skin-stage-m {
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .18), rgba(255, 255, 255, .08));
}

.selected-skin-head {
    width: 180px;
    height: 180px;
    display: block;
    background: transparent;
    border: 6px solid var(--ink);
    box-shadow: none;
}

.selected-skin-w {
    outline: 12px solid rgba(255, 0, 127, .38);
    outline-offset: 0;
}

.selected-skin-m {
    outline: 12px solid rgba(0, 240, 255, .38);
    outline-offset: 0;
}

@media (max-width: 620px) {
    .skin-head-stage {
        width: min(238px, 100%);
    }

    .selected-skin-head {
        width: 150px;
        height: 150px;
    }

    .selected-skin-w,
    .selected-skin-m {
        outline-width: 10px;
    }
}

/* remove bottom stripe in avatar square */

.skin-head-stage::before,
.skin-head-stage::after {
    content: none !important;
    display: none !important;
}

/* avatar frame cleanup v25 */

.skin-head-stage {
    width: min(292px, 100%);
    padding: 22px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .10);
    box-shadow: 7px 7px 0 rgba(42, 12, 11, .18);
}

.skin-stage-w {
    box-shadow: 7px 7px 0 rgba(255, 0, 127, .22);
}

.skin-stage-m {
    box-shadow: 7px 7px 0 rgba(0, 240, 255, .22);
}

.selected-skin-head {
    width: 170px;
    height: 170px;
    display: block;
    background: rgba(255, 255, 255, .04);
    border: 5px solid var(--ink);
    box-shadow: none;
}

.selected-skin-w {
    box-shadow: 0 0 0 10px rgba(255, 0, 127, .30);
}

.selected-skin-m {
    box-shadow: 0 0 0 10px rgba(0, 240, 255, .30);
}

@media (max-width: 620px) {
    .skin-head-stage {
        width: min(240px, 100%);
        padding: 16px;
    }

    .selected-skin-head {
        width: 144px;
        height: 144px;
    }

    .selected-skin-w {
        box-shadow: 0 0 0 8px rgba(255, 0, 127, .30);
    }

    .selected-skin-m {
        box-shadow: 0 0 0 8px rgba(0, 240, 255, .30);
    }
}

/* bring avatar squares closer v26 */

.skin-head-stage {
    padding: 10px;
}

.selected-skin-w {
    box-shadow: 0 0 0 8px rgba(255, 0, 127, .30);
}

.selected-skin-m {
    box-shadow: 0 0 0 8px rgba(0, 240, 255, .30);
}

@media (max-width: 620px) {
    .skin-head-stage {
        padding: 8px;
    }

    .selected-skin-w {
        box-shadow: 0 0 0 6px rgba(255, 0, 127, .30);
    }

    .selected-skin-m {
        box-shadow: 0 0 0 6px rgba(0, 240, 255, .30);
    }
}

/* global peach background fix v27 */

html {
    min-height: 100%;
    background: var(--peach);
}

body {
    min-height: 100dvh;
    background: transparent !important;
    isolation: isolate;
}

body::after {
    content: "";
    position: fixed;
    inset: -2px;
    z-index: -2;
    pointer-events: none;
    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%);
}

body::before {
    z-index: -1;
}

.site-page,
.rank-panel {
    position: relative;
}

/* fix rating panels after background patch v28 */

.rank-panel {
    position: fixed;
    top: 96px;
    bottom: 28px;
    z-index: 4;
}

.rank-panel-left {
    left: 30px;
    right: auto;
}

.rank-panel-right {
    right: 30px;
    left: auto;
}

@media (max-width: 1260px) {
    .rank-panel {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: min(900px, calc(100% - 40px));
        max-height: 520px;
        margin: 22px auto 0;
    }

    .rank-panel-left {
        margin-top: 0;
    }
}

/* blue text outline v29 */

.rank-panel-right .rank-title b,
.rank-panel-right .rank-place,
.rank-panel-right .rank-head-row,
.player-m .player-position,
.player-m .player-place,
.effect-label-debuff,
.selected-skin-m + *,
.blue-text {
    -webkit-text-stroke: .35px rgba(42, 12, 11, .9);
    text-shadow:
        1px 0 0 rgba(42, 12, 11, .9),
        -1px 0 0 rgba(42, 12, 11, .9),
        0 1px 0 rgba(42, 12, 11, .9),
        0 -1px 0 rgba(42, 12, 11, .9);
}

.rank-panel-right .rank-title b {
    text-shadow:
        1px 0 0 var(--ink),
        -1px 0 0 var(--ink),
        0 1px 0 var(--ink),
        0 -1px 0 var(--ink),
        2px 2px 0 rgba(42, 12, 11, .3);
}

.rank-panel-right .rank-place,
.player-m .player-position,
.player-m .player-place {
    color: var(--blue) !important;
}

/* softer blue readability v30 */

.rank-panel-right .rank-title b,
.rank-panel-right .rank-place,
.rank-panel-right .rank-head-row,
.player-m .player-position,
.player-m .player-place,
.effect-label-debuff,
.blue-text {
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}

.rank-panel-right .rank-title b {
    color: var(--blue) !important;
    text-shadow:
        1px 1px 0 rgba(42, 12, 11, .38) !important;
}

.rank-panel-right .rank-place,
.player-m .player-position,
.player-m .player-place {
    color: #008fa0 !important;
    text-shadow:
        .7px .7px 0 rgba(42, 12, 11, .32) !important;
}

.rank-panel-right .rank-head-row {
    color: var(--ink) !important;
    text-shadow: none !important;
}

.player-m .player-head,
.rank-panel-right .skin-head {
    box-shadow:
        3px 3px 0 rgba(42, 12, 11, .25),
        inset 0 0 0 999px rgba(0, 240, 255, .04);
}

.selected-skin-m {
    box-shadow:
        0 0 0 7px rgba(0, 240, 255, .24),
        4px 4px 0 rgba(42, 12, 11, .22) !important;
}

/* soft pink and blue readability v31 */

.rank-panel-left .rank-title b,
.rank-panel-left .rank-place,
.player-w .player-position,
.player-w .player-place,
.effect-label-buff {
    -webkit-text-stroke: 0 !important;
    text-shadow:
        .7px .7px 0 rgba(42, 12, 11, .24) !important;
}

.rank-panel-left .rank-title b {
    color: var(--pink) !important;
    text-shadow:
        1px 1px 0 rgba(42, 12, 11, .32) !important;
}

.rank-panel-left .rank-place,
.player-w .player-position,
.player-w .player-place {
    color: #d9006d !important;
}

.rank-panel-right .rank-title b,
.rank-panel-right .rank-place,
.player-m .player-position,
.player-m .player-place,
.effect-label-debuff {
    -webkit-text-stroke: 0 !important;
    text-shadow:
        .7px .7px 0 rgba(42, 12, 11, .24) !important;
}

.rank-panel-right .rank-title b {
    color: var(--blue) !important;
    text-shadow:
        1px 1px 0 rgba(42, 12, 11, .32) !important;
}

.rank-panel-right .rank-place,
.player-m .player-position,
.player-m .player-place {
    color: #008fa0 !important;
}

/* darker M and rating scrollbars v32 */

.rank-panel-right .rank-title b {
    color: #007f8f !important;
    text-shadow:
        1px 1px 0 rgba(42, 12, 11, .38) !important;
}

/* Firefox */
.rank-panel-left .rank-table,
.rank-panel-right .rank-table {
    scrollbar-color: #2a0c0b rgba(42, 12, 11, .24);
}

/* Chrome / Edge */
.rank-panel-left .rank-table::-webkit-scrollbar-track,
.rank-panel-right .rank-table::-webkit-scrollbar-track {
    background: rgba(42, 12, 11, .20);
    border-left: 3px solid rgba(42, 12, 11, .75);
    box-shadow: inset 0 0 0 2px rgba(42, 12, 11, .12);
}

.rank-panel-left .rank-table::-webkit-scrollbar-thumb,
.rank-panel-right .rank-table::-webkit-scrollbar-thumb {
    background: #2a0c0b;
    border: 3px solid rgba(255, 255, 255, .12);
}

.rank-panel-left .rank-table::-webkit-scrollbar-thumb:hover {
    background: #b8005d;
}

.rank-panel-right .rank-table::-webkit-scrollbar-thumb:hover {
    background: #007f8f;
}

/* selected player avatar showcase v33 */

.skin-head-stage {
    width: min(320px, 100%);
    height: 250px;
    justify-self: center;
    position: relative;
    display: grid;
    place-items: center;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible;
}

.skin-head-stage::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 0;
    opacity: .95;
}

.skin-stage-w::before {
    background:
        radial-gradient(circle,
            rgba(255, 0, 127, .26) 0%,
            rgba(255, 0, 127, .18) 36%,
            rgba(255, 255, 255, .10) 58%,
            rgba(255, 255, 255, 0) 76%);
}

.skin-stage-m::before {
    background:
        radial-gradient(circle,
            rgba(0, 240, 255, .26) 0%,
            rgba(0, 240, 255, .18) 36%,
            rgba(255, 255, 255, .10) 58%,
            rgba(255, 255, 255, 0) 76%);
}

.skin-head-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 132px;
    height: 20px;
    border: 4px solid var(--ink);
    background:
        linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
    box-shadow: 0 5px 0 rgba(42, 12, 11, .18);
    z-index: 0;
}

.selected-skin-head {
    width: 164px;
    height: 164px;
    position: relative;
    z-index: 2;
    display: block;
    border: 5px solid var(--ink);
    background: rgba(255,255,255,.08);
    box-shadow:
        0 0 0 8px rgba(255,255,255,.16),
        0 12px 24px rgba(42, 12, 11, .18);
    animation: selectedHeadFloat 2.4s ease-in-out infinite;
}

.selected-skin-w {
    box-shadow:
        0 0 0 8px rgba(255, 0, 127, .22),
        0 12px 24px rgba(42, 12, 11, .18) !important;
}

.selected-skin-m {
    box-shadow:
        0 0 0 8px rgba(0, 240, 255, .22),
        0 12px 24px rgba(42, 12, 11, .18) !important;
}

@keyframes selectedHeadFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 620px) {
    .skin-head-stage {
        width: min(260px, 100%);
        height: 210px;
    }

    .skin-head-stage::before {
        width: 170px;
        height: 170px;
    }

    .skin-head-stage::after {
        width: 108px;
        height: 16px;
        bottom: 18px;
        border-width: 3px;
    }

    .selected-skin-head {
        width: 132px;
        height: 132px;
        border-width: 4px;
        box-shadow:
            0 0 0 6px rgba(255,255,255,.16),
            0 10px 18px rgba(42, 12, 11, .18);
    }

    .selected-skin-w {
        box-shadow:
            0 0 0 6px rgba(255, 0, 127, .22),
            0 10px 18px rgba(42, 12, 11, .18) !important;
    }

    .selected-skin-m {
        box-shadow:
            0 0 0 6px rgba(0, 240, 255, .22),
            0 10px 18px rgba(42, 12, 11, .18) !important;
    }
}

/* shop grid v36 */

.shop-shell {
    width: min(1120px, calc(100% - 40px));
}

.shop-page {
    display: grid;
    gap: 24px;
}

.shop-head {
    display: grid;
    gap: 10px;
}

.shop-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(3rem, 7vw, 6.6rem);
    line-height: .86;
    letter-spacing: -.065em;
    color: var(--ink);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.shop-card {
    min-height: 440px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 16px;
    padding: 24px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
    color: var(--ink);
    box-shadow: 8px 8px 0 rgba(42, 12, 11, .18);
}

.shop-card-pink {
    box-shadow: 8px 8px 0 rgba(255, 0, 127, .22);
}

.shop-card-blue {
    box-shadow: 8px 8px 0 rgba(0, 143, 160, .24);
}

.shop-card-top {
    display: grid;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 5px solid var(--ink);
}

.shop-num {
    width: fit-content;
    padding: 7px 8px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
    color: var(--pink);
}

.shop-card-blue .shop-num {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.shop-card h2 {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.25rem, 4.2vw, 4.3rem);
    line-height: .86;
    letter-spacing: -.055em;
    color: var(--ink);
}

.shop-card p {
    margin: 0;
    font-size: clamp(.96rem, 1.1vw, 1.04rem);
    line-height: 1.55;
    text-transform: none;
}

.shop-button {
    align-self: end;
    min-height: 58px;
    padding: 14px 18px;
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.4;
    box-shadow: 6px 6px 0 var(--pink);
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}

.shop-button-blue {
    box-shadow: 6px 6px 0 #008fa0;
}

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

.shop-button-blue:hover {
    box-shadow: 3px 3px 0 #008fa0;
    background: #008fa0;
}

@media (max-width: 820px) {
    .shop-shell {
        width: min(100% - 28px, 1120px);
    }

    .shop-title {
        font-size: clamp(2.6rem, 12vw, 4.8rem);
    }

    .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-card {
        min-height: auto;
        padding: 18px;
    }

    .shop-button {
        width: 100%;
    }
}

/* admin powered data v40 */

.empty-state {
    padding: 18px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.6;
    color: var(--ink);
}

.players-empty {
    grid-column: 1 / -1;
}

.effect-card {
    position: relative;
    padding-right: 76px;
}

.effect-price {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 44px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .22);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1;
    color: var(--pink);
}

.debuff-card .effect-price {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.shop-card-bottom {
    align-self: end;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}

.shop-price {
    min-height: 58px;
    min-width: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: var(--pink);
}

.shop-card-blue .shop-price {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.shop-card-bottom .shop-button {
    width: 100%;
}

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

    .shop-price {
        width: 100%;
    }

    .effect-card {
        padding-right: 13px;
        padding-top: 52px;
    }
}

/* postgres data prices v50 */

.empty-state {
    padding: 18px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.6;
    color: var(--ink);
}

.players-empty {
    grid-column: 1 / -1;
}

.effect-card {
    position: relative;
    padding-right: 78px;
}

.effect-price {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 46px;
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .22);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1;
    color: #d9006d;
}

.debuff-card .effect-price {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.shop-card-bottom {
    align-self: end;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}

.shop-price {
    min-height: 58px;
    min-width: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: #d9006d;
}

.shop-card-blue .shop-price {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.shop-card-bottom .shop-button {
    width: 100%;
}

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

    .shop-price {
        width: 100%;
    }

    .effect-card {
        padding-right: 13px;
        padding-top: 52px;
    }
}

/* checkout page v51 */

.checkout-shell {
    width: min(860px, calc(100% - 40px));
}

.checkout-page {
    display: grid;
}

.checkout-card {
    display: grid;
    gap: 20px;
    padding: 24px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .13);
    box-shadow: 8px 8px 0 rgba(42, 12, 11, .18);
}

.checkout-pink {
    box-shadow: 8px 8px 0 rgba(255, 0, 127, .22);
}

.checkout-blue {
    box-shadow: 8px 8px 0 rgba(0, 143, 160, .24);
}

.checkout-top {
    display: grid;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 5px solid var(--ink);
}

.checkout-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.8rem, 7vw, 6rem);
    line-height: .84;
    letter-spacing: -.065em;
    color: var(--ink);
}

.checkout-info {
    display: grid;
    gap: 12px;
}

.checkout-info p {
    margin: 0;
    font-size: clamp(.98rem, 1.1vw, 1.08rem);
    line-height: 1.55;
    text-transform: none;
}

.checkout-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .16);
}

.checkout-price-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.5;
}

.checkout-price {
    min-width: 110px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .2);
    font-family: 'Press Start 2P', monospace;
    font-size: 15px;
    color: #d9006d;
}

.checkout-blue .checkout-price {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.checkout-confirm {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .12);
    font-size: 14px;
    line-height: 1.4;
    text-transform: none;
}

.checkout-confirm input {
    width: 24px;
    height: 24px;
    accent-color: var(--pink);
}

.checkout-pay {
    min-height: 64px;
    border: 5px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 7px 7px 0 var(--pink);
    cursor: pointer;
}

.checkout-blue .checkout-pay {
    box-shadow: 7px 7px 0 #008fa0;
}

.checkout-pay:not(:disabled):hover {
    transform: translate(3px, 3px);
    box-shadow: 4px 4px 0 var(--pink);
    background: var(--pink);
}

.checkout-blue .checkout-pay:not(:disabled):hover {
    box-shadow: 4px 4px 0 #008fa0;
    background: #008fa0;
}

.checkout-pay:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.checkout-note {
    min-height: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

@media (max-width: 620px) {
    .checkout-shell {
        width: min(100% - 28px, 860px);
    }

    .checkout-card {
        padding: 18px;
    }

    .checkout-price-row {
        grid-template-columns: 1fr;
    }

    .checkout-price {
        width: 100%;
    }
}

/* player grid height fix v52 */

.players-board {
    padding-bottom: 34px;
}

.player-grid {
    max-height: calc(100dvh - 170px);
    padding: 0 18px 34px 0;
    overflow-y: auto;
    overflow-x: visible;
}

.player-card {
    margin-bottom: 8px;
}

@media (max-width: 1260px) {
    .player-grid {
        max-height: none;
        overflow-y: visible;
        padding: 0 0 34px 0;
    }
}

@media (max-width: 620px) {
    .player-grid {
        padding-bottom: 28px;
    }

    .players-board {
        padding-bottom: 28px;
    }
}

/* balance and funded effects v70 */

.effect-wallet {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .12);
}

.effect-wallet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 4px solid var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
}

.effect-wallet-top b {
    min-width: 76px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .2);
    color: #d9006d;
}

.effect-wallet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
    align-items: end;
}

.effect-wallet-grid label {
    display: grid;
    gap: 6px;
}

.effect-wallet-grid small {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1.4;
}

.effect-wallet-grid input {
    min-height: 48px;
    padding: 0 12px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .2);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
}

.effect-wallet-grid button,
.effect-wallet-hint {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.effect-wallet-grid button {
    box-shadow: 5px 5px 0 var(--pink);
    cursor: pointer;
}

.effect-wallet-grid button:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--pink);
    background: var(--pink);
}

.effect-wallet-hint {
    background: rgba(255, 255, 255, .14);
    color: var(--ink);
    font-size: 8px;
}

.effect-wallet-message {
    min-height: 20px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: none;
}

.effect-card {
    padding-right: 14px !important;
    padding-bottom: 46px;
}

.effect-progress-text {
    position: absolute;
    right: 12px;
    top: 12px;
    min-width: 70px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .22);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1;
    color: #d9006d;
}

.debuff-card .effect-progress-text {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.effect-progress-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 16px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.effect-progress-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pink);
}

.debuff-card .effect-progress-bar i {
    background: #008fa0;
}

.effect-card-ready {
    background: rgba(255, 255, 255, .28);
}

.effect-card-ready .effect-progress-text::after {
    content: " ready";
}

@media (max-width: 620px) {
    .effect-wallet-grid {
        grid-template-columns: 1fr;
    }

    .effect-wallet-top {
        display: grid;
    }

    .effect-wallet-top b {
        width: 100%;
    }
}

/* account panel and effect payment modal v80 */

.account-panel {
    position: fixed;
    top: 96px;
    bottom: 28px;
    right: 30px;
    width: 410px;
    padding: 18px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    z-index: 4;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: opacity .35s ease, transform .35s ease;
}

.account-title {
    padding-bottom: 14px;
    border-bottom: 5px solid var(--ink);
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.2rem, 2.7vw, 3rem);
    line-height: .9;
    letter-spacing: -.05em;
}

.account-card {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.account-avatar {
    width: 168px;
    height: 168px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 5px solid var(--ink);
    box-shadow: 7px 7px 0 rgba(42, 12, 11, .24);
    background: rgba(255, 255, 255, .14);
}

.account-avatar i {
    display: block;
    border: 1px solid rgba(42, 12, 11, .25);
}

.account-name {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 12px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    text-transform: none;
    overflow-wrap: anywhere;
}

.account-balance {
    width: 100%;
    min-height: 92px;
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 14px;
    border: 5px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    box-shadow: 7px 7px 0 var(--pink);
    cursor: pointer;
}

.account-balance small {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.4;
}

.account-balance b {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.4rem, 4vw, 4.4rem);
    line-height: .8;
    letter-spacing: -.05em;
}

.account-balance:hover {
    transform: translate(3px, 3px);
    box-shadow: 4px 4px 0 var(--pink);
    background: var(--pink);
}

.player-selected .account-panel-right {
    transform: translateX(115%);
    opacity: 0;
    pointer-events: none;
}

.effect-wallet {
    display: none !important;
}

.effect-card {
    position: relative;
    padding-right: 14px !important;
    padding-bottom: 46px;
}

.effect-progress-text {
    position: absolute;
    right: 12px;
    top: 12px;
    min-width: 76px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .22);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1;
    color: #d9006d;
}

.debuff-card .effect-progress-text {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.effect-progress-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 16px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.effect-progress-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pink);
}

.debuff-card .effect-progress-bar i {
    background: #008fa0;
}

.effect-card-ready {
    background: rgba(255, 255, 255, .28);
}

.pay-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(42, 12, 11, .44);
}

.pay-modal.show {
    display: grid;
}

.pay-box {
    position: relative;
    width: min(460px, 100%);
    padding: 22px;
    border: 5px solid var(--ink);
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 58%, var(--peach-hot) 100%);
    box-shadow: 9px 9px 0 rgba(255, 0, 127, .28);
}

.pay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
}

.pay-title {
    padding-right: 40px;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.3rem, 7vw, 4.2rem);
    line-height: .84;
    letter-spacing: -.06em;
}

.pay-subtitle {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    text-transform: none;
    font-weight: 800;
}

.topup-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.topup-presets button,
.pay-main-button,
.pay-second-button {
    min-height: 52px;
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.35;
    box-shadow: 5px 5px 0 var(--pink);
    cursor: pointer;
}

.topup-presets button:hover,
.pay-main-button:not(:disabled):hover,
.pay-second-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--pink);
    background: var(--pink);
}

.pay-main-button:disabled {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
}

.pay-field {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.pay-field span {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.4;
}

.pay-field input {
    min-height: 52px;
    padding: 0 12px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .2);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
}

.pay-main-button,
.pay-second-button {
    width: 100%;
    margin-top: 14px;
}

.pay-message {
    min-height: 22px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: none;
}

.effect-pay-progress {
    margin-top: 18px;
    padding: 14px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .14);
}

.effect-pay-progress-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.effect-pay-bar {
    height: 20px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

.effect-pay-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pink);
}

@media (max-width: 1540px) {
    .account-panel {
        width: 360px;
    }
}

@media (max-width: 1260px) {
    .account-panel {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        width: min(900px, calc(100% - 40px));
        margin: 22px auto 0;
    }

    .player-selected .account-panel-right {
        display: none;
    }
}

@media (max-width: 620px) {
    .account-panel {
        width: min(100% - 28px, 900px);
        padding: 14px;
    }

    .account-avatar {
        width: 132px;
        height: 132px;
    }

    .topup-presets {
        grid-template-columns: 1fr 1fr;
    }
}

/* compact effects profile v90 */

.effects-header {
    align-items: center;
}

.effects-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-profile {
    min-height: 52px;
    display: grid;
    grid-template-columns: 38px minmax(0, auto);
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .16);
    color: var(--ink);
    box-shadow: 5px 5px 0 rgba(255, 0, 127, .22);
    cursor: pointer;
}

.mini-profile:hover {
    background: rgba(255, 255, 255, .3);
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 rgba(255, 0, 127, .28);
}

.mini-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
}

.mini-avatar i {
    display: block;
    border: 1px solid rgba(42, 12, 11, .18);
}

.mini-profile-text {
    min-width: 0;
    display: grid;
    gap: 3px;
    text-align: left;
}

.mini-profile-text small {
    max-width: 112px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: none;
}

.mini-profile-text b {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
    color: #d9006d;
}

/* убираем прошлую большую панель профиля, если CSS остался */
.account-panel,
.account-panel-right,
.account-card,
.account-avatar,
.account-balance {
    display: none !important;
}

.player-selected .rank-panel-left {
    transform: translateX(-115%);
    opacity: 0;
    pointer-events: none;
}

.player-selected .rank-panel-right {
    transform: translateX(115%);
    opacity: 0;
    pointer-events: none;
}

.effect-card {
    position: relative;
    padding-right: 14px !important;
    padding-bottom: 46px;
}

.effect-progress-text {
    position: absolute;
    right: 12px;
    top: 12px;
    min-width: 76px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .22);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1;
    color: #d9006d;
}

.debuff-card .effect-progress-text {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.effect-progress-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 16px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.effect-progress-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pink);
}

.debuff-card .effect-progress-bar i {
    background: #008fa0;
}

.pay-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(42, 12, 11, .44);
}

.pay-modal.show {
    display: grid;
}

.pay-box {
    position: relative;
    width: min(430px, 100%);
    padding: 20px;
    border: 5px solid var(--ink);
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .34), transparent 24%),
        linear-gradient(135deg, var(--peach-light) 0%, var(--peach) 58%, var(--peach-hot) 100%);
    box-shadow: 8px 8px 0 rgba(255, 0, 127, .25);
}

.pay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
}

.pay-title {
    padding-right: 40px;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.1rem, 6vw, 3.8rem);
    line-height: .84;
    letter-spacing: -.06em;
}

.pay-subtitle {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    text-transform: none;
    font-weight: 800;
}

.topup-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.topup-presets button,
.pay-main-button,
.pay-second-button {
    min-height: 50px;
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.35;
    box-shadow: 5px 5px 0 var(--pink);
    cursor: pointer;
}

.topup-presets button:hover,
.pay-main-button:not(:disabled):hover,
.pay-second-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--pink);
    background: var(--pink);
}

.pay-main-button:disabled {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
}

.pay-field {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.pay-field span {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.4;
}

.pay-field input {
    min-height: 50px;
    padding: 0 12px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .2);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
}

.pay-main-button,
.pay-second-button {
    width: 100%;
    margin-top: 14px;
}

.pay-message {
    min-height: 22px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: none;
}

.effect-pay-progress {
    margin-top: 18px;
    padding: 14px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .14);
}

.effect-pay-progress-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.effect-pay-bar {
    height: 20px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

.effect-pay-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pink);
}

@media (max-width: 620px) {
    .effects-header {
        display: block;
    }

    .effects-header-actions {
        margin-top: 16px;
        justify-content: space-between;
    }

    .mini-profile {
        grid-template-columns: 34px minmax(0, 1fr);
        max-width: 210px;
    }

    .topup-presets {
        grid-template-columns: 1fr 1fr;
    }
}

/* centered mini profile v91 */

.effects-header {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px) 1fr;
    align-items: center;
    gap: 18px;
}

.effects-header > .logo-small {
    justify-self: start;
}

.effects-header > .back-link {
    justify-self: end;
}

.effects-header-center {
    width: 100%;
    justify-self: center;
}

.mini-profile-center {
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(28px, 1fr) auto auto minmax(28px, 1fr);
    align-items: center;
    gap: 12px;
    color: var(--ink);
    cursor: pointer;
}

.mini-profile-center:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

.mini-side-line {
    display: block;
    height: 0;
    border-top: 4px solid var(--ink);
    opacity: .9;
}

.mini-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
}

.mini-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-left: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
    background: transparent;
    padding: 0 2px;
}

.mini-avatar i {
    display: block;
    width: 100%;
    height: 100%;
}

.mini-profile-text {
    min-width: 0;
    display: grid;
    gap: 3px;
    justify-items: start;
    text-align: left;
}

.mini-profile-text small {
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: none;
    color: rgba(42, 12, 11, .82);
}

.mini-profile-text b {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
    color: #d9006d;
}

@media (max-width: 920px) {
    .effects-header {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .effects-header > .logo-small,
    .effects-header > .back-link,
    .effects-header-center {
        justify-self: stretch;
    }

    .effects-header > .back-link {
        justify-self: start;
    }

    .mini-profile-center {
        grid-template-columns: minmax(20px, 1fr) auto auto minmax(20px, 1fr);
    }

    .mini-profile-text small {
        max-width: 110px;
    }
}

@media (max-width: 560px) {
    .mini-profile-center {
        grid-template-columns: 1fr auto auto 1fr;
        gap: 10px;
    }

    .mini-side-line {
        border-top-width: 3px;
    }

    .mini-profile-text small {
        max-width: 90px;
        font-size: 10px;
    }

    .mini-profile-text b {
        font-size: 9px;
    }
}

/* centered mini profile v91 */

.effects-header {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px) 1fr;
    align-items: center;
    gap: 18px;
}

.effects-header > .logo-small {
    justify-self: start;
}

.effects-header > .back-link {
    justify-self: end;
}

.effects-header-center {
    width: 100%;
    justify-self: center;
}

.mini-profile-center {
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(28px, 1fr) auto auto minmax(28px, 1fr);
    align-items: center;
    gap: 12px;
    color: var(--ink);
    cursor: pointer;
}

.mini-profile-center:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

.mini-side-line {
    display: block;
    height: 0;
    border-top: 4px solid var(--ink);
    opacity: .9;
}

.mini-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
}

.mini-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-left: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
    background: transparent;
    padding: 0 2px;
}

.mini-avatar i {
    display: block;
    width: 100%;
    height: 100%;
}

.mini-profile-text {
    min-width: 0;
    display: grid;
    gap: 3px;
    justify-items: start;
    text-align: left;
}

.mini-profile-text small {
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: none;
    color: rgba(42, 12, 11, .82);
}

.mini-profile-text b {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
    color: #d9006d;
}

@media (max-width: 920px) {
    .effects-header {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .effects-header > .logo-small,
    .effects-header > .back-link,
    .effects-header-center {
        justify-self: stretch;
    }

    .effects-header > .back-link {
        justify-self: start;
    }

    .mini-profile-center {
        grid-template-columns: minmax(20px, 1fr) auto auto minmax(20px, 1fr);
    }

    .mini-profile-text small {
        max-width: 110px;
    }
}

@media (max-width: 560px) {
    .mini-profile-center {
        grid-template-columns: 1fr auto auto 1fr;
        gap: 10px;
    }

    .mini-side-line {
        border-top-width: 3px;
    }

    .mini-profile-text small {
        max-width: 90px;
        font-size: 10px;
    }

    .mini-profile-text b {
        font-size: 9px;
    }
}

/* effects click fix v100 */

.effects-center {
    position: relative;
    z-index: 10;
}

.rank-panel {
    z-index: 3;
}

.player-selected .rank-panel-left,
.player-selected .rank-panel-right {
    pointer-events: none !important;
}

.player-grid,
.player-grid *,
.player-detail,
.player-detail *,
.effect-store,
.effect-store * {
    pointer-events: auto;
}

.player-card,
.effect-card {
    z-index: 12;
}

.effect-progress-text {
    pointer-events: none !important;
}

.mini-profile,
.mini-profile * {
    pointer-events: auto;
}

.pay-modal.show {
    z-index: 10000;
}

/* effect complete animation v110 */

.effect-complete-fx {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.20), transparent 30%),
        rgba(42, 12, 11, .18);
    animation: effectFxFadeIn .16s ease both;
}

.effect-complete-fx.hide {
    animation: effectFxFadeOut .45s ease both;
}

.effect-complete-box {
    position: relative;
    z-index: 2;
    width: min(620px, calc(100% - 34px));
    padding: clamp(20px, 4vw, 34px);
    border: 6px solid var(--ink);
    background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.38), transparent 28%),
        linear-gradient(135deg, var(--peach-light), var(--peach));
    box-shadow:
        11px 11px 0 rgba(42, 12, 11, .26),
        0 0 0 10px rgba(255, 255, 255, .14);
    text-align: center;
    animation: effectBoxPop .62s cubic-bezier(.18, 1.35, .22, 1) both;
}

.effect-complete-buff .effect-complete-box {
    box-shadow:
        11px 11px 0 rgba(255, 0, 127, .32),
        0 0 0 10px rgba(255, 255, 255, .14);
}

.effect-complete-debuff .effect-complete-box {
    box-shadow:
        11px 11px 0 rgba(0, 143, 160, .34),
        0 0 0 10px rgba(255, 255, 255, .14);
}

.effect-complete-kicker {
    width: fit-content;
    margin: 0 auto 14px;
    padding: 8px 10px;
    border: 4px solid var(--ink);
    background: rgba(255,255,255,.22);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.3;
    color: var(--pink);
}

.effect-complete-debuff .effect-complete-kicker {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

.effect-complete-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(3rem, 8vw, 7.2rem);
    line-height: .78;
    letter-spacing: -.07em;
    color: var(--ink);
}

.effect-complete-target {
    margin-top: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
}

.effect-complete-count {
    width: fit-content;
    margin: 18px auto 0;
    padding: 10px 12px;
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.45;
}

.effect-complete-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.effect-complete-particles i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid var(--ink);
    background: var(--pink);
    box-shadow: 4px 4px 0 rgba(42, 12, 11, .24);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) rotate(0deg);
    animation: effectParticleFly .95s cubic-bezier(.2, .8, .25, 1) var(--d) both;
}

.effect-complete-debuff .effect-complete-particles i {
    background: #008fa0;
}

.effect-card-burst {
    animation: effectCardBurst .9s ease both;
}

.effect-complete-shake .player-detail,
.effect-complete-shake .effect-store,
.effect-complete-shake .skin-stage-wrap {
    animation: effectScreenShake .58s linear both;
}

@keyframes effectFxFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes effectFxFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes effectBoxPop {
    0% {
        opacity: 0;
        transform: scale(.72) translateY(18px) rotate(-1.5deg);
    }
    54% {
        opacity: 1;
        transform: scale(1.06) translateY(-4px) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

@keyframes effectParticleFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2) rotate(0deg);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1) rotate(270deg);
    }
}

@keyframes effectCardBurst {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    35% {
        transform: scale(1.04);
        filter: brightness(1.18);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes effectScreenShake {
    0%, 100% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(-5px, 3px);
    }
    30% {
        transform: translate(5px, -3px);
    }
    45% {
        transform: translate(-4px, -2px);
    }
    60% {
        transform: translate(4px, 2px);
    }
    75% {
        transform: translate(-2px, 1px);
    }
}

@media (max-width: 620px) {
    .effect-complete-particles i {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

    .effect-complete-count,
    .effect-complete-kicker {
        font-size: 8px;
    }
}

/* effects header compact profile fix v141 */

.effects-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: max-content 1fr max-content !important;
    align-items: center !important;
    gap: 18px !important;
}

.effects-header > .logo-small {
    justify-self: start !important;
    width: max-content !important;
    white-space: nowrap !important;
}

.effects-header > .back-link {
    justify-self: end !important;
}

.effects-header-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(300px, 34vw) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 22 !important;
}

.mini-profile-center {
    width: 100% !important;
    min-height: 44px !important;
    grid-template-columns: minmax(18px, 1fr) auto auto minmax(18px, 1fr) !important;
    gap: 8px !important;
    pointer-events: auto !important;
}

.mini-side-line {
    border-top-width: 3px !important;
}

.mini-avatar-wrap {
    min-width: 36px !important;
    min-height: 36px !important;
}

.mini-avatar {
    width: 28px !important;
    height: 28px !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
    padding: 0 1px !important;
}

.mini-profile-text small {
    max-width: 92px !important;
    font-size: 9px !important;
}

.mini-profile-text b {
    font-size: 9px !important;
}

@media (max-width: 1050px) {
    .effects-header {
        grid-template-columns: 1fr !important;
    }

    .effects-header-center {
        position: static !important;
        width: min(260px, 100%) !important;
        transform: none !important;
        justify-self: start !important;
        margin-top: 12px !important;
    }

    .effects-header > .back-link {
        justify-self: start !important;
        margin-top: 12px !important;
    }
}

/* final effects header profile v150 */

.effects-header {
    position: relative !important;
    min-height: 82px !important;
    display: grid !important;
    grid-template-columns: max-content minmax(260px, 340px) max-content !important;
    align-items: center !important;
    gap: 24px !important;
}

.effects-header > .logo-small {
    grid-column: 1 !important;
    justify-self: start !important;
    white-space: nowrap !important;
}

.effects-header > .back-link {
    grid-column: 3 !important;
    justify-self: end !important;
}

/* убираем старый wrapper, если он остался в CSS/HTML */
.effects-header-center {
    display: contents !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    pointer-events: auto !important;
}

/* профиль в центре: заметный, но не тяжелый */
.mini-profile-center {
    grid-column: 2 !important;
    justify-self: center !important;

    width: 100% !important;
    max-width: 340px !important;
    min-height: 50px !important;

    display: grid !important;
    grid-template-columns: minmax(34px, 1fr) 42px minmax(74px, auto) minmax(34px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    cursor: pointer !important;
}

.mini-profile-center:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.mini-profile-center:hover .mini-avatar {
    transform: translateY(-1px) !important;
}

.mini-side-line {
    height: 0 !important;
    border-top: 4px solid var(--ink) !important;
    opacity: .82 !important;
    pointer-events: none !important;
}

.mini-avatar-wrap {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
}

.mini-avatar {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    border-left: 3px solid var(--ink) !important;
    border-right: 3px solid var(--ink) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    padding: 0 2px !important;
    transition: transform .12s ease !important;
}

.mini-avatar i {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.mini-profile-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    justify-items: start !important;
    text-align: left !important;
}

.mini-profile-text small {
    max-width: 118px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

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

.mini-profile-text b {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 10px !important;
    line-height: 1 !important;
    color: #d9006d !important;
}

/* старую огромную панель профиля окончательно убиваем */
.account-panel,
.account-panel-right,
.account-card,
.account-avatar,
.account-balance {
    display: none !important;
}

/* при выборе игрока рейтинги уезжают, но header остается нормальным */
.player-selected .rank-panel-left {
    transform: translateX(-115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.player-selected .rank-panel-right {
    transform: translateX(115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 1120px) {
    .effects-header {
        grid-template-columns: max-content 1fr max-content !important;
    }

    .mini-profile-center {
        max-width: 280px !important;
        grid-template-columns: minmax(20px, 1fr) 38px minmax(66px, auto) minmax(20px, 1fr) !important;
    }

    .mini-avatar-wrap {
        width: 38px !important;
        height: 38px !important;
    }

    .mini-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .mini-profile-text small {
        max-width: 90px !important;
    }
}

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

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

    .mini-profile-center {
        width: min(280px, 100%) !important;
    }
}

/* effects account badge final v160 */

.effects-header {
    display: grid !important;
    grid-template-columns: max-content minmax(220px, 320px) max-content !important;
    align-items: center !important;
    gap: 24px !important;
}

.effects-header > .logo-small {
    grid-column: 1 !important;
    justify-self: start !important;
    white-space: nowrap !important;
}

.effects-header > .back-link {
    grid-column: 3 !important;
    justify-self: end !important;
}

/* если в HTML еще есть wrapper - не мешает сетке */
.effects-header-center {
    display: contents !important;
}

/* сам профиль */
.mini-profile-center {
    grid-column: 2 !important;
    justify-self: center !important;

    width: min(100%, 300px) !important;
    min-height: 58px !important;

    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 7px 12px !important;
    border: 4px solid var(--ink) !important;
    background: rgba(255, 255, 255, .15) !important;
    color: var(--ink) !important;
    box-shadow: 6px 6px 0 rgba(255, 0, 127, .22) !important;

    cursor: pointer !important;
    overflow: hidden !important;
}

.mini-profile-center:hover {
    background: rgba(255, 255, 255, .26) !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 4px 4px 0 rgba(255, 0, 127, .28) !important;
}

/* линии больше не нужны */
.mini-profile-center .mini-side-line {
    display: none !important;
}

/* аватарка нормальная, квадратная */
.mini-avatar-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
}

.mini-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(5, 1fr) !important;

    border: 4px solid var(--ink) !important;
    background: rgba(255, 255, 255, .16) !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

.mini-avatar i {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.mini-profile-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
    justify-items: start !important;
    text-align: left !important;
}

.mini-profile-text small {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

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

.mini-profile-text b {
    width: fit-content !important;
    min-width: 58px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 3px 7px !important;
    border: 3px 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 !important;
}

/* чтобы старые стили не возвращали огромную панель */
.account-panel,
.account-panel-right,
.account-card,
.account-avatar,
.account-balance {
    display: none !important;
}

@media (max-width: 1120px) {
    .effects-header {
        grid-template-columns: max-content minmax(190px, 260px) max-content !important;
        gap: 16px !important;
    }

    .mini-profile-center {
        width: min(100%, 260px) !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
    }

    .mini-avatar-wrap {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .mini-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-width: 3px !important;
    }

    .mini-profile-text small {
        font-size: 11px !important;
    }

    .mini-profile-text b {
        font-size: 8px !important;
    }
}

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

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

    .mini-profile-center {
        width: min(280px, 100%) !important;
    }
}

/* rank total stats v170 */

.rank-total-box {
    display: grid;
    gap: 10px;
    padding: 12px 0 14px;
    margin-bottom: 10px;
    border-bottom: 5px solid var(--ink);
}

.rank-total-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 4px solid var(--ink);
    background: rgba(255, 255, 255, .15);
}

.rank-total-main span {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.35;
    color: var(--ink);
}

.rank-total-main b {
    min-width: 76px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
}

.rank-panel-left .rank-total-main b {
    box-shadow: 4px 4px 0 rgba(255, 0, 127, .30);
}

.rank-panel-right .rank-total-main b {
    box-shadow: 4px 4px 0 rgba(0, 143, 160, .34);
}

.rank-total-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rank-total-split span {
    min-height: 38px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 8px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .11);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.35;
}

.rank-total-split b {
    font-size: 9px;
    color: #d9006d;
}

.rank-panel-right .rank-total-split b {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

@media (max-width: 620px) {
    .rank-total-split {
        grid-template-columns: 1fr;
    }
}

/* selected player contribution stats v171 */

.selected-player-stats {
    width: min(360px, 100%);
    display: grid;
    gap: 10px;
    margin: 14px auto 0;
    padding: 12px;
    border: 5px solid var(--ink);
    background: rgba(255, 255, 255, .13);
    box-shadow: 6px 6px 0 rgba(42, 12, 11, .16);
}

.selected-stat-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.selected-stat-main span {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.35;
}

.selected-stat-main b {
    min-width: 78px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    background: var(--ink);
    color: var(--peach-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
    box-shadow: 4px 4px 0 rgba(255, 0, 127, .25);
}

.selected-stat-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.selected-stat-split span {
    min-height: 38px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 8px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .11);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.35;
}

.selected-stat-split b {
    font-size: 9px;
    color: #d9006d;
}

.selected-stat-split span:last-child b {
    color: #008fa0;
    text-shadow: .7px .7px 0 rgba(42, 12, 11, .24);
}

@media (max-width: 620px) {
    .selected-player-stats {
        width: 100%;
    }

    .selected-stat-split {
        grid-template-columns: 1fr;
    }
}