@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#030913;--panel:#071321;--panel2:#0a1727;--line:#18304a;--text:#edf5ff;--muted:#8291a8;--blue:#0786ff;--cyan:#12bfff;--purple:#754cff;--shadow:0 18px 55px #0008}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#09233d 0,#030913 38%);color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif}a{text-decoration:none;color:inherit}.wrap{width:min(1240px,94%);margin:auto}.top{position:sticky;top:0;z-index:40;background:#030913eF;border-bottom:1px solid #102238;backdrop-filter:blur(16px)}.nav{height:78px;display:flex;align-items:center;gap:22px}.brand{font-weight:900;font-size:22px;white-space:nowrap}.brand b{color:#0c91ff}.brand small{display:block;font-size:7px;color:#8797ad;font-weight:500}.search{flex:1;max-width:520px;border:1px solid #1b3855;background:#071626;border-radius:15px;padding:10px 14px;display:flex;gap:8px}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff}.navlinks{display:flex;gap:18px;font-size:12px;color:#a4b0c1}.navlinks a:hover{color:#fff}.auth{display:flex;gap:7px}.btn{border:1px solid #235176;background:#0b1a2d;color:#fff;border-radius:10px;padding:9px 15px;cursor:pointer}.btn.primary{background:linear-gradient(135deg,#078cff,#0066e9);border-color:#1597ff;box-shadow:0 7px 22px #007bff33}.hero{min-height:455px;background:linear-gradient(90deg,#030913 2%,#030913bb 37%,#03091315 75%),url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1800&q=90') center/cover;border-bottom:1px solid #16304b}.hero-inner{padding:85px 0 65px}.hero-copy{max-width:600px}.pill{display:inline-block;border:1px solid #2d5372;background:#071626dd;border-radius:20px;padding:4px 11px;font-size:11px;color:#8dc9ff}.hero h1{font-size:46px;line-height:1.25;margin:14px 0}.hero p{color:#b0bccb;line-height:2;font-size:14px}.actions{display:flex;gap:9px;margin-top:20px}.section{padding:25px 0}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.section-head h2{font-size:20px;margin:0}.section-head a{font-size:11px;color:#54adff}.genres{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}.genre{height:130px;border:1px solid #1a3853;border-radius:12px;background-size:cover;background-position:center;position:relative;overflow:hidden}.genre:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#020710eF)}.genre span{position:absolute;bottom:9px;right:9px;z-index:2;font-weight:800;font-size:13px}.layout{display:grid;grid-template-columns:205px minmax(0,1fr) 255px;gap:13px}.panel{background:#06111f;border:1px solid #17304b;border-radius:12px;padding:13px;box-shadow:0 8px 30px #0004}.side h3{font-size:13px;color:#23a5ff}.side a{display:block;padding:9px 8px;border-radius:7px;color:#9aa9bd;font-size:11px}.side a:hover{background:#0c1d31;color:#fff}.games{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.game{border:1px solid #19334e;border-radius:10px;overflow:hidden;background:#091522}.game-cover{height:190px;background-size:cover;background-position:center;position:relative}.game-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 42%,#06101d)}.tag{position:absolute;top:7px;right:7px;z-index:2;background:#04101bdd;border:1px solid #35516d;border-radius:6px;padding:3px 6px;font-size:9px}.game-body{padding:8px}.game-title{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{display:flex;justify-content:space-between;color:#8c9bb0;font-size:9px;margin-top:5px}.download{display:block;background:#0788ff;text-align:center;border-radius:7px;padding:7px;margin-top:8px;font-size:10px;font-weight:800}.news article{padding:10px 0;border-bottom:1px solid #142940;color:#aab6c7;font-size:10px}.promo{margin-top:13px;min-height:160px;border-radius:12px;padding:17px;background:linear-gradient(135deg,#091a31dd,#07101ccc),url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=700&q=80') center/cover}.promo h3{margin:6px 0;font-size:15px}.promo p{font-size:10px;color:#9eacbf}.game-page{padding:30px 0}.game-head{min-height:350px;border:1px solid #19324c;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;position:relative}.game-head:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#030913 8%,#030913c7 45%,#03091320)}.game-head-content{position:relative;z-index:2;padding:45px;max-width:680px}.game-head h1{font-size:40px}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.info{background:#071321dd;border:1px solid #19314b;border-radius:9px;padding:10px}.info small{display:block;color:#73849b;font-size:9px}.info b{font-size:11px}.content-box{margin-top:15px}.content-box h2{font-size:18px}.content-box p{color:#a5b1c2;line-height:2;font-size:13px}.downloads{display:grid;gap:8px}.dl{display:flex;justify-content:space-between;align-items:center;background:#091727;border:1px solid #19344e;padding:12px;border-radius:10px}.footer{margin-top:30px;padding:35px 0;background:#02060c;border-top:1px solid #142941}.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:25px}.footgrid h4{font-size:13px}.footgrid a,.footgrid p{color:#78879b;font-size:11px;line-height:2}.adminbody{background:#050b14}.admin-nav{padding:18px 0;border-bottom:1px solid #1b2c41}.admin-grid{display:grid;grid-template-columns:220px 1fr;gap:15px;padding:20px 0}.admin-menu{background:#071321;border:1px solid #19304a;border-radius:12px;padding:10px}.admin-menu a{display:block;padding:11px;border-radius:8px;color:#9eabc0}.admin-menu a:hover{background:#0e2034;color:#fff}.form{background:#071321;border:1px solid #19304a;border-radius:12px;padding:20px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;margin-bottom:6px;color:#9eabc0}.field input,.field textarea,.field select{width:100%;background:#040b14;color:#fff;border:1px solid #203b56;border-radius:8px;padding:10px;outline:0}.field textarea{min-height:120px}.table{width:100%;border-collapse:collapse;font-size:11px}.table th,.table td{padding:10px;border-bottom:1px solid #19304a;text-align:right}.alert{padding:10px;border-radius:9px;background:#102337;color:#8dc8ff;margin-bottom:12px}

