:root {
    --bg: #f3f8f8;
    --surface: #ffffff;
    --surface-alt: #e5f1f2;
    --text: #122023;
    --text-muted: #6d868a;
    --border: #d2e3e5;
    --primary: #009bb3;
    --primary-hover: #007a8c;
    --on-primary: #ffffff;
    --primary-text: #009bb3;
    --accent: #109b67;
    --on-accent: #ffffff;
    --accent-text: #109b67;
    --dark-band: #122023;
    --on-dark: #ffffff;
    --on-dark-muted: #b6d8dc;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'LXGW WenKai TC', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.text-muted {
    color: var(--text-muted) !important;
}

.vku-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

.vku-btn:hover,
.vku-btn:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--on-primary);
}

.vku-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--primary-text);
    border: 2px solid var(--primary);
    border-radius: 4px;
    padding: 10px 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

.vku-btn-alt:hover,
.vku-btn-alt:focus {
    background-color: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.vku-card {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 4px;
    padding: 24px;
    position: relative;
    transition: border-left-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vku-card:hover {
    border-left-width: 10px;
    background-color: #fbfdfd;
}

.vku-card:hover .vku-card-number {
    -webkit-text-stroke-color: var(--primary);
    color: transparent;
}

.vku-card-number {
    font-size: 54px;
    font-weight: 700;
    -webkit-text-stroke: 1.5px var(--text-muted);
    color: transparent;
    line-height: 1;
    user-select: none;
    margin-bottom: 12px;
    transition: -webkit-text-stroke-color 0.3s ease;
}

.vku-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
}

.vku-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vku-eyebrow {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-text);
    font-weight: 700;
    margin-bottom: 8px;
}

.vku-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.vku-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background-color: var(--primary);
}

.text-center .vku-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.vku-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--on-primary);
    background-color: var(--primary);
    border-radius: 4px;
    text-transform: uppercase;
}

.vku-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background-color: var(--surface-alt);
    color: var(--primary-text);
    border: 1px solid var(--border);
}

.vku-section {
    background-color: var(--bg);
    padding: 80px 0;
}

.vku-section-alt {
    background-color: var(--surface-alt);
    padding: 80px 0;
}

.vku-section-dark {
    background-color: var(--dark-band);
    color: var(--on-dark);
    padding: 80px 0;
}

.vku-section-dark a:not(.vku-btn):not(.vku-btn-alt),
.vku-on-dark a:not(.vku-btn):not(.vku-btn-alt) {
    color: var(--on-dark);
}

.vku-section-dark .vku-title,
.vku-on-dark .vku-title {
    color: var(--on-dark);
}

.vku-section-dark .vku-eyebrow,
.vku-on-dark .vku-eyebrow {
    color: var(--accent);
}

.vku-section-dark .vku-btn-alt,
.vku-on-dark .vku-btn-alt {
    border-color: var(--on-dark);
    color: var(--on-dark);
}

.vku-section-dark .vku-btn-alt:hover,
.vku-on-dark .vku-btn-alt:hover {
    background-color: var(--on-dark);
    color: var(--dark-band);
}

.vku-section-brand {
    background-color: var(--primary);
    color: var(--on-primary);
    padding: 80px 0;
}

.vku-section-brand .vku-btn {
    background-color: #ffffff;
    color: var(--primary);
    border-color: #ffffff;
}

.vku-section-brand .vku-btn:hover {
    background-color: #e5f1f2;
    color: var(--primary-hover);
}

.vku-section-brand .vku-btn-alt {
    border-color: var(--on-primary);
    color: var(--on-primary);
}

.vku-section-brand .vku-btn-alt:hover {
    background-color: var(--on-primary);
    color: var(--primary);
}

.vku-section-dark .vku-card,
.vku-on-dark .vku-card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
}

.vku-on-dark {
    color: var(--on-dark);
}

@media (max-width: 768px) {

    .vku-section,
    .vku-section-alt,
    .vku-section-dark,
    .vku-section-brand {
        padding: 48px 0;
    }

    .vku-card {
        padding: 18px;
    }
}

/* =====  ===== */
.cyber-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
    background-color: #122023;
    font-family: 'LXGW WenKai TC', sans-serif;
}

.cyber-hero__video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.cyber-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cyber-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(18, 32, 35, 0.75) 0%, rgba(18, 32, 35, 0.92) 100%);
    backdrop-filter: blur(3px);
}

.cyber-hero__flare {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.25) 0%, rgba(16, 155, 103, 0.08) 50%, transparent 70%);
    pointer-events: none;
}

.cyber-hero__particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 180, 216, 0.3) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.4;
    pointer-events: none;
}

.cyber-hero__watermark {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(60px, 14vw, 180px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.03);
    letter-spacing: 12px;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.cyber-hero .container {
    z-index: 3;
}

.cyber-hero__badge {
    border: 1px solid #009bb3;
    background: rgba(0, 155, 179, 0.15);
    border-radius: 4px;
    color: #00b4d8;
    letter-spacing: 2px;
}

.cyber-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #06d6a0;
    display: inline-block;
    box-shadow: 0 0 8px #06d6a0;
}

.cyber-hero__title {
    font-size: clamp(28px, 4.5vw, 46px);
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: 3px;
    overflow-wrap: anywhere;
}

.cyber-hero__divider {
    width: 48px;
    height: 3px;
    background-color: #009bb3;
}

