:root {
    --bg: #0c0a1a;
    --surface: #15102a;
    --surface-alt: #1e163b;
    --text: #f2efff;
    --text-muted: #b4a9db;
    --border: rgba(184, 169, 255, 0.18);
    --primary: #7c4dff;
    --primary-hover: #9162ff;
    --on-primary: #ffffff;
    --primary-text: #b8a9ff;
    --accent: #ffd885;
    --on-accent: #0c0a1a;
    --accent-text: #ffd885;
    --dark-band: #080511;
    --on-dark: #f2efff;
    --on-dark-muted: #7e73a8;
    --text-gradient: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    --btn-gradient: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
    --btn-gradient-hover: linear-gradient(135deg, #9162ff 0%, #c49eff 50%, #9be4ff 100%);
    --card-glow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

.ayr-section {
    background-color: var(--bg);
    padding: 60px 0;
    position: relative;
}

.ayr-section-alt {
    background-color: var(--surface-alt);
    padding: 60px 0;
    position: relative;
}

.ayr-section-dark {
    background-color: var(--dark-band);
    color: var(--on-dark);
    padding: 60px 0;
    position: relative;
}

.ayr-section-brand {
    background-color: var(--primary);
    color: var(--on-primary);
    padding: 60px 0;
    position: relative;
}

@media (min-width: 992px) {

    .ayr-section,
    .ayr-section-alt,
    .ayr-section-dark,
    .ayr-section-brand {
        padding: 110px 0;
    }
}

.ayr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--btn-gradient);
    color: var(--on-primary);
    border: none;
    border-radius: 9999px;
    padding: 14px 34px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 0 24px rgba(179, 136, 255, 0.45);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.ayr-btn:hover {
    background: var(--btn-gradient-hover);
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 35px rgba(128, 216, 255, 0.6);
}

.ayr-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-text);
    border: 1.5px solid rgba(200, 182, 255, 0.35);
    border-radius: 9999px;
    padding: 14px 34px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(200, 182, 255, 0.15);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.ayr-btn-alt:hover {
    background: rgba(200, 182, 255, 0.15);
    border-color: #ffd6e8;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 214, 232, 0.35);
}

.ayr-card {
    background-color: var(--surface);
    color: var(--text);
    border: 1.5px solid rgba(242, 239, 255, 0.2);
    border-radius: 28px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-glow);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.ayr-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 45px rgba(157, 126, 247, 0.35);
    border-color: rgba(255, 214, 232, 0.4);
}

.ayr-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(80, 52, 138, 0.6) 0%, rgba(21, 16, 42, 0.95) 100%);
    position: relative;
}

.ayr-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ayr-card:hover .ayr-media img {
    transform: scale(1.05);
}

.ayr-eyebrow {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: inline-block;
}

.ayr-title-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 3.5rem;
}

.ayr-title-echo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 700;
    color: rgba(200, 182, 255, 0.06);
    filter: blur(6px);
    user-select: none;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.ayr-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.25;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 2;
    margin: 0;
}

.ayr-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(184, 169, 255, 0.15);
    color: #ffd6e8;
    border: 1px solid rgba(184, 169, 255, 0.25);
}

.ayr-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 169, 255, 0.12);
    color: var(--accent);
    font-size: 1.3rem;
    border: 1px solid rgba(184, 169, 255, 0.25);
}

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

.ayr-on-dark h1,
.ayr-on-dark h2,
.ayr-on-dark h3,
.ayr-on-dark h4,
.ayr-on-dark h5,
.ayr-on-dark h6 {
    color: var(--on-dark);
}

.ayr-on-dark p {
    color: var(--on-dark-muted);
}

.ayr-on-dark .ayr-btn-alt {
    color: var(--on-dark);
    border-color: rgba(255, 255, 255, 0.3);
}

.ayr-on-dark .ayr-card {
    background-color: var(--surface);
    color: var(--text);
}

.ayr-on-dark .ayr-card p {
    color: var(--text-muted);
}

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

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