.brand-logo {
    width: 33px;
    height: 33px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 6px;
}

/* =========================================================
   Comments
   ========================================================= */

.comment-box {
    margin-top: 24px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(7,134,255,.10),
            transparent 35%
        ),
        rgba(8,15,27,.82);
    box-shadow: 0 15px 45px rgba(0,0,0,.22);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.comment-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(7,134,255,.12);
    border: 1px solid rgba(7,134,255,.20);
    font-size: 23px;
}

.comment-header h2 {
    margin: 0 0 6px;
    font-size: 21px;
}

.comment-header p {
    margin: 0;
    color: #718096;
    font-size: 13px;
}

.comment-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.comment-field {
    margin-bottom: 17px;
}

.comment-field label {
    display: block;
    margin-bottom: 8px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

.comment-field input,
.comment-field textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    outline: none;
    background: rgba(3,9,19,.65);
    color: #e5edf7;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.comment-field input {
    height: 48px;
    padding: 0 15px;
}

.comment-field textarea {
    min-height: 140px;
    padding: 14px 15px;
    line-height: 1.9;
}

.comment-field input::placeholder,
.comment-field textarea::placeholder {
    color: #526174;
}

.comment-field input:focus,
.comment-field textarea:focus {
    border-color: rgba(7,134,255,.65);
    background: rgba(3,9,19,.9);
    box-shadow: 0 0 0 4px rgba(7,134,255,.08);
}

.comment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 145px;
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        #0786ff,
        #12bfff
    );
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(7,134,255,.20);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.comment-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(7,134,255,.30);
}

.comment-submit-icon {
    font-size: 17px;
    transition: transform .2s ease;
}

.comment-submit:hover .comment-submit-icon {
    transform: translateX(-3px);
}

.comment-alert {
    margin-bottom: 20px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(7,134,255,.08);
    border: 1px solid rgba(7,134,255,.15);
    color: #8fc9ff;
    font-size: 13px;
}


/* موبایل */

@media (max-width: 700px) {

    .comment-box {
        padding: 20px;
        border-radius: 16px;
    }

    .comment-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .comment-header {
        align-items: flex-start;
    }

    .comment-header h2 {
        font-size: 18px;
    }

    .comment-submit {
        width: 100%;
    }

}

/* =========================================================
   Game Comments
   ========================================================= */

.comments-section {
    margin-top: 24px;
}

.comments-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 19px;
    font-weight: 700;
}

.comments-title > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.comments-title-icon {
    font-size: 20px;
}

.comments-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50px;
    background: rgba(7,134,255,.10);
    border: 1px solid rgba(7,134,255,.18);
    color: #42aaff;
    font-size: 12px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.comment-card {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: rgba(8,15,27,.72);
    transition: border-color .2s ease, transform .2s ease;
}

.comment-card:hover {
    border-color: rgba(7,134,255,.20);
    transform: translateY(-1px);
}

.comment-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.comment-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg,#0786ff,#12bfff);
    color: #fff;
    font-weight: 800;
}

.comment-user strong {
    display: block;
    color: #e8eef7;
    font-size: 14px;
}

.comment-user small {
    display: block;
    margin-top: 3px;
    color: #68788d;
    font-size: 11px;
}

.comment-card time {
    color: #526174;
    font-size: 11px;
    white-space: nowrap;
}

.comment-content {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.05);
    color: #aebacc;
    font-size: 13px;
    line-height: 2;
}

.comments-empty {
    padding: 30px 20px;
    margin-bottom: 18px;
    text-align: center;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(8,15,27,.45);
}

.comments-empty-icon {
    margin-bottom: 10px;
    font-size: 27px;
}

.comments-empty strong {
    display: block;
    color: #cbd5e1;
    font-size: 14px;
}

.comments-empty span {
    display: block;
    margin-top: 5px;
    color: #5e6d80;
    font-size: 12px;
}


/* دکمه باز و بسته کردن فرم */

.comment-toggle {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(7,134,255,.18);
    border-radius: 14px;
    background: rgba(7,134,255,.07);
    color: #54b3ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.comment-toggle:hover {
    background: rgba(7,134,255,.13);
    border-color: rgba(7,134,255,.35);
}

.comment-toggle-arrow {
    font-size: 18px;
    transition: transform .25s ease;
}

.comment-toggle.active .comment-toggle-arrow {
    transform: rotate(180deg);
}


/* پنل فرم */

.comment-form-panel {
    display: none;
    margin-top: 12px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at top right,
            rgba(7,134,255,.09),
            transparent 38%
        ),
        rgba(8,15,27,.82);
    animation: commentPanelIn .25s ease;
}

.comment-form-panel.open {
    display: block;
}

@keyframes commentPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.comment-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.comment-field {
    margin-bottom: 16px;
}