.cyber-hero__desc {
    max-width: 760px;
    color: #b6d8dc;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.cyber-hero__btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #009bb3;
    color: #ffffff;
    border: 1px solid #009bb3;
    border-radius: 4px;
    padding: 12px 28px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cyber-hero__btn-cta:hover {
    background: #007a8c;
    color: #ffffff;
    border-color: #007a8c;
}

.cyber-hero__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #109b67;
    color: #ffffff;
    border: 1px solid #109b67;
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cyber-hero__share-btn:hover {
    background: #0b734c;
    color: #ffffff;
    border-color: #0b734c;
}

.cyber-hero__toast {
    display: none;
    font-size: 13px;
    color: #06d6a0;
    margin-top: 8px;
    letter-spacing: 1px;
}

.cyber-hero__toast.cyber-hero__toast--visible {
    display: block;
}

.cyber-hero__cards-row {
    position: relative;
    margin-top: 40px;
}

.cyber-hero__card {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #d2e3e5;
    border-left: 5px solid #009bb3;
    border-radius: 4px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cyber-hero__card:hover {
    border-left-width: 10px;
    background: #fbfdfd;
}

.cyber-hero__card:hover .cyber-hero__card-num {
    -webkit-text-stroke-color: #009bb3;
}

.cyber-hero__card-num {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #6d868a;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    user-select: none;
}

.cyber-hero__card-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #009bb3;
    margin-bottom: 8px;
}

.cyber-hero__card-link {
    text-decoration: none;
}

.cyber-hero__card-title {
    font-size: 20px;
    font-weight: 700;
    color: #122023;
    margin-bottom: 10px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.cyber-hero__card-title:hover {
    color: #007a8c;
}

.cyber-hero__card-text {
    font-size: 14px;
    color: #4b6468;
    line-height: 1.6;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

.cyber-hero__card-meta {
    font-size: 12px;
    color: #6d868a;
    font-weight: 700;
}

.cyber-hero__card-btn {
    font-size: 13px;
    font-weight: 700;
    color: #009bb3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cyber-hero__card-btn:hover {
    color: #007a8c;
    text-decoration: underline;
}

@media(max-width:767px) {
    .cyber-hero {
        padding: 50px 0 40px;
    }

    .cyber-hero__title {
        font-size: 22px;
        line-height: 1.3;
    }

    .cyber-hero__desc {
        font-size: 14px;
    }

    .cyber-hero__card {
        padding: 18px;
    }

    .cyber-hero__card-num {
        font-size: 42px;
    }
}

/* =====  ===== */
.gl-games-section .gl-cyber-badge {
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--primary);
    display: inline-block;
    text-transform: uppercase;
}

.gl-games-section .gl-section-title {
    color: var(--text);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.gl-games-section .gl-title-line {
    width: 48px;
    height: 3px;
    background-color: var(--primary);
    border-radius: 2px;
    margin-top: 12px;
}

.gl-games-section .gl-filter-nav {
    max-width: 100%;
}

.gl-games-section .gl-filter-btn {
    cursor: pointer;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.gl-games-section .gl-editorial-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 4px;
    box-shadow: none;
    transition: border-left-width 0.25s ease, background-color 0.25s ease;
}

.gl-games-section .gl-editorial-card:hover {
    border-left-width: 10px;
    background-color: #fbfdfd;
}

.gl-games-section .gl-card-num {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--text-muted);
    transition: -webkit-text-stroke-color 0.25s ease;
}

.gl-games-section .gl-editorial-card:hover .gl-card-num {
    -webkit-text-stroke-color: var(--primary);
}

.gl-games-section .gl-thumb-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.gl-games-section .gl-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.gl-games-section .gl-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gl-games-section .gl-editorial-card:hover .gl-thumb-img {
    transform: scale(1.04);
}

.gl-games-section .gl-card-content {
    min-width: 0;
}

.gl-games-section .gl-card-heading {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.gl-games-section .gl-title-link {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gl-games-section .gl-title-link:hover {
    color: var(--primary-hover);
}

.gl-games-section .gl-card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .gl-games-section .gl-section-title {
        font-size: 16px;
    }

    .gl-games-section .gl-card-heading {
        font-size: 14px;
    }

    .gl-games-section .gl-card-num {
        font-size: 34px;
    }

    .gl-games-section .gl-filter-btn {
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* ===== top5 ===== */
.game-loft-top-games {
    overflow: hidden;
    color: #122023;
    font-family: 'LXGW WenKai TC', sans-serif
}

.game-loft-top-games .top-games-divider {
    width: 48px;
    height: 3px;
    background-color: #009bb3;
    border-radius: 2px
}

.game-loft-top-games .vku-card {
    background-color: #ffffff;
    border: 1px solid #d2e3e5;
    border-left: 5px solid #009bb3;
    border-radius: 4px;
    padding: 24px;
    transition: border-left-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease
}

.game-loft-top-games .vku-card:hover {
    border-left-width: 10px;
    background-color: #fbfdfd
}

.game-loft-top-games .top-card-number {
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #6d868a;
    font-family: 'LXGW WenKai TC', sans-serif;
    transition: all 0.3s ease
}

.game-loft-top-games .vku-card:hover .top-card-number {
    color: #009bb3;
    -webkit-text-stroke: 0px transparent
}

.game-loft-top-games .vku-media {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d2e3e5;
    aspect-ratio: 16/9
}

.game-loft-top-games .vku-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.game-loft-top-games .top-meta-list {
    font-size: 14px;
    color: #4b6468
}

.game-loft-top-games .top-games-panel {
    background-color: #ffffff;
    border: 1px solid #d2e3e5;
    border-radius: 4px;
    padding: 24px
}

.game-loft-top-games .top-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.game-loft-top-games .top-game-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    background-color: #f3f8f8;
    border: 1px solid #d2e3e5;
    border-left: 4px solid #109b67;
    border-radius: 4px;
    transition: all 0.25s ease
}

.game-loft-top-games .top-game-row:hover {
    border-left-color: #009bb3;
    background-color: #ffffff;
    transform: translateX(3px)
}

.game-loft-top-games .top-row-index {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #6d868a;
    min-width: 32px
}

.game-loft-top-games .top-game-row:hover .top-row-index {
    color: #109b67;
    -webkit-text-stroke: 0 transparent
}

.game-loft-top-games .top-row-content {
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: anywhere
}

.game-loft-top-games .vku-btn {
    background-color: #009bb3;
    color: #ffffff;
    border: 1px solid #009bb3;
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s ease
}

.game-loft-top-games .vku-btn:hover {
    background-color: #007a8c;
    color: #ffffff;
    border-color: #007a8c
}

.game-loft-top-games .vku-btn-alt {
    background-color: #109b67;
    color: #ffffff;
    border: 1px solid #109b67;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 700;
    transition: all 0.2s ease
}

.game-loft-top-games .vku-btn-alt:hover {
    background-color: #0b734c;
    color: #ffffff;
    border-color: #0b734c
}

.game-loft-top-games .btn-group .vku-btn-alt {
    background-color: transparent;
    color: #009bb3;
    border: 1px solid #009bb3;
    padding: 6px 12px
}

.game-loft-top-games .btn-group .vku-btn-alt:hover,
.game-loft-top-games .btn-group .vku-btn-alt.active {
    background-color: #009bb3;
    color: #ffffff;
    border-color: #009bb3
}

.game-loft-top-games .vku-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    background-color: #e0f6f4;
    color: #007a8c;
    border: 1px solid #00b4d8
}

.game-loft-top-games .vku-title {
    color: #122023;
    overflow-wrap: anywhere
}

@media(max-width:767px) {

    .game-loft-top-games .vku-card,
    .game-loft-top-games .top-games-panel {
        padding: 16px
    }

    .game-loft-top-games .top-card-number {
        font-size: 40px
    }

    .game-loft-top-games .top-game-row {
        gap: 12px;
        padding: 12px 10px
    }

    .game-loft-top-games .top-row-index {
        font-size: 22px;
        min-width: 24px
    }
}

/* =====  ===== */
.vku-player-progress-section {
    font-family: 'LXGW WenKai TC', sans-serif;
    color: #122023;
    background-color: #f3f8f8;
}

.vku-player-progress-section .vku-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #009bb3;
}

.vku-player-progress-section .vku-title {
    font-size: 28px;
    font-weight: 700;
    color: #122023;
    line-height: 1.3;
}

.vku-player-progress-section .vku-accent-divider {
    width: 48px;
    height: 3px;
    background-color: #009bb3;
    border-radius: 2px;
}

.vku-player-progress-section .vku-progress-intro {
    max-width: 680px;
    font-size: 15px;
    color: #4b6468;
    line-height: 1.6;
}

.vku-player-progress-section .vku-card {
    background: #ffffff;
    border: 1px solid #d2e3e5;
    border-left: 5px solid #009bb3;
    border-radius: 4px;
    padding: 24px;
    transition: border-left-width 0.25s ease, background-color 0.25s ease;
}

.vku-player-progress-section .vku-stat-card:hover {
    border-left-width: 9px;
    background-color: #fbfdfd;
}

.vku-player-progress-section .vku-stat-num {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 1.5px #6d868a;
    color: transparent;
    margin-bottom: 12px;
    display: inline-block;
    transition: -webkit-text-stroke-color 0.25s ease;
}

.vku-player-progress-section .vku-stat-card:hover .vku-stat-num {
    -webkit-text-stroke-color: #009bb3;
}

.vku-player-progress-section .vku-stat-heading {
    font-size: 17px;
    font-weight: 700;
    color: #122023;
    margin-bottom: 8px;
    line-height: 1.3;
}

.vku-player-progress-section .vku-stat-val {
    font-size: 26px;
    font-weight: 700;
    color: #009bb3;
    line-height: 1.2;
}

.vku-player-progress-section .vku-stat-sub {
    font-size: 13px;
    color: #6d868a;
}

.vku-player-progress-section .vku-stat-desc {
    font-size: 13px;
    color: #4b6468;
    line-height: 1.5;
}

.vku-player-progress-section .vku-badge {
    background-color: #e5f1f2;
    color: #007a8c;
    border: 1px solid #d2e3e5;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
}

.vku-player-progress-section .vku-progress-track {
    width: 100%;
    height: 6px;
    background-color: #e5f1f2;
    border-radius: 3px;
    overflow: hidden;
}

.vku-player-progress-section .vku-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #009bb3, #109b67);
    transition: width 0.4s ease;
}

.vku-player-progress-section .vku-media-box {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 220px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d2e3e5;
}

.vku-player-progress-section .vku-media {
    object-fit: cover;
}

.vku-player-progress-section .vku-featured-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.vku-player-progress-section .vku-title-link {
    color: #122023;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vku-player-progress-section .vku-title-link:hover {
    color: #007a8c;
}

.vku-player-progress-section .vku-task-status {
    font-size: 13px;
    color: #109b67;
    font-weight: 700;
}

.vku-player-progress-section .vku-task-text {
    font-size: 15px;
    color: #4b6468;
    line-height: 1.6;
}

.vku-player-progress-section .vku-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #009bb3;
    color: #ffffff;
    border: 1px solid #009bb3;
    border-radius: 4px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vku-player-progress-section .vku-btn:hover {
    background-color: #007a8c;
    border-color: #007a8c;
    color: #ffffff;
}

.vku-player-progress-section .vku-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #009bb3;
    border: 1px solid #009bb3;
    border-radius: 4px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vku-player-progress-section .vku-btn-alt:hover {
    background-color: #009bb3;
    color: #ffffff;
}

@media (max-width: 767px) {
    .vku-player-progress-section .vku-title {
        font-size: 20px;
    }

    .vku-player-progress-section .vku-featured-title {
        font-size: 17px;
    }

    .vku-player-progress-section .vku-media-box {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* =====  ===== */
.game-issue-section {
    color: #122023;
    font-family: 'LXGW WenKai TC', sans-serif;
}

.game-issue-section .vku-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    color: #009bb3;
    font-weight: 700;
}

.game-issue-section .vku-title {
    font-size: 30px;
    font-weight: 700;
    color: #122023;
    line-height: 1.25;
}

.game-issue-section .cyber-accent-bar {
    width: 48px;
    height: 3px;
    background-color: #009bb3;
    border-radius: 2px;
}

.game-issue-section .issue-lead-text {
    max-width: 680px;
    color: #4b6468;
    font-size: 16px;
    line-height: 1.6;
}

.game-issue-section .issue-card {
    background-color: #ffffff;
    border: 1px solid #d2e3e5;
    border-left: 5px solid #009bb3;
    border-radius: 4px;
    padding: 28px;
    transition: border-left-width 0.3s ease, background-color 0.3s ease;
    position: relative;
}

.game-issue-section .issue-card:hover {
    border-left-width: 10px;
    background-color: #fbfdfd;
}

.game-issue-section .card-outline-num {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 1.5px #6d868a;
    color: transparent;
    display: block;
    transition: -webkit-text-stroke-color 0.3s ease;
}

.game-issue-section .issue-card:hover .card-outline-num {
    -webkit-text-stroke-color: #009bb3;
}

.game-issue-section .issue-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #122023;
    line-height: 1.3;
}

.game-issue-section .issue-card-desc {
    color: #4b6468;
    font-size: 14px;
    line-height: 1.6;
}

.game-issue-section .issue-checklist li {
    font-size: 14px;
    color: #122023;
    line-height: 1.5;
}

.game-issue-section .cyber-input {
    background-color: #f3f8f8;
    border: 1px solid #d2e3e5;
    border-radius: 4px;
    color: #122023;
    padding: 10px 14px;
    font-size: 14px;
}

.game-issue-section .cyber-input:focus {
    background-color: #ffffff;
    border-color: #009bb3;
    box-shadow: none;
    outline: none;
}

.game-issue-section .cyber-input::placeholder {
    color: #6d868a;
    opacity: 1;
}

.game-issue-section .form-label {
    color: #122023;
    font-size: 14px;
    margin-bottom: 6px;
}

.game-issue-section .cyber-checkbox {
    border-color: #d2e3e5;
    border-radius: 3px;
}

.game-issue-section .cyber-checkbox:checked {
    background-color: #009bb3;
    border-color: #009bb3;
}

.game-issue-section .cyber-check-label {
    font-size: 14px;
    color: #4b6468;
}

.game-issue-section .issue-submit-btn {
    background-color: #009bb3;
    color: #ffffff;
    border: 1px solid #009bb3;
    border-radius: 4px;
    padding: 12px 26px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.game-issue-section .issue-submit-btn:hover {
    background-color: #007a8c;
    border-color: #007a8c;
    color: #ffffff;
}

.game-issue-section .issue-sla-tag {
    font-size: 13px;
    color: #4b6468;
    font-weight: 500;
}

@media (max-width: 767px) {
    .game-issue-section .vku-title {
        font-size: 16px;
        hyphens: auto;
    }

    .game-issue-section .issue-card-title {
        font-size: 14px;
    }

    .game-issue-section .issue-card {
        padding: 18px;
    }

    .game-issue-section .card-outline-num {
        font-size: 38px;
    }
}

/* =====  ===== */
.newsletter-block {
    position: relative;
    background-color: var(--bg, #f3f8f8);
    overflow: hidden;
}

.newsletter-block__eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #009bb3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.newsletter-block__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text, #122023);
    margin-bottom: 12px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .newsletter-block__title {
        font-size: 16px;
    }
}

.newsletter-block__accent-line {
    width: 48px;
    height: 3px;
    background-color: var(--primary, #009bb3);
    border-radius: 2px;
}

.newsletter-block__subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted, #4b6468);
    max-width: 640px;
    margin: 0 auto;
}

.newsletter-block__feature-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d2e3e5);
    border-left: 5px solid var(--primary, #009bb3);
    border-radius: 4px;
    padding: 24px;
    transition: border-left-width 0.3s ease, background-color 0.3s ease;
}

.newsletter-block__feature-card:hover {
    border-left-width: 10px;
    background-color: #fbfdfd;
}

.newsletter-block__card-num {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 1.5px var(--text-muted, #6d868a);
    color: transparent;
    margin-bottom: 12px;
    transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}

.newsletter-block__feature-card:hover .newsletter-block__card-num {
    -webkit-text-stroke-color: var(--primary, #009bb3);
    color: var(--primary, #009bb3);
}

.newsletter-block__card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #122023);
    margin-bottom: 8px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .newsletter-block__card-title {
        font-size: 14px;
    }
}

.newsletter-block__card-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted, #4b6468);
    margin-bottom: 0;
}

.newsletter-block__form-box {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d2e3e5);
    border-left: 5px solid var(--secondary, #109b67);
    border-radius: 4px;
    padding: 32px;
    box-shadow: none;
}

.newsletter-block__input-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .newsletter-block__input-group {
        flex-direction: column;
    }
}

.newsletter-block__field-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.newsletter-block__field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary, #009bb3);
    font-size: 16px;
    pointer-events: none;
}