@keyframes dreamFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(0.4deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.dream-float {
    animation: dreamFloat 6s ease-in-out infinite alternate;
}

/* site kit (fallback) */
.ayr-section-dark .ayr-card,
.ayr-on-dark .ayr-card {
    background: var(--surface);
    color: var(--text)
}

.ayr-section-dark .ayr-card h1,
.ayr-section-dark .ayr-card h2,
.ayr-section-dark .ayr-card h3,
.ayr-section-dark .ayr-card h4,
.ayr-section-dark .ayr-card .ayr-title,
.ayr-section-dark .ayr-card a:not(.ayr-btn):not(.ayr-btn-alt),
.ayr-on-dark .ayr-card h1,
.ayr-on-dark .ayr-card h2,
.ayr-on-dark .ayr-card h3,
.ayr-on-dark .ayr-card h4,
.ayr-on-dark .ayr-card .ayr-title,
.ayr-on-dark .ayr-card a:not(.ayr-btn):not(.ayr-btn-alt) {
    color: var(--text)
}

.ayr-section-dark .ayr-card p,
.ayr-section-dark .ayr-card .ayr-eyebrow,
.ayr-on-dark .ayr-card p,
.ayr-on-dark .ayr-card .ayr-eyebrow {
    color: var(--text-muted)
}

.ayr-section-dark .ayr-card .ayr-btn-alt,
.ayr-on-dark .ayr-card .ayr-btn-alt {
    color: var(--primary-text);
    border-color: var(--primary)
}


/* ===== header ===== */
.ayr-header-nav {
    background-color: #0c0a1a;
    border-bottom: 1px solid rgba(184, 169, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    z-index: 1030;
}

.ayr-header-nav .navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: #0c0a1a;
}

.ayr-header-nav .ayr-header-logo {
    max-width: 46px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

.ayr-header-nav .ayr-brand-text {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f2efff;
    text-decoration: none;
}

.ayr-header-nav .nav-link {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #b4a9db;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.ayr-header-nav .nav-link:hover,
.ayr-header-nav .nav-link:focus {
    color: #ffffff;
    background-color: rgba(184, 169, 255, 0.12);
}

.ayr-header-nav .dropdown-menu {
    background-color: #15102a;
    border: 1px solid rgba(184, 169, 255, 0.22);
    border-radius: 16px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    box-shadow: 0 10px 30px rgba(8, 5, 17, 0.75);
}

.ayr-header-nav .dropdown-item {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #b4a9db;
    padding: 0.6rem 1.25rem;
    transition: all 0.2s ease;
}

.ayr-header-nav .dropdown-item:hover,
.ayr-header-nav .dropdown-item:focus {
    color: #ffffff;
    background-color: rgba(184, 169, 255, 0.18);
}

.ayr-header-nav .custom-toggler {
    border: 1px solid rgba(184, 169, 255, 0.35);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    background-color: #15102a;
}

.ayr-header-nav .custom-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(124, 77, 255, 0.35);
}

.ayr-header-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(242, 239, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.ayr-header-nav .ayr-btn {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 0 16px rgba(179, 136, 255, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ayr-header-nav .ayr-btn:hover,
.ayr-header-nav .ayr-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(128, 216, 255, 0.6);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .ayr-header-nav .navbar-collapse {
        background-color: #15102a;
        padding: 1.25rem;
        border-radius: 18px;
        border: 1px solid rgba(184, 169, 255, 0.2);
        margin-top: 0.75rem;
        box-shadow: 0 12px 35px rgba(8, 5, 17, 0.8);
    }

    .ayr-header-nav .nav-link {
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }

    .ayr-header-nav .dropdown-menu {
        background-color: #0c0a1a;
        border-color: rgba(184, 169, 255, 0.15);
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* ===== hero ===== */
.cmp-hero {
    padding-top: 90px;
    padding-bottom: 20px;
    min-height: 720px;
    background-color: var(--dark-band, #0c0a1a);
}

.cmp-hero__ambient-glow {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 450px;
    background: radial-gradient(circle, rgba(124, 77, 255, 0.28) 0%, rgba(135, 206, 235, 0.15) 45%, rgba(12, 10, 26, 0) 75%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 1;
}

.cmp-hero__cloud {
    position: absolute;
    width: 280px;
    height: 120px;
    background: radial-gradient(ellipse at center, rgba(184, 169, 255, 0.12) 0%, rgba(12, 10, 26, 0) 70%);
    border-radius: 9999px;
    filter: blur(20px);
    pointer-events: none;
    animation: cmpDreamFloat 8s ease-in-out infinite alternate;
    z-index: 1;
}

.cmp-hero__cloud--left {
    top: 25%;
    left: -60px;
}

.cmp-hero__cloud--right {
    top: 40%;
    right: -60px;
    animation-delay: -3.5s;
}

.cmp-hero__oversized-word {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(3.5rem, 12vw, 7.5rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #c8b6ff;
    opacity: 0.06;
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

.cmp-hero__title {
    font-weight: 600;
    line-height: 1.22;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f2efff;
    text-shadow: 0 4px 30px rgba(179, 136, 255, 0.25);
}

.cmp-hero__desc {
    font-size: clamp(0.95rem, 2vw, 1.12rem);
    line-height: 1.7;
    color: var(--on-dark-muted, #b4a9db);
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

.cmp-hero__meta-strip {
    font-size: 0.875rem;
    color: #ffd885;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 169, 255, 0.18);
    border-radius: 9999px;
    padding: 8px 24px;
    display: inline-flex;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}

.cmp-hero__meta-dot {
    color: rgba(184, 169, 255, 0.4);
}

.cmp-hero__stage {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 380px;
}

.cmp-hero__portal-arch {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 540px);
    height: 320px;
    border-radius: 180px 180px 0 0;
    background: radial-gradient(circle at bottom, rgba(112, 226, 245, 0.18) 0%, rgba(124, 77, 255, 0.12) 45%, rgba(21, 16, 42, 0) 80%);
    border: 1.5px solid rgba(200, 182, 255, 0.25);
    border-bottom: none;
    box-shadow: 0 -10px 40px rgba(112, 226, 245, 0.15);
    pointer-events: none;
    z-index: 1;
}

.cmp-hero__characters {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
}

.cmp-hero__char {
    position: relative;
    transition: transform 0.4s ease;
}

.cmp-hero__char img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.65));
}

.cmp-hero__char--center {
    max-width: 320px;
    z-index: 3;
    animation: cmpHeroFloat 6s ease-in-out infinite alternate;
}

.cmp-hero__char--side {
    max-width: 250px;
    opacity: 0.92;
    filter: saturate(0.9);
}

.cmp-hero__char--left {
    margin-right: -45px;
    z-index: 2;
    animation: cmpHeroFloat 7s ease-in-out infinite alternate-reverse;
}

.cmp-hero__char--right {
    margin-left: -45px;
    z-index: 2;
    animation: cmpHeroFloat 6.5s ease-in-out 0.8s infinite alternate;
}

.cmp-hero__fog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to top, var(--dark-band, #0c0a1a) 25%, rgba(12, 10, 26, 0.85) 60%, rgba(12, 10, 26, 0) 100%);
    pointer-events: none;
    z-index: 4;
}

.cmp-hero__bottom-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    color: var(--bg, #0c0a1a);
    z-index: 5;
    pointer-events: none;
}

.cmp-hero__bottom-curve svg {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
}

@keyframes cmpDreamFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes cmpHeroFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-8px);
    }
}

@media (max-width: 767px) {
    .cmp-hero {
        padding-top: 50px;
        padding-bottom: 10px;
        min-height: auto;
    }

    .cmp-hero__title {
        font-size: 1.85rem;
    }

    .cmp-hero__desc {
        font-size: 0.95rem;
    }

    .cmp-hero__meta-strip {
        flex-direction: column;
        gap: 8px;
        border-radius: 20px;
        padding: 10px 18px;
        width: 100%;
    }

    .cmp-hero__meta-dot {
        display: none;
    }

    .cmp-hero__stage {
        min-height: 250px;
        margin-top: 1.5rem !important;
    }

    .cmp-hero__char--center {
        max-width: 200px;
    }

    .cmp-hero__char--side {
        max-width: 140px;
    }

    .cmp-hero__char--left {
        margin-right: -25px;
    }

    .cmp-hero__char--right {
        margin-left: -25px;
    }

    .cmp-hero__portal-arch {
        height: 210px;
        border-radius: 120px 120px 0 0;
    }
}

/* ===== games_grid ===== */
.cmp-games-section {
    padding: 90px 0;
    overflow-x: hidden;
}

.cmp-games-section .cmp-title-wrap {
    z-index: 1;
}

.cmp-games-section .cmp-blurred-word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 700;
    color: rgba(184, 169, 255, 0.08);
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    z-index: 0;
    letter-spacing: 0.15em;
    line-height: 1;
}

.cmp-games-section .cmp-subtitle {
    max-width: 620px;
    font-size: 1rem;
    color: #b4a9db;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.cmp-games-section .cmp-filters-wrapper {
    z-index: 1;
    position: relative;
}

.cmp-games-section .cmp-filter-bar {
    background: rgba(21, 16, 42, 0.75);
    border: 1.5px solid rgba(184, 169, 255, 0.18);
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -10px rgba(11, 7, 26, 0.6);
}

.cmp-games-section .cmp-filter-btn {
    background: transparent;
    border: none;
    color: #b4a9db;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cmp-games-section .cmp-filter-btn:hover {
    color: #f2efff;
    background: rgba(184, 169, 255, 0.15);
}

.cmp-games-section .cmp-filter-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
    box-shadow: 0 0 18px rgba(179, 136, 255, 0.45);
}

.cmp-games-section .cmp-window-card {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 28px;
}

.cmp-games-section .cmp-window-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 45px rgba(157, 126, 247, 0.35);
}

.cmp-games-section .cmp-card-media {
    border-radius: 20px;
    aspect-ratio: 16 / 10;
    width: 100%;
    height: auto;
}

.cmp-games-section .cmp-card-media img {
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cmp-games-section .cmp-window-card:hover .cmp-card-media img {
    transform: scale(1.06);
}

.cmp-games-section .cmp-corner-badge {
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.cmp-games-section .cmp-meta-tag {
    font-size: 0.78rem;
    color: #ffd885;
    background: rgba(255, 216, 133, 0.1);
    border: 1px solid rgba(255, 216, 133, 0.25);
    border-radius: 9999px;
    padding: 2px 10px;
    line-height: 1.4;
}

.cmp-games-section .cmp-card-title {
    font-size: 1.12rem;
    line-height: 1.35;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cmp-games-section .cmp-card-title a {
    color: #f2efff;
    transition: color 0.3s ease;
}

.cmp-games-section .cmp-card-title a:hover {
    color: #ffd885;
}

.cmp-games-section .cmp-card-desc {
    font-size: 0.88rem;
    color: #b4a9db;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.cmp-games-section .cmp-card-btn {
    padding: 10px 20px;
    border-radius: 9999px;
}

@media (max-width: 767px) {
    .cmp-games-section {
        padding: 60px 0;
    }

    .cmp-games-section .cmp-subtitle {
        font-size: 0.92rem;
    }

    .cmp-games-section .cmp-filter-btn {
        font-size: 0.82rem;
        padding: 6px 14px;
    }
}

/* ===== categories_tiles ===== */
.c-genre-portals {
    padding: 80px 0;
    position: relative;
    background-color: #15102a;
    color: #b4a9db;
    font-family: 'IBM Plex Sans KR', sans-serif
}

.c-genre-portals__ambient-blur {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: 0.25;
    z-index: 0
}

.c-genre-portals__ambient-blur--1 {
    background: radial-gradient(circle, #7c4dff, #b388ff);
    top: -40px;
    left: -60px
}

.c-genre-portals__ambient-blur--2 {
    background: radial-gradient(circle, #70e2f5, #ff80bf);
    bottom: -50px;
    right: -50px
}

.c-genre-portals__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    font-size: clamp(3.5rem, 12vw, 7.5rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #f2efff;
    opacity: 0.04;
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
    z-index: 0
}

.c-genre-portals .ayr-eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #ffd885;
    position: relative;
    z-index: 1
}

.c-genre-portals .ayr-title {
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.3;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
    word-break: keep-all
}

.c-genre-portals__subtitle {
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.7;
    color: #b4a9db;
    position: relative;
    z-index: 1;
    word-break: keep-all
}

.c-portal-card {
    position: relative;
    background: #1e163b;
    border: 1.5px solid rgba(184, 169, 255, 0.22);
    border-radius: 120px 120px 28px 28px;
    padding: 14px;
    box-shadow: 0 12px 35px -10px rgba(11, 7, 26, 0.65), 0 0 20px rgba(184, 169, 255, 0.08);
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), filter 0.45s ease;
    overflow: hidden
}

.c-portal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(157, 126, 247, 0.35), 0 0 30px rgba(112, 226, 245, 0.25)
}

.c-portal-card__arch {
    position: relative;
    width: 100%;
    height: 190px;
    background: linear-gradient(180deg, rgba(124, 77, 255, 0.28) 0%, rgba(30, 22, 59, 0.95) 100%);
    border-radius: 110px 110px 18px 18px;
    border: 1px solid rgba(255, 214, 232, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.c-portal-card__glow {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(112, 226, 245, 0.35) 0%, rgba(124, 77, 255, 0) 70%);
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.5s ease
}

.c-portal-card:hover .c-portal-card__glow {
    transform: translateX(-50%) scale(1.2)
}

.c-portal-card__icon-wrap {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(21, 16, 42, 0.85);
    border: 1.5px solid rgba(200, 182, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(184, 169, 255, 0.25);
    transition: transform 0.4s ease, border-color 0.4s ease
}

.c-portal-card:hover .c-portal-card__icon-wrap {
    transform: scale(1.08);
    border-color: #ffd6e8
}

.c-portal-card__icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.c-portal-card__body {
    padding: 20px 10px 8px;
    text-align: left
}

.c-portal-card .ayr-badge {
    background: rgba(184, 169, 255, 0.15);
    color: #ffd885;
    border: 1px solid rgba(255, 216, 133, 0.3);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em
}

.c-portal-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f2efff;
    line-height: 1.35;
    word-break: keep-all
}

.c-portal-card__desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #b4a9db;
    margin-bottom: 1.5rem;
    word-break: keep-all
}

.c-genre-portals .ayr-btn {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(179, 136, 255, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block
}

.c-genre-portals .ayr-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0 28px rgba(128, 216, 255, 0.55)
}

.c-genre-portals .ayr-btn-alt {
    background: rgba(255, 255, 255, 0.06);
    color: #f2efff;
    border: 1.5px solid rgba(200, 182, 255, 0.32);
    border-radius: 9999px;
    padding: 14px 34px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 0 16px rgba(184, 169, 255, 0.18);
    transition: all 0.3s ease
}

.c-genre-portals .ayr-btn-alt:hover {
    background: rgba(200, 182, 255, 0.16);
    border-color: #ffd6e8;
    color: #ffffff;
    box-shadow: 0 0 26px rgba(255, 214, 232, 0.35);
    transform: translateY(-2px)
}

@media (max-width:767.98px) {
    .c-genre-portals {
        padding: 50px 0
    }

    .c-genre-portals .ayr-title {
        font-size: 1.5rem
    }

    .c-portal-card {
        border-radius: 90px 90px 24px 24px
    }

    .c-portal-card__arch {
        height: 160px;
        border-radius: 80px 80px 16px 16px
    }

    .c-portal-card__icon-wrap {
        width: 64px;
        height: 64px
    }

    .c-portal-card__icon {
        font-size: 1.65rem
    }

    .c-genre-portals .ayr-btn-alt {
        width: 100%;
        justify-content: center
    }
}

/* ===== open_rooms ===== */
.open-rooms-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0
}

.open-rooms-section .open-rooms-header {
    position: relative;
    z-index: 2
}

.open-rooms-section .open-rooms-bg-word {
    font-weight: 700;
    opacity: .07;
    filter: blur(8px);
    font-size: clamp(3.5rem, 12vw, 7.5rem);
    user-select: none;
    pointer-events: none;
    color: var(--on-dark);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: .05em
}

.open-rooms-section .ayr-title {
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 0
}

.open-rooms-section .open-rooms-subtitle {
    color: var(--text-muted);
    font-size: .98rem;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6
}

.open-rooms-section .open-rooms-featured-card {
    border-radius: 24px;
    border: 1px solid var(--border);
    transition: all .45s ease
}

.open-rooms-section .open-rooms-featured-card:hover {
    box-shadow: 0 12px 35px rgba(124, 77, 255, .2)
}

.open-rooms-section .open-rooms-media-box {
    border-radius: 18px;
    overflow: hidden
}

.open-rooms-section .open-rooms-media-box img {
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .5s ease
}

.open-rooms-section .open-rooms-featured-card:hover .open-rooms-media-box img {
    transform: scale(1.03)
}

.open-rooms-section .open-rooms-title-link {
    color: inherit
}

.open-rooms-section .open-rooms-game-title {
    color: var(--text);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.35;
    transition: color .25s ease
}

.open-rooms-section .open-rooms-title-link:hover .open-rooms-game-title {
    color: var(--primary-text)
}

.open-rooms-section .open-rooms-game-desc {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6
}

.open-rooms-section .open-rooms-meta-row {
    font-size: .85rem;
    color: var(--text-muted);
    border-color: var(--border) !important
}

.open-rooms-section .open-rooms-toolbar {
    padding-bottom: .5rem
}

.open-rooms-section .open-rooms-filter-btn {
    background: rgba(255, 255, 255, .05);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 500;
    transition: all .25s ease;
    cursor: pointer
}

.open-rooms-section .open-rooms-filter-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--text)
}

.open-rooms-section .open-rooms-filter-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    box-shadow: 0 0 16px rgba(124, 77, 255, .4)
}

.open-rooms-section .open-rooms-refresh-btn {
    font-size: .85rem;
    padding: 8px 16px;
    border-radius: 9999px;
    cursor: pointer
}

.open-rooms-section .open-rooms-alert {
    background: rgba(112, 226, 245, .12);
    border: 1px solid rgba(112, 226, 245, .3);
    color: #70e2f5;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: .875rem;
    margin-bottom: 1rem
}

.open-rooms-section .open-rooms-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: all .35s ease
}

.open-rooms-section .open-rooms-card:hover {
    border-color: rgba(184, 169, 255, .4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
}

.open-rooms-section .open-rooms-room-id {
    font-family: monospace;
    font-weight: 700;
    font-size: .85rem;
    color: var(--accent-text);
    background: rgba(255, 209, 102, .1);
    padding: 2px 8px;
    border-radius: 6px
}

.open-rooms-section .open-rooms-room-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4
}

