body {
    background: #020617;
    color: #fff;
    height: 100%;
    margin: 0;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
    width: 10%;
    margin-top: 70px;
    padding: 0px;
    transition: width 0.3s ease;
    background: rgba(2, 6, 23, 0.9);
    backdrop-filter: blur(20px);
    border-inline-end: 1px solid rgba(0, 255, 255, 0.15);
}

/* Topbar */
.topbar-left {
    gap: 18px;
}

/* Logo wrapper */
.topbar-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

/* Default */
.favicon-logo {
    display: none;
}

.main-logo {
    display: block;
}

/* HIDE COMPLETELY */
.sidebar.collapsed {
    width: 0;
    padding: 0;
    border-right: none;
    transform: translateX(-100%);
}

/* REMOVE CONTENT WHEN HIDDEN */
.sidebar.collapsed ul {
    display: none;
}

.sidebar-header {
    font-size: 22px;
    color: #0ff;
    margin-bottom: 30px;
}

.logo-text {
    transition: 0.3s;
}

.sidebar.collapsed .logo-text {
    display: none;
}

/* MENU */
.menu {
    list-style: none;
    padding: 5px;
    margin-top: 1rem;
}

.menu li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    border-radius: 10px;
}

.menu li a i {
    width: 20px;
    text-align: center;
}

.menu li.active a span {
    font-weight: 700;
    text-decoration: underline;
}

.menu li a:hover span {
    color: #0ff;
    font-weight: 700;
    text-decoration: underline;
    transition: 0.3s;
    transform: scale(1.1);
    padding-left: 5px;
}

.menu li.active a:hover span {
    color: #000;
}

/* Hide text when collapsed */
.sidebar.collapsed .menu li a span {
    display: none;
    position: absolute;
    left: 60px;
    background: #0ff;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    color: #000;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.sidebar.collapsed .menu li.active a span {
    text-decoration: underline;
    display: none;
    position: absolute;
    left: 60px;
    background: #0ff;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    color: #000;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Show text on hover when collapsed */
.sidebar.collapsed .menu li a:hover span {
    display: block;
}

/* Make parent relative for absolute span */
.sidebar.collapsed .menu li {
    position: relative;
    z-index: 1;
}

/* TOPBAR */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f172a;
    padding: 15px 20px;
    border-bottom: 1px solid #0ff;
    height: 70px;
    color: #fff;
    flex-direction: row;
    position: fixed;
    width: 100%;
    z-index: 999;
}

.topbar-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.game-footer {
    position: relative;
    color: #ccc;
    padding: 100px 20px 20px;
    overflow: hidden;
}

/* 🔥 MAIN SHAPE */
.game-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #020617;

    clip-path: polygon(0 80px,
            70% 40px,
            75% 80px,
            100% 60px,
            100% 100%,
            0 100%);

    z-index: 1;
}

/* 🔥 BORDER LAYER */
.game-footer::after {
    content: "";
    position: absolute;
    inset: 0;

    background: #0ff;
    /* 👈 BORDER COLOR */

    /* 🔥 slightly upper shape */
    clip-path: polygon(0 78px,
            70% 38px,
            75% 78px,
            100% 58px,
            100% 100%,
            0 100%);

    z-index: 0;
}


/* 🔥 Animated Glow Background */
.footer-glow {
    position: absolute;
    width: 300%;
    height: 300%;
    animation: moveGlow 10s linear infinite;
    top: -100%;
    left: -100%;
    z-index: 0;
}

/* GRID */
.footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-brand {
    display: flex;
    align-items: self-start;
    gap: 12px;
    flex-direction: column;
}

/* HEADINGS */
.footer-col h4 {
    color: #fff;
    margin-bottom: 15px;
    position: relative;
}

.footer-col h4::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #0ff;
    margin-top: 5px;
}

/* LINKS */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #888;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
}

.footer-col ul li.active a {
    color: #0ff;
    text-decoration: underline;
}

/* 🔥 Hover Animation */
.footer-col ul li a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #0ff;
    transition: 0.3s;
}

.footer-col ul li a:hover::after {
    width: 100%;
}

.footer-col ul li a:hover {
    color: #0ff;
}

/* LOGO */
.logo {
    color: #fff;
    font-size: 24px;
    text-shadow: 0 0 10px #0ff;
}

/* FOOTER BOTTOM */
.footer-bottom {
    position: relative;
    z-index: 1;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 255, 255, 0.15);
}

/* SOCIAL */
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #00f0ff;
    font-size: 16px;
    transition: 0.3s;
    text-decoration: none;
}

/* 🔥 Hover Effect */
.socials a:hover {
    background: #0ff;
    color: #000;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 0 10px #00f0ff;
}

button.btn.btn-dark.dropdown-toggle {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 10px;
}

.pozy-language-dropdown > .dropdown-toggle {
    min-width: 108px;
    min-height: 42px;
    justify-content: center;
    color: #f8fafc;
    font-size: 13px;
    line-height: 1;
    text-transform: none;
    letter-spacing: .02em;
    overflow: visible;
}

.pozy-language-dropdown > .dropdown-toggle:hover,
.pozy-language-dropdown > .dropdown-toggle:focus-visible,
.pozy-language-dropdown > .dropdown-toggle[aria-expanded="true"] {
    color: #fff;
    border-color: rgba(0, 234, 255, .55);
    background: rgba(14, 32, 54, .96);
    box-shadow: 0 0 0 3px rgba(0, 234, 255, .10);
}

.pozy-language-dropdown > .dropdown-toggle::after {
    color: #b9f7ff;
}

/* Dropdown Theme */
.profile-dropdown {
    background: #0f172a;
    border-radius: 12px;
    padding: 10px;
    min-width: 180px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.2s ease-in-out;
}

/* Dropdown Items */
.profile-dropdown .dropdown-item {
    color: #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-dropdown .dropdown-item.active {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    font-weight: 600;
}

/* Hover Effect */
.profile-dropdown .dropdown-item:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    transform: translateX(5px);
}

.notification-wrapper {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    background: linear-gradient(135deg, #ff4d6d, #ff1e4d);
    color: #fff;
    font-size: 7px;
    padding: 2px 6px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255, 0, 80, 0.6);
    display: none;
}

.friend-row {
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.friend-row:hover {
    background: rgba(0, 255, 255, 0.05);
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #00ff88;
    border-radius: 50%;
    border: 2px solid #000;
}

.friends-icon-wrapper {
    position: relative;
}

.online-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    border: 2px solid #000;
}

.top-icon {
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.top-icon-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
}

.top-icon-button:hover,
.top-icon-button:focus-visible {
    background: rgba(0, 234, 255, .1);
    outline: 2px solid rgba(0, 234, 255, .55);
    outline-offset: 1px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}

/* INPUT */
.input-pro {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: #020617;
    border: 1px solid #0ff;
    color: #fff;
}

/* SIDE PANEL */

.side-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100vh;
    background: #0f172a;
    color: #fff;
    transition: 0.35s;
    z-index: 9999;
}

.side-panel.active {
    right: 0;
}

.panel-header {
    padding: 18px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #222;
    display: flex;
    justify-content: space-between;
}

.panel-body {
    padding: 20px;
}

/* setting panel */
.settings-card {
    background: #111827;
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #1f2937;
}

/* HEADER */
.card-header {
    padding: 14px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 500;
}

/* ARROW */
.arrow {
    transition: 0.3s;
}

.settings-card.active .arrow {
    transform: rotate(90deg);
}

/* CONTENT */
.card-content {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease;
    padding: 0 14px;
}

.settings-card.active .card-content {
    max-height: 400px;
    padding: 10px 14px 14px;
}

/* SUB TITLE */
.sub-title {
    font-size: 12px;
    color: #9ca3af;
    margin: 10px 0 5px;
}

/* ITEM */
.setting-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

/* LINK STYLE */
.setting-link {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid #1f2937;
}

.setting-link:last-child {
    border-bottom: none;
}

.setting-link.danger {
    color: #ef4444;
}

.switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.switch input {
    display: none;
}

.setting-slider {
    position: absolute;
    cursor: pointer;
    background: #374151;
    border-radius: 20px;
    inset: 0;
    transition: 0.3s;
}

.setting-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: 0.3s;
}

input:checked+.setting-slider {
    background: #22c55e;
}

input:checked+.setting-slider:before {
    transform: translateX(20px);
}

/* login penel */
.login-body {
    padding: 25px;
    text-align: center;
}

/* SUBTEXT */

.login-subtext {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 25px;
}

/* GOOGLE BUTTON */

.login-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #000;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.login-google-btn img {
    width: 20px;
}

.login-google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px #fff;
}

/* DIVIDER */

.login-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #64748b;
    font-size: 12px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #334155;
}

.login-divider span {
    padding: 0 10px;
}

/* EMAIL BOX */

.login-email-box input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #020617;
    color: #fff;
    margin-bottom: 12px;
}

.login-email-box input:focus {
    outline: none;
    border-color: #00f5ff;
}

/* CONTINUE BUTTON */

.login-continue-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #00f5ff;
    color: #000;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}

.login-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px #00f5ff;
}

/* TERMS */

.login-terms {
    font-size: 11px;
    color: #64748b;
    margin-top: 20px;
}

.login-terms a {
    color: #00f5ff;
    text-decoration: none;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #333;
}

.tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: #fff;
}

.tab.active {
    border-bottom: 2px solid #0ff;
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    opacity: 0.8;
    grid-column: 1 / -1;

}

.empty-state i {
    font-size: 40px;
    margin-bottom: 15px;
    color: #9ca3af;

}

.empty-state p {

    font-size: 14px;

    color: #9ca3af;

    line-height: 1.5;

}

.friends-guest {
    text-align: center;
    padding: 40px 20px;
}

.friends-guest h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.friends-guest p {
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 25px;
}

.friends-guest .btn-neon {
    padding: 10px 25px;
    border-radius: 25px;
    background: linear-gradient(135deg, #0ff, #00bcd4);
    border: none;
    color: #fff;
}

.friends-empty-box {
    text-align: center;
    padding: 30px 15px;
    position: relative;
}

.friends-empty-bg {
    background: url('/images/friends-illustration.png') center/contain no-repeat;
    height: 120px;
    margin-bottom: 15px;
    opacity: 0.8;
}

/* Title */
.friends-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
}

/* Description */
.friends-desc {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Search */
.friends-search-wrapper {
    position: relative;
}

.friends-results {
    position: absolute;
    top: 45px;
    width: 100%;
    background: #111;
    border: 1px solid #00f5ff;
    border-radius: 10px;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    z-index: 999;
}

.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #222;
}

.friend-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: 0.3s;
    border: 1px solid transparent;
}

.notification-card:hover {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.notification-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-info .name {
    font-weight: 600;
    color: #fff;
}

.notification-info .text {
    font-size: 12px;
    opacity: 0.6;
}

.notification-actions {
    display: flex;
    gap: 6px;
}

.btn-accept {
    background: linear-gradient(135deg, #00f5ff, #00c3ff);
    border: none;
    color: #000;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-accept:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #00f5ff;
}

.btn-reject {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #aaa;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.btn-reject:hover {
    border-color: #ff4d6d;
    color: #ff4d6d;
}

.empty-notification {
    text-align: center;
    padding: 40px;
    opacity: 0.6;
}

.empty-notification i {
    font-size: 30px;
    margin-bottom: 10px;
}

#notificationPanel {
    width: 380px;
    background: linear-gradient(180deg, #0f172a, #020617);
    border-left: 1px solid rgba(0, 255, 255, 0.2);
}

#notificationPanel .panel-header {
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.friend-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.add-friend-btn {
    background: #00f5ff;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.friends-search {
    width: 100%;
    padding: 8px 35px;
    border-radius: 8px;
    border: none;
    background: #1f2937;
    color: #fff;
    margin-bottom: 30px;
}

.friends-search-icon {
    position: absolute;
    left: 10px;
    top: 28%;
    transform: translateY(-50%);
    color: #888;
}

.friends-clear-icon {
    position: absolute;
    right: 10px;
    top: 28%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    display: none;
}

.friends-clear-icon:hover {
    color: #fff;
}

/* SECTION TITLE */
.friends-list-section h6 {
    font-size: 14px;
    font-weight: 600;
    color: #cbd5f5;
    margin-bottom: 10px;
}

/* EMPTY ONLINE BOX */
.no-friends {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px 15px;
    text-align: center;
    color: #cbd5f5;
}

.no-friends span {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

/* FRIEND CARD */
.friend-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.25s ease;
}

/* HOVER EFFECT */
.friend-item-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

/* Button */

.invite-btn {
    background: #0ff;
    color: #000;
    border: none;
    padding: 8px 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.invite-btn:hover {
    transform: scale(1.05);
}

.share-profile-body {
    text-align: center;
    padding: 25px;
}

.share-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.share-desc {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 20px;
}

.share-profile-btn {
    background: transparent;
    color: #fff;
    border: 1px solid #0ff;
    padding: 8px 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.share-profile-btn:hover {
    transform: scale(1.05);
}

.copy-message {
    margin-top: 8px;
    font-size: 13px;
    color: #22c55e;
    display: none;
    font-weight: 500;
}

.qr-box {
    background: #111827;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.qr-box img {
    width: 160px;
}

.share-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-btn {
    background: #0ff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    color: #000;
    font-weight: 600;
}

.copy-btn {
    background: #1f2937;
    border: none;
    padding: 10px;
    border-radius: 8px;
    color: #fff;
}

.back-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.cancel-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
}

p.friends-desc span {
    color: #0ff;
    font-weight: 600;
}

/* SEARCH BOX */

.search-wrapper {
    position: relative;
    width: 350px;
}

.search-wrapper input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border-radius: 20px;
    border: none;
    background: #1a2338;
    color: #fff;
}

.search-icon {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    color: #0ff;
}

.clear-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    display: none;
}

.clear-icon:hover {
    color: #fff;
}

/* RESULTS DROPDOWN */

.search-results {
    position: absolute;
    width: 350px;
    background: #0f172a;
    border-radius: 10px;
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.search-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1f2937;
    cursor: pointer;
}

.search-item:hover {
    background: #1e293b;
}

.search-item img {
    width: 40px;
    border-radius: 5px;
}

.toggle-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: none;
    border: 1px solid #fff;
    color: #0ff;
    font-size: 20px;
}

.toggle-btn:hover {
    border: 1px solid #0ff;
    color: #fff;
    font-size: 20px;
}

/* BUTTON */
.btn-neon {
    background: #0ff;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 0 10px #0ff;
    transition: 0.3s;
}

.btn-neon:hover {
    transform: scale(1.05);
}

#myGamesContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.game-card-small {
    background: #0f172a;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}

.game-card-small img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.game-card-small span {
    display: none;
    font-size: 12px;
    padding: 6px;
    color: #fff;
}

.game-card-small:hover span {
    display: block;
}

.game-card-small:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #00f5ff;
}

.profile-panel {
    width: 420px;
    background: linear-gradient(180deg, #0f172a, #020617);
    color: #fff;
    padding-bottom: 40px;
}

.panel-title {
    font-size: 20px;
    font-weight: 600;
}

.profile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #020617;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}

.profile-user-info h3 {
    margin: 0;
    font-size: 16px;
}

.profile-user-info p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}

.profile-main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 30px;
    margin: 15px 0;
    text-decoration: none;
    font-weight: 600;
    background: linear-gradient(20deg, #00f5ff, #00aaff);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.profile-progress {
    margin: 20px 0;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #cbd5f5;
    margin-bottom: 5px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #1e293b;
    border-radius: 5px;
}

.progress-fill {
    width: 60%;
    height: 100%;
    background: linear-gradient(20deg, #00f5ff, #00aaff);
    border-radius: 5px;
}

.complete-profile-btn {
    text-decoration: none;
    float: inline-end;

}

.complete-profile-btn span {
    color: #fff;
    font-size: 12px;
}

.complete-profile-btn:hover span {
    text-decoration: underline;
}

.profile-section-title {
    font-size: 12px;
    color: #64748b;
    margin-top: 25px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.profile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: #cbd5f5;
    text-decoration: none;
    transition: 0.2s;
}

.profile-menu a:hover {
    background: #1e293b;
    color: #fff;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 8px;
    color: #f87171;
    text-decoration: none;
}

.avatar {
    cursor: pointer;
    border-radius: 50%;
    transition: 0.3s;
}

.avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #6366f1;
}

/* user profile */
/* COVER */
.profile-cover {
    height: 220px;
    border-radius: 20px;
    background:
        linear-gradient(120deg, #0f172a, #020617),
        url('/img/pattern.png');
    /* optional */
    background-size: cover;
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.25), transparent);
}

/* CENTER PROFILE */
.profile-top-center {
    text-align: center;
    margin-top: -70px;
}

.profile-avatar-xl {
    width: 110px;
    height: 110px;
    border-radius: 30px;

    border: 4px solid #020617;

    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}

/* TEXT */
.profile-top-center h2 {
    margin-top: 10px;
}

.location {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 0;
}

.user-status {
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.user-status.online .status-dot {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.user-status.offline .status-dot {
    background: #6b7280;
}

.user-status.online {
    color: #22c55e;
}

.user-status.offline {
    color: #9ca3af;
}

/* BUTTONS */
.profile-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.profile-actions-btn {
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: 0.3s;
    color: #fff;
    text-decoration: none;
    border: 1px solid #0ff;
}

.profile-actions-btn a {
    text-decoration: none;
    color: #fff;
}

.profile-actions-btn:hover a {
    text-decoration: underline;
    color: #0ff;
}

/* WRAPPER */
.friend-menu-wrapper {
    position: relative;
    display: inline-block;
}

/* 3 DOT BUTTON */
.menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 255, 255, 0.1);
    color: #00f5ff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.menu-btn:hover {
    background: rgba(0, 255, 255, 0.2);
}

/* DROPDOWN */
.friend-menu {
    position: absolute;
    top: 50px;
    right: 0;
    width: 200px;
    background: #2a2f45;
    border-radius: 12px;
    padding: 10px 0;
    display: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: 999;
}

/* MENU ITEM */
.menu-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* DANGER */
.menu-item.danger {
    color: #f87171;
}

.profile-body {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ACTIVE TAB */
.profile-tab.active {
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
    color: #fff;
}

/* GAME GRID */
.liked-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.profile-left {
    flex: 1;
    padding: 25px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
}

.profile-left:hover {
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
    transition: 0.3s;
}

.profile-card {
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 18px;
    padding: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);

    transition: 0.3s;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
}

/* FRIENDS CARD */
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.friend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.friend-row:hover {
    background: rgba(0, 255, 255, 0.1);
}

.friend-avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
}

.friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #0ff;
}

.online-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    border: 2px solid #000;
}

.stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    /* font-size: 13px; */
}

.stat-left {
    display: flex;
    gap: 8px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-content: center;
    color: #94a3b8
}

.icon {
    width: 40px;
    height: 40px;
    font-size: 40px;
    opacity: 0.7;
}

/* ACTIVITY */
.activity-item {
    margin-top: 15px;
    position: relative;
}

.activity-game-img {
    transition: 0.3s;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--base-unit) * 1 + 2px);
    border: 2px solid #0000;
    box-sizing: border-box;
    display: block;
    contain: layout;
    z-index: 0;
    background-color: #ffffff12;
    background-clip: padding-box;
}

b.activity-item-title {
    color: #fff;
    position: absolute;
    bottom: 5px;
    margin-bottom: calc(var(--base-unit) * 1);
    margin-left: calc(var(--base-unit) * 1);
    z-index: 4;
    font-size: var(--font-size-body-small);
    font-weight: 700;
    width: calc(100% - var(--base-unit) * 2);
    height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* TAG */
.activity-item-tag {
    position: absolute;
    background: #1a1c28;
    z-index: 4;
    top: 0px;
    padding: 8px 8px;
    border-radius: 8px;
    left: -5px;
    color: #aaadbe;
    font-size: 11px;
    font-weight: 700;
    margin-left: 5px;
    margin-top: 0px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    opacity: 1;
    transition: opacity .2s linear;
}

.activity-item-tag.popular {
    background: linear-gradient(90deg, #6366f1, #9333ea);
}

.profile-right {
    width: 260px;
}

.profile-tabs {
    display: flex;
    background: #0f172a;
    padding: 5px;
    border-radius: 50px;
    gap: 5px;
}

.profile-tab {
    flex: 1;
    border: none;
    padding: 10px;
    border-radius: 50px;
    color: #94a3b8;
    background: transparent;
    transition: 0.3s;
}

.profile-tab.active {
    background: linear-gradient(20deg, #00f5ff, #00aaff);
    ;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.profile-empty-state {
    text-align: center;
    margin-top: 80px;
}

.profile-empty-state h3 {
    font-size: 24px;
    font-weight: 600;
}

.profile-empty-state p {
    color: #94a3b8;
    margin-top: 10px;
}

.profile-game-info {
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* edit user profile */

.edit-header h2 {
    color: #fff;
    margin-bottom: 5px;
}

.edit-header p {
    color: #aaa;
    font-size: 14px;
}

/* COVER */
.edit-cover {
    position: relative;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
    background: linear-gradient(120deg, rgb(15, 23, 42), rgb(2, 6, 23)) 0% 0% / cover, url(/img/pattern.png);
}

.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    content: "";
    position: absolute;
    inset: 0px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #00f5ff;
}

.cover-upload {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #0ff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    color: #000;
    transition: 0.3s;
}

.cover-upload:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #0ff;
    border: 1px solid #0ff;
}

/* AVATAR */
.editprofile-top-center {
    text-align: center;
    margin-top: -110px;
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
}

/* AVATAR CAMERA */
.avatar-upload {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: #0ff;
    color: #000;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    width: 35px;
    height: 35px;
}

/* CARD */
.edit-card {
    margin-top: 40px;
    padding: 25px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
}

.edit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.edit-field label {
    display: block;
    font-size: 13px;
    color: #0ff;
    margin-bottom: 6px;
}

.edit-field input,
.edit-field select {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #333;
    background: #0a0a0a;
    color: #fff;
}

.edit-field input:focus,
.edit-field select:focus {
    border-color: #0ff;
    outline: none;
}

/* SAVE STATUS */
.save-status {
    margin-top: 20px;
    font-size: 13px;
    color: #0f0;
    text-align: right;
    opacity: 0.7;
}

.select2-container--default .select2-results__option--selected {
    background-color: #ddd;
    color: #000;
}

.select2-container--default .select2-selection--single {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
    border: 1px solid #333 !important;
    background: #0a0a0a !important;
    color: #fff !important;
    height: 50px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 90% !important;
}

.select2-dropdown {
    background: #0b1324 !important;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    color: #fff !important;
}



/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CONTENT */
.content {
    flex: 1;
    padding: 20px;
    width: 90%;
    margin-top: 70px;
    position: relative;
    /* z-index: 1; */
}

/* Background layer */
.content::before {
    content: "";
    position: fixed;
    /* important */
    inset: 0;

    background: url('/images/bg1.webp') center/cover no-repeat;
    opacity: 1.03;
    /* apply here */

    z-index: -2;
}

/* Dark overlay */
.content::after {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(2, 6, 23, 0.95);
    /* dark tone */

    z-index: -1;
}

h3.glow.mb-2 {
    font-size: 20px;
}

h3.glow.mb-3 {
    font-size: 24px;
    font-weight: 900;
}

/* GRID FIX */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* IMAGE */
.game-img {
    width: 100%;
    height: 100%;
}

.game-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY */

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    opacity: 0;
    transition: 0.3s;
    text-align: center;
}

.game-play-card {
    text-align: center;
    padding: 15px;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);

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

    transition: 0.3s;
    width: 190px;
}

/* HOVER EFFECT */
.game-play-card:hover {
    transform: scale(1.05);
    border-color: #00ffff;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}

/* SHOW ON HOVER */
.game-play-card:hover .game-overlay {
    opacity: 1;
}

/* TITLE */
.game-overlay h6 {
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

a.game-overlay-btn {
    text-decoration: none;
}

.game-overlay-btn {
    width: 50px;
    height: 50px;
    background: #00e5ff;
    color: #000;
    border-radius: 50%;
    font-weight: 600;
    box-shadow: 0 0 15px #00e5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s ease;
}

/* HOVER */
.game-overlay-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px #00e5ff, 0 0 30px #00e5ff;
}

/* SAME PULSE EFFECT */
.game-overlay-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #00e5ff;
    animation: pulse 2s infinite;
}

.game-overlay-btn::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    transform: translateX(-100%);
}

/* SHINE ANIMATION */
.game-overlay-btn:hover::before {
    animation: shine 1s;
}

@keyframes shine {
    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.leaderboard-card{
    background:#081320;
    border:1px solid rgba(0,255,255,.15);
    border-radius:18px;
    padding:20px;
    margin-top:30px;
}

.leaderboard-header{
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
}

.leaderboard-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.leaderboard-rank{
    width:50px;
    font-size:18px;
}

.leaderboard-user{
    flex:1;
}

.leaderboard-score{
    font-weight:bold;
    color:#00f5ff;
}

.empty-board{
    opacity:.7;
}

/* ═══ PAGE LAYOUT ═══ */
.gp-page {
    min-height: 100vh;
    padding: 16px 0 48px;
    color: #e8ecf4;
}

.gp-inner {
    /* max-width: 1380px; */
    margin: 0 auto;
    padding: 0 16px;
}

.loader{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:rgba(2,6,23,.9);
    z-index:100;
}

.pre-game-ad {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(2, 6, 23, 0.96);
}

.pre-game-ad[hidden] {
    display: none;
}

.pre-game-ad-panel {
    width: min(100%, 560px);
    display: grid;
    gap: 12px;
    padding: 16px;
    color: #e8ecf4;
    text-align: center;
    background: #071426;
    border: 1px solid rgba(0, 245, 255, 0.24);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
}

.pre-game-ad-label {
    color: #8a93aa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pre-game-ad-preview,
.pre-game-ad-slot {
    width: 100%;
    min-height: 180px;
}

.pre-game-ad-preview {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #8a93aa;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.035) 0 12px,
        rgba(255, 255, 255, 0.015) 12px 24px
    );
}

.pre-game-ad-status {
    color: #b8c0d4;
    font-size: 13px;
}

.pre-game-ad-status strong {
    color: #00f5ff;
    font-variant-numeric: tabular-nums;
}

.spinner{
    width:50px;
    height:50px;
    border:4px solid rgba(255,255,255,.2);
    border-top-color:#00f5ff;
    border-radius:50%;
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

/* gp-BREADCRUMB */
.gp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7395;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.gp-breadcrumb a {
    color: #6b7395;
    text-decoration: none;
    transition: color .2s;
}

.gp-breadcrumb a:hover {
    color: #0ff;
}

.gp-breadcrumb-sep {
    font-size: 10px;
}

.gz-page {
    min-height: 100vh;
}

/* ── TWO COLUMN LAYOUT ── */
.gz-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    margin: 0 auto;
    min-height: 100vh;
}

.gz-left {
    min-width: 0;
}

/* MAIN CONTAINER */
#gameContainer{
    display:flex;
    gap:20px;
    align-items:flex-start;
    width:100%;
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 16px;
    margin-bottom: 16px;
}

/* LEFT AD */
.gp-left-ad{
    width:160px;
    flex-shrink:0;
}

/* ════════════════════════════════════════
   LEFT: GAME PLAYER
   ════════════════════════════════════════ */

.gz-player {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    min-height: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

/* Fullscreen support */
/* .gz-player:fullscreen,
.gz-player:-webkit-full-screen {
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
} */

.gz-player:fullscreen,
.gz-player:-webkit-full-screen{

    width:100vw;
    height:100vh;
    background:#000;
}

.gz-player:fullscreen .player-wrap,
.gz-player:-webkit-full-screen .player-wrap{

    width:100%;
    height:auto;
    flex:1 1 0;
    min-height:0;
    max-width:none;
}

/* PLAYER WRAP */
.player-wrap{
    position:relative;
    width:100%;
    max-width:100%;
    margin:auto;
    overflow:hidden;
    border-radius:16px;

    height:auto;
    flex:1 1 0;
    min-height:0;
}

/* PLAY OVERLAY */
.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: linear-gradient(135deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .4) 100%);
}

.play-overlay-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    filter: brightness(.35);
    z-index: -1;
}

/* GAME IFRAME */
#gpgameFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: none;
    position: absolute;
    inset: 0;
}

/* ═══ ACTION BAR ═══ */
.action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 16px auto;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #252a38;
    color: #9ba3c0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap;
}

.action-btn:hover {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    color: #e8ecf4;
}

.action-btn.active-like {
    background: rgba(34, 197, 94, .12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, .3);
}

.action-btn.active-dislike {
    background: rgba(239, 68, 68, .12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, .3);
}

.action-btn.active-fav {
    background: rgba(249, 115, 22, .12);
    color: #0ff;
    border-color: rgba(249, 115, 22, .3);
}

.action-btn .btn-icon {
    font-size: 16px;
}

.action-sep {
    flex: 1;
}

/* Fullscreen btn */
.btn-fullscreen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #0ff;
    border: none;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.btn-fullscreen:hover {
    background: rgba(0, 255, 255, 0.66);
}

/* ════════════════════════════════════════
   LEFT: GAME INFO
   ════════════════════════════════════════ */

.gz-info {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 16px;
}

.gz-info-left{
    flex:1;
    min-width:0;
}

.gz-info-right{
    width:300px;
    flex-shrink:0;
}

.ad-between{
    margin-bottom:20px;
}

.gz-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.gz-info-head h2 {
    font-size: 20px;
    font-weight: 800;
    color: #e8e8f4;
    margin: 0;
}

.gz-info-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #8585a8;
    margin-bottom: 14px;
}

.gz-info-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gz-info-stats svg { opacity: 0.45; }

.gz-info-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

/* ══════ DETAILED SECTION ══════ */
.gz-detailed-section {
    margin-top: 28px;
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 16px;
}

.gz-content-block {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gz-content-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.gz-block-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gz-block-title::before {
    content: '';
    width: 4px;
    height: 22px;
    background: #0ff; /* Accent Green */
    border-radius: 4px;
    display: inline-block;
}

.gz-block-body {
    font-size: 14px;
    line-height: 1.8;
    color: #8b8fa3; /* Muted text */
}
.gz-block-body p {
    margin-bottom: 12px;
}
.gz-block-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gz-block-body ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
}
.gz-block-body ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #0ff;
    font-size: 16px;
    top: 0px;
}
.gz-block-body strong {
    color: #e8eaf0; /* Bright text */
    font-weight: 700;
}

/* FAQ Section */
.gz-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gz-faq-item {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 12px;
    padding: 20px 22px;
    transition: border-color 0.3s;
}
.gz-faq-item:hover {
    border-color: rgba(0, 234, 255, 0.473);
}
.gz-faq-q {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gz-faq-q::before {
    content: 'Q';
    background: rgba(6,214,160,0.15);
    color: #0ff;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 800;
}
.gz-faq-a {
    font-size: 14px;
    color: #8b8fa3;
    line-height: 1.6;
    padding-left: 32px;
}

/* Gameplay Video */
.gz-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
}
.gz-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* More Games Like This - Horizontal Mini Grid */
.gz-related-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.gz-related-card-mini {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.gz-related-card-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    border-color: #0ff;
}
.gz-related-card-mini img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: block;
    border-radius: 12px;
    border-bottom: 1px solid rgba(0, 234, 255, .15);
}
.gz-related-card-mini span {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #e8eaf0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta Info Footer */
.gz-meta-footer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid rgba(0, 234, 255, .15);
    background: #071426;
    border-radius: 12px;
    padding: 20px 22px;
}
.gz-meta-footer-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gz-meta-footer-item.full-width {
    grid-column: 1 / -1; /* Takes full width */
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 16px;
}
.gz-meta-lbl {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.gz-meta-val {
    font-size: 14px;
    color: #e8eaf0;
    font-weight: 600;
    line-height: 1.4;
}

/* ════════════════════════════════════════
   RIGHT: SIDEBAR
   ════════════════════════════════════════ */

.gz-right {
    border-left: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 16px;
}

.gz-widget {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 12px;
    overflow: hidden;
}

.gz-widget-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #e8e8f4;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
}

/* ── Leaderboard ── */
.gz-lb-list {
    max-height: 340px;
    overflow-y: auto;
}

.gz-lb-list::-webkit-scrollbar { width: 3px; }
.gz-lb-list::-webkit-scrollbar-track { background: transparent; }
.gz-lb-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.gz-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.12s;
}

