/* Borderless artwork banners and a visible, lightweight foreground particle layer. */
/* Selected 3D category cards. Artwork and readable labels are separate layers. */
#particles{position:fixed;inset:0;z-index:22;pointer-events:none;width:100%;height:100%;opacity:.82;contain:strict}
.header{z-index:35}.mobile-bottom{z-index:35}.modal-overlay{z-index:100}.toast{z-index:110}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.art-hero{position:relative;isolation:isolate;background:#020815;overflow:hidden;margin-bottom:20px}.hero-poster{display:block;position:relative;width:100%;max-width:1920px;margin:0 auto}.hero-poster img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;display:block}.art-hero:after{content:'';position:absolute;bottom:0;left:0;right:0;height:130px;background:linear-gradient(transparent,#020815);z-index:-1;pointer-events:none}.poster-controls{position:relative;margin-top:-55px;padding-bottom:10px;z-index:2}.poster-search{display:flex;align-items:center;gap:10px;max-width:510px;margin:auto;background:#f3fcff;border-radius:40px;padding:7px 8px 7px 19px;border:1px solid #97f2ff;box-shadow:0 0 7px #4cddff,0 0 25px #007aff88;color:#1779b3}.poster-search input{background:transparent;border:0;color:#173653;font-size:13px;padding:6px 0;box-shadow:none;flex:1;min-width:0}.poster-search input::placeholder{color:#547691}.poster-search button{border:0;display:grid;place-items:center;background:linear-gradient(140deg,#00bafa,#1165f2);color:#fff;border-radius:50%;width:36px;height:36px;flex-shrink:0}.poster-note{display:flex;gap:26px;justify-content:center;margin:17px 0 0;color:#9eccec;font-size:11px}.poster-note span{display:flex;gap:7px;align-items:center}.poster-note .icon{width:16px;color:#31d7ff}.banner-flare{position:absolute;top:12%;left:-15%;width:20%;height:1px;transform:rotate(-24deg);background:linear-gradient(90deg,transparent,#94f4ff,transparent);box-shadow:0 0 13px #37bcff;opacity:0;animation:flareSweep 11s ease-in-out infinite;pointer-events:none;z-index:1}@keyframes flareSweep{0%,65%{transform:translateX(0) rotate(-24deg);opacity:0}72%{opacity:.8}95%,100%{transform:translateX(650%) rotate(-24deg);opacity:0}}
.shortcut-grid{margin-top:0}.shortcut{box-shadow:none;border:0;border-bottom:1px solid #1978a5;border-radius:0;background:linear-gradient(180deg,#07244899,transparent);padding:20px 18px}.shortcut:hover{box-shadow:none;background:linear-gradient(180deg,#0b4d7288,transparent)}
.page-intro.art-intro,.product-hero.art-intro{border:0;border-radius:0;box-shadow:none;background:none;position:relative;isolation:isolate;overflow:hidden;min-height:310px;margin-left:calc((1180px - 100vw)/2);margin-right:calc((1180px - 100vw)/2);padding:45px max(40px,calc((100vw - 1180px)/2));display:flex;align-items:center;gap:23px}
.art-intro:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#02091844,transparent 70%),linear-gradient(0deg,#020815,transparent 25%,transparent 90%,#02081522);pointer-events:none;z-index:-1}.art-intro>.inner-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:1;mask-image:none;border:0;border-radius:0;box-shadow:none;max-width:none}.art-intro .intro-copy{max-width:60%;padding-left:0}.art-intro h1{font-size:46px;font-style:italic;font-weight:700;text-shadow:0 3px #0c3973,0 0 30px #087bff99}.art-intro p{color:#c6e3ff;max-width:510px}.product-hero.art-intro>img:not(.inner-poster){height:106px;width:106px;border-radius:18px;border:1px solid #71e5ff;box-shadow:0 0 20px #087bff66}.product-hero.art-intro>div{max-width:55%}.art-intro .intro-art,.art-intro .intro-orbit{display:none}.panel,.page .empty,.stat,.step,.faq details{border:0;box-shadow:none;border-radius:0;background:linear-gradient(145deg,#09214277,#040d2077)}.panel{padding:28px 24px}.panel.summary{background:linear-gradient(180deg,#09396980,#06162b70);border-top:2px solid #20bfff}.panel-title{border-bottom-color:#205183}.stat{border-bottom:1px solid #145780}.wallet-card{border:0;border-radius:0;box-shadow:none}.contact-line{border-bottom-color:#173b5e}.faq details{border-bottom:1px solid #1b3f65}.step{border-left:2px solid #149fff}.tabs .tab{border-radius:7px}.editorial:before{opacity:.85}.section-title .link{border:0}.card{box-shadow:inset 0 0 5px #397bff55,0 0 6px #146eff22}.card:after{animation-duration:10s}.card:hover{box-shadow:0 0 15px #0099ff55}.text-glint{animation-duration:13s}.header{backdrop-filter:none}.footer{background:linear-gradient(#05132877,#020610);box-shadow:none}.modal{border-radius:15px}.modal-overlay{backdrop-filter:none;background:#000b}
@media(max-width:1244px){.page-intro.art-intro,.product-hero.art-intro{margin-left:-21px;margin-right:-21px;padding:35px 28px}}
@media(min-width:1600px){.hero-poster img{max-height:600px;object-fit:cover}.poster-controls{margin-top:-75px}}
@media(max-width:800px){.page-intro.art-intro,.product-hero.art-intro{min-height:270px}.art-intro h1{font-size:36px}.art-intro .intro-copy{max-width:65%}.panel{padding:24px 18px}}
@media(max-width:700px){#particles{opacity:.9}.art-hero{margin-bottom:12px}.hero-poster img{aspect-ratio:4/5;width:100%;height:auto;object-fit:contain}.poster-controls{margin-top:-35px;padding-bottom:0}.poster-search{max-width:none;width:100%;padding:6px 7px 6px 13px;min-height:46px}.poster-search input{font-size:12px}.poster-search>.icon{width:18px}.poster-search button{width:32px;height:32px}.poster-note{font-size:9px;gap:17px;margin:15px 0 8px}.poster-note .icon{width:13px;height:13px}.shortcut-grid{margin-top:0;gap:10px}.shortcut{border-radius:0;padding:13px 9px;border-bottom:1px solid #1c6d92}.shortcut strong{font-size:13px}.shortcut small{font-size:9px}.page-intro.art-intro,.product-hero.art-intro{min-height:245px;margin-left:-14px;margin-right:-14px;padding:30px 20px;gap:13px;margin-bottom:24px}.art-intro>.inner-poster{object-position:64% center}.art-intro:after{background:linear-gradient(90deg,#020918aa,#02091833 70%),linear-gradient(0deg,#020815,transparent 25%)}.art-intro h1{font-size:32px;line-height:1.3}.art-intro .intro-copy{max-width:80%;z-index:2}.art-intro p{font-size:12px;max-width:230px;line-height:1.8}.art-intro .eyebrow{font-size:8px;letter-spacing:1px}.product-hero.art-intro>img:not(.inner-poster){width:76px;height:76px;flex-shrink:0}.product-hero.art-intro>div{max-width:calc(100% - 90px)}.product-hero.art-intro h1{font-size:27px}.product-hero.art-intro p{font-size:10px}.panel{padding:23px 16px}.panel.summary{padding:23px 20px}.stats-row{gap:12px}.stat{padding:18px 14px}.step{border-radius:0}.contact-grid{gap:30px}.page .empty{padding:35px 20px}.wallet-card{padding:25px 20px}.editorial{overflow:clip}.editorial:before{inset:60px -10px -10px}.mobile-bottom{backdrop-filter:none;background:#020b1bfa}.favorite{backdrop-filter:none}.card:hover{transform:none}.footer{padding-top:30px}.banner-flare{animation-duration:13s}}
@media(prefers-reduced-motion:reduce){.banner-flare{display:none}#particles{display:none}.reveal-ready{opacity:1;transform:none}}body.low-motion .banner-flare{display:none}
.art-hero .poster-controls{margin-top:0}
@media(max-width:700px){.art-hero .poster-controls{margin-top:-15px}}

/* Readable typography revision: no metallic text or cramped Thai line-height. */
/* Each destination has its own artwork and copy, with no circular text backdrop. */
.page-intro:before,.page-intro::before,.intro-copy:before,.intro-copy:after,.intro-orbit,.art-intro:before{display:none!important}
.unique-banner .intro-copy{width:52%;max-width:620px;background:none;border:0;border-radius:0;padding:0}
.unique-banner h1{font-size:clamp(30px,3.2vw,44px);line-height:1.5;max-width:580px}
.unique-banner p{font-size:16px;line-height:1.9;max-width:500px}
.unique-banner:after{inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;transform:none;background:linear-gradient(90deg,#02091844,transparent 65%),linear-gradient(0deg,#020815,transparent 18%)}
.product-banner-art{position:absolute;right:5%;top:10%;height:80%;width:33%;z-index:-1;max-width:none!important;opacity:.75;transform:rotate(-7deg)}
.product-banner-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 24px #007bff80)}
.unique-product{background:linear-gradient(115deg,#020815,#062f60)!important}
.unique-product>div:not(.product-banner-art){z-index:1}
@media(max-width:700px){
 .art-hero .hero-poster img{aspect-ratio:3/1;object-fit:contain;height:auto;max-height:none}
 .art-hero .poster-controls{margin-top:0;padding-top:14px}
 .page-intro.art-intro.unique-banner{display:flex;align-items:flex-start;min-height:330px;padding:24px 20px 145px}
 .unique-banner .intro-copy{width:100%;max-width:100%}
 .unique-banner h1{font-size:29px;line-height:1.45;margin:10px 0 14px;max-width:340px}
 .unique-banner p{font-size:14px;max-width:330px;line-height:1.8}
 .unique-banner>.inner-poster{object-fit:cover;object-position:right bottom;height:185px;top:auto;bottom:0;mask-image:linear-gradient(transparent,#000 25%)}
 .unique-banner:after{background:linear-gradient(180deg,#020815,transparent 65%)}
 .unique-banner .eyebrow{font-size:10px}
 .product-banner-art{width:45%;right:-3%;opacity:.35}
}
.art-hero .poster-controls{padding-top:18px;padding-bottom:18px;margin-top:0}
.art-hero .poster-note{margin-top:20px;line-height:1.8}
.editorial,.editorial.reverse{column-gap:48px;align-items:center}
:root{--text:#fff;--muted:#fff}
body{font-size:16px;font-weight:400}
.header .head-nav{display:none}
html{scroll-padding-top:90px}
h1,h2,h3,h4{font-family:'Prompt',system-ui,sans-serif;font-weight:700;font-style:normal;letter-spacing:0;line-height:1.45}
.editorial h2,.editorial h2.text-glint,.art-intro h1{background:none;color:#fff;-webkit-text-fill-color:#fff;background-clip:border-box;-webkit-background-clip:border-box;text-shadow:none;filter:none;font-style:normal;letter-spacing:0;animation:none}
.editorial h2{font-size:clamp(34px,3.6vw,48px);line-height:1.45;margin:18px 0 24px}
.editorial h2 .cyan{color:#42dbff;-webkit-text-fill-color:#42dbff;background:none;text-shadow:none;filter:none}
.editorial-copy{max-width:560px}
.editorial p{font-size:17px;line-height:1.95;color:#fff;max-width:520px}
.editorial .feature-list{font-size:15px;line-height:1.8;color:#fff;gap:18px;margin:26px 0}
.editorial .eyebrow{font-size:12px;letter-spacing:2px;line-height:1.7}
.art-intro h1{line-height:1.45;margin:12px 0 18px}
.art-intro p,.muted,.card-meta,.card-detail,.section-heading small,.shortcut small,.step p,.footer p,.footer-links,.contact-line p,.faq p,.summary-note,.poster-note,.feature-list,.balance-chip,.catalog-count,.breadcrumbs{color:#fff}
.card-title{font-size:18px;font-weight:700;line-height:1.5}
.card-meta,.card-detail{font-size:12px;line-height:1.7}
.btn,.tab,.shortcut strong{font-weight:600}
.section-heading h2{font-size:30px;line-height:1.45}
.section-heading small{font-size:12px}
@media(max-width:700px){
 body{font-size:15px}
 .editorial,.editorial.reverse{padding-top:32px;gap:16px}
 .editorial-copy,.editorial.reverse .editorial-copy{padding:0 8px}
 .editorial h2{font-size:clamp(29px,7.8vw,37px);line-height:1.5;margin:18px 0 22px}
 .editorial p{font-size:15px;line-height:1.95;max-width:360px}
 .editorial .feature-list{font-size:13px;gap:14px;margin:24px 0;flex-direction:column;align-items:center}
 .editorial .eyebrow{font-size:10px;letter-spacing:1.5px}
 .editorial .btn{font-size:14px;min-height:46px}
 .editorial-visual,.editorial.reverse .editorial-visual{margin-top:12px}
 .card-title,.service-grid .card-title{font-size:16px;line-height:1.5;min-height:48px}
 .card-meta,.service-grid .card-meta{font-size:11px}
 .card-detail,.service-grid .card-detail{font-size:12px}
 .section-heading h2{font-size:25px}.section-heading small{font-size:11px}
 .art-intro h1{font-size:32px;line-height:1.45}.art-intro p{font-size:14px;line-height:1.9}
 .shortcut small{font-size:11px}.step h3{font-size:17px}.step p,.footer p,.contact-line p,.faq p{font-size:13px}
}

.shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:10px}
.shortcut.category-art-card{position:relative;isolation:isolate;display:flex;align-items:center;min-height:218px;padding:28px 30px;border:1px solid #238bff;border-radius:19px;overflow:hidden;background:radial-gradient(ellipse at 85% 80%,#06387d88,transparent 65%),linear-gradient(115deg,#020a18,#041329);box-shadow:inset 0 0 15px #007bff15,0 0 0 1px #0c3a70;transition:transform .25s,border-color .25s,box-shadow .25s}
.category-art-card .category-copy{position:relative;z-index:2;width:58%;padding:6px 0;text-shadow:0 2px 8px #000}
.category-art-card strong{display:block;color:#fff;font-size:clamp(24px,2.4vw,33px);font-weight:700;line-height:1.5;white-space:nowrap}
.category-art-card small{display:block;color:#fff;font-size:16px;line-height:1.7;margin-top:9px;font-weight:500}
.category-art-card .category-art{position:absolute;right:-4px;bottom:0;width:49%;height:100%;object-fit:contain;z-index:1;pointer-events:none;transition:transform .35s;filter:drop-shadow(0 0 8px #008cff30)}
.category-arrow{position:absolute;bottom:13px;left:30px;color:#72dcff;opacity:0;transform:translateX(-8px);transition:.2s}
.category-art-card:hover{transform:translateY(-3px);border-color:#71ddff;box-shadow:0 0 18px #087bff40,inset 0 0 18px #007bff15}
.category-art-card:hover .category-art{transform:translateY(-3px) scale(1.03)}
.category-art-card:hover .category-arrow{opacity:1;transform:none}
@media(max-width:900px){.shortcut.category-art-card{padding:22px;min-height:185px}.category-art-card strong{font-size:25px}.category-art-card small{font-size:13px}.category-art-card .category-art{width:47%}}
@media(max-width:700px){.shortcut-grid{grid-template-columns:1fr;gap:13px;margin-top:6px}.shortcut.category-art-card{min-height:155px;padding:22px 20px;border-radius:15px}.category-art-card strong{font-size:25px}.category-art-card small{font-size:13px;margin-top:7px}.category-art-card .category-copy{width:59%}.category-art-card .category-art{width:46%;right:-2px}.category-arrow{display:none}.category-art-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.shortcut.category-art-card,.category-art-card .category-art{transition:none}.category-art-card:hover .category-art{transform:none}}

/* Preserve desktop composition on phones, with independently sized live text. */
.garena-wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ff304e;background:none;line-height:1;filter:drop-shadow(0 0 12px #ed163c55)}
.garena-wordmark strong{font-family:Arial,sans-serif;font-size:clamp(25px,3vw,40px);font-weight:900;font-style:italic;letter-spacing:-1px}
.garena-wordmark small{font-size:10px;letter-spacing:5px;color:#fff;margin-top:9px;padding-left:5px}
@media(max-width:700px){
 .shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .shortcut.category-art-card{min-height:0;aspect-ratio:2.3/1;padding:9px 8px;border-radius:10px;container-type:inline-size}
 .category-art-card .category-copy{width:62%;padding:0}
 .category-art-card strong{font-size:clamp(10px,7.3cqw,22px);line-height:1.5}
 .category-art-card small{font-size:clamp(7px,4.4cqw,12px);line-height:1.5;margin-top:4px;white-space:nowrap}
 .category-art-card .category-art{width:48%;height:100%;right:-3px}
 .editorial,.editorial.reverse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:0;padding:14px 0;margin-top:16px;align-items:center}
 .editorial-copy,.editorial.reverse .editorial-copy{order:initial;width:100%;max-width:none;text-align:left;padding:0;min-width:0}
 .editorial-visual,.editorial.reverse .editorial-visual{order:initial;width:100%;height:clamp(175px,52vw,350px);margin:0;min-width:0}
 .editorial h2{font-size:clamp(15px,4.25vw,28px);line-height:1.5;margin:8px 0 10px}
 .editorial p{font-size:clamp(8px,2.15vw,13px);line-height:1.85;margin:0;max-width:none}
 .editorial .eyebrow{display:block;font-size:clamp(6px,1.45vw,9px);letter-spacing:.5px;line-height:1.7}
 .editorial .feature-list{font-size:clamp(7px,1.9vw,12px);gap:7px;margin:10px 0;align-items:flex-start;justify-content:flex-start;flex-direction:column}
 .editorial .feature-list span{gap:5px}
 .editorial .feature-list .icon{width:12px;height:12px;flex-shrink:0}
 .editorial .btn{font-size:clamp(8px,2.1vw,12px);padding:7px 9px;min-height:36px;gap:5px}
 .editorial .btn .icon{width:13px;height:13px}
 .editorial:before{inset:0 -14px;mask-image:radial-gradient(ellipse,#000 10%,transparent 75%)}
}