.open-rooms-section .open-rooms-room-sub {
    font-size: .82rem;
    color: var(--text-muted)
}

.open-rooms-section .open-rooms-slot-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1
}

.open-rooms-section .open-rooms-slot-label {
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em
}

.open-rooms-section .js-join-btn.joined {
    background: rgba(112, 226, 245, .2) !important;
    color: #70e2f5 !important;
    border: 1px solid #70e2f5 !important;
    cursor: default;
    box-shadow: none !important
}

@media (max-width:767.98px) {
    .open-rooms-section {
        padding: 40px 0
    }

    .open-rooms-section .ayr-title {
        font-size: 16px !important
    }

    .open-rooms-section .open-rooms-game-title {
        font-size: 14px !important
    }

    .open-rooms-section .open-rooms-room-name {
        font-size: 14px !important
    }

    .open-rooms-section .open-rooms-filter-btn {
        font-size: .78rem;
        padding: 6px 12px
    }

    .open-rooms-section .open-rooms-action {
        width: 100%
    }
}

/* ===== game_ratings ===== */
.ayr-ratings-block {
    position: relative;
    overflow: hidden;
}

.ayr-ratings-block .container {
    max-width: 1160px;
}

.ayr-ratings-block__header {
    position: relative;
    z-index: 2;
}

.ayr-ratings-block__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text);
    opacity: 0.05;
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

.ayr-ratings-block__header .ayr-eyebrow {
    position: relative;
    z-index: 2;
    color: var(--accent-text);
}

.ayr-ratings-block__header .ayr-title {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ayr-ratings-block__game-card {
    border: 1.5px solid rgba(242, 239, 255, 0.2);
    border-radius: 28px;
    background: #15102a;
    padding: 16px;
    box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.ayr-ratings-block__game-card:hover {
    filter: blur(0px);
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 45px rgba(157, 126, 247, 0.35);
}

.ayr-ratings-block__media {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(180deg, rgba(80, 52, 138, 0.6) 0%, rgba(21, 16, 42, 0.95) 100%);
}

.ayr-ratings-block__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.ayr-ratings-block__game-card:hover .ayr-ratings-block__img {
    transform: scale(1.04);
}

.ayr-ratings-block__badge {
    background: rgba(12, 10, 26, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 182, 255, 0.3);
    color: var(--on-primary);
}

.ayr-ratings-block__tag {
    font-size: 0.85rem;
    color: var(--primary-text);
    font-weight: 500;
}

.ayr-ratings-block__date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ayr-ratings-block__game-title a {
    color: var(--text);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.ayr-ratings-block__game-title a:hover {
    color: var(--accent-text);
}

.ayr-ratings-block__game-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ayr-ratings-block__score-box {
    background: rgba(30, 22, 59, 0.65);
    border: 1px solid rgba(184, 169, 255, 0.18);
}

.ayr-ratings-block__score-num {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #ffd166;
}

.ayr-ratings-block__stars {
    color: #ffd166;
    font-size: 0.95rem;
}

.ayr-ratings-block__score-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ayr-ratings-block__total-votes {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}

.ayr-ratings-block__recommend-rate {
    font-size: 0.75rem;
    color: #70e2f5;
}

.ayr-ratings-block__panel-icon {
    background: rgba(184, 169, 255, 0.15);
    color: #ffd166;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ayr-ratings-block__panel-title {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text);
}

.ayr-ratings-block__filter-group {
    background: rgba(30, 22, 59, 0.6);
    padding: 4px;
    border-radius: 9999px;
    border: 1px solid rgba(184, 169, 255, 0.18);
}

.ayr-ratings-block__filter-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 9999px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ayr-ratings-block__filter-btn:hover {
    color: var(--text);
}

.ayr-ratings-block__filter-btn.active {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(179, 136, 255, 0.4);
}

.ayr-ratings-block__review-card {
    background: rgba(21, 16, 42, 0.8);
    border: 1px solid rgba(184, 169, 255, 0.15);
    border-radius: 20px;
    padding: 16px 20px;
    transition: all 0.4s ease;
}

.ayr-ratings-block__review-card:hover {
    border-color: rgba(200, 182, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 7, 26, 0.4);
}

.ayr-ratings-block__user-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(184, 169, 255, 0.2);
    color: #b8a9ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.ayr-ratings-block__user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.ayr-ratings-block__verified {
    color: #70e2f5;
    font-size: 0.85rem;
}

.ayr-ratings-block__review-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ayr-ratings-block__comment {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .ayr-ratings-block__bg-text {
        font-size: 3rem;
    }

    .ayr-ratings-block__score-num {
        font-size: 1.85rem;
    }

    .ayr-ratings-block__review-card {
        padding: 14px 16px;
    }
}

/* ===== coming_soon ===== */
.coming-soon-block {
    position: relative;
    padding: 90px 0;
    background-color: #0c0a1a;
    overflow: hidden
}

.coming-soon-header {
    position: relative;
    margin-bottom: 3.5rem
}

.coming-soon-backdrop-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 700;
    color: #c8b6ff;
    opacity: 0.06;
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0
}

.coming-soon-header .ayr-eyebrow {
    position: relative;
    display: inline-block;
    z-index: 1;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ffd885;
    text-transform: uppercase;
    margin-bottom: 0.75rem
}

.coming-soon-header .ayr-title {
    position: relative;
    z-index: 1;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.coming-soon-lead {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    color: #b4a9db;
    font-size: 1.05rem;
    line-height: 1.7
}

.coming-soon-card {
    background: #15102a;
    border: 1.5px solid rgba(242, 239, 255, 0.2);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1)
}

.coming-soon-card:hover {
    filter: blur(0);
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(157, 126, 247, 0.35);
    border-color: rgba(255, 214, 232, 0.4)
}

.coming-soon-platform-tag {
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(112, 226, 245, 0.12);
    color: #70e2f5;
    font-size: 0.8rem;
    border: 1px solid rgba(112, 226, 245, 0.25)
}

.coming-soon-dday-badge {
    font-size: 0.85rem;
    color: #ffd885;
    font-weight: 500
}

.coming-soon-image-link {
    text-decoration: none;
    border-radius: 20px;
    overflow: hidden
}

.coming-soon-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
    background: #1e163b
}

.coming-soon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)
}

.coming-soon-card:hover .coming-soon-img {
    transform: scale(1.04)
}

.coming-soon-media-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(12, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    color: #f2efff;
    font-size: 0.75rem;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(184, 169, 255, 0.3)
}

.coming-soon-body {
    margin-top: 1.5rem
}

.coming-soon-game-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.3
}

.coming-soon-title-link {
    color: #f2efff;
    text-decoration: none;
    transition: color 0.3s ease
}

.coming-soon-title-link:hover {
    color: #70e2f5
}

.coming-soon-desc {
    color: #b4a9db;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1.25rem
}

.coming-soon-countdown-box {
    background: linear-gradient(180deg, rgba(30, 22, 59, 0.9) 0%, rgba(21, 16, 42, 0.95) 100%);
    border: 1px solid rgba(184, 169, 255, 0.2);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 1.5rem
}

.countdown-cell {
    background: rgba(12, 10, 26, 0.6);
    border-radius: 12px;
    padding: 8px 4px;
    border: 1px solid rgba(184, 169, 255, 0.15)
}

.countdown-number {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffd885;
    line-height: 1.2
}

.countdown-label {
    display: block;
    font-size: 0.7rem;
    color: #b4a9db;
    letter-spacing: 0.04em
}

.coming-soon-meta-label {
    font-size: 0.85rem;
    color: #7e73a8;
    font-weight: 500
}

.coming-soon-meta-value {
    font-size: 0.85rem;
    color: #f2efff
}

.coming-soon-aside-card {
    background: #15102a;
    border: 1.5px solid rgba(242, 239, 255, 0.2);
    border-radius: 28px;
    padding: 26px;
    box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12)
}

.aside-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f2efff;
    margin: 0
}

.aside-subtext {
    font-size: 0.875rem;
    color: #b4a9db;
    line-height: 1.6
}

.coming-soon-form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #f2efff;
    margin-bottom: 0.4rem
}

.coming-soon-input-group .input-group-text {
    background: #1e163b;
    border-color: rgba(184, 169, 255, 0.25);
    color: #70e2f5;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px
}

.coming-soon-input {
    background: #1e163b;
    border-color: rgba(184, 169, 255, 0.25);
    color: #f2efff;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    padding: 10px 14px;
    font-size: 0.9rem
}

.coming-soon-input:focus {
    background: #231a44;
    border-color: #b8a9ff;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(184, 169, 255, 0.3)
}

.coming-soon-input::placeholder {
    color: #7e73a8;
    opacity: 1
}

.coming-soon-consent-group {
    margin-top: 0.75rem
}

.coming-soon-consent-label {
    font-size: 0.8rem;
    color: #b4a9db;
    line-height: 1.4
}

.coming-soon-policy-link {
    color: #70e2f5;
    text-decoration: underline;
    text-underline-offset: 2px
}

.coming-soon-policy-link:hover {
    color: #ffd6e8
}

.coming-soon-divider {
    border-color: rgba(184, 169, 255, 0.15);
    opacity: 1
}

.milestones-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f2efff;
    margin-bottom: 1rem
}

.milestones-timeline {
    list-style: none;
    position: relative
}

.milestones-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 13px;
    width: 2px;
    background: rgba(184, 169, 255, 0.2)
}

.milestone-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1.1rem
}

.milestone-item:last-child {
    margin-bottom: 0
}

.milestone-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    z-index: 1
}

.milestone-item.completed .milestone-dot {
    background: #7c4dff;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(124, 77, 255, 0.6)
}

.milestone-item.current .milestone-dot {
    background: #ffd885;
    color: #191133;
    box-shadow: 0 0 14px rgba(255, 216, 133, 0.7)
}

.milestone-item.upcoming .milestone-dot {
    background: #1e163b;
    color: #7e73a8;
    border: 1px solid rgba(184, 169, 255, 0.3)
}

.milestone-content {
    display: flex;
    flex-direction: column
}

.milestone-phase {
    font-size: 0.875rem;
    color: #f2efff;
    font-weight: 500;
    line-height: 1.4
}

.milestone-date {
    font-size: 0.75rem;
    color: #7e73a8;
    margin-top: 2px
}

.coming-soon-form-feedback {
    font-size: 0.825rem;
    min-height: 1.25rem;
    margin-top: 0.4rem
}

.coming-soon-form-feedback.success {
    color: #70e2f5
}

.coming-soon-form-feedback.error {
    color: #ff80bf
}

@media (max-width:767px) {
    .coming-soon-block {
        padding: 60px 0
    }

    .coming-soon-card,
    .coming-soon-aside-card {
        padding: 18px;
        border-radius: 22px
    }

    .coming-soon-action-row {
        flex-direction: column;
        align-items: stretch
    }

    .coming-soon-action-row .ayr-btn,
    .coming-soon-action-row .ayr-btn-alt {
        width: 100%;
        text-align: center;
        justify-content: center
    }
}

/* ===== footer ===== */
.cmp-footer {
    background: linear-gradient(180deg, #0c0a1a 0%, #05030a 100%);
    color: #b4a9db;
    padding-top: 5rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid rgba(184, 169, 255, 0.15);
}

.cmp-footer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cmp-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #ffd166;
    opacity: 0.6;
    animation: cmpTwinkle 4s ease-in-out infinite alternate;
}