.gz-lb-row:hover { background: rgba(255,255,255,0.02); }
.gz-lb-row:last-child { border-bottom: none; }

.gz-lb-rank {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #55556a;
}

.gz-lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.gz-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gz-lb-noavatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f1f34;
    color: #8585a8;
    font-size: 13px;
    font-weight: 700;
}

.gz-lb-info { flex: 1; min-width: 0; }

.gz-lb-name {
    font-size: 12px;
    font-weight: 600;
    color: #e8e8f4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gz-lb-sub {
    font-size: 10px;
    color: #55556a;
}

.gz-lb-score {
    font-size: 11px;
    font-weight: 700;
    color: #00e87b;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.gz-lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    gap: 10px;
    color: #55556a;
    font-size: 13px;
    text-align: center;
}

.gz-lb-empty p { margin: 0; line-height: 1.5; }


.gz-related-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.gz-related-card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    display:block;
}

.gz-related-card img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    display:block;
    transition:.3s ease;
}

.gz-related-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:10px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.9),
        rgba(0,0,0,0)
    );
    color:#fff;
    font-size:13px;
    font-weight:600;

    opacity:0;
    transform:translateY(10px);
    transition:.3s ease;
}

.gz-related-card:hover img{
    transform:scale(1.08);
}

.gz-related-card:hover .gz-related-overlay{
    opacity:1;
    transform:translateY(0);
}

.gz-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 16px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.15s;
}

.gz-badge-cat { background: rgba(0,232,123,0.1); color: #00e87b; border: 1px solid rgba(0,232,123,0.15); }
.gz-badge-cat:hover { background: rgba(0,232,123,0.18); }
.gz-badge-ori { background: rgba(249,115,22,0.08); color: #f97316; border: 1px solid rgba(249,115,22,0.15); }
.gz-badge-mp { background: rgba(59,130,246,0.08); color: #3b82f6; border: 1px solid rgba(59,130,246,0.15); }
.gz-badge-kid { background: rgba(168,85,247,0.08); color: #a855f7; border: 1px solid rgba(168,85,247,0.15); }

.gz-lb-top { background: rgba(251,191,36,0.03); }

/* ════════════════════════════════════════
   MODALS
   ════════════════════════════════════════ */

.gz-modal {
    position: fixed;
    inset: 0;
    z-index: 10120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.gz-modal.open { opacity: 1; pointer-events: all; }

/* Portal-aware game modal. The mobile player uses z-index 10050 and the
   More-actions sheet uses 10080, so action dialogs must sit above both. */
.gz-modal.game-modal-portal {
    z-index: 10120 !important;
}

#gamePlayer > .gz-modal.game-modal-portal,
#gamePlayer:fullscreen > .gz-modal.game-modal-portal,
#gamePlayer:-webkit-full-screen > .gz-modal.game-modal-portal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 10120 !important;
}

#gamePlayer > .gz-modal.game-modal-portal .gz-modal-box {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gz-modal-box {
    background: #111119;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
}

.gz-modal-center { text-align: center; }

.gz-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #e8e8f4;
    margin-bottom: 14px;
}

.gz-modal-sub {
    font-size: 12px;
    color: #8585a8;
    margin-bottom: 16px;
    margin-top: -8px;
}

.gz-share-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.gz-share-url {
    flex: 1;
    background: #18182a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 12px;
    color: #8585a8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gz-share-copy {
    background: #00e87b;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.gz-share-copy:hover { opacity: 0.85; }

.gz-share-socials {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.gz-ss {
    flex: 1;
    padding: 8px;
    border-radius: 7px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.gz-ss:hover { opacity: 0.85; }
.gz-ss-x { background: #18182a; color: #e8e8f4; border: 1px solid rgba(255,255,255,0.06); }
.gz-ss-fb { background: rgba(59,130,246,0.12); color: #60a5fa; }
.gz-ss-wa { background: rgba(34,197,94,0.12); color: #4ade80; }

.gz-modal-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    color: #8585a8;
    padding: 8px;
    border-radius: 7px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    transition: all 0.15s;
}

.gz-modal-close:hover { border-color: rgba(255,255,255,0.1); color: #e8e8f4; }

.gz-rate-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 16px 0;
}

.gz-star {
    font-size: 32px;
    color: #2a2a3a;
    cursor: pointer;
    transition: all 0.12s;
}

.gz-star:hover, .gz-star.active {
    color: #f97316;
    transform: scale(1.12);
}

/* ── TOAST ── */
.gz-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(70px);
    background: #18182a;
    border: 1px solid rgba(255,255,255,0.1);
    color: #e8e8f4;
    padding: 10px 22px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

.gz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ GAME INFO SECTION ═══ */
.game-info-section {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 12px;
    padding: 20px 22px;
    margin-top: 14px;
}

.game-info-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.game-info-thumb {
    width: 70px;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.game-info-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}

.game-stats-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.gs-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6b7395;
}

.gs-item i {
    font-size: 14px;
}

.gs-item.rating {
    color: #eab308;
    font-weight: 600;
}

/* BADGES */
.gp-game-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.badge-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}

.gp-badge-category {
    background: rgba(99, 102, 241, .12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, .2);
}

.gp-badge-original {
    background: rgba(249, 115, 22, .1);
    color: #0ff;
    border: 1px solid rgba(0, 255, 255, 0.66);
}

.gp-badge-multi {
    background: rgba(34, 197, 94, .12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, .2);
}

.badge-tag:hover {
    filter: brightness(1.2);
}

/* DESCRIPTION */
.gp-game-desc {
    font-size: 14px;
    color: #9ba3c0;
    line-height: 1.7;
    margin: 12px 0;
}

.gp-game-desc.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    color: #0ff;
    font-size: 13px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* TAGS */
.game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.game-tag {
    padding: 4px 10px;
    background: #1e2230;
    border: 1px solid #252a38;
    border-radius: 6px;
    font-size: 12px;
    color: #aab4cc;
    text-decoration: none;
    transition: all .2s;
}

.game-tag:hover {
    color: #0ff;
    border-color: #0ff;
}

/* GAME META TABLE */
.meta-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #0ff;
}

.meta-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.meta-key {
    font-size: 11px;
    color: #6b7395;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 500;
}

.meta-val {
    font-size: 13px;
    color: #e8ecf4;
    font-weight: 500;
}

/* ═══ RIGHT COLUMN ═══ */
.gp-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* RELATED GAMES */
.related-card {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 12px;
    overflow: hidden;
}

.related-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 14px 14px 10px;
    border-bottom: 1px solid #0ff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-list {
    display: flex;
    flex-direction: column;
}

.related-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none;
    transition: background .15s;
    border-bottom: 1px solid #1a1d27;
}

.related-item:last-child {
    border-bottom: none;
}

.related-item:hover {
    background: rgba(249, 115, 22, .04);
}

.related-thumb {
    width: 56px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: #252a38;
    flex-shrink: 0;
}

.related-info {
    flex: 1;
    min-width: 0;
}

.related-name {
    font-size: 13px;
    font-weight: 500;
    color: #e8ecf4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-cat {
    font-size: 11px;
    color: #6b7395;
    margin-top: 2px;
}

/* ═══ AD BLOCKS ═══ */
.ad-block {
    background: #161920;
    border: 1px solid #252a38;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* Local placeholder */
.ad-placeholder {
    background: repeating-linear-gradient(45deg, #1a1d27, #1a1d27 10px, #1e2230 10px, #1e2230 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7395;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
    border: 1px dashed #252a38;
    border-radius: 10px;
}

.ad-placeholder-icon {
    font-size: 20px;
    opacity: .5;
}

/* Shared portal advertising: display, commercial and rewarded placements. */
.pozy-ad {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 100%;
    overflow: hidden;
    color: #6b7395;
    background: repeating-linear-gradient(
        45deg,
        #1a1d27,
        #1a1d27 10px,
        #1e2230 10px,
        #1e2230 20px
    );
    border: 1px dashed #252a38;
}

.pozy-ad__preview {
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
}

.pozy-ad__icon {
    font-size: 18px;
    opacity: .55;
}

.pozy-ad__preview small {
    opacity: .6;
}

.pozy-ad__provider,
.pozy-ad__fallback {
    width: 100%;
    height: 100%;
}

.pozy-ad--728x90 {
    width: min(100%, 728px);
    height: 90px;
}

.pozy-ad--300x250 {
    width: 300px;
    height: 250px;
}

.pozy-ad--fluid {
    width: 100%;
    min-height: 180px;
}

.pozy-ad--responsive-banner {
    width: min(100%, 970px);
    height: 90px;
}

.footer-ad {
    z-index: 1;
    margin: 24px auto;
}

@media (max-width: 600px) {
    .pozy-ad--responsive-banner {
        width: 100%;
        height: 100px;
    }

    .footer-ad {
        margin-block: 16px;
    }
}

/* AD SIZES */
.ad-160x600 {
    width: 160px;
    height: 600px;
}

.ad-300x250 {
    width: 300px;
    height: 250px;
}

.ad-728x90 {
    width: 100%;
    height: 90px;
}

.ad-320x100 {
    width: 100%;
    height: 100px;
}

/* SHARE MODAL */
.share-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .7);
    align-items: center;
    justify-content: center;
}

.share-modal.open {
    display: flex;
}

.share-box {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 14px;
    padding: 24px;
    width: 410px;
    max-width: 90vw;
    animation: fadeUp .25s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.share-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}

.share-url-wrap {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.share-url {
    flex: 1;
    background: #1e2230;
    border: 1px solid #252a38;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: #9ba3c0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-copy {
    background: #0ff;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.share-copy:hover {
    background: rgba(0, 255, 255, 0.66);
}

.share-socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.share-soc {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: filter .2s;
    flex: 1;
    justify-content: center;
    color: #fff;
}

.share-soc:hover {
    filter: brightness(1.1);
}

.share-soc.twitter {
    background: #1d9bf0;
}

.share-soc.facebook {
    background: #1877f2;
}

.share-soc.whatsapp {
    background: #25d366;
}

.share-close {
    width: 100%;
    padding: 9px;
    background: transparent;
    border: 1px solid #252a38;
    border-radius: 8px;
    color: #6b7395;
    font-size: 13px;
    cursor: pointer;
}

.share-close:hover {
    color: #e8ecf4;
}

/* RATING MODAL */
.rate-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .7);
    align-items: center;
    justify-content: center;
}

.rate-modal.open {
    display: flex;
}

.rate-box {
    background: #071426;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 14px;
    padding: 28px;
    width: 340px;
    max-width: 90vw;
    text-align: center;
    animation: fadeUp .25s ease;
}

.rate-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.rate-star {
    font-size: 36px;
    cursor: pointer;
    filter: grayscale(1) opacity(.4);
    transition: all .15s;
}

.rate-star:hover,
.rate-star.active {
    filter: none;
    transform: scale(1.15);
}

/* TOAST */
.gp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e2230;
    border: 1px solid #252a38;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #e8ecf4;
    z-index: 9999;
    opacity: 0;
    transition: all .3s;
    white-space: nowrap;
    pointer-events: none;
}

.gp-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Fullscreen */
#gameContainer:fullscreen .action-bar {
    display: none !important;
}

#gameContainer:-webkit-full-screen .action-bar {
    display: none !important;
}

.game-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:linear-gradient(145deg, rgb(2, 6, 23), rgb(15, 23, 42));;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:12px 16px;
    margin-top:8px;
    flex:0 0 auto;
}

.toolbar-info{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    flex:1 1 auto;
}

.toolbar-thumb{
    width:68px;
    height:auto;
    border-radius:12px;
    object-fit:contain;
    flex-shrink:0;
}

.toolbar-content{
    min-width:0;
}

.toolbar-content h1{
    margin:0;
    color:#fff;
    font-size:18px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.toolbar-content span{
    color:#8a93aa;
    font-size:13px;
}

.toolbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    flex:0 1 auto;
    min-width:0;
}

/* GAME PLAYER */
.game-player {
    background: #020617;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #1e293b;
}

/* PREVIEW AREA */
.game-preview {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.game-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}


/* THUMBNAIL */
.game-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    opacity: 1;
    z-index: 1;
    filter: blur(4px) brightness(0.6);
}

/* BACKGROUND IMAGE */
.game-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px) brightness(0.5);
    transform: scale(1.1);
}

/* CENTER BOX */
.game-center {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* SMALL IMAGE */
.game-center-img {
    width: 120px;
    height: auto;
    border-radius: 20px;
    margin-bottom: 15px;

    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

/* TITLE */
.game-card-title {
    font-size: 18px;
    color: #fff;
}

.game-play-btn {
    width: 120px;
    height: 50px;
    border-radius: 999px;
    background: #00e5ff;
    color: #000;
    border: none;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
    margin: 10px auto;
    box-shadow: 0 0 25px #00e5ff;
    transition: 0.3s ease;
    position: relative;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* PLAY ICON */
.game-play-btn::before {
    font-size: 24px;
}

/* TEXT */
.game-play-btn span {
    font-size: 14px;
}

/* HOVER */
.game-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #00e5ff, 0 0 40px #00e5ff;
}

/* PULSE EFFECT */
.game-play-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid #00e5ff;
    animation: pulse1 2s infinite;
}

@keyframes pulse1 {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* IFRAME */
#gameFrame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    display: none;
    z-index: 5;
}

/* GAME INFO */
.game-info {
    background: linear-gradient(145deg, #020617, #0f172a);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* META */
.game-meta span {
    margin-right: 12px;
    font-size: 14px;
    color: #94a3b8;
}

.rating {
    color: #facc15;
    font-weight: 600;
}

/* BADGES */
.game-badges .badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 6px;
}

/* CATEGORY */
.badge-category {
    background: #3b82f6;
}

/* ORIGINAL */
.badge-original {
    background: #22c55e;
}

/* MULTIPLAYER */
.badge-multi {
    background: #06b6d4;
}

/* DESCRIPTION */
.game-desc {
    color: #cbd5f5;
    font-size: 15px;
    line-height: 1.6;
}

/* TAGS */
.tag {
    display: inline-block;
    background: #111827;
    border: 1px solid #1f2937;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin: 4px;
    color: #9ca3af;
    transition: 0.3s;
}

.tag:hover {
    background: #2563eb;
    color: #fff;
}

/* SHARE BUTTON */
.btn-share {
    background: #0ff;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    transition: 0.3s;
}

.btn-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px #00ffff;
}

/* GAME STATS DESIGN */
.game-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    margin-top: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
}

.react-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    padding: 8px 16px;
    border-radius: 30px;
    cursor: pointer;
    color: #fff;
    transition: 0.3s;
    position: relative;
}

.react-btn:hover {
    background: #0ff;
    color: #000;
    transform: translateY(-2px);
}

.fullscreen-btn {
    margin-left: auto;
    background: #0ff;
    color: #000;
    border: none;
    padding: 8px 18px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.fullscreen-btn:hover {
    transform: scale(1.05);
}

/* TOOLTIP */
.react-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}

/* FULLSCREEN MODE */
body.game-fullscreen .sidebar,
body.game-fullscreen .navbar {
    display: none !important;
}

body.game-fullscreen #gameContainer {
    width: 100%;
}

/* RIGHT SIDE */
.related-games {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 600px;
    overflow-y: auto;
}

/* RELATED ITEM */
.related-item {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: #fff;

    background: #0f172a;
    padding: 8px;
    border-radius: 10px;
    transition: 0.3s;
}

.related-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.related-item span {
    font-size: 13px;
}

.related-item:hover {
    background: #1e293b;
}


/* ===== WRAPPER ===== */
.main-wrapper {
    display: flex;
    flex: 1;
}

.game-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    transition: 0.3s;
}

/* FULL CLICK AREA */
.game-link {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* TITLE */
.game-cat-title {
    position: absolute;
    bottom: 0;
    padding: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    z-index: 4;
    display: none;
}

/* IMAGE */
.game-img {
    width: 100%;
    display: block;
    transition: 0.3s;
}

/* PREVIEW */
.game-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
    z-index: 2;
}

.game-card:hover .game-frame {
    display: block;
}

/* Row Layout */
.alphabet-row {
    display: flex;
    align-items: center;
    gap: 50px;
    padding-bottom: 15px;
}

/* Left Letter */
.alphabet-letter {
    width: 60px;
    font-size: 28px;
    font-weight: bold;
    color: #0ff;
    border-inline-end: 1px solid rgba(0, 255, 255, 0.2);
}

/* Right Tags */
.alphabet-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Tag Style */
.tag-item {
    background: linear-gradient(145deg, rgb(2, 6, 23), rgb(15, 23, 42));
    border: 1px solid #0ff;
    padding: 10px 15px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
    width: 285px;
    max-width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tag-item:hover {
    background: #0ff;
    color: #000;
    box-shadow: 0 0 8px #0ff;
}

.tag-item:hover .tag-name {
    text-decoration: underline;
    padding-left: 10px;
    transition: 0.9s;
}

.custom-breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 10px;
}

.custom-breadcrumb .breadcrumb-item a {
    color: #0ff;
    text-decoration: none;
    font-size: 12px;
}

.custom-breadcrumb .breadcrumb-item a:hover {
    color: #0ff;
    text-decoration: underline;
}

.custom-breadcrumb .breadcrumb-item.active {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}

.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: #0ff;
    content: var(--bs-breadcrumb-divider, ">>");
}

.breadcrumb {
    display: flex;
    flex-direction: row;
    align-content: space-between;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: baseline;
}

/* ABOUT */
.about-body {
    margin: 0;
    background: #050c1a;
    color: #ffffff;
}

/* HEADER */
.about-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    background: #0b1628;
    border-bottom: 1px solid #00e5ff;
    max-height: 80px;
}

.about-header .logo {
    font-size: 22px;
    font-weight: bold;
    color: #00e5ff;
    text-shadow: 0 0 10px #00e5ff;
}

.about-header nav a {
    color: #9fb3c8;
    margin-left: 25px;
    text-decoration: none;
    transition: 0.3s;
}

.about-header nav a:hover,
.about-header nav .active {
    color: #00e5ff;
}

.about-page {
    color: #fff;
}

/* HERO */
.about-hero {
    padding: 80px 20px;
    background: linear-gradient(90deg, #0a0f2c, #020617);
}

.about-hero h1 {
    font-size: 48px;
    font-weight: bold;
    color: #00eaff;
}

.about-hero p {
    color: #aaa;
}

/* SECTIONS */
.about-section {
    padding: 60px 0;
}

.about-img {
    max-width: 350px;
}

/* FEATURES */
.features-section {
    background: #020617;
    padding: 60px 0;
}

.feature-card {
    background: #0a0f2c;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #0ff;
    transition: 0.3s;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 20px #00eaff;
}

/* STATS */
.stats-section {
    padding: 60px 0;
    background: #0a0f2c;
}

.stats-section h3 {
    font-size: 36px;
    color: #00eaff;
}

/* CTA */
.about-cta {
    padding: 80px 20px;
}

/* CTA BUTTON */
.btn-play {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    border-radius: 50px;
    background: #00f5ff;
    color: #000;
    font-weight: 600;
    transition: 0.3s;
    box-shadow: 0 0 20px #00f5ff80;
}

.btn-play:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 35px #00f5ff;
}

/* FOOTER */
/* ===== FOOTER ===== */
.gh-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 60px 48px 40px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.gh-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

img.footer-logo {
    height: 70px;
    width: 100%;
}

.footer-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #00f5ff, var(--neon-purple));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.footer-brand span {
    font-weight: 700;
    color: white;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #00f5ff;
}

.footer-copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.2);
}

/* All categories */
.categories-page {
    padding: 16px;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.categories-card {
    border-radius: 16px;
    background: linear-gradient(145deg, rgb(2, 6, 23), rgb(15, 23, 42));
    color: #fff;
    border: 1px solid #0ff;
    box-shadow: var(--shadow-mid);
    font-size: 14px;
    transition: 0.6s;
    text-decoration: none;
    font-weight: 500;
    display: grid;
    grid-auto-flow: row dense;
    padding: 0;
    grid-gap: var(--cellSpacing);
    grid-template-columns: repeat(var(--gridTemplateColumns, 2), 115px);
    grid-template-rows: repeat(auto-fill, 94px);
    list-style-type: none;
    align-content: center;
    justify-content: start;
    align-items: center;
    justify-items: center;
}

.categories-card:hover {
    transform: scale(1.04) translateY(-4px);
    transition-duration: .3s;
    box-shadow: 0 12px 16px 8px rgba(0, 255, 255, 0.12);
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.cat-icon img {
    width: 90px;
    height: 90px;
    object-fit: none;
}

.categories-card:hover .cat-icon img {
    transform: rotate(6.282rad);
    transition: 0.6s;
}

.categories-card span {
    font-weight: 600;
    font-size: 16px;
    padding: 0 8px;
    letter-spacing: 1px;
    text-transform: uppercase;

    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    text-align: center;
}

.categories-card:hover span {
    color: #0ff;
}

.categories-info {
    margin-top: 40px;

    background: linear-gradient(145deg, #020617, #0f172a);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.categories-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.categories-info p {
    color: #cbd5f5;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* right icons */
.categories-icons {
    display: grid;
    grid-template-columns: repeat(2, 60px);
    gap: 25px;
}

.categories-icons span {
    width: 60px;
    height: 60px;
    background: #0ff;
    border-radius: 14px;
    display: flex;
}

.categories-icons span span {
    width: 35px;
    height: 35px;
    background: #fff;
    display: block;
    margin: auto;
}

/* home screen UI */
/* FEATURED GRID */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 0;
    padding: 0;
}

/* GRID ITEM */
.featured-col {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* CARD */
.featured-card {
    position: relative;
    display: block;
    width: 100%;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
}

/* BIG LEFT */
.featured-col:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.featured-col:nth-child(1) .featured-card {
    height: 250px;
}

/* BIG MIDDLE */
.featured-col:nth-child(6) {
    grid-column: 5 / span 2;
    grid-row: 1 / span 2;
}

.featured-col:nth-child(6) .featured-card {
    height: 250px;
}

/* IMAGE */
.featured-card img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    aspect-ratio: inherit;
}

/* HOVER CARD EFFECT */
.featured-col:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.15);
    z-index: 10;
}

/* IMAGE ZOOM */
.featured-col:hover img {
    transform: scale(1.03);
}

/* OVERLAY */
.featured-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    padding: 15px;
    border-radius: 20px;
}

/* SHOW OVERLAY ON HOVER */
.featured-col:hover .featured-overlay {
    opacity: 1;
}

/* TITLE */
.featured-overlay h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

/* PLAY BUTTON */
.game-overlay-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #0ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    backdrop-filter: blur(6px);
}

/* ==========================================
   RECOMMENDED GAMES GRID (POKI STYLE)
========================================== */
.game-recommended-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Main grid jaisa 12 columns */
    gap: 6px;
    margin-bottom: 40px;
}

/* SINGLE CARD */
.rec-card {
    position: relative;
    grid-column: span 2; /* ✅ Har card 2 column lega (Normal size) */
    aspect-ratio: 1 / 1; /* ✅ Perfect Square */
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    display: block;
    transition: all 0.25s ease;
}

/* IMAGE */
.rec-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.3s ease;
}

/* IFRAME PREVIEW */
.rec-card .game-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
    z-index: 2;
    pointer-events: none;
}

/* HOVER EFFECTS */
.rec-card:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.rec-card:hover img {
    transform: scale(1.02);
}

.rec-card:hover .game-frame {
    display: block;
}

/* MAIN GRID */
.game-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: 6px;
    grid-auto-flow: dense;
    min-height: 500px;
    contain: layout;
}

/* BASE */
.home-game-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    transition: all 0.3s ease;
}

.home-game-card .game-frame {
    pointer-events: none;
}

/* Render the discovery ad as a genuine large tile inside the game grid. */
.game-grid > .home-grid-ad {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    contain: layout paint;
}

.game-grid > .home-grid-ad.big,
.game-grid > .home-grid-ad.wide {
    grid-column: span 2;
    grid-row: span 2;
}

.game-grid > .home-grid-ad .pozy-ad__preview,
.game-grid > .home-grid-ad .pozy-ad__provider,
.game-grid > .home-grid-ad .pozy-ad__fallback {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* SIZES */
.home-game-card.small {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1;
}

.home-game-card.wide {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}

/*
.home-game-card.tall {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
} */

.home-game-card.big {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}

/* IMAGE */
.home-game-card img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
/* HOVER */
.home-game-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 30px rgba(0, 245, 255, 0.3);
    z-index: 2;
}

.home-game-card:hover .game-frame {
    display: block;
    pointer-events: none;
}

.game-card:hover .overlay {
    opacity: 1;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    transition: 0.3s;
}

.home-game-card:hover .overlay {
    opacity: 1;
}

/* SECTION GRID */
.category-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 0 0;
    padding: 25px 10px 15px;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.container-fluid > .home-section-title {
    margin: 0 0 16px !important;
    padding: 0;
    line-height: 1.35;
}

/* CARD */
.category-card {
    position: relative;
    background: linear-gradient(145deg, #020617, #0f172a);
    border-radius: 16px;
    box-shadow: rgba(0, 255, 255, 0.12) 0px 6px 8px 4px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
    backdrop-filter: blur(8px);
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    border: none;
    /* No static border */
}

/* SVG overlay */
.category-card svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Clicks go through */
    border-radius: 16px;
}

/* Animated line */
.category-card .line {
    fill: transparent;
    stroke: #00f5ff;
    /* Neon border color */
    stroke-width: 2px;
    stroke-linejoin: round;

    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    /* Hidden by default */
    opacity: 0;
    /* Hidden */
    transition: stroke-dashoffset 0.3s linear, opacity 0.3s ease;
    animation: svgAnimation 3s linear infinite;
    animation-play-state: paused;
    /* paused by default */
}

/* Hover: show border & animate */
.category-card:hover .line {
    opacity: 1;
    stroke-dashoffset: 0;
    animation-play-state: running;
}

/* Keyframes: simple dash offset animation */
@keyframes svgAnimation {
    0% {
        stroke-dashoffset: 1200;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


/* ICON */
.cat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
}

.cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* TITLE */
.category-card h4 {
    font-size: 13px;
    color: #e5e7eb;
}

/* HOVER */
.category-card:hover {
    transform: scale(1.04) translateY(-4px);
    transition-duration: 0.3s;
}

.category-card:hover h4 {
    color: #00f5ff;
}

.about-platform,
.categories,
.free-gaming,
.about-team,
.developers {
    color: #e5e7eb;
    /* light text for dark bg */
}

h3,
h4,
h5 {
    color: #00f5ff;
    /* neon/attention-grabbing */
}

.category-card:hover {
    box-shadow: 0 0 15px #00f5ff;
}

h3.text-3xl.font-bold.mb-4 {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
}

h4.text-2xl.font-semibold.mt-6.mb-3 {
    font-size: 22px;
    font-weight: 600;
}

h5.text-xl.font-medium.mt-4.mb-2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* META */
.game-meta {
    padding: 10px;
}

.game-meta h6 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ACTIVE MENU */
.sidebar a.active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 12px;
    transition: 0.3s;
    color: #cbd5e1;
}

.sidebar a:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #00f5ff;
}

/* Active */
.sidebar li.active a {
    background: #00f5ff;
    color: #000 !important;
    font-weight: 600;
}

#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* PLAY BUTTON */
.play-btn {
    padding: 6px 16px;
    width: 90px;
    height: 50px;
    background: #00e5ff;
    color: #000;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 0 15px #00e5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s ease;
}

.play-btn::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    transform: translateX(-100%);
}

.play-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid #00e5ff;
    animation: pulse 2s infinite;
}

.game-card:hover .play-btn {
    opacity: 1;
}

html {
    scroll-behavior: smooth;
}

/* TRENDING GRID */
.trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.trend-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 180px;
}

.trend-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}

.trend-card:hover img {
    transform: scale(1.1);
}

.trend-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: #fff;
}

/* CARD */
.cat-card {
    padding: 10px 20px;
    border-radius: 50px;
    background: #0ff;
    color: #000;
    font-size: 14px;
    white-space: nowrap;
    transition: 0.3s;
    text-decoration: none;
    font-weight: 500;
}

/* HOVER EFFECT */
.cat-card:hover {
    transform: scale(1.1);
    font-weight: 900;
    border: 1px solid #0ff;
    background: none;
    color: #0ff;
}

/* ANIMATION */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* SIZES */
.small {
    grid-column: span 1;
    grid-row: span 1;
}

.wide {
    grid-column: span 2;
    grid-row: span 1;
}

.tall {
    grid-column: span 1;
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}

/* IMAGE */
/* HOVER EFFECT */
.bento-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5);
}

.bento-item:hover img {
    transform: scale(1.1);
}


/* About US page content */

.hero {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 234, 255, 0.2), transparent);
    animation: pulse2 4s infinite;
}

@keyframes pulse2 {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.glow {
    font-size: 50px;
    color: #00eaff;
    text-shadow: 0 0 20px #00eaff;
}

/* ===== CUSTOM CURSOR ===== */
.cursor-dot {
    width: 8px;
    height: 8px;
    background: #00f5ff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.1s;
    mix-blend-mode: difference;
}

.cursor-ring {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(0, 240, 255, 0.4);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    transition: all 0.15s ease-out;
}

/* ===== HERO ===== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-glow-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15), transparent 70%);
    top: -200px;
    right: -100px;
    animation: heroFloat 12s ease-in-out infinite;
}

.hero-glow-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgb(0 170 255 / 15%), transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: heroFloat 15s ease-in-out infinite reverse;
}

.hero-glow-3 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #67e8f926, transparent 70%);
    top: 40%;
    left: 50%;
    animation: heroFloat 10s ease-in-out infinite 3s;
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -40px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 30px) scale(0.95);
    }
}

.floating-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.float-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.12);
    transition: all 0.5s ease;
}

.float-icon::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg,
            rgba(0, 245, 255, 0.25) 0%,
            transparent 40%,
            transparent 60%,
            rgba(0, 170, 255, 0.15) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s;
}

.float-icon:hover::before {
    opacity: 1;
}

.float-icon::after {
    content: '';
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 245, 255, 0.08), transparent 70%);
    z-index: -2;
    filter: blur(15px);
}

.float-icon i {
    font-size: inherit;
    background: linear-gradient(135deg, #00f5ff 0%, #00aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(0, 245, 255, 0.5));
}

.float-icon.sm {
    width: 48px;
    height: 48px;
    font-size: 20px;
    border-radius: 14px;
}

.float-icon.md {
    width: 62px;
    height: 62px;
    font-size: 26px;
    border-radius: 18px;
}

.float-icon.lg {
    width: 76px;
    height: 76px;
    font-size: 32px;
    border-radius: 22px;
}

.float-icon.tint-cyan {
    background: rgba(0, 245, 255, 0.04);
}

.float-icon.tint-blue {
    background: rgba(0, 170, 255, 0.04);
}

.float-icon.tint-purple {
    background: rgba(124, 111, 255, 0.04);
    border-color: rgba(124, 111, 255, 0.12);
}

.float-icon.tint-purple i {
    background: linear-gradient(135deg, #7c6fff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(124, 111, 255, 0.5));
}

.float-icon.tint-pink {
    background: rgba(244, 63, 94, 0.04);
    border-color: rgba(244, 63, 94, 0.12);
}

.float-icon.tint-pink i {
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.5));
}

.float-icon.tint-green {
    background: rgba(34, 211, 238, 0.04);
    border-color: rgba(34, 211, 238, 0.12);
}

.float-icon.tint-green i {
    background: linear-gradient(135deg, #22d3ee, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.5));
}

.float-icon.tint-amber {
    background: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.12);
}

.float-icon.tint-amber i {
    background: linear-gradient(135deg, #fbbf24, #fcd34d);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.float-icon:nth-child(1) {
    top: 12%;
    left: 7%;
    animation: floatA 14s ease-in-out infinite;
}

.float-icon:nth-child(2) {
    top: 22%;
    right: 9%;
    animation: floatB 18s ease-in-out infinite 1s;
}

.float-icon:nth-child(3) {
    bottom: 18%;
    left: 12%;
    animation: floatC 16s ease-in-out infinite 2s;
}

.float-icon:nth-child(4) {
    bottom: 10%;
    right: 14%;
    animation: floatA 20s ease-in-out infinite 3s;
}

.float-icon:nth-child(5) {
    top: 55%;
    left: 4%;
    animation: floatB 15s ease-in-out infinite 4s;
}

.float-icon:nth-child(6) {
    top: 8%;
    left: 45%;
    animation: floatC 17s ease-in-out infinite 0.5s;
}

.float-icon:nth-child(7) {
    bottom: 28%;
    right: 5%;
    animation: floatA 19s ease-in-out infinite 2.5s;
}

.float-icon:nth-child(8) {
    top: 68%;
    right: 28%;
    animation: floatB 21s ease-in-out infinite 1.5s;
}

.sm {
    opacity: 0.45;
}

.md {
    opacity: 0.55;
}

.lg {
    opacity: 0.65;
}

@keyframes floatA {

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

    25% {
        transform: translateY(-18px) rotate(2deg) scale(1.04);
    }

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

    75% {
        transform: translateY(-22px) rotate(1.5deg) scale(1.02);
    }
}

@keyframes floatB {

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

    33% {
        transform: translateY(-24px) rotate(-2deg) scale(1.05);
    }

    66% {
        transform: translateY(-10px) rotate(1.5deg) scale(0.98);
    }
}

@keyframes floatC {

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

    30% {
        transform: translateY(-16px) translateX(8px) rotate(3deg);
    }

    60% {
        transform: translateY(-26px) translateX(-6px) rotate(-2deg);
    }

    80% {
        transform: translateY(-12px) translateX(4px) rotate(1deg);
    }
}

.about-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 100px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    font-size: 0.8rem;
    font-weight: 500;
    color: #00f5ff;
    margin-bottom: 32px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s 0.3s forwards;
}

.about-hero-badge i {
    font-size: 0.7rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.about-hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 1s 0.5s forwards;
}

.about-hero-title .line {
    display: block;
}

.about-hero-title .gradient-text {
    background: linear-gradient(0deg,
            #00f5ff 0%,
            #00aaff 85%,
            #0284c7 100%);
    filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.4));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.7;
    font-weight: 400;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s 0.7s forwards;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s 0.9s forwards;
}

.about-btn-neon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.btn-neon-primary {
    background: linear-gradient(135deg, #00f5ff, #0891b2);
    color: #030712;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.2), 0 0 60px rgba(0, 240, 255, 0.1);
}

.btn-neon-primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.35), 0 0 80px rgba(0, 240, 255, 0.15);
}

.btn-neon-ghost {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-neon-ghost:hover {
    background: rgba(0, 255, 255, 0.08);
    transform: translateY(-3px);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeUp 0.8s 1.3s forwards;
}

.hero-scroll-indicator span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #00f5ff, transparent);
    animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(0.5);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* ===== MARQUEE ===== */
.marquee-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
    overflow: hidden;
    position: relative;
    background: rgba(0, 255, 255, 0.04);
}