.comment-field label {
    display: block;
    margin-bottom: 7px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
}

.comment-field input,
.comment-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    outline: none;
    background: rgba(3,9,19,.65);
    color: #e5edf7;
    font-family: inherit;
    font-size: 13px;
    transition: .2s ease;
}

.comment-field input {
    height: 46px;
    padding: 0 14px;
}

.comment-field textarea {
    min-height: 130px;
    padding: 12px 14px;
    line-height: 1.9;
    resize: vertical;
}

.comment-field input:focus,
.comment-field textarea:focus {
    border-color: rgba(7,134,255,.55);
    box-shadow: 0 0 0 4px rgba(7,134,255,.07);
}

.comment-field input::placeholder,
.comment-field textarea::placeholder {
    color: #4f5e71;
}

.comment-submit {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg,#0786ff,#12bfff);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(7,134,255,.18);
    transition: .2s ease;
}

.comment-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(7,134,255,.28);
}

.comment-alert {
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: 11px;
    background: rgba(7,134,255,.08);
    border: 1px solid rgba(7,134,255,.15);
    color: #8fc9ff;
    font-size: 12px;
}


/* موبایل */

@media (max-width: 700px) {

    .comment-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .comment-form-panel {
        padding: 18px;
    }

    .comment-card {
        padding: 16px;
    }

    .comment-card-head {
        align-items: flex-start;
    }

}

/* =========================================================
   Comment Toggle
   ========================================================= */

.comment-toggle {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid rgba(7,134,255,.22);
    border-radius: 14px;

    background: rgba(7,134,255,.08);
    color: #42aaff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .2s ease;
}

.comment-toggle:hover {
    background: rgba(7,134,255,.14);
    border-color: rgba(7,134,255,.40);
}

.comment-toggle-arrow {
    font-size: 20px;
    line-height: 1;

    transition: transform .3s ease;
}

.comment-toggle.active .comment-toggle-arrow {
    transform: rotate(180deg);
}


/* پنل فرم */

.comment-form-panel {
    display: none;

    margin-top: 14px;
    padding: 25px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at top right,
            rgba(7,134,255,.09),
            transparent 40%
        ),
        rgba(8,15,27,.82);
}

.comment-form-panel.open {
    display: block;
    animation: commentSlideDown .3s ease;
}


@keyframes commentSlideDown {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

}


/* موبایل */

@media (max-width: 700px) {

    .comment-form-panel {
        padding: 18px;
    }

}

/* =========================
   FOOTER IMAGE BOXES
========================= */

.footer-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.footer-image-box {
    width: 100%;
    height: 80px;

    overflow: hidden;

    border-radius: 12px;

    border: 1px solid #173b56;

    background: #061322;

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

    transition: .25s ease;
}

.footer-image-box:hover {
    border-color: #008eff;

    box-shadow:
        0 8px 22px rgba(0, 132, 255, .18);

    transform: translateY(-2px);
}

.footer-image-box img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* جلوگیری از خراب شدن فوتر در موبایل */

@media (max-width: 800px) {

    .footer-image-box {
        height: 130px;
    }

}

.footer-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.footer-image-box {
    width: 100%;
    height: 115px;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid #173b56;
    background: #061322;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

سلام

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background:
                radial-gradient(
                    circle at 50% -20%,
                    rgba(0, 119, 255, .13),
                    transparent 35%
                ),
                #020b15;
            color: #f5f8ff;
            font-family: "Vazirmatn", Tahoma, sans-serif;
        }

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

        img {
            max-width: 100%;
        }

        button,
        input {
            font-family: inherit;
        }

        .wrap {
            width: min(1400px, calc(100% - 50px));
            margin: auto;
        }

        /* =========================================================
           HEADER
        ========================================================= */

        .topbar {
            position: sticky;
            top: 0;
            z-index: 1000;

            background: rgba(2, 11, 21, .94);
            backdrop-filter: blur(18px);

            border-bottom: 1px solid rgba(0, 132, 255, .22);
        }

        .topbar-inner {
            min-height: 82px;

            display: flex;
            align-items: center;
            gap: 25px;
        }

        .logo {
            min-width: 245px;

            display: flex;
            align-items: center;
            gap: 12px;
        }