.cmp-star-1 {
    top: 20%;
    left: 15%;
    animation-delay: 0.2s;
}

.cmp-star-2 {
    top: 35%;
    right: 18%;
    animation-delay: 1.1s;
    width: 4px;
    height: 4px;
}

.cmp-star-3 {
    top: 65%;
    left: 25%;
    animation-delay: 2.3s;
}

.cmp-star-4 {
    top: 75%;
    right: 30%;
    animation-delay: 0.8s;
}

.cmp-star-5 {
    top: 15%;
    right: 45%;
    animation-delay: 1.7s;
}

.cmp-star-6 {
    top: 80%;
    left: 8%;
    animation-delay: 2.9s;
}

@keyframes cmpTwinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.3);
    }
}

.cmp-footer-cloud-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    pointer-events: none;
    overflow: hidden;
}

.cmp-footer-title-wrap {
    position: relative;
    display: inline-block;
}

.cmp-footer-bg-echo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 5.5rem);
    color: #b8a9ff;
    opacity: 0.05;
    filter: blur(5px);
    user-select: none;
    letter-spacing: 0.15em;
    pointer-events: none;
}

.cmp-footer-brand-title {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cmp-footer-slogan {
    color: #b4a9db;
    font-size: 0.95rem;
    font-weight: 300;
}

.cmp-footer-menu {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.cmp-nav-link {
    display: inline-block;
    padding: 8px 18px;
    color: #f2efff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 169, 255, 0.16);
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    overflow-wrap: anywhere;
}

.cmp-nav-link:hover,
.cmp-nav-link:focus {
    color: #ffffff;
    background: rgba(184, 169, 255, 0.18);
    border-color: #ffd6e8;
    box-shadow: 0 0 16px rgba(184, 169, 255, 0.35);
    transform: translateY(-2px);
}

.cmp-footer-contact-card {
    max-width: 960px;
    background: #15102a;
    border: 1.5px solid rgba(242, 239, 255, 0.14);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px -10px rgba(11, 7, 26, 0.7);
}

.cmp-contact-item {
    min-width: 0;
}

.cmp-contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.18);
    border: 1px solid rgba(179, 136, 255, 0.35);
    color: #ffd166;
    font-size: 1.15rem;
}

.cmp-contact-text {
    min-width: 0;
    flex: 1;
}