.marquee-track {
    display: flex;
    gap: 60px;
    animation: marquee 30s linear infinite;
    width: max-content;
}

.marquee-item {
    font-size: 0.85rem;
    font-weight: 500;
    color: #0ff;
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 60px;
}

.marquee-item::after {
    content: "◆";
    font-size: 0.5rem;
    color: rgba(0, 240, 255, 0.3);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ===== MISSION SECTION ===== */
.mission-section {
    padding: 120px 48px;
    position: relative;
}

.mission-section .section-glow {
    position: absolute;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.08), transparent 70%);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 5;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #00f5ff;
    margin-bottom: 20px;
}

.section-eyebrow::before,
.section-eyebrow::after {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(to right, transparent, #00f5ff);
}

.section-eyebrow::after {
    background: linear-gradient(to left, transparent, #00f5ff);
}

.about-section-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.mission-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 48px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.mission-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #00f5ff, transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.mission-card:hover {
    background: rgba(0, 255, 255, 0.04);
    border-color: rgba(0, 240, 255, 0.15);
    transform: translateY(-8px);
}

.mission-card:hover::before {
    opacity: 1;
}

.mission-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 24px;
}

.mission-icon.cyan {
    background: rgba(0, 240, 255, 0.1);
    color: #00f5ff;
}

.mission-icon.purple {
    background: rgba(168, 85, 247, 0.1);
    color: var(--neon-purple);
}

.mission-icon.pink {
    background: rgba(244, 63, 94, 0.1);
    color: var(--neon-pink);
}

.mission-icon.green {
    background: rgba(34, 211, 238, 0.1);
    color: var(--neon-green);
}

.mission-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    margin-bottom: 14px;
}

.mission-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.45);
}

/* ===== UNIQUE 3D SLIDER ===== */
.slider-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.slider-section .section-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.06), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider-wrapper {
    position: relative;
    height: 420px;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-3d {
    position: absolute;
    width: 380px;
    height: 300px;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.slide-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-3d .slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 7, 18, 0.9) 0%, rgba(3, 7, 18, 0.2) 50%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}

.slide-3d .slide-overlay h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 6px;
}

.slide-3d .slide-overlay p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.slide-3d .slide-number {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 100px;
}

.slide-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    position: relative;
    z-index: 10;
}

.slide-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-btn:hover {
    border-color: #00f5ff;
    background: rgba(0, 240, 255, 0.1);
    color: #00f5ff;
}

.slide-dots {
    display: flex;
    gap: 8px;
}

.slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.4s;
    cursor: pointer;
}

.slide-dot.active {
    width: 32px;
    border-radius: 4px;
    background: #00f5ff;
}

/* ===== ECOSYSTEM HORIZONTAL SCROLL ===== */
.eco-section {
    padding: 120px 0;
    position: relative;
}

.eco-scroll-container {
    overflow: hidden;
    margin-top: 60px;
    max-width: 1110px;
    position: relative;
    margin: auto;
}

.eco-scroll-container::before,
.eco-scroll-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.eco-scroll-container::before {
    left: 0;
    background: linear-gradient(to right, #030712, transparent);
}

.eco-scroll-container::after {
    right: 0;
    background: linear-gradient(to left, #030712, transparent);
}

.eco-track {
    padding: 20px 5px;
    cursor: grab;
    user-select: none;
    display: flex;
    gap: 20px;
    width: max-content;
    transition: transform 0.6s ease-in-out;
}

.eco-track:hover {
    animation-play-state: paused;
}

.eco-track:active {
    cursor: grabbing;
}

.about-eco-card {
    min-width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 15px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.about-eco-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(250px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 240, 255, 0.15),
            transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.about-eco-card:hover::before {
    opacity: 1;
}


.about-eco-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow:
        0 10px 30px rgba(0, 240, 255, 0.15),
        0 0 20px rgba(0, 240, 255, 0.25);
}

.about-eco-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(0, 240, 255, 0.05),
            transparent);
    transform: skewX(-25deg);
    transition: 0.6s;
}

.about-eco-card:hover::after {
    left: 120%;
}

.about-eco-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.about-eco-card:hover .about-eco-card-icon {
    transform: rotate(8deg) scale(1.15);
    border: 1px solid rgba(0, 240, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.about-eco-card h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
}

.about-eco-card:hover h4 {
    color: #00f5ff;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.about-eco-card p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.6;
}

.about-eco-card .eco-tag {
    display: inline-block;
    margin-top: 16px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.eco-tag.cyan {
    background: rgba(0, 240, 255, 0.1);
    color: #00f5ff;
}

.eco-tag.purple {
    background: rgba(168, 85, 247, 0.1);
    color: var(--neon-purple);
}

.eco-tag.pink {
    background: rgba(244, 63, 94, 0.1);
    color: var(--neon-pink);
}

.eco-tag.green {
    background: rgba(34, 211, 238, 0.1);
    color: var(--neon-green);
}

/* ===== TIMELINE ===== */
.timeline-section {
    padding: 120px 48px;
    position: relative;
}

.timeline {
    max-width: 800px;
    margin: 60px auto 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            #00f5ff,
            #00aaff,
            #0284c7,
            transparent);
    border-radius: 2px;
    opacity: 0.9;
}

.timeline-item {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #030712;
    border: 2px solid #00f5ff;
    flex-shrink: 0;
    margin-top: 6px;
    margin-left: 23px;
    position: relative;
    z-index: 5;
    transition: all 0.4s;
}

.timeline-item:nth-child(2) .timeline-dot {
    border-color: var(--neon-purple);
}

.timeline-item:nth-child(3) .timeline-dot {
    border-color: var(--neon-pink);
}

.timeline-item:nth-child(4) .timeline-dot {
    border-color: var(--neon-green);
}

.timeline-item:hover .timeline-dot {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transform: scale(1.3);
}

.timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 32px;
    flex: 1;
    transition: all 0.4s;
}

.timeline-content:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.timeline-year {
    font-size: 0.75rem;
    font-weight: 600;
    color: #00f5ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.timeline-item:nth-child(2) .timeline-year {
    color: var(--neon-purple);
}

.timeline-item:nth-child(3) .timeline-year {
    color: var(--neon-pink);
}

.timeline-item:nth-child(4) .timeline-year {
    color: var(--neon-green);
}

.timeline-content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.6;
}

/* ===== CTA ===== */
.cta-section {
    padding: 140px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-bg-glow {
    position: absolute;
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.05), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cta-content {
    position: relative;
    z-index: 5;
}

.cta-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1.1;
}

.cta-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.4);
    max-width: 500px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── STATS SECTION ── */
.ab-stats {
    padding: 100px 130px;
    position: relative;
}

.ab-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 111, 255, .3), transparent);
}

.ab-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0ff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ab-section-label::before {
    content: '';
    width: 20px;
    height: 1px;
    background: #0ff;
}

.ab-section-title {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 16px;
}

.ab-section-title em {
    font-style: normal;
    color: #0ff;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid rgba(0, 240, 255, 0.2);
    ;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 60px;
}

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

.stat-block {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: background .25s;
}

.stat-block:hover {
    background: rgba(0, 255, 255, 0.04);
}

.stat-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #0ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.stat-block:hover::after {
    transform: scaleX(1);
}

.stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(124, 111, 255, .1);
    border: 1px solid rgba(124, 111, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 20px;
}

.stat-num {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 6px;
}

.stat-num-unit {
    font-size: 28px;
    color: #0ff;
}

.stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 6px;
}

.stat-desc {
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.5;
}

/* ------------------------- tags base game --------------------------------- */
.tag-page-bg-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.07;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 70%);
    pointer-events: none;
}

/* ── Background Glow ── */
.tag-page-bg-glow {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(0, 255, 255, 0.08) 0%, rgba(0, 255, 255, 0.03) 30%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: tagGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes tagGlowPulse {
    0% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

/* ── Particles Canvas ── */
#tagParticles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── Noise Overlay ── */
.tag-page-noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ── Page Wrapper ── */
.tag-page-wrap {
    position: relative;
    z-index: 2;
    max-width: 1360px;
    margin: 0 auto;
    padding: 16px 16px 40px;
}

/* ═══════════ BREADCRUMB ═══════════ */
.tag-crumb {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.tag-crumb a {
    color: #94a3b8;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.25s;
}

.tag-crumb a:hover {
    color: #00ffff;
    background: rgba(0, 255, 255, 0.06);
}

.tag-crumb .sep {
    color: #334155;
    font-size: 8px;
    margin: 0 2px;
}

.tag-crumb .current {
    color: #00ffff;
    padding: 6px 14px;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.13);
    border-radius: 6px;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.33);
}

/* ═══════════ TAG HERO ═══════════ */
.tag-hero {
    position: relative;
    margin-bottom: 40px;
    padding: 40px 44px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.04), #0a162);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 20px;
    overflow: hidden;
}

.tag-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    animation: heroScan 3s linear infinite;
}

@keyframes heroScan {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.tag-hero::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
    border-top: 2px solid #00ffff;
    border-left: 2px solid #00ffff;
    border-radius: 4px 0 0 0;
    opacity: 0.5;
}

.corner-br {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid #00ffff;
    border-right: 2px solid #00ffff;
    border-radius: 0 0 4px 0;
    opacity: 0.5;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(0, 255, 255, 0.13), rgba(8, 145, 178, 0.25));
    border: 2px solid rgba(0, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #00ffff;
    flex-shrink: 0;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.33), inset 0 0 20px rgba(0, 255, 255, 0.06);
    animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.33), inset 0 0 20px rgba(0, 255, 255, 0.06);
    }

    50% {
        box-shadow: 0 0 60px rgba(0, 255, 255, 0.33), inset 0 0 30px rgba(0, 255, 255, 0.13);
    }
}

.hero-text {
    flex: 1;
}

.hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #00ffff;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-label::before {
    content: '';
    width: 20px;
    height: 2px;
    background: #00ffff;
}

.hero-title {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 1.1;
}

.hero-title em {
    font-style: normal;
    color: #00ffff;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.33), 0 0 60px rgba(0, 255, 255, 0.13);
}

.hero-badge {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.13);
    border-radius: 14px;
    padding: 14px 28px;
    flex-shrink: 0;
}

.hero-badge .num {
    font-size: 32px;
    font-weight: 900;
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.33);
    line-height: 1;
}

.hero-badge .label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .tag-hero {
        padding: 28px 24px;
    }

    .hero-title {
        font-size: 22px;
        letter-spacing: 2px;
    }

    .hero-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .hero-badge {
        padding: 10px 20px;
    }

    .hero-badge .num {
        font-size: 24px;
    }

    .dev-hero-stats {
        grid-template-columns: 1fr;
    }

    .sc:nth-child(2),
    .sc:nth-child(3) {
        margin-top: 0;
    }

    #gameContainer {
        flex-direction: column;
    }

    .gz-detailed-section {
        padding: 16px;
        border-radius: 12px;
        margin-top: 20px;
    }
    .gz-block-title { font-size: 18px; }
    .gz-meta-footer {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
        padding: 16px;
        gap: 16px;
    }
    .gz-related-grid-horizontal {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    .hero-badge {
        display: none;
    }

    .cat-page {
        padding: 16px 12px 40px;
    }

    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cat-hero-title {
        font-size: 20px;
    }

    .dev-hero-stats {
        grid-template-columns: 1fr;
    }

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

    .dev-hero-trust {
        flex-wrap: wrap;
    }

    .gz-detailed-section { padding: 12px; }
    .gz-meta-footer { grid-template-columns: 1fr; } /* 1 column on mobile */
    .gz-related-grid-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 shrink-safe items per row */
    .gz-faq-a { padding-left: 0; margin-top: 8px; }
}

/* ═══════════ GAMES GRID ═══════════ */
.tag-games-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

@media (max-width: 1280px) {
    .tag-games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .tag-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .tag-games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ═══════════ GAME CARD ═══════════ */
.g-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1.2;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
    opacity: 0;
    transform: translateY(30px);
    animation: gCardIn 0.6s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes gCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.g-card:hover {
    transform: translateY(-8px) scale(1.04);
    z-index: 20;
}

/* Animated border */
.g-card-border {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: rgba(0, 255, 255, 0.15);
    transition: background 0.4s;
    pointer-events: none;
    z-index: 0;
}

.g-card:hover .g-card-border {
    background: conic-gradient(from var(--card-angle, 0deg), #00ffff, #0891b2, transparent, transparent, #00ffff);
    animation: gRotateBorder 2s linear infinite;
}

@keyframes gRotateBorder {
    to {
        --card-angle: 360deg;
    }
}

.g-card-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    overflow: hidden;
    background: #0a162;
}

.g-card-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: all 0.5s cubic-bezier(0.2, 0, 0, 1);
    display: block;
}

.g-card:hover .g-card-img {
    transform: none;
    filter: brightness(0.3) saturate(0.5);
}

.g-card-iframe {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.g-card:hover .g-card-iframe {
    opacity: 1;
}

.g-card-iframe iframe {
    width: 250%;
    height: 250%;
    border: none;
    transform: scale(0.4);
    transform-origin: top left;
    pointer-events: none;
}

.g-card-grad {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.98) 0%, rgba(2, 6, 23, 0.7) 40%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.g-card-scan {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    background: repeating-linear-gradient(0deg,
            transparent 0px, transparent 3px,
            rgba(0, 255, 255, 0.02) 3px, rgba(0, 255, 255, 0.02) 4px);
}

.g-card:hover .g-card-scan {
    opacity: 1;
}

.g-play {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 6;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #00ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.33);
}

.g-card:hover .g-play {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 12px rgba(0, 255, 255, 0.06), 0 0 40px rgba(0, 255, 255, 0.33);
}

.g-play i {
    color: #020617;
    font-size: 18px;
    margin-left: 3px;
}

.g-play::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #00ffff;
    opacity: 0;
    animation: none;
}

.g-card:hover .g-play::before {
    animation: gPulseRing 1.5s ease-out infinite;
}

@keyframes gPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.g-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 14px 12px;
    pointer-events: none;
}

.g-card-title span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.g-card:hover .g-card-title span {
    color: #00ffff;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.33);
}

.g-card-tag-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ffff;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 0 8px #00ffff;
}

.g-card:hover .g-card-tag-dot {
    opacity: 1;
}

.g-card-glow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40px;
    background: #00ffff;
    filter: blur(30px);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: -1;
}

.g-card:hover .g-card-glow {
    opacity: 0.25;
}

/* Hidden link overlay */
.g-card-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
}

/* ═══════════ PAGINATION ═══════════ */
.tag-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 255, 255, 0.15);
    position: relative;
}

.tag-pager::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.tag-pager .page-link {
    min-width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 255, 0.15);
    background: #0a162;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s;
    padding: 0 14px;
}

.tag-pager .page-link:hover {
    border-color: rgba(0, 255, 255, 0.2);
    color: #00ffff;
    background: #0e1f3d;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.06);
}

.tag-pager .active .page-link,
.tag-pager .page-item.active .page-link {
    background: linear-gradient(135deg, #00ffff, #0891b2);
    border-color: #00ffff;
    color: #020617;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.33), 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tag-pager .disabled .page-link {
    opacity: 0.3;
    pointer-events: none;
}

/* ═══════════ EMPTY STATE ═══════════ */
.tag-empty {
    text-align: center;
    padding: 100px 20px;
}

.tag-empty i {
    font-size: 56px;
    color: #334155;
    margin-bottom: 20px;
    display: block;
}

.tag-empty p {
    font-size: 20px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ═══════════ @property fallback ═══════════ */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .g-card:hover .g-card-border {
        background: #00ffff;
    }
}

/* ================= DEVELOPER PAGE ================= */

/* ── Scroll Progress ── */
.scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: #0ff;
    z-index: 10001;
    width: 0%;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.15);
}

/* ── Cursor ── */
.cur-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.cur-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0ff;
    pointer-events: none;
    z-index: 10002;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    mix-blend-mode: screen;
    transition: width 0.25s, height 0.25s, opacity 0.25s, background 0.25s;
}

.cur-dot.big {
    width: 36px;
    height: 36px;
    opacity: 0.4;
    background: rgba(0, 255, 255, 0.12);
    border: 1px solid rgba(0, 255, 255, 0.3);
}

/* ── BG Mesh ── */
.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-mesh .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}

.bg-mesh .blob:nth-child(1) {
    width: 500px;
    height: 500px;
    background: rgba(0, 255, 255, 0.025);
    top: -10%;
    left: -5%;
    animation: drift 25s ease-in-out infinite;
}

.bg-mesh .blob:nth-child(2) {
    width: 400px;
    height: 400px;
    background: rgba(0, 255, 255, 0.018);
    bottom: -15%;
    right: -10%;
    animation: drift 30s ease-in-out infinite reverse;
}

@keyframes drift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -40px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 50px) scale(0.95);
    }
}

/* ── Header ── */
.hdr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 48px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(5, 12, 26, 0.6);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s;
}

.hdr.on {
    background: rgba(5, 12, 26, 0.95);
    border-bottom-color: rgba(0, 240, 255, 0.2);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 255, 255, 0.02);
}

.hdr-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 20px;
}

.default-admin-logo,
.default-admin-favicon {
    color: #fff;
    font-size: 24px;
}

.hdr-nav {
    display: flex;
    gap: 32px;
}

.hdr-nav a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    position: relative;
}

.hdr-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #0ff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hdr-nav a:hover {
    color: #0ff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.hdr-nav a:hover::after {
    width: 100%;
}

.hdr-acts {
    display: flex;
    gap: 12px;
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-p {
    background: linear-gradient(135deg, #0ff, #0891b2);
    color: #030712;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.2), 0 0 60px rgba(0, 240, 255, 0.1);
}

.btn-p:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.35), 0 0 80px rgba(0, 240, 255, 0.15);
}

.btn-p:active {
    transform: translateY(0) scale(0.98);
}

.btn-p::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.btn-p:hover::before {
    left: 100%;
}

.btn-g {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-g:hover {
    color: #0ff;
    border-color: rgba(0, 240, 255, 0.2);
    background: rgba(0, 255, 255, 0.08);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.06), inset 0 0 20px rgba(0, 255, 255, 0.03);
    transform: translateY(-2px);
}

.btn-g .arr {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-g:hover .arr {
    transform: translateX(5px);
}

/* ── Hero ── */
.dev-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 48px 80px;
    overflow: hidden;
}

.dev-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
    animation: gridPulse 6s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.dev-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.6;
}

.dev-hero-orb:nth-child(1) {
    width: 400px;
    height: 400px;
    background: rgba(0, 255, 255, 0.05);
    top: 20%;
    right: 10%;
    animation: orbA 8s ease-in-out infinite;
}

.dev-hero-orb:nth-child(2) {
    width: 300px;
    height: 300px;
    background: rgba(0, 255, 255, 0.035);
    bottom: 10%;
    left: 10%;
    animation: orbB 10s ease-in-out infinite;
}

@keyframes orbA {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-30px, 20px);
    }
}

@keyframes orbB {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, -30px);
    }
}

/* Geometric shapes */
/* GEO CONTAINER */
.geo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* COMMON */
.geo span {
    position: absolute;
    opacity: .4;
    animation: floatGeo 12s ease-in-out infinite;
}

/* =========================
        DIAMOND
        ========================= */
.geo .dia {
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(0, 255, 255, .45);
    transform: rotate(45deg);
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(0, 255, 255, .2);
}

/* =========================
        TRIANGLE
        ========================= */
.geo .tri {
    width: 0;
    height: 0;

    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid rgba(0, 255, 255, .22);

    filter:
        drop-shadow(0 0 8px rgba(0, 255, 255, .55)) drop-shadow(0 0 16px rgba(0, 255, 255, .25));
}

/* =========================
        RING
        ========================= */
.geo .ring {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 255, 255, .45);
    box-shadow: 0 0 14px rgba(0, 255, 255, .18);
}

/* =========================
        PLUS
        ========================= */
.geo .plus {
    width: 24px;
    height: 24px;
}

.geo .plus::before,
.geo .plus::after {
    content: '';
    position: absolute;
    background: rgba(0, 255, 255, .55);
    box-shadow: 0 0 8px rgba(0, 255, 255, .4);
    border-radius: 2px;
}

.geo .plus::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.geo .plus::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* =========================
        LINE
        ========================= */
.geo .line {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(0, 255, 255, .7),
            transparent);
}

/* =========================================
        CHEVRON
        ========================================= */
.geo .chevron {
    width: 18px;
    height: 18px;

    border-right: 3px solid rgba(0, 255, 255, .45);
    border-bottom: 3px solid rgba(0, 255, 255, .45);

    transform: rotate(45deg);

    box-shadow: 0 0 10px rgba(0, 255, 255, .2);
}

/* =========================================
        DOUBLE RING
        ========================================= */
.geo .double-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 255, 255, .45);

    position: relative;

    box-shadow: 0 0 12px rgba(0, 255, 255, .18);
}

.geo .double-ring::after {
    content: '';
    position: absolute;
    inset: 6px;

    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, .28);
}

/* =========================================
        PILL
        ========================================= */
.geo .pill {
    width: 42px;
    height: 14px;

    border-radius: 100px;

    border: 1.5px solid rgba(0, 255, 255, .35);

    box-shadow: 0 0 10px rgba(0, 255, 255, .15);
}

/* =========================================
        ARC
        ========================================= */
.geo .arc {
    width: 28px;
    height: 28px;

    border-radius: 50%;

    border-top: 2px solid rgba(0, 255, 255, .5);
    border-left: 2px solid rgba(0, 255, 255, .2);
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;

    transform: rotate(25deg);

    box-shadow: 0 0 8px rgba(0, 255, 255, .2);
}

/* =========================================
        ZIGZAG
        ========================================= */
.geo .zigzag {
    width: 28px;
    height: 12px;

    border-bottom: 3px solid rgba(0, 255, 255, .45);
    border-left: 3px solid rgba(0, 255, 255, .45);

    transform: skewX(-35deg);

    box-shadow: 0 0 8px rgba(0, 255, 255, .2);
}

/* =========================
        POSITIONS
        ========================= */
.geo span:nth-child(1) {
    top: 18%;
    left: 8%;
}

.geo span:nth-child(2) {
    top: 25%;
    right: 14%;
}

.geo span:nth-child(3) {
    bottom: 14%;
    left: 18%;
}

.geo span:nth-child(4) {
    bottom: 28%;
    right: 5%;
}

.geo span:nth-child(5) {
    top: 9%;
    left: 50%;
}

.geo span:nth-child(6) {
    top: 16%;
    left: 69%;
}

.geo span:nth-child(7) {
    top: 58%;
    left: 3%;
}

.geo span:nth-child(8) {
    top: 28%;
    left: 32%;
}

.geo span:nth-child(9) {
    bottom: 45%;
    left: 44%;
}

.geo span:nth-child(10) {
    top: 90%;
    right: 38%;
}

/* =========================
        ANIMATION
        ========================= */
@keyframes floatGeo {

    0% {
        transform:
            translateY(0px) rotate(0deg) scale(1);

        opacity: .2;
    }

    50% {
        transform:
            translateY(-18px) rotate(180deg) scale(1.08);

        opacity: .55;
    }

    100% {
        transform:
            translateY(0px) rotate(360deg) scale(1);

        opacity: .2;
    }
}

/* Particles */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ptcl {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #0ff;
    border-radius: 50%;
    opacity: 0;
    animation: ptclF 4s ease-in-out infinite;
}

.ptcl.big {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}

@keyframes ptclF {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-40px) scale(1);
    }
}

/* Hero Content */
.dev-hero-c {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.dev-hero-l {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dev-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 8px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: #0ff;
    width: fit-content;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dev-hero-badge .dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    position: relative;
}

.dev-hero-badge .dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid #10B981;
    animation: dotRing 2s ease-out infinite;
}

@keyframes dotRing {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.dev-hero-title {
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #fff;
}

.dev-hero-title .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.dev-hero-title .w span {
    display: inline-block;
    transform: translateY(110%);
}

.dev-hero-title em {
    font-style: normal;
    color: #0ff;
    text-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
    position: relative;
    background: linear-gradient(0deg, #00f5ff 0%, #00aaff 85%, #0284c7 100%);
    filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dev-hero-title em::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0ff, transparent);
    border-radius: 2px;
    opacity: 0.5;
}

.dev-hero-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    max-width: 500px;
}

.dev-hero-acts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.dev-hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    font-weight: 500;
}

.dev-hero-trust strong {
    color: #fff;
    font-weight: 900;
}

.dev-hero-trust .s {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.dev-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 24px;
    perspective: 1200px;
}

/* =========================
        CARD
        ========================= */
.sc {
    position: relative;
    overflow: hidden;

    padding: 30px;

    border-radius: 24px;

    background:
        linear-gradient(145deg,
            rgba(12, 18, 35, .92),
            rgba(5, 10, 20, .75));

    border: 1px solid rgba(255, 255, 255, .07);

    backdrop-filter: blur(14px);

    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;

    isolation: isolate;
}

/* =========================
        TOP LIGHT
        ========================= */
.sc::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(0, 255, 255, .55),
            transparent);

    opacity: 0;

    transition: opacity .4s ease;
}

/* =========================
        BACKGROUND GRID
        ========================= */
.sc::after {
    content: '';

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(0, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, .03) 1px, transparent 1px);

    background-size: 24px 24px;

    opacity: .25;

    mask-image: radial-gradient(circle at center, black, transparent 80%);
}

/* =========================
        GLOW EFFECT
        ========================= */
.sc-glow {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(0, 255, 255, .14),
            transparent 55%);

    opacity: 0;

    transition: opacity .4s ease;
}

.sc:hover .sc-glow {
    opacity: 1;
}

/* =========================
        HOVER
        ========================= */
.sc:hover {
    transform:
        translateY(-10px) rotateX(5deg) rotateY(-4deg);

    border-color: rgba(0, 255, 255, .22);

    box-shadow:
        0 25px 50px rgba(0, 0, 0, .45),
        0 0 50px rgba(0, 255, 255, .08);
}

.sc:hover::before {
    opacity: 1;
}

/* =========================
        ICON
        ========================= */
.sc .si {
    width: 58px;
    height: 58px;

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

    font-size: 24px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            rgba(0, 255, 255, .14),
            rgba(0, 255, 255, .04));

    border: 1px solid rgba(0, 255, 255, .12);

    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, .03),
        0 0 20px rgba(0, 255, 255, .08);

    margin-bottom: 22px;

    position: relative;
    z-index: 2;
}

/* =========================
        NUMBER
        ========================= */
.sc .sn {
    font-size: 42px;
    font-weight: 800;

    letter-spacing: -2px;
    line-height: 1;

    margin-bottom: 10px;

    color: #fff;

    position: relative;
    z-index: 2;
}

/* =========================
        LABEL
        ========================= */
.sc .sl {
    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .14em;

    color: rgba(255, 255, 255, .58);

    position: relative;
    z-index: 2;
}

/* =========================
        FLOAT OFFSET
        ========================= */
.sc:nth-child(2) {
    margin-top: 42px;
}

.sc:nth-child(3) {
    margin-top: -42px;
}

/* =========================
        CYAN ORB
        ========================= */
.sc .orb {
    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: rgba(0, 255, 255, .06);

    filter: blur(40px);

    top: -40px;
    right: -40px;

    z-index: 0;
}

/* =========================
        CORNER DOT
        ========================= */
.sc .corner {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgba(0, 255, 255, .7);

    top: 16px;
    right: 16px;

    box-shadow:
        0 0 10px rgba(0, 255, 255, .6),
        0 0 20px rgba(0, 255, 255, .3);
}

/* ── Marquee ── */
.dev-marquee-sec {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
    background: rgba(0, 255, 255, 0.008);
    z-index: 2;
}

.dev-marquee-sec::before,
.dev-marquee-sec::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.dev-marquee-sec::before {
    left: 0;
    background: linear-gradient(90deg, #050c1a, transparent);
}

.dev-marquee-sec::after {
    right: 0;
    background: linear-gradient(-90deg, #050c1a, transparent);
}

.dev-marquee-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 24px;
    opacity: 0.6;
}

.dev-marquee-track {
    display: flex;
    gap: 48px;
    animation: mscroll 30s linear infinite;
    width: max-content;
}

.mi {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #0ff;
    white-space: nowrap;
    opacity: 0.35;
    transition: opacity 0.3s;
}

.mi:hover {
    opacity: 1;
}

.mi .mic {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(5, 12, 26, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

@keyframes mscroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Sections ── */
.sec {
    padding: 120px 48px;
    position: relative;
    z-index: 2;
}

.sec-in {
    max-width: 1400px;
    margin: 0 auto;
}

.sec-eye {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #0ff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 20px;
}

.sec-eye .ln {
    width: 24px;
    height: 1px;
    background: #0ff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.sec-h {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 16px;
    color: #fff;
}

.sec-p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    max-width: 560px;
    line-height: 1.7;
}

.dev-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), rgba(0, 255, 255, 0.04), rgba(255, 255, 255, 0.08), transparent);
    position: relative;
    z-index: 2;
}

/* ── Features ── */
.feat-sec {
    background: #071020;
}

.feat-hdr {
    margin-bottom: 64px;
}

.dev-feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.fc {
    position: relative;
    padding: 36px 28px;
    background: rgba(5, 12, 26, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fc .gb {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--border-angle), transparent 35%, var(--fc-c, #0ff) 50%, transparent 65%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s;
    animation: rotB 3s linear infinite;
}

@keyframes rotB {
    to {
        --border-angle: 360deg;
    }
}

.fc .fc-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--fc-g, rgba(0, 255, 255, 0.04)), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.fc .spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--fc-g, rgba(0, 255, 255, 0.06)), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.fc:hover .gb {
    opacity: 1;
}

.fc:hover .fc-glow {
    opacity: 1;
}

.fc:hover .spot {
    opacity: 1;
}