.newsletter-block__input {
    width: 100%;
    height: 50px;
    padding: 10px 16px 10px 44px;
    background: var(--bg, #f3f8f8);
    border: 1px solid var(--border, #d2e3e5);
    border-radius: 4px;
    color: var(--text, #122023);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.newsletter-block__input:focus {
    border-color: var(--primary, #009bb3);
    background: #ffffff;
}

.newsletter-block__input::placeholder {
    color: var(--text-muted, #6d868a);
    opacity: 1;
}

.newsletter-block__submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 28px;
    background-color: var(--primary, #009bb3);
    color: #ffffff;
    border: 1px solid var(--primary, #009bb3);
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.newsletter-block__submit-btn:hover {
    background-color: var(--primary-hover, #007a8c);
    border-color: var(--primary-hover, #007a8c);
    color: #ffffff;
}

.newsletter-block__consent-wrap {
    margin-top: 10px;
}

.newsletter-block__checkbox {
    width: 18px;
    height: 18px;
    margin-top: 0;
    margin-right: 10px;
    border: 1px solid var(--border, #d2e3e5);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

.newsletter-block__checkbox:checked {
    background-color: var(--primary, #009bb3);
    border-color: var(--primary, #009bb3);
}

.newsletter-block__consent-label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, #4b6468);
    cursor: pointer;
    margin-bottom: 0;
}

.newsletter-block__policy-link {
    color: var(--primary, #009bb3);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.newsletter-block__policy-link:hover {
    color: var(--primary-hover, #007a8c);
}

.newsletter-block__status-msg {
    display: none;
    margin-top: 12px;
    font-size: 13px;
    color: #dc3545;
}

/* =====  ===== */
.site-footer {
    background-color: var(--dark-band, #122023);
    color: var(--on-dark, #ffffff);
    font-family: 'LXGW WenKai TC', sans-serif;
    position: relative;
    overflow: hidden;
}

.site-footer__curved-divider {
    width: 100%;
    height: 26px;
    overflow: hidden;
    line-height: 0;
    transform: translateY(-1px);
}

.site-footer__svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--bg, #f3f8f8);
}

.site-footer__disclaimer-box {
    background-color: rgba(0, 155, 179, 0.08);
    border: 1px solid var(--border-accent, #009bb3);
    border-left: 5px solid var(--border-accent, #009bb3);
    border-radius: 4px;
    padding: 18px 22px;
    margin-top: 24px;
    margin-bottom: 28px;
}

.site-footer__disclaimer-icon {
    color: var(--accent-cyan, #00b4d8);
    font-size: 1.15rem;
    margin-right: 10px;
}

.site-footer__disclaimer-title {
    font-weight: 700;
    color: var(--on-dark, #ffffff);
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.site-footer__disclaimer-text {
    color: var(--on-dark-muted, #b6d8dc);
    font-size: 0.92rem;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.site-footer__brand-code {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--accent-green, #06d6a0);
    margin-bottom: 4px;
}

.site-footer__brand-text {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--on-dark, #ffffff);
    letter-spacing: 1px;
}

.site-footer__brand-desc {
    color: var(--on-dark-muted, #b6d8dc);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 320px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.site-footer__heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--on-dark, #ffffff);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.site-footer__line {
    width: 36px;
    height: 2px;
    background-color: var(--primary, #009bb3);
    margin-bottom: 14px;
}

.site-footer__links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer__link {
    color: var(--on-dark-muted, #b6d8dc);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.site-footer__link:hover,
.site-footer__link:focus {
    color: var(--accent-cyan, #00b4d8);
    transform: translateX(3px);
    text-decoration: none;
}

.site-footer__inner {
    border-color: rgba(210, 227, 229, 0.15) !important;
}

.site-footer__copyright {
    color: var(--on-dark-muted, #b6d8dc);
    font-size: 0.85rem;
}

.site-footer__policy-link {
    color: var(--on-dark-muted, #b6d8dc);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.site-footer__policy-link:hover,
.site-footer__policy-link:focus {
    color: var(--accent-cyan, #00b4d8);
    text-decoration: underline;
}

.site-footer__dot {
    color: rgba(182, 216, 220, 0.4);
    font-size: 0.75rem;
}

@media (max-width: 767px) {
    .site-footer__brand-desc {
        max-width: 100%;
    }

    .site-footer__disclaimer-box {
        padding: 14px 16px;
        margin-top: 16px;
        margin-bottom: 20px;
    }

    .site-footer__heading {
        font-size: 0.95rem;
    }

    .site-footer__brand-text {
        font-size: 1.35rem;
    }
}

/* ===== PAGE: about ===== */
.about-block{background-color:var(--bg);color:var(--text);overflow:hidden;position:relative}.about-accent-line{width:48px;height:3px;background-color:var(--primary);border-radius:2px}.about-lead-text{max-width:760px;font-size:16px;line-height:1.7;color:var(--text-muted)}.about-stat-card{background-color:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:4px;padding:28px;transition:all .3s cubic-bezier(0.2,0.8,0.2,1);display:flex;flex-direction:column}.about-stat-card:hover{border-left-width:10px;background-color:#fbfdfd}.about-stat-card:hover .about-card-number{-webkit-text-stroke-color:var(--primary);color:transparent}.about-card-number{font-size:54px;font-weight:700;line-height:1;-webkit-text-stroke:1.5px var(--text-muted);color:transparent;user-select:none;font-family:'LXGW WenKai TC',sans-serif;transition:all .3s ease}.about-card-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3}.about-card-desc{font-size:14px;line-height:1.6;color:var(--text-muted);margin-bottom:0}.about-divider-wrapper{position:relative;width:100%;overflow:hidden;line-height:0}.about-divider-svg{width:100%;height:32px;display:block}.about-interactive-panel{background-color:var(--surface-alt);border:1px solid var(--border);border-radius:4px}.about-tab-btn{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:1px solid var(--border);border-left:5px solid transparent;border-radius:4px;padding:16px 20px;color:var(--text);font-family:inherit;font-weight:700;cursor:pointer;transition:all .25s ease}.about-tab-btn:hover{border-left-color:var(--primary);background:#fbfdfd;color:var(--primary-text)}.about-tab-btn.active{border-left-color:var(--primary);background:var(--surface);color:var(--primary-text);border-color:var(--border) var(--border) var(--border) var(--primary)}.about-tab-index{font-size:18px;color:var(--text-muted);letter-spacing:1px}.about-tab-btn.active .about-tab-index{color:var(--primary-text)}.about-tab-label{font-size:16px}.about-tab-pane{display:none;min-height:180px;animation:aboutFadeIn .3s ease forwards}.about-tab-pane.active{display:block}@keyframes aboutFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.about-pane-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.3}.about-pane-text{font-size:15px;line-height:1.8;color:var(--text-muted);margin-bottom:0}.about-timeline-container{position:relative;max-width:860px;margin:0 auto;padding-left:36px;border-left:2px solid var(--border)}.about-timeline-item{position:relative;margin-bottom:36px}.about-timeline-item:last-child{margin-bottom:0}.about-timeline-marker{position:absolute;left:-55px;top:0;width:36px;height:36px;border-radius:4px;background-color:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.about-timeline-card{background-color:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:4px;padding:22px 24px}.about-timeline-date{display:inline-block;font-size:12px;font-weight:700;color:var(--secondary);letter-spacing:1px;margin-bottom:6px}@media (max-width:767px){.about-lead-text{font-size:14px}.about-stat-card{padding:20px}.about-card-number{font-size:42px}.about-card-title{font-size:18px}.about-pane-title{font-size:18px}.about-pane-text{font-size:14px}.about-timeline-container{padding-left:24px}.about-timeline-marker{left:-38px;width:28px;height:28px;font-size:12px}.about-timeline-card{padding:16px}}

/* ===== PAGE: game-hall ===== */
.game-hall-block { background-color: var(--background-main, #f3f8f8); padding: 80px 0; font-family: 'LXGW WenKai TC', sans-serif; } .game-hall-block .game-hall-intro-banner { background-color: var(--background-alt, #e5f1f2); border: 1px solid var(--border-color, #d2e3e5); border-left: 6px solid var(--primary, #009bb3); border-radius: 4px; } .game-hall-block .game-hall-banner-title { font-size: 28px; font-weight: 700; color: var(--text-primary-light_bg, #122023); line-height: 1.3; } .game-hall-block .game-hall-banner-text { font-size: 15px; color: var(--text-secondary-light_bg, #4b6468); line-height: 1.7; max-width: 720px; } .game-hall-block .game-hall-banner-sub { font-size: 13px; color: var(--text-muted-light_bg, #6d868a); font-weight: 400; } .game-hall-block .game-hall-section-heading { font-size: 24px; font-weight: 700; color: var(--text-primary-light_bg, #122023); } .game-hall-block .game-hall-heading-line { width: 48px; height: 3px; background-color: var(--primary, #009bb3); } .game-hall-block .game-hall-count-note { font-size: 14px; } .game-hall-block .game-hall-card { background-color: var(--background-surface, #ffffff); border: 1px solid var(--border-color, #d2e3e5); border-left: 5px solid var(--primary, #009bb3); border-radius: 4px; box-shadow: none; transition: border-left-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease; } .game-hall-block .game-hall-card:hover { border-left-width: 10px; background-color: #fbfdfd; } .game-hall-block .game-hall-card-media-link { display: block; overflow: hidden; border-top-right-radius: 4px; border-bottom: 1px solid var(--border-color, #d2e3e5); } .game-hall-block .game-hall-card-media { aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background-color: var(--background-alt, #e5f1f2); } .game-hall-block .game-hall-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; } .game-hall-block .game-hall-card:hover .game-hall-card-media img { transform: scale(1.04); } .game-hall-block .game-hall-card-body { padding: 24px; } .game-hall-block .game-hall-num { font-size: 38px; font-weight: 700; line-height: 1; -webkit-text-stroke: 1.5px var(--text-muted-light_bg, #6d868a); color: transparent; transition: -webkit-text-stroke-color 0.3s ease; } .game-hall-block .game-hall-card:hover .game-hall-num { -webkit-text-stroke-color: var(--primary, #009bb3); } .game-hall-block .game-hall-card-title { font-size: 18px; font-weight: 700; line-height: 1.4; } .game-hall-block .game-hall-title-link { color: var(--text-primary-light_bg, #122023); text-decoration: none; transition: color 0.2s ease; } .game-hall-block .game-hall-title-link:hover { color: var(--primary-hover, #007a8c); } .game-hall-block .game-hall-card-desc { font-size: 14px; color: var(--text-secondary-light_bg, #4b6468); line-height: 1.6; } .game-hall-block .game-hall-card-meta { border-top: 1px dashed var(--border-color, #d2e3e5); margin-top: auto; } .game-hall-block .vku-badge { background-color: var(--background-alt, #e5f1f2); color: var(--primary, #009bb3); border: 1px solid var(--border-color, #d2e3e5); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 4px; } .game-hall-block .vku-eyebrow { font-size: 12px; letter-spacing: 2px; color: var(--primary, #009bb3); font-weight: 700; } .game-hall-block .vku-btn { background-color: var(--primary, #009bb3); color: #ffffff; border: 1px solid var(--primary, #009bb3); border-radius: 4px; padding: 10px 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; display: inline-block; transition: background-color 0.2s ease, border-color 0.2s ease; } .game-hall-block .vku-btn:hover { background-color: var(--primary-hover, #007a8c); border-color: var(--primary-hover, #007a8c); color: #ffffff; } @media (max-width: 767px) { .game-hall-block { padding: 48px 0; } .game-hall-block .game-hall-banner-title { font-size: 20px; } .game-hall-block .game-hall-card-body { padding: 18px; } .game-hall-block .game-hall-num { font-size: 32px; } }

/* ===== PAGE: player-complaint ===== */
.vku-complaint-block{background-color:var(--background-main,#f3f8f8);padding-top:80px;padding-bottom:80px;position:relative;overflow:hidden}.vku-complaint-block .vku-eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--primary,#009bb3);text-transform:uppercase}.vku-complaint-block .vku-title{font-size:30px;font-weight:700;color:var(--text-primary-light-bg,#122023);line-height:1.3}.vku-complaint-block .vku-title-divider{width:48px;height:3px;background-color:var(--primary,#009bb3)}.vku-complaint-block .vku-complaint-lead{max-width:720px;color:var(--text-secondary-light-bg,#4b6468);font-size:16px;line-height:1.6}.vku-complaint-block .vku-card{background-color:var(--background-surface,#ffffff);border:1px solid var(--border-color,#d2e3e5);border-left:5px solid var(--primary,#009bb3);border-radius:4px;box-shadow:none;transition:border-left-width 0.3s cubic-bezier(0.2,0.8,0.2,1),background-color 0.3s ease}.vku-complaint-block .vku-step-card{padding:28px}.vku-complaint-block .vku-step-card:hover{border-left-width:10px;background-color:#fbfdfd}.vku-complaint-block .vku-step-num{font-size:54px;font-weight:700;line-height:1;-webkit-text-stroke:1.5px var(--text-muted-light-bg,#6d868a);color:transparent;transition:-webkit-text-stroke-color 0.3s ease,color 0.3s ease}.vku-complaint-block .vku-step-card:hover .vku-step-num{-webkit-text-stroke-color:var(--primary,#009bb3);color:transparent}.vku-complaint-block .vku-step-title{font-size:20px;font-weight:700;color:var(--text-primary-light-bg,#122023)}.vku-complaint-block .vku-step-desc{font-size:14px;line-height:1.6;color:var(--text-secondary-light-bg,#4b6468)}.vku-complaint-block .vku-form-container{padding:36px;border-left:5px solid var(--primary,#009bb3)}.vku-complaint-block .vku-badge{display:inline-block;padding:4px 10px;background-color:var(--background-alt,#e5f1f2);color:var(--primary,#009bb3);font-size:12px;font-weight:700;border-radius:4px;letter-spacing:1px}.vku-complaint-block .vku-form-heading{font-size:24px;font-weight:700;color:var(--text-primary-light-bg,#122023)}.vku-complaint-block .vku-form-subtext{font-size:14px;color:var(--text-muted-light-bg,#6d868a)}.vku-complaint-block .vku-label{font-size:14px;font-weight:700;color:var(--text-primary-light-bg,#122023);margin-bottom:6px}.vku-complaint-block .vku-input,.vku-complaint-block .vku-select,.vku-complaint-block .vku-textarea{background-color:#ffffff;color:var(--text-primary-light-bg,#122023);border:1px solid var(--border-color,#d2e3e5);border-radius:4px;padding:12px 14px;font-size:15px;box-shadow:none;transition:border-color 0.2s ease}.vku-complaint-block .vku-input:focus,.vku-complaint-block .vku-select:focus,.vku-complaint-block .vku-textarea:focus{background-color:#ffffff;color:var(--text-primary-light-bg,#122023);border-color:var(--primary,#009bb3);box-shadow:0 0 0 1px var(--primary,#009bb3);outline:none}.vku-complaint-block .vku-input::placeholder,.vku-complaint-block .vku-textarea::placeholder{color:var(--text-muted-light-bg,#6d868a);opacity:1}.vku-complaint-block .vku-consent-check{display:flex;align-items:center;gap:10px;padding-left:0}.vku-complaint-block .vku-checkbox{width:18px;height:18px;margin-top:0;cursor:pointer;border:1px solid var(--border-color,#d2e3e5);border-radius:3px;flex-shrink:0}.vku-complaint-block .vku-checkbox:checked{background-color:var(--primary,#009bb3);border-color:var(--primary,#009bb3)}.vku-complaint-block .vku-consent-label{font-size:14px;color:var(--text-secondary-light-bg,#4b6468);margin-bottom:0;cursor:pointer;line-height:1.5;overflow-wrap:anywhere}.vku-complaint-block .vku-policy-link{color:var(--primary,#009bb3);text-decoration:underline;font-weight:700}.vku-complaint-block .vku-policy-link:hover{color:var(--primary-hover,#007a8c)}.vku-complaint-block .vku-submit-btn{background-color:var(--primary,#009bb3);color:#ffffff;border:1px solid var(--primary,#009bb3);border-radius:4px;padding:12px 28px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease;display:inline-flex;align-items:center}.vku-complaint-block .vku-submit-btn:hover,.vku-complaint-block .vku-submit-btn:focus{background-color:var(--primary-hover,#007a8c);border-color:var(--primary-hover,#007a8c);color:#ffffff}@media (max-width:767px){.vku-complaint-block{padding-top:48px;padding-bottom:48px}.vku-complaint-block .vku-title{font-size:16px;hyphens:auto}.vku-complaint-block .vku-step-title{font-size:14px;hyphens:auto}.vku-complaint-block .vku-form-heading{font-size:16px;hyphens:auto}.vku-complaint-block .vku-step-card,.vku-complaint-block .vku-form-container{padding:20px}.vku-complaint-block .vku-submit-btn{width:100%;justify-content:center}}

/* ===== PAGE: tournament-history ===== */
.gl-tournaments-archive{font-family:'LXGW WenKai TC',sans-serif;background-color:var(--bg,#f3f8f8);color:var(--text,#122023)}.gl-tournaments-archive .vku-eyebrow{font-size:12px;letter-spacing:2px;color:var(--primary,#009bb3);font-weight:700}.gl-tournaments-archive .vku-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:3px;background-color:var(--primary,#009bb3);border-radius:2px}.gl-tournaments-archive .gl-filter-panel{background-color:var(--surface,#ffffff);border:1px solid var(--border,#d2e3e5)}.gl-tournaments-archive .gl-filter-panel .form-control:focus,.gl-tournaments-archive .gl-filter-panel .form-select:focus{border-color:var(--primary,#009bb3);box-shadow:0 0 0 2px rgba(0,155,179,.2)}.gl-tournaments-archive .gl-stat-box{background-color:var(--surface,#ffffff);border:1px solid var(--border,#d2e3e5);border-left:4px solid var(--secondary,#109b67)}.gl-tournaments-archive .gl-tourney-card{background-color:var(--surface,#ffffff);border:1px solid var(--border,#d2e3e5);border-left:5px solid var(--primary,#009bb3);border-radius:4px;transition:border-left-width .3s ease,background-color .3s ease}.gl-tournaments-archive .gl-tourney-card:hover{border-left-width:10px;background-color:#fbfdfd}.gl-tournaments-archive .gl-outlined-num{font-size:54px;font-weight:700;line-height:1;-webkit-text-stroke:1.5px #6d868a;color:transparent;transition:color .3s ease,-webkit-text-stroke-color .3s ease}.gl-tournaments-archive .gl-tourney-card:hover .gl-outlined-num{-webkit-text-stroke-color:var(--primary,#009bb3)}.gl-tournaments-archive .gl-podium-preview{background-color:var(--surface-alt,#e5f1f2);border:1px solid var(--border,#d2e3e5)}@media (max-width:767px){.gl-tournaments-archive .gl-outlined-num{font-size:40px}.gl-tournaments-archive .gl-tourney-card{padding:1.25rem!important}}

/* ===== PAGE: online-players ===== */
.gl-online-section {
  padding-top: 60px;
  padding-bottom: 80px;
}
.gl-section-title {
  font-size: 30px;
  font-weight: 700;
  color: #122023;
  line-height: 1.3;
  margin-bottom: 8px;
}
.gl-title-divider {
  width: 48px;
  height: 3px;
  background-color: #009bb3;
  border-radius: 2px;
}
.gl-lead-text {
  font-size: 15px;
  color: #4b6468;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}
.gl-control-panel {
  background-color: #ffffff;
  border: 1px solid #d2e3e5;
  border-radius: 4px;
  padding: 16px 20px;
}
.gl-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.gl-search-icon {
  position: absolute;
  left: 14px;
  color: #6d868a;
  font-size: 14px;
  pointer-events: none;
}
.gl-search-input {
  width: 100%;
  padding: 9px 12px 9px 38px;
  font-size: 14px;
  color: #122023;
  background-color: #f3f8f8;
  border: 1px solid #d2e3e5;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
}
.gl-search-input:focus {
  border-color: #009bb3;
  background-color: #ffffff;
}
.gl-search-input::placeholder {
  color: #6d868a;
  opacity: 1;
}
.gl-filter-btn {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gl-filter-btn.active {
  background-color: #009bb3 !important;
  color: #ffffff !important;
  border-color: #009bb3 !important;
}
.gl-status-counter {
  background-color: #e5f1f2;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid #d2e3e5;
}
.gl-counter-text {
  font-size: 13px;
  color: #122023;
}
.gl-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #06d6a0;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(6, 214, 160, 0.4);
  animation: glPulse 1.8s infinite;
}
@keyframes glPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(6, 214, 160, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 214, 160, 0); }
}
.gl-player-card {
  background-color: #ffffff;
  border: 1px solid #d2e3e5;
  border-left: 5px solid #009bb3;
  border-radius: 4px;
  padding: 24px;
  transition: transform 0.25s ease, border-left-width 0.25s ease;
}
.gl-player-card:hover {
  border-left-width: 8px;
  background-color: #fbfdfd;
}
.gl-card-num {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #6d868a;
  font-family: inherit;
  transition: -webkit-text-stroke-color 0.25s ease;
}
.gl-player-card:hover .gl-card-num {
  -webkit-text-stroke-color: #009bb3;
}
.gl-badge-live {
  background-color: #e0f6f4;
  color: #007a8c;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(0, 155, 179, 0.2);
}
.gl-dot {
  color: #06d6a0;
  font-size: 8px;
  vertical-align: middle;
}
.gl-badge-coop {
  background-color: #e8f7f0;
  color: #0b734c;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(16, 155, 103, 0.2);
}
.gl-badge-idle {
  background-color: #f0f4f5;
  color: #4b6468;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid #d2e3e5;
}
.gl-player-avatar {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #d2e3e5;
  background-color: #e5f1f2;
}
.gl-player-name {
  font-size: 18px;
  font-weight: 700;
  color: #122023;
  margin-bottom: 4px;
  line-height: 1.3;
}
.gl-meta-item {
  font-size: 12px;
  color: #6d868a;
}
.gl-meta-item i {
  color: #009bb3;
}
.gl-player-desc {
  font-size: 14px;
  color: #4b6468;
  line-height: 1.6;
  margin-bottom: 16px;
}
.gl-room-id {
  font-size: 12px;
  color: #6d868a;
  max-width: 150px;
}
.gl-action-link {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.gl-action-link:hover {
  color: #ffffff;
}
.gl-empty-box {
  background-color: #ffffff;
  border: 1px dashed #d2e3e5;
  border-radius: 4px;
}
.gl-empty-icon {
  font-size: 42px;
  color: #6d868a;
}
.gl-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #122023;
  margin-bottom: 6px;
}
.gl-empty-desc {
  font-size: 14px;
  color: #6d868a;
  margin-bottom: 0;
}
.gl-fairplay-box {
  background-color: #e0f6f4;
  border: 1px solid #d2e3e5;
  border-left: 5px solid #109b67;
  border-radius: 4px;
}
.gl-notice-badge {
  font-size: 11px;
  font-weight: 700;
  color: #109b67;
  letter-spacing: 1px;
}
.gl-fairplay-title {
  font-size: 18px;
  font-weight: 700;
  color: #122023;
}
.gl-fairplay-text {
  font-size: 14px;
  color: #4b6468;
  line-height: 1.6;
}
.gl-report-btn {
  font-size: 13px;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}
.gl-report-btn:hover {
  color: #ffffff;
}
@media (max-width: 767px) {
  .gl-online-section {
    padding-top: 40px;
    padding-bottom: 50px;
  }
  .gl-section-title {
    font-size: 16px;
    hyphens: auto;
  }
  .gl-player-name {
    font-size: 14px;
    hyphens: auto;
  }
  .gl-fairplay-title {
    font-size: 14px;
    hyphens: auto;
  }
  .gl-card-num {
    font-size: 28px;
  }
  .gl-player-card {
    padding: 18px;
  }
  .gl-status-counter {
    width: 100%;
    justify-content: center;
  }
}

/* ===== PAGE: contact ===== */
.contact-block { background-color: var(--bg); color: var(--text); position: relative; }
.contact-block .contact-title-bar { width: 48px; height: 3px; background-color: var(--primary); margin-top: 12px; }
.contact-block .contact-subtitle { max-width: 640px; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.contact-block .contact-info-card { background-color: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 4px; padding: 24px; transition: border-left-width 0.3s ease, background-color 0.3s ease; display: flex; flex-direction: column; justify-content: flex-start; }
.contact-block .contact-info-card:hover { border-left-width: 10px; background-color: #fbfdfd; }
.contact-block .contact-num { font-size: 54px; font-weight: 700; -webkit-text-stroke: 1.5px var(--text-muted); color: transparent; line-height: 1; margin-bottom: 12px; transition: -webkit-text-stroke-color 0.3s ease; }
.contact-block .contact-info-card:hover .contact-num { -webkit-text-stroke-color: var(--primary); }
.contact-block .contact-step-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.contact-block .contact-step-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 0; }
.contact-block .contact-form-card { background-color: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 4px; padding: 28px; }
.contact-block .contact-form-heading { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.3; }
.contact-block .contact-form-lead { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.contact-block .contact-label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: block; }
.contact-block .contact-required { color: #d93838; font-weight: 700; }
.contact-block .contact-input, .contact-block .contact-select, .contact-block .contact-textarea { background-color: #ffffff; border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 15px; padding: 10px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.contact-block .contact-input:focus, .contact-block .contact-select:focus, .contact-block .contact-textarea:focus { background-color: #ffffff; border-color: var(--primary); color: var(--text); outline: none; box-shadow: 0 0 0 3px rgba(0, 155, 179, 0.15); }
.contact-block .contact-input::placeholder, .contact-block .contact-textarea::placeholder { color: var(--text-muted); opacity: 0.85; }
.contact-block .contact-consent-group { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.contact-block .contact-checkbox { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.contact-block .contact-checkbox:checked { background-color: var(--primary); border-color: var(--primary); }
.contact-block .contact-consent-label { font-size: 14px; color: var(--text); line-height: 1.5; cursor: pointer; margin-bottom: 0; }
.contact-block .contact-privacy-link { color: var(--primary); text-decoration: underline; font-weight: 700; }
.contact-block .contact-privacy-link:hover { color: var(--primary-hover); }
.contact-block .contact-error-msg { font-size: 13px; color: #d93838; margin-top: 6px; font-weight: 700; }
.contact-block .contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 240px; padding: 12px 24px; font-size: 15px; font-weight: 700; border-radius: 4px; cursor: pointer; border: 1px solid var(--primary); background-color: var(--primary); color: #ffffff; transition: background-color 0.2s ease, border-color 0.2s ease; }
.contact-block .contact-submit-btn:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); color: #ffffff; }
@media (max-width: 767px) { .contact-block .contact-title-bar { margin-top: 8px; } .contact-block .contact-form-card { padding: 20px 16px; } .contact-block .contact-info-card { padding: 20px 16px; } .contact-block .contact-num { font-size: 40px; } .contact-block .contact-submit-btn { max-width: 100%; width: 100%; } .contact-block h2.vku-title { font-size: 16px; hyphens: auto; } .contact-block h3 { font-size: 14px; hyphens: auto; } }

/* ===== PAGE: privacy ===== */
.privacy-policy-wrapper { padding-top: 80px; padding-bottom: 80px; background-color: var(--background-main, #f3f8f8); overflow-wrap: anywhere; }
.privacy-policy-wrapper .privacy-main-heading { font-size: 30px; font-weight: 700; color: var(--text-primary-light_bg, #122023); margin-top: 10px; margin-bottom: 12px; line-height: 1.3; }
.privacy-policy-wrapper .privacy-title-bar { width: 48px; height: 3px; background-color: var(--primary, #009bb3); border-radius: 2px; }
.privacy-policy-wrapper .privacy-lead-text { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--text-secondary-light-bg, #4b6468); }
.privacy-policy-wrapper .privacy-card { background: var(--background-surface, #ffffff); border: 1px solid var(--border-color, #d2e3e5); border-left: 5px solid var(--primary, #009bb3); border-radius: 4px; padding: 28px; box-shadow: none; display: flex; flex-direction: column; transition: border-left-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease; }
.privacy-policy-wrapper .privacy-card:hover { border-left-width: 10px; background-color: #fbfdfd; }
.privacy-policy-wrapper .privacy-card:hover .privacy-number { -webkit-text-stroke-color: var(--primary, #009bb3); color: transparent; }
.privacy-policy-wrapper .privacy-number { font-size: 54px; font-weight: 700; line-height: 1; -webkit-text-stroke: 1.5px var(--text-muted-light-bg, #6d868a); color: transparent; margin-bottom: 16px; transition: -webkit-text-stroke-color 0.3s ease; user-select: none; }
.privacy-policy-wrapper .privacy-card-title { font-size: 20px; font-weight: 700; color: var(--text-primary-light-bg, #122023); margin-bottom: 8px; line-height: 1.3; }
.privacy-policy-wrapper .privacy-card-bar { width: 36px; height: 2px; background-color: var(--secondary, #109b67); margin-bottom: 14px; }
.privacy-policy-wrapper .privacy-card-text { font-size: 15px; line-height: 1.7; color: var(--text-secondary-light-bg, #4b6468); margin-bottom: 0; flex-grow: 1; }
.privacy-policy-wrapper .privacy-callout-card { background: var(--background-surface, #ffffff); border: 1px solid var(--border-color, #d2e3e5); border-left: 5px solid var(--secondary, #109b67); border-radius: 4px; padding: 24px 28px; box-shadow: none; }
.privacy-policy-wrapper .privacy-callout-heading { font-size: 20px; font-weight: 700; color: var(--text-primary-light-bg, #122023); line-height: 1.3; }
.privacy-policy-wrapper .privacy-callout-text { font-size: 15px; line-height: 1.7; color: var(--text-secondary-light-bg, #4b6468); }
.privacy-policy-wrapper .privacy-meta-badge { display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--primary, #009bb3); background: var(--background-alt, #e5f1f2); border: 1px solid var(--border-color, #d2e3e5); border-radius: 4px; }
@media (max-width: 767px) { .privacy-policy-wrapper { padding-top: 48px; padding-bottom: 48px; } .privacy-policy-wrapper .privacy-main-heading { font-size: 16px; } .privacy-policy-wrapper .privacy-card-title { font-size: 14px; } .privacy-policy-wrapper .privacy-callout-heading { font-size: 14px; } .privacy-policy-wrapper .privacy-card { padding: 18px; } .privacy-policy-wrapper .privacy-callout-card { padding: 18px; } .privacy-policy-wrapper .privacy-number { font-size: 40px; margin-bottom: 12px; } }

/* ===== PAGE: terms ===== */
.terms-section{background-color:var(--bg,#f3f8f8);position:relative;overflow:hidden}.terms-accent-line{width:48px;height:3px;background-color:var(--primary,#009bb3);border-radius:2px}.terms-subtitle{max-width:680px;font-size:15px;line-height:1.7}.terms-nav-card{border:1px solid #d2e3e5;border-left:5px solid var(--primary,#009bb3);border-radius:4px;background:#ffffff;padding:24px}.terms-toc-link{display:flex;align-items:center;padding:10px 14px;border-radius:4px;color:#122023;text-decoration:none;transition:all .25s ease;background-color:#f8fafb;border-left:3px solid transparent}.terms-toc-link:hover{color:var(--primary,#009bb3);background-color:#eef7f8;border-left-color:var(--primary,#009bb3);transform:translateX(3px)}.terms-toc-link.active{color:var(--primary,#009bb3);background-color:#e0f6f4;border-left-color:var(--primary,#009bb3);font-weight:700}.terms-toc-num{font-family:'LXGW WenKai TC',sans-serif;font-weight:700;font-size:14px;opacity:.7;margin-right:12px;letter-spacing:1px}.terms-toc-title{font-size:14px;overflow-wrap:anywhere}.terms-item-card{background:#ffffff;border:1px solid #d2e3e5;border-left:5px solid var(--primary,#009bb3);border-radius:4px;padding:28px;transition:all .3s cubic-bezier(0.2,0.8,0.2,1);position:relative}.terms-item-card:hover{border-left-width:10px;background-color:#fbfdfd}.terms-card-num{font-size:48px;font-weight:700;line-height:1;-webkit-text-stroke:1.5px #6d868a;color:transparent;user-select:none;transition:all .3s ease}.terms-item-card:hover .terms-card-num{-webkit-text-stroke:1.5px var(--primary,#009bb3);color:rgba(0,155,179,0.06)}.terms-card-body p{line-height:1.75;color:#4b6468;margin-bottom:14px}.terms-card-body p:last-child{margin-bottom:0}.terms-inline-link{color:var(--primary,#009bb3);font-weight:700;text-decoration:none;border-bottom:1px dashed var(--primary,#009bb3);transition:color .2s ease,border-bottom-color .2s ease}.terms-inline-link:hover{color:#007a8c;border-bottom-color:#007a8c}.terms-bullet-list{list-style:none;padding-left:0;margin-bottom:0}.terms-bullet-list li{font-size:14px;color:#4b6468;display:flex;align-items:flex-start}.terms-bullet-list li i{margin-top:4px;flex-shrink:0}@media(max-width:767px){.terms-section{padding-top:2rem!important;padding-bottom:2rem!important}.terms-item-card{padding:18px;border-left-width:4px}.terms-item-card:hover{border-left-width:6px}.terms-card-num{font-size:36px}.terms-nav-card{position:static!important;margin-bottom:20px;padding:18px}.terms-toc-link{padding:8px 10px;font-size:13px}.terms-subtitle{font-size:14px}}

/* ===== PAGE: disclaimer ===== */
.vku-disclaimer-wrap {
  background-color: var(--bg, #f3f8f8);
  color: var(--text, #122023);
  font-family: 'LXGW WenKai TC', sans-serif;
  position: relative;
  overflow: hidden;
}

.vku-disclaimer-wrap .vku-eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--primary, #009bb3);
  font-weight: 700;
}

.vku-disclaimer-wrap .vku-title {
  font-size: 30px;
  color: var(--text, #122023);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vku-disclaimer-wrap .vku-title-line {
  width: 48px;
  height: 3px;
  background-color: var(--primary, #009bb3);
}

.vku-disclaimer-wrap .vku-disclaimer-lead {
  max-width: 780px;
  color: var(--text-muted, #6d868a);
  font-size: 16px;
  line-height: 1.6;
}

.vku-disclaimer-wrap .vku-disclaimer-card {
  background-color: var(--surface, #ffffff);
  border: 1px solid var(--border, #d2e3e5);
  border-left: 5px solid var(--primary, #009bb3);
  border-radius: 4px;
  transition: border-left-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease;
}

.vku-disclaimer-wrap .vku-disclaimer-card:hover {
  border-left-width: 10px;
  background-color: #fbfdfd;
}

.vku-disclaimer-wrap .vku-card-number {
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-muted, #6d868a);
  transition: -webkit-text-stroke-color 0.3s ease;
  user-select: none;
}

.vku-disclaimer-wrap .vku-disclaimer-card:hover .vku-card-number {
  -webkit-text-stroke-color: var(--primary, #009bb3);
}

.vku-disclaimer-wrap .vku-disclaimer-card h3 {
  color: var(--text, #122023) !important;
  overflow-wrap: anywhere;
}

.vku-disclaimer-wrap .vku-disclaimer-card p {
  color: var(--text-secondary-light-bg, #4b6468) !important;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.vku-disclaimer-wrap .vku-disclaimer-meta {
  border-color: var(--border, #d2e3e5) !important;
}

.vku-disclaimer-wrap .vku-badge {
  background-color: var(--background-alt, #e5f1f2);
  color: var(--primary, #009bb3);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 1px;
}

.vku-disclaimer-wrap .text-primary {
  color: var(--primary, #009bb3) !important;
  transition: color 0.2s ease;
}

.vku-disclaimer-wrap .text-primary:hover {
  color: var(--primary-hover, #007a8c) !important;
}

@media (max-width: 767px) {
  .vku-disclaimer-wrap .vku-title {
    font-size: 16px;
  }
  .vku-disclaimer-wrap .vku-disclaimer-card h3 {
    font-size: 14px;
  }
  .vku-disclaimer-wrap .vku-card-number {
    font-size: 38px;
  }
  .vku-disclaimer-wrap .vku-disclaimer-lead {
    font-size: 14px;
  }
}

/* ===== PAGE: cookies ===== */
.cookies-page-section{background-color:var(--bg);color:var(--text);font-family:'LXGW WenKai TC',sans-serif}.cookies-page-section .cookies-policy-card{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:4px;padding:28px;transition:all .3s cubic-bezier(0.2,0.8,0.2,1);position:relative;overflow:hidden}.cookies-page-section .cookies-policy-card:hover{border-left-width:10px;background:#fbfdfd}.cookies-page-section .cookies-policy-card:hover .cookies-num-badge{-webkit-text-stroke:1.5px var(--primary);color:rgba(0,155,179,0.06)}.cookies-page-section .cookies-num-badge{font-size:54px;font-weight:700;line-height:1;-webkit-text-stroke:1.5px var(--text-muted);color:transparent;user-select:none;margin-bottom:8px;letter-spacing:1px}.cookies-page-section .cookies-section-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3;overflow-wrap:anywhere}.cookies-page-section .cookies-title-line{width:48px;height:3px;background-color:var(--primary);margin-bottom:18px}.cookies-page-section .cookies-text{font-size:15px;line-height:1.75;color:var(--text);margin-bottom:12px;overflow-wrap:anywhere}.cookies-page-section .cookies-text-sm{font-size:13px;line-height:1.6;color:var(--text-muted);margin-bottom:8px;overflow-wrap:anywhere}.cookies-page-section .cookies-subtitle{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}.cookies-page-section .cookies-subicon{color:var(--primary);margin-right:6px}.cookies-page-section .cookies-subgroup{background:var(--background-alt);padding:14px 18px;border-radius:4px;border:1px solid var(--border)}.cookies-page-section .cookies-link{color:var(--primary-text);text-decoration:none;font-weight:700;border-bottom:1px solid var(--primary);transition:color .2s ease}.cookies-page-section .cookies-link:hover{color:var(--primary-hover)}.cookies-page-section .cookies-list{padding-left:20px;margin-bottom:12px;color:var(--text);font-size:14px;line-height:1.8}.cookies-page-section .cookies-list li{margin-bottom:8px}.cookies-page-section .cookies-preference-box{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--secondary);border-radius:4px;padding:24px}.cookies-page-section .cookies-pref-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}.cookies-page-section .pref-label{font-size:14px;color:var(--text)}.cookies-page-section .pref-desc{font-size:12px;color:var(--text-muted)}.cookies-page-section .form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}.cookies-page-section .form-check-input:focus{border-color:var(--primary);box-shadow:0 0 0 .25rem rgba(0,155,179,.25)}.cookies-page-section .vku-btn{display:inline-block;background-color:var(--primary);color:var(--on-primary);border:1px solid var(--primary);border-radius:4px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}.cookies-page-section .vku-btn:hover{background-color:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}.cookies-page-section .vku-btn-alt{display:inline-block;background-color:transparent;color:var(--primary);border:1px solid var(--primary);border-radius:4px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;transition:background-color .2s ease,color .2s ease}.cookies-page-section .vku-btn-alt:hover{background-color:var(--primary);color:var(--on-primary)}.cookies-page-section .cookies-feedback-msg{font-size:13px;font-weight:700;color:var(--secondary);background-color:rgba(16,155,103,0.12);padding:8px 12px;border-radius:4px;border:1px solid var(--secondary)}.cookies-page-section .vku-badge{display:inline-block;padding:4px 10px;font-size:12px;background:var(--background-alt);color:var(--text);border:1px solid var(--border);border-radius:4px;text-decoration:none;transition:all .2s ease}.cookies-page-section .vku-badge:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}@media(max-width:767px){.cookies-page-section .cookies-policy-card{padding:18px}.cookies-page-section .cookies-preference-box{position:static!important;margin-top:20px;padding:18px}.cookies-page-section .cookies-section-title{font-size:16px}.cookies-page-section .cookies-num-badge{font-size:42px}}

.cyber-comment-card {
    background-color: #ffffff;
    border: 1px solid #d2e3e5;
    border-left: 5px solid #009bb3;
    border-radius: 4px;
    padding: 24px;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    font-family: 'LXGW WenKai TC', sans-serif;
}

.cyber-comment-card:hover {
    background-color: #fbfdfd;
    border-left-width: 10px;
}

.cyber-comment-card .cyber-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 4px;
    background: linear-gradient(135deg, #009bb3 0%, #109b67 100%);
    border: 1px solid #009bb3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    user-select: none;
}

.cyber-comment-card .cyber-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.cyber-comment-author {
    font-size: 16px;
    font-weight: 700;
    color: #122023;
}

.cyber-badge-role {
    font-size: 11px;
    padding: 2px 8px;
    background-color: #e5f1f2;
    color: #009bb3;
    border: 1px solid #b6d8dc;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cyber-comment-time {
    font-size: 13px;
    color: #6d868a;
}

.cyber-comment-id {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #6d868a;
    font-family: monospace, 'LXGW WenKai TC', sans-serif;
    transition: -webkit-text-stroke 0.3s ease;
}

.cyber-comment-card:hover .cyber-comment-id {
    -webkit-text-stroke: 1.5px #009bb3;
}

.cyber-comment-body p {
    font-size: 15px;
    line-height: 1.7;
    color: #122023;
}

.cyber-comment-footer {
    border-top: 1px solid #e5f1f2;
}

.cyber-rating-tag {
    font-size: 12px;
    font-weight: 700;
    color: #109b67;
    background-color: #e0f6f4;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid #a3e2ce;
}

.cyber-verified-tag {
    font-size: 12px;
    color: #4b6468;
}

.cyber-btn-action {
    background: transparent;
    border: 1px solid #d2e3e5;
    border-radius: 4px;
    color: #4b6468;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.cyber-btn-action:hover {
    border-color: #009bb3;
    color: #009bb3;
    background-color: #f3f8f8;
}

.cyber-btn-reply {
    background-color: #009bb3;
    border-color: #009bb3;
    color: #ffffff;
}

.cyber-btn-reply:hover {
    background-color: #007a8c;
    border-color: #007a8c;
    color: #ffffff;
}

.cyber-reply-thread {
    position: relative;
    border-left: 2px dashed #009bb3;
}

.cyber-reply-thread::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 14px;
    height: 2px;
    background-color: #009bb3;
}

.reply-comment {
    background-color: #ffffff;
    border: 1px solid #d2e3e5;
    border-left: 5px solid #109b67;
    border-radius: 4px;
    padding: 20px;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: 'LXGW WenKai TC', sans-serif;
}

.reply-comment:hover {
    background-color: #fbfdfd;
    border-left-width: 8px;
}

.reply-comment .cyber-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 4px;
    background: linear-gradient(135deg, #109b67 0%, #009bb3 100%);
    border: 1px solid #109b67;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    user-select: none;
}

.reply-comment .cyber-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.reply-comment .cyber-comment-author {
    font-size: 15px;
    font-weight: 700;
    color: #122023;
}

.reply-badge {
    background-color: #e0f6f4;
    color: #109b67;
    border-color: #109b67;
}

.reply-comment .cyber-comment-time {
    font-size: 12px;
    color: #6d868a;
}

.reply-comment .cyber-comment-id {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #6d868a;
    font-family: monospace, 'LXGW WenKai TC', sans-serif;
    transition: -webkit-text-stroke 0.3s ease;
}

.reply-comment:hover .cyber-comment-id {
    -webkit-text-stroke: 1.5px #109b67;
}

.reply-comment .cyber-comment-body p {
    font-size: 14px;
    line-height: 1.7;
    color: #122023;
}

.cyber-reply-target {
    color: #009bb3;
    font-weight: 700;
}

.reply-comment .cyber-comment-footer {
    border-top: 1px solid #e5f1f2;
}

.cyber-official-tag {
    font-size: 12px;
    font-weight: 700;
    color: #109b67;
    background-color: #e5f1f2;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid #b6d8dc;
}

.reply-comment .cyber-btn-action {
    background: transparent;
    border: 1px solid #d2e3e5;
    border-radius: 4px;
    color: #4b6468;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.reply-comment .cyber-btn-action:hover {
    border-color: #109b67;
    color: #109b67;
    background-color: #f3f8f8;
}


/* ===== PAGE TEMPLATE: game-hall ===== */
body {
    background-color: var(--background-main, #f3f8f8);
    color: var(--text-primary-light_bg, #122023);
    font-family: 'LXGW WenKai TC', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.site-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid var(--border-accent, #009bb3);
    backdrop-filter: blur(8px);
    z-index: 1020;
}

.site-header__brand-code {
    font-size: 0.75rem;
    color: var(--accent-green, #06d6a0);
    letter-spacing: 1.5px;
}

.site-header__brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary-light-bg, #122023);
}

.site-header__nav-link {
    color: var(--text-secondary-light-bg, #4b6468);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.site-header__nav-link:hover,
.site-header__nav-link.active {
    color: var(--primary, #009bb3);
}

.detail-stack-wrapper {
    max-width: 900px;
    width: 100%;
}

.hero-detail-title {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--text-primary-light-bg, #122023);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.hero-detail-subtitle {
    font-size: 1rem;
    color: var(--text-secondary-light-bg, #4b6468);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.game-screen-card {
    border: 1px solid var(--border-color, #d2e3e5);
    border-left: 5px solid var(--border-accent, #009bb3);
    background-color: var(--background-surface, #ffffff);
    border-radius: 4px;
    position: relative;
}

/* Keep embedded game geometry fixed when the pointer enters or leaves the card. */
.game-screen-card.vku-card {
    transition: background-color 0.2s ease;
}

.game-screen-card.vku-card:hover {
    border-left-width: 5px;
}

.game-screen-card.vku-card:fullscreen {
    border: none;
}

.game-screen-bar {
    background-color: var(--background-alt, #e5f1f2);
}

.game-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-green, #06d6a0);
    display: inline-block;
}

.game-screen-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary-light-bg, #4b6468);
}

.game-fs-btn,
.game-exit-fs-btn {
    background: var(--primary, #009bb3);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease;
}

.game-fs-btn:hover,
.game-exit-fs-btn:hover {
    background: var(--primary-hover, #007a8c);
    color: #ffffff;
}

.game-exit-fs-btn {
    display: none;
    background: var(--secondary, #109b67);
}

.game-iframe-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    background-color: #0b1517;
}

.game-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.game-screen-card:fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.game-screen-card:fullscreen .game-iframe-wrapper {
    flex: 1;
    height: calc(100vh - 46px);
}

.game-screen-card:fullscreen .game-fs-btn {
    display: none;
}

.game-screen-card:fullscreen .game-exit-fs-btn {
    display: inline-flex;
}

.detail-card {
    border: 1px solid var(--border-color, #d2e3e5);
    border-left: 5px solid var(--border-accent, #009bb3);
    background-color: var(--background-surface, #ffffff);
    border-radius: 4px;
    padding: 24px;
    position: relative;
    transition: border-left-width 0.2s ease, background-color 0.2s ease;
}

.detail-card:hover {
    border-left-width: 8px;
    background-color: #fbfdfd;
}

.detail-card-badge {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--text-muted-light-bg, #6d868a);
    user-select: none;
}

.detail-card:hover .detail-card-badge {
    -webkit-text-stroke-color: var(--primary, #009bb3);
}

.detail-subheading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary-light-bg, #122023);
}

.detail-media-frame {
    width: 160px;
    height: 160px;
}

.detail-media-offset-bg {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 100%;
    height: 100%;
    background-color: var(--background-alt, #e5f1f2);
    border: 1px dashed var(--border-accent, #009bb3);
    border-radius: 4px;
    z-index: 1;
}

.detail-thumb-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color, #d2e3e5);
    z-index: 2;
}

.detail-rating-pill {
    background-color: var(--background-alt, #e5f1f2);
    border: 1px solid var(--border-color, #d2e3e5);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.9rem;
}

.detail-summary-text,
.detail-body-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary-light-bg, #4b6468);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.facts-table {
    border: 1px solid var(--border-color, #d2e3e5);
}

.facts-table-label {
    width: 35%;
    color: var(--text-secondary-light-bg, #4b6468);
    font-weight: 700;
    background-color: var(--background-alt, #e5f1f2);
    padding: 8px 12px;
}

.facts-table-value {
    color: var(--text-primary-light-bg, #122023);
    padding: 8px 12px;
}

.faq-item {
    background-color: #ffffff;
    border-color: var(--border-color, #d2e3e5) !important;
}

.faq-trigger {
    cursor: pointer;
    user-select: none;
}

.faq-question {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary-light-bg, #122023);
}

.faq-chevron {
    color: var(--primary, #009bb3);
    transition: transform 0.2s ease;
}

.faq-item.is-open .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary-light-bg, #4b6468);
}

.verdict-box {
    background-color: var(--background-alt, #e5f1f2);
    border-color: var(--border-color, #d2e3e5) !important;
}

.verdict-score-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary, #009bb3);
    letter-spacing: 1px;
}

.verdict-rating-big {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--secondary, #109b67);
}

.verdict-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-primary-light-bg, #122023);
}

.review-highlight-callout {
    background-color: var(--background-alt, #e5f1f2);
    border-left-color: var(--primary, #009bb3) !important;
    color: var(--text-secondary-light-bg, #4b6468);
    font-size: 0.92rem;
    line-height: 1.6;
}

.similar-item-row {
    background-color: #ffffff;
    border-color: var(--border-color, #d2e3e5) !important;
    transition: background 0.2s ease;
}

.similar-item-row:hover {
    background-color: var(--background-alt, #e5f1f2);
}

.similar-thumb-square {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color, #d2e3e5);
}

.similar-item-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary-light-bg, #122023);
}

.similar-item-meta {
    font-size: 0.82rem;
    color: var(--text-muted-light-bg, #6d868a);
}

.balance-box {
    border-color: var(--border-color, #d2e3e5) !important;
}

.balance-box--pros {
    background-color: rgba(6, 214, 160, 0.04);
}

.balance-box--cons {
    background-color: rgba(220, 53, 69, 0.04);
}

.balance-box-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.balance-list-item {
    font-size: 0.88rem;
    color: var(--text-secondary-light-bg, #4b6468);
    line-height: 1.5;
}

.cta-banner-band {
    background-color: var(--background-cta, #e0f6f4);
    border-top: 1px solid var(--border-color, #d2e3e5);
}

.cta-banner-content {
    max-width: 800px;
}

.cta-banner-heading {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 700;
    color: var(--text-primary-light-bg, #122023);
}

.cta-banner-text {
    font-size: 0.95rem;
    color: var(--text-secondary-light-bg, #4b6468);
}

@media (max-width: 767px) {
    .game-iframe-wrapper {
        height: 380px;
    }

    .detail-card {
        padding: 16px;
    }

    .detail-card-badge {
        font-size: 1.5rem;
        top: 10px;
        right: 12px;
    }

    .facts-table thead {
        display: none;
    }

    .facts-table,
    .facts-table tbody,
    .facts-table tr,
    .facts-table td,
    .facts-table th {
        display: block;
        width: 100%;
    }

    .facts-table-label {
        width: 100%;
        border-bottom: none;
    }

    .similar-item-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
}

/* mobile-text-guard */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
    overflow-wrap: anywhere;
  }
  a, button, .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  img, video, iframe {
    max-width: 100%;
  }
}