:root {
    --fz-ice-50: #f4fcff;
    --fz-ice-100: #e4f6ff;
    --fz-ice-200: #c3ebff;
    --fz-ice-300: #8fd9f8;
    --fz-ice-400: #4fbbe9;
    --fz-ice-500: #1f95d4;
    --fz-ice-600: #0f6ea9;
    --fz-ice-700: #0a5182;
    --fz-ink: #0f527d;
    --fz-ink-2: #2a729a;
    --fz-gold: #ffd166;
    --fz-radius: 16px;
    --fz-font: 'Kanit', sans-serif;

    --fz-col-left: 615px;
    --fz-col-right: 909px;
    --fz-col-gap: 40px;
    --fz-row-w: calc(var(--fz-col-left) + var(--fz-col-gap) + var(--fz-col-right));

    --fz-row1-top: 560px;
    --fz-row2-top: 1075px;
    --fz-row-h: 455px;
}

.fz-panel {
    position: relative;
    box-sizing: border-box;
    border-radius: var(--fz-radius);
    padding: 26px 16px 18px;

    background:
        radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(250, 253, 255, 0.95) 0%, rgba(215, 241, 253, 0.90) 55%, rgba(187, 229, 250, 0.92) 100%);

    border: 2px solid rgba(255, 255, 255, 0.95);

    box-shadow:
        0 0 0 2px rgba(79, 187, 233, 0.55),
        0 0 22px rgba(63, 178, 232, 0.45),
        0 14px 30px rgba(9, 60, 100, 0.25),
        inset 0 0 26px rgba(255, 255, 255, 0.85);

    color: var(--fz-ink);
    font-family: var(--fz-font);
}

.fz-panel::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--fz-radius) - 6px);
    border: 1px solid rgba(99, 196, 238, 0.45);
    pointer-events: none;
}

.fz-panel::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 5px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg, transparent, #7fe4ff, transparent);
    box-shadow: 0 0 12px rgba(120, 225, 255, 0.95);
    pointer-events: none;
}

.fz-head {
    position: relative;
    z-index: 3;

    width: 88%;
    margin: -40px auto 14px auto;
    padding: 7px 14px;

    text-align: center;
    font-family: var(--fz-font);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;

    color: #ffffff;
    text-shadow:
        0 1px 0 #1b6d9c,
        0 0 10px rgba(120, 225, 255, 0.9);

    background: linear-gradient(180deg, #a9f0ff 0%, #49bfec 45%, #0f6ea9 100%);

    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -5px 10px rgba(2, 70, 120, 0.35),
        0 0 14px rgba(79, 187, 233, 0.85),
        0 4px 10px rgba(6, 60, 100, 0.30);
}

.fz-head::before,
.fz-head::after {
    content: "\2744";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #eafcff;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 1);
}

.fz-head::before {
    left: 14px;
}

.fz-head::after {
    right: 14px;
}

.fz-col-left {
    left: 50%;
    width: var(--fz-col-left);
    transform: translateX(calc(var(--fz-row-w) / -2));
}

.fz-col-right {
    left: 50%;
    width: var(--fz-col-right);
    transform: translateX(calc(var(--fz-row-w) / -2 + var(--fz-col-left) + var(--fz-col-gap)));
}

@media (max-width: 1660px) {
    :root {
        --fz-col-left: 540px;
        --fz-col-right: 822px;
        --fz-col-gap: 26px;
    }
}

@media (max-width: 1400px) {
    :root {
        --fz-col-left: 470px;
        --fz-col-right: 720px;
        --fz-col-gap: 20px;
    }
}

@media (max-width: 1220px) {
    body.custom {
        min-height: 0;
        padding-bottom: 40px;
        background-size: cover;
    }

    .logo-box {
        position: relative;
        top: auto;
        left: auto;
        padding-top: 26px;
    }

    .main-logo {
        width: 300px;
        animation: none;
        transform: none;
    }

    .main-buttons {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin: 18px auto 0 auto;
    }

    .main-buttons img,
    .register-btn img,
    .download-btn img,
    .topup-btn img,
    .discord-btn img {
        width: 190px;
    }

    .slide-frame,
    .ranking-group,
    .status-section,
    .news-section {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 94%;
        margin: 22px auto 0 auto;
    }

    .ranking-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ranking-box {
        flex: 1 1 280px;
        height: auto;
    }

    .slide-frame {
        height: auto;
    }

    .slide-area {
        min-height: 260px;
    }

    .snow-effect {
        display: none;
    }
}

@media (max-width: 760px) {
    .news-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-tabs {
        flex-wrap: wrap;
    }

    .news-tab {
        flex: 1 1 140px;
    }
}

@media (max-width: 520px) {
    .news-content {
        grid-template-columns: 1fr;
    }
}