.fc:hover {
    border-color: transparent;
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 40px var(--fc-sh, rgba(0, 255, 255, 0.04));
}

.fc-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--fc-bg, rgba(0, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid var(--fc-bd, rgba(0, 255, 255, 0.06));
    transition: all 0.5s;
    position: relative;
    z-index: 1;
}

.fc:hover .fc-ico {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 0 30px var(--fc-sh, rgba(0, 255, 255, 0.2));
    border-color: var(--fc-c, #0ff);
}

.fc h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    color: #fff;
}

.fc p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.fc[data-c="cyan"] {
    --fc-c: #0ff;
    --fc-g: rgba(0, 255, 255, 0.04);
    --fc-bg: rgba(0, 255, 255, 0.08);
    --fc-bd: rgba(0, 255, 255, 0.06);
    --fc-sh: rgba(0, 255, 255, 0.15);
}

.fc[data-c="green"] {
    --fc-c: #10B981;
    --fc-g: rgba(16, 185, 129, 0.04);
    --fc-bg: rgba(16, 185, 129, 0.1);
    --fc-bd: rgba(16, 185, 129, 0.06);
    --fc-sh: rgba(16, 185, 129, 0.15);
}

.fc[data-c="purple"] {
    --fc-c: #A78BFA;
    --fc-g: rgba(167, 139, 250, 0.04);
    --fc-bg: rgba(167, 139, 250, 0.1);
    --fc-bd: rgba(167, 139, 250, 0.06);
    --fc-sh: rgba(167, 139, 250, 0.15);
}

.fc[data-c="orange"] {
    --fc-c: #F59E0B;
    --fc-g: rgba(245, 158, 11, 0.04);
    --fc-bg: rgba(240, 236, 231, 0.1);
    --fc-bd: rgba(245, 158, 11, 0.06);
    --fc-sh: rgba(245, 158, 11, 0.15);
}

/* ── Steps ── */
.steps-hdr {
    margin-bottom: 72px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

.steps-line {
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    z-index: 0;
}

.steps-line .sl-bg {
    position: absolute;
    inset: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.steps-line .sl-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0ff, rgba(0, 255, 255, 0.15));
    border-radius: 2px;
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.4);
    transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.steps-line.go .sl-fill {
    width: 100%;
}

.stc {
    text-align: center;
    position: relative;
    z-index: 1;
}

.stc-num {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(5, 12, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stc-num::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: all 0.5s;
}

.stc:hover .stc-num {
    border-color: #0ff;
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.15), inset 0 0 25px rgba(0, 255, 255, 0.05);
    transform: scale(1.12);
    background: rgba(0, 255, 255, 0.04);
}

.stc:hover .stc-num::after {
    border-color: rgba(0, 255, 255, 0.08);
    animation: numRing 1.5s ease-out infinite;
}

@keyframes numRing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.stc-n {
    font-size: 22px;
    font-weight: 600;
    color: #0ff;
}

.stc h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    color: #fff;
}

.stc p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    max-width: 240px;
    margin: 0 auto;
}

/* ── Metrics ── */
.met-sec {
    background: #071020;
    padding: 80px 255px;
    position: relative;
    z-index: 2;
}

.met-grid {
    /* max-width: 1400px; margin: 0 auto; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #050c1a;
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.met-i {
    background: rgba(255, 255, 255, 0.03);
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background .25s;
    position: relative;
    overflow: hidden;
}

.met-i::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0, 255, 255, 0.06), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
}

.met-i:hover {
    background: rgba(0, 255, 255, 0.04);
}

.met-i:hover::before {
    opacity: 1;
}

.met-i::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #0ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.met-i:hover::after {
    transform: scaleX(1);
}

.met-v {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0ff;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
    transition: text-shadow 0.4s;
}

.met-i:hover .met-v {
    text-shadow: 0 0 50px rgba(0, 255, 255, 0.4);
}

.met-l {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ── Revenue ── */
.rev-hdr {
    margin-bottom: 64px;
}

.rev-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.rc {
    position: relative;
    padding: 40px 32px;
    background: rgba(5, 12, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.rc .gb {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--border-angle), transparent 35%, var(--rv-c, #0ff) 50%, transparent 65%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s;
    animation: rotB 3s linear infinite;
}

.rc .spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--rv-g, rgba(0, 255, 255, 0.04)), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.rc .rc-bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, var(--rv-g, rgba(0, 255, 255, 0.02)), transparent);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.rc:hover .gb {
    opacity: 1;
}

.rc:hover .spot {
    opacity: 1;
}

.rc:hover .rc-bot {
    opacity: 1;
}

.rc:hover {
    border-color: transparent;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 30px var(--rv-g, rgba(0, 255, 255, 0.03));
}

.rc[data-c="cyan"] {
    --rv-c: #0ff;
    --rv-g: rgba(0, 255, 255, 0.03);
}

.rc[data-c="green"] {
    --rv-c: #10B981;
    --rv-g: rgba(16, 185, 129, 0.03);
}

.rc[data-c="purple"] {
    --rv-c: #A78BFA;
    --rv-g: rgba(167, 139, 250, 0.03);
}

.rc[data-c="orange"] {
    --rv-c: #F59E0B;
    --rv-g: rgba(245, 158, 11, 0.03);
}

.rc-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.rc-tag[data-c="cyan"] {
    background: rgba(0, 255, 255, 0.08);
    color: #0ff;
}

.rc-tag[data-c="green"] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.rc-tag[data-c="purple"] {
    background: rgba(167, 139, 250, 0.1);
    color: #A78BFA;
}

.rc-tag[data-c="orange"] {
    background: rgba(240, 236, 231, 0.1);
    color: #F59E0B;
}

.rc h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    color: #fff;
}

.rc p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.rc-arr {
    position: absolute;
    top: 40px;
    right: 32px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.rc:hover .rc-arr {
    border-color: var(--rv-c, #0ff);
    color: var(--rv-c, #0ff);
    transform: translate(5px, -5px) scale(1.1);
    box-shadow: 0 0 20px var(--rv-g, rgba(0, 255, 255, 0.1));
    background: var(--rv-g, rgba(0, 255, 255, 0.05));
}

/* ── Requirements ── */
.req-sec {
    background: #071020;
}

.req-hdr {
    margin-bottom: 64px;
}

.req-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.qc {
    padding: 32px 28px;
    background: rgba(5, 12, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.qc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(250px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 240, 255, 0.15),
            transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.qc:hover::before {
    opacity: 1;
}

.qc::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(0, 240, 255, 0.05),
            transparent);
    transform: skewX(-25deg);
    transition: 0.6s;
}

.qc:hover::after {
    left: 120%;
}

.qc .spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0, 255, 255, 0.05), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.qc .qc-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}

.qc:hover .spot {
    opacity: 1;
}

.qc:hover .qc-top {
    opacity: 1;
}

.qc:hover {
    transform: translateY(-5px) scale(1.03);
    /* border-color: rgba(0, 240, 255, 0.5); */
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15),
        0 0 20px rgba(0, 240, 255, 0.25);
}

.qc-ico {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: #0ff;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
}

.qc:hover .qc-ico {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
    transform: scale(1.15) rotate(-5deg);
    border-color: rgba(0, 255, 255, 0.2);
}

.qc h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    color: #fff;
}

.qc p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.qc code {
    font-size: 11px;
    background: rgba(0, 255, 255, 0.05);
    color: #0ff;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 255, 0.06);
}

/* ── CTA ── */
.cta-sec {
    padding: 120px 48px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.05), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: ctaPulse 4s ease-in-out infinite;
}

@keyframes ctaPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

.cta-box {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 64px;
    background: rgba(5, 12, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
    backdrop-filter: blur(16px);
}

.cta-box:hover {
    background: rgba(0, 255, 255, 0.04);
    border-color: rgba(0, 240, 255, 0.15);
}

.ca.visible {
    opacity: 1;
    transform: translateX(0);
}

.cta-box:hover::before {
    opacity: 1;
}

.cta-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #0ff, transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.cta-box h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 16px;
    color: #fff;
}

.cta-box h2 em {
    font-style: normal;
    color: #0ff;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.cta-box p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.cta-acts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ── Footer ── */
.ftr {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 48px;
    position: relative;
    z-index: 2;
    background: rgba(5, 12, 26, 0.5);
}

.ftr-in {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ftr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
}

.ftr-bico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ff, #00b4d8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ftr-links {
    display: flex;
    gap: 28px;
}

.ftr-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
}

.ftr-links a:hover {
    color: #0ff;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

.ftr-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}


/* ----------------------------------------------------------------------------- */
.dev-login-btn {
    padding: 16px 40px;
    border: none;
    border-radius: 40px;
    background: #0ff;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
    transition: 0.3s;
}

.dev-login-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.4);
    text-decoration: underline;
    border: 2px solid #00ffff;
    background: transparent;
    color: #fff;
}

a.btn-dev-glow {
    color: #020617 !important;
    text-decoration: none;
    margin: 0 !important;
}

/* dev login register */
.dev-auth-wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 20%, #0f2027, #0b0c2a, #000814);
}

.dev-auth-card {
    width: 420px;
    padding: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.auth-header {
    text-align: center;
    margin-bottom: 25px;
}

.auth-header h2 {
    font-size: 28px;
    font-weight: 600;
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: black;
    padding: 12px;
    border-radius: 30px;
    font-weight: 500;
    margin-bottom: 20px;
}

.divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #aaa;
    font-size: 14px;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #333;
    margin: 0 10px;
}

label.terms {
    display: flex !important;
    gap: 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.dev-auth-card label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 10px;
}

input[type="checkbox"] {
    width: auto !important;
    margin-bottom: 0px !important;
}

.dev-auth-card input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #0b1324;
    color: #fff;
    margin-bottom: 10px;
}

.terms {
    font-size: 13px;
    margin: 10px 0;
}

.terms a {
    color: #0ff;
}

.forgot {
    text-align: right;
    margin-bottom: 10px;
}

.forgot a {
    font-size: 13px;
    color: #0ff;
}

.auth-btn {
    width: 100%;
    padding: 14px;
    border-radius: 30px;
    background: #0ff;
    border: none;
    color: #000;
    font-weight: 600;
    margin-top: 10px;
    transition: .3s;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

.auth-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #aaa;
}

.auth-footer a {
    color: #0ff;
    margin-left: 5px;
}

/* verify email */
.auth-bg {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 20%, #1a0b2e, #0b0c2a, #000);
}

.verify-card {
    width: 420px;
    background: #1e1f2f;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.verify-card h2 {
    margin-bottom: 15px;
}

.verify-card p {
    color: #aaa;
    font-size: 14px;
}

.btn-group {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

.btn-back {
    flex: 1;
    background: #e5e7eb;
    color: black;
    padding: 12px;
    border-radius: 30px;
    text-align: center;
}

.btn-refresh {
    flex: 1;
    background: linear-gradient(90deg, #6d5dfc, #8b5cf6);
    padding: 12px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
}

.resend {
    margin-top: 15px;
    font-size: 13px;
}

.resend a {
    color: #8b5cf6;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.dev-auth-wrapper .dev-auth-card p {
    text-align: center;
    font-size: 14px;
    color: #aaa;
}

button,
input,
optgroup,
select,
textarea {
    background: transparent;
}

option {
    background: #0b1324 !important;
}

/* CUSTOM SCROLL */

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: #050c1a;
}

::-webkit-scrollbar-thumb {
    background: #0ff;
    border-radius: 10px;
}

::selection {
    background: #0ff;
    color: #050c1a;
}

a {
    text-decoration: none;
    color: inherit;
}

/* POLICY */
.policy-wrapper {
    color: rgb(255, 255, 255);
    padding: 25px;
}

.policy-container {
    max-width: 1024px;
    margin: auto;
    background: linear-gradient(145deg, rgb(2, 6, 23), rgb(15, 23, 42));
    padding: 40px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0px 30px rgba(0, 255, 255, 0.5);
}

.policy-date {
    color: #888;
    margin-bottom: 25px;
    font-size: 14px;
}

.policy-content {
    color: #ccc;
    line-height: 1.8;
    font-size: 15px;
}

.policy-content h2 {
    color: #00f0ff;
    margin-top: 30px;
    font-size: 20px;
}

.policy-content p {
    margin-bottom: 15px;
}

.policy-content ul {
    padding-left: 20px;
}

.policy-content ul li {
    margin-bottom: 8px;
}

.policy-content a {
    color: #00f0ff;
    text-decoration: underline;
}

/* contact */
.login-required-box {
    margin: auto;
    text-align: center;
    padding: 135px 50px;
}

.contact-section {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px;
    color: rgb(255, 255, 255);
    background: linear-gradient(145deg, rgb(2, 6, 23), rgb(15, 23, 42));
    padding: 25px;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.05);
    border-image: initial;
}

/* GRID */
.contact-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* LEFT SIDE */
.contact-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-image img {
    width: 100%;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
    animation: float 4s ease-in-out infinite;
    border-radius: 15px;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

/* RIGHT SIDE FORM */
.contact-right {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.2);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

/* INPUT */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    color: #0ff;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: #020617;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    transition: 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #00f0ff;
    box-shadow: 0 0 10px #00f0ff;
}

.rating-stars {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    align-items: center;
    gap: 25px;
}

/* BUTTON */
.btn-submit {
    width: 100%;
    padding: 14px;
    border-radius: 30px;
    background: #0ff;
    border: none;
    color: #000;
    font-weight: 600;
    transition: .3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

html[dir="rtl"] .search-icon {
    right: 20px !important;
}

html[dir="rtl"] .footer-col ul li a::after {
    right: 0 !important;
}

html[dir="rtl"] .side-panel {
    left: -420px !important;
}

html[dir="rtl"] .side-panel.active {
    left: 0 !important;
    right: auto !important;
}

html[dir="rtl"] span.all-gp-badge.all-gp-badge--kids,
html[dir="rtl"] span.all-gp-badge.all-gp-badge--updated,
html[dir="rtl"] span.all-gp-badge.all-gp-badge--mp,
html[dir="rtl"] span.all-gp-badge.all-gp-badge--og,
html[dir="rtl"] span.all-gp-badge.all-gp-badge--new,
html[dir="rtl"] span.all-gp-badge.all-gp-badge--popular,
html[dir="rtl"] span.type-gp-badge.type-gp-badge--mp,
html[dir="rtl"] span.type-gp-badge.type-gp-badge--og,
html[dir="rtl"] span.type-gp-badge.type-gp-badge--new,
html[dir="rtl"] span.type-gp-badge.type-gp-badge--updated,
html[dir="rtl"] span.type-gp-badge.type-gp-badge--popular,
html[dir="rtl"] span.type-gp-badge.type-gp-badge--kids {
    right: 8px !important;
    left: auto !important;
}

html[dir="rtl"] .type-gp-cat-glow {
    right: 5%;
}

/* ----------------------------------- All games page -------------------------------------------- */
.all-gp-page {
    min-height: 100vh;
    color: #e8eaf0;
    padding-bottom: 40px;
}

.all-gp-hero {
    position: relative;
    padding: 56px 0 40px;
    overflow: hidden;
    text-align: center;
}

.all-gp-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.5;
}

.all-gp-hero-glow--1 {
    width: 400px;
    height: 400px;
    background: rgba(0, 255, 136, 0.08);
    top: -180px;
    left: 10%;
    animation: gp-drift 10s ease-in-out infinite alternate;
}

.all-gp-hero-glow--2 {
    width: 300px;
    height: 300px;
    background: rgba(0, 180, 255, 0.06);
    top: -100px;
    right: 10%;
    animation: gp-drift 12s ease-in-out infinite alternate-reverse;
}

@keyframes gp-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, 20px) scale(1.1);
    }
}

.all-gp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
    pointer-events: none;
}

.all-gp-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.all-gp-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0ff;
    background: rgba(0, 255, 255, 0.12);
    border: 1px solid rgba(0, 255, 255, 0.38);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 18px;
}

.all-gp-hero-label svg {
    opacity: 0.8;
}

.all-gp-hero-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #ffffff 40%, #0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.all-gp-hero-desc {
    font-size: 15px;
    color: #9ca3b8;
    line-height: 1.6;
    margin: 0;
}

.all-gp-hero-desc strong {
    color: #e8eaf0;
    font-weight: 600;
}

.all-gp-filters {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 0;
}

.all-gp-filters-track {
    display: flex;
    gap: 6px;
    /* overflow-x: auto; */
    padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.all-gp-filters-track::-webkit-scrollbar {
    display: none;
}

.all-gp-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #9ca3b8;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #0f1628;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
}

.all-gp-filter svg {
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.all-gp-filter:hover {
    color: #e8eaf0;
    background: rgba(255, 255, 255, 0.04);
    border-color: #1e2030;
}

.all-gp-filter:hover svg {
    opacity: 0.8;
}

.all-gp-filter.is-active {
    color: #08090d;
    background: #0ff;
    border-color: #0ff;
    box-shadow: 0 2px 16px rgba(0, 255, 255, 0.35);
}

.all-gp-filter.is-active svg {
    opacity: 1;
    stroke: #08090d;
}

.disabled-filter {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.all-gp-results-bar {
    padding: 14px 16px 4px;
}

.all-gp-results-count {
    font-size: 13px;
    color: #9ca3b8;
}

.all-gp-results-count strong {
    color: #e8eaf0;
    font-weight: 600;
}

.all-gp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 10px 16px 0;
}

.all-gp-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    overflow: hidden;
    background: #071426;
    border: 1px solid #1e2030;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    position: relative;
    contain: layout paint;
}

@keyframes all-gp-card-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.all-gp-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #0ff;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px #0ff,
        0 0 40px rgba(0, 255, 136, 0.08);
}

/* Thumbnail */
.all-gp-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    background: #0c0d14;
}

.all-gp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s;
    display: block;
}

.all-gp-card:hover .all-gp-card-thumb img {
    transform: none;
    filter: brightness(0.7);
}

/* Overlay */
.all-gp-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.all-gp-card:hover .all-gp-card-overlay {
    opacity: 1;
}

/* Play Button */
.all-gp-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0ff;
    color: #08090d;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.4);
    position: relative;
}

.all-gp-play::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #0ff;
    opacity: 0;
    animation: none;
}

.all-gp-card:hover .all-gp-play {
    transform: scale(1);
}

.all-gp-card:hover .all-gp-play::before {
    animation: gp-ring-pulse 1.5s ease-out infinite;
}

@keyframes gp-ring-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Badges */
.all-gp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 3;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Multiplayer — Cyan */
.all-gp-badge--mp {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.18);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Original — Gold */
.all-gp-badge--og {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* New — Lime Green */
.all-gp-badge--new {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.3);
    animation: all-gp-badge-pulse 2s ease-in-out infinite;
}

@keyframes all-gp-badge-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.3);
    }

    50% {
        box-shadow: 0 0 8px 2px rgba(74, 222, 128, 0.15);
    }
}

/* Updated — Amber */
.all-gp-badge--updated {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.18);
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Popular / Hot — Red-Orange */
.all-gp-badge--popular {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Kids — Pink */
.all-gp-badge--kids {
    color: #e879f9;
    background: rgba(232, 121, 249, 0.18);
    border: 1px solid rgba(232, 121, 249, 0.3);
}

/* Card Body */
.all-gp-card-body {
    padding: 10px 12px 12px;
}

.all-gp-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
    color: #e8eaf0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}

.all-gp-card:hover .all-gp-card-title {
    color: #0ff;
}

.all-gp-card-meta {
    font-size: 11px;
    color: #9ca3b8;
    font-weight: 500;
}

.all-gp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}

.all-gp-empty-icon {
    color: #6b6f85;
    opacity: 0.4;
    margin-bottom: 20px;
}

.all-gp-empty h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #e8eaf0;
}

.all-gp-empty p {
    color: #6b6f85;
    font-size: 14px;
    margin: 0 0 24px;
}

.all-gp-btn-glow {
    display: inline-block;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    color: #08090d;
    background: #0ff;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.25);
    transition: all 0.2s;
}

.all-gp-btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0, 255, 136, 0.35);
    background: #00e6e6;
}

.all-gp-pagination-nav{
    display:flex;
    justify-content:center;
    margin:45px 0 10px;
}

.all-gp-pagination{
    display:flex;
    align-items:center;
    gap:10px;
    list-style:none;
    padding:0;
    margin:0;
}

.all-gp-pagination li{
    list-style:none;
}

.all-gp-pagination li a,
.all-gp-pagination li span{

    width:42px;
    height:42px;

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

    border-radius:12px;

    background:#131826;

    color:#cfd5df;

    text-decoration:none;

    border:1px solid #23293d;

    font-weight:600;

    transition:.25s;
}

.all-gp-pagination li a:hover{

    background:#00f5ff;

    color:#06131a;

    border-color:#00f5ff;

    transform:translateY(-2px);
}

.all-gp-pagination li.active span{

    background:#00f5ff;

    color:#06131a;

    border-color:#00f5ff;

    box-shadow:0 0 15px rgba(0,245,255,.35);
}

.all-gp-pagination li.disabled span{

    opacity:.35;

    cursor:not-allowed;
}

/* ------------------- Game Type Page ------------------------------- */

.type-gp-page {
    min-height: 100vh;
    color: #e8eaf0;
    padding-bottom: 40px;
}

.type-gp-breadcrumb-bar {
    padding: 16px;
}

.type-gp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.type-gp-breadcrumb svg {
    color: #6b6f85;
    opacity: 0.4;
}

.type-gp-crumb-link {
    color: #6b6f85;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.type-gp-crumb-link:hover {
    color: var(--cat-color, #0ff);
}

.type-gp-crumb-current {
    color: #e8eaf0;
    font-weight: 600;
}

/* ==============================
       CATEGORY HEADER
    ============================== */
.type-gp-cat-header {
    position: relative;
    padding: 36px 0 32px;
    overflow: hidden;
}

.type-gp-cat-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: var(--cat-glow, rgba(0, 255, 255, 0.5));
    filter: blur(80px);
    top: -150px;
    left: 5%;
    pointer-events: none;
    animation: gp-cat-drift 8s ease-in-out infinite alternate;
}

@keyframes gp-cat-drift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(25px, 15px);
    }
}

.type-gp-cat-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
    max-width: 800px;
}

.type-gp-cat-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 90% at 50% 0%, 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, .02) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, .02) 40px);
    pointer-events: none;
}

/* Floating particles */
.type-gp-cat-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, 1px, transparent 1px),
        radial-gradient(circle, 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    opacity: .04;
    pointer-events: none;
}

.type-gp-cat-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--cat-glow, rgba(0, 255, 255, 0.5));
    border: 1px solid var(--cat-color, #0ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cat-color, #0ff);
    flex-shrink: 0;
    box-shadow: 0 4px 24px var(--cat-glow-strong, rgba(0, 255, 255, 0.38));
    position: relative;

    filter: drop-shadow(0 0 20px {
                {
                $cfg['color']
            }
        }

    );
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.type-gp-cat-text {
    flex: 1;
    min-width: 0;
}

.type-gp-cat-title {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
    color: #e8eaf0;
}

.type-gp-cat-desc {
    font-size: 14px;
    color: #6b6f85;
    margin: 0;
    line-height: 1.5;
}

.type-gp-cat-count {
    text-align: center;
    flex-shrink: 0;
    padding: 12px 20px;
    background: var(--cat-glow, rgba(0, 255, 255, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.type-gp-cat-count-num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--cat-color, #0ff);
    line-height: 1.2;
}

.type-gp-cat-count-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b6f85;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .type-gp-cat-inner {
        flex-wrap: wrap;
        gap: 14px;
    }

    .type-gp-cat-icon-wrap {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .type-gp-cat-icon-wrap svg {
        width: 22px;
        height: 22px;
    }

    .type-gp-cat-count {
        padding: 8px 16px;
    }

    .type-gp-cat-count-num {
        font-size: 20px;
    }
}

/* ==============================
       FILTER TABS
    ============================== */
.type-gp-filters {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 0;
}

.type-gp-filters-track {
    display: flex;
    gap: 6px;
    /* overflow-x: auto; */
    padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.type-gp-filters-track::-webkit-scrollbar {
    display: none;
}

.type-gp-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #6b6f85;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #0f1628;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
}

.type-gp-filter svg {
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.type-gp-filter:hover {
    color: #e8eaf0;
    background: rgba(255, 255, 255, .05);
    border-color: #1e2030;
}

.type-gp-filter:hover svg {
    opacity: 0.8;
}

.type-gp-filter.is-active {
    color: var(--cat-color);
    background: var(--cat-glow, #0ff);
    border-color: var(--cat-color, #0ff);
    box-shadow: 0 0px 16px var(--cat-glow-strong, rgba(0, 255, 255, 0.38));
}

.type-gp-filter.is-active svg {
    opacity: 1;
    stroke: var(--cat-color);
}

.type-gp-results-bar {
    padding: 14px 16px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.type-gp-results-count {
    font-size: 13px;
    color: #6b6f85;
}

.type-gp-results-count strong {
    color: #e8eaf0;
    font-weight: 600;
}

.type-gp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cat-color, #0ff);
    text-decoration: none;
    transition: gap 0.2s, opacity 0.2s;
}

.type-gp-back-link:hover {
    gap: 10px;
    opacity: 0.8;
}

.type-gp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 10px 16px 0;
}

.type-gp-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    overflow: hidden;
    background: #071426;
    border: 1px solid #1e2030;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    animation: type-gp-card-enter 0.5s ease both;
    position: relative;
}

@keyframes type-gp-card-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.type-gp-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--cat-color, #0ff);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px var(--cat-color, #0ff),
        0 0 40px var(--cat-glow, rgba(0, 255, 255, 0.5));
}

/* Thumbnail */
.type-gp-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    background: #0c0d14;
}

.type-gp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s;
    display: block;
}

.type-gp-card:hover .type-gp-card-thumb img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

/* Overlay */
.type-gp-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.type-gp-card:hover .type-gp-card-overlay {
    opacity: 1;
}

/* Play Button */
.type-gp-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cat-color, #0ff);
    color: #08090d;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px var(--cat-glow-strong, rgba(0, 255, 255, 0.38));
    position: relative;
}

.type-gp-play::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--cat-color, #0ff);
    opacity: 0;
    animation: none;
}

.type-gp-card:hover .type-gp-play {
    transform: scale(1);
}

.type-gp-card:hover .type-gp-play::before {
    animation: gp-ring-pulse 1.5s ease-out infinite;
}

@keyframes gp-ring-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Badges */
.type-gp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 3;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Multiplayer — Cyan */
.type-gp-badge--mp {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.18);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Original — Gold */
.type-gp-badge--og {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* New — Lime Green (with pulse) */
.type-gp-badge--new {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.3);
    animation: type-gp-badge-pulse 2s ease-in-out infinite;
}

@keyframes type-gp-badge-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.3);
    }

    50% {
        box-shadow: 0 0 8px 2px rgba(74, 222, 128, 0.15);
    }
}

/* Updated — Amber */
.type-gp-badge--updated {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.18);
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Popular / Hot — Red-Orange */
.type-gp-badge--popular {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Kids — Pink */
.type-gp-badge--kids {
    color: #e879f9;
    background: rgba(232, 121, 249, 0.18);
    border: 1px solid rgba(232, 121, 249, 0.3);
}

/* Card Body */
.type-gp-card-body {
    padding: 10px 12px 12px;
}

.type-gp-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
    color: #e8eaf0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}

.type-gp-card:hover .type-gp-card-title {
    color: var(--cat-color, #0ff);
}

.type-gp-card-meta {
    font-size: 11px;
    color: #6b6f85;
    font-weight: 500;
}

.type-gp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}

.type-gp-empty-icon {
    color: #6b6f85;
    opacity: 0.4;
    margin-bottom: 20px;
}

.type-gp-empty h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #e8eaf0;
}

.type-gp-empty p {
    color: #6b6f85;
    font-size: 14px;
    margin: 0 0 24px;
}

.type-gp-btn-glow {
    display: inline-block;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    color: #08090d;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.type-gp-btn-glow:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.type-gp-pagination {
    padding: 36px 24px 0;
}

.type-gp-pagination .pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.type-gp-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #6b6f85;
    background: #13151e;
    border: 1px solid #1e2030;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.type-gp-pagination .page-link:hover {
    color: #e8eaf0;
    border-color: #2a2d42;
    background: #191c28;
    transform: translateY(-1px);
}

.type-gp-pagination .page-item.active .page-link {
    color: #08090d;
    background: var(--cat-color, #0ff);
    border-color: var(--cat-color, #0ff);
    box-shadow: 0 2px 12px var(--cat-glow-strong, rgba(0, 255, 255, 0.38));
}

.type-gp-pagination .page-item.disabled .page-link {
    opacity: 0.3;
    pointer-events: none;
}

/* -------------------------- category base games ---------------------------- */
.cat-page {
    min-height: 60vh;
    padding: 16px 16px 40px;
    color: #cdd6f4;
}

.cat-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0a162;
    border: 1px solid rgba(0, 255, 255, 0.18);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.cat-hero::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.03);
    pointer-events: none;
}

.cat-hero::after {
    content: '';
    position: absolute;
    right: 60px;
    top: 30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.02);
    pointer-events: none;
}


.cat-hero-title {
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    margin: 0 0 6px;
}

.cat-hero-title em {
    color: #00ffff;
    font-style: normal;
}

.cat-hero-sub {
    font-size: 13px;
    color: #334155;
    margin: 0;
}

.cat-hero-right {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
    z-index: 1;
}

.cat-stat {
    text-align: center;
}

.cat-stat-num {
    font-size: 24px;
    font-weight: 900;
    color: #00ffff;
    letter-spacing: -1px;
}

.cat-stat-lbl {
    font-size: 10px;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 3px;
}

.cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.cat-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cat-filter {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 22px;
    border: 1px solid rgba(0, 255, 255, 0.15);
    background: #0a162;
    color: #334155;
    text-decoration: none;
    transition: all .2s;
    display: inline-block;
    white-space: nowrap;
}

.cat-filter:hover {
    color: #00ffff;
    border-color: rgba(0, 255, 255, 0.18);
    background: rgba(0, 255, 255, 0.08);
}

.cat-filter.on {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.18);
    color: #00ffff;
}

.cat-sort-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-sort-lbl {
    font-size: 11px;
    color: #334155;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cat-sort-select {
    background: #0a162;
    border: 1px solid rgba(0, 255, 255, 0.15);
    color: #cdd6f4;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5568' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.cat-sort-select:hover,
.cat-sort-select:focus {
    border-color: rgba(0, 255, 255, 0.18);
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.gcard {
    border-radius: 16px;
    background: #0a162;
    border: 1px solid rgba(0, 255, 255, 0.15);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform .2s, border-color .22s;
    text-decoration: none;
    display: block;
}

.gcard:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 255, 0.28);
}

/* Thumbnail */
.gcard-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    background: #0a1628;
}

.gcard-thumb img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    transition: transform .32s ease;
}

.gcard:hover .gcard-thumb img {
    transform: none;
}

.gcard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(2, 6, 23, .92) 0%,
            rgba(2, 6, 23, .15) 55%,
            transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    opacity: 0;
    transition: opacity .2s;
}

.gcard:hover .gcard-overlay {
    opacity: 1;
}

.gcard-play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #00ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gcard-play-tri {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 11px solid #020617;
    margin-left: 3px;
}

.gcard-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 8px;
    z-index: 2;
}

.badge-hot {
    background: rgba(234, 88, 12, .22);
    color: #fb923c;
    border: 1px solid rgba(234, 88, 12, .35);
}

.badge-new {
    background: rgba(0, 255, 255, .1);
    color: #00ffff;
    border: 1px solid rgba(0, 255, 255, .22);
}

.badge-top {
    background: rgba(245, 158, 11, .15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, .28);
}

.gcard-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #00ffff;
    opacity: 0;
    transition: opacity .2s;
}

.gcard:hover .gcard-bottom {
    opacity: 1;
}

.gcard-info {
    padding: 10px 12px 12px;
}

.gcard-title {
    font-size: 12px;
    font-weight: 700;
    color: #cdd6f4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    letter-spacing: .3px;
}

.gcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gcard-plays {
    font-size: 10px;
    color: #334155;
    font-weight: 600;
    letter-spacing: .3px;
}

.gcard-stars {
    font-size: 10px;
    color: #f59e0b;
    letter-spacing: -1px;
}

.cat-empty {
    text-align: center;
    padding: 80px 24px;
}

.cat-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.cat-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: #cdd6f4;
    margin-bottom: 8px;
}

