/* =========================================================
   GAMEHUB — PIXEL GAME HUB
========================================================= */

:root {

    --purple: #7657ff;
    --purple-dark: #5940d9;
    --purple-light: #9b83ff;

    --cyan: #35d9ff;
    --green: #35d98b;
    --yellow: #ffd84d;
    --red: #ff5d72;

    --ink: #211b38;
    --muted: #756f89;

    --white: #ffffff;
    --cream: #f8f6ff;

    --border: #e7e1f4;

    --shadow:
        0 12px 30px rgba(55, 38, 110, .12);

    --shadow-hover:
        0 20px 45px rgba(55, 38, 110, .20);

    --radius: 22px;

    --font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family: var(--font);

    color: var(--ink);

    background:
        linear-gradient(
            180deg,
            #dff7ff 0%,
            #edfaff 30%,
            #f9f7ff 58%,
            #f7f3ff 100%
        );

    overflow-x: hidden;

}


button,
a {
    font: inherit;
}


a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   PIXEL SKY
========================================================= */

.pixel-sky {

    position: fixed;

    inset: 0;

    z-index: -5;

    overflow: hidden;

    pointer-events: none;

}


.cloud {

    position: absolute;

    width: 160px;

    height: 45px;

    background: rgba(255,255,255,.78);

    border-radius: 50px;

    filter: blur(.2px);

    opacity: .8;

}


.cloud::before,
.cloud::after {

    content: "";

    position: absolute;

    background: inherit;

    border-radius: 50%;

}


.cloud::before {

    width: 70px;
    height: 70px;

    left: 25px;
    bottom: 10px;

}


.cloud::after {

    width: 55px;
    height: 55px;

    right: 30px;
    bottom: 8px;

}


.cloud-1 {

    top: 105px;
    left: 5%;

    transform: scale(.8);

}


.cloud-2 {

    top: 180px;
    right: 8%;

    transform: scale(1.1);

}


.cloud-3 {

    top: 420px;
    left: 55%;

    transform: scale(.65);

    opacity: .45;

}


.hill {

    position: absolute;

    left: -10%;

    width: 120%;

    border-radius: 50% 50% 0 0;

}


.hill-back {

    height: 300px;

    bottom: -210px;

    background: #c8f3d6;

}


.hill-front {

    height: 240px;

    bottom: -190px;

    background: #a9e8c1;

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    position: sticky;

    top: 14px;

    z-index: 100;

    width: min(1180px, calc(100% - 28px));

    margin: 14px auto 0;

    min-height: 68px;

    padding: 10px 14px 10px 20px;

    display: flex;

    align-items: center;

    gap: 30px;

    background: rgba(255,255,255,.90);

    border: 1px solid rgba(255,255,255,.9);

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(50, 40, 90, .10);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}


.brand {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 20px;

    font-weight: 950;

    letter-spacing: -.8px;

    color: var(--purple-dark);

}


.brand-controller {

    font-size: 25px;

}


.nav {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-right: auto;

}


.nav a {

    color: #625c76;

    font-size: 14px;

    font-weight: 750;

    transition: color .18s ease;

}


.nav a:hover {
    color: var(--purple);
}


.topbar-actions {

    display: flex;

    align-items: center;

    gap: 9px;

}


.online-pill {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 9px 12px;

    border-radius: 12px;

    background: #f5f2ff;

    color: #625b78;

    font-size: 13px;

    font-weight: 700;

}


.online-pill strong {

    color: var(--purple);

}


.online-dot,
.game-online > span {

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(53,217,139,.13);

}


/* =========================================================
   SOUND BUTTON
========================================================= */

[data-hub-sound-toggle] {

    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #e4def1;

    border-radius: 12px;

    background: #ffffff;

    color: var(--purple-dark);

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(60,40,110,.10);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;

}


[data-hub-sound-toggle]:hover {

    transform: translateY(-2px);

    border-color: #cfc4ef;

    box-shadow:
        0 9px 22px rgba(60,40,110,.15);

}


[data-hub-sound-toggle]:active {

    transform: translateY(0) scale(.96);

}


.hub-sound-icon {

    width: 21px;
    height: 21px;

    display: block;

}


[data-hub-sound-toggle].sound-off {

    color: #9991aa;

    background: #f5f3f8;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    width: min(1180px, calc(100% - 28px));

    min-height: 460px;

    margin: 35px auto 0;

    padding: 60px 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    position: relative;

    overflow: hidden;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5efff 100%
        );

    border: 1px solid rgba(255,255,255,.9);

    box-shadow:
        0 25px 65px rgba(63,43,118,.13);

}


