/* ========================================
   {{brand}} - Casino Template Styles
   Version: 1.0
   ======================================== */

/* CSS Variables */
:root {
    --primary: #EC407A;
    --primary-dark: {{primary_color_dark}};
    --secondary: #1565C0;
    --accent: #ffd700;
    --bg-dark: #0a0a1a;
    --bg-card: #12122a;
    --bg-light: #1a1a3a;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: all 0.3s ease;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* Container */
.m-hvebtt {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   Header & Navigation
   ======================================== */
.c-yf7n4a {
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.c-co4mxv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.el-eu3ok6 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.el-eu3ok6 img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.x-t8e5j2 {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

._k900li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.evl0pe {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
}

.evl0pe:hover,
.evl0pe.m-oonohb {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.ui-ujgw49 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.n0vr11 {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(var(--primary), 0.4);
    transition: var(--transition);
}

.n0vr11:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary), 0.5);
}

._f3zp2d {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

._f3zp2d span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

/* Breadcrumb */
.fgfrie {
    padding: 100px 0 20px;
    background: var(--bg-dark);
    font-size: 14px;
    color: var(--text-muted);
}

.fgfrie a {
    color: var(--text-secondary);
}

.fgfrie a:hover {
    color: var(--primary);
}

/* ========================================
   Buttons
   ======================================== */
.s-gbg96h {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.m-jwhjxp {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.m-jwhjxp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.is-y6wngz {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.is-y6wngz:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

.hlofpl {
    background: #fff;
    color: var(--bg-dark);
}

.hlofpl:hover {
    background: var(--accent);
}

._hy1nc6 {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

._hy1nc6:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.el-u62i3y {
    padding: 10px 20px;
    font-size: 14px;
}

.ui-c1a1zz {
    width: 100%;
}

/* ========================================
   Hero Section
   ======================================== */
.is-yv6wbj {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.js-vab6zq {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.js-vab6zq img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.js-vab6zq::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 26, 0.5) 0%, rgba(10, 10, 26, 0.9) 100%);
}

.s-haouja {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 120px 0 80px;
}

.is-zg6c3f {
    max-width: 700px;
}

.js-hfvzfs {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.c-d5ymld {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.7;
}

.c-jacg3n {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.js-a8nyb6 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ui-c40dau {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   Section Styles
   ======================================== */
section {
    padding: 80px 0;
}

._yvt0l2 {
    text-align: center;
    margin-bottom: 48px;
}

.ui-quh21b {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(var(--primary), 0.1);
    color: var(--primary);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.is-yjpmjl {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.is-yjpmjl strong {
    color: var(--primary);
}

.x-i6pntt {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   Stats Section
   ======================================== */
.gw08gf {
    background: var(--bg-card);
    padding: 60px 0;
}

.c-ij86a3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.m-xjo0jp {
    text-align: center;
    padding: 24px;
}

._uee7n7 {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.is-avrg77 {
    font-size: 36px;
    font-weight: 800;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
}

.x-h0k1dk {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   About Section
   ======================================== */
.x-mm5ogi {
    background: var(--bg-dark);
}

.is-gqvhix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.is-mzclyu p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.is-mzclyu p strong {
    color: var(--primary);
}

.is-ezsw9l {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.ui-qbzo8f {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.is-jfvg09 {
    font-size: 24px;
}

.m-kek4uc {
    position: relative;
}

.m-kek4uc img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.s-kg3sbf {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--primary);
    padding: 24px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
}

.lmwqps {
    font-size: 36px;
    font-weight: 800;
    display: block;
}

.js-drslzh {
    font-size: 14px;
    opacity: 0.9;
}

/* ========================================
   Games Section
   ======================================== */
.x-p5o1w9 {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-card) 100%);
}

._rjrvtb {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ui-cznp2g {
    background: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.ui-cznp2g:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.is-u246t5 {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.is-u246t5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.ui-cznp2g:hover .is-u246t5 img {
    transform: scale(1.1);
}

.x-rxaxod {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
}

.s-vnbxbl {
    padding: 20px;
}

.s-vnbxbl h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.s-vnbxbl p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.s-yqw886 {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    border-radius: 50px;
}

/* ========================================
   Services Section
   ======================================== */
.x-p2e2td {
    background: var(--bg-dark);
}

.ui-epgslp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.s-bslck3 {
    background: var(--bg-card);
    padding: 32px 24px;
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.s-bslck3:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ui-oj5bp0 {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
}

.s-vh1tcm {
    font-size: 18px;
    margin-bottom: 12px;
}

.x-tonx85 {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ========================================
   Bonus Section
   ======================================== */
.useifr {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    text-align: center;
}

.ui-t37h68 {
    font-size: 36px;
    margin-bottom: 16px;
}

.z4tc48 {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
}

.llfait {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 32px;
}

.is-ir2q6c {
    text-align: center;
}

.c-w2dc66 {
    font-size: 48px;
    font-weight: 800;
    display: block;
}

.is-c4fbjw {
    font-size: 14px;
    opacity: 0.8;
}

/* ========================================
   Payment Section
   ======================================== */
.ui-oi5jlh {
    background: var(--bg-card);
}

.c-wmbymk {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.js-vgka0r {
    background: var(--bg-light);
    padding: 32px 24px;
    border-radius: var(--radius);
    text-align: center;
}

.js-vgka0r img {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
}

.js-vgka0r h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.js-vgka0r p {
    font-size: 14px;
    color: var(--text-secondary);
}

.x-s3vmzo {
    display: flex;
    justify-content: center;
    gap: 48px;
}

._r50rhh {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ui-omani3 {
    font-size: 32px;
}

._r50rhh h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

._r50rhh p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   License Section
   ======================================== */
.m-p3nrha {
    background: var(--bg-dark);
}

.m88e41 {
    display: flex;
    align-items: center;
    gap: 60px;
}

.vqlwx7 h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.vqlwx7 p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.8;
}

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

.ui-yn4m9g li {
    color: var(--text-secondary);
    font-size: 15px;
}

.ui-tqq97k img {
    width: 200px;
    height: 200px;
    border-radius: var(--radius);
}

/* ========================================
   Responsible Gaming Section
   ======================================== */
.js-p7jbif {
    background: var(--bg-card);
}

.js-vyc6ff > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.s-qznkqn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.js-cp19pc {
    text-align: center;
    padding: 24px;
    background: var(--bg-light);
    border-radius: var(--radius);
}

.v1lnfr {
    font-size: 36px;
    margin-bottom: 16px;
    display: block;
}

.js-cp19pc h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.js-cp19pc p {
    font-size: 14px;
    color: var(--text-secondary);
}

.ozmuz3 {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.ozmuz3 a {
    color: var(--primary);
    text-decoration: underline;
}

/* ========================================
   Testimonials Section
   ======================================== */
.m-bivh6m {
    background: var(--bg-dark);
}

.m-llek9z {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.el-gc0uqy {
    background: var(--bg-card);
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.js-h9hl1v {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.js-h9hl1v img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.m-j7c27u {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

._mp023n {
    color: var(--accent);
    font-size: 14px;
}

.ui-spdb2w {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

/* ========================================
   Team Section
   ======================================== */
._gethiq {
    background: var(--bg-card);
}

.x-fqh8w1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.s-i0qw6a {
    text-align: center;
}

.s-i0qw6a img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    border: 4px solid var(--primary);
}

.s-i0qw6a h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.s-i0qw6a p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   Support Section
   ======================================== */
.is-nbvkec {
    background: var(--bg-dark);
}

.js-tep7pr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.el-o156rj {
    background: var(--bg-card);
    padding: 32px;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--border-color);
}

.js-uyogt1 {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
}

.el-o156rj h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.el-o156rj p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* ========================================
   FAQ Section
   ======================================== */
.ui-lef7k4 {
    background: var(--bg-card);
}

.is-gx5ye5 {
    max-width: 800px;
    margin: 0 auto;
}

._e8n47f {
    background: var(--bg-light);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.x-htimb0 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.x-htimb0:hover {
    background: rgba(255, 255, 255, 0.05);
}

.m-apm6zq {
    font-size: 24px;
    font-weight: 300;
    transition: var(--transition);
}

._e8n47f.active .m-apm6zq {
    transform: rotate(45deg);
}

.ui-i4vpgb {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

._e8n47f.active .ui-i4vpgb {
    max-height: 500px;
}

.ui-i4vpgb p {
    padding: 0 24px 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ========================================
   News Section
   ======================================== */
.x-fbnepp {
    background: var(--bg-dark);
}

.el-zfcygz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ui-bgu7ay {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.ui-bgu7ay:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.m-y78gi6 {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.m-y78gi6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.ui-bgu7ay:hover .m-y78gi6 img {
    transform: scale(1.05);
}

._cqjaah {
    padding: 20px;
}

.is-v45fqc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

._ku5bng {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.x-snzmta {
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.js-fe38ks {
    text-align: center;
    margin-top: 40px;
}

/* ========================================
   CTA Section
   ======================================== */
.js-per5yq {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    text-align: center;
    padding: 80px 0;
}

.el-du0k8v h2 {
    font-size: 36px;
    margin-bottom: 16px;
}

.el-du0k8v h2 strong {
    color: var(--accent);
}

.el-du0k8v p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
}

.js-esd3po {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ========================================
   App Section
   ======================================== */
.m-v3vxo4 {
    background: var(--bg-card);
}

.is-w0c0b5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.js-m5tv46 h2 {
    font-size: 32px;
    margin-bottom: 16px;
}

.js-m5tv46 h2 strong {
    color: var(--primary);
}

.js-m5tv46 > p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.x-q70qxq {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.x-q70qxq span {
    font-size: 14px;
    color: var(--text-secondary);
}

.c-ip7wln {
    display: flex;
    gap: 16px;
}

.znng58 {
    text-align: center;
}

.znng58 img {
    width: 180px;
    height: 180px;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.znng58 p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   Footer
   ======================================== */
.el-syiyqx {
    background: #050510;
    padding: 60px 0 30px;
}

.is-gtx65r {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.m-oph1yk {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-oph1yk img {
    width: 48px;
    height: 48px;
}

.m-oph1yk span {
    font-size: 20px;
    font-weight: 700;
}

.m-oph1yk p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.x-i2js8a h4,
._jkvuqp h4 {
    font-size: 16px;
    margin-bottom: 20px;
}

.x-i2js8a ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.x-i2js8a a {
    font-size: 14px;
    color: var(--text-secondary);
}

.x-i2js8a a:hover {
    color: var(--primary);
}

._jkvuqp p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.el-gvqho6 {
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-utfrlh {
    display: flex;
    gap: 12px;
}

.el-utfrlh img {
    width: 40px;
    height: 40px;
    opacity: 0.7;
}

.el-gvqho6 p {
    font-size: 13px;
    color: var(--text-muted);
}

.el-gvqho6 a {
    color: var(--text-secondary);
}

.el-gvqho6 a:hover {
    color: var(--primary);
}

/* ========================================
   Floating Button
   ======================================== */
.is-tqhjth {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.is-bq9j8x {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    animation: pulse 2s infinite;
}

.js-h52d5n {
    font-size: 20px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ========================================
   Page Hero (Game Pages)
   ======================================== */
.s-c75dwl {
    position: relative;
    padding: 160px 0 80px;
    text-align: center;
}

.js-kzmzcx {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.js-kzmzcx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.js-kzmzcx::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 26, 0.7) 0%, var(--bg-dark) 100%);
}

.s-c75dwl .m-hvebtt {
    position: relative;
    z-index: 1;
}

._mkmti6 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
}

._mkmti6 strong {
    color: var(--primary);
}

.ui-fza9hh {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

._v0c2rj {
    display: flex;
    justify-content: center;
    gap: 32px;
}

._v0c2rj span {
    font-size: 16px;
    color: var(--text-secondary);
}

/* ========================================
   Game Introduction
   ======================================== */
.s-jn69en {
    background: var(--bg-dark);
}

.s-n4kxtl {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 48px;
}

.el-gxx5q7 h2 {
    font-size: 32px;
    margin-bottom: 24px;
}

.el-gxx5q7 h2 strong {
    color: var(--primary);
}

.el-gxx5q7 h3 {
    font-size: 22px;
    margin: 32px 0 16px;
}

.el-gxx5q7 p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.8;
}

.el-gxx5q7 p strong {
    color: var(--primary);
}

.c-hqyacg {
    margin: 16px 0 32px;
}

.c-hqyacg li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.c-hqyacg li strong {
    color: var(--text-primary);
}

.s-ix5cx5 {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.is-s013hz {
    background: var(--bg-card);
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    position: sticky;
    top: 100px;
}

.is-s013hz h3 {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.s-uynqfh {
    width: 100%;
    margin-bottom: 24px;
}

.s-uynqfh tr {
    border-bottom: 1px solid var(--border-color);
}

.s-uynqfh td {
    padding: 12px 0;
    font-size: 14px;
}

.s-uynqfh td:first-child {
    color: var(--text-secondary);
}

.s-uynqfh td:last-child {
    text-align: right;
    font-weight: 600;
}

/* ========================================
   Article Page
   ======================================== */
.m-nrgb6o {
    padding: 120px 0 60px;
    background: var(--bg-dark);
}

._mkkwd5 {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
}

.el-swc9fc {
    margin-bottom: 24px;
}

.is-mj37tb {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.s-we3sef {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: var(--text-muted);
}

.ui-mlj6cm {
    margin-bottom: 32px;
}

.ui-mlj6cm img {
    width: 100%;
    border-radius: var(--radius);
}

.js-tk37gn {
    line-height: 1.9;
    color: var(--text-secondary);
}

.js-tk37gn h2 {
    font-size: 24px;
    color: var(--text-primary);
    margin: 32px 0 16px;
}

.js-tk37gn h3 {
    font-size: 20px;
    color: var(--text-primary);
    margin: 24px 0 12px;
}

.js-tk37gn p {
    margin-bottom: 16px;
}

.js-tk37gn strong {
    color: var(--primary);
}

.js-tk37gn ul,
.js-tk37gn ol {
    margin: 16px 0;
    padding-left: 24px;
}

.js-tk37gn li {
    margin-bottom: 8px;
    list-style: disc;
}

.js-iuvufs {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-d54tzm a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: 50px;
    font-size: 13px;
    margin-left: 8px;
}

.el-z670gf a {
    margin-left: 12px;
    color: var(--primary);
}

.ui-gefrvn {
    margin-top: 40px;
    padding: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius);
    text-align: center;
}

.ui-gefrvn h3 {
    font-size: 24px;
    margin-bottom: 12px;
}

.ui-gefrvn p {
    opacity: 0.9;
    margin-bottom: 20px;
}

/* Sidebar */
.c-o2r4vr {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.c-o2r4vr h3 {
    font-size: 18px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.zcslel li,
.zobtg6 li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.zcslel li:last-child,
.zobtg6 li:last-child {
    border-bottom: none;
}

.zcslel a,
.zobtg6 a {
    font-size: 14px;
    color: var(--text-secondary);
}

.zcslel a:hover,
.zobtg6 a:hover {
    color: var(--primary);
}

.js-bovszx {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    text-align: center;
}

.js-bovszx h3 {
    border-bottom: none;
    padding-bottom: 0;
}

.js-bovszx p {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ========================================
   News List Page
   ======================================== */
.ui-ls089m {
    padding: 140px 0 40px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-dark) 100%);
}

.zobtg6 {
    background: var(--bg-dark);
    padding: 40px 0 80px;
}

/* ========================================
   How to Play
   ======================================== */
._drb5cy {
    background: var(--bg-card);
}

.m-d8v1t2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

._oadobg {
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-light);
    border-radius: var(--radius);
    position: relative;
}

._x9keyc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 16px;
}

._oadobg h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

._oadobg p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   Tips Section
   ======================================== */
._qqpr9g {
    background: var(--bg-dark);
}

.s-goglm2 > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

._ijlnfr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

._td5fdt {
    background: var(--bg-card);
    padding: 28px;
    border-radius: var(--radius);
    text-align: center;
}

.c-xx0sxw {
    font-size: 36px;
    margin-bottom: 16px;
    display: block;
}

._td5fdt h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

._td5fdt p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Popular Games Showcase */
.m-tmeh54 {
    background: var(--bg-card);
}

.js-ms8umz {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.m-v6hlcl {
    background: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
}

.m-v6hlcl img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}

.m-v6hlcl h3 {
    font-size: 16px;
    padding: 16px 16px 4px;
}

.m-v6hlcl p {
    font-size: 14px;
    color: var(--accent);
    padding: 0 16px 16px;
}

/* Strategy Content */
.is-y8zj71 > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.c-p5p12h {
    background: var(--bg-card);
    padding: 32px;
    border-radius: var(--radius);
}

.c-p5p12h h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--primary);
}

.c-p5p12h ul {
    margin-bottom: 24px;
}

.c-p5p12h li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 15px;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
    ._k900li {
        display: none;
    }
    
    ._f3zp2d {
        display: flex;
    }
    
    .js-hfvzfs {
        font-size: 40px;
    }
    
    .c-ij86a3,
    .ui-epgslp,
    .c-wmbymk,
    .s-qznkqn,
    .x-fqh8w1,
    .m-d8v1t2,
    ._ijlnfr,
    .js-ms8umz {
        grid-template-columns: repeat(2, 1fr);
    }
    
    ._rjrvtb,
    .m-llek9z,
    .js-tep7pr,
    .el-zfcygz {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .is-gqvhix,
    .s-n4kxtl,
    ._mkkwd5 {
        grid-template-columns: 1fr;
    }
    
    .is-gtx65r {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .m88e41,
    .is-w0c0b5 {
        flex-direction: column;
        text-align: center;
    }
    
    .llfait,
    .x-s3vmzo {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .js-hfvzfs {
        font-size: 32px;
    }
    
    .is-yjpmjl,
    ._mkmti6 {
        font-size: 28px;
    }
    
    .c-ij86a3,
    .ui-epgslp,
    .c-wmbymk,
    .s-qznkqn,
    .x-fqh8w1,
    ._rjrvtb,
    .m-llek9z,
    .js-tep7pr,
    .el-zfcygz,
    .m-d8v1t2,
    ._ijlnfr,
    .js-ms8umz {
        grid-template-columns: 1fr;
    }
    
    .is-gtx65r {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .c-jacg3n,
    .js-esd3po,
    .c-ip7wln {
        flex-direction: column;
    }
    
    .el-gvqho6 {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .is-tqhjth {
        bottom: 20px;
        right: 20px;
    }
    
    .djts5h {
        display: none;
    }
    
    .is-bq9j8x {
        padding: 16px;
        border-radius: 50%;
    }
    
    .is-ezsw9l {
        grid-template-columns: 1fr;
    }
    
    .ui-yn4m9g {
        grid-template-columns: 1fr;
    }
    
    ._v0c2rj {
        flex-direction: column;
        gap: 12px;
    }
    
    .s-we3sef {
        flex-direction: column;
        gap: 8px;
    }
    
    .js-iuvufs {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .c-yf7n4a,
    .is-tqhjth,
    .el-syiyqx,
    .js-per5yq {
        display: none;
    }
    
    body {
        background: #fff;
        color: #000;
    }
}