.cat-empty p {
    font-size: 14px;
    color: #334155;
    margin-bottom: 24px;
}

.cat-empty-btn {
    display: inline-block;
    padding: 10px 28px;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.18);
    border-radius: 24px;
    color: #00ffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background .2s;
}

.cat-empty-btn:hover {
    background: rgba(0, 255, 255, 0.14);
}

html[dir="rtl"] .profile-body {
    flex-direction: row-reverse;
}

html[dir="rtl"] .profile-left,
html[dir="rtl"] .profile-right {
    text-align: right;
}

html[dir="rtl"] .friend-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .stat,
html[dir="rtl"] .profile-actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .friend-menu {
    right: auto;
    left: 0;
}

html[dir="rtl"] .location i {
    margin-left: 6px;
    margin-right: 0;
}

html[dir="rtl"] .profile-actions-btn i {
    margin-left: 6px;
    margin-right: 0;
}

html[dir="rtl"] .edit-grid {
    direction: rtl;
}

html[dir="rtl"] .edit-field label {
    text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] .avatar-upload,
html[dir="rtl"] .cover-upload {
    left: auto;
    right: 15px;
}

/* ==============================
       REDUCED MOTION
    ============================== */
@media (prefers-reduced-motion: reduce) {

    .all-gp-card,
    .all-gp-hero-glow,
    .all-gp-play::before {
        animation: none !important;
    }

    .all-gp-card,
    .all-gp-card-thumb img,
    .all-gp-play,
    .all-gp-filter,
    .all-gp-pagination .page-link {
        transition-duration: 0.01ms !important;
    }

    .type-gp-card,
    .type-gp-cat-glow,
    .type-gp-play::before {
        animation: none !important;
    }

    .type-gp-card,
    .type-gp-card-thumb img,
    .type-gp-play,
    .type-gp-filter,
    .type-gp-pagination .page-link,
    .type-gp-back-link {
        transition-duration: 0.01ms !important;
    }
}

/* ===== PRELOADER ===== */
/* ===== GLOBAL BACKGROUND ===== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #05070c;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#preloader.is-navigating {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: none;
}

/* ===== MASTER WRAPPER (SYNCHRONIZED PULSE) ===== */
.pozy-master-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pozyWowPulse 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 🎯 CENTER ORIGINAL LOGO DESIGN ===== */
.pozy-logo-center-box {
    position: absolute;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pozy-logo-center-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.5));
}

/* ===== 🌀 PREMIUM VECTOR SVG RING STYLE ===== */
.pozy-vector-ring-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    z-index: 3;
    overflow: visible;
}

.pozy-glow-track {
    fill: none;
    stroke: rgba(0, 255, 255, 0.08);
    stroke-width: 4;
}

.pozy-laser-stroke {
    fill: none;
    stroke: #00ffff;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    filter: url(#pure-cyan-glow);
    /* Stroke-dash animations are main-thread painted. The transform-based
       wrapper already supplies motion without continuous repaints. */
    stroke-dashoffset: 0;
}

/* ===== 🌊 NEW: OUTER SHOCKWAVE SCALING EFFECT ===== */
.pozy-outer-wave {
    position: absolute;
    width: 105px;
    height: 105px;
    border: 2px solid #00ffff;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    animation: outerWaveBlast 1.8s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* ==========================================
        THE "WOW" GENERATOR KEYFRAMES (THE MAGIC)
        ============================================ */

@keyframes pozyWowPulse {

    0%,
    100% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.15);
    }

    40% {
        transform: scale(0.96);
    }
}

@keyframes pozyRingDraw {
    0% {
        stroke-dashoffset: 314;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    70%,
    100% {
        stroke-dashoffset: -314;
        opacity: 0;
    }
}

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

    20% {
        opacity: 0.8;
    }

    45% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.input-error {
    color: #ff4d6d;
    font-size: 13px;
}

.email-error{
    color:#ff4d6d;
    font-size:13px;
    margin-top:10px;
    text-align:left;
}

/* =========================
   RESPONSIVE
========================= */

/* ===============================
   LARGE DESKTOP (1400px+)
================================ */

@media (min-width:1400px) {

    .poki-title {
        font-size: 54px;
    }

    .poki-card {
        width: 340px;
    }

    .eco-card {
        height: 170px;
    }

    .stat-number {
        font-size: 70px;
    }

}


/* ===============================
   LAPTOP (1200px)
================================ */

@media (max-width:1200px) {

    .poki-title {
        font-size: 48px;
    }

    .poki-text {
        font-size: 16px;
    }

    .poki-card {
        width: 250px;
        height: auto;
    }

    .poki-stack {
        height: 520px;
    }

    .project-slide {
        width: 130px;
    }

    .project-slide.active {
        width: 360px;
    }

    .fade-up.active {
        display: grid;
        grid-template-columns: repeat(4, auto);
    }

    .stat-number {
        font-size: 50px;
    }

    .all-gp-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .type-gp-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media(max-width:1100px) {
    .gz-layout {
        grid-template-columns: 1fr 280px;
    }
}

/* ===============================
   MEDIUM DEVICES (1024px)
================================ */

@media (max-width:1024px) {

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 6px;
    }

    .home-game-card.big,
    .home-game-card.wide {
        grid-column: span 2;
    }

    .game-recommended-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }
    .rec-card {
        grid-column: span 2; /* Half screen */
    }

    .featured-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .dev-hero {
        grid-template-columns: 1fr;
        height: auto;
    }

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

    .feat-card+.feat-card:nth-child(2) {
        border-left: 1px solid rgba(0, 255, 255, 0.15);
    }

    .feat-card:nth-child(odd) {
        border-left: none;
    }

    .feat-card:nth-child(3) {
        border-top: 1px solid rgba(0, 255, 255, 0.15);
    }

    .feat-card:nth-child(4) {
        border-top: 1px solid rgba(0, 255, 255, 0.15);
    }

    .flow-wrap {
        /* grid-template-columns: 1fr 1fr; */
        gap: 32px;
    }

    .flow-wrap::before {
        display: none;
    }

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

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

    .stat-block:nth-child(2)::after {
        display: none;
    }

    .showcase-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px 240px;
    }

    .showcase-card:nth-child(1) {
        grid-row: auto;
    }

    .about-eco-card {
        min-width: 220px;
        max-width: 220px;
    }

    .dev-hero-c {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .dev-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .sc:nth-child(2),
    .sc:nth-child(3) {
        margin-top: 0;
    }

    .dev-feat-grid,
    .steps-grid,
    .req-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-line {
        display: none;
    }

    .met-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (min-width: 768px) and (max-width: 1023px) {
    .flow-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .flow-step {
        width: 100%;
    }
}

/* ===============================
   TABLET (992px)
================================ */

@media (max-width:992px) {

    .poki-row {
        flex-direction: column;
        text-align: center;
    }

    .poki-left {
        order: 1;
    }

    .poki-right {
        order: 2;
        margin-top: 20px;
        padding: 0px;
    }

    .poki-title {
        font-size: 42px;
    }

    .poki-text {
        margin: auto;
    }

    .poki-stack {
        height: auto;
    }

    .poki-card {
        position: relative;
        width: auto;
        margin-bottom: 20px;
        top: auto !important;
        right: auto !important;
    }

    .ecosystem {
        padding: 80px 10px;
    }

    .project-slider-wrapper {
        padding-top: 0px;
    }

    .project-slide {
        width: 109px;
    }

    .project-slide.active {
        width: 250px;
    }

    .eco-card {
        padding: 25px;
        height: 180px;
    }

    .stats {
        padding: 80px 10px;
    }

    .stat-number {
        font-size: 46px;
    }

    .cta h2 {
        margin-top: 5px;
        margin-bottom: 20px;
    }

    .game-toolbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .toolbar-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

}

@media(max-width:991px){

    .gz-info{
        flex-direction:column;
    }

    .gz-info-right{
        width:100%;
    }

    .gz-info-right .adsbygoogle,
    .gz-info-right .ad-block{
        width:100% !important;
        max-width:300px;
        margin:auto;
    }
}

@media (max-width: 900px) {
    .gz-widget { flex: 1 1 auto; }

    .gz-layout {
        grid-template-columns: 1fr;
    }

    .gz-right {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        padding: 20px 16px 30px;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ===============================
    SMALL LAPTOP (1440px)
================================ */

@media (max-width:1440px) and (min-width: 1024px) {
    .sidebar {
        width: 15%;
    }

    .content {
        width: 85%;
    }

    .ad-300x250 {
        width: auto;
    }

    .game-toolbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .toolbar-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

}

/* ===============================
    SMALL LAPTOP (768px)
================================ */

@media (max-width:768px) {

    .hero {
        height: 50vh;
        padding: 10px;
    }

    .poki-showcase {
        padding: 80px 10px;
    }

    .poki-container {
        width: 100%;
    }

    .glow {
        font-size: 36px;
    }

    .poki-title {
        font-size: 34px;
        line-height: 1.2;
    }

    .poki-text {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .poki-btn {
        padding: 14px 32px;
        font-size: 14px;
        margin-top: 0px;
    }

    .btn-outline-glow {
        padding: 14px 32px;
        font-size: 14px;
        margin: 0px;
    }

    .stat-number {
        font-size: 40px;
    }

    .stat-label {
        font-size: 13px;
    }

    .eco-card h4 {
        font-size: 18px;
    }

    .eco-card p {
        font-size: 14px;
    }

    .cta {
        padding: 80px 10px;
    }

    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dev-hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

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

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

    .flow {
        gap: 20px;
    }

    .hero-left h1 {
        font-size: 42px;
    }

    .sidebar {
        position: fixed;
        width: 10%;
        height: 100vh;
        z-index: 999;
        transition: 0.3s;
    }

    .sidebar.collapsed {
        left: 0;
        width: 80px;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .main {
        width: 100%;
    }

    .content {
        padding: 10px;
    }

    .menu li a {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 10px;
        align-content: center;
        justify-content: center;
    }

    .menu li a i {
        font-size: 13px;
        width: 30px;
    }

    .menu li a span {
        display: none;
    }

    .menu li.active a span {
        display: none;
    }

    .edit-header {
        text-align: center;
    }

    .policy-container {
        padding: 20px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-image img {
        margin: auto;
    }

    .contact-section {
        margin-top: 40px;
    }

    .game-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .home-game-card.big,
    .home-game-card.wide {
        grid-column: span 2;
    }

    .home-game-card.small,
    .home-game-card.tall {
        grid-column: span 1;
    }

    .game-recommended-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .rec-card {
        grid-column: span 2; /* Half screen */
    }

    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-col:nth-child(1),
    .featured-col:nth-child(6) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gp-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ORDER FIX */
    .gp-left-ad {
        order: 2;
    }

    .gp-center {
        order: 1;
    }

    .gp-right-col {
        order: 3;
    }

    /* FULL WIDTH EVERYTHING */
    .gp-left-ad,
    .gp-center,
    .gp-right-col {
        width: 100%;
    }

    /* FIX RIGHT COLUMN */
    .gp-right-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ADS FIX */
    .ad-160x600,
    .ad-300x250 {
        width: 100%;
        height: auto;
        min-height: 100px;
    }

    /* PLAYER FIX */
    .player-wrap {
        max-width: 100%;
        height:75vh;
        border-radius: 10px;
    }

    .game-play-card {
        text-align: center;
        padding: 15px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(20px);
        border: 2px solid rgba(255, 255, 255, 0.1);
        transition: 0.3s;
        width: 190px;
        height: 210px;
    }

    .game-center-img {
        width: 90px;
        height: auto;
    }

    .game-card-title {
        font-size: 12px;
    }

    .game-play-btn {
        height: 35px;
        font-size: 12px;
    }

    .game-play-btn span {
        font-size: 12px;
    }

    /* ACTION BAR SCROLL */
    .action-bar {
        overflow-x: auto;
        /* flex-wrap: nowrap; */
        gap: 8px;
    }

    .action-btn {
        flex-shrink: 0;
    }

    /* GAME INFO */
    .game-info-section {
        padding: 14px;
    }

    .game-info-title {
        font-size: 18px;
    }

    .game-info-thumb {
        width: 55px;
        height: auto;
    }

    /* META */
    .meta-table {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* RELATED */
    .related-item {
        padding: 10px;
    }

    .ad-block {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ad-300x250 {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }

    .ad-placeholder {
        width: 100%;
        height: 120px;
    }

    .search-wrapper {
        width: 100%;
    }

    button.btn.btn-dark.dropdown-toggle {
        padding: 10px;
    }

    .topbar {
        gap: 10px;
    }

    .all-gp-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 10px 16px 0;
    }

    .all-gp-filters-track {
        display: flex;
        gap: 6px;
        padding: 0 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: wrap;
        align-content: stretch;
        justify-content: space-evenly;
    }

    .all-gp-results-bar {
        padding: 14px 16px 4px;
    }

    .all-gp-hero {
        padding: 40px 0 28px;
    }

    .type-gp-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 10px 16px 0;
    }

    .type-gp-filters-track {
        display: flex;
        gap: 6px;
        padding: 0 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: wrap;
        align-content: stretch;
        justify-content: space-evenly;
    }

    .type-gp-results-bar {
        padding: 14px 16px 4px;
    }

    .type-gp-cat-header {
        padding: 28px 0 24px;
    }

    .type-gp-cat-inner {
        padding: 0 16px;
    }

    .cat-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 22px 20px;
    }

    .cat-hero-right {
        gap: 20px;
        width: 100%;
        justify-content: flex-start;
    }

    .cat-hero-title {
        font-size: 24px;
    }

    .cat-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .about-eco-card {
        min-width: 200px;
        max-width: 200px;
    }

    .about-hero-content {
        padding: 0 24px;
    }

    .ab-stats {
        padding: 80px 24px;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 220px 220px 220px;
    }

    .showcase-card:nth-child(1) {
        grid-row: auto;
    }

    .showcase-card:nth-child(4) {
        grid-column: auto;
    }

    .mission-section,
    .timeline-section,
    .eco-section {
        padding: 80px 24px;
    }

    .cta-section {
        padding: 80px 24px;
    }

    .stat-block::after {
        display: none;
    }

    .slide-3d {
        width: 280px;
        height: 220px;
    }

    .slider-wrapper {
        height: 320px;
    }

    .gh-footer {
        padding: 40px 24px;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    .timeline {
        max-width: 600px;
    }

    .timeline-content {
        width: 80%;
        margin: auto;
    }

    .hdr {
        padding: 0 16px;
    }

    .hdr-nav {
        display: none;
    }

    .hero {
        padding: 100px 20px 60px;
        min-height: auto;
    }

    .sec {
        padding: 80px 20px;
    }

    .met-sec {
        padding: 60px 20px;
    }

    .cta-sec {
        padding: 80px 20px;
    }

    .cta-box {
        padding: 48px 28px;
    }

    .dev-feat-grid,
    .steps-grid,
    .req-grid {
        grid-template-columns: 1fr;
    }

    .dev-hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sc {
        padding: 20px 18px;
    }

    .sc .sn {
        font-size: 26px;
    }

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

    .met-i {
        padding: 32px 20px;
    }

    .met-v {
        font-size: 32px;
    }

    .dev-hero-acts {
        flex-direction: column;
    }

    .cta-acts {
        flex-direction: column;
    }

    .ftr-in {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .ftr-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cur-dot,
    .cur-glow {
        display: none;
    }

    .geo {
        display: none;
    }
}

@media (min-width: 768px) {

    /* -----------------------------------------
       MAIN: sidebar + content same height
       ----------------------------------------- */
    .main-wrapper {
        display: flex !important;
        align-items: stretch !important;
        width: 100%;
        min-width: 0;
        padding-top: 64px;
        overflow: visible !important;
    }


    /* -----------------------------------------
       SIDEBAR WRAPPER
       Only background/layout column
       NOT fixed, NOT sticky
       ----------------------------------------- */
    .sidebar,
    .command-sidebar {
        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        flex: 0 0 58px;
        width: 58px !important;

        /* sidebar = content height */
        height: auto !important;
        min-height: 100% !important;

        align-self: stretch !important;

        margin: 0 !important;

        /* VERY IMPORTANT for sticky child */
        overflow: visible !important;

        box-sizing: border-box;
        z-index: 2;
    }


    /* Expanded sidebar */
    .command-sidebar:not(.collapsed) {
        flex: 0 0 204px;
        width: 204px !important;
    }


    /* -----------------------------------------
       SIDEBAR MENU
       This is the part that stays visible
       ----------------------------------------- */
    .command-sidebar > .command-nav {
        position: sticky !important;

        /* 64px header + 8px spacing */
        top: 72px !important;

        /* IMPORTANT:
           Don't allow flex:1 to stretch nav
           to entire content height */
        flex: 0 0 auto !important;

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

        align-self: flex-start !important;

        /* Menu remains inside viewport.
           If menu itself becomes taller,
           only sidebar menu will scroll. */
        max-height: calc(100dvh - 80px);

        overflow-x: hidden !important;
        overflow-y: auto !important;

        scrollbar-width: none;

        z-index: 5;
    }

    .command-sidebar > .command-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }


    /* Collapsed sidebar has another old
       overflow rule, override that too */
    .command-sidebar.collapsed > .command-nav {
        position: sticky !important;
        top: 72px !important;

        flex: 0 0 auto !important;

        height: auto !important;
        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /* -----------------------------------------
       CONTENT
       ----------------------------------------- */
    .content,
    .game-page .content {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;

        margin-top: 0 !important;
        margin-inline-start: 0 !important;

        box-sizing: border-box;
    }


    .command-sidebar:not(.collapsed) ~ .content {
        width: auto !important;
        margin-inline-start: 0 !important;
    }


    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */
    .game-footer {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box;
    }
}

@media (max-width: 640px) {

    .dev-hero,
    .dev-section,
    .cta-band,
    .dev-rule {
        padding-left: 24px;
        padding-right: 24px;
    }

    .dev-hero h1 {
        font-size: 36px;
    }

    .feat-grid,
    .flow-wrap,
    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .feat-card+.feat-card {
        border-left: none;
        border-top: 1px solid rgba(0, 255, 255, 0.15);
    }

    .section-title {
        font-size: 28px;
    }

    .flow-step {
        width: 100%;
    }

    .gz-player { aspect-ratio: auto; border-radius: 8px; }

    .gz-info { padding: 16px; }
    .gz-info-head h2 { font-size: 17px; }

    .gz-right { flex-direction: column; }
}

@media(max-width:576px){
    .gz-related-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .gz-related-card img{
        height:auto;
    }
}

@media (max-width: 520px) {
    .all-gp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .all-gp-pagination-nav,
    .all-gp-pagination {
        max-width: 100%;
    }

    .all-gp-pagination-nav {
        padding-inline: 8px;
    }

    .all-gp-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .all-gp-pagination li a,
    .all-gp-pagination li span {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .type-gp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}


/* ===============================
   SMALL MOBILE (480px)
================================ */

@media (max-width:480px) {

    /* Always show favicon on mobile */
    .main-logo {
        display: none !important;
    }

    .favicon-logo {
        display: block !important;
    }

    .topbar-left {
        gap: 15px;
    }

    .glow {
        font-size: 28px;
    }

    .poki-title {
        font-size: 28px;
    }

    .poki-text {
        font-size: 14px;
    }

    .poki-btn {
        width: 100%;
    }

    .stats .row {
        gap: 40px;
        display: grid;
        grid-template-columns: repeat(2, auto);
    }

    .stat-number {
        font-size: 34px;
    }

    .ecosystem {
        padding: 80px 10px;
    }

    .eco-card {
        padding: 25px;
    }

    .cta h2 {
        font-size: 26px;
    }

    .btn-glow {
        width: 100%;
        margin: 10px 0;
    }

    .project-slider-wrapper {
        width: 100%;
    }

    .project-slide {
        width: 0;
        opacity: 0;
        right: 0 !important;
        pointer-events: none;
    }

    .project-slide.active {
        width: stretch;
        opacity: 1;
        pointer-events: auto;
        padding: 0px;
    }

    .sidebar {
        width: 15%;
        margin-top: 125px;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 10px;
        gap: 10px;
    }

    /* FIRST ROW */
    .topbar>div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
    }

    /* RIGHT ICONS */
    .topbar-icons {
        gap: 15px;
        justify-content: space-around;
    }

    .top-icon {
        font-size: 25px;
    }

    /* login right side */
    .ms-auto {
        display: flex;
        justify-content: flex-end;
    }

    /* search second row */
    .search-box {
        width: 100%;
        flex-basis: 100%;
        order: 3;
    }

    .search-wrapper {
        position: relative;
        width: 100%;
    }

    .search-wrapper input {
        width: 100%;
        padding: 8px 35px 8px 12px;
        font-size: 14px;
        border-radius: 20px;
    }

    .search-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
    }

    .clear-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        cursor: pointer;
    }

    .content {
        margin-top: 150px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .footer-brand .logo,
    .footer-brand p {
        text-align: start;
    }

    .about-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 20px 10px;
    }

    .about-hero-title {
        font-size: 40px;
    }

    .hero-scroll-indicator {
        bottom: 0px;
    }

    .floating-icons {
        display: none;
    }

    .categories-card {
        display: block;
    }

    .poki-showcase {
        padding: 80px 0px;
    }

    .side-panel {
        width: 375px;
    }

    .invite-btn {
        margin-bottom: 10px;
    }

    .liked-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .profile-body {
        flex-direction: column;
    }

    .profile-right {
        width: 100%;
    }

    .edit-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    /* 🔥 Prevent layout break */
    .home-game-card.big,
    .home-game-card.wide {
        grid-column: span 2;
        aspect-ratio: 1 / 1;
    }

    .home-game-card.small {
        grid-column: span 1;
    }

    .home-game-card.tall {
        grid-column: span 1;
        aspect-ratio: 1 / 1;
    }

    .game-recommended-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .rec-card {
        grid-column: span 1; /* Ek ek card dikhegi */
    }

    .slide-3d {
        width: 240px;
        height: 190px;
    }

    .slider-wrapper {
        height: 280px;
    }

    .about-eco-card {
        min-width: 260px;
        max-width: 260px;
    }

    .timeline::before {
        left: 8px;
    }

    .timeline-dot {
        margin-left: 0;
    }

    .timeline-section {
        padding: 60px 16px;
    }

    .timeline-content {
        width: 80%;
        margin: auto;
    }

    .player-wrap {
        height:70vh;
    }
}

/* 🔥 EXTRA SMALL DEVICES (320px) */
@media (max-width: 380px) {

    .dev-hero {
        padding: 40px 16px;
        gap: 30px;
        grid-template-columns: 1fr;
        height: auto;
    }

    .dev-hero-left {
        text-align: left;
    }

    .dev-hero h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    .dev-hero-left p {
        font-size: 14px;
    }

    .dev-hero-desc {
        font-size: 13px;
        line-height: 1.6;
        max-width: 100%;
    }

    /* 🔘 Buttons stack */
    .dev-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    a.btn.btn-p.mag,
    a.btn.btn-g.mag {
        width: stretch;
    }

    .btn {
        justify-content: center;
        padding: 12px;
        font-size: 13px;
    }

    /* 📊 Stats grid fix */
    .dev-stat-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dev-stat-card {
        padding: 16px;
    }

    .dev-stat-num {
        font-size: 22px;
    }

    .dev-stat-label {
        font-size: 10px;
    }

    /* 🤝 Trust text wrap */
    .dev-hero-trust {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 10px;
    }
}


/* ===============================
   EXTRA SMALL (360px)
================================ */

@media (max-width:360px) {

    .poki-title {
        font-size: 24px;
    }

    .stat-number {
        font-size: 30px;
    }

    .eco-card h4 {
        font-size: 16px;
    }

    .eco-card p {
        font-size: 13px;
    }

    .sidebar {
        width: 20%;
    }

    .side-panel {
        width: 320px;
    }

}

/* Game viewport: iframe and toolbar share the exact remaining screen height. */
.gz-player,
.gz-player:fullscreen,
.gz-player:-webkit-full-screen {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    min-height: 0;
    margin: 0;
}

.gz-player:fullscreen,
.gz-player:-webkit-full-screen {
    border-radius: 0;
}

.gz-player > .player-wrap,
.gz-player:fullscreen > .player-wrap,
.gz-player:-webkit-full-screen > .player-wrap {
    min-height: 0;
    height: 100%;
    margin: 0;
    width: 100%;
    align-self: stretch;
}

.gz-player > .game-toolbar {
    flex: 0 0 auto;
}

@media (max-width: 1440px) {
    .game-toolbar {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .toolbar-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 5px;
    }

    .action-btn,
    .react-btn,
    .btn-fullscreen {
        padding: 7px 9px;
    }
}

@media (max-width: 768px) {
    #gameContainer {
        gap: 12px;
        padding: 10px;
    }

    #gameContainer > .gz-player { order: 1; }
    #gameContainer > .gp-left-ad { order: 2; }

    .gz-player > .player-wrap {
        height: auto;
        max-width: 100%;
    }

    .game-toolbar {
        margin-top: 5px;
        padding: 6px;
        gap: 5px;
    }

    .toolbar-thumb {
        width: 42px;
        border-radius: 8px;
    }

    .toolbar-info { gap: 7px; }
    .toolbar-content h1 { font-size: 14px; }
    .toolbar-content > span { display: none; }
    .toolbar-actions { gap: 3px; }

    .action-btn {
        padding: 6px 7px;
    }

    .action-btn .btn-icon {
        font-size: 14px;
        margin: 0;
    }

    .action-btn #favText { display: none; }

    .react-btn,
    .react-btn span,
    .btn-fullscreen { font-size: 12px; }

    .react-btn,
    .btn-fullscreen { padding: 6px 7px; }
}

@media (max-width: 420px) {
    .toolbar-content { display: none; }
    .toolbar-thumb { width: 36px; }
    .toolbar-actions { flex: 1 1 auto; }
}
/* =========================================================
   COMPACT GAME PORTAL SHELL
   A PozyGame-specific layout inspired by proven game portals.
   ========================================================= */

.topbar {
    height: 64px;
    padding: 10px 18px;
    gap: 18px;
    background: rgba(10, 17, 35, .96);
    border-bottom-color: rgba(0, 234, 255, .72);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
    backdrop-filter: blur(18px);
}

.topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start !important;
    gap: 18px;
}

.topbar-left .topbar-logo-wrap,
.topbar-left .search-box {
    flex: 0 0 auto;
    margin-inline: 0;
}

.topbar-icons {
    flex: 0 0 auto;
}

.toggle-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.toggle-btn:hover {
    font-size: 20px;
    transform: none;
    background: transparent;
}

#toggleSidebar {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#toggleSidebar:hover,
#toggleSidebar:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.toggle-btn__lines {
    width: 22px;
    display: grid;
    gap: 4px;
}

.toggle-btn__lines span {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 2px;
    background: #00eaff;
}

.search-box,
.search-wrapper {
    width: min(36vw, 420px);
}

.search-wrapper input {
    height: 42px;
    border-radius: 14px;
    background: #172138;
    border: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.search-wrapper input:focus {
    outline: none;
    background: #1b2741;
    border-color: rgba(0, 234, 255, .34);
    box-shadow: 0 0 0 3px rgba(0, 234, 255, .08);
}

.search-results {
    width: min(36vw, 420px);
}

.main-wrapper {
    min-width: 0;
}

.sidebar {
    position: fixed;
    inset: 64px auto 0 0;
    z-index: 998;
    width: 236px;
    height: calc(100dvh - 64px);
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(5, 11, 27, .97);
    border-inline-end: 1px solid rgba(0, 234, 255, .16);
    box-shadow: 18px 0 40px rgba(0, 0, 0, .28);
    transform: translateX(0);
    transition: width .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1);
}

.sidebar.collapsed {
    width: 58px;
    padding: 8px;
    border-inline-end: 1px solid rgba(0, 234, 255, .12);
    transform: translateX(0);
}

.sidebar.collapsed ul {
    display: block;
}

.sidebar .menu {
    margin: 0;
    padding: 2px;
}

.sidebar .menu li {
    margin-bottom: 6px;
}

.sidebar .menu hr {
    margin: 6px 4px;
    opacity: .16;
}

.sidebar .menu li a {
    min-height: 42px;
    padding: 10px 11px;
    border-radius: 11px;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar .menu li a:hover,
.sidebar .menu li.active a {
    background: rgba(0, 234, 255, .10);
    color: #00eaff;
    transform: translateX(2px);
}

.sidebar .menu li a:hover span,
.sidebar .menu li.active a span {
    color: inherit;
    text-decoration: none;
    transform: none;
    padding-left: 0;
}

.sidebar.collapsed .menu li a {
    justify-content: center;
    padding-inline: 8px;
}

.sidebar.collapsed .menu li a span,
.sidebar.collapsed .menu li.active a span {
    display: none;
}

.content {
    width: calc(100% - 58px);
    margin-inline-start: 58px;
    margin-top: 64px;
    padding-top: 8px;
    transition: width .24s cubic-bezier(.2,.8,.2,1), margin .24s cubic-bezier(.2,.8,.2,1);
}

.game-page .content {
    width: calc(100% - 58px);
    padding: 8px 16px 32px;
}

.home-page .content {
    padding-top: 8px;
}

.home-page .home-content-shell {
    padding-top: 0;
}

/* Keep every front-end page close to the fixed header. Individual views
   previously stacked their own top padding on the shared content padding. */
.categories-page,
.cat-page,
.tag-page-wrap,
.tags-index-page {
    padding-top: 0;
}

.type-gp-breadcrumb-bar {
    padding-top: 0;
}

.all-gp-hero {
    padding-top: 12px;
}

.game-page .gz-page { animation: none; }

@keyframes pozyGamePageEnter {
    from { opacity: 0; transform: scale(.985) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.game-page .gz-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    gap: 12px;
    min-height: 0;
}

.game-page #gameContainer {
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 0;
    justify-content: center;
    background: #050b1b;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 16px 42px rgba(0,0,0,.34);
    transition: transform .22s ease, box-shadow .22s ease;
}

.game-page #gameContainer:focus-within {
    box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(0,234,255,.22);
}

.game-page .gz-player {
    border-radius: 0;
}

.game-page .player-wrap,
.game-page .play-overlay {
    border-radius: 0;
}

.game-page .game-toolbar {
    margin-top: 0;
    border-width: 1px 0 0;
    border-radius: 0;
    padding: 3px 8px;
    height: 44px;
    min-height: 44px;
    overflow: visible;
    position: relative;
    z-index: 10001;
}

/* Accessible secondary text: keep muted styling without falling below WCAG AA. */
.login-divider span,
.login-terms,
.gz-info-stats,
.gz-meta-lbl,
.gz-lb-empty p,
.pozy-ad__name,
.pozy-ad__preview small {
    color: #94a3b8;
}

.game-page .toolbar-thumb {
    width: 34px;
    max-height: 34px;
    border-radius: 4px;
}

.game-page .toolbar-info {
    gap: 8px;
}

.game-page .toolbar-content h1 {
    font-size: 14px;
}

.game-page .toolbar-content span {
    font-size: 11px;
}

.game-page .toolbar-actions {
    gap: 6px;
    flex-wrap: nowrap;
    overflow: visible;
}

.game-page .toolbar-actions .action-btn,
.game-page .toolbar-actions .btn-fullscreen {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    position: relative;
}

.game-page .toolbar-actions .btn-fullscreen,
.game-page .toolbar-actions .btn-fullscreen:hover,
.game-page .toolbar-actions .btn-fullscreen:focus-visible {
    background: #111a2d;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #eef2ff;
}

.game-page .toolbar-actions .toolbar-reaction-btn {
    width: auto;
    height: 34px;
    min-width: 48px;
    min-height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1;
    position: relative;
}

.game-page .toolbar-reaction-btn i,
.game-page .toolbar-reaction-btn span {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
}

/* Reaction Active Highlight & Bounce Animation */
.toolbar-reaction-btn.active-like,
.react-btn.active-like,
.toolbar-reaction-btn[data-user-reaction="like"][data-reaction-btn="like"],
.react-btn[data-user-reaction="like"][data-reaction-btn="like"] {
    background: rgba(0, 234, 255, 0.15) !important;
    border: 1px solid rgba(0, 234, 255, 0.4) !important;
}

.toolbar-reaction-btn.active-like i,
.react-btn.active-like i,
.toolbar-reaction-btn.active-like span,
.react-btn.active-like span,
.toolbar-reaction-btn[data-user-reaction="like"][data-reaction-btn="like"] i,
.react-btn[data-user-reaction="like"][data-reaction-btn="like"] i,
.toolbar-reaction-btn[data-user-reaction="like"][data-reaction-btn="like"] span,
.react-btn[data-user-reaction="like"][data-reaction-btn="like"] span {
    color: #00eaff !important;
}

.toolbar-reaction-btn.active-dislike,
.react-btn.active-dislike,
.toolbar-reaction-btn[data-user-reaction="dislike"][data-reaction-btn="dislike"],
.react-btn[data-user-reaction="dislike"][data-reaction-btn="dislike"] {
    background: rgba(255, 77, 77, 0.15) !important;
    border: 1px solid rgba(255, 77, 77, 0.4) !important;
}

.toolbar-reaction-btn.active-dislike i,
.react-btn.active-dislike i,
.toolbar-reaction-btn.active-dislike span,
.react-btn.active-dislike span,
.toolbar-reaction-btn[data-user-reaction="dislike"][data-reaction-btn="dislike"] i,
.react-btn[data-user-reaction="dislike"][data-reaction-btn="dislike"] i,
.toolbar-reaction-btn[data-user-reaction="dislike"][data-reaction-btn="dislike"] span,
.react-btn[data-user-reaction="dislike"][data-reaction-btn="dislike"] span {
    color: #ff4d4d !important;
}

@keyframes reactBounceAnim {
    0% { transform: scale(1); }
    50% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.react-bounce {
    animation: reactBounceAnim 0.3s ease-in-out !important;
}

.game-page .toolbar-actions button {
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.game-page .toolbar-actions button:hover {
    transform: translateY(-2px);
}

.game-page .toolbar-icon-btn .btn-icon,
.game-page .toolbar-icon-btn > i {
    margin: 0;
    line-height: 1;
}

.game-page .toolbar-icon-btn > i {
    color: #eef2ff;
    font-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.game-page .toolbar-icon-btn[data-tooltip="Favorite"] > i {
    color: #ff5f85;
}

.game-page .toolbar-icon-btn[data-tooltip="Rate"] > i {
    color: #ffc928;
}

.game-page .toolbar-icon-btn[data-tooltip="Report"] > i {
    color: #ff6577;
}

.game-page .toolbar-icon-btn[data-tooltip="Reload"] > i {
    color: #48d7ff;
}

.game-page .toolbar-icon-btn[data-tooltip="Fullscreen"] > i {
    color: #7cf8e9;
}

.game-page .toolbar-icon-btn::after,
.game-page .toolbar-reaction-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 10020;
    left: 50%;
    bottom: calc(100% + 8px);
    translate: -50% 3px;
    padding: 5px 8px;
    border-radius: 5px;
    background: #303344;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, translate .14s ease, visibility .14s ease;
}

.game-page .toolbar-icon-btn:hover::after,
.game-page .toolbar-icon-btn:focus-visible::after,
.game-page .toolbar-reaction-btn:hover::after,
.game-page .toolbar-reaction-btn:focus-visible::after {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

.game-page .toolbar-icon-btn::before,
.game-page .toolbar-reaction-btn::before {
    content: "";
    position: absolute;
    z-index: 10019;
    left: 50%;
    bottom: calc(100% + 3px);
    translate: -50% 2px;
    border: 5px solid transparent;
    border-top-color: #303344;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, translate .14s ease, visibility .14s ease;
}

.game-page .toolbar-icon-btn:hover::before,
.game-page .toolbar-icon-btn:focus-visible::before,
.game-page .toolbar-reaction-btn:hover::before,
.game-page .toolbar-reaction-btn:focus-visible::before {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

/* Keep the final tooltip completely inside the right edge of the player. */
.game-page .toolbar-actions .toolbar-icon-btn:last-child::after {
    left: auto;
    right: 0;
    translate: 0 3px;
}

.game-page .toolbar-actions .toolbar-icon-btn:last-child:hover::after,
.game-page .toolbar-actions .toolbar-icon-btn:last-child:focus-visible::after {
    translate: 0 0;
}

.game-page .toolbar-actions .toolbar-icon-btn:last-child::before {
    left: auto;
    right: 9px;
    translate: 0 2px;
}

.game-page .toolbar-actions .toolbar-icon-btn:last-child:hover::before,
.game-page .toolbar-actions .toolbar-icon-btn:last-child:focus-visible::before {
    translate: 0 0;
}

.game-page .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gp-below-game-ad {
    width: min(100%, 760px);
    height: 90px;
    min-height: 90px;
    margin: 12px auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    contain: layout paint;
}

.game-page .gz-player.toolbar-compact .game-toolbar {
    padding-inline: 5px;
}

.game-page .gz-player.toolbar-compact .toolbar-content {
    display: none;
}

.game-page .gz-player.toolbar-compact .toolbar-info {
    flex: 0 0 auto;
    gap: 4px;
}

.game-page .gz-player.toolbar-compact .toolbar-thumb {
    width: 30px;
    max-height: 30px;
}

.game-page .gz-player.toolbar-compact .toolbar-actions {
    flex: 0 0 auto;
    gap: 3px;
}

.game-page .gz-player.toolbar-compact .toolbar-actions .action-btn,
.game-page .gz-player.toolbar-compact .toolbar-actions .btn-fullscreen {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    flex-basis: 30px;
    font-size: 12px;
}

.game-page .gz-player.toolbar-compact .toolbar-actions .toolbar-reaction-btn {
    height: 30px;
    min-height: 30px;
    min-width: 39px;
    padding: 0 5px;
    gap: 3px;
    border-radius: 15px;
    font-size: 11px;
}

.gp-below-game-ad .ad-block,
.gp-below-game-ad .adsbygoogle {
    width: min(100%, 728px);
    max-width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto;
}

.back-to-game-row {
    position: sticky;
    top: 72px;
    z-index: 990;
    width: 100%;
    height: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .18s ease, translate .18s ease;
}

.back-to-game-row.is-visible {
    opacity: 1;
    translate: 0 0;
}

.back-to-game-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 18px;
    border: 1px solid rgba(0, 234, 255, .42);
    border-radius: 999px;
    background: linear-gradient(135deg, #10213a, #07334a);
    color: #f3fbff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .42), 0 0 18px rgba(0, 234, 255, .14);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.back-to-game-btn i:first-child {
    color: #7cf8e9;
    font-size: 11px;
}

.back-to-game-btn i:nth-child(2) {
    color: #36d8ff;
}

.back-to-game-btn:hover,
.back-to-game-btn:focus-visible {
    transform: translateY(-2px);
    border-color: #00eaff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .48), 0 0 22px rgba(0, 234, 255, .24);
    outline: none;
}

.game-page .gz-right {
    padding: 12px;
    gap: 12px;
    border-radius: 14px;
}

.game-page .gz-info {
    border-radius: 14px;
}

@media (max-width: 1050px) {
    .game-page .gz-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .game-page .gz-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 901px) and (max-width: 1050px) {

    .game-page .gz-right {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    /* Leaderboard */
    .game-page .gz-right > .gz-widget:first-child {
        grid-column: 1;
        min-width: 0;
    }

    /* Advertisement */
    .game-page .gz-right > .pozy-ad--300x250 {
        grid-column: 2;
        min-width: 0;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Related Games - FULL ROW */
    .game-page .gz-right > .gz-widget:last-child {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
    }

    /* Related games automatically use available width */
    .game-page .gz-right > .gz-widget:last-child
    .gz-related-grid-horizontal {
        width: 100%;
        grid-template-columns:
            repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .gz-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .game-page .gz-related-card-mini {
        min-width: 0;
        width: 100%;
    }

    .game-page .gz-related-card-mini img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   MOBILE HEADER + SEARCH EXPERIENCE
   Desktop header remains unchanged; mobile uses compact icon controls.
   ========================================================= */
.mobile-search-trigger,
.mobile-search-panel,
.mobile-sidebar-language,
.mobile-login-icon {
    display: none;
}

.top-login-button .top-login-label {
    display: inline;
}

/* Keep the desktop language switcher in exactly the same flex position even
   though its node is moved into the mobile sidebar at small widths. */
.desktop-language-mount,
#languageSwitcherSlot {
    display: contents;
}

.mobile-search-panel {
    color: #f8fafc;
}

.mobile-search-panel a {
    text-decoration: none;
}

/* Tablet and compact laptop header: retain the primary controls while
   removing lower-priority icons before they can overlap the search. */
@media (min-width: 761px) and (max-width: 1024px) {
    .topbar {
        padding-inline: 12px;
        gap: 10px;
    }

    .topbar-left {
        flex: 1 1 auto;
        gap: 12px;
    }

    .topbar-logo-wrap {
        flex: 0 1 180px !important;
        min-width: 132px;
        max-width: 180px;
    }

    .topbar-logo-wrap .main-logo,
    .topbar-logo-wrap .sidebar-logo {
        max-width: 100%;
    }

    .topbar-logo-wrap .sidebar-logo {
        object-fit: contain;
    }

    .search-box,
    .search-wrapper {
        flex: 1 1 240px !important;
        width: auto;
        min-width: 170px;
        max-width: 360px;
    }

    .search-results {
        width: min(44vw, 360px);
    }

    .topbar-icons {
        gap: 7px;
    }

    .topbar-icons .btn.btn-dark.dropdown-toggle {
        height: 40px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .topbar-icons .btn-neon {
        height: 40px;
        padding-inline: 14px;
        white-space: nowrap;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .topbar-icons > .notification-wrapper,
    .topbar-icons > #openMyGames,
    .topbar-icons > .friends-icon-wrapper {
        display: none;
    }
}

@media (max-width: 760px) {
    .topbar {
        height: 58px;
        padding: 6px 7px;
        gap: 4px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .topbar-left {
        display: flex !important;
        flex: 0 0 auto;
        min-width: 0;
        gap: 4px;
        justify-content: flex-start !important;
    }

    .toggle-btn {
        flex: 0 0 34px;
        width: 34px;
        height: 38px;
        border-radius: 10px;
    }

    .toggle-btn__lines {
        width: 20px;
    }

    .sidebar {
        inset-block-start: 58px;
        width: min(84vw, 292px);
        height: calc(100dvh - 58px);
    }

    .sidebar.collapsed {
        width: min(84vw, 292px);
        transform: translateX(-102%);
        border: 0;
    }

    .sidebar.collapsed ul {
        display: block;
    }

    .sidebar.collapsed .menu li a {
        justify-content: flex-start;
    }

    .sidebar.collapsed .menu li a span,
    .sidebar.collapsed .menu li.active a span {
        display: inline;
        position: static;
        background: none;
        color: inherit;
        padding: 0;
        box-shadow: none;
    }

    .command-sidebar,
    .command-sidebar.collapsed,
    body.command-sidebar-open .command-sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .command-sidebar > .command-nav,
    .command-sidebar.collapsed > .command-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .mobile-sidebar-language {
        flex: 0 0 auto;
        display: block;
        margin-top: 8px;
        padding: 10px 8px 2px;
        border-top: 1px solid rgba(0, 234, 255, .14);
        background: linear-gradient(180deg, rgba(8, 17, 35, .15), rgba(8, 17, 35, .96) 30%);
    }

    .mobile-sidebar-language__label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 8px;
        color: #8695ad;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .mobile-sidebar-language__label i {
        color: #00eaff;
    }

    #mobileLanguageMount,
    #mobileLanguageMount > *,
    #mobileLanguageMount .pozy-language-dropdown {
        width: 100%;
        max-width: 100%;
    }

    #mobileLanguageMount #languageSwitcherSlot {
        display: block;
        width: 100%;
    }

    #mobileLanguageMount .pozy-language-dropdown > .dropdown-toggle,
    #mobileLanguageMount .dropdown-toggle {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        justify-content: space-between;
        border-color: rgba(0, 234, 255, .18);
        background: #101a2f;
    }

    #mobileLanguageMount .dropdown-menu {
        width: 100%;
        min-width: 100%;
    }

    .content,
    .game-page .content {
        width: 100%;
        margin-inline-start: 0;
        margin-top: 58px;
        padding: 8px;
    }

    .topbar-logo-wrap {
        flex: 0 0 34px !important;
        min-width: 34px;
        width: 34px;
    }

    .main-logo {
        display: none;
    }

    .favicon-logo {
        display: block;
        width: 34px;
        height: 34px;
        overflow: hidden;
    }

    .favicon-logo .sidebar-logo {
        width: 34px;
        height: 34px !important;
        object-fit: contain;
    }

    /* Mobile header uses only the search icon. The desktop input stays in
       the DOM for desktop search and is not duplicated. */
    .search-box {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        position: relative;
    }

    .search-box .search-wrapper,
    .search-box > .search-results {
        display: none !important;
    }

    .mobile-search-trigger {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: #dce8f8;
        font-size: 16px;
        cursor: pointer;
        transition: background .16s ease, color .16s ease, border-color .16s ease;
    }

    .mobile-search-trigger:hover,
    .mobile-search-trigger:focus-visible,
    .mobile-search-trigger.is-active {
        color: #00eaff;
        border-color: rgba(0, 234, 255, .22);
        background: rgba(0, 234, 255, .09);
        outline: none;
    }

    .topbar-icons {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        margin-inline-start: auto;
        gap: 3px;
        justify-content: flex-end;
    }

    /* Language moves into the bottom of the mobile sidebar. */
    .desktop-language-mount {
        display: none !important;
    }

    /* Keep the same desktop functionality, only make the controls compact. */
    .topbar-icons > .notification-wrapper,
    .topbar-icons > #openMyGames,
    .topbar-icons > .friends-icon-wrapper {
        display: block;
    }

    .topbar-icons .top-icon-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }

    .topbar-icons .top-icon {
        font-size: 15px;
    }

    .notification-badge {
        top: -3px;
        right: -3px;
        min-width: 15px;
        min-height: 15px;
        padding: 2px 4px;
        font-size: 8px;
        line-height: 11px;
        text-align: center;
        z-index: 2;
    }

    .online-badge {
        top: 0;
        right: 0;
        width: 8px;
        height: 8px;
    }

    .topbar-icons .avatar {
        width: 34px;
        height: 34px;
    }

    .topbar-icons .top-login-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 10px;
        white-space: nowrap;
    }

    .top-login-button .top-login-label {
        display: none;
    }

    .top-login-button .mobile-login-icon {
        display: inline-block;
        margin: 0;
        font-size: 16px;
        line-height: 1;
    }

    body.mobile-search-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .mobile-search-panel {
        position: fixed;
        z-index: 996;
        inset: 58px 0 0;
        display: block;
        width: 100%;
        height: calc(100dvh - 58px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 82% 4%, rgba(0, 234, 255, .07), transparent 28%),
            #070b16;
        transform: translateY(-5px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    }

    .mobile-search-panel.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-search-panel__inner {
        width: min(100%, 620px);
        min-height: 100%;
        margin: 0 auto;
        padding: 12px 14px 28px;
    }

    .mobile-search-field {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        min-height: 46px;
        margin-bottom: 14px;
        border: 1px solid rgba(255, 255, 255, .075);
        border-radius: 15px;
        background: #161e34;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    }

    .mobile-search-field__icon {
        flex: 0 0 42px;
        color: #8694ad;
        text-align: center;
        font-size: 15px;
    }

    .mobile-search-field input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 4px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #f8fafc;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
    }

    .mobile-search-field input::placeholder {
        color: #8b96ad;
        opacity: 1;
    }

    .mobile-search-clear {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        margin-inline-end: 2px;
        padding: 0;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: #a5b1c6;
        font-size: 15px;
        cursor: pointer;
    }

    .mobile-search-clear:hover,
    .mobile-search-clear:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, .07);
        outline: none;
    }

    .mobile-search-clear[hidden] {
        display: none !important;
    }

    .mobile-search-section {
        margin-bottom: 18px;
    }

    .mobile-search-section h2 {
        margin: 0 0 10px;
        color: #fff;
        font-size: 18px;
        font-weight: 850;
        line-height: 1.2;
    }

    .mobile-search-section__title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-search-section__title-row > a {
        color: #00eaff;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-featured-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .mobile-featured-card {
        min-height: 76px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        border: 1px solid rgba(255, 255, 255, .055);
        border-radius: 14px;
        color: #f8fafc;
        background: linear-gradient(145deg, #182039, #12182c);
        box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    }

    .mobile-featured-card i {
        color: #73e9f6;
        font-size: 19px;
    }

    .mobile-featured-card span {
        color: #fff;
        font-size: 13px;
        font-weight: 800;
    }

    .mobile-featured-card:active {
        border-color: rgba(0, 234, 255, .3);
        background: rgba(0, 234, 255, .09);
    }

    .mobile-category-list {
        overflow: hidden;
        border-block: 1px solid rgba(255, 255, 255, .07);
    }

    .mobile-category-link {
        min-height: 55px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 10px;
        padding: 7px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, .065);
        color: #edf2fb;
    }

    .mobile-category-link:last-child {
        border-bottom: 0;
    }

    .mobile-category-link__icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 10px;
        color: #8feff7;
        background: #151d32;
    }

    .mobile-category-link__icon img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
    }

    .mobile-category-link > span:nth-child(2) {
        overflow: hidden;
        color: #edf2fb;
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-category-link__chevron {
        color: #68758d;
        font-size: 11px;
    }

    .mobile-search-results {
        display: grid;
        gap: 7px;
    }

    .mobile-search-results[hidden] {
        display: none !important;
    }

    .mobile-search-result {
        min-height: 68px;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 11px;
        padding: 5px 7px;
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 13px;
        color: #fff;
        background: #10182a;
    }

    .mobile-search-result img {
        width: 58px;
        height: 58px;
        display: block;
        border-radius: 11px;
        object-fit: cover;
        background: #071426;
    }

    .mobile-search-result span {
        overflow: hidden;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-search-result > i {
        color: #718099;
        font-size: 11px;
    }

    .mobile-search-loading,
    .mobile-search-empty {
        min-height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #8794aa;
        text-align: center;
    }

    .mobile-search-loading i,
    .mobile-search-empty > i {
        color: #00eaff;
        font-size: 22px;
    }

    .mobile-search-empty strong {
        color: #f8fafc;
        font-size: 14px;
    }

    .mobile-search-empty span {
        font-size: 12px;
    }

    .game-page .game-toolbar {
        padding: 2px 5px;
        height: 40px;
        min-height: 40px;
    }

    .game-page .toolbar-thumb {
        width: 30px;
        max-height: 30px;
    }

    .game-page .toolbar-info {
        gap: 4px;
        flex: 0 0 auto;
    }

    .game-page .toolbar-actions {
        gap: 3px;
        flex: 0 0 auto;
    }

    .game-page .toolbar-actions .action-btn,
    .game-page .toolbar-actions .btn-fullscreen {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        flex-basis: 30px;
        font-size: 12px;
    }

    .game-page .toolbar-actions .toolbar-reaction-btn {
        height: 30px;
        min-width: 39px;
        min-height: 30px;
        padding: 0 5px;
        gap: 3px;
        border-radius: 15px;
        font-size: 11px;
    }

    .game-page .toolbar-reaction-btn span {
        font-size: 10px;
    }

    .game-page .toolbar-content h1 {
        font-size: 12px;
    }

    .game-page .toolbar-content span {
        font-size: 11px;
    }

    .game-page .gz-right {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* A 300px sidebar placement plus the sidebar padding is wider than the
       usable content area on 320px phones. Keep every sidebar card inside the
       grid track; desktop placements retain their native 300px width. */
    .game-page .gz-right > *,
    .game-page .gz-right .gz-widget,
    .game-page .gz-right .pozy-ad--300x250 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Keep every main-column section within the small-phone content box.
       min-width:0 is essential for grids/flex children with intrinsic image or
       text widths; without it a second card can push the page past 320px. */
    .game-page .gz-page,
    .game-page .gz-layout,
    .game-page .gz-left,
    .game-page .gz-info,
    .game-page .gz-detailed-section,
    .game-page .gz-content-block,
    .game-page .gz-related-grid-horizontal,
    .game-page .gz-meta-footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .game-page .gz-related-grid-horizontal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-page .gz-related-card-mini,
    .game-page .gz-meta-footer-item {
        min-width: 0;
        max-width: 100%;
    }

    .game-page .gz-related-card-mini img {
        max-width: 100%;
    }

    .game-page .gz-block-body,
    .game-page .gz-meta-val {
        overflow-wrap: anywhere;
    }

    .gp-below-game-ad {
        height: 50px;
        min-height: 50px;
        margin: 8px 0;
    }

    .back-to-game-row {
        top: 64px;
    }

    .back-to-game-btn {
        min-height: 38px;
        padding: 7px 14px;
        font-size: 12px;
    }
}

@media (max-height: 700px) and (min-width: 761px) {
    .gp-below-game-ad {
        height: 90px;
        min-height: 90px;
        margin: 6px 0;
        margin-inline: auto;
    }
}

/* ==========================================================================
   🎮 DYNAMIC CATEGORY DROPDOWN & GRID HEADER
   ========================================================================== */
.home-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 15px;
    width: 100%;
}

.grid-header-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-section-title {
    color: var(--pg-heading-color, #f8fafc);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-filter-dropdown {
    position: relative;
    display: inline-block;
    z-index: 50;
}

.filter-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(0, 245, 255, 0.25);
    border-radius: 12px;
    color: #f8fafc;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: all 0.22s ease-in-out;
    outline: none;
    user-select: none;
}

.filter-dropdown-trigger:hover,
.filter-dropdown-trigger[aria-expanded="true"] {
    background: rgba(30, 41, 59, 0.95);
    border-color: #00f5ff;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 245, 255, 0.35);
    transform: translateY(-1px);
}

.trigger-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.trigger-label {
    line-height: 1.2;
    white-space: nowrap;
}

.trigger-chevron {
    font-size: 0.75rem;
    color: #00f5ff;
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.filter-dropdown-trigger[aria-expanded="true"] .trigger-chevron {
    transform: rotate(180deg);
}

.filter-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    max-height: 380px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(0, 245, 255, 0.3);
    border-radius: 16px;
    padding: 10px;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 245, 255, 0.15);
    z-index: 1000;
    animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-direction: column;
}

.filter-dropdown-menu.show {
    display: flex;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-search-box {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dropdown-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #00f5ff;
    font-size: 0.82rem;
    pointer-events: none;
}

.dropdown-search-box input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    background: rgba(2, 6, 23, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.dropdown-search-box input:focus {
    border-color: #00f5ff;
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.2);
}

.dropdown-items-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    max-height: 300px;
    padding-right: 2px;
}

.dropdown-items-list::-webkit-scrollbar {
    width: 4px;
}

.dropdown-items-list::-webkit-scrollbar-thumb {
    background: rgba(0, 245, 255, 0.3);
    border-radius: 4px;
}

.dropdown-divider-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    padding: 8px 10px 4px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.dropdown-item:hover {
    background: rgba(0, 245, 255, 0.12);
    color: #00f5ff;
}

.dropdown-item.active {
    background: linear-gradient(90deg, rgba(0, 245, 255, 0.2), rgba(99, 102, 241, 0.25));
    color: #ffffff;
    font-weight: 700;
}

.dropdown-item .item-icon {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
}

.dropdown-item .item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item .item-check {
    font-size: 0.82rem;
    color: #00f5ff;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dropdown-item.active .item-check {
    opacity: 1;
}

.no-filter-results {
    display: none;
    text-align: center;
    padding: 50px 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(0, 245, 255, 0.25);
    border-radius: 20px;
    margin: 20px 0;
}

.no-filter-results h3 {
    color: #f8fafc;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.no-filter-results p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.no-filter-results .reset-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #00f5ff, #3b82f6);
    color: #0f172a;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.no-filter-results .reset-filter-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(0, 245, 255, 0.5);
}

@media (max-width: 576px) {
    .home-grid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .custom-filter-dropdown {
        width: 100%;
    }
    .filter-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
    }
    .filter-dropdown-menu {
        width: 100%;
        right: auto;
        left: 0;
    }
}

/* ==========================================================================
   🔄 CONTINUE PLAYING SECTION (PREMIUM PORTAL STYLE)
   ========================================================================== */
.continue-playing-section {
    margin-bottom: 12px;
    position: relative;
    z-index: 5;
}

.continue-playing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cp-icon {
    font-size: 1.1rem;
    display: inline-block;
    vertical-align: middle;
}

.cp-heading-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pg-heading-color, #f8fafc);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cp-heading-link:hover,
.cp-heading-link:focus-visible {
    color: var(--pg-accent-color, #00f5ff);
    text-decoration: none;
}

.cp-heading-link:focus-visible {
    outline: 2px solid var(--pg-accent-color, #00f5ff);
    outline-offset: 4px;
    border-radius: 3px;
}

.cp-arrow-link {
    color: currentColor;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.2s ease;
    display: inline-block;
}

.cp-heading-link:hover .cp-arrow-link,
.cp-heading-link:focus-visible .cp-arrow-link {
    transform: translateX(4px);
}

.continue-playing-row {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px 4px 0 4px;
    -webkit-overflow-scrolling: touch;
}

.continue-playing-row::-webkit-scrollbar {
    height: 6px;
}

.continue-playing-row::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
}

.continue-playing-row::-webkit-scrollbar-thumb {
    background: rgba(0, 245, 255, 0.3);
    border-radius: 10px;
}

.continue-playing-row::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 245, 255, 0.6);
}

.cp-card {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 245, 255, 0.15);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    background: #0f172a;
}