.hero::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(118,87,255,.16),
            transparent 68%
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 620px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 12px;

    border-radius: 999px;

    color: var(--purple-dark);

    background: #eee9ff;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

}


.hero h1 {

    margin: 18px 0 12px;

    font-size: clamp(44px, 6vw, 72px);

    line-height: .96;

    letter-spacing: -4px;

    font-weight: 1000;

}


.hero h1 span {

    display: block;

    color: var(--purple);

}


.hero p {

    max-width: 520px;

    margin: 0 0 26px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 14px 20px;

    border-radius: 13px;

    background: var(--purple);

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(118,87,255,.27);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.hero-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(118,87,255,.35);

}


/* =========================================================
   CONTROLLER
========================================================= */

.hero-controller {

    width: 390px;

    min-width: 300px;

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 2;

}


.controller-main {

    position: relative;

    width: 360px;

    height: 220px;

    border-radius:
        45px
        45px
        70px
        70px;

    background:
        linear-gradient(
            145deg,
            #8e72ff,
            #6044dc
        );

    transform:
        rotate(-7deg)
        perspective(400px)
        rotateY(-4deg);

    box-shadow:
        0 25px 0 #4934b0,
        0 35px 50px rgba(67,47,150,.28);

}


.controller-main::before,
.controller-main::after {

    content: "";

    position: absolute;

    top: 42px;

    width: 125px;
    height: 135px;

    border-radius: 50px;

    background: rgba(255,255,255,.09);

}


.controller-main::before {
    left: -18px;
}


.controller-main::after {
    right: -18px;
}


.controller-left,
.controller-right {

    position: absolute;

    z-index: 3;

}


.controller-left {

    left: 45px;
    top: 72px;

}


.dpad {

    position: relative;

    width: 70px;
    height: 70px;

}


.dpad span {

    position: absolute;

    display: block;

    background: #35288d;

    border-radius: 7px;

}


.dpad .up,
.dpad .down {

    width: 23px;
    height: 70px;

    left: 23px;

}


.dpad .left,
.dpad .right {

    width: 70px;
    height: 23px;

    top: 23px;

}


.dpad .center {

    width: 23px;
    height: 23px;

    left: 23px;
    top: 23px;

    background: #4334a4;

}


.controller-right {

    right: 38px;
    top: 61px;

    width: 85px;
    height: 85px;

}


.controller-right span {

    position: absolute;

    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 5px 0 rgba(0,0,0,.14);

}


.button-y {
    top: 0;
    left: 29px;
    background: #ffd84d;
}


.button-x {
    top: 29px;
    left: 0;
    background: #35d9ff;
}


.button-a {
    top: 29px;
    right: 0;
    background: #ff6680;
}


.button-b {
    bottom: 0;
    left: 29px;
    background: #35d98b;
}


.controller-center {

    position: absolute;

    left: 50%;

    top: 98px;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

}


.controller-center span {

    width: 38px;
    height: 9px;

    border-radius: 999px;

    background: #4c39b2;

}


/* =========================================================
   GAMES
========================================================= */

.games-section {

    width: min(1180px, calc(100% - 28px));

    margin: 80px auto 0;

}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

}


.section-kicker {

    color: var(--purple);

    font-size: 11px;

    font-weight: 950;

    letter-spacing: 1.6px;

}


.section-heading h2,
.about-card h2 {

    margin: 5px 0;

    font-size: 36px;

    letter-spacing: -1.8px;

}


.section-heading p {

    margin: 0;

    color: var(--muted);

}


.game-filters {

    display: flex;

    gap: 7px;

    padding: 5px;

    background: rgba(255,255,255,.7);

    border: 1px solid var(--border);

    border-radius: 13px;

}


.filter-button {

    padding: 10px 14px;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: #716a82;

    font-size: 12px;

    font-weight: 850;

    cursor: pointer;

}


.filter-button.active {

    background: var(--purple);

    color: white;

    box-shadow:
        0 5px 14px rgba(118,87,255,.20);

}


.games-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

}


.game-card {

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.game-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-hover);

}


.game-card.hidden {

    display: none;

}


.game-thumbnail-wrap {

    position: relative;

    display: block;

    overflow: hidden;

}


