:root{
  --m88-navy:#182334;
  --m88-navy-deep:#0f1723;
  --m88-navy-soft:#233247;
  --m88-gold:#c79a45;
  --m88-gold-soft:#e5c77f;
  --m88-red:#c52a2f;
  --m88-red-dark:#9f1f24;
  --m88-paper:#f4f5f7;
  --m88-card:#ffffff;
  --m88-ink:#1d2430;
  --m88-muted:#6d7581;
  --m88-line:#e5e8ec;
  --m88-shadow:0 14px 36px rgba(15,23,35,.08);
}

/* 01. BASE */
body.m88-theme{background:var(--m88-paper);color:var(--m88-ink)}
.m88-theme #wrapper,.m88-theme #main{background:transparent}
.m88-theme h1,.m88-theme h2,.m88-theme h3,.m88-theme h4,.m88-theme h5,.m88-theme h6{color:var(--m88-ink);letter-spacing:-.025em}
.m88-theme p{color:var(--m88-muted)}
.m88-theme a{color:inherit}
.m88-theme .row:not(.row-collapse){max-width:1240px}
.m88-theme .section{background-color:transparent}
.m88-theme .section-content{position:relative;z-index:2}
.m88-kicker{margin:0 0 7px!important;color:var(--m88-red)!important;font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.19em;text-transform:uppercase}