.cmp-contact-label {
    font-size: 0.78rem;
    color: #7e73a8;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.cmp-contact-val,
.cmp-contact-link {
    font-size: 0.92rem;
    color: #f2efff;
    text-decoration: none;
    display: inline-block;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.cmp-contact-link:hover,
.cmp-contact-link:focus {
    color: #ffd166;
    text-decoration: underline;
}

.cmp-footer-legal-bar {
    border-color: rgba(184, 169, 255, 0.12) !important;
}

.cmp-copyright {
    font-size: 0.85rem;
    color: #7e73a8;
}

.cmp-legal-link {
    font-size: 0.85rem;
    color: #b4a9db;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cmp-legal-link:hover,
.cmp-legal-link:focus {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .cmp-footer {
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }

    .cmp-footer-brand-title {
        font-size: 1.5rem;
    }

    .cmp-nav-link {
        padding: 6px 14px;
        font-size: 0.85rem;
    }

    .cmp-footer-contact-card {
        padding: 16px;
    }
}

.ayr-body {
    background-color: var(--bg, #0c0a1a);
    color: var(--text, #f2efff);
    font-family: 'IBM Plex Sans KR', sans-serif;
    overflow-x: hidden;
}

.ayr-header-nav {
    background-color: #0c0a1a;
    border-bottom: 1px solid rgba(184, 169, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    z-index: 1030;
}

.ayr-header-nav .navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: #0c0a1a;
}

.ayr-header-nav .ayr-header-logo {
    max-width: 46px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

.ayr-header-nav .ayr-brand-text {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f2efff;
    text-decoration: none;
}

.ayr-header-nav .nav-link {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #b4a9db;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.ayr-header-nav .nav-link:hover,
.ayr-header-nav .nav-link:focus {
    color: #ffffff;
    background-color: rgba(184, 169, 255, 0.12);
}

.ayr-header-nav .dropdown-menu {
    background-color: #15102a;
    border: 1px solid rgba(184, 169, 255, 0.22);
    border-radius: 16px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    box-shadow: 0 10px 30px rgba(8, 5, 17, 0.75);
}

.ayr-header-nav .dropdown-item {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #b4a9db;
    padding: 0.6rem 1.25rem;
    transition: all 0.2s ease;
}

.ayr-header-nav .dropdown-item:hover,
.ayr-header-nav .dropdown-item:focus {
    color: #ffffff;
    background-color: rgba(184, 169, 255, 0.18);
}

.ayr-header-nav .custom-toggler {
    border: 1px solid rgba(184, 169, 255, 0.35);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    background-color: #15102a;
}

.ayr-header-nav .custom-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(124, 77, 255, 0.35);
}

.ayr-header-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(242, 239, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.ayr-header-nav .ayr-btn {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 0 16px rgba(179, 136, 255, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ayr-header-nav .ayr-btn:hover,
.ayr-header-nav .ayr-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(128, 216, 255, 0.6);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .ayr-header-nav .navbar-collapse {
        background-color: #15102a;
        padding: 1.25rem;
        border-radius: 18px;
        border: 1px solid rgba(184, 169, 255, 0.2);
        margin-top: 0.75rem;
        box-shadow: 0 12px 35px rgba(8, 5, 17, 0.8);
    }

    .ayr-header-nav .nav-link {
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }

    .ayr-header-nav .dropdown-menu {
        background-color: #0c0a1a;
        border-color: rgba(184, 169, 255, 0.15);
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

.cat-hero {
    padding: 70px 0 60px;
    background: radial-gradient(circle at 50% 30%, rgba(124, 77, 255, 0.18) 0%, #0c0a1a 75%);
    border-bottom: 1px solid rgba(184, 169, 255, 0.12);
}

.cat-hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cat-hero-title {
    font-weight: 600;
    font-size: clamp(1.85rem, 5vw, 3.25rem);
    line-height: 1.2;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.cat-hero-subtitle {
    max-width: 720px;
    color: #b4a9db;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.cat-search-box {
    max-width: 520px;
}

.cat-search-box .input-group {
    background: #15102a;
    border: 1.5px solid rgba(184, 169, 255, 0.28);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cat-search-box .input-group:focus-within {
    border-color: #c8b6ff;
    box-shadow: 0 0 20px rgba(184, 169, 255, 0.35);
}

.cat-search-icon {
    background: transparent;
    border: none;
    color: #ffd885;
    padding-left: 1.25rem;
    font-size: 1.1rem;
}

.cat-search-input {
    background: transparent;
    border: none;
    color: #f2efff;
    padding: 0.75rem 1.25rem 0.75rem 0.5rem;
    font-size: 0.95rem;
}

.cat-search-input:focus {
    background: transparent;
    box-shadow: none;
    color: #ffffff;
}

.cat-search-input::placeholder {
    color: #7e73a8;
    opacity: 1;
}

.cat-catalog-section {
    padding: 60px 0 80px;
}

.cat-section-header {
    position: relative;
}

.cat-bg-echo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: clamp(3.5rem, 12vw, 8rem);
    color: #b8a9ff;
    opacity: 0.06;
    filter: blur(8px);
    user-select: none;
    letter-spacing: 0.15em;
    pointer-events: none;
}

.cat-section-desc {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    color: #b4a9db;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.cat-filter-bar {
    margin-bottom: 2rem;
}

.cat-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(184, 169, 255, 0.22);
    color: #b4a9db;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.25s ease;
    cursor: pointer;
}

.cat-filter-btn:hover {
    background: rgba(184, 169, 255, 0.16);
    color: #ffffff;
    border-color: #ffd6e8;
}

.cat-filter-btn.active {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(124, 77, 255, 0.5);
}

.cat-game-card {
    background: #15102a;
    border: 1.5px solid rgba(242, 239, 255, 0.16);
    border-radius: 28px;
    padding: 16px;
    box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.cat-game-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 214, 232, 0.45);
    box-shadow: 0 20px 45px rgba(124, 77, 255, 0.35);
}

.cat-thumb-wrap {
    border-radius: 20px;
    aspect-ratio: 3 / 2;
    background: #1e163b;
}

.cat-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.cat-game-card:hover .cat-card-img {
    transform: scale(1.05);
    filter: brightness(0.85);
}

.cat-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 26, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cat-play-icon {
    font-size: 3rem;
    color: #ffd6e8;
    filter: drop-shadow(0 0 10px rgba(184, 169, 255, 0.8));
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.cat-game-card:hover .cat-play-overlay {
    opacity: 1;
    visibility: visible;
}

.cat-game-card:hover .cat-play-icon {
    transform: scale(1);
}

.cat-card-body {
    min-width: 0;
}

.cat-game-platform {
    font-size: 0.75rem;
    color: #ffd885;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cat-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: #f2efff;
    overflow-wrap: anywhere;
}

.cat-card-title-link {
    color: #f2efff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cat-card-title-link:hover {
    color: #ffd6e8;
}

.cat-card-desc {
    color: #b4a9db;
    font-size: 0.86rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.cat-card-bottom {
    border-color: rgba(184, 169, 255, 0.14) !important;
}

.cat-meta-date {
    font-size: 0.78rem;
    color: #7e73a8;
}

.cat-arrow-link {
    font-size: 0.86rem;
    font-weight: 500;
    color: #ffd6e8;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
    overflow-wrap: anywhere;
}

.cat-arrow-link:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.cat-no-results-icon {
    font-size: 3rem;
    color: #ffd885;
}

.cat-no-results-title {
    color: #f2efff;
    font-size: 1.3rem;
    font-weight: 600;
}

.cat-no-results-text {
    color: #b4a9db;
    font-size: 0.95rem;
}

.cat-feature-section {
    padding: 70px 0 80px;
    border-top: 1px solid rgba(184, 169, 255, 0.12);
    background: #15102a;
}

.cat-feature-lead {
    color: #b4a9db;
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.cat-feature-text {
    color: #f2efff;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cat-check-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.25);
    color: #ffd6e8;
    font-size: 0.9rem;
    margin-top: 2px;
}

.cat-info-card {
    background: linear-gradient(180deg, #1e163b 0%, #15102a 100%);
    border: 1.5px solid rgba(184, 169, 255, 0.25);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cat-info-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f2efff;
}

.cat-info-text {
    color: #b4a9db;
    font-size: 0.92rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.cmp-footer {
    background: linear-gradient(180deg, #0c0a1a 0%, #05030a 100%);
    color: #b4a9db;
    padding-top: 5rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid rgba(184, 169, 255, 0.15);
}

.cmp-footer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cmp-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #ffd166;
    opacity: 0.6;
    animation: cmpTwinkle 4s ease-in-out infinite alternate;
}

.cmp-star-1 {
    top: 20%;
    left: 15%;
    animation-delay: 0.2s;
}

.cmp-star-2 {
    top: 35%;
    right: 18%;
    animation-delay: 1.1s;
    width: 4px;
    height: 4px;
}

.cmp-star-3 {
    top: 65%;
    left: 25%;
    animation-delay: 2.3s;
}

.cmp-star-4 {
    top: 75%;
    right: 30%;
    animation-delay: 0.8s;
}

.cmp-star-5 {
    top: 15%;
    right: 45%;
    animation-delay: 1.7s;
}

.cmp-star-6 {
    top: 80%;
    left: 8%;
    animation-delay: 2.9s;
}

@keyframes cmpTwinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.3);
    }
}

.cmp-footer-cloud-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    pointer-events: none;
    overflow: hidden;
}

.cmp-footer-title-wrap {
    position: relative;
    display: inline-block;
}

.cmp-footer-bg-echo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 5.5rem);
    color: #b8a9ff;
    opacity: 0.05;
    filter: blur(5px);
    user-select: none;
    letter-spacing: 0.15em;
    pointer-events: none;
}

.cmp-footer-brand-title {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cmp-footer-slogan {
    color: #b4a9db;
    font-size: 0.95rem;
    font-weight: 300;
}

.cmp-footer-menu {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.cmp-nav-link {
    display: inline-block;
    padding: 8px 18px;
    color: #f2efff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 169, 255, 0.16);
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    overflow-wrap: anywhere;
}

.cmp-nav-link:hover,
.cmp-nav-link:focus {
    color: #ffffff;
    background: rgba(184, 169, 255, 0.18);
    border-color: #ffd6e8;
    box-shadow: 0 0 16px rgba(184, 169, 255, 0.35);
    transform: translateY(-2px);
}

.cmp-footer-contact-card {
    max-width: 960px;
    background: #15102a;
    border: 1.5px solid rgba(242, 239, 255, 0.14);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px -10px rgba(11, 7, 26, 0.7);
}

.cmp-contact-item {
    min-width: 0;
}

.cmp-contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.18);
    border: 1px solid rgba(179, 136, 255, 0.35);
    color: #ffd166;
    font-size: 1.15rem;
}

.cmp-contact-text {
    min-width: 0;
    flex: 1;
}

.cmp-contact-label {
    font-size: 0.78rem;
    color: #7e73a8;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.cmp-contact-val,
.cmp-contact-link {
    font-size: 0.92rem;
    color: #f2efff;
    text-decoration: none;
    display: inline-block;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.cmp-contact-link:hover,
.cmp-contact-link:focus {
    color: #ffd166;
    text-decoration: underline;
}

.cmp-footer-legal-bar {
    border-color: rgba(184, 169, 255, 0.12) !important;
}

.cmp-copyright {
    font-size: 0.85rem;
    color: #7e73a8;
}

.cmp-legal-link {
    font-size: 0.85rem;
    color: #b4a9db;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cmp-legal-link:hover,
.cmp-legal-link:focus {
    color: #ffffff;
    text-decoration: underline;
}

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

    .cat-hero-title {
        font-size: 1.125rem;
    }

    .ayr-title {
        font-size: 1rem;
    }

    .cat-card-title {
        font-size: 0.875rem;
    }

    .cat-catalog-section {
        padding: 40px 0 60px;
    }

    .cmp-footer {
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }

    .cmp-footer-brand-title {
        font-size: 1.5rem;
    }

    .cmp-nav-link {
        padding: 6px 14px;
        font-size: 0.85rem;
    }

    .cmp-footer-contact-card {
        padding: 16px;
    }
}


/* ===== PAGE: privacy ===== */
.policy-content { color: #b4a9db; font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; word-break: break-word; } .policy-content .policy-meta-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(184, 169, 255, 0.22); margin-bottom: 24px; } .policy-content .policy-meta-label { font-size: 0.82rem; color: #ffd885; font-weight: 500; letter-spacing: 0.04em; } .policy-content .policy-meta-date { font-size: 0.85rem; color: #f2efff; font-weight: 600; } .policy-content .policy-intro { font-size: 1.05rem; color: #f2efff; margin-bottom: 24px; line-height: 1.8; } .policy-content .policy-highlight-notice { border-radius: 20px; padding: 22px 24px; margin: 28px 0; background: linear-gradient(135deg, rgba(80, 52, 138, 0.35) 0%, rgba(21, 16, 42, 0.7) 100%); border: 1.5px solid rgba(255, 214, 232, 0.3); box-shadow: 0 10px 30px rgba(11, 7, 26, 0.5); } .policy-content .policy-notice-title { margin-bottom: 8px; color: #ffd6e8; font-size: 1.05rem; } .policy-content .policy-notice-desc { margin-bottom: 0; color: #f2efff; font-size: 0.95rem; line-height: 1.7; } .policy-content h2 { margin-top: 40px; margin-bottom: 16px; font-weight: 500; font-size: 1.45rem; line-height: 1.35; color: #f2efff; background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .policy-content p { margin-bottom: 16px; color: #b4a9db; } .policy-content ul { margin: 0 0 24px 0; padding-left: 20px; list-style-type: disc; } .policy-content li { margin-bottom: 10px; color: #b4a9db; line-height: 1.65; } .policy-content strong { color: #f2efff; font-weight: 600; } .policy-content a { color: #70e2f5; text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s ease; } .policy-content a:hover, .policy-content a:focus { color: #ffd6e8; } .policy-content .policy-contact-box { border-radius: 20px; padding: 22px 24px; margin: 24px 0; background: #15102a; border: 1.5px solid rgba(184, 169, 255, 0.25); box-shadow: 0 10px 40px -10px rgba(157, 126, 247, 0.2); } .policy-content .policy-contact-title { color: #f2efff; font-size: 1.05rem; margin-bottom: 14px; } .policy-content .policy-contact-box ul { list-style-type: none; padding-left: 0; margin-bottom: 0; } .policy-content .policy-contact-box li { margin-bottom: 8px; color: #b4a9db; } .policy-content .policy-closing-text { margin-top: 24px; } @media (max-width: 767px) { .policy-content { font-size: 0.92rem; hyphens: auto; } .policy-content h2 { font-size: 1rem; margin-top: 30px; margin-bottom: 12px; } .policy-content .policy-highlight-notice, .policy-content .policy-contact-box { padding: 16px 18px; border-radius: 16px; } .policy-content .policy-intro { font-size: 0.95rem; } }

/* ===== PAGE: terms ===== */
.policy-content { color: var(--text-dark-bg-secondary, #b4a9db); font-family: 'IBM Plex Sans KR', sans-serif; font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; word-break: keep-all; max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.policy-content .policy-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(184, 169, 255, 0.18); }
.policy-content .policy-update-badge, .policy-content .policy-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; padding: 0.35rem 0.9rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); color: #ffd885; border: 1px solid rgba(255, 216, 133, 0.3); }
.policy-content .policy-status-badge { color: #70e2f5; border-color: rgba(112, 226, 245, 0.35); }
.policy-content .policy-section { margin-bottom: 2.25rem; }
.policy-content h2 { font-size: 1.35rem; font-weight: 500; color: #f2efff; margin-bottom: 0.85rem; line-height: 1.3; background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.policy-content h3 { font-size: 1.15rem; font-weight: 500; color: #f2efff; margin-bottom: 0.75rem; line-height: 1.4; }
.policy-content p { margin-bottom: 0.9rem; color: #b4a9db; }
.policy-content strong { color: #f2efff; font-weight: 600; }
.policy-content .policy-list { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.1rem; }
.policy-content .policy-list li { margin-bottom: 0.5rem; color: #b4a9db; }
.policy-content .policy-ordered-list { list-style: decimal; padding-left: 1.4rem; margin-bottom: 1.1rem; }
.policy-content .policy-ordered-list li { margin-bottom: 0.5rem; color: #b4a9db; }
.policy-content a { color: #70e2f5; text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; }
.policy-content a:hover, .policy-content a:focus { color: #ffd6e8; text-decoration: underline; }
.policy-content .policy-contact-card { background: #15102a; border: 1.5px solid rgba(242, 239, 255, 0.2); border-radius: 20px; padding: 1.75rem; margin-top: 3rem; box-shadow: 0 10px 40px -10px rgba(157, 126, 247, 0.2); }
.policy-content .policy-contact-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.65rem; }
.policy-content .policy-contact-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: #b4a9db; }
.policy-content .policy-contact-list i { color: #ffd885; font-size: 1.05rem; }
@media (max-width: 767px) { .policy-content { padding: 1.5rem 1rem 3rem; font-size: 0.95rem; } .policy-content h2 { font-size: 16px; } .policy-content h3 { font-size: 14px; } .policy-content .policy-contact-card { padding: 1.25rem 1rem; border-radius: 16px; } }

/* ===== PAGE: disclaimer ===== */
.policy-content { color: #b4a9db; font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; word-break: keep-all; padding: 2.5rem; background: #15102a; border-radius: 28px; border: 1.5px solid rgba(242, 239, 255, 0.2); box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12); margin: 0 auto; max-width: 1040px; } .policy-content .policy-meta-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 9999px; background: rgba(255, 214, 232, 0.08); border: 1px solid rgba(255, 214, 232, 0.25); color: #ffd885; font-size: 0.85rem; font-weight: 500; margin-bottom: 2rem; letter-spacing: 0.02em; } .policy-content .policy-meta-badge i { font-size: 1rem; color: #70e2f5; } .policy-content h2 { font-size: 1.5rem; font-weight: 500; line-height: 1.35; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(184, 169, 255, 0.18); background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .policy-content h2:first-of-type { margin-top: 0; } .policy-content p { margin-bottom: 1.25rem; color: #b4a9db; text-align: justify; } .policy-content ul { list-style: none; padding-left: 0; margin-bottom: 1.5rem; } .policy-content ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; color: #b4a9db; } .policy-content ul li::before { content: '✦'; position: absolute; left: 0; top: 0; color: #70e2f5; font-size: 0.85rem; line-height: 1.8; } .policy-content strong { color: #f2efff; font-weight: 500; } .policy-content a { color: #70e2f5; text-decoration: none; font-weight: 500; transition: color 0.3s ease, text-shadow 0.3s ease; } .policy-content a:hover, .policy-content a:focus { color: #ffb3d9; text-shadow: 0 0 10px rgba(255, 179, 217, 0.5); text-decoration: underline; } @media (max-width: 767px) { .policy-content { padding: 1.25rem; border-radius: 20px; } .policy-content h2 { font-size: 16px; margin-top: 1.75rem; margin-bottom: 0.75rem; } .policy-content p, .policy-content ul li { font-size: 0.925rem; line-height: 1.65; } .policy-content .policy-meta-badge { font-size: 0.75rem; padding: 0.3rem 0.75rem; width: auto; } }

/* ===== PAGE: cookies ===== */
.policy-content { width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; color: #b4a9db; font-family: 'IBM Plex Sans KR', sans-serif; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; hyphens: auto; } .policy-content .policy-meta-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 9999px; background: rgba(184, 169, 255, 0.08); border: 1px solid rgba(184, 169, 255, 0.22); color: #ffd885; font-size: 0.85rem; font-weight: 500; margin-bottom: 28px; } .policy-content .policy-dot { width: 6px; height: 6px; border-radius: 50%; background: #70e2f5; box-shadow: 0 0 8px #70e2f5; } .policy-content .policy-intro { font-size: 1.05rem; line-height: 1.85; color: #f2efff; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid rgba(184, 169, 255, 0.15); } .policy-content h2 { color: #f2efff; font-size: 1.55rem; font-weight: 600; line-height: 1.35; margin-top: 48px; margin-bottom: 18px; letter-spacing: -0.01em; padding-bottom: 8px; border-bottom: 1px dashed rgba(184, 169, 255, 0.15); } .policy-content h3 { color: #ffd885; font-size: 1.2rem; font-weight: 500; line-height: 1.4; margin-top: 28px; margin-bottom: 12px; } .policy-content p { margin-bottom: 16px; color: #b4a9db; } .policy-content ul { margin: 0 0 24px 0; padding-left: 20px; list-style-type: disc; } .policy-content li { margin-bottom: 8px; color: #b4a9db; line-height: 1.7; } .policy-content li strong { color: #f2efff; } .policy-content a { color: #70e2f5; text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s ease; } .policy-content a:hover, .policy-content a:focus { color: #ffd6e8; text-decoration: none; } .policy-content .policy-contact-box { background: rgba(30, 22, 59, 0.65); border: 1.5px solid rgba(184, 169, 255, 0.2); border-radius: 20px; padding: 24px 28px; margin-top: 28px; box-shadow: 0 10px 30px -10px rgba(11, 7, 26, 0.5); } .policy-content .policy-contact-box p { margin-bottom: 8px; } .policy-content .policy-contact-box p:last-child { margin-bottom: 0; } .policy-content .policy-contact-box strong { color: #f2efff; margin-right: 6px; } @media (max-width: 767px) { .policy-content { padding: 24px 16px 60px; font-size: 0.95rem; } .policy-content h2 { font-size: 16px; margin-top: 36px; margin-bottom: 14px; } .policy-content h3 { font-size: 14px; margin-top: 22px; margin-bottom: 10px; } .policy-content .policy-intro { font-size: 0.95rem; margin-bottom: 28px; padding-bottom: 18px; } .policy-content .policy-contact-box { padding: 18px 18px; border-radius: 16px; } }

/* ===== PAGE: about ===== */
.about-intro-section,.about-mission-section{overflow:hidden;position:relative;background-color:var(--bg);color:var(--text)}.about-section-header{position:relative;z-index:2}.about-echo-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:clamp(3.5rem,12vw,8rem);opacity:0.06;filter:blur(8px);color:var(--text);letter-spacing:0.1em;user-select:none;pointer-events:none;z-index:-1}.about-lead-text{max-width:720px;color:var(--text-muted);font-size:1.05rem;line-height:1.75;overflow-wrap:anywhere}.about-feature-card{background:var(--surface);border:1.5px solid var(--border);border-radius:28px;padding:20px;transition:all 0.5s cubic-bezier(0.25,1,0.5,1);box-shadow:0 14px 40px -10px rgba(11,7,26,0.7),0 0 25px rgba(184,169,255,0.12)}.about-feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(157,126,247,0.35)}.about-window-frame{border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(180deg,rgba(80,52,138,0.6) 0%,rgba(21,16,42,0.95) 100%)}.about-window-frame img{width:100%;height:100%;object-fit:cover;display:block}.about-stat-pill{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:9999px;backdrop-filter:blur(10px)}.about-stat-number{font-size:1.85rem;font-weight:700;color:var(--accent);line-height:1.2}.about-stat-label{font-size:0.9rem;font-weight:400}.about-value-card{background:var(--surface);border:1.5px solid var(--border);border-radius:24px;padding:24px;transition:all 0.4s ease}.about-value-card:hover{transform:translateY(-4px);border-color:var(--accent)}.about-icon-wrapper{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,77,255,0.2) 0%,rgba(179,136,255,0.1) 100%);border:1px solid rgba(184,169,255,0.3);color:var(--accent);font-size:1.5rem}@media (max-width:767px){.about-intro-section .row.g-4,.about-mission-section .row.g-4{margin-left:0;margin-right:0}.about-stat-pill{border-radius:20px;margin-bottom:0.5rem}.about-lead-text{font-size:0.95rem;hyphens:auto}}

/* ===== PAGE: recommendations ===== */
.carp-recs-block .carp-section-header,.carp-trends-block .carp-section-header{position:relative;padding-top:20px;padding-bottom:10px}.carp-recs-block .carp-echo-bg,.carp-trends-block .carp-echo-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(3.5rem,11vw,7.5rem);font-weight:700;letter-spacing:0.08em;color:rgba(184,169,255,0.06);filter:blur(8px);user-select:none;pointer-events:none;z-index:0;line-height:1;width:100%;white-space:nowrap}.carp-recs-block .ayr-eyebrow,.carp-trends-block .ayr-eyebrow{position:relative;z-index:1;display:inline-flex;align-items:center;padding:6px 16px;border-radius:9999px;font-size:0.85rem;font-weight:600;letter-spacing:0.06em;color:var(--accent-text,#ffd885);background:rgba(255,216,133,0.1);border:1px solid rgba(255,216,133,0.25)}.carp-recs-block .ayr-title,.carp-trends-block .ayr-title{position:relative;z-index:1;font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:600;line-height:1.3;letter-spacing:-0.02em;background:linear-gradient(135deg,#ffd6e8 0%,#c8b6ff 50%,#9bf6ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.carp-recs-block .carp-header-desc,.carp-trends-block .carp-header-desc{position:relative;z-index:1;max-width:680px;color:var(--text-muted,#b4a9db);font-size:1rem;line-height:1.7}.carp-recs-block .carp-filter-controls{position:relative;z-index:1}.carp-recs-block .carp-filter-pill{background:rgba(255,255,255,0.05);color:var(--text-muted,#b4a9db);border:1.5px solid rgba(200,182,255,0.25);border-radius:9999px;padding:9px 22px;font-size:0.92rem;font-weight:500;transition:all 0.3s ease;cursor:pointer}.carp-recs-block .carp-filter-pill:hover{background:rgba(200,182,255,0.15);color:#ffffff;border-color:rgba(255,214,232,0.4);transform:translateY(-2px)}.carp-recs-block .carp-filter-pill.active{background:linear-gradient(135deg,#7c4dff 0%,#b388ff 50%,#80d8ff 100%);color:#ffffff;border-color:transparent;box-shadow:0 0 20px rgba(179,136,255,0.45)}.carp-recs-block .carp-card{background:var(--surface,#15102a);border:1.5px solid rgba(242,239,255,0.18);border-radius:28px;padding:16px;box-shadow:0 14px 40px -10px rgba(11,7,26,0.7),0 0 25px rgba(184,169,255,0.08);transition:all 0.5s cubic-bezier(0.25,1,0.5,1);overflow:hidden}.carp-recs-block .carp-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 45px rgba(157,126,247,0.3);border-color:rgba(255,214,232,0.45)}.carp-recs-block .carp-card-window{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(80,52,138,0.6) 0%,rgba(21,16,42,0.95) 100%)}.carp-recs-block .carp-media-frame{aspect-ratio:16/10;width:100%;overflow:hidden;border-radius:20px}.carp-recs-block .carp-game-img{object-fit:cover;transition:transform 0.6s cubic-bezier(0.25,1,0.5,1)}.carp-recs-block .carp-card:hover .carp-game-img{transform:scale(1.06)}.carp-recs-block .carp-card-tag{position:absolute;top:12px;left:12px;background:rgba(12,10,26,0.82);backdrop-filter:blur(10px);color:var(--accent-text,#ffd885);border:1px solid rgba(255,216,133,0.35);border-radius:9999px;padding:4px 12px;font-size:0.75rem;font-weight:600}.carp-recs-block .carp-card-body{padding-top:16px}.carp-recs-block .carp-genre-label{font-size:0.8rem;color:var(--dream-cyan,#70e2f5);font-weight:500}.carp-recs-block .carp-meta-bullet{color:rgba(184,169,255,0.35);font-size:0.8rem}.carp-recs-block .carp-meta-stat{font-size:0.82rem;color:var(--text,#f2efff);font-weight:600}.carp-recs-block .carp-card-heading{font-size:1.15rem;font-weight:600;color:var(--text,#f2efff);line-height:1.4;margin:0}.carp-recs-block .carp-card-text{font-size:0.88rem;color:var(--text-muted,#b4a9db);line-height:1.6;margin:0}.carp-recs-block .carp-card-footer{border-color:rgba(184,169,255,0.12)!important}.carp-recs-block .carp-runtime-tag{font-size:0.8rem;color:var(--text-muted,#b4a9db)}.carp-recs-block .carp-card-action{display:inline-flex;align-items:center;padding:8px 18px;border-radius:9999px;font-size:0.84rem;font-weight:600;text-decoration:none}.carp-recs-block .carp-no-results-icon{font-size:2.8rem;color:rgba(184,169,255,0.3)}.carp-trends-block{position:relative;background:var(--background-secondary,#15102a);border-top:1px solid rgba(184,169,255,0.15);border-bottom:1px solid rgba(184,169,255,0.15)}.carp-trends-block .carp-trend-feature-card{background:linear-gradient(145deg,rgba(30,22,59,0.95) 0%,rgba(15,10,32,0.98) 100%);border:1.5px solid rgba(200,182,255,0.25);border-radius:28px;box-shadow:0 15px 40px rgba(0,0,0,0.4)}.carp-trends-block .carp-feature-badge{background:rgba(184,169,255,0.15);color:var(--text,#f2efff);border:1px solid rgba(184,169,255,0.3);border-radius:9999px;padding:5px 14px;font-size:0.8rem}.carp-trends-block .carp-feature-date{color:var(--text-muted,#b4a9db);font-size:0.82rem}.carp-trends-block .carp-feature-title{font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:600;line-height:1.35;color:var(--text,#f2efff)}.carp-trends-block .carp-feature-desc{color:var(--text-muted,#b4a9db);font-size:0.95rem;line-height:1.75}.carp-trends-block .carp-metric-value{font-size:1.8rem;font-weight:700;color:var(--dream-cyan,#70e2f5);line-height:1.2}.carp-trends-block .carp-metric-label{font-size:0.8rem;color:var(--text-muted,#b4a9db);margin-top:4px}.carp-trends-block .carp-trend-item{background:rgba(30,22,59,0.65);border:1.5px solid rgba(184,169,255,0.15);border-radius:20px;transition:all 0.3s ease}.carp-trends-block .carp-trend-item:hover{background:rgba(40,28,80,0.85);border-color:rgba(200,182,255,0.35);transform:translateX(4px)}.carp-trends-block .carp-trend-icon-holder{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,77,255,0.2) 0%,rgba(112,226,245,0.2) 100%);border:1px solid rgba(184,169,255,0.3);color:var(--dream-cyan,#70e2f5);font-size:1.25rem}.carp-trends-block .carp-trend-chip{font-size:0.75rem;font-weight:600;color:var(--accent-text,#ffd885);background:rgba(255,216,133,0.12);padding:2px 8px;border-radius:9999px}.carp-trends-block .carp-trend-sub{font-size:0.8rem;color:var(--text-muted,#b4a9db)}.carp-trends-block .carp-trend-item-title{color:var(--text,#f2efff);font-size:1.08rem;font-weight:600}.carp-trends-block .carp-trend-item-text{color:var(--text-muted,#b4a9db);font-size:0.9rem;line-height:1.65}.carp-trends-block .carp-cta-banner{background:linear-gradient(135deg,rgba(40,24,85,0.9) 0%,rgba(16,10,36,0.95) 100%);border:1.5px solid rgba(255,214,232,0.3);border-radius:24px;box-shadow:0 15px 45px rgba(12,10,26,0.6)}.carp-trends-block .carp-banner-cta{padding:12px 28px;border-radius:9999px;font-size:0.92rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}.carp-trends-block .carp-banner-alt{padding:12px 26px;border-radius:9999px;font-size:0.92rem;font-weight:500;text-decoration:none;display:inline-flex;align-items:center}@media (max-width:767px){.carp-recs-block .carp-echo-bg,.carp-trends-block .carp-echo-bg{display:none}.carp-recs-block .carp-filter-controls{justify-content:center}.carp-recs-block .carp-filter-pill{padding:8px 16px;font-size:0.82rem}.carp-trends-block .carp-cta-banner{text-align:center!important}.carp-trends-block .carp-cta-banner .d-flex{justify-content:center;width:100%}}

/* ===== PAGE: leaderboard ===== */
.leaderboard-block {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
}
@media (min-width: 992px) {
  .leaderboard-block {
    padding: 100px 0;
  }
}
.leaderboard-block .leaderboard-title-wrapper {
  position: relative;
}
.leaderboard-block .leaderboard-bg-echo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c8b6ff;
  opacity: 0.05;
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.leaderboard-block .ayr-title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 500;
  background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.leaderboard-block .leaderboard-lead {
  max-width: 600px;
  color: #b4a9db;
  font-size: 1.05rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.leaderboard-block .leaderboard-tabs {
  background: rgba(21, 16, 42, 0.85);
  border: 1px solid rgba(184, 169, 255, 0.22);
  box-shadow: 0 4px 20px rgba(11, 7, 26, 0.4);
}
.leaderboard-block .leaderboard-tab-btn {
  border: none;
  background: transparent;
  color: #b4a9db;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 9999px;
  transition: all 0.3s ease;
}
.leaderboard-block .leaderboard-tab-btn.active {
  background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(179, 136, 255, 0.45);
}
.leaderboard-block .leaderboard-tab-btn:hover:not(.active) {
  color: #f2efff;
  background: rgba(255, 255, 255, 0.08);
}
.leaderboard-block .leaderboard-search-box {
  min-width: 260px;
}
.leaderboard-block .leaderboard-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #7e73a8;
  pointer-events: none;
}
.leaderboard-block .leaderboard-search-input {
  background: #15102a;
  border: 1.5px solid rgba(184, 169, 255, 0.22);
  border-radius: 9999px;
  color: #f2efff;
  padding: 10px 18px 10px 42px;
  font-size: 0.92rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.leaderboard-block .leaderboard-search-input:focus {
  background: #1e163b;
  border-color: #b388ff;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(179, 136, 255, 0.35);
}
.leaderboard-block .leaderboard-search-input::placeholder {
  color: #7e73a8;
  opacity: 1;
}
.leaderboard-block .podium-card {
  background: #15102a;
  border: 1.5px solid rgba(242, 239, 255, 0.16);
  border-radius: 28px;
  padding: 24px 20px;
  transition: all 0.4s ease;
}
.leaderboard-block .podium-first {
  background: linear-gradient(180deg, rgba(80, 52, 138, 0.55) 0%, rgba(21, 16, 42, 0.95) 100%);
  border-color: rgba(255, 209, 102, 0.5);
  transform: translateY(-10px);
}
@media (max-width: 767px) {
  .leaderboard-block .podium-first {
    transform: none;
  }
}
.leaderboard-block .podium-crown {
  display: inline-block;
  background: rgba(255, 209, 102, 0.15);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 9999px;
  font-size: 0.85rem;
  padding: 4px 14px;
  margin-bottom: 12px;
}
.leaderboard-block .podium-badge {
  display: inline-block;
  background: rgba(184, 169, 255, 0.12);
  color: #f2efff;
  border: 1px solid rgba(184, 169, 255, 0.25);
  border-radius: 9999px;
  font-size: 0.85rem;
  padding: 4px 14px;
  margin-bottom: 12px;
}
.leaderboard-block .podium-avatar-wrap {
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, rgba(200, 182, 255, 0.5), rgba(112, 226, 245, 0.5));
  display: inline-block;
}
.leaderboard-block .podium-avatar {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.leaderboard-block .champion-wrap {
  padding: 6px;
  background: linear-gradient(135deg, #ffd166, #ff80bf);
  box-shadow: 0 0 25px rgba(255, 209, 102, 0.4);
}
.leaderboard-block .podium-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f2efff;
  margin-bottom: 4px;
}
.leaderboard-block .champion-name {
  font-size: 1.45rem;
  color: #fff;
}
.leaderboard-block .podium-server {
  font-size: 0.85rem;
  color: #7e73a8;
  margin-bottom: 16px;
}
.leaderboard-block .podium-label {
  font-size: 0.85rem;
  color: #b4a9db;
}
.leaderboard-block .podium-score {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f2efff;
}
.leaderboard-block .podium-percent {
  font-size: 0.85rem;
  color: #c8b6ff;
}
.leaderboard-block .leaderboard-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
}
.leaderboard-block .leaderboard-table-card {
  background: #15102a;
  border: 1.5px solid rgba(242, 239, 255, 0.16);
  border-radius: 24px;
}
.leaderboard-block .leaderboard-table {
  color: #f2efff;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
}
.leaderboard-block .leaderboard-table thead tr th {
  color: #ffd885;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(184, 169, 255, 0.18);
  padding: 16px 20px;
  background: rgba(12, 10, 26, 0.45);
}
.leaderboard-block .leaderboard-table tbody tr td {
  border-bottom: 1px solid rgba(184, 169, 255, 0.1);
  padding: 16px 20px;
  color: #f2efff;
}
.leaderboard-block .leaderboard-table tbody tr:hover {
  background: rgba(184, 169, 255, 0.05);
}
.leaderboard-block .badge-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: #b4a9db;
}
.leaderboard-block .badge-rank.rank-1 {
  background: linear-gradient(135deg, #ffd166 0%, #ff9e00 100%);
  color: #0c0a1a;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.5);
}
.leaderboard-block .badge-rank.rank-2 {
  background: linear-gradient(135deg, #e0e0e0 0%, #a0a0a0 100%);
  color: #0c0a1a;
}
.leaderboard-block .badge-rank.rank-3 {
  background: linear-gradient(135deg, #e6a15c 0%, #a8581e 100%);
  color: #0c0a1a;
}
.leaderboard-block .row-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(184, 169, 255, 0.3);
}
.leaderboard-block .player-row-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f2efff;
}
.leaderboard-block .player-row-class {
  font-size: 0.8rem;
  color: #7e73a8;
}
.leaderboard-block .server-tag {
  font-size: 0.82rem;
  color: #b4a9db;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.leaderboard-block .score-value {
  font-weight: 600;
  font-size: 0.95rem;
  color: #f2efff;
}
.leaderboard-block .highlight-score {
  color: #ffd166;
}
.leaderboard-block .progress-col {
  min-width: 140px;
}
.leaderboard-block .progress-num {
  font-size: 0.8rem;
  color: #b4a9db;
  min-width: 32px;
}
.leaderboard-block .status-active {
  background: rgba(40, 167, 69, 0.15);
  color: #51cf66;
  border: 1px solid rgba(81, 207, 102, 0.3);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 9999px;
}
.leaderboard-block .status-idle {
  background: rgba(255, 193, 7, 0.15);
  color: #ffd43b;
  border: 1px solid rgba(255, 212, 59, 0.3);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 9999px;
}
.leaderboard-block .status-offline {
  background: rgba(108, 117, 125, 0.15);
  color: #adb5bd;
  border: 1px solid rgba(173, 181, 189, 0.3);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 9999px;
}
.leaderboard-block .leaderboard-info-note {
  background: rgba(21, 16, 42, 0.6);
  border: 1px dashed rgba(184, 169, 255, 0.25);
  border-radius: 20px;
}
@media (max-width: 767px) {
  .leaderboard-block .leaderboard-table thead {
    display: none;
  }
  .leaderboard-block .leaderboard-table,
  .leaderboard-block .leaderboard-table tbody,
  .leaderboard-block .leaderboard-table tr,
  .leaderboard-block .leaderboard-table td {
    display: block;
    width: 100%;
  }
  .leaderboard-block .leaderboard-table tbody tr {
    margin-bottom: 16px;
    border: 1px solid rgba(184, 169, 255, 0.18);
    border-radius: 18px;
    padding: 12px;
    background: rgba(30, 22, 59, 0.4);
  }
  .leaderboard-block .leaderboard-table tbody tr td {
    border: none;
    padding: 8px 6px;
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .leaderboard-block .leaderboard-table tbody tr td.rank-cell {
    display: inline-flex;
    margin-bottom: 4px;
  }
  .leaderboard-block .progress-col {
    min-width: unset;
  }
}

/* ===== PAGE: hall-of-fame ===== */
.hof-section { position: relative; background-color: #0c0a1a; overflow: hidden; }
.hof-title-echo-wrap { position: relative; display: inline-block; }
.hof-title-echo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: clamp(3.5rem, 10vw, 7rem); color: #b8a9ff; opacity: 0.06; filter: blur(8px); user-select: none; pointer-events: none; white-space: nowrap; }
.hof-subtitle { max-width: 680px; color: #b4a9db; font-size: 1.05rem; line-height: 1.6; }
.hof-controls-panel { background: rgba(21, 16, 42, 0.85); border: 1.5px solid rgba(184, 169, 255, 0.18); backdrop-filter: blur(12px); box-shadow: 0 10px 40px -10px rgba(157, 126, 247, 0.2); }
.hof-filter-btn { background: rgba(255, 255, 255, 0.05); color: #b4a9db; border: 1px solid rgba(184, 169, 255, 0.25); border-radius: 9999px; padding: 8px 18px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; }
.hof-filter-btn:hover { background: rgba(184, 169, 255, 0.2); color: #ffffff; border-color: #ffd6e8; }
.hof-filter-btn.active { background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%); color: #ffffff; border-color: transparent; box-shadow: 0 0 16px rgba(179, 136, 255, 0.45); }
.hof-search-wrap .hof-search-icon { background: rgba(15, 10, 32, 0.8); border: 1px solid rgba(184, 169, 255, 0.25); border-right: none; color: #b8a9ff; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
.hof-search-input { background: rgba(15, 10, 32, 0.8); border: 1px solid rgba(184, 169, 255, 0.25); border-left: none; color: #f2efff; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; font-size: 0.9rem; }
.hof-search-input:focus { background: rgba(20, 14, 42, 0.95); color: #ffffff; border-color: #b8a9ff; box-shadow: 0 0 12px rgba(184, 169, 255, 0.3); }
.hof-search-input::placeholder { color: #7e73a8; opacity: 1; }
.hof-window-card { background: #15102a; border: 1.5px solid rgba(242, 239, 255, 0.2); border-radius: 28px; padding: 18px; box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.hof-window-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(157, 126, 247, 0.35); border-color: rgba(255, 214, 232, 0.5); }
.hof-card-inner { background: linear-gradient(180deg, rgba(80, 52, 138, 0.4) 0%, rgba(21, 16, 42, 0.95) 100%); border-radius: 20px; padding: 14px; border: 1px solid rgba(184, 169, 255, 0.12); }
.hof-media-box { width: 100%; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: #080511; }
.hof-media-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.hof-window-card:hover .hof-media-box img { transform: scale(1.04); }
.hof-badge-tier { position: absolute; bottom: 10px; right: 10px; background: rgba(12, 10, 26, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255, 216, 133, 0.5); color: #ffd885; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 9999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.hof-season-badge { color: #ffd885; font-size: 0.8rem; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.hof-player-name { font-size: 1.35rem; font-weight: 600; color: #f2efff; letter-spacing: -0.01em; }
.hof-player-title { font-size: 0.88rem; color: #ffd885; font-weight: 500; }
.hof-stat-list { background: rgba(12, 10, 26, 0.65); border: 1px solid rgba(184, 169, 255, 0.1); border-radius: 14px; padding: 12px 14px; }
.hof-stat-row { padding: 4px 0; border-bottom: 1px dashed rgba(184, 169, 255, 0.12); font-size: 0.85rem; }
.hof-stat-row:last-child { border-bottom: none; }
.hof-stat-label { color: #7e73a8; }
.hof-stat-value { color: #f2efff; font-weight: 600; }
.hof-criteria-box { background: linear-gradient(135deg, rgba(30, 22, 59, 0.9) 0%, rgba(21, 16, 42, 0.95) 100%); border: 1.5px solid rgba(200, 182, 255, 0.28); box-shadow: 0 10px 40px -10px rgba(112, 226, 245, 0.18); }
.hof-criteria-title { font-size: 1.35rem; font-weight: 600; }
.hof-criteria-desc { color: #b4a9db; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 767px) { .hof-section { padding-top: 40px; padding-bottom: 40px; } .hof-controls-panel { padding: 14px !important; } .hof-filter-btn { flex: 1 1 auto; text-align: center; } .hof-search-wrap { width: 100%; } .hof-player-name { font-size: 1.2rem; } .hof-criteria-box { text-align: left; } }

/* ===== PAGE: contact ===== */
.cmp-contact-section {
  position: relative;
  background-color: #0c0a1a;
  color: #b4a9db;
  overflow: hidden;
}

.cmp-contact-header {
  position: relative;
  z-index: 1;
}

.cmp-contact-echo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  color: #c8b6ff;
  opacity: 0.05;
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  white-space: nowrap;
}

.cmp-section-heading {
  position: relative;
  z-index: 1;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
  overflow-wrap: anywhere;
}

.cmp-section-lead {
  position: relative;
  z-index: 1;
  max-width: 620px;
  color: #b4a9db;
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.cmp-badge-portal {
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(124, 77, 255, 0.15);
  border: 1px solid rgba(184, 169, 255, 0.3);
  color: #ffd885;
  font-size: 0.85rem;
  font-weight: 500;
}

.cmp-accent-star {
  color: #ffd166;
}

.cmp-info-card,
.cmp-form-card {
  background: #15102a;
  border: 1.5px solid rgba(242, 239, 255, 0.15);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.08);
  transition: all 0.4s ease;
}

.cmp-info-title,
.cmp-form-title {
  color: #f2efff;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cmp-info-desc,
.cmp-form-subtitle {
  color: #b4a9db;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.cmp-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124, 77, 255, 0.2);
  border: 1px solid rgba(184, 169, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9bf6ff;
  font-size: 1.2rem;
}

.cmp-contact-text {
  min-width: 0;
}

.cmp-contact-label {
  font-size: 0.8rem;
  color: #ffd885;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.cmp-contact-value,
.cmp-contact-link {
  color: #f2efff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cmp-contact-link:hover {
  color: #9bf6ff;
  text-decoration: underline;
}

.cmp-working-time {
  color: #b4a9db;
  font-size: 0.875rem;
}

.cmp-input-label {
  color: #f2efff;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.cmp-input {
  background-color: #1e163b;
  border: 1px solid rgba(184, 169, 255, 0.25);
  color: #f2efff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cmp-input:focus {
  background-color: #1e163b;
  border-color: #b8a9ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(184, 169, 255, 0.25);
}

.cmp-input::placeholder {
  color: #7e73a8;
  opacity: 1;
}

select.cmp-input option {
  background-color: #15102a;
  color: #f2efff;
}

.cmp-textarea {
  resize: vertical;
  min-height: 120px;
}

.cmp-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  background-color: #1e163b;
  border: 1.5px solid rgba(184, 169, 255, 0.4);
  cursor: pointer;
}

.cmp-checkbox:checked {
  background-color: #7c4dff;
  border-color: #b388ff;
}

.cmp-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(184, 169, 255, 0.25);
}

.cmp-consent-label {
  color: #b4a9db;
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
}

.cmp-policy-link {
  color: #9bf6ff;
  text-decoration: underline;
  font-weight: 500;
}

.cmp-policy-link:hover {
  color: #ffd6e8;
}

.cmp-submit-btn {
  border: none;
  background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 0 24px rgba(179, 136, 255, 0.45);
  transition: all 0.3s ease;
}

.cmp-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(128, 216, 255, 0.6);
  color: #ffffff;
}

@media (max-width: 767px) {
  .cmp-section-heading {
    font-size: 16px;
  }
  .cmp-info-title,
  .cmp-form-title {
    font-size: 14px;
  }
  .cmp-info-card,
  .cmp-form-card {
    padding: 20px 16px;
    border-radius: 20px;
  }
  .cmp-contact-echo {
    font-size: 2.75rem;
  }
}

/* ===== PAGE TEMPLATE: korean-games ===== */
.cmp-detail-page {
    background-color: #0c0a1a;
    color: #f2efff;
    font-family: 'IBM Plex Sans KR', sans-serif;
}

.cmp-breadcrumb-wrap .breadcrumb {
    background: transparent;
    padding: 0;
}

.cmp-breadcrumb-wrap .breadcrumb-item,
.cmp-breadcrumb-wrap .breadcrumb-item.active {
    color: #ffd885;
    font-size: 0.85rem;
    font-weight: 400;
}

.cmp-breadcrumb-wrap .breadcrumb-item+.breadcrumb-item::before {
    color: #7e73a8;
    content: "/";
}

.cmp-bread-link {
    color: #b4a9db;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cmp-bread-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.cmp-game-window-card {
    border: 1.5px solid rgba(242, 239, 255, 0.22);
    border-radius: 28px;
    background: #15102a;
    box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7), 0 0 25px rgba(184, 169, 255, 0.12);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cmp-game-toolbar {
    background: #1e163b;
    border-bottom: 1px solid rgba(184, 169, 255, 0.18);
}

.cmp-live-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #70e2f5;
    box-shadow: 0 0 8px #70e2f5;
    display: inline-block;
    flex-shrink: 0;
}

.cmp-toolbar-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
}

.cmp-ctrl-btn {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #80d8ff 100%);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.88rem;
    padding: 8px 18px;
    box-shadow: 0 0 16px rgba(179, 136, 255, 0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cmp-ctrl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(128, 216, 255, 0.6);
    color: #ffffff;
}

.cmp-iframe-wrapper {
    width: 100%;
    height: 560px;
    background: #080511;
    display: flex;
}

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

.cmp-exit-fullscreen {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99999;
    background: rgba(12, 10, 26, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 214, 232, 0.4);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transition: all 0.25s ease;
}

.cmp-exit-fullscreen:hover {
    background: #7c4dff;
    color: #ffffff;
}

.cmp-iframe-wrapper:fullscreen .cmp-exit-fullscreen,
.cmp-iframe-wrapper:-webkit-full-screen .cmp-exit-fullscreen {
    display: inline-flex;
    align-items: center;
}

.cmp-iframe-wrapper:fullscreen,
.cmp-iframe-wrapper:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.cmp-detail-card {
    background: #15102a;
    border: 1.5px solid rgba(242, 239, 255, 0.18);
    border-radius: 28px;
    box-shadow: 0 10px 30px -10px rgba(11, 7, 26, 0.7);
}

.cmp-section-title-wrap {
    position: relative;
}

.cmp-bg-echo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #b8a9ff;
    opacity: 0.05;
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
    letter-spacing: 0.1em;
}

.cmp-section-heading {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow-wrap: anywhere;
}

.cmp-sidebar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #ffd6e8 0%, #c8b6ff 50%, #9bf6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow-wrap: anywhere;
}

.cmp-accent-line {
    width: 48px;
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #ff7f50 0%, #87ceeb 100%);
}

.cmp-text-body p {
    color: #b4a9db;
    font-size: 0.98rem;
    line-height: 1.7;
    font-weight: 300;
    overflow-wrap: anywhere;
}

.cmp-key-facts-wrapper {
    background: rgba(30, 22, 59, 0.6);
    border: 1px solid rgba(184, 169, 255, 0.16);
    border-radius: 20px;
}

.cmp-facts-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd885;
    overflow-wrap: anywhere;
}

.cmp-fact-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.25);
    border: 1px solid rgba(179, 136, 255, 0.4);
    color: #9bf6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.cmp-fact-label {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

.cmp-fact-desc {
    color: #b4a9db;
    font-size: 0.88rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cmp-how-to-play {
    border-color: rgba(184, 169, 255, 0.15) !important;
}

.cmp-guide-intro {
    color: #b4a9db;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.cmp-control-card {
    background: #1e163b;
    border: 1px solid rgba(184, 169, 255, 0.15);
    border-radius: 16px;
}

.cmp-control-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 127, 80, 0.15);
    border: 1px solid rgba(255, 127, 80, 0.4);
    color: #ff7f50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.cmp-control-type {
    font-size: 0.8rem;
    color: #ffd885;
    font-weight: 500;
}

.cmp-control-action {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cmp-info-list {
    border-color: rgba(184, 169, 255, 0.15);
}

.cmp-info-row {
    border-color: rgba(184, 169, 255, 0.12) !important;
}

.cmp-info-label {
    color: #7e73a8;
    font-size: 0.88rem;
}

.cmp-info-val {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: right;
}

.cmp-compact-item {
    background: rgba(30, 22, 59, 0.5);
    border: 1px solid rgba(184, 169, 255, 0.15);
    border-radius: 20px;
    padding: 10px;
    transition: all 0.35s ease;
}

.cmp-compact-item:hover {
    background: rgba(30, 22, 59, 0.9);
    border-color: rgba(255, 214, 232, 0.4);
    transform: translateX(4px);
    box-shadow: 0 0 20px rgba(184, 169, 255, 0.2);
}

.cmp-compact-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: #080511;
    border: 1px solid rgba(184, 169, 255, 0.2);
    padding: 3px;
}

.cmp-compact-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    display: block;
}

.cmp-compact-name {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cmp-compact-dev {
    font-size: 0.78rem;
    color: #7e73a8;
}

.cmp-cta-split-card {
    background: linear-gradient(135deg, #15102a 0%, #1e163b 100%);
    border: 1.5px solid rgba(255, 214, 232, 0.3);
    border-radius: 28px;
    box-shadow: 0 14px 40px -10px rgba(11, 7, 26, 0.7);
}

.cmp-cta-title {
    color: #ffffff;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cmp-cta-desc {
    color: #b4a9db;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

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

    .cmp-detail-card {
        padding: 1.25rem !important;
    }

    .cmp-cta-split-card {
        padding: 1.5rem !important;
    }

    .cmp-cta-title {
        font-size: 1.2rem;
    }
}

/* 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%;
  }
}

/* Fix duplicate list markers site-wide */
.milestones-timeline,
.cmp-footer-menu,
.cmp-legal-links {
  list-style: none !important;
}
ul:not(.dropdown-menu):not(.navbar-nav) {
  list-style: none;
}