/* QQ88ASIA custom experience - two interactive widgets and one continuous single-column editorial flow */
:root {
    --qq88-void: #030303;
    --qq88-card: #0d0c09;
    --qq88-card-2: #151108;
    --qq88-gold: #d9a514;
    --qq88-gold-2: #ffda55;
    --qq88-gold-soft: #f5d982;
    --qq88-bronze: #8e5d08;
    --qq88-ivory: #fffaf0;
    --qq88-copy: #ded6c6;
    --qq88-muted: #9b927f;
    --qq88-border: rgba(217,165,20,.30);
    --qq88-border-hot: rgba(255,218,85,.56);
    --qq88-shadow: 0 34px 100px rgba(0,0,0,.62);
}
.qq88asia-gold-theme .container { max-width: 1200px; }
.qq88asia-gold-theme .home-info-container { overflow: hidden; }
.qq88asia-gold-theme .home-info-container > .container { padding-top: 24px; padding-bottom: 38px; }

/* Keep every content row below the top widget on the same centered width.
   Some legacy rows sit directly under .home-info-container instead of inside .container. */
.qq88asia-gold-theme .home-info-container > .row {
    width: 100%;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.qq88-widget-kicker,
.qq88asia-document-kicker {
    margin: 0 0 10px !important;
    color: var(--qq88-gold-2) !important;
    font-size: 10px !important;
    font-weight: 900;
    line-height: 1.2 !important;
    letter-spacing: .24em;
    text-transform: uppercase;
}

/* Widget 1 - interactive Pragmatic experience atlas */
.qq88-pragmatic-atlas {
    position: relative;
    margin: 0 0 30px;
    overflow: hidden;
    border: 1px solid var(--qq88-border-hot);
    border-radius: 2px 44px 2px 44px;
    background:
        linear-gradient(118deg, rgba(255,218,85,.09) 0 16%, transparent 16% 100%),
        radial-gradient(circle at 86% 12%, rgba(217,165,20,.14), transparent 23rem),
        #080704;
    box-shadow: var(--qq88-shadow), inset 0 1px rgba(255,255,255,.04);
}
.qq88-pragmatic-atlas::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:6px;
    background:linear-gradient(180deg,#fff0a8 0%,#d9a514 52%,#6e4804 100%);
}
.qq88-pragmatic-atlas::after {
    content:"QQ";
    position:absolute;
    right:-32px;
    bottom:-42px;
    color:rgba(255,218,85,.026);
    font-size:210px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.12em;
    pointer-events:none;
}
.qq88-atlas-noise {
    position:absolute;
    inset:0;
    opacity:.25;
    pointer-events:none;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 53px, rgba(217,165,20,.055) 54px),
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
    background-size:auto,100% 8px;
    mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.qq88-atlas-head {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);
    gap:56px;
    align-items:end;
    padding:36px 40px 30px;
}
.qq88-atlas-head h2,
.qq88-matrix-head h2 {
    margin:0;
    color:var(--qq88-ivory);
    font-size:clamp(30px,4.2vw,52px);
    line-height:.98;
    letter-spacing:-.045em;
    font-weight:900;
    text-wrap:balance;
}
.qq88-atlas-intro {
    padding:18px 0 2px 24px;
    border-left:1px solid rgba(217,165,20,.34);
}
.qq88-atlas-intro span {
    display:block;
    margin-bottom:10px;
    color:var(--qq88-gold-2);
    font-size:9px;
    font-weight:900;
    letter-spacing:.15em;
}
.qq88-atlas-intro p {
    margin:0;
    color:#bdb39f !important;
    font-size:14px;
    line-height:1.72;
}
.qq88-atlas-chapters {
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    margin:0 26px;
    border:1px solid rgba(217,165,20,.27);
    background:#050504;
    box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.qq88-atlas-chapters button {
    position:relative;
    min-height:92px;
    padding:15px 14px 14px 50px;
    border:0;
    border-right:1px solid rgba(217,165,20,.18);
    color:#8d8576;
    text-align:left;
    background:transparent;
    transition:background .22s ease,transform .22s ease,color .22s ease;
}
.qq88-atlas-chapters button:last-child { border-right:0; }
.qq88-atlas-chapters button::after {
    content:"";
    position:absolute;
    left:14px;
    bottom:13px;
    width:22px;
    height:2px;
    background:#5f430d;
    transition:width .22s ease,background .22s ease;
}
.qq88-atlas-chapters button > span {
    position:absolute;
    left:14px;
    top:15px;
    color:var(--qq88-gold-2);
    font-size:10px;
    font-weight:900;
}
.qq88-atlas-chapters b {
    display:block;
    color:#f3ead7;
    font-size:14px;
    line-height:1.2;
}
.qq88-atlas-chapters small {
    display:block;
    margin-top:7px;
    color:#756e61;
    font-size:9px;
    line-height:1.35;
    text-transform:uppercase;
    letter-spacing:.055em;
}
.qq88-atlas-chapters button:hover,
.qq88-atlas-chapters button.is-active {
    color:#fff;
    background:linear-gradient(160deg,rgba(255,218,85,.15),rgba(217,165,20,.035));
}
.qq88-atlas-chapters button.is-active { transform:translateY(-5px); box-shadow:0 12px 24px rgba(0,0,0,.32),inset 0 3px var(--qq88-gold-2); }
.qq88-atlas-chapters button.is-active::after { width:28px; background:var(--qq88-gold-2); }
.qq88-atlas-stage {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr);
    gap:0;
    margin-top:24px;
    min-height:410px;
    border-top:1px solid rgba(217,165,20,.19);
}
.qq88-atlas-story {
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:410px;
    overflow:hidden;
    padding:46px 46px 42px;
    border-right:1px solid rgba(217,165,20,.25);
    background:
        linear-gradient(180deg,rgba(255,255,255,.018),transparent 45%),
        linear-gradient(135deg,rgba(217,165,20,.11),transparent 48%);
}
.qq88-atlas-story::before {
    content:"";
    position:absolute;
    left:46px;
    top:38px;
    width:128px;
    height:128px;
    border:1px solid rgba(255,218,85,.25);
    transform:rotate(45deg);
    box-shadow:0 0 0 22px rgba(217,165,20,.025),0 0 0 44px rgba(217,165,20,.018);
}
.qq88-atlas-watermark {
    position:absolute;
    right:34px;
    top:12px;
    color:rgba(255,218,85,.07);
    font-size:210px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.08em;
}
.qq88-atlas-story-copy { position:relative; z-index:2; max-width:760px; }
.qq88-atlas-label {
    margin:0 0 13px !important;
    color:var(--qq88-gold-2) !important;
    font-size:9px !important;
    font-weight:900;
    letter-spacing:.15em;
}
.qq88-atlas-story h3 {
    max-width:760px;
    margin:0 0 17px;
    color:var(--qq88-ivory);
    font-size:clamp(30px,3.5vw,48px);
    line-height:1;
    letter-spacing:-.04em;
    font-weight:900;
    text-wrap:balance;
}
.qq88-atlas-story-copy > p:last-child {
    max-width:760px;
    margin:0;
    color:#c9c0af !important;
    font-size:14px;
    line-height:1.78;
}
.qq88-atlas-index {
    position:absolute;
    left:46px;
    top:40px;
    z-index:3;
    display:flex;
    align-items:flex-end;
    gap:4px;
}
.qq88-atlas-index span { color:#fff1b1; font-size:38px; font-weight:900; line-height:.8; }
.qq88-atlas-index small { color:var(--qq88-gold-2); font-size:10px; font-weight:900; }
.qq88-atlas-insights {
    display:grid;
    grid-template-rows:1.15fr 1fr 1fr auto;
    background:rgba(4,4,3,.68);
}
.qq88-atlas-insight {
    padding:24px 26px;
    border-bottom:1px solid rgba(217,165,20,.18);
}
.qq88-atlas-insight span,
.qq88-curator-note span {
    color:var(--qq88-gold-2);
    font-size:8px;
    font-weight:900;
    letter-spacing:.13em;
}
.qq88-atlas-insight strong {
    display:block;
    margin-top:11px;
    color:#fff2c5;
    font-size:18px;
    line-height:1.35;
}
.qq88-atlas-insight p {
    margin:10px 0 0;
    color:#c9c0af !important;
    font-size:12px;
    line-height:1.58;
}
.qq88-atlas-insight-primary { background:linear-gradient(135deg,rgba(217,165,20,.12),rgba(217,165,20,.02)); }
.qq88-atlas-insight-summary { background:rgba(255,255,255,.018); }
.qq88-atlas-spectrum { padding:18px 26px 22px; }
.qq88-atlas-spectrum header { display:flex; justify-content:space-between; gap:15px; margin-bottom:10px; }
.qq88-atlas-spectrum header span { color:#827a6c; font-size:8px; letter-spacing:.12em; }
.qq88-atlas-spectrum header b { color:var(--qq88-gold-2); font-size:9px; }
.qq88-atlas-spectrum > div { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.qq88-atlas-spectrum i { height:7px; background:#32270e; transform:skewX(-18deg); transition:.22s ease; }
.qq88-atlas-spectrum i.is-on { background:linear-gradient(90deg,#9c6907,#ffdf63); box-shadow:0 0 12px rgba(217,165,20,.18); }
.qq88-atlas-track {
    position:relative;
    z-index:3;
    overflow:hidden;
    border-top:1px solid rgba(217,165,20,.24);
    background:#050504;
}
.qq88-atlas-track > div {
    display:flex;
    align-items:center;
    justify-content:space-around;
    min-width:780px;
    padding:12px 24px;
    color:#7c7467;
    font-size:8px;
    letter-spacing:.18em;
    animation:qq88AtlasFlow 18s linear infinite alternate;
}
.qq88-atlas-track i { width:44px; height:1px; background:linear-gradient(90deg,transparent,rgba(217,165,20,.7),transparent); }
@keyframes qq88AtlasFlow { from { transform:translateX(-14px); } to { transform:translateX(14px); } }

/* Widget 2 - curator matrix */
.qq88-curator-matrix { margin:0 0 30px; overflow:hidden; border:1px solid var(--qq88-border-hot); border-radius:32px 10px 32px 10px; background:linear-gradient(145deg,rgba(217,165,20,.08),transparent 32%),#080806; box-shadow:var(--qq88-shadow); }
.qq88-matrix-head { display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:28px; align-items:end; padding:34px 38px 28px; border-bottom:1px solid var(--qq88-border); }
.qq88-matrix-counter { align-self:start; text-align:right; color:rgba(255,218,85,.16); font-weight:900; }
.qq88-matrix-counter span { color:#fff1ad; font-size:45px; line-height:1; }
.qq88-matrix-counter small { color:var(--qq88-gold-2); font-size:11px; }
.qq88-matrix-layout { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:390px; }
.qq88-game-rail { border-right:1px solid var(--qq88-border); }
.qq88-game-rail button { width:100%; min-height:92px; display:grid; grid-template-columns:34px 1fr 44px; gap:10px; align-items:center; padding:14px 17px; border:0; border-bottom:1px solid rgba(217,165,20,.20); text-align:left; color:#aaa18e; background:#090806; transition:.22s ease; }
.qq88-game-rail button > span { color:var(--qq88-gold-2); font-size:10px; font-weight:900; }
.qq88-game-rail button b { display:block; color:#f1e7d0; font-size:14px; }
.qq88-game-rail button small { display:block; margin-top:5px; color:#756d5e; font-size:10px; }
.qq88-game-rail button i { color:rgba(255,218,85,.30); font-size:11px; font-style:normal; font-weight:900; text-align:right; }
.qq88-game-rail button:hover,
.qq88-game-rail button.is-active { background:linear-gradient(90deg,rgba(217,165,20,.17),rgba(217,165,20,.025)); }
.qq88-game-rail button.is-active { box-shadow:inset 3px 0 var(--qq88-gold-2); }
.qq88-game-panel { padding:32px 36px; background:radial-gradient(circle at 83% 20%,rgba(217,165,20,.12),transparent 21rem); }
.qq88-game-title-row { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.qq88-game-title-row small { color:var(--qq88-gold-2); font-size:9px; font-weight:900; letter-spacing:.14em; }
.qq88-game-title-row h3 { margin:8px 0 0; color:var(--qq88-ivory); font-size:clamp(31px,4vw,50px); line-height:.96; letter-spacing:-.045em; font-weight:900; }
.qq88-rtp-badge { min-width:105px; padding:12px 14px; border:1px solid var(--qq88-border-hot); background:#0e0b05; text-align:right; }
.qq88-rtp-badge span { display:block; color:#847965; font-size:8px; letter-spacing:.15em; }
.qq88-rtp-badge strong { display:block; margin-top:6px; color:#ffe58b; font-size:21px; }
.qq88-game-summary { max-width:780px; margin:20px 0 26px; color:#c7beac !important; line-height:1.75; }
.qq88-profile-bars { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.qq88-profile-bars header { display:flex; justify-content:space-between; gap:12px; color:#817865; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.qq88-profile-bars header b { color:#e9dcae; }
.qq88-bars { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:9px; }
.qq88-bars i { height:7px; background:#2b261b; transform:skewX(-16deg); }
.qq88-bars i.is-on { background:linear-gradient(90deg,#9e6807,#ffda55); box-shadow:0 0 10px rgba(217,165,20,.16); }
.qq88-curator-note { margin-top:26px; padding:17px 18px; border-left:3px solid var(--qq88-gold-2); background:rgba(255,255,255,.025); }
.qq88-curator-note strong { display:block; margin-top:8px; color:#f4e8c4; font-size:15px; }
.qq88-curator-note p { margin:8px 0 0; color:#948b7a !important; font-size:12px; line-height:1.55; }
.qq88-matrix-links { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--qq88-border); }
.qq88-matrix-links a { display:flex; justify-content:space-between; align-items:center; padding:15px 17px; border-right:1px solid var(--qq88-border); color:#b8ad98 !important; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.qq88-matrix-links a:last-child { border-right:0; }
.qq88-matrix-links a:hover,
.qq88-matrix-links a.is-active { color:#fff1b1 !important; background:rgba(217,165,20,.10); }

/* Continuous single-column editorial */
.qq88asia-editorial { width:100%; }
.qq88asia-editorial-wrap { width:100%; max-width:none; margin:0 auto; padding:18px 0 28px; }
.qq88asia-master-shell { position:relative; overflow:hidden; border:1px solid rgba(217,165,20,.32); border-radius:34px 10px 34px 10px; background:linear-gradient(180deg,rgba(255,216,79,.045),transparent 13%),#090806; box-shadow:0 34px 100px rgba(0,0,0,.50); }
.qq88asia-master-shell::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(#ffe67e,#b67405 45%,transparent 94%); }
.qq88asia-document-hero { padding:42px 52px 36px; border-bottom:1px solid rgba(217,165,20,.24); background:radial-gradient(circle at 88% 20%,rgba(217,165,20,.14),transparent 22rem); }
.qq88asia-document-hero h1 { max-width:980px; margin:0; color:var(--qq88-ivory); font-size:clamp(34px,5vw,66px); line-height:.98; letter-spacing:-.052em; font-weight:900; text-wrap:balance; }
.qq88asia-document-hero h1 a { color:#ffdc60 !important; }
.qq88asia-document-flow { padding:0 52px 52px; }
.qq88asia-flow-section { position:relative; padding:42px 0 8px; }
.qq88asia-flow-section + .qq88asia-flow-section { border-top:1px solid rgba(217,165,20,.16); }
.qq88asia-flow-section h2 { max-width:900px; margin:0 0 20px; color:#fff6d7; font-size:clamp(28px,4vw,46px); line-height:1.04; letter-spacing:-.035em; font-weight:900; text-wrap:balance; }
.qq88asia-flow-section h3 { margin:30px 0 12px; padding-left:18px; border-left:3px solid var(--qq88-gold-2); color:#f6e7b7; font-size:clamp(21px,2.6vw,30px); line-height:1.15; font-weight:900; }
.qq88asia-flow-section p { max-width:980px; margin:0 0 17px; color:#d4ccbd !important; font-size:15px; line-height:1.86; }
.qq88asia-flow-section strong { color:#fff0b2; }
.qq88asia-flow-section em { color:#e8d8a6; }
.qq88asia-intro > p:first-of-type { font-size:17px; color:#eee4d1 !important; }
.qq88asia-source-list { margin:24px 0 8px; padding:0; list-style:none; counter-reset:qq88list; }
.qq88asia-source-list li { position:relative; margin:0; padding:18px 20px 18px 56px; border-top:1px solid rgba(217,165,20,.16); color:#d5cdbc; line-height:1.75; counter-increment:qq88list; }
.qq88asia-source-list li:last-child { border-bottom:1px solid rgba(217,165,20,.16); }
.qq88asia-source-list li::before { content:counter(qq88list,decimal-leading-zero); position:absolute; left:10px; top:18px; color:var(--qq88-gold-2); font-size:11px; font-weight:900; }
.qq88asia-benefit-list li { padding-top:13px; padding-bottom:13px; }
.qq88asia-benefit-list li::before { top:13px; }
.qq88asia-table-wrap { width:100%; margin:24px 0; overflow-x:auto; border:1px solid rgba(217,165,20,.30); border-radius:14px; background:#0c0a06; }
.qq88asia-table-wrap table { width:100%; min-width:720px; border-collapse:collapse; }
.qq88asia-table-wrap th { padding:17px 18px; color:#1a1203; background:linear-gradient(135deg,#ffe17a,#bd7e08); font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.08em; }
.qq88asia-table-wrap td { padding:17px 18px; border-top:1px solid rgba(217,165,20,.16); color:#d9d0bd; vertical-align:top; }
.qq88asia-table-wrap tr:hover td { background:rgba(217,165,20,.055); }
.qq88asia-table-wrap td:first-child { color:#fff0b1; font-weight:800; }
.qq88asia-conclusion { margin-top:32px; padding:36px 34px 24px; border:1px solid rgba(217,165,20,.30) !important; border-radius:8px 26px 8px 26px; background:linear-gradient(135deg,rgba(217,165,20,.10),rgba(255,255,255,.018)); }

/* Separate but still one-column FAQ container */
.qq88asia-faq-shell { margin-top:24px; overflow:hidden; border:1px solid rgba(217,165,20,.32); border-radius:10px 34px 10px 34px; background:#080705; box-shadow:0 28px 80px rgba(0,0,0,.42); }
.qq88asia-faq-head { padding:34px 42px 25px; border-bottom:1px solid rgba(217,165,20,.22); }
.qq88asia-faq-head h2 { margin:0; color:#fff6d7; font-size:clamp(29px,4vw,45px); line-height:1; letter-spacing:-.035em; font-weight:900; }
.qq88asia-faq-column { display:block; padding:0 42px 38px; }
.qq88asia-faq-column details { border-bottom:1px solid rgba(217,165,20,.18); }
.qq88asia-faq-column summary { position:relative; padding:22px 44px 22px 0; color:#eee1bd; font-size:16px; font-weight:800; cursor:pointer; list-style:none; }
.qq88asia-faq-column summary::-webkit-details-marker { display:none; }
.qq88asia-faq-column summary::after { content:"+"; position:absolute; right:8px; top:17px; color:var(--qq88-gold-2); font-size:25px; font-weight:400; }
.qq88asia-faq-column details[open] summary::after { content:"−"; }
.qq88asia-faq-column details p { max-width:930px; margin:0; padding:0 50px 23px 0; color:#cfc6b4 !important; line-height:1.78; }

@media (max-width: 991px) {
    .qq88-atlas-head { grid-template-columns:1fr; gap:18px; }
    .qq88-atlas-intro { padding-left:0; border-left:0; }
    .qq88-atlas-chapters { grid-template-columns:repeat(3,1fr); }
    .qq88-atlas-chapters button:nth-child(3) { border-right:0; }
    .qq88-atlas-chapters button:nth-child(-n+3) { border-bottom:1px solid rgba(217,165,20,.18); }
    .qq88-atlas-stage { grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); }
    .qq88-matrix-layout { grid-template-columns:250px minmax(0,1fr); }
    .qq88-profile-bars { grid-template-columns:1fr; gap:14px; }
}
@media (max-width: 767px) {
    .qq88-pragmatic-atlas,
    .qq88-curator-matrix,
    .qq88asia-master-shell,
    .qq88asia-faq-shell { border-radius:18px 6px 18px 6px; }
    .qq88-atlas-head,
    .qq88-matrix-head { padding:26px 22px 22px; }
    .qq88-atlas-chapters { grid-template-columns:repeat(2,1fr); margin:0 14px; }
    .qq88-atlas-chapters button { min-height:82px; border-right:1px solid rgba(217,165,20,.15); border-bottom:1px solid rgba(217,165,20,.15); }
    .qq88-atlas-chapters button:nth-child(2n) { border-right:0; }
    .qq88-atlas-stage,
    .qq88-matrix-layout { display:block; min-height:0; }
    .qq88-atlas-story { min-height:390px; padding:38px 24px 30px; border-right:0; border-bottom:1px solid rgba(217,165,20,.24); }
    .qq88-atlas-index { left:24px; top:34px; }
    .qq88-atlas-watermark { right:10px; font-size:165px; }
    .qq88-atlas-insights { grid-template-rows:none; }
    .qq88-game-rail { display:grid; grid-template-columns:repeat(2,1fr); border-right:0; border-bottom:1px solid var(--qq88-border); }
    .qq88-game-rail button { min-height:84px; border-right:1px solid rgba(217,165,20,.15); }
    .qq88-game-panel { padding:25px 22px; }
    .qq88-matrix-head { grid-template-columns:1fr; }
    .qq88-matrix-counter { display:none; }
    .qq88-matrix-links { grid-template-columns:repeat(2,1fr); }
    .qq88-matrix-links a { border-bottom:1px solid var(--qq88-border); }
    .qq88asia-editorial-wrap { padding-left:0; padding-right:0; }
    .qq88asia-document-hero { padding:32px 24px 27px; }
    .qq88asia-document-flow { padding:0 24px 34px; }
    .qq88asia-flow-section { padding-top:34px; }
    .qq88asia-flow-section p { font-size:14px; line-height:1.78; }
    .qq88asia-conclusion { padding:28px 22px 15px; }
    .qq88asia-faq-head { padding:28px 24px 22px; }
    .qq88asia-faq-column { padding:0 24px 28px; }
    .qq88asia-faq-column summary { font-size:14px; }
}
@media (max-width: 480px) {
    .qq88-atlas-chapters,
    .qq88-game-rail { grid-template-columns:1fr; }
    .qq88-atlas-chapters button { border-right:0; }
    .qq88-atlas-story { min-height:430px; }
    .qq88-atlas-story h3 { font-size:29px; }
    .qq88-atlas-track { display:none; }
    .qq88-matrix-links { grid-template-columns:1fr; }
    .qq88-game-title-row { display:block; }
    .qq88-rtp-badge { width:max-content; margin-top:18px; text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
    .qq88-atlas-track > div { animation:none; }
    * { scroll-behavior:auto !important; }
}