/* 02. HEADER */
.m88-theme .header-wrapper,.m88-theme .header,.m88-theme .header-bg-color{background:var(--m88-navy)!important}
.m88-theme .header-wrapper{border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 4px 20px rgba(7,12,18,.12)}
.m88-theme #logo img{object-fit:contain;max-height:52px}
.m88-theme .nav>li>a{color:#f6f7f8;font-size:12px;font-weight:800;letter-spacing:.055em}
.m88-theme .nav>li>a:hover,.m88-theme .nav>li.current-menu-item>a{color:var(--m88-gold-soft)}
.m88-theme .nav-line-bottom>li>a:before,.m88-theme .nav-line-grow>li>a:before{height:2px;background:var(--m88-red)}
.m88-theme .nav-dropdown{padding:9px;background:#fff;border:1px solid var(--m88-line);border-radius:12px;box-shadow:0 18px 40px rgba(15,23,35,.15)}
.m88-theme .nav-dropdown>li>a{color:var(--m88-ink);border-radius:7px}
.m88-theme .nav-dropdown>li>a:hover{background:#f4f5f7;color:var(--m88-red)}

/* 03. BUTTONS */
.m88-theme .button,.m88-theme button,.m88-theme input[type=submit]{border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:.2s ease}
.m88-theme .m88-btn-primary{color:#fff!important;border-color:var(--m88-red)!important;background:var(--m88-red)!important;box-shadow:0 10px 22px rgba(197,42,47,.24)}
.m88-theme .m88-btn-primary:hover{background:var(--m88-red-dark)!important;transform:translateY(-2px);box-shadow:0 13px 28px rgba(197,42,47,.3)}
.m88-theme .m88-btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.34)!important;background:transparent!important}
.m88-theme .m88-btn-ghost:hover{border-color:var(--m88-gold-soft)!important;color:var(--m88-gold-soft)!important}

/* 04. LOW HERO */
.m88-hero{min-height:330px!important;overflow:hidden;background:linear-gradient(106deg,#101923 0%,#19273b 52%,#26344b 100%)!important;border-bottom:3px solid var(--m88-gold)}
.m88-hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 75%);pointer-events:none}
.m88-hero:after{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-180px;z-index:1;border:1px solid rgba(229,199,127,.26);border-radius:50%;box-shadow:0 0 0 58px rgba(229,199,127,.035),0 0 0 118px rgba(229,199,127,.02);pointer-events:none}
.m88-hero .section-content,.m88-hero .m88-hero-row,.m88-hero .col-inner{min-height:330px}
.m88-hero .col-inner{display:flex;flex-wrap:wrap;align-content:center}
.m88-hero-copy{width:100%;max-width:650px}
.m88-hero-copy .m88-kicker{color:var(--m88-gold-soft)!important}
.m88-hero-copy h1{margin:0 0 13px;color:#fff;font-size:clamp(42px,5vw,68px);line-height:.92;font-weight:800;letter-spacing:-.055em}
.m88-hero-copy h1 span{color:var(--m88-gold-soft)}
.m88-hero-sub{max-width:620px;margin:0 0 18px!important;color:#c5ced9!important;font-size:15px;line-height:1.65}
.m88-hero .button{min-width:132px;margin-right:8px}
.m88-hero-art-col .col-inner{justify-content:flex-end;position:relative}
.m88-hero-art{width:100%;height:100%;position:relative;overflow:visible}
.m88-hero-88{position:absolute;right:2%;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.06);font-size:230px;line-height:.8;font-weight:900;letter-spacing:-.12em;user-select:none}
.m88-hero-chip{position:absolute;right:38%;top:50%;display:grid;width:86px;height:86px;place-items:center;transform:translateY(-50%) rotate(-5deg);color:#fff;background:var(--m88-red);border:4px solid var(--m88-gold);box-shadow:0 20px 40px rgba(0,0,0,.28);font-family:Georgia,serif;font-size:50px;font-weight:700}

/* 05. CATEGORY BAR */
.m88-category-bar{position:relative;z-index:5;margin-top:-1px;background:#fff!important;border-bottom:1px solid var(--m88-line);box-shadow:0 8px 24px rgba(15,23,35,.04)}
.m88-category-row{max-width:1240px!important}
.m88-category-links{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.m88-category-links::-webkit-scrollbar{display:none}
.m88-category-links a{display:flex;gap:9px;align-items:center;justify-content:center;min-width:160px;padding:19px 18px;color:#515966;border-right:1px solid var(--m88-line);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap;transition:.2s ease}
.m88-category-links a:first-child{border-left:1px solid var(--m88-line)}
.m88-category-links a b{color:#a4aab2;font-size:10px;font-weight:800}
.m88-category-links a:hover,.m88-category-links a.is-active{color:var(--m88-red);background:#fbfbfc}
.m88-category-links a.is-active{box-shadow:inset 0 -3px 0 var(--m88-red)}

/* 06. SECTION HEADINGS */
.m88-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 22px}
.m88-section-heading h2{margin:0;color:var(--m88-ink);font-size:clamp(28px,3vw,38px);line-height:1.05}
.m88-heading-link{flex:none;padding-bottom:4px;color:var(--m88-muted)!important;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.045em}
.m88-heading-link span{color:var(--m88-red);font-size:17px;margin-left:4px}
.m88-heading-link:hover{color:var(--m88-red)!important}

/* 07. GAME SECTION + PLUGIN SKIN */
.m88-games-section{background:#f4f5f7!important}
.m88-theme .m88-game-slider{color:var(--m88-ink)}
.m88-theme .m88-game-tabs{margin-bottom:18px;gap:6px;border-bottom:1px solid var(--m88-line)}
.m88-theme .m88-game-tab{padding:10px 14px 11px;border:0;border-bottom:2px solid transparent;border-radius:0;color:#6c7480;background:transparent;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.m88-theme .m88-game-tab:hover,.m88-theme .m88-game-tab.is-active{color:var(--m88-red);border-color:var(--m88-red);background:transparent}
.m88-theme .m88-game-card{overflow:hidden;border:1px solid var(--m88-line);border-radius:10px;background:#fff;box-shadow:0 7px 18px rgba(15,23,35,.055);transition:.22s ease}
.m88-theme .m88-game-card:hover{transform:translateY(-5px);border-color:#d5d9df;box-shadow:0 15px 34px rgba(15,23,35,.11)}
.m88-theme .m88-game-media{aspect-ratio:4/3;background:#202b3b}
.m88-theme .m88-game-media img{width:100%;height:100%;object-fit:cover}
.m88-theme .m88-game-info{padding:12px 12px 13px;background:#fff}
.m88-theme .m88-game-card-title{margin:0;color:var(--m88-ink);font-size:14px;line-height:1.25;font-weight:800}
.m88-theme .m88-game-provider{color:#939aa3;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.m88-theme .m88-game-badge{top:9px;left:9px;padding:5px 7px;border-radius:4px;color:#fff;background:var(--m88-red);font-size:9px;font-weight:800;text-transform:uppercase}
.m88-theme .m88-game-play{right:9px;bottom:9px;padding:7px 9px;border-radius:5px;color:#fff;background:var(--m88-red);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.m88-theme .m88-game-arrow{width:38px;height:38px;border:1px solid #dfe2e6;border-radius:50%;color:var(--m88-ink);background:#fff;box-shadow:0 9px 24px rgba(15,23,35,.12)}
.m88-theme .m88-game-arrow:hover{color:#fff;border-color:var(--m88-red);background:var(--m88-red)}

/* 08. PROMOTIONS */
.m88-promo-section{background:#fff!important;border-top:1px solid var(--m88-line);border-bottom:1px solid var(--m88-line)}
.m88-promo-grid>.col{padding-bottom:14px}
.m88-promo-card{position:relative;display:flex;min-height:240px;height:100%;overflow:hidden;padding:32px;border-radius:12px;background:var(--m88-navy);box-shadow:var(--m88-shadow)}
.m88-promo-card:before{content:"";position:absolute;width:280px;height:280px;right:-100px;bottom:-145px;border:1px solid rgba(229,199,127,.26);border-radius:50%;box-shadow:0 0 0 42px rgba(229,199,127,.04),0 0 0 88px rgba(229,199,127,.02)}
.m88-promo-main{background:linear-gradient(112deg,#8f1f24,#c52a2f 52%,#912027)}
.m88-promo-side{background:linear-gradient(112deg,#172335,#243249)}
.m88-promo-content{position:relative;z-index:2;max-width:480px;align-self:flex-end}
.m88-promo-tag{display:inline-block;margin-bottom:10px;color:var(--m88-gold-soft);font-size:10px;font-weight:800;letter-spacing:.16em}
.m88-promo-card h3{margin:0 0 8px;color:#fff;font-size:30px;line-height:1.02}
.m88-promo-card p{max-width:430px;margin:0 0 14px;color:rgba(255,255,255,.76)}
.m88-promo-card a{color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.m88-promo-index{position:absolute;right:22px;top:17px;color:rgba(255,255,255,.16);font-size:54px;line-height:1;font-weight:900}

/* 09. BLOG */
.m88-blog-section{background:#f4f5f7!important}
.m88-blog-section .post-item{padding-bottom:18px}
.m88-blog-section .box{overflow:hidden;height:100%;border:1px solid var(--m88-line);border-radius:10px;background:#fff;box-shadow:0 7px 18px rgba(15,23,35,.055);transition:.22s ease}
.m88-blog-section .box:hover{transform:translateY(-4px);box-shadow:0 15px 34px rgba(15,23,35,.1)}
.m88-blog-section .box-image{background:#e9ebee}
.m88-blog-section .box-image img{aspect-ratio:16/9;object-fit:cover}
.m88-blog-section .box-text{padding:18px 18px 20px}
.m88-blog-section .post-title{color:var(--m88-ink);font-size:18px;line-height:1.3;font-weight:800}
.m88-blog-section .from_the_blog_excerpt{color:var(--m88-muted);font-size:13px;line-height:1.6}
.m88-blog-section .post-meta{color:#9da3ab;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.m88-blog-section .is-divider{width:32px;height:2px;background:var(--m88-red);opacity:1}
.m88-blog-section .button{padding:0!important;color:var(--m88-red)!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:11px}

/* 10. FOOTER */
.m88-footer-block{background:var(--m88-navy-deep)!important;border-top:3px solid var(--m88-gold)}
.m88-footer-block h3,.m88-footer-block h4{color:#fff}
.m88-footer-brand{margin:0 0 10px!important;color:#fff!important;font-size:40px!important;letter-spacing:-.055em!important}
.m88-footer-lead{max-width:360px;color:#aab3bf!important;line-height:1.65}
.m88-footer-block h4{margin-bottom:12px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.m88-footer-block p{color:#9ea8b5;line-height:1.85}
.m88-footer-block a{color:#d9dde2}
.m88-footer-block a:hover{color:var(--m88-gold-soft)}
.m88-age-badge{display:inline-grid;width:42px;height:42px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fff;font-size:12px;font-weight:800}
.m88-footer-note{padding:18px 20px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.035)}
.m88-footer-note strong{color:#fff}
.m88-footer-note p{margin:4px 0 0;line-height:1.55}
.m88-footer-bottom{margin-top:22px!important;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.m88-footer-bottom p{margin:0;text-align:center;color:#778392;font-size:11px}
.m88-theme .absolute-footer{display:none}

/* 11. MOBILE */
@media(max-width:849px){
  .m88-theme .header-main{height:60px!important}
  .m88-hero,.m88-hero .section-content,.m88-hero .m88-hero-row,.m88-hero .col-inner{min-height:250px!important}
  .m88-hero{height:auto!important;padding:30px 0 28px!important}
  .m88-hero-copy h1{font-size:42px;line-height:.96}
  .m88-hero-sub{max-width:520px;font-size:14px}
  .m88-hero-art-col{display:none!important}
  .m88-category-links a{min-width:142px;padding:16px 13px;font-size:11px}
  .m88-section-heading{align-items:flex-end;margin-bottom:18px}
  .m88-section-heading h2{font-size:28px}
  .m88-heading-link{font-size:10px}
  .m88-promo-card{min-height:210px;padding:24px}
  .m88-promo-card h3{font-size:26px}
}
@media(max-width:549px){
  .m88-hero{padding:26px 0 24px!important}
  .m88-hero-copy h1{font-size:36px}
  .m88-hero .button{min-width:0;padding-left:14px;padding-right:14px}
  .m88-section-heading{gap:10px}
  .m88-heading-link{display:none}
  .m88-theme .m88-game-tab{padding:9px 10px;font-size:10px}
  .m88-theme .m88-game-card{border-radius:8px}
  .m88-theme .m88-game-info{padding:10px}
  .m88-theme .m88-game-card-title{font-size:12px}
  .m88-promo-card{min-height:195px}
  .m88-blog-section .box-text{padding:15px}
}