.game-preview {

    height: 205px;

    position: relative;

    overflow: hidden;

}


/* =========================================================
   GAME PREVIEWS
========================================================= */

.caro-preview {

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #fff5c8,
            #e5f4c9
        );

}


.caro-grid {

    width: 190px;
    height: 160px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    background:
        linear-gradient(
            90deg,
            transparent 32%,
            rgba(110,110,80,.3) 33%,
            transparent 34%,
            transparent 65%,
            rgba(110,110,80,.3) 66%,
            transparent 67%
        ),
        linear-gradient(
            0deg,
            transparent 32%,
            rgba(110,110,80,.3) 33%,
            transparent 34%,
            transparent 65%,
            rgba(110,110,80,.3) 66%,
            transparent 67%
        );

}


.preview-piece {

    position: absolute;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    font-weight: 1000;

    box-shadow:
        0 5px 10px rgba(0,0,0,.12);

}


.piece-x {

    left: 35%;

    top: 38%;

    background: #ff647c;

    color: white;

}


.piece-o {

    right: 28%;

    top: 25%;

    background: #7657ff;

    color: white;

}


.piece-x2 {

    left: 51%;

    top: 55%;

}


/* FLAPPY */

.flappy-preview {

    background:
        linear-gradient(
            180deg,
            #83ddff,
            #d5f8ff
        );

}


.flappy-cloud {

    position: absolute;

    width: 90px;
    height: 24px;

    border-radius: 50px;

    background: rgba(255,255,255,.8);

}


.cloud-a {

    left: 25px;
    top: 35px;

}


.cloud-b {

    right: 20px;
    top: 70px;

    transform: scale(.7);

}


.flappy-pipe {

    position: absolute;

    width: 38px;

    right: 70px;

    background:
        linear-gradient(
            90deg,
            #35b95d,
            #70e17d
        );

    border: 3px solid #23994a;

}


.pipe-top {

    top: -15px;
    height: 82px;

}


.pipe-bottom {

    bottom: -15px;
    height: 90px;

}


.flappy-bird {

    position: absolute;

    left: 80px;
    top: 78px;

    font-size: 48px;

    transform: rotate(-5deg);

}


/* CHESS */

.chess-preview {

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #ded5ff,
            #f5edff
        );

}


.chess-board {

    width: 170px;
    height: 170px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-template-rows:
        repeat(4, 1fr);

    border: 8px solid #5b4a9c;

    box-shadow:
        0 10px 25px rgba(50,40,100,.18);

}


.chess-board span {

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 30px;

}


.chess-board span:nth-child(odd) {
    background: #f4e8c8;
}


.chess-board span:nth-child(even) {
    background: #9a7c58;
}


/* SNAKE */

.snake-preview {

    background:
        linear-gradient(
            135deg,
            #d9ffd8,
            #8be6a2
        );

}


.snake-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(50,130,70,.3) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(50,130,70,.3) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

}


.snake-body {

    position: absolute;

    left: 75px;
    top: 90px;

    display: flex;

    gap: 4px;

}


.snake-body span {

    width: 30px;
    height: 30px;

    border-radius: 7px;

    background: #39ba67;

    box-shadow:
        0 4px 0 #24944c;

}


.snake-food {

    position: absolute;

    right: 72px;
    top: 65px;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ff5d72;

}


/* LUDO */

.ludo-preview {

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #fff0ca,
            #ffe7e8
        );

}


.ludo-board {

    width: 170px;
    height: 170px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    padding: 13px;

    gap: 8px;

    background: #fff;

    border-radius: 15px;

    box-shadow:
        0 10px 25px rgba(70,40,80,.15);

}


.ludo-home {

    border-radius: 12px;

}


.ludo-home.red {
    background: #ff7180;
}


.ludo-home.blue {
    background: #62cfff;
}


.ludo-home.yellow {
    background: #ffd75c;
}


.ludo-home.green {
    background: #65db8c;
}


.ludo-center {

    position: absolute;

    width: 42px;
    height: 42px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) rotate(45deg);

    background: white;

    border: 6px solid var(--purple);

}


/* =========================================================
   GAME STATUS
========================================================= */

.game-status {

    position: absolute;

    left: 13px;
    top: 13px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 10px;

    font-weight: 950;

    letter-spacing: .5px;

}


.game-status.available {

    background: #dcfbed;

    color: #14864b;

}


