:root {
  color-scheme:light;
  --ink:#122c23;
  --forest:#073c30;
  --green:#006a4f;
  --gold:#ffdf41;
  --paper:#f8f8f1;
  --line:#d7ded0;
  --soft:#4a6054;
  --body:Arial,Helvetica,"Microsoft YaHei","PingFang SC",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:1rem}
body{margin:0;color:var(--ink);background:var(--paper);font:1rem/1.55 var(--body);-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{color:#005e46;text-underline-offset:.18em}
a:focus-visible,summary:focus-visible{outline:3px solid #dba719;outline-offset:4px}
.wrap{width:min(100% - 3rem,1160px);margin-inline:auto}
.skip{position:absolute;z-index:12;top:.4rem;left:.5rem;padding:.6rem 1rem;background:white;color:var(--ink);transform:translateY(-160%)}
.skip:focus{transform:none}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{line-height:1.08;letter-spacing:-.047em;text-wrap:balance}
.site-head{background:#fffef8;border-bottom:1px solid #d9e3d6}
.head-inner{height:82px;display:flex;align-items:center;gap:2.6rem}
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo img{width:157px;height:auto}
.topnav{display:flex;gap:2.1rem;align-items:center;margin-left:auto}
.topnav a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.93rem}
.topnav a:hover,.footer a:hover{text-decoration:underline}
.languages{display:flex;align-items:center;gap:1px;padding:3px;border:1px solid #c9d6c8;background:#f1f4eb;border-radius:100px;flex-shrink:0}
.languages a{color:#354e40;text-decoration:none;font-weight:700;font-size:.77rem;line-height:1;padding:.46rem .57rem;border-radius:100px}
.languages a[aria-current]{background:var(--forest);color:white}
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(113deg,#062e26 0%,#074b38 54%,#0b6042 100%);color:#fffef5}
.hero::before{content:"";position:absolute;inset:0 0 0 39%;z-index:-1;opacity:.57;background:repeating-linear-gradient(115deg,transparent 0 47px,#b4e89013 48px 50px,transparent 51px 98px);mask-image:linear-gradient(90deg,transparent,#000 38%)}
.hero-grid{min-height:434px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:1.6rem}
.hero-copy{padding:clamp(2.2rem,4.4vw,4.2rem) 0;z-index:1;max-width:635px}
.eyebrow{display:flex;gap:.55rem;align-items:center;color:#abd7b8;font-size:.76rem;font-weight:750;letter-spacing:.10em;text-transform:uppercase;line-height:1.4}
.eyebrow span{display:block;width:1.65rem;height:2px;background:#f8ce38}
.hero h1{font-size:clamp(3.8rem,6.7vw,6.15rem);font-weight:850;line-height:.93;letter-spacing:-.07em;margin:.7rem 0 1.12rem}
.hero h1 span{display:block;color:var(--gold)}
.hero-intro{font-size:clamp(1rem,1.35vw,1.17rem);max-width:51ch;color:#edf3de;line-height:1.58}
.buttons{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1.35rem}
.button{min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.05rem;border-radius:6px;font-size:.94rem;font-weight:750;text-decoration:none;line-height:1.35}
.button.bright{color:#203323;background:var(--gold)}
.button.outline{color:#fffdf4;border:1px solid #8eb79d}
.button.dark{color:#fff;background:var(--forest)}
.button:hover,.underlink:hover,.official-box a:hover{filter:brightness(.94)}
.arrow{display:inline-block;margin-left:.25em;line-height:1;font-family:Arial,sans-serif}
.hero-art{width:100%;height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center;isolation:isolate}
.hero-art::before{content:"";position:absolute;width:78%;aspect-ratio:1;bottom:7%;border:1px solid #e0ce6c75;border-radius:50%;z-index:-1}
.hero-art::after{content:"";position:absolute;width:88%;aspect-ratio:1;bottom:2%;border:1px dashed #c6d28d3d;border-radius:50%;z-index:-1}
.halo{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);z-index:-1;width:71%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 45% 36%,#f5d05ad4,#c3a02b8a 57%,#46784300 73%)}
.hero-art img{width:min(94%,400px);height:auto;position:relative;margin-bottom:-1.7%;filter:drop-shadow(0 12px 16px #05271f65)}
.directory,.categories,.offer-section,.faq{padding-block:clamp(2.25rem,5vw,4.1rem)}
.sect-heading{display:flex;flex-direction:column;align-items:flex-start;gap:.72rem}
.rule{width:42px;height:4px;background:linear-gradient(90deg,var(--green) 0 62%,#deb021 62% 100%)}
.sect-heading h2,.offer-copy h2,.faq h2,.article-grid h2{font-size:clamp(1.65rem,3.4vw,2.65rem)}
.sect-heading p,.wide-heading p{color:var(--soft);margin:.4rem 0 0;max-width:62ch}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.35rem;border-block:1px solid var(--line)}
.quick{display:flex;flex-direction:column;align-items:flex-start;position:relative;gap:.65rem;padding:1.2rem .9rem 1.25rem 1.15rem;border-inline-start:1px solid var(--line);color:var(--ink);text-decoration:none}
.quick:first-child{border-inline-start:0}
.quick:hover,.related-link:hover{background:#edf3e8}
.quick-icon{width:37px;height:37px;padding:8px;border-radius:50%;background:#e0ecdc;color:var(--green)}
.quick-icon svg{width:100%;height:100%}
.quick h3,.game-card h3{font-size:1.25rem;letter-spacing:-.028em}
.quick p,.game-card p{color:var(--soft);font-size:.91rem;line-height:1.48;margin-top:.4rem}
.quick-arrow{position:absolute;right:1rem;top:1.45rem;font-size:1.15rem;color:#527c61}
.categories{background:#eeeFE4;border-block:1px solid #dce2d4}
.wide-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.underlink{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
.game-card{display:block;overflow:hidden;border:1px solid #b6c6b4;border-radius:8px;text-decoration:none;color:var(--ink);background:#fdfdf6}
.category-art{width:100%;height:auto;min-height:80px;max-height:148px;background:#063e32;color:#e7cf75}
.game-card.live .category-art{background:#234937;color:#e6daaa}
.game-card.sports .category-art{background:#5a502a;color:#fff1b0}
.fig-fill{fill:#234937}
.game-card>div{padding:1rem 1.1rem}
.game-card h3{display:flex;align-items:center;justify-content:space-between}
.game-card .arrow{color:#50654d;font-size:.98rem}
.offer-section{padding-bottom:0}
.offer-box{display:grid;grid-template-columns:.72fr 1.28fr;align-items:stretch;background:#f2eccf;border:1px solid #dcd4ae;border-radius:10px;overflow:hidden}
.offer-art{position:relative;background:radial-gradient(ellipse at 50% 45%,#fff4a4,#d9b95a 75%);display:flex;align-items:flex-end;justify-content:center;min-width:0}
.offer-art::before{content:"";inset:7% 10%;border:1px solid #a58b3d5e;border-radius:48% 48% 0 0;position:absolute}
.offer-art img{position:relative;width:min(93%,285px);height:auto;margin-bottom:-1px}
.offer-copy{padding:clamp(1.3rem,3.2vw,2.7rem)}
.offer-copy h2{max-width:18ch}
.offer-copy>p{margin:.6rem 0 1rem;color:#4d573d;max-width:51ch}
.offer-copy dl{margin:.5rem 0 1rem}
.offer-copy dl div{display:grid;grid-template-columns:.76fr 1.24fr;gap:.65rem;padding:.38rem 0;border-top:1px solid #cfc9a9;font-size:.94rem}
.offer-copy dt{font-weight:700}
.faq{display:grid;grid-template-columns:.64fr 1.36fr;align-items:start;gap:2rem}
.faq h2{margin:.75rem 0 .8rem}.questions{border-block-start:1px solid var(--line)}
.questions details{border-bottom:1px solid var(--line);padding:.9rem 0}
.questions summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-weight:700;list-style:none}
.questions summary::-webkit-details-marker{display:none}
.questions summary span::before{content:"+";font-size:1.4rem;font-weight:400;color:var(--green)}
.questions details[open] summary span::before{content:"−"}
.questions p{color:var(--soft);padding:.55rem 1.4rem .1rem 0}
.footer{background:#0a3027;color:#ddedda;padding:2rem 0 1rem}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:2rem}
.footer .logo img{width:134px}.footer-top p{font-size:.88rem;color:#c5d5c6;margin:.5rem 0}
.footer nav{display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;max-width:450px}
.footer a{color:#eef7dc;font-size:.9rem;text-decoration:none;font-weight:650}
.footer-meta{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #466456;margin-top:1.4rem;padding-top:.8rem;color:#bdcdbd;font-size:.8rem}
.article-head{background:linear-gradient(120deg,#073c30,#14523b);color:#fff}
.crumbs{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;padding:.9rem 0;color:#c9deca;font-size:.82rem}
.crumbs a{color:#f2f4db}
.article-title{padding:.75rem 0 clamp(1.8rem,3.5vw,3.2rem);width:min(100%,850px)}
.article-title h1{margin:.55rem 0 .8rem;font-size:clamp(2.3rem,5vw,4.3rem)}
.article-title>p:last-child{color:#e1eddc;max-width:70ch;font-size:1.08rem}
.article-grid{display:grid;grid-template-columns:minmax(180px,.38fr) minmax(0,1fr);gap:clamp(1.8rem,6vw,5.2rem);padding-block:clamp(1.7rem,5vw,4rem);max-width:1030px}
.side{position:sticky;top:1rem;align-self:start}
.side h2,.side-cta b,.related h2{font-size:1rem;letter-spacing:0}
.side nav{display:grid;margin:.55rem 0 1.5rem;border-left:2px solid #b9cfba}
.side nav a{font-size:.93rem;text-decoration:none;padding:.33rem .75rem;color:#3b5646}
.side nav a:hover{text-decoration:underline}
.side-cta{padding:.8rem;background:#e6eddd;display:grid;gap:.2rem;font-size:.92rem}
.text-section{padding:0 0 1.4rem;margin:0 0 1.5rem;border-bottom:1px solid var(--line)}
.article-grid .text-section h2,.article-games h2,.article-guide-links h2{font-size:clamp(1.4rem,2.5vw,1.9rem);letter-spacing:-.025em}
.text-section p{margin-top:.65rem;line-height:1.7;color:#395144}
.article-games .games-grid{gap:.5rem;margin:.75rem 0 1.6rem}.article-games .game-card>div{padding:.6rem}.article-games h3{font-size:1.06rem}.article-games .game-card p{font-size:.83rem}
.article-guide-links .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:.7rem 0 1.6rem}.article-guide-links .quick{border:0;border-top:1px solid var(--line)}
.official-box{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;background:#e6eddd;border-radius:6px}
.official-box .eyebrow{color:#4a694f;font-size:.66rem}.official-box strong{font-size:1.2rem}
.related{margin-top:1.8rem}.article-grid .related h2{font-size:1.1rem}.related div{display:grid;margin-top:.5rem}.related-link{color:var(--green);padding:.48rem 0;border-bottom:1px solid var(--line);font-weight:650}
.missing{padding-block:4rem;min-height:55vh}.missing .eyebrow{color:var(--green)}.missing h1{margin:.7rem 0;font-size:clamp(2rem,5vw,4rem)}
:lang(zh-Hans-MY) h1,:lang(zh-Hans-MY) h2,:lang(zh-Hans-MY) h3{letter-spacing:-.035em;line-height:1.18}
@media(max-width:850px){
  .head-inner{gap:1.2rem}.topnav{gap:1.1rem}
  .hero-grid{min-height:365px;grid-template-columns:1fr .82fr}.hero-art img{width:100%}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick:nth-child(odd){border-inline-start:0}.quick:nth-child(n+3){border-top:1px solid var(--line)}
  .games-grid{gap:.6rem}.footer-top{align-items:flex-start}.offer-box{grid-template-columns:.66fr 1fr}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 2rem)}.head-inner{height:64px;gap:.5rem;justify-content:space-between}.topnav{display:none}.logo img{width:119px}.languages a{padding:.43rem .56rem}
  .hero-grid{grid-template-columns:1fr;gap:0;min-height:0;position:relative}.hero-copy{padding:2.05rem 0 0}.hero h1{font-size:clamp(3.6rem,14vw,5.2rem);margin:.7rem 0 .9rem;line-height:.91}
  .hero-intro{max-width:40ch}.hero .buttons{margin-top:1rem}.hero-art{height:clamp(166px,51vw,255px);justify-self:center;width:81%;margin-top:.25rem}
  .hero-art img{width:auto;height:106%;max-width:95%;margin-bottom:-1px}.hero-art::before{height:88%;width:auto;bottom:3%}.hero-art::after{height:100%;width:auto;bottom:0}.halo{width:auto;height:85%;bottom:2%}
  .directory,.categories,.offer-section,.faq{padding-block:2.05rem}.offer-section{padding-bottom:0}
  .quick{padding:.95rem .7rem}.quick-icon{width:31px;height:31px;padding:6px}.quick-arrow{right:.7rem;top:1rem}
  .wide-heading{align-items:flex-start;flex-direction:column;gap:.65rem}.games-grid{grid-template-columns:1fr;gap:.55rem}
  .game-card{display:grid;grid-template-columns:31% 1fr}.category-art{min-height:96px;height:100%}.game-card>div{padding:.8rem}.game-card p{margin-top:.25rem}
  .offer-box{grid-template-columns:1fr}.offer-art{height:122px;align-items:flex-start;overflow:hidden}.offer-art img{width:155px;margin-top:4px}.offer-art::before{inset:6% 21% -60%}.offer-copy h2{max-width:24ch}
  .offer-copy dl div{grid-template-columns:.8fr 1.2fr}.faq{grid-template-columns:1fr;gap:1rem}
  .footer-top,.footer-meta{align-items:flex-start;flex-direction:column;gap:.65rem}.footer nav{max-width:100%;gap:.5rem 1rem}
  .article-grid{grid-template-columns:1fr;gap:1.2rem}.side{position:static}.side nav{margin-bottom:.5rem}.side-cta{display:none}
  .article-title>p:last-child{font-size:1rem}.article-games .game-card>div{padding:.7rem}.official-box{align-items:flex-start;flex-direction:column}.article-guide-links .quick-grid{grid-template-columns:1fr}
}
@media(max-width:330px){.wrap{width:calc(100% - 1.5rem)}.hero .buttons{gap:.4rem}.button{font-size:.85rem;padding:.55rem .75rem}.quick-grid{grid-template-columns:1fr}.quick{display:grid;grid-template-columns:32px 1fr;align-items:start;padding:.75rem .35rem;border:0;border-bottom:1px solid var(--line)}.quick-arrow{display:none}.hero-art{height:155px}.article-title h1{font-size:2rem}.offer-copy dl div{grid-template-columns:1fr;gap:.1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