.cp-card:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: #00f5ff;
    box-shadow: 0 8px 22px rgba(0, 245, 255, 0.35);
    z-index: 10;
}

.cp-card .cp-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.cp-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.95), rgba(2, 6, 23, 0.4) 70%, transparent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 14px 6px 5px 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cp-card:hover .cp-title-overlay {
    opacity: 1;
}

@media (max-width: 576px) {
    .cp-card {
        width: 84px;
        height: 84px;
        border-radius: 14px;
    }
    .cp-card .cp-thumb {
        border-radius: 12px;
    }
}

/* =========================================================
   POZYGAME COMMAND DECK SIDEBAR
   ========================================================= */
.command-sidebar {
    --deck-cyan: #00eaff;
    --deck-blue: #3487ff;
    --deck-surface: rgba(8, 17, 36, 0.96);
    --deck-border: rgba(0, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    padding: 12px 10px 10px;
    overflow: visible;
    background:
        radial-gradient(circle at 12% 8%, rgba(0, 234, 255, 0.11), transparent 26%),
        linear-gradient(180deg, rgba(12, 24, 48, 0.98), rgba(4, 10, 24, 0.98));
    border-inline-end: 1px solid var(--deck-border);
    box-shadow: inset -1px 0 rgba(255, 255, 255, 0.025), 18px 0 44px rgba(0, 0, 0, 0.32);
    isolation: isolate;
}

.command-sidebar::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 1px;
    background: linear-gradient(transparent 2%, var(--deck-cyan) 30%, rgba(52, 135, 255, 0.3) 70%, transparent 98%);
    opacity: 0.45;
    pointer-events: none;
}

/* Mirror the navigation rail and its visual edge for RTL languages. */
html[dir="rtl"] .sidebar {
    inset: 64px 0 0 auto;
    box-shadow: -18px 0 40px rgba(0, 0, 0, .28);
}

html[dir="rtl"] .command-sidebar {
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.025), -18px 0 44px rgba(0, 0, 0, 0.32);
}

html[dir="rtl"] .command-sidebar::after {
    inset: 0 auto 0 0;
}

html[dir="rtl"] .sidebar-category-flyout,
html[dir="rtl"] .command-sidebar-tooltip {
    direction: rtl;
    text-align: right;
}

.command-sidebar__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.command-sidebar__ambient::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: 38%;
    left: -90px;
    border: 1px solid rgba(0, 234, 255, 0.08);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(0, 234, 255, 0.04);
}

.command-sidebar__status {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 234, 255, 0.12);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(17, 33, 61, 0.9), rgba(7, 15, 32, 0.82));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 8px 22px rgba(0, 0, 0, 0.22);
}

.command-sidebar__status-mark,
.command-nav__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-grid !important;
    place-items: center;
    border: 1px solid rgba(164, 183, 214, 0.18);
    border-radius: 10px;
    color: #dce8f8 !important;
    background: linear-gradient(145deg, #17253e, #0a1224);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), inset 0 -4px 8px rgba(0, 0, 0, 0.2), 0 5px 12px rgba(0, 0, 0, 0.24);
}

.command-sidebar__status-mark {
    color: var(--deck-cyan);
    border-color: rgba(0, 234, 255, 0.3);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 16px rgba(0, 234, 255, 0.1);
}

.command-sidebar__status-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.command-sidebar__status-copy strong {
    color: #f8fbff;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.command-sidebar__status-copy small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #7e8ca5;
    font-size: 0.68rem;
}

.command-sidebar__status-copy small i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.command-nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.command-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.command-nav__group {
    margin-bottom: 7px;
}

.command-nav__label {
    margin: 0;
    padding: 2px 9px 5px;
    color: #66758f;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.command-sidebar .command-nav__list {
    margin: 0;
    padding: 0;
}

.command-sidebar .command-nav__list li {
    position: relative;
    margin: 0 0 2px;
}

