@import url('/assets/fonts-v1/fonts.css');
/* SA88KR DEV visual layer. Motion is restricted to the banner. */
html:has(#member-app){background:#090a0c}
body:has(#member-app){background:radial-gradient(ellipse at 50% 0,#9e722b0c,transparent 44%),#090a0c;color:#f4d68b;--dg-bg:#090a0c;--dg-panel:#111215;--dg-raised:#1b1a17;--dg-line:#4b3b22;--dg-gold:#f4d68b;--dg-muted:#b9ad91}
body:has(#member-app) :is(.portal-header,.portal-header .top-row,.portal-header .nav-row){background:#0c0d10f7;border-color:#4b3b22}
.portal-header .logo,.portal-header .logo:after,.brand-image{animation:none!important;transform:none!important;filter:none!important;transition:none!important}
.portal-header .logo:after{display:none!important}
.portal-header .logo .brand-image{width:180px!important;height:52px!important;object-fit:contain}
.portal-header .logo small{display:none!important}
body:has(#member-app) #primaryNav button{color:#ddc895;font-size:13px;min-height:48px}
body:has(#member-app) #primaryNav button.active{background:linear-gradient(180deg,#5a43231c,#b68d3938);color:#ffe8a6;border-bottom:2px solid #d3ac59}
body:has(#member-app) .portal-header .nav-inner{height:76px!important;min-height:76px!important;align-items:stretch;overflow:visible!important}
body:has(#member-app) .portal-header .nav-row{height:auto!important;min-height:76px!important;overflow:visible!important}
body:has(#member-app) .portal-header .nav-inner{gap:12px!important;padding-top:0!important;padding-bottom:0!important}
body:has(#member-app) .portal-header .locale-tools time{display:none!important}
body:has(#member-app) .portal-header .nav-inner #primaryNav{flex:1 1 0!important;inline-size:0!important;min-inline-size:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
body:has(#member-app) .portal-header .locale-tools{position:static!important;flex:0 0 auto;inline-size:auto;max-inline-size:140px;min-inline-size:0;gap:0}
body:has(#member-app) .portal-header .locale-tools:not(:has(#member-language-controls)){display:none!important}
#member-language-controls{min-inline-size:0;max-inline-size:100%;flex:0 1 auto}
@media(max-width:1200px){.brand-slogan{display:none!important}.portal-header .top-actions{align-items:center;gap:7px;min-width:0}.portal-header .top-row{flex-wrap:nowrap!important}.portal-header .top-actions #member-language-controls{margin-left:3px}body:has(#member-app) #primaryNav button{min-width:74px;flex:1 0 auto}}
body:has(#member-app) #primaryNav{gap:3px;align-items:stretch;flex:1}
body:has(#member-app) #primaryNav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;padding:6px 10px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;min-height:68px;white-space:nowrap}
body:has(#member-app) #primaryNav button:before{content:'';display:block;width:33px;height:33px;background-image:url('/assets/dev-gold-v1/menu-atlas.webp');background-size:300% 300%;background-repeat:no-repeat}
#primaryNav button[data-nav="0"]:before{background-position:0 0}
#primaryNav button[data-nav="1"]:before{background-position:50% 0}
#primaryNav button[data-nav="2"]:before{background-position:100% 0}
#primaryNav button[data-nav="3"]:before{background-position:0 50%}
#primaryNav button[data-nav="4"]:before{background-position:50% 50%}
#primaryNav button[data-nav="5"]:before{background-position:100% 50%}
#primaryNav button[data-nav="6"]:before{background-position:0 100%}
#primaryNav button[data-nav="7"]:before{background-position:50% 100%}
#primaryNav button[data-nav="8"]:before{background-position:100% 100%}
body:has(#member-app) .top-actions .btn{min-height:40px;border-radius:6px;padding:10px 22px}
body:has(#member-app) .top-actions .btn:not(.outline){background:linear-gradient(115deg,#fbe3a4,#d1a04a);color:#201709}
body:has(#member-app) .hero.dev-hero{position:relative;height:clamp(360px,31vw,520px)!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible!important;border:0;border-bottom:1px solid #8a662b;border-radius:0;margin:40px 0 0!important;background:#0c0d10 url('/assets/dev-gold-v1/stadium.webp') center/cover!important;isolation:isolate}
.hero.dev-hero:before{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,#070808ec 0%,#090a0bc2 27%,#090a0b2b 65%,#090a0b00)!important;transform:none!important;z-index:1}
.hero.dev-hero:after{display:none!important}
body:has(#member-app) .hero.dev-hero[data-theme="casino"]{background-image:url('/assets/dev-gold-v1/casino-interior-v2.webp')!important}
body:has(#member-app) .ph-chat-bubble.ph-support-lifebuoy{display:grid;place-items:center;width:64px;height:64px;padding:0;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;right:22px;bottom:24px;min-width:0;transition:none;transform:none}
.ph-support-lifebuoy img{display:block;width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 3px 6px #0008);pointer-events:none}
body:has(#member-app) .ph-chat-bubble.ph-support-lifebuoy:hover{background:transparent!important;filter:brightness(1.12);transform:none}
.hero.dev-hero>div:first-child,.hero.dev-hero .hero-shade,.hero.dev-hero .banner-action{display:none!important}
.hero.dev-hero #dev-banner-canvas{position:absolute;inset:-46px 0 0;max-width:none;padding:0;pointer-events:none;z-index:2}
#dev-banner-canvas canvas{display:block;width:100%!important;height:100%!important}
.hero.dev-hero .dev-figure{position:absolute;right:7%;bottom:0;height:calc(100% + 46px);width:46%;object-fit:contain;object-position:center bottom;z-index:2;pointer-events:none}
.hero.dev-hero.canvas-ready .dev-figure{display:none!important}
.hero.dev-hero #dev-banner-copy{position:absolute;inset:0 auto 0 max(6%,calc((100vw - 1280px)/2));max-width:none;width:45%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 0 44px;z-index:3;pointer-events:none}
#dev-banner-copy .dev-eyebrow{font:600 12px/1.4 Arial,sans-serif;letter-spacing:.24em;color:#dfb967;margin-bottom:15px}
.hero.dev-hero #dev-banner-copy h1{font:700 clamp(32px,3.5vw,60px)/1.13 Georgia,'Times New Roman',serif;color:#ffe3a0;text-shadow:0 3px 16px #000a;margin:0 0 16px;letter-spacing:-.02em;max-width:680px}
.hero.dev-hero:lang(ko) #dev-banner-copy h1{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;font-weight:850;line-height:1.26;word-break:keep-all;font-size:clamp(30px,3.2vw,54px)}
#dev-banner-copy p{font:14px/1.7 Arial,sans-serif;color:#e5ddca;max-width:440px;margin:0 0 24px;word-break:keep-all}
#dev-banner-copy a{pointer-events:auto;display:inline-flex;align-items:center;gap:24px;text-decoration:none;min-height:46px;padding:12px 27px;border-radius:6px;border:1px solid #edcb80;color:#211709;background:linear-gradient(120deg,#ffe8af,#cd9a42);font-weight:700;font-size:14px;box-shadow:0 5px 25px #c5943226}
#dev-banner-copy a:hover{background:#ffe4a0}
.hero.dev-hero .banner-controls{z-index:4!important;bottom:16px!important;right:6%;background:#0b0d10cc!important;border-color:#b48a42!important}
.dev-banner-pause{position:absolute;right:6%;top:18px;z-index:4;width:34px;height:34px;border:1px solid #b48a4266;border-radius:50%;background:#080a0bbb;color:#f7da92}
body:has(#member-app) .ticker{background:#0f1012;border:0;border-bottom:1px solid #5d492b;border-radius:0;font-size:11px;color:#c7b58e;padding:13px max(6%,calc((100vw - 1280px)/2));white-space:nowrap;overflow:hidden}
body:has(#member-app) .portal-main{max-width:1340px;padding-top:30px}
body:has(#member-app) .ph-hub{padding-top:8px}
body:has(#member-app) .ph-heading{gap:20px;align-items:center}
body:has(#member-app) .ph-heading h2{font:700 26px/1.4 Georgia,'Malgun Gothic',serif;color:#f9d98e;margin:10px 0 24px}
body:has(#member-app) .ph-heading input{background:#0f1013;border:1px solid #705631;color:#f6e7c7;border-radius:6px;width:min(290px,40%);min-height:42px}
body:has(#member-app) .ph-categories{gap:8px;display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
body:has(#member-app) .ph-categories button{flex-shrink:0;min-height:43px;padding:10px 20px;border-radius:6px;color:#dfc58f;background:#131416;border-color:#514126;white-space:nowrap}
body:has(#member-app) .ph-categories button.active{background:linear-gradient(130deg,#edcf87,#c0903e);color:#20170a;border-color:#e1bb69}
body:has(#member-app) .ph-provider-grid{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
body:has(#member-app) .ph-provider-grid>button{border-radius:9px;border:1px solid #624a27;background:linear-gradient(130deg,#1c1b18,#111214);padding:0;overflow:hidden;min-height:138px;transition:none}
body:has(#member-app) .ph-provider-grid>button:hover,body:has(#member-app) .ph-provider-grid>button.active{border-color:#e0bb6b;background:#282114;transform:none;box-shadow:0 0 0 1px #d1a95144}
body:has(#member-app) .ph-provider-grid>button>strong{display:block;font-size:15px;color:#f2d89c;padding:14px 10px 4px}
body:has(#member-app) .ph-provider-grid>button>small{display:block;padding:0 8px 14px;color:#a99b7f;font-size:10px}
body:has(#member-app) .ph-provider-code{display:block;font:700 27px/1.2 Georgia,serif;color:#dfbd73;padding:24px 10px 0;background:radial-gradient(ellipse at center,#ac79311c,transparent 65%)}
body:has(#member-app) .category-grid{margin-top:34px}
body:has(#member-app) .category-tile{border-color:#624a27;background:#141517;border-radius:9px;transform:none!important;transition:none!important}
body:has(#member-app) .category-tile img{animation:none!important;transition:none!important;transform:none!important}
body:has(#member-app) .category-tile .tile-copy{background:linear-gradient(90deg,#090a0bd9,transparent)}
body:has(#member-app) .category-tile h3{color:#ffe3a0}
body:has(#member-app) .category-tile small{color:#d0b986}
body:has(#member-app) .faq-section{margin-top:38px}
body:has(#member-app) :is(.pv-art,.pv-art-hover,.pv-logo,.ph-marquee){animation:none!important;transition:none!important;transform:none!important}
body:has(#member-app) .pv-art-hover{display:none!important}
body:has(#member-app) .pv-alternate .pv-art-primary{opacity:1!important}
body:has(#member-app) .ph-marquee{padding-left:0;white-space:nowrap}
body:has(#member-app) :is(.brand-image,.category-tile,.small-game,.live-tile,.sport-tile,.card,.promo-tile){animation:none!important}
body:has(#member-app) :is(footer,.bottom){background:#0c0d10;border-color:#6b502a}
body:has(#member-app) .ph-content:has(>p:only-of-type):not(:has(>button)){display:none}
@media(max-width:1000px){body:has(#member-app) #primaryNav button{font-size:11px;padding:0 11px}.portal-header .logo .brand-image{width:145px!important;height:45px!important}.hero.dev-hero #dev-banner-copy{left:5%;width:48%}.hero.dev-hero .dev-figure{right:1%;width:51%}#dev-banner-copy p{font-size:12px}.ph-provider-grid{gap:12px!important}}
@media(max-width:700px){
 .portal-header .logo .brand-image{width:115px!important;height:39px!important}.portal-header .logo{min-width:115px!important}
 body:has(#member-app) .top-actions .btn{font-size:11px!important;padding:8px 12px!important;min-height:36px}
 .portal-header .top-row{min-height:64px!important}
 body:has(#member-app) .hero.dev-hero{margin-top:20px!important;height:350px!important;background-position:58% center!important}
 .hero.dev-hero:before{background:linear-gradient(0deg,#070809f5,#090a0b00 74%),linear-gradient(90deg,#090a0bbf,#090a0b00)!important}
 .hero.dev-hero #dev-banner-canvas{inset:-26px 0 0}
 .hero.dev-hero .dev-figure{right:0;height:calc(100% + 26px);width:75%}
 .hero.dev-hero #dev-banner-copy{left:20px;right:20px;top:auto;bottom:0;width:70%;padding:0 0 35px;justify-content:flex-end}
 #dev-banner-copy .dev-eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:10px}
 .hero.dev-hero #dev-banner-copy h1,.hero.dev-hero:lang(ko) #dev-banner-copy h1{font-size:27px;line-height:1.18;margin-bottom:10px;max-width:290px}
 #dev-banner-copy p{font-size:11px;line-height:1.5;max-width:240px;margin-bottom:14px}
 #dev-banner-copy a{min-height:38px;font-size:11px;padding:10px 17px;gap:14px}
 .hero.dev-hero .banner-controls{bottom:10px!important;right:12px}
 .dev-banner-pause{right:12px;top:10px;width:28px;height:28px;font-size:11px}
 body:has(#member-app) .ticker{font-size:9px;padding:11px 15px}
 body:has(#member-app) .portal-main{padding:20px 14px 100px}
 body:has(#member-app) .ph-heading{gap:12px}
 body:has(#member-app) .ph-heading h2{font-size:19px;margin:4px 0 17px}
 body:has(#member-app) .ph-heading input{font-size:10px;min-height:36px;width:140px}
 body:has(#member-app) .ph-categories{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
 body:has(#member-app) .ph-categories button{min-height:39px;padding:9px 13px;font-size:11px}
 body:has(#member-app) .ph-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin-top:8px}
 body:has(#member-app) .ph-provider-grid>button{min-height:116px}
 body:has(#member-app) .ph-provider-grid>button>strong{font-size:12px}
 body:has(#member-app) .ph-provider-grid>button>small{font-size:9px}
 body:has(#member-app) .ph-provider-code{font-size:22px;padding-top:18px}
 body:has(#member-app) .bottom{padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px #0008}
 body:has(#member-app) .bottom button{min-height:62px;font-size:10px}
 body:has(#member-app) .bottom button span{font-size:21px}
 body:has(#member-app) .ph-chat-bubble.ph-support-lifebuoy{right:12px;bottom:80px;width:54px;height:54px}.ph-support-lifebuoy img{width:52px;height:52px}
 body:has(#member-app) .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px;gap:10px}
 .locale-tools{display:flex!important;flex-shrink:0}.locale-tools time{display:none}.portal-header .nav-inner{padding-right:8px!important;gap:6px}#primaryNav{min-width:0}
 body:has(#member-app) .portal-header .nav-inner{height:68px!important;min-height:68px!important}body:has(#member-app) .portal-header .nav-row{min-height:68px!important}body:has(#member-app) #primaryNav button{flex:0 0 auto;min-width:74px;min-height:62px;padding:5px 10px;font-size:10px}body:has(#member-app) #primaryNav button:before{width:29px;height:29px}
 body:has(#member-app) .faq-section{gap:20px;margin-top:30px}
}
@media(max-width:360px){.portal-header .logo .brand-image{width:100px!important}.portal-header .logo{min-width:100px!important}body:has(#member-app) .top-actions .btn{padding:8px 10px!important}.hero.dev-hero #dev-banner-copy{left:16px;width:75%}.hero.dev-hero #dev-banner-copy h1,.hero.dev-hero:lang(ko) #dev-banner-copy h1{font-size:24px}body:has(#member-app) .hero.dev-hero{height:325px!important}}

/* Complete Vietnamese and Hangul coverage; avoid mixed fallback glyph metrics. */
html{--sa-font:'Noto Sans',Arial,sans-serif}
html:lang(ko){--sa-font:'Noto Sans KR','Noto Sans',sans-serif}
body:has(#member-app),body:has(#member-app) :is(button,input,select,textarea,h1,h2,h3,p,span,label,a,small,strong,summary,td,th){font-family:var(--sa-font)!important}

body:has(#member-app) .hero.dev-hero #dev-banner-copy h1,body:has(#member-app) .hero.dev-hero:lang(ko) #dev-banner-copy h1{font-family:var(--sa-font)!important;font-weight:800;font-size:clamp(30px,3.15vw,50px);line-height:1.28;letter-spacing:0;word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:pretty}
body:has(#member-app) .hero.dev-hero:lang(ko) #dev-banner-copy h1{word-break:keep-all}
body:has(#member-app) #dev-banner-copy p{font-family:var(--sa-font)!important;line-height:1.7;word-break:normal;overflow-wrap:normal}
@media(max-width:700px){body:has(#member-app) .hero.dev-hero #dev-banner-copy h1,body:has(#member-app) .hero.dev-hero:lang(ko) #dev-banner-copy h1{font-size:clamp(22px,5.7vw,29px);line-height:1.3;letter-spacing:0}}

/* Phone banners have separate text and character zones. */
@media(max-width:700px){
 body:has(#member-app) .hero.dev-hero[data-theme="casino"]{height:clamp(500px,130vw,600px)!important}
 .hero.dev-hero[data-theme="casino"] #dev-banner-copy{inset:18px 20px auto!important;width:auto!important;padding:0!important;justify-content:flex-start!important}
 .hero.dev-hero #dev-banner-copy h1,.hero.dev-hero:lang(ko) #dev-banner-copy h1{max-width:none!important}
 #dev-banner-copy p{max-width:100%;margin-bottom:13px}
 .hero.dev-hero[data-theme="casino"]:before{background:linear-gradient(180deg,#070809ed 0%,#070809bd 28%,#090a0b00 60%)!important}
 body:has(#member-app) .ph-chat-bubble.ph-support-lifebuoy{display:none!important}
}