.game-status.available span {

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 4px;

    border-radius: 50%;

    background: var(--green);

}


.game-status.soon {

    background: #fff0c7;

    color: #a47700;

}


/* =========================================================
   GAME INFO
========================================================= */

.game-info {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 17px 17px 12px;

}


.game-icon {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 20px;

}


.caro-icon {
    background: #ffe1e6;
}


.flappy-icon {
    background: #dff7ff;
}


.chess-icon {
    background: #e9e3ff;
}


.snake-icon {
    background: #dcf7e5;
}


.ludo-icon {
    background: #fff1cf;
}


.game-text {
    min-width: 0;
}


.game-text h3 {

    margin: 0 0 3px;

    font-size: 17px;

    letter-spacing: -.4px;

}


.game-text p {

    margin: 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.4;

}


.game-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 17px 17px;

}


.game-online {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #858094;

    font-size: 11px;

}


.game-online > span {

    width: 6px;
    height: 6px;

    flex-basis: 6px;

    box-shadow: none;

}


.play-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 36px;

    padding: 8px 13px;

    border: 0;

    border-radius: 10px;

    background: var(--purple);

    color: white;

    font-size: 11px;

    font-weight: 950;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease;

}


.play-button:hover {

    transform: translateY(-2px);

    background: var(--purple-dark);

}


.play-button.disabled {

    background: #e7e4ed;

    color: #aaa4b4;

    cursor: default;

}


.play-button.disabled:hover {

    transform: none;

}


.coming-text {

    color: #9a94a8;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    width: min(1180px, calc(100% - 28px));

    margin: 65px auto 0;

}


.stats-title {

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #746d82;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: 1.2px;

}


.stats-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

}


.stat-box {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 19px;

    background: rgba(255,255,255,.75);

    border: 1px solid var(--border);

    border-radius: 18px;

}


.stat-icon {

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #f0ebff;

    font-size: 20px;

}


.stat-box strong {

    display: block;

    font-size: 24px;

}


.stat-box div span {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

    width: min(1180px, calc(100% - 28px));

    margin: 75px auto 0;

}


.about-card {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 40px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f3efff
        );

    border: 1px solid var(--border);

}


.about-icon {

    width: 75px;
    height: 75px;

    flex: 0 0 75px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: #e8e1ff;

    font-size: 34px;

}


.about-card h2 span {

    color: var(--purple);

}


.about-card p {

    max-width: 720px;

    margin: 10px 0 0;

    color: var(--muted);

    line-height: 1.7;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    width: min(1180px, calc(100% - 28px));

    margin: 65px auto 0;

    padding: 30px 0 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid rgba(100,80,150,.12);

    color: #898296;

    font-size: 11px;

}


.footer-logo {

    color: var(--purple-dark);

    font-weight: 950;

}


.footer p {

    margin: 0;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .hero {

        padding: 50px;

    }

    .hero-controller {

        width: 300px;

    }

    .controller-main {

        transform:
            scale(.78)
            rotate(-7deg);

    }

    .games-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


@media (max-width: 720px) {

    .topbar {

        top: 8px;

        margin-top: 8px;

        width: calc(100% - 16px);

        padding-left: 14px;

        gap: 12px;

    }

    .brand {

        font-size: 17px;

    }

    .nav {

        display: none;

    }

    .online-pill {

        padding: 8px 9px;

    }

    .hero {

        margin-top: 18px;

        padding: 40px 25px;

        min-height: 600px;

        flex-direction: column;

        align-items: flex-start;

    }

    .hero h1 {

        font-size: 48px;

        letter-spacing: -3px;

    }

    .hero p {

        font-size: 14px;

    }

    .hero-controller {

        width: 100%;

        min-width: 0;

        margin-top: 10px;

    }

    .controller-main {

        transform:
            scale(.62)
            rotate(-7deg);

        margin-left: -25px;

    }

    .section-heading {

        align-items: flex-start;

        flex-direction: column;

    }

    .game-filters {

        width: 100%;

        overflow-x: auto;

    }

    .filter-button {

        white-space: nowrap;

    }

    .games-grid {

        grid-template-columns: 1fr;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .about-card {

        align-items: flex-start;

        flex-direction: column;

        padding: 27px;

    }

    .about-card h2 {

        font-size: 29px;

    }

    .footer {

        flex-direction: column;

        align-items: flex-start;

    }

}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        transition: none !important;

        animation: none !important;

    }

}