.command-sidebar .command-nav__list li::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 8px auto 8px -10px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(var(--deck-cyan), var(--deck-blue));
    box-shadow: 0 0 12px rgba(0, 234, 255, 0.7);
    opacity: 0;
    transform: scaleY(0.35);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.command-sidebar .command-nav__list li.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.command-sidebar .command-nav__list li a {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #aebbd0;
    background: transparent;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.command-sidebar .command-nav__list > li > a:hover,
.command-sidebar .command-nav__list > li.active > a,
.command-sidebar .command-nav__category-parent > .command-nav__parent-row > a:hover,
.command-sidebar .command-nav__category-parent.active > .command-nav__parent-row > a {
    color: #f8fbff;
    border-color: rgba(0, 234, 255, 0.17);
    background: linear-gradient(90deg, rgba(0, 234, 255, 0.13), rgba(52, 135, 255, 0.055));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 7px 18px rgba(0, 0, 0, 0.16);
    transform: none;
}

.command-sidebar .command-nav__list > li > a:hover .command-nav__icon,
.command-sidebar .command-nav__list > li.active > a .command-nav__icon,
.command-sidebar .command-nav__category-parent > .command-nav__parent-row > a:hover .command-nav__icon,
.command-sidebar .command-nav__category-parent.active > .command-nav__parent-row > a .command-nav__icon {
    color: var(--deck-cyan) !important;
    border-color: rgba(0, 234, 255, 0.38);
    background: linear-gradient(145deg, #16314a, #08162b);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 0 15px rgba(0, 234, 255, 0.13);
}

.command-nav__text {
    min-width: 0;
    overflow: hidden;
    color: inherit !important;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-nav__parent-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.command-nav__parent-row > a {
    flex: 1;
    min-width: 0;
}

.command-nav__submenu-toggle {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-inline-start: 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #8290a7;
    background: transparent;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.command-nav__submenu-toggle:hover,
.command-nav__submenu-toggle:focus-visible {
    color: var(--deck-cyan);
    border-color: rgba(0, 234, 255, 0.24);
    background: rgba(0, 234, 255, 0.08);
}

.command-nav__submenu-toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.command-nav__submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.command-nav__children {
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.2s ease;
}

.command-nav__children.is-open {
    max-height: 1200px;
    margin: 3px 0 5px;
    opacity: 1;
}

.command-sidebar:not(.collapsed) .command-nav__children.is-open {
    margin: 4px 0 6px;
    padding: 7px 5px;
    border: 1px solid rgba(0, 234, 255, 0.22);
    border-radius: 12px;
    background:
        radial-gradient(circle at 10% 0, rgba(0, 234, 255, 0.1), transparent 32%),
        rgba(6, 14, 30, 0.98);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.command-sidebar .command-nav__list .command-nav__children li {
    margin: 0 0 1px;
}

.command-sidebar .command-nav__list .command-nav__children li::before {
    display: none;
}

.command-sidebar .command-nav__list .command-nav__children li a {
    min-height: 37px;
    gap: 8px;
    padding: 4px 7px;
    border-radius: 9px;
    color: #aebbd0 !important;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.command-sidebar .command-nav__list .command-nav__children li a:hover,
.command-sidebar .command-nav__list .command-nav__children li.active a {
    color: #ffffff !important;
    background: rgba(0, 234, 255, 0.075);
    border-color: rgba(0, 234, 255, 0.1);
}

.command-nav__child-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(164, 183, 214, 0.14);
    border-radius: 8px;
    color: #7f91ad;
    background: rgba(17, 31, 54, 0.82);
}

.command-nav__child-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.command-nav__child-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.command-nav__children li.active .command-nav__child-icon,
.command-nav__children li a:hover .command-nav__child-icon {
    color: var(--deck-cyan);
    border-color: rgba(0, 234, 255, 0.35);
    box-shadow: 0 0 8px rgba(0, 234, 255, 0.12);
}

.command-sidebar__collapse {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 234, 255, 0.12);
    border-radius: 13px;
    color: #8290a7;
    background: rgba(8, 17, 35, 0.78);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.command-sidebar__collapse:hover,
.command-sidebar__collapse:focus-visible {
    color: var(--deck-cyan);
    border-color: rgba(0, 234, 255, 0.35);
    background: rgba(0, 234, 255, 0.08);
}

.command-sidebar__collapse .command-nav__icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.command-sidebar__backdrop {
    position: fixed;
    inset: 58px 0 0;
    z-index: 997;
    display: none;
    border: 0;
    background: rgba(1, 5, 16, 0.68);
    backdrop-filter: blur(3px);
}

/* Collapsed desktop rail */
.command-sidebar.collapsed {
    padding-inline: 7px;
}

.command-sidebar.collapsed .command-sidebar__status {
    justify-content: center;
    padding-inline: 3px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.command-sidebar.collapsed .command-sidebar__status-copy,
.command-sidebar.collapsed .command-nav__label,
.command-sidebar.collapsed .command-nav__text {
    display: none;
}

.command-sidebar.collapsed .command-nav__list li a {
    justify-content: center;
    padding-inline: 3px;
}

.command-sidebar.collapsed .command-nav__submenu-toggle {
    display: none;
}

.command-sidebar.collapsed .command-nav {
    overflow-x: hidden;
    overflow-y: auto;
}

.command-sidebar.collapsed #sidebarCategoriesMenu {
    display: none !important;
}

.sidebar-category-flyout {
    position: fixed;
    z-index: 1103;
    width: 190px;
    display: block;
    margin: 0;
    padding: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(0, 234, 255, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 10% 0, rgba(0, 234, 255, 0.1), transparent 32%),
        rgba(6, 14, 30, 0.98);
    box-shadow: 16px 16px 38px rgba(0, 0, 0, 0.48), 0 0 22px rgba(0, 234, 255, 0.06);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 234, 255, 0.35) transparent;
}

.sidebar-category-flyout.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.sidebar-category-flyout::before {
    content: "Categories";
    display: block;
    padding: 4px 7px 9px;
    color: #f4f8ff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-category-flyout li {
    margin: 0 0 1px;
    list-style: none;
}

.sidebar-category-flyout li a {
    width: 100%;
    min-height: 37px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 7px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #aebbd0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    transform: none;
}

.sidebar-category-flyout .command-nav__child-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid !important;
    place-items: center;
    position: static !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(164, 183, 214, 0.14);
    border-radius: 8px;
    color: #8292aa;
    background: rgba(17, 31, 54, 0.82) !important;
    box-shadow: none !important;
    transform: none !important;
}

.sidebar-category-flyout .command-nav__text {
    min-width: 0;
    display: block !important;
    position: static !important;
    padding: 0 !important;
    overflow: hidden;
    color: #aebbd0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none !important;
    text-overflow: ellipsis;
    transform: none !important;
    white-space: nowrap;
}

.sidebar-category-flyout li a:hover,
.sidebar-category-flyout li.active > a {
    color: #ffffff;
    border-color: rgba(0, 234, 255, 0.12);
    background: rgba(0, 234, 255, 0.075);
}

.sidebar-category-flyout li a:hover .command-nav__text,
.sidebar-category-flyout li.active > a .command-nav__text {
    color: #ffffff !important;
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children {
    position: absolute;
    z-index: 25;
    top: -220px;
    left: calc(100% + 9px);
    width: 190px;
    max-height: min(520px, calc(100vh - 96px));
    display: block;
    margin: 0;
    padding: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(0, 234, 255, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 10% 0, rgba(0, 234, 255, 0.1), transparent 32%),
        rgba(6, 14, 30, 0.98);
    box-shadow: 16px 16px 38px rgba(0, 0, 0, 0.48), 0 0 22px rgba(0, 234, 255, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 234, 255, 0.35) transparent;
}

.command-sidebar.collapsed .command-nav__category-parent:hover .command-nav__children,
.command-sidebar.collapsed .command-nav__category-parent:focus-within .command-nav__children {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children::before {
    content: "Categories";
    display: block;
    padding: 4px 7px 9px;
    color: #f4f8ff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children li a {
    width: 100%;
    min-height: 37px;
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 7px;
    color: #aebbd0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children .command-nav__text {
    min-width: 0;
    display: block !important;
    position: static !important;
    left: auto !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
    color: #aebbd0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none !important;
    text-overflow: ellipsis;
    transform: none !important;
    white-space: nowrap;
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children .command-nav__child-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid !important;
    position: static !important;
    left: auto !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px;
    color: #8292aa;
    background: rgba(17, 31, 54, 0.82) !important;
    box-shadow: none !important;
    transform: none !important;
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children li a:hover,
.command-sidebar.collapsed .command-nav__category-parent .command-nav__children li.active a {
    color: #f5f9ff;
    background: rgba(0, 234, 255, 0.075);
    border-color: rgba(0, 234, 255, 0.12);
    transform: none;
}

.command-sidebar.collapsed .command-nav__category-parent .command-nav__children li a:hover .command-nav__text,
.command-sidebar.collapsed .command-nav__category-parent .command-nav__children li.active a .command-nav__text {
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Keep legacy collapsed-menu tooltip rules away from this component. */
.command-sidebar.collapsed .command-nav__category-parent > .command-nav__parent-row .command-nav__text {
    display: none !important;
    position: static !important;
    padding: 0 !important;
    color: #aebbd0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
}

.command-sidebar .command-nav__category-parent.active > .command-nav__parent-row > a {
    color: #f8fbff !important;
    text-decoration: none !important;
}

.command-sidebar .command-nav__category-parent.active > .command-nav__parent-row > a .command-nav__text {
    color: #aebbd0 !important;
    text-decoration: none !important;
}

.command-sidebar .command-nav__category-parent .command-nav__children li.active > a,
.command-sidebar .command-nav__category-parent .command-nav__children li.active > a:hover {
    color: #ffffff !important;
}

.command-sidebar .command-nav__category-parent .command-nav__children li.active > a .command-nav__text,
.command-sidebar .command-nav__category-parent .command-nav__children li.active > a:hover .command-nav__text {
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
}

.command-sidebar.collapsed .command-nav__icon {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    inset: auto !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    color: #dce8f8 !important;
    background: linear-gradient(145deg, #17253e, #0a1224) !important;
    border: 1px solid rgba(164, 183, 214, 0.18) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), inset 0 -4px 8px rgba(0, 0, 0, 0.2), 0 5px 12px rgba(0, 0, 0, 0.24) !important;
    transform: none !important;
}

.command-sidebar.collapsed .command-nav__list li.active .command-nav__icon,
.command-sidebar.collapsed .command-nav__list li a:hover .command-nav__icon {
    color: var(--deck-cyan) !important;
    background: linear-gradient(145deg, #16314a, #08162b) !important;
    border-color: rgba(0, 234, 255, 0.38) !important;
}

.command-sidebar.collapsed .command-nav__icon i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

.command-nav__icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: currentColor;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.command-sidebar.collapsed .command-sidebar__collapse svg {
    transform: rotate(180deg);
}

.command-sidebar.collapsed .command-sidebar__collapse {
    justify-content: center;
    padding-inline: 3px;
}

.command-sidebar-tooltip {
    position: fixed;
    z-index: 1102;
    padding: 7px 10px;
    border: 1px solid rgba(0, 234, 255, 0.28);
    border-radius: 8px;
    color: #eff7ff;
    background: rgba(7, 15, 31, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42), 0 0 15px rgba(0, 234, 255, 0.08);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(4px, -50%);
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.command-sidebar-tooltip.is-visible {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (min-width: 761px) {
    #toggleSidebar {
        display: none !important;
    }

    /* Expanded navigation floats above the page, matching the reference.
       The page keeps the collapsed rail offset and never changes width. */
    .command-sidebar:not(.collapsed) {
        width: 204px;
    }

    .command-sidebar:not(.collapsed) ~ .content {
        width: calc(100% - 58px);
        margin-inline-start: 58px;
    }
}

@media (max-width: 760px) {
    #toggleSidebar {
        display: inline-flex;
    }

    body.command-sidebar-open {
        overflow: hidden;
    }

    body.command-sidebar-open .command-sidebar__backdrop {
        display: block;
    }

    .command-sidebar {
        width: min(88vw, 292px);
        padding: 10px 8px;
        box-shadow: 24px 0 55px rgba(0, 0, 0, 0.52);
    }

    html[dir="rtl"] .command-sidebar {
        box-shadow: -24px 0 55px rgba(0, 0, 0, 0.52);
    }

    .command-sidebar.collapsed {
        width: min(88vw, 292px);
        padding: 10px 8px;
    }

    /* Mobile is a drawer, never a desktop icon rail. Keep its expanded
       presentation explicit so legacy collapsed rules cannot hide labels. */
    body.command-sidebar-open .command-sidebar {
        width: min(88vw, 292px);
        transform: translateX(0);
    }

    body.command-sidebar-open .command-sidebar .command-nav {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.command-sidebar-open .command-sidebar .command-nav__label {
        display: block !important;
    }

    body.command-sidebar-open .command-sidebar .command-nav__text {
        display: block !important;
        position: static !important;
        padding: 0 !important;
        color: inherit !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.command-sidebar-open .command-sidebar .command-nav__list li a {
        justify-content: flex-start;
        padding-inline: 7px;
    }

    body.command-sidebar-open .command-sidebar .command-nav__submenu-toggle {
        display: grid;
    }

    body.command-sidebar-open .command-sidebar #sidebarCategoriesMenu {
        display: none !important;
    }

    body.command-sidebar-open .command-sidebar #sidebarCategoriesMenu.is-open {
        display: block !important;
        max-height: min(46dvh, 420px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .command-sidebar.collapsed .command-sidebar__status {
        justify-content: flex-start;
        padding: 8px;
        border-color: rgba(0, 234, 255, 0.12);
        background: linear-gradient(145deg, rgba(17, 33, 61, 0.9), rgba(7, 15, 32, 0.82));
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 8px 22px rgba(0, 0, 0, 0.22);
    }

    .command-sidebar.collapsed .command-sidebar__status-copy,
    .command-sidebar.collapsed .command-nav__label,
    .command-sidebar.collapsed .command-nav__text {
        display: flex;
    }

    .command-sidebar.collapsed .command-nav__label {
        display: block;
    }

    .command-sidebar.collapsed .command-nav__list li a,
    .command-sidebar.collapsed .command-sidebar__collapse {
        justify-content: flex-start;
        padding-inline: 8px;
    }

    .command-sidebar.collapsed .command-nav__list li a::after {
        display: none;
    }
}

@media (max-width: 360px) {
    .topbar {
        padding-inline: 5px;
        gap: 2px;
    }

    .topbar-left {
        gap: 2px;
    }

    .toggle-btn,
    .mobile-search-trigger,
    .topbar-icons .top-icon-button,
    .topbar-icons .top-login-button {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
        height: 34px;
        min-height: 34px;
    }

    .toggle-btn__lines {
        width: 19px;
    }

    .topbar-logo-wrap {
        flex-basis: 32px !important;
        min-width: 32px;
        width: 32px;
    }

    .favicon-logo,
    .favicon-logo .sidebar-logo {
        width: 32px;
        height: 32px !important;
    }

    .search-box {
        flex-basis: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }

    .topbar-icons {
        gap: 1px;
    }

    .topbar-icons .top-icon,
    .top-login-button .mobile-login-icon {
        font-size: 14px;
    }

    .command-sidebar,
    .command-sidebar.collapsed,
    body.command-sidebar-open .command-sidebar {
        width: min(92vw, 286px);
        padding-inline: 7px;
    }

    .command-sidebar .command-nav__list li a {
        min-height: 40px;
    }

    .command-nav__group {
        margin-bottom: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .command-sidebar,
    .command-sidebar *,
    .command-sidebar *::before,
    .command-sidebar *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Disabled Recently Played Navigation (Premium portal style) */
.sidebar-recent-item.disabled,
.sidebar-recent-item.disabled a {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: #6c757d !important;
}

.type-gp-filter.disabled-filter {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* =========================================================
   SHARED PUBLIC TYPOGRAPHY
   Semantic levels stay visually consistent across page types.
   ========================================================= */
:root {
    --pg-heading-color: #f8fafc;
    --pg-text-color: #cbd5e1;
    --pg-muted-color: #8a93aa;
    --pg-accent-color: #00f5ff;
    --pg-h1-size: clamp(1.75rem, 2.4vw, 2.5rem);
    --pg-h2-size: clamp(1.25rem, 1.7vw, 1.6rem);
    --pg-h3-size: clamp(1rem, 1.25vw, 1.2rem);
}

.content {
    color: var(--pg-text-color);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    color: var(--pg-heading-color);
    line-height: 1.25;
}

.content p,
.content li {
    line-height: 1.65;
}

.pg-page-title {
    margin: 0 0 1rem;
    color: var(--pg-heading-color);
    font-size: var(--pg-h1-size);
    font-weight: 800;
    line-height: 1.15;
    text-wrap: balance;
}

.pg-section-title,
.section-title {
    color: var(--pg-heading-color);
    font-size: var(--pg-h2-size);
    font-weight: 700;
    line-height: 1.3;
}

.pg-subsection-title {
    color: var(--pg-accent-color);
    font-size: var(--pg-h3-size);
    font-weight: 650;
    line-height: 1.35;
}

.about-platform,
.categories-info {
    color: var(--pg-text-color);
}

.about-platform p,
.about-platform li,
.categories-info p,
.categories-info li,
.policy-content {
    color: var(--pg-text-color);
    font-size: 1rem;
    line-height: 1.65;
}

.category-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

@media (max-width: 576px) {
    :root {
        --pg-h1-size: 1.65rem;
        --pg-h2-size: 1.2rem;
        --pg-h3-size: 1rem;
    }

    .about-platform p,
    .about-platform li,
    .categories-info p,
    .categories-info li,
    .policy-content {
        font-size: 0.9375rem;
    }
}
/* Performance safeguards: sections below the fold stay out of layout/paint
   work until they approach the viewport, while intrinsic sizes prevent jumps. */
.home-page .featured-grid,
.home-page .game-recommended-grid,
.home-page .category-section,
.home-page .categories-info {
    content-visibility: auto;
    contain-intrinsic-size: auto 640px;
}

.home-game-card,
.featured-card,
.rec-card,
.category-card {
    contain: layout paint;
}

/* Keep the player immediate while deferring below-the-fold game details. */
.game-page .gz-info,
.game-page .gz-detailed-section,
.game-page .gz-right .gz-widget:nth-child(n + 2),
.game-page .game-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

@media (prefers-reduced-motion: reduce) {
    .pozy-laser-stroke,
    .pozy-outer-wave,
    .home-game-card,
    .featured-card,
    .category-card,
    .play-overlay,
    .play-overlay-card {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* Small-phone player controls: reserve the complete toolbar width for the
   controls so no icon is clipped at 320/360px viewports. */
@media (max-width: 360px) {
    .game-page .game-toolbar { padding-inline: 3px; }
    .game-page .toolbar-info { display: none; }

    .game-page .toolbar-actions,
    .game-page .gz-player.toolbar-compact .toolbar-actions {
        width: 100%;
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 2px;
    }

    .game-page .toolbar-actions .action-btn,
    .game-page .toolbar-actions .btn-fullscreen,
    .game-page .gz-player.toolbar-compact .toolbar-actions .action-btn,
    .game-page .gz-player.toolbar-compact .toolbar-actions .btn-fullscreen {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        flex-basis: 34px;
    }

    .game-page .toolbar-actions .toolbar-reaction-btn,
    .game-page .gz-player.toolbar-compact .toolbar-actions .toolbar-reaction-btn {
        height: 34px;
        min-width: 38px;
        min-height: 34px;
        padding-inline: 4px;
    }
}

/* ===== RTL TIMELINE SUPPORT ===== */
html[dir="rtl"] .timeline::before,
html.translated-rtl .timeline::before,
[dir="rtl"] .timeline::before {
    left: auto !important;
    right: 30px !important;
}

html[dir="rtl"] .timeline-dot,
html.translated-rtl .timeline-dot,
[dir="rtl"] .timeline-dot {
    margin-left: 0 !important;
    margin-right: 23px !important;
}

html[dir="rtl"] .timeline-item,
html.translated-rtl .timeline-item,
[dir="rtl"] .timeline-item {
    transform: translateX(30px);
}

html[dir="rtl"] .timeline-item.visible,
html.translated-rtl .timeline-item.visible,
[dir="rtl"] .timeline-item.visible {
    transform: translateX(0);
}

@media (max-width: 768px) {
    html[dir="rtl"] .timeline::before,
    html.translated-rtl .timeline::before,
    [dir="rtl"] .timeline::before {
        left: auto !important;
        right: 8px !important;
    }

    html[dir="rtl"] .timeline-dot,
    html.translated-rtl .timeline-dot,
    [dir="rtl"] .timeline-dot {
        margin-right: 0 !important;
    }
}

/* ---------- ASPECT RATIO / THEATER BUTTONS ---------- */
.gp-view-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 9px;
    background: rgba(2, 6, 23, .7);
    border: 1px solid rgba(255,255,255,.08);
}

.gp-view-btn {
    border: 0;
    border-radius: 6px;
    padding: 6px 7px;
    background: transparent;
    color: #7f8aa5;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    transition: .18s ease;
}

.gp-view-btn:hover {
    color: #fff;
    background: rgba(0,234,255,.08);
}

.gp-view-btn.active {
    color: #001014;
    background: #0ff;
    box-shadow: 0 0 12px rgba(0,255,255,.18);
}

#theaterModeBtn.active {
    color: #0ff;
    border-color: rgba(0,255,255,.4);
    background: rgba(0,255,255,.08);
}

/* ---------- THEATER MODE ---------- */
html.game-theater-active,
html.game-theater-active body {
    min-height: 100%;
}

body.game-theater-mode {
    overflow: hidden !important;
}

body.game-theater-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(3px);
}

body.game-theater-mode .gz-player {
    position: fixed !important;
    z-index: 9999 !important;
    top: 50% !important;
    left: 50% !important;
    width: min(94vw, 1440px) !important;
    height: min(92vh, calc(94vw / 1.7777778 + 56px)) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(0,234,255,.16);
}

body.game-theater-mode #gameContainer {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

body.game-theater-mode .player-wrap {
    height: 100% !important;
    width: 100% !important;
}

body.game-theater-mode .game-toolbar {
    border-radius: 0 0 14px 14px;
}

body.game-theater-mode .gp-below-game-ad,
body.game-theater-mode .gz-info,
body.game-theater-mode .gz-detailed-section {
    visibility: hidden;
}

body.game-theater-mode .gz-player[data-aspect="4:3"] {
    height: min(92vh, calc(94vw / 1.3333333 + 56px)) !important;
}

/* ---------- EMBED MODAL ---------- */
.gp-share-modal-box {
    max-width: 520px;
}

.gp-embed-open-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0,234,255,.25);
    background: rgba(0,234,255,.07);
    color: #00eaff;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: .18s ease;
}

.gp-embed-open-btn:hover {
    background: rgba(0,234,255,.14);
    border-color: rgba(0,234,255,.5);
}

.gp-embed-modal-box {
    max-width: 620px;
}

.gp-embed-label {
    display: block;
    margin-bottom: 7px;
    color: #aab4cc;
    font-size: 11px;
    font-weight: 700;
}

.gp-embed-code {
    display: block;
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    resize: vertical;
    padding: 12px;
    border-radius: 9px;
    border: 1px solid rgba(0,234,255,.16);
    background: #070d18;
    color: #b9f7ff;
    font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    outline: none;
}

.gp-embed-code:focus {
    border-color: rgba(0,234,255,.45);
}

.gp-embed-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.gp-embed-actions .gz-share-copy {
    min-height: 38px;
}

.gp-embed-close {
    min-height: 38px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {

    .gp-view-controls {
        order: 20;
    }
}

@media (max-width: 768px) {

    .gp-view-btn {
        padding: 6px 5px;
        font-size: 9px;
    }

    body.game-theater-mode .gz-player {
        width: 96vw !important;
        height: min(90vh, calc(96vw / 1.7777778 + 56px)) !important;
    }

    body.game-theater-mode .gz-player[data-aspect="4:3"] {
        height: min(90vh, calc(96vw / 1.3333333 + 56px)) !important;
    }

    .gp-embed-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .gp-view-controls {
        width: 100%;
        justify-content: center;
        margin-top: 2px;
    }

    .gp-view-btn {
        flex: 1;
    }

    .gp-share-modal-box,
    .gp-embed-modal-box {
        width: calc(100% - 24px);
        padding: 18px;
    }

    .gz-share-socials {
        flex-direction: column;
    }
}

/* ========================================================================== */
/* POZYGAME MOBILE GAME PAGE — FINAL                                      */
/* Single source of truth for the current mobile landing/game experience.      */
/* ========================================================================== */

/* Mobile-only player controls must never appear on desktop. */
.game-page .toolbar-actions .mobile-exit-game-btn,
.game-page .toolbar-actions .mobile-more-game-btn,
.mobile-game-menu,
.pgm-landing {
    display: none;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
    body.game-page {
        --pgm-bg: #050812;
        --pgm-accent: #00efff;
        --pgm-accent-2: #00d77e;
        background: var(--pgm-bg);
    }

    /* ---------------------------------------------------------------------- */
    /* NORMAL MOBILE LANDING                                                   */
    /* ---------------------------------------------------------------------- */
    body.game-page:not(.mobile-game-mode) .content {
        width: 100% !important;
        margin-inline-start: 0 !important;
        padding: 0 !important;
    }

    body.game-page:not(.mobile-game-mode) .gz-page,
    body.game-page:not(.mobile-game-mode) .gz-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.game-page:not(.mobile-game-mode) .gz-left {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Desktop player stays hidden until Play Now enters immersive mode. */
    body.game-page:not(.mobile-game-mode) #gameContainer,
    body.game-page:not(.mobile-game-mode) .back-to-game-row,
    body.game-page:not(.mobile-game-mode) .gz-right {
        display: none !important;
    }

    /* ---------------------------------------------------------------------- */
    /* MOBILE HERO                                                             */
    /* ---------------------------------------------------------------------- */
    body.game-page:not(.mobile-game-mode) .pgm-landing {
        display: block;
        order: 10 !important;
        width: 100%;
        color: #fff;
        background: var(--pgm-bg);
    }

    .pgm-hero {
        position: relative;
        min-height: 0;
        height: clamp(455px, calc(100svh - 190px), 510px);
        overflow: hidden;
        isolation: isolate;
        background: #090d18;
    }

    .pgm-hero__cover {
        position: absolute;
        inset: 0;
        z-index: -3;
        display: block;
        width: 100%;
        height: 100%;

        /* Full image visible — no crop, no blank space */
        object-fit: fill;
        object-position: center;

        filter: saturate(1.05) brightness(.78);

        /* Old scale was cropping image edges */
        transform: none;
    }

    .pgm-hero__scrim {
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            linear-gradient(180deg, rgba(5, 8, 18, .08) 0%, rgba(5, 8, 18, .18) 28%, rgba(5, 8, 18, .83) 68%, #050812 100%),
            linear-gradient(90deg, rgba(5, 8, 18, .16), rgba(5, 8, 18, .04), rgba(5, 8, 18, .16));
    }

    .pgm-hero__content {
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 100px 16px 10px;
        box-sizing: border-box;
        text-align: center;
    }

    .pgm-game-icon {
        width: 84px !important;
        height: 84px !important;
        margin-bottom: 10px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 18px !important;
        object-fit: cover;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .42), 0 0 0 4px rgba(0, 239, 255, .06);
    }

    .pgm-hero h1 {
        width: 100%;
        max-width: 340px;
        margin: 0;
        color: #fff;
        font-size: clamp(23px, 7vw, 31px);
        font-weight: 850;
        line-height: 1.06;
        letter-spacing: -.035em;
        text-wrap: balance;
        text-shadow: 0 3px 24px rgba(0, 0, 0, .65);
    }

    .pgm-quick-meta {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin-top: 10px;
        color: #edf3ff;
        font-size: 12px;
        font-weight: 700;
    }

    .pgm-quick-meta span,
    .pgm-quick-meta a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: inherit;
        text-decoration: none;
    }

    .pgm-quick-meta i {
        color: var(--pgm-accent);
    }

    .pgm-play-button {
        width: min(calc(100% - 12px), 330px);
        min-height: 54px;
        margin-top: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border: 0;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--pgm-accent), var(--pgm-accent-2));
        color: #001419;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -.02em;
        box-shadow: 0 18px 40px rgba(0, 229, 220, .24), inset 0 1px rgba(255, 255, 255, .36);
        touch-action: manipulation;
    }

    .pgm-play-button:active {
        transform: translateY(1px) scale(.99);
    }

    .pgm-play-button:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    /* The buttons themselves deliberately reuse the existing desktop
       react-btn/action-btn icon styles. Only their row layout is mobile-specific. */
    .pgm-action-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 13px;
    }

    .pgm-scroll-cue {
        width: 46px;
        height: 28px;
        margin-top: 8px;
        border: 0;
        background: transparent;
        color: #7d87a4;
        font-size: 22px;
    }

    /* ---------------------------------------------------------------------- */
    /* RELATED GAMES — 2 × 2 GRID + SHOW MORE                                  */
    /* ---------------------------------------------------------------------- */
    .pgm-section {
        padding: 24px 16px 10px;
        scroll-margin-top: 64px;
    }

    .pgm-section__head {
        display: block !important;
        margin-bottom: 14px;
    }

    .pgm-section__head h2 {
        margin: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 850;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames.pgm-section {
        padding-top: 14px !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-section__head {
        margin-bottom: 10px !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-game-rail,
    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-related-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: auto !important;
        scroll-snap-type: none !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-related-card {
        display: block !important;
        position: relative !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(0, 234, 255, .18) !important;
        border-radius: 12px !important;
        background: #071426 !important;
        color: #fff !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-related-card img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        border-radius: 11px 11px 0 0 !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-related-card > span {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 9px 10px 10px !important;
        overflow: hidden !important;
        color: #f8fafc !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* First four cards = two rows of two. */
    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-related-card--extra {
        display: none !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames.is-expanded .pgm-related-card--extra {
        display: block !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-show-more-games {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 14px 0 0 !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        border-radius: 12px !important;
        background: #111a2d !important;
        color: #f8fafc !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        touch-action: manipulation !important;
    }

    body.game-page:not(.mobile-game-mode) #pgmRelatedGames .pgm-show-more-games i {
        color: #00eaff !important;
        font-size: 14px !important;
    }

    /* ---------------------------------------------------------------------- */
    /* ORIGINAL DESKTOP DETAILS REUSED ON MOBILE                              */
    /* ---------------------------------------------------------------------- */
    body.game-page:not(.mobile-game-mode) .gz-info {
        display: flex !important;
        flex-direction: column !important;
        order: 20 !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 16px 12px 0 !important;
        box-sizing: border-box !important;
        visibility: visible !important;
    }

    body.game-page:not(.mobile-game-mode) .gz-info-left {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Hide only the second ad column inside the desktop info component. */
    body.game-page:not(.mobile-game-mode) .gz-info-right {
        display: none !important;
    }

    body.game-page:not(.mobile-game-mode) .game-info-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.game-page:not(.mobile-game-mode) .gz-detailed-section {
        display: block !important;
        order: 30 !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 16px 12px 0 !important;
        box-sizing: border-box !important;
        visibility: visible !important;
    }

    body.game-page:not(.mobile-game-mode)
    .gz-detailed-section > .gz-content-block:not(.gz-mobile-hide-duplicate-related) {
        display: block !important;
        visibility: visible !important;
    }

    /* Only the duplicate lower related-games block is hidden. */
    body.game-page:not(.mobile-game-mode)
    .gz-detailed-section > .gz-content-block.gz-mobile-hide-duplicate-related {
        display: none !important;
    }

    /* Existing below-game ad comes after all game details. */
    body.game-page:not(.mobile-game-mode) .gp-below-game-ad {
        display: grid !important;
        order: 40 !important;
        width: calc(100% - 32px) !important;
        max-width: 728px !important;
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
        margin: 16px auto 20px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    /* ---------------------------------------------------------------------- */
    /* IMMERSIVE MOBILE GAME MODE                                              */
    /* ---------------------------------------------------------------------- */
    html.mobile-game-active,
    html.mobile-game-active body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.mobile-game-mode {
        padding-bottom: 0 !important;
    }

    body.mobile-game-mode .topbar,
    body.mobile-game-mode .command-sidebar,
    body.mobile-game-mode .sidebar,
    body.mobile-game-mode .command-sidebar__backdrop,
    body.mobile-game-mode .pgm-landing,
    body.mobile-game-mode .gp-below-game-ad,
    body.mobile-game-mode .back-to-game-row {
        display: none !important;
    }

    body.mobile-game-mode .content,
    body.mobile-game-mode.game-page .content {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.mobile-game-mode #gameContainer {
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.mobile-game-mode #gamePlayer {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10050 !important;
        display: grid !important;
        grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(0, 1fr) !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000;
        box-shadow: none !important;
        contain: none !important;
    }

    /* Native fullscreen puts #gamePlayer in the browser top layer. Keep the same
       two-row geometry instead of letting older .gz-player fullscreen rules switch
       the game area back to auto height during a mobile resize. */
    body.mobile-game-mode #gamePlayer:fullscreen,
    body.mobile-game-mode #gamePlayer:-webkit-full-screen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        display: grid !important;
        grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(0, 1fr) !important;
        align-content: stretch !important;
        contain: none !important;
        border-radius: 0 !important;
        background: #000 !important;
    }

    body.mobile-game-mode .game-toolbar {
        position: relative !important;
        grid-row: 1 !important;
        order: -1;
        height: calc(54px + env(safe-area-inset-top)) !important;
        min-height: calc(54px + env(safe-area-inset-top)) !important;
        margin: 0 !important;
        padding: env(safe-area-inset-top) 10px 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
        background: rgba(7, 10, 20, .97) !important;
        z-index: 10055;
    }

    body.mobile-game-mode .player-wrap {
        grid-row: 2 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #000;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
    }

    body.mobile-game-mode #gpgameFrame {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: 0 !important;
        background: #000;
    }

    body.mobile-game-mode #gamePlayer:fullscreen .player-wrap,
    body.mobile-game-mode #gamePlayer:-webkit-full-screen .player-wrap {
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        flex: none !important;
    }

    body.mobile-game-mode .toolbar-info {
        display: flex !important;
        min-width: 0;
        max-width: none !important;
        margin-inline-start: 48px !important;
        flex: 1 1 auto;
    }

    body.mobile-game-mode .toolbar-thumb {
        width: 34px !important;
        height: 34px !important;
        max-height: 34px !important;
        border-radius: 9px !important;
    }

    body.mobile-game-mode .toolbar-content h1 {
        max-width: 38vw;
        margin: 0;
        overflow: hidden;
        font-size: 13px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mobile-game-mode .toolbar-content span {
        display: none !important;
    }

    body.mobile-game-mode .toolbar-actions,
    body.mobile-game-mode .gz-player.toolbar-compact .toolbar-actions {
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        gap: 7px !important;
    }

    body.mobile-game-mode .toolbar-actions > * {
        display: none !important;
    }

    body.mobile-game-mode .toolbar-actions .mobile-exit-game-btn,
    body.mobile-game-mode .toolbar-actions .btn-fullscreen,
    body.mobile-game-mode .toolbar-actions .mobile-more-game-btn {
        display: inline-grid !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 13px !important;
        background: #171e31 !important;
        color: #fff !important;
    }

    body.mobile-game-mode .toolbar-actions .mobile-exit-game-btn {
        position: absolute !important;
        inset-inline-start: 8px !important;
        top: calc(env(safe-area-inset-top) + 8px) !important;
        z-index: 2;
        order: -10;
    }

    body.mobile-game-mode .mobile-more-game-btn i,
    body.mobile-game-mode .btn-fullscreen i {
        color: var(--pgm-accent) !important;
    }

    body.mobile-game-mode .toolbar-icon-btn::before,
    body.mobile-game-mode .toolbar-icon-btn::after,
    body.mobile-game-mode .toolbar-reaction-btn::before,
    body.mobile-game-mode .toolbar-reaction-btn::after {
        display: none !important;
    }

    /* ---------------------------------------------------------------------- */
    /* MOBILE MORE-ACTIONS SHEET                                               */
    /* ---------------------------------------------------------------------- */
    .mobile-game-menu[hidden] {
        display: none !important;
    }

    .mobile-game-menu {
        position: fixed;
        inset: 0;
        z-index: 10080;
        display: block;
        pointer-events: none;
    }

    .mobile-game-menu__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .66);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .mobile-game-menu__sheet {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
        border: 1px solid rgba(0, 234, 255, .16);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: linear-gradient(180deg, #101c31, #070d19);
        box-shadow: 0 -24px 60px rgba(0, 0, 0, .58);
        transform: translateY(104%);
        transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    }

    .mobile-game-menu.is-open {
        pointer-events: auto;
    }

    .mobile-game-menu.is-open .mobile-game-menu__backdrop {
        opacity: 1;
    }

    .mobile-game-menu.is-open .mobile-game-menu__sheet {
        transform: translateY(0);
    }

    .mobile-game-menu__handle {
        width: 42px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .22);
    }

    .mobile-game-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mobile-game-menu__eyebrow {
        color: #6ef7ff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .mobile-game-menu__head h2 {
        margin: 2px 0 0;
        color: #fff;
        font-size: 16px;
        line-height: 1.25;
    }

    .mobile-game-menu__close {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 50%;
        background: #111a2d;
        color: #fff;
    }

    .mobile-game-menu__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
    }

    .mobile-game-menu__grid button {
        min-width: 0;
        min-height: 76px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 5px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 14px;
        background: rgba(255, 255, 255, .045);
        color: #eaf8ff;
        font-size: 11px;
        font-weight: 700;
        touch-action: manipulation;
    }

    .mobile-game-menu__grid button i {
        color: #6ef7ff;
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    body.game-page:not(.mobile-game-mode) .pgm-hero__content {
        padding-inline: 14px;
    }

    .mobile-game-menu__grid {
        gap: 6px;
    }

    .mobile-game-menu__grid button {
        min-height: 68px;
        font-size: 10px;
    }

    body.mobile-game-mode .toolbar-actions .mobile-exit-game-btn,
    body.mobile-game-mode .toolbar-actions .btn-fullscreen,
    body.mobile-game-mode .toolbar-actions .mobile-more-game-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        flex-basis: 34px !important;
    }
}

/* -------------------------------------------------------------------------- */
/* FINAL MOBILE HERO HEIGHT TUNING                                             */
/* Keeps the first related-game row above the fold across common phone sizes. */
/* -------------------------------------------------------------------------- */
@media (max-width: 760px) and (max-height: 700px) {
    body.game-page:not(.mobile-game-mode) .pgm-hero {
        height: 445px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-hero__content {
        padding-top: 82px !important;
        padding-bottom: 8px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-game-icon {
        width: 78px !important;
        height: 78px !important;
        margin-bottom: 8px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-hero h1 {
        font-size: clamp(22px, 6.8vw, 28px) !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-play-button {
        min-height: 50px !important;
        margin-top: 13px !important;
        font-size: 19px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-action-row {
        margin-top: 10px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-scroll-cue {
        margin-top: 5px !important;
    }
}

@media (min-width: 480px) and (max-width: 760px) and (max-height: 780px) {
    body.game-page:not(.mobile-game-mode) .pgm-hero {
        height: 455px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-hero__content {
        padding-top: 80px !important;
    }
}

@media (max-width: 760px) and (max-height: 620px) {
    body.game-page:not(.mobile-game-mode) .pgm-hero {
        height: 400px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-game-icon {
        width: 68px !important;
        height: 68px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-quick-meta {
        margin-top: 7px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-play-button {
        min-height: 48px !important;
        margin-top: 10px !important;
    }

    body.game-page:not(.mobile-game-mode) .pgm-action-row {
        margin-top: 8px !important;
    }
}

/* =========================================================
   POZYGAME MOBILE HEADER + SEARCH — FINAL CLEAN VERSION
   Mobile-only. Desktop header and search stay unchanged.
   ========================================================= */
@media (max-width: 760px) {
    .topbar {
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 60px !important;
        padding: 7px 9px !important;
        gap: 8px !important;
        overflow: visible !important;
        border-bottom: 1px solid rgba(0, 234, 255, .42) !important;
        background: rgba(3, 12, 29, .96) !important;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .20) !important;
    }

    /* Left cluster: menu / logo / search. Do not let old mobile rules take 100%. */
    .topbar > .topbar-left:first-child {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .topbar-left .topbar-logo-wrap {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        margin: 0 2px 0 0 !important;
    }

    .topbar-left .search-box {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        margin: 0 !important;
    }

    .toggle-btn {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    .topbar-logo-wrap,
    .favicon-logo {
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .favicon-logo .sidebar-logo {
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
    }

    /* Desktop search input remains in DOM but is not part of mobile header. */
    .topbar-left .search-wrapper,
    .topbar-left #searchResults {
        display: none !important;
    }

    .mobile-search-trigger {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid rgba(119, 145, 181, .13) !important;
        border-radius: 11px !important;
        background: rgba(13, 27, 49, .72) !important;
        color: #cfe9f1 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    }

    .mobile-search-trigger:hover,
    .mobile-search-trigger:focus-visible,
    .mobile-search-trigger.is-active {
        color: #00efff !important;
        border-color: rgba(0, 234, 255, .35) !important;
        background: rgba(0, 234, 255, .08) !important;
        box-shadow: 0 0 0 3px rgba(0, 234, 255, .055) !important;
        outline: none !important;
    }

    .mobile-search-trigger i {
        font-size: 15px !important;
    }

    /* Right action cluster stays compact but visually balanced. */
    .topbar-icons {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    .topbar-icons > .notification-wrapper,
    .topbar-icons > .friends-icon-wrapper {
        display: block !important;
        flex: 0 0 33px !important;
        width: 33px !important;
        min-width: 33px !important;
        position: relative !important;
    }

    .topbar-icons > #openMyGames,
    .topbar-icons .top-icon-button,
    .topbar-icons .top-login-button {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 33px !important;
        width: 33px !important;
        min-width: 33px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #e4edf8 !important;
        box-shadow: none !important;
    }

    .topbar-icons .top-icon-button:hover,
    .topbar-icons .top-icon-button:focus-visible {
        color: #00efff !important;
        border-color: rgba(0, 234, 255, .18) !important;
        background: rgba(0, 234, 255, .065) !important;
        outline: none !important;
    }

    .topbar-icons .top-icon,
    .top-login-button .mobile-login-icon {
        display: inline-block !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .top-login-button {
        color: #02101a !important;
        border-color: rgba(0, 245, 255, .58) !important;
        background: linear-gradient(135deg, #00f5ff, #09ddb8) !important;
        box-shadow: 0 0 15px rgba(0, 245, 255, .24) !important;
    }

    .top-login-button .top-login-label,
    .desktop-language-mount {
        display: none !important;
    }

    .notification-badge {
        top: -2px !important;
        right: -1px !important;
    }

    .online-badge {
        top: 1px !important;
        right: 1px !important;
    }

    /* Language lives inside the mobile sidebar and opens upward. */
    .command-sidebar,
    .command-sidebar.collapsed,
    body.command-sidebar-open .command-sidebar {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    .mobile-sidebar-language {
        position: relative !important;
        z-index: 30 !important;
        flex: 0 0 auto !important;
        display: block !important;
        margin: 8px 0 0 !important;
        padding: 10px 8px 4px !important;
        overflow: visible !important;
    }

    #mobileLanguageMount,
    #mobileLanguageMount #languageSwitcherSlot,
    #mobileLanguageMount .pozy-language-dropdown,
    #mobileLanguageMount .dropdown {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    #mobileLanguageMount .pozy-language-dropdown > .dropdown-toggle,
    #mobileLanguageMount .dropdown-toggle {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }

    #mobileLanguageMount .dropdown-menu {
        position: absolute !important;
        inset: auto 0 calc(100% + 7px) 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: min(260px, 42dvh) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1200 !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .48) !important;
    }

    /* Search panel: intentionally original PozyGame layout, not a clone. */
    .pozy-mobile-search {
        background:
            radial-gradient(circle at 8% 0%, rgba(0, 234, 255, .10), transparent 28%),
            linear-gradient(180deg, #06101e 0%, #040a14 100%) !important;
    }

    .pozy-mobile-search .mobile-search-panel__inner {
        width: 100% !important;
        max-width: 620px !important;
        padding: 14px 14px 34px !important;
    }

    /* Main search field is the visual anchor. Search icon is INSIDE input. */
    .pozy-mobile-search__field {
        position: relative !important;
        display: block !important;
        top: auto !important;
        z-index: 4 !important;
        margin: 0 0 15px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    .pozy-mobile-search__field input {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 46px 0 46px !important;
        border: 1px solid rgba(117, 146, 183, .18) !important;
        border-radius: 15px !important;
        background: linear-gradient(180deg, rgba(16, 30, 52, .98), rgba(9, 19, 35, .98)) !important;
        color: #f8fafc !important;
        font-size: 14px !important;
        box-shadow: 0 12px 26px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
        outline: none !important;
    }

    .pozy-mobile-search__field input::placeholder {
        color: #718097 !important;
    }

    .pozy-mobile-search__field input:focus {
        border-color: rgba(0, 234, 255, .58) !important;
        box-shadow: 0 0 0 3px rgba(0, 234, 255, .075), 0 14px 30px rgba(0,0,0,.24) !important;
    }

    .pozy-mobile-search__field .mobile-search-field__icon {
        position: absolute !important;
        left: 16px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
        width: 18px !important;
        height: 18px !important;
        display: grid !important;
        place-items: center !important;
        color: #00eaff !important;
        font-size: 14px !important;
        pointer-events: none !important;
    }

    .pozy-mobile-search__field .mobile-search-clear {
        position: absolute !important;
        right: 9px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
        width: 34px !important;
        height: 34px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .055) !important;
        color: #aebbd0 !important;
    }

    .pozy-mobile-search__field .mobile-search-clear[hidden] {
        display: none !important;
    }

    /* Filters start immediately below the field. */
    .pozy-search-quick {
        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    .pozy-filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .pozy-filter-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(119, 145, 181, .15) !important;
        border-radius: 999px !important;
        background: rgba(13, 26, 48, .82) !important;
        color: #c8d5e8 !important;
        font-size: 12px !important;
        font-weight: 680 !important;
        text-decoration: none !important;
    }

    .pozy-filter-chip i {
        color: #00dff3 !important;
        font-size: 12px !important;
    }

    .pozy-filter-chip--all {
        border-color: rgba(0, 234, 255, .28) !important;
        background: rgba(0, 234, 255, .08) !important;
        color: #e9fdff !important;
    }

    .pozy-search-section-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 11px !important;
    }

    .pozy-search-section-head > div > span {
        display: block !important;
        margin-bottom: 2px !important;
        color: #677791 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    .pozy-search-section-head h3 {
        margin: 0 !important;
        color: #ecf4ff !important;
        font-size: 15px !important;
        font-weight: 760 !important;
    }

    .pozy-search-all-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #00dff3 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .pozy-category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .pozy-category-card {
        min-width: 0 !important;
        min-height: 76px !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) 12px !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 11px !important;
        border: 1px solid rgba(118, 145, 181, .13) !important;
        border-radius: 15px !important;
        background: linear-gradient(145deg, rgba(17, 31, 56, .92), rgba(8, 18, 35, .92)) !important;
        color: #eef5ff !important;
        text-decoration: none !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    }

    .pozy-category-card__icon {
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        border-radius: 11px !important;
        background: rgba(0, 234, 255, .08) !important;
        color: #00eaff !important;
    }

    .pozy-category-card__icon img {
        width: 26px !important;
        height: 26px !important;
        object-fit: contain !important;
    }

    .pozy-category-card__content {
        min-width: 0 !important;
    }

    .pozy-category-card__content strong,
    .pozy-category-card__content small {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .pozy-category-card__content strong {
        color: #eaf2ff !important;
        font-size: 12px !important;
        font-weight: 720 !important;
    }

    .pozy-category-card__content small {
        margin-top: 3px !important;
        color: #66758d !important;
        font-size: 9px !important;
    }

    .pozy-category-card__chevron {
        color: #52627c !important;
        font-size: 10px !important;
    }

    .pozy-mobile-search__results {
        display: grid !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    .pozy-mobile-search__results[hidden] {
        display: none !important;
    }

    .pozy-mobile-search__results .mobile-search-result {
        min-height: 68px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) 18px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 11px !important;
        border: 1px solid rgba(118, 145, 181, .13) !important;
        border-radius: 15px !important;
        background: rgba(12, 24, 44, .88) !important;
        text-decoration: none !important;
    }

    .pozy-mobile-search__results .mobile-search-result img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
    }

    .pozy-mobile-search__results .mobile-search-result span {
        color: #e8f1ff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .pozy-mobile-search__results .mobile-search-result > i {
        color: #00dff3 !important;
        font-size: 11px !important;
    }
}

/* Ultra-small phones still keep every requested header action visible. */
@media (max-width: 390px) {
    .topbar {
        padding-inline: 7px !important;
        gap: 5px !important;
    }

    .topbar > .topbar-left:first-child {
        gap: 5px !important;
    }

    .topbar-left .topbar-logo-wrap,
    .topbar-logo-wrap,
    .favicon-logo {
        flex-basis: 35px !important;
        width: 35px !important;
        min-width: 35px !important;
    }

    .favicon-logo .sidebar-logo {
        width: 33px !important;
        max-width: 33px !important;
        height: 33px !important;
    }

    .topbar-icons {
        gap: 2px !important;
    }

    .topbar-icons > .notification-wrapper,
    .topbar-icons > .friends-icon-wrapper,
    .topbar-icons > #openMyGames,
    .topbar-icons .top-icon-button,
    .topbar-icons .top-login-button {
        flex-basis: 31px !important;
        width: 31px !important;
        min-width: 31px !important;
    }

    .pozy-category-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   RTL MOBILE SIDEBAR — FIX
   Arabic / RTL sidebar opens from the RIGHT side
   ========================================================= */

@media (max-width: 760px) {

    /* RTL sidebar should be attached to the right edge */
    html[dir="rtl"] .sidebar {
        left: auto !important;
        right: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    /* When sidebar is closed, move it OUT to the right */
    html[dir="rtl"] .sidebar.collapsed {
        left: auto !important;
        right: 0 !important;
        transform: translateX(102%) !important;
    }

    /* When sidebar is opened, bring it back from the right */
    html[dir="rtl"] .sidebar:not(.collapsed) {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
    }
}

/* Premium leaderboard */
.home-leaderboard-section {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid rgba(248, 207, 98, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 0%, rgba(248, 207, 98, .09), transparent 18rem),
        linear-gradient(135deg, rgba(22, 23, 42, .97), rgba(12, 18, 35, .96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.home-leaderboard-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f8cf62, #67e8f9, transparent);
    opacity: .8;
}

.home-leaderboard-banner,
.home-leaderboard-header {
    position: relative;
    z-index: 1;
}

.home-leaderboard-header {
    margin-bottom: 12px !important;
}

.leaderboard-title-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: clamp(1.05rem, 1.7vw, 1.38rem);
    font-weight: 850;
    letter-spacing: -0.025em;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.leaderboard-title-link:hover {
    color: #f8cf62;
    transform: translateX(2px);
}

.leaderboard-title-link .lb-trophy-icon {
    filter: drop-shadow(0 0 14px rgba(248, 207, 98, .28));
}

.leaderboard-arrow {
    color: #f8cf62;
    transition: transform .2s ease;
}

.leaderboard-title-link:hover .leaderboard-arrow {
    transform: translateX(3px);
}

.leaderboard-badges {
    flex-wrap: wrap;
}

.leaderboard-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .045);
    color: #dbe4f0;
    font-size: .72rem;
    font-weight: 700;
}

.leaderboard-badge.new-season {
    color: #ffe59b;
    border-color: rgba(248, 207, 98, .18);
    background: rgba(248, 207, 98, .07);
}

.leaderboard-badge.season-timer {
    color: #b8f5fb;
    border-color: rgba(103, 232, 249, .15);
    background: rgba(103, 232, 249, .06);
}

.leaderboard-subtext {
    color: #94a3b8 !important;
    font-size: .82rem;
}

.home-leaderboard-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 3px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .30) transparent;
}

.home-leaderboard-row::-webkit-scrollbar {
    height: 5px;
}

.home-leaderboard-row::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(148, 163, 184, .28);
}

.home-leaderboard-card {
    flex: 0 0 196px;
    width: 196px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.home-leaderboard-card:hover {
    transform: translateY(-4px);
    border-color: rgba(248, 207, 98, .34);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .30);
}

.home-leaderboard-thumb-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1020;
}

.home-leaderboard-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.home-leaderboard-card:hover .home-leaderboard-thumb {
    transform: scale(1.045);
}

.leaderboard-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .26);
}

.leaderboard-card-badge.top { background: #f8cf62; color: #241b06; }
.leaderboard-card-badge.hot { background: #fb7185; color: #fff; }
.leaderboard-card-badge.originals { background: #8b5cf6; color: #fff; }
.leaderboard-card-badge.new { background: #67e8f9; color: #06242a; }

.leaderboard-card-play-hover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    background: rgba(3, 7, 18, .36);
    backdrop-filter: blur(2px);
    transition: opacity .2s ease;
}

.home-leaderboard-card:hover .leaderboard-card-play-hover {
    opacity: 1;
}

.home-leaderboard-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px 11px;
}

.home-leaderboard-card-title {
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-leaderboard-card-metric {
    color: #67e8f9;
    font-size: .68rem;
    font-weight: 750;
}

@media (max-width: 991px) {
    .home-leaderboard-section {
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .home-leaderboard-section {
        padding: 14px;
    }

    .home-leaderboard-header {
        align-items: flex-start !important;
    }

    .leaderboard-subtext {
        flex-basis: 100%;
        margin-left: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-leaderboard-card {
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   LEADERBOARD SYSTEM
   Dedicated hub + in-game ranking card
   ===================================================================== */

.leaderboard-page-shell {
    width: min(100%, 1460px);
    margin-inline: auto;
    padding: 22px 22px 44px;
}

.leaderboard-hero {
    position: relative;
    min-height: 210px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 34px 36px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 15%, rgba(56, 189, 248, .13), transparent 34%),
        linear-gradient(135deg, rgba(13, 24, 45, .98), rgba(7, 14, 29, .98));
    box-shadow: 0 22px 55px rgba(2, 8, 23, .46);
}

.leaderboard-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.leaderboard-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.leaderboard-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: #cbd8eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.leaderboard-pill--season { color: #ffd9a3; border-color: rgba(249,115,22,.22); background: rgba(249,115,22,.09); }
.leaderboard-pill--time { color: #bfe9ff; border-color: rgba(56,189,248,.22); background: rgba(56,189,248,.08); }

.leaderboard-hero__title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: #f8fbff;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -.045em;
}

.leaderboard-hero__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(251,191,36,.18), rgba(249,115,22,.08));
    border: 1px solid rgba(251,191,36,.2);
    font-size: 28px;
}

.leaderboard-hero__subtitle {
    max-width: 670px;
    margin: 14px 0 0;
    color: #a8b7cf;
    font-size: 15px;
    line-height: 1.7;
}

.leaderboard-hero__graphic {
    position: absolute;
    right: 38px;
    top: 50%;
    translate: 0 -50%;
    color: rgba(255,255,255,.035);
    font-size: 150px;
    line-height: 1;
}

.leaderboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
    gap: 22px;
    align-items: start;
    margin-top: 24px;
}

.leaderboard-main { min-width: 0; }

.leaderboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.leaderboard-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7f91ad;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.leaderboard-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #f6f9ff;
    font-size: 1.28rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.leaderboard-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 24px;
    padding-inline: 8px;
    border-radius: 999px;
    background: rgba(56,189,248,.1);
    color: #8cddff;
    font-size: 11px;
}

.leaderboard-search {
    position: relative;
    width: min(100%, 310px);
}

.leaderboard-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    translate: 0 -50%;
    color: #71819b;
    pointer-events: none;
}

.leaderboard-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 14px;
    outline: none;
    background: rgba(10,18,36,.86);
    color: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.leaderboard-search input:focus {
    border-color: rgba(56,189,248,.38);
    box-shadow: 0 0 0 3px rgba(56,189,248,.08);
}

.leaderboard-game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.leaderboard-game-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 19px;
    background: linear-gradient(180deg, rgba(13,22,41,.96), rgba(8,15,30,.97));
    box-shadow: 0 14px 34px rgba(2,8,23,.30), inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.leaderboard-game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56,189,248,.24);
    box-shadow: 0 20px 44px rgba(2,8,23,.48);
}

.leaderboard-game-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #081222;
}

.leaderboard-game-card__thumb,
.leaderboard-game-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
    transition: transform .22s ease;
}

.leaderboard-game-card:hover .leaderboard-game-card__thumb,
.leaderboard-game-card:hover .leaderboard-game-card__media img {
    transform: scale(1.025);
}

.leaderboard-game-card__metric {
    position: absolute;
    top: 11px;
    right: 11px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(2,8,23,.72);
    backdrop-filter: blur(10px);
    color: #dceafe;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
}

.leaderboard-game-card__play {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: rgba(3,10,24,.72);
    color: #fff;
    backdrop-filter: blur(9px);
}

.leaderboard-game-card__body { padding: 14px; }

.leaderboard-game-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.leaderboard-game-card__title-wrap { min-width: 0; }

.leaderboard-game-card__title {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

.leaderboard-game-card__title a { color: #f6f9ff; text-decoration: none; }
.leaderboard-game-card__category { display: block; margin-top: 3px; color: #7f91ad; font-size: 11px; }

.leaderboard-game-card__players {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #8fa0ba;
    font-size: 10px;
    font-weight: 700;
}

.leaderboard-preview-list {
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.08);
    border-radius: 13px;
    background: rgba(2,8,23,.28);
}

.leaderboard-preview-row {
    display: grid;
    grid-template-columns: 26px 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(148,163,184,.07);
}

.leaderboard-preview-row:last-child { border-bottom: 0; }
.leaderboard-preview-row__rank { text-align: center; font-size: 13px; font-weight: 800; }

.leaderboard-preview-row__avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    background: #152139;
    color: #8cddff;
    font-size: 11px;
    font-weight: 850;
}

.leaderboard-preview-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.leaderboard-preview-row__name { overflow: hidden; color: #cfd9e9; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-preview-row__score { color: #eef4ff; font-size: 11px; white-space: nowrap; }
.leaderboard-preview-row__score small { margin-left: 2px; color: #72829a; font-size: 9px; font-weight: 700; }

.leaderboard-preview-empty {
    padding: 20px 12px;
    color: #7f91ad;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.leaderboard-game-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    color: #72829a;
    font-size: 10px;
}

.leaderboard-game-card__footer a,
.leaderboard-primary-link {
    color: #83d8ff;
    font-weight: 750;
    text-decoration: none;
}

.leaderboard-champions {
    position: sticky;
    top: 84px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(13,22,41,.97), rgba(8,15,30,.98));
    box-shadow: 0 16px 40px rgba(2,8,23,.36);
}

.leaderboard-champions__header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.leaderboard-champions__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(251,191,36,.10);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.16);
}

.leaderboard-champions h2 { margin: 0; color: #f8fbff; font-size: 1.08rem; font-weight: 850; }
.leaderboard-champions__intro { margin: 14px 0; color: #8798b2; font-size: 11px; line-height: 1.55; }

.champion-row {
    display: grid;
    grid-template-columns: 26px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 8px 4px;
    border-top: 1px solid rgba(148,163,184,.07);
}

.champion-row__rank { color: #71819a; text-align: center; font-size: 11px; font-weight: 850; }
.champion-row--podium .champion-row__rank { color: #f6c95a; }

.champion-row__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #152139;
    color: #8cddff;
    font-size: 12px;
    font-weight: 850;
}

.champion-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.champion-row__identity { min-width: 0; }
.champion-row__identity a,
.champion-row__identity > span { display: block; overflow: hidden; color: #e8eef8; font-size: 11px; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.champion-row__identity small { display: block; margin-top: 2px; overflow: hidden; color: #667892; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.champion-row__points { color: #dce9fa; font-size: 11px; text-align: right; white-space: nowrap; }
.champion-row__points small { display: block; color: #71819a; font-size: 8px; letter-spacing: .05em; }

.leaderboard-empty-state {
    padding: 60px 24px;
    border: 1px dashed rgba(148,163,184,.2);
    border-radius: 20px;
    background: rgba(10,18,36,.55);
    text-align: center;
}

.leaderboard-empty-state__icon { margin-bottom: 12px; font-size: 38px; }
.leaderboard-empty-state h3 { margin: 0; color: #f5f8ff; font-size: 18px; }
.leaderboard-empty-state p { margin: 8px auto 14px; max-width: 440px; color: #7f91ad; font-size: 13px; }

/* In-game single leaderboard widget */
.game-page .gz-leaderboard-card {
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(13,22,41,.98), rgba(8,15,30,.98));
    box-shadow: 0 14px 34px rgba(2,8,23,.34), inset 0 1px 0 rgba(255,255,255,.03);
}

.game-page .gz-lb-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.game-page .gz-lb-card-kicker {
    display: block;
    margin-bottom: 3px;
    color: #71819a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.game-page .gz-lb-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #f7faff;
    font-size: 15px;
    font-weight: 850;
}

.game-page .gz-lb-card-trophy { font-size: 15px; }

.game-page .gz-lb-unit-badge {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(56,189,248,.17);
    background: rgba(56,189,248,.075);
    color: #8bdcff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .04em;
}

.game-page .gz-lb-season-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #8596af;
    font-size: 10px;
}

.game-page .gz-lb-tabs-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 12px 0 10px;
    padding: 4px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 12px;
    background: rgba(2,8,23,.35);
}

.game-page .gz-lb-tab-btn {
    min-height: 32px;
    padding: 0 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8394ad;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.game-page .gz-lb-tab-btn:hover { color: #dce9fa; background: rgba(255,255,255,.04); }
.game-page .gz-lb-tab-btn.active { color: #06101d; background: #82dbff; }

.game-page .gz-lb-list-container {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.24) transparent;
}

.game-page .gz-lb-loading,
.game-page .gz-lb-empty-state,
.game-page .gz-lb-error-state {
    padding: 24px 10px;
    color: #7687a0;
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

.game-page .gz-lb-loading i { margin-right: 5px; }
.game-page .gz-lb-error-state { color: #f49aa5; }

.game-page .gz-lb-item-row {
    display: grid;
    grid-template-columns: 26px 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 43px;
    padding: 6px 5px;
    border-top: 1px solid rgba(148,163,184,.065);
}

.game-page .gz-lb-item-row.top-rank {
    border-radius: 9px;
    background: rgba(251,191,36,.035);
}

.game-page .gz-lb-item-rank { color: #7d8da5; font-size: 10px; font-weight: 850; text-align: center; }
.game-page .gz-lb-item-avatar { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: #152139; }
.game-page .gz-lb-user-img { width: 100%; height: 100%; object-fit: cover; }
.game-page .gz-lb-noavatar { color: #8bdcff; font-size: 10px; font-weight: 850; }
.game-page .gz-lb-item-name { overflow: hidden; color: #d9e4f4; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.game-page .gz-lb-item-score { display: inline-flex; align-items: baseline; gap: 3px; color: #f5f8ff; font-size: 10px; white-space: nowrap; }
.game-page .gz-lb-item-score small { color: #6f819b; font-size: 8px; font-weight: 700; }

.game-page .gz-lb-user-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 2px 0;
    border-top: 1px solid rgba(148,163,184,.09);
}

.game-page .gz-lb-user-footer[hidden] { display: none !important; }
.game-page .gz-lb-user-label { display: inline-flex; align-items: center; gap: 5px; color: #8293ac; font-size: 9px; font-weight: 750; }
.game-page .gz-lb-user-label i { color: #4ade80; }
.game-page .gz-lb-user-footer strong { color: #f5cc68; font-size: 9px; }

.game-page .gz-lb-full-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,.08);
    color: #82d9ff;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.leaderboard-popup.is-open { display: flex; }

.leaderboard-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    max-width: min(390px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid rgba(56,189,248,.23);
    border-radius: 13px;
    background: rgba(8,18,34,.96);
    color: #e9f7ff;
    box-shadow: 0 16px 40px rgba(0,0,0,.42);
    font-size: 12px;
    font-weight: 750;
    opacity: 0;
    translate: 0 18px;
    pointer-events: none;
    transition: opacity .2s ease, translate .2s ease;
}

.leaderboard-toast.is-visible { opacity: 1; translate: 0 0; }
.leaderboard-toast.is-error { border-color: rgba(244,63,94,.28); color: #ffd5dc; }

@media (max-width: 1180px) {
    .leaderboard-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .leaderboard-page-shell { padding: 14px 12px 34px; }
    .leaderboard-layout { grid-template-columns: 1fr; }
    .leaderboard-champions { position: static; }
}

@media (max-width: 640px) {
    .leaderboard-hero { min-height: 0; padding: 24px 18px; border-radius: 20px; }
    .leaderboard-hero__graphic { display: none; }
    .leaderboard-hero__title { font-size: 2rem; }
    .leaderboard-hero__icon { width: 48px; height: 48px; border-radius: 15px; font-size: 22px; }
    .leaderboard-toolbar { align-items: stretch; flex-direction: column; }
    .leaderboard-search { width: 100%; }
    .leaderboard-game-grid { grid-template-columns: 1fr; }
    .leaderboard-game-card__media { aspect-ratio: 16 / 9; }
    .leaderboard-toast { right: 12px; bottom: 12px; }
}

/* Keep the footer's Recently Played link in sync with the sidebar state. */
#footerRecentItem.disabled,
#footerRecentItem.disabled a {
    opacity: .45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Shared editorial game-status badge: exactly one clear reason to play. */
.game-status-badge {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    background: rgba(10, 14, 27, .82);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .32);
    backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase;
}

.game-status-badge i { font-size: 10px; }
.game-status-badge--hot { color: #fff0e8; border-color: rgba(255, 105, 77, .68); background: rgba(196, 54, 34, .9); }
.game-status-badge--new { color: #062b1c; border-color: rgba(117, 255, 185, .9); background: #7af5b4; }
.game-status-badge--updated { color: #fff6dc; border-color: rgba(255, 194, 91, .7); background: rgba(168, 101, 11, .92); }
.game-status-badge--original { color: #fff9dd; border-color: rgba(255, 214, 99, .72); background: rgba(121, 76, 6, .92); }
.game-status-badge--top { color: #f2ecff; border-color: rgba(188, 142, 255, .75); background: rgba(94, 50, 169, .92); }

.gcard-thumb .game-status-badge,
.all-gp-card-thumb .game-status-badge,
.home-leaderboard-thumb-container .game-status-badge { top: 8px; left: 8px; }

@media (max-width: 640px) {
    .game-status-badge { min-height: 21px; padding: 3px 7px; font-size: 9px; }
}

/* All-categories page: consistent cards on desktop and compact touch targets on mobile. */
.categories-page {
    padding: 24px 16px 40px;
}

.categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.categories-card {
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 12px;
    border: 1px solid rgba(0, 245, 255, .22);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.categories-card:hover {
    transform: translateY(-4px);
}

.cat-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(0, 245, 255, .06);
    color: #63f4ff;
    font-size: 30px;
}

.cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.categories-card span {
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .categories-page {
        padding: 14px 12px 30px;
    }

    .categories-page .page-title {
        margin-bottom: 18px;
        font-size: 24px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .categories-card {
        min-height: 132px;
        gap: 9px;
        padding: 12px 8px;
        border-radius: 14px;
    }

    .cat-icon {
        width: 58px;
        height: 58px;
        border-radius: 15px;
        font-size: 23px;
    }

    .categories-card span {
        font-size: 12px;
        letter-spacing: .45px;
    }

    .categories-info {
        margin-top: 26px !important;
        padding: 18px;
    }
}