.logo-icon {
    width: 52px;
    height: 52px;

    border-radius: 50%;
    overflow: hidden;

    background: #06203e;

    box-shadow:
        0 0 25px rgba(0, 132, 255, .45);
}

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

        .logo strong {
            display: block;

            font-size: 22px;
            font-weight: 900;
            letter-spacing: -.7px;
        }

        .logo strong span {
            color: #0794ff;
        }

        .logo small {
            display: block;

            margin-top: 2px;

            color: #8ca2bb;
            font-size: 8px;
        }

        .search {
            flex: 1;

            height: 45px;

            display: flex;
            align-items: center;

            background: #081a2c;

            border: 1px solid #173955;
            border-radius: 25px;

            padding: 0 16px;

            color: #7190aa;
        }

        .search span {
            font-size: 18px;
            margin-left: 10px;
        }

        .search input {
            width: 100%;

            border: 0;
            outline: 0;

            background: transparent;
            color: white;

            font-size: 12px;
        }

        .search input::placeholder {
            color: #71869c;
        }

        .auth {
            display: flex;
            gap: 8px;
        }

        .auth a {
            height: 42px;

            padding: 0 18px;

            border-radius: 22px;

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

            font-size: 12px;
            font-weight: 700;
        }

        .auth .login {
            background: #0a1c30;
            border: 1px solid #21405e;
        }

        .auth .register {
            background: linear-gradient(
                135deg,
                #087bff,
                #0060e8
            );

            box-shadow:
                0 8px 25px rgba(0, 102, 255, .28);
        }

        /* =========================================================
           NAV
        ========================================================= */

        .nav {
            border-top: 1px solid rgba(255,255,255,.025);
        }

        .nav-inner {
            height: 48px;

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

            gap: 7px;
        }

        .nav a {
            position: relative;

            padding: 13px 18px;

            color: #b6c5d4;

            font-size: 12px;
            font-weight: 600;
        }

        .nav a:hover,
        .nav a.active {
            color: #168fff;
        }

        .nav a.active::after {
            content: "";

            position: absolute;

            left: 15px;
            right: 15px;
            bottom: 0;

            height: 2px;

            background: #008cff;

            box-shadow:
                0 0 14px #008cff;
        }

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

        .hero {
            position: relative;

            min-height: 365px;

            overflow: hidden;

            border-bottom: 1px solid #0a3553;

            background:
                linear-gradient(
                    90deg,
                    rgba(2, 8, 15, .98) 0%,
                    rgba(2, 8, 15, .87) 32%,
                    rgba(2, 8, 15, .25) 75%,
                    rgba(2, 8, 15, .82) 100%
                ),
                url("<?= e(
                    !empty($popular[0]['image'])
                        ? $popular[0]['image']
                        : 'assets/default-game.svg'
                ) ?>")
                center / cover no-repeat;
        }

        .hero::after {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    180deg,
                    transparent 65%,
                    #020b15 100%
                );

            pointer-events: none;
        }

        .hero-inner {
            min-height: 365px;

            display: flex;
            align-items: center;

            position: relative;
            z-index: 2;
        }

        .hero-copy {
            width: min(600px, 70%);
        }

        .pill {
            display: inline-flex;

            padding: 6px 13px;

            border-radius: 20px;

            color: #ffbd72;

            background: rgba(17, 35, 49, .9);

            border: 1px solid rgba(255, 151, 44, .35);

            font-size: 11px;
            font-weight: 700;
        }

        .hero h1 {
            margin: 15px 0 10px;

            font-size: clamp(30px, 4vw, 48px);

            line-height: 1.25;

            font-weight: 900;
        }

        .hero h1 span {
            color: #078cff;
        }

        .hero p {
            max-width: 580px;

            margin: 0 0 20px;

            color: #b4c3d1;

            line-height: 2;

            font-size: 13px;
        }

        .hero-meta {
            display: flex;
            gap: 22px;

            margin-bottom: 22px;

            color: #9eb0c0;

            font-size: 11px;
        }

        .hero-meta strong {
            color: white;
            display: block;
            margin-top: 4px;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            min-height: 42px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0 22px;

            border-radius: 22px;

            border: 1px solid #23445f;

            background: #091a2b;

            color: white;

            font-size: 12px;
            font-weight: 700;
        }

        .btn.primary {
            border: 0;

            background:
                linear-gradient(
                    135deg,
                    #078bff,
                    #005ce7
                );

            box-shadow:
                0 8px 25px rgba(0, 117, 255, .28);
        }

        /* =========================================================
           CATEGORIES
        ========================================================= */

        .categories {
            padding: 20px 0;

            border-bottom: 1px solid #0b2a42;
        }

        .category-row {
            display: grid;

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

            gap: 10px;
        }

        .category-card {
            position: relative;

            height: 115px;

            overflow: hidden;

            border-radius: 7px;

            border: 1px solid #17415e;

            background: #061322;

            transition: .25s;
        }

        .category-card:hover {
            transform: translateY(-4px);

            border-color: #008dff;

            box-shadow:
                0 10px 30px rgba(0, 113, 255, .18);
        }

        .category-card::before {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    transparent 20%,
                    rgba(1, 8, 16, .92)
                ),
                var(--bg)
                center / cover;
        }

        .category-card span {
            position: absolute;

            right: 10px;
            left: 10px;
            bottom: 10px;

            font-size: 12px;
            font-weight: 800;

            text-align: center;
        }

        .category-card small {
            display: block;

            margin-top: 3px;

            color: #8299ad;

            font-size: 9px;
            font-weight: 500;
        }

        /* =========================================================
           CONTENT
        ========================================================= */

        .content {
            padding: 20px 0 35px;
        }

        .content-grid {
            display: grid;

            grid-template-columns:
                210px
                minmax(0, 1fr)
                260px;

            gap: 12px;
        }

        .panel {
            background:
                linear-gradient(
                    145deg,
                    rgba(8, 27, 44, .94),
                    rgba(3, 16, 29, .94)
                );

            border: 1px solid #123650;

            border-radius: 7px;
        }

        .sidebar {
            padding: 13px;
        }

        .side-title {
            margin: 4px 0 9px;

            color: #008eff;

            font-size: 12px;
            font-weight: 800;
        }

        .side-link {
            display: flex;

            align-items: center;

            gap: 7px;

            padding: 8px 5px;

            color: #b6c8d8;

            border-bottom: 1px solid rgba(255,255,255,.035);

            font-size: 10px;
        }

        .side-link:hover {
            color: #fff;
            background: rgba(0, 129, 255, .07);
        }

        /* =========================================================
           SECTION HEADER
        ========================================================= */

        .section-head {
            display: flex;

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

            margin-bottom: 10px;
        }

        .section-head h2 {
            margin: 0;

            font-size: 15px;
            font-weight: 800;
        }

        .section-head a {
            color: #008eff;

            font-size: 10px;
        }

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

        .games-panel {
            padding: 10px;
        }

        .games {
            display: grid;

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

            gap: 9px;
        }

        .game {
            overflow: hidden;

            background: #061626;

            border: 1px solid #163b56;

            border-radius: 6px;

            transition: .25s;
        }

        .game:hover {
            transform: translateY(-4px);

            border-color: #008eff;

            box-shadow:
                0 12px 25px rgba(0, 113, 255, .18);
        }

        .game-cover {
            position: relative;

            height: 145px;

            background-position: center;
            background-size: cover;

            display: flex;
            align-items: flex-start;

            padding: 7px;
        }

        .tag {
            padding: 4px 7px;

            background: rgba(2, 12, 22, .85);

            border: 1px solid rgba(0, 142, 255, .35);

            border-radius: 4px;

            color: #a9d8ff;

            font-size: 8px;
        }

        .game-body {
            padding: 9px;
        }

        .game-title {
            overflow: hidden;

            white-space: nowrap;
            text-overflow: ellipsis;

            font-size: 11px;
            font-weight: 800;
        }

        .meta {
            display: flex;

            justify-content: space-between;

            margin: 8px 0;

            color: #91a7ba;

            font-size: 8px;
        }

        .download {
            display: flex;

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

            height: 30px;

            border-radius: 5px;

            background:
                linear-gradient(
                    135deg,
                    #078cff,
                    #0061df
                );

            font-size: 10px;
            font-weight: 700;
        }

        /* =========================================================
           NEWS
        ========================================================= */

        .news {
            padding: 12px;
        }

        .news article {
            padding: 11px 2px;

            border-bottom: 1px solid rgba(255,255,255,.05);
        }

        .news article:last-child {
            border-bottom: 0;
        }

        .news article a {
            color: #c4d2df;

            font-size: 10px;
            line-height: 1.9;
        }

        .news article a:hover {
            color: #0793ff;
        }

        .promo {
            margin-top: 12px;

            padding: 18px;

            min-height: 190px;

            border-radius: 7px;

            border: 1px solid #184766;

            background:
                linear-gradient(
                    145deg,
                    rgba(0, 83, 163, .34),
                    rgba(4, 18, 31, .98)
                );
        }

        .promo h3 {
            margin: 14px 0 8px;

            font-size: 14px;
        }

        .promo p {
            color: #94a9bb;

            font-size: 10px;
            line-height: 1.9;
        }

        .promo .btn {
            width: 100%;
            margin-top: 8px;
        }

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

        footer {
            border-top: 1px solid #12344d;

            background: #020914;

            padding: 35px 0 0;
        }

        .footer-grid {
            display: grid;

            grid-template-columns:
                1.5fr
                1fr
                1fr
                1fr;

            gap: 35px;
        }

        .footer-logo {
            font-size: 22px;
            font-weight: 900;
        }

        .footer-logo span {
            color: #008eff;
        }

        footer p {
            color: #71869a;

            font-size: 10px;

            line-height: 2;
        }

        .footer-title {
            margin-bottom: 12px;

            color: #fff;

            font-size: 12px;
            font-weight: 800;
        }

        .footer-link {
            display: block;

            margin: 8px 0;

            color: #8196aa;

            font-size: 10px;
        }

        .footer-link:hover {
            color: #008eff;
        }

        .copyright {
            margin-top: 30px;

            padding: 15px 0;

            border-top: 1px solid #0b253a;

            color: #5e7387;

            text-align: center;

            font-size: 9px;
        }

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

        @media (max-width: 1100px) {

            .category-row {
                grid-template-columns:
                    repeat(4, 1fr);
            }

            .content-grid {
                grid-template-columns:
                    180px
                    minmax(0, 1fr);
            }

            .newscol {
                display: none;
            }

            .games {
                grid-template-columns:
                    repeat(4, 1fr);
            }

        }

        @media (max-width: 800px) {

            .wrap {
                width: min(
                    100% - 25px,
                    700px
                );
            }

            .topbar-inner {
                flex-wrap: wrap;

                padding: 12px 0;
            }

            .logo {
                min-width: auto;
            }

            .search {
                order: 3;

                flex-basis: 100%;
            }

            .nav {
                overflow-x: auto;
            }

            .nav-inner {
                justify-content: flex-start;

                width: max-content;
            }

            .hero-copy {
                width: 100%;
            }

            .hero {
                min-height: 420px;
            }

            .hero-inner {
                min-height: 420px;
            }

            .category-row {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .content-grid {
                display: block;
            }

            .sidebar {
                margin-bottom: 15px;
            }

            .games {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .footer-grid {
                grid-template-columns:
                    repeat(2, 1fr);
            }

        }

        @media (max-width: 480px) {

            .auth {
                display: none;
            }

            .hero h1 {
                font-size: 29px;
            }

            .games {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .game-cover {
                height: 125px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

        }

/* =========================
   SOCIAL LINKS
========================= */

.social-links {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
}

.social-links a {
    width: 38px;
    height: 38px;

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

    border-radius: 8px;

    background: #071827;
    border: 1px solid #173b56;

    color: #9db2c5;

    transition: .25s ease;

    text-decoration: none;
}

.social-links a:hover {
    transform: translateY(-3px);

    color: #fff;

    background: #0b2942;
    border-color: #008eff;

    box-shadow: 0 8px 20px rgba(0, 132, 255, .22);
}

.social-links svg {
    width: 19px;
    height: 19px;

    fill: currentColor;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
}

.social-links a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #071827;
    border: 1px solid #173b56;
    color: #9db2c5;
    transition: .25s ease;
}

.social-links a:hover {
    transform: translateY(-3px);
    color: #fff;
    background: #0b2942;
    border-color: #008eff;
    box-shadow: 0 8px 20px rgba(0, 132, 255, .22);
}

.social-links svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}


/* =========================
   FOOTER IMAGE BOXES
========================= */

.footer-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.footer-image-box {
    width: 100%;
    height: 115px;

    overflow: hidden;

    border-radius: 7px;

    border: 1px solid #173b56;

    background: #061322;

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

    transition: .25s ease;
}

.footer-image-box:hover {
    border-color: #008eff;

    box-shadow:
        0 8px 22px rgba(0, 132, 255, .18);

    transform: translateY(-2px);
}

.footer-image-box img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


@media (max-width: 800px) {

    .footer-image-box {
        height: 130px;
    }

}

.wpsurl-button.wpsurl-redirect-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;
    height: 42px;

    padding: 0 22px;
    margin: 4px 3px;

    background: linear-gradient(
        90deg,
        #008cff,
        #00d9ff,
        #7a00ff,
        #008cff
    );

    background-size: 300% 100%;

    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 11px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;

    box-shadow:
        0 4px 12px rgba(0, 140, 255, 0.30);

    animation: rgbButton 5s linear infinite;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

@keyframes rgbButton {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.wpsurl-button.wpsurl-redirect-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0, 140, 255, 0.50),
        0 0 25px rgba(0, 200, 255, 0.25);
}

.wpsurl-button.wpsurl-redirect-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

.content-box .info-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.content-box .info {
    min-height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================================================
   GAME HEADER
   ========================================================= */

.game-head {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}


/* =========================================================
   GAME HEADER INNER
   ========================================================= */

.game-head-inner {
    width: 100%;

    display: flex;
    flex-direction: row-reverse;

    align-items: flex-start;
    justify-content: space-between;

    gap: 40px;

    box-sizing: border-box;
}


/* =========================================================
   GAME CONTENT
   ========================================================= */

.game-head-content {
    flex: 1 1 auto;
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   GAME HEAD
   ========================================================= */

.game-head {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   GAME HEAD INNER
   ========================================================= */

.game-head-inner {
    width: 100%;

    display: flex;

    /* چون سایت RTL است، row معمولی باعث می‌شود
       محتوا سمت راست و ویدیو سمت چپ قرار بگیرد */
    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    box-sizing: border-box;
}


/* =========================================================
   GAME TRAILER - FINAL
   ========================================================= */

.game-head {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* محتوای هدر بالاتر از بک‌گراند */
.game-head-inner {
    position: relative;
    z-index: 5;

    width: 100%;

    display: flex;
    flex-direction: row;

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

    gap: 40px;

    box-sizing: border-box;
}


/* =========================================================
   CONTENT
   ========================================================= */

.game-head-content {
    position: relative;
    z-index: 6;

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


/* =========================================================
   TRAILER
   ========================================================= */

.game-trailer {
    position: relative;
    z-index: 20;

    width: 420px;
    height: 236px;

    flex: 0 0 420px;

    margin: 0;
    padding: 0;

    background: #000;

    border-radius: 14px;

    overflow: hidden;

    box-sizing: border-box;

    align-self: center;

    isolation: isolate;
}


/* =========================================================
   VIDEO
   ========================================================= */

.game-trailer video {
    position: relative;
    z-index: 21;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    outline: none;

    background: #000;

    object-fit: cover;

    box-sizing: border-box;
}


/* =========================================================
   کنترل‌های خود مرورگر
   ========================================================= */

.game-trailer video::-webkit-media-controls {
    z-index: 100;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    .game-head-inner {
        flex-direction: row;
        align-items: center;
    }

    .game-trailer {
        width: 420px;
        height: 236px;

        flex: 0 0 420px;

        margin: 0;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .game-head-inner {
        flex-direction: column;

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

        gap: 20px;
    }

    .game-head-content {
        width: 100%;
        order: 1;
    }

    .game-trailer {
        width: 100%;
        max-width: 420px;

        height: auto;
        aspect-ratio: 16 / 9;

        flex: none;

        order: 2;

        margin: 0 auto;
    }

    .game-trailer video {
        width: 100%;
        height: 100%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .game-head-inner {
        gap: 16px;
    }

    .game-trailer {
        width: 100%;
        max-width: 100%;

        aspect-ratio: 16 / 9;

        border-radius: 12px;
    }
}

.game-trailer {
    transform: translateX(60px);
}

@media (max-width: 600px) {
    .game-trailer {
        transform: translateX(0);
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================
   فونت صفحه بازی
========================================= */

.game-page,
.game-page input,
.game-page textarea,
.game-page button {
    font-family: "Estedad", Tahoma, sans-serif;
}


/* عنوان اصلی بازی */
.game-head h1 {
    font-weight: 900;
    letter-spacing: -1px;
}


/* توضیحات کوتاه */
.game-head-content > p {
    font-weight: 500;
    line-height: 2;
}


/* تیترهای بخش‌ها */
.game-page h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}


/* مشخصات بازی */
.info small {
    font-weight: 500;
}

.info b {
    font-weight: 700;
}


/* متن معرفی و آموزش */
.game-description {
    font-weight: 500;
    line-height: 2.2;
}


/* بخش نظرات */
.comments-title {
    font-weight: 800;
}

.comment-card strong {
    font-weight: 700;
}

.comment-card small {
    font-weight: 500;
}

.comment-content {
    font-weight: 500;
    line-height: 2;
}


/* فرم نظر */
.comment-field label {
    font-weight: 600;
}

.comment-field input,
.comment-field textarea {
    font-weight: 500;
}

.comment-submit,
.comment-toggle {
    font-family: "Estedad", Tahoma, sans-serif;
    font-weight: 700;
}

<style>
/* =========================================
   تم روشن صفحه بازی
   ========================================= */

body.light-theme {
    background: #f3f6fa;
    color: #172334;
}

/* پنل اصلی */
body.light-theme .panel,
body.light-theme .content-box {
    background: #ffffff;
    color: #172334;
    border-color: #dce6ef;
}

/* تیترها */
body.light-theme .content-box h2 {
    color: #172334;
}

/* توضیحات بازی */
body.light-theme .game-description {
    color: #435466;
}

/* اطلاعات بازی */
body.light-theme .info {
    background: #f7fafd;
    border-color: #dce6ef;
}

body.light-theme .info small {
    color: #718096;
}

body.light-theme .info b {
    color: #172334;
}

/* بخش نظرات */
body.light-theme .comments-section {
    color: #172334;
}

body.light-theme .comments-title {
    color: #172334;
}

body.light-theme .comments-count {
    background: #eef6ff;
    color: #087fff;
}

/* کارت نظر */
body.light-theme .comment-card {
    background: #ffffff;
    border-color: #dce6ef;
    box-shadow: 0 5px 18px rgba(30, 60, 90, .06);
}

body.light-theme .comment-card-head {
    border-color: #e5edf4;
}

body.light-theme .comment-user strong {
    color: #172334;
}

body.light-theme .comment-user small {
    color: #718096;
}

body.light-theme .comment-card time {
    color: #8493a3;
}

body.light-theme .comment-content {
    color: #435466;
}

/* وقتی نظری ثبت نشده */
body.light-theme .comments-empty {
    background: #ffffff;
    border-color: #dce6ef;
}

body.light-theme .comments-empty strong {
    color: #172334;
}

body.light-theme .comments-empty span {
    color: #718096;
}

/* دکمه ثبت نظر */
body.light-theme .comment-toggle {
    background: #ffffff;
    color: #172334;
    border-color: #dce6ef;
}

body.light-theme .comment-toggle:hover {
    border-color: #008eff;
    color: #087fff;
    background: #f7fbff;
}

/* فرم نظر */
body.light-theme .comment-form-panel {
    background: #ffffff;
    border-color: #dce6ef;
}

body.light-theme .comment-field label {
    color: #33485c;
}

body.light-theme .comment-field input,
body.light-theme .comment-field textarea {
    background: #f8fafc;
    color: #172334;
    border-color: #d7e2ec;
}

body.light-theme .comment-field input::placeholder,
body.light-theme .comment-field textarea::placeholder {
    color: #98a6b5;
}

body.light-theme .comment-field input:focus,
body.light-theme .comment-field textarea:focus {
    background: #ffffff;
    border-color: #008eff;
    box-shadow: 0 0 0 3px rgba(0, 142, 255, .08);
}

/* هشدار فرم */
body.light-theme .comment-alert {
    background: #eef7ff;
    color: #1769aa;
    border-color: #cfe8ff;
}

<style>
body.light-theme {
    background: #f3f6fa;
    color: #172334;
}

body.light-theme .content-box,
body.light-theme .panel {
    background: #ffffff;
    color: #172334;
    border-color: #dce6ef;
}

body.light-theme .content-box h2 {
    color: #172334;
}

body.light-theme .game-description {
    color: #435466;
}

body.light-theme .info {
    background: #f7fafd;
    border-color: #dce6ef;
}

body.light-theme .info small {
    color: #718096;
}

body.light-theme .info b {
    color: #172334;
}

body.light-theme .comments-section {
    color: #172334;
}

body.light-theme .comments-title {
    color: #172334;
}

body.light-theme .comment-card {
    background: #ffffff;
    border-color: #dce6ef;
}

body.light-theme .comment-user strong {
    color: #172334;
}

body.light-theme .comment-user small {
    color: #718096;
}

body.light-theme .comment-content {
    color: #435466;
}

body.light-theme .comments-empty {
    background: #ffffff;
    border-color: #dce6ef;
}

body.light-theme .comments-empty strong {
    color: #172334;
}

body.light-theme .comments-empty span {
    color: #718096;
}

body.light-theme .comment-toggle {
    background: #ffffff;
    color: #172334;
    border-color: #dce6ef;
}

body.light-theme .comment-form-panel {
    background: #ffffff;
    border-color: #dce6ef;
}

body.light-theme .comment-field label {
    color: #33485c;
}

body.light-theme .comment-field input,
body.light-theme .comment-field textarea {
    background: #f8fafc;
    color: #172334;
    border-color: #d7e2ec;
}

body.light-theme .comment-field input:focus,
body.light-theme .comment-field textarea:focus {
    background: #ffffff;
    border-color: #008eff;
}

/* Pagination */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 28px;

    flex-wrap: wrap;
}

.pagination a,
.pagination-dots {
    width: 40px;
    height: 40px;

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

    border-radius: 10px;
}

.pagination a {
    background: #081a2c;

    color: #c9d7e5;

    border: 1px solid rgba(0, 142, 255, .18);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        .2s ease;
}

.pagination a:hover {
    background: #0b2a45;

    color: #fff;

    border-color: #008eff;

    transform: translateY(-2px);
}

.pagination a.active {
    background: linear-gradient(
        135deg,
        #008eff,
        #0066cc
    );

    color: #fff;

    border-color: #008eff;

    box-shadow:
        0 5px 18px rgba(0, 142, 255, .25);
}

.pagination-dots {
    color: #70869b;

    font-size: 15px;

    font-weight: 700;

    user-select: none;
}

.pagination .page-arrow {
    font-size: 25px;

    line-height: 1;
}

.theme-toggle {
    transform: translate(-150px, 10px);
}

.theme-toggle:hover {
    border-color: #008eff;
    background: #0a2034;
    transform: translate(-150px, 8px);
}

/* =========================================
   SUPER NOVA - GLOBAL LIGHT THEME
========================================= */

body.light-theme {
    background: #f3f6fa !important;
    color: #172334;
}

/* HEADER */

body.light-theme .top {
    background: #ffffff !important;
    color: #172334;
    border-color: #dce6ef;
}

body.light-theme .nav {
    background: transparent;
}

body.light-theme .brand {
    color: #172334;
}

body.light-theme .brand small {
    color: #718096;
}

/* MENU */

body.light-theme .navlinks a {
    color: #435466;
}

body.light-theme .navlinks a:hover {
    color: #008eff;
}

/* SEARCH */

body.light-theme .search {
    background: #f7fafd !important;
    border-color: #dce6ef;
}

body.light-theme .search input {
    color: #172334;
    background: transparent;
}

body.light-theme .search input::placeholder {
    color: #8a9aaa;
}

/* MAIN */

body.light-theme main {
    background: #f3f6fa;
}

/* PANELS */

body.light-theme .panel,
body.light-theme .content-box {
    background: #ffffff !important;
    color: #172334;
    border-color: #dce6ef;
}

/* GAME CARDS */

body.light-theme .game {
    background: #ffffff;
    border-color: #dce6ef;
}

body.light-theme .game-body {
    background: #ffffff;
}

body.light-theme .game-title {
    color: #172334;
}

body.light-theme .meta {
    color: #718096;
}

/* FOOTER */

body.light-theme footer {
    background: #ffffff !important;
    color: #435466;
    border-color: #dce6ef;
}

body.light-theme footer a {
    color: #435466;
}

body.light-theme footer a:hover {
    color: #008eff;
}

/* FOOTER BOXES */

body.light-theme .footer-box,
body.light-theme .footer-image-box {
    background: #f7fafd;
    border-color: #dce6ef;
}

/* SOCIAL LINKS */

body.light-theme .social-links a {
    background: #ffffff;
    border-color: #dce6ef;
    color: #64748b;
}

body.light-theme .social-links a:hover {
    background: #f7fbff;
    border-color: #008eff;
    color: #008eff;
}

/* THEME BUTTON */

body.light-theme .theme-toggle {
    background: #ffffff;
    border-color: #dce6ef;
    color: #33485c;
}

/* ALERT */

body.light-theme .alert {
    background: #ffffff;
    color: #435466;
    border-color: #dce6ef;
}

body.light-theme,
body.light-theme main {
    background: #f3f6fa;
}

.comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.comment-actions button {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 10px;
    cursor: pointer;
}

.comment-actions .comment-vote-btn {
    min-width: 64px;
    font-size: 16px;
}

.comment-reply-form {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
}

.comment-reply-form input,
.comment-reply-form textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 11px 13px;
    font-size: 14px;
    border-radius: 9px;
}

.comment-reply-form textarea {
    min-height: 110px;
    resize: vertical;
}

.comment-reply-form button {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
}

.comment-replies {
    margin-top: 16px;
    padding-right: 16px;
    border-right: 3px solid rgba(255, 153, 51, 0.65);
}

.comment-reply-card {
    margin-top: 12px;
    padding: 16px;
}

.admin-comment-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    background: rgba(255, 153, 51, 0.16);
    color: #ff9933;
}

@media (max-width: 600px) {
    .comment-actions {
        gap: 8px;
    }

    .comment-actions button {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .comment-replies {
        padding-right: 10px;
    }
}



</style>

@media(max-width:1050px){.layout{grid-template-columns:185px 1fr}.newscol{display:none}.games{grid-template-columns:repeat(4,1fr)}.genres{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.navlinks{display:none}.hero h1{font-size:34px}.layout{grid-template-columns:1fr}.side{display:none}.games{grid-template-columns:repeat(2,1fr)}.genres{grid-template-columns:repeat(2,1fr)}.footgrid{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:450px){.search{display:none}.games{grid-template-columns:1fr}.hero-inner{padding:55px 0}.footgrid{grid-template-columns:1fr}}