@font-face{font-family:DS;src:url('img/ds/db-helvethaica-web.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DS;src:url('img/ds/db-helvethaica-bold-web.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}
html{min-height:100%;background:#eaf7ff;scrollbar-width:thin;scrollbar-color:#76bde7 #d9f1ff}
body{margin:0;color:#254b6b;font:24px/1.35 DS,Tahoma,sans-serif;background:#eaf7ff}
a{color:#087ea8;cursor:pointer}a:hover{color:#045276}
.member-header{min-height:78px;padding:12px max(24px,calc((100vw - 1400px)/2));display:flex;align-items:center;gap:24px;background:#f6fcff;border-bottom:1px solid #d7eef7}
.member-wordmark img{display:block;width:130px;height:auto}
.member-header>span{font-size:22px;color:#63829a}.member-header strong{font-weight:700;color:#235c83}
.back-to-game{margin-left:auto;background:linear-gradient(115deg,#12a5cd,#19b493);color:white;padding:8px 24px;border-radius:28px;font-weight:700;white-space:nowrap}
.back-to-game:hover{color:white;background:#058daf;text-decoration:none}
#main{position:relative}
#main:after{display:none}
#main .section.main-cover{position:relative;z-index:1;margin:0 auto;min-width:0;height:auto;min-height:calc(100vh - 260px);padding:42px 24px 64px;background:#b9e8ff url('img/ds/home-bg.jpg') center center/cover no-repeat;isolation:isolate}
#main .section.main-cover:before,#main .section.main-cover:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-size:auto 88%;background-position:left bottom}
#main .section.main-cover:before{background-image:url('img/ds/home-boy.webp');left:-100px}
#main .section.main-cover:after{background-image:url('img/ds/home-dragon.webp');background-position:right bottom;right:-160px}
#main .section.main-cover{overflow:hidden}
#main .section.main-cover .section-wrap{width:100%;max-width:1160px;height:auto;margin:auto}
.jumbotron{min-height:664px;margin:0;padding:24px 40px 40px!important;border:1px solid #ffffffed;border-radius:28px;background:#fffffff0;box-shadow:0 18px 60px #20598c26}

.jumbotron .container{width:100%;padding:0}.jumbotron .container:after,[ng-view]:after{content:'';display:table;clear:both}
[ng-view]>.col-md-6{float:none;width:100%;max-width:460px;margin:26px auto 0;padding:0}
.nav.nav-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px;margin:0 auto 24px;border-radius:16px;background:transparent}
.nav.nav-pills>li{float:none;display:block;margin:0}.nav.nav-pills>li>a{padding:8px 18px;border-radius:11px;font-size:23px;font-weight:700;color:#467596}
.nav.nav-pills>li.active>a,.nav.nav-pills>li.active>a:hover,.nav.nav-pills>li.active>a:focus{background:#0c9dc7;color:#fff;box-shadow:0 3px 8px #0d9bcb26}
.nav.nav-pills>li>a:hover{background:#d7edfa}
h2{font:700 36px/1.15 DS,Tahoma,sans-serif;color:#164f7a;margin:0 0 22px}.login-intro{font-size:23px!important;color:#69869b;margin-top:-12px;margin-bottom:24px!important}
.form-group{margin-bottom:20px}label{font-size:24px;font-weight:700;margin-bottom:5px}
.form-control{height:48px;font:24px DS,Tahoma,sans-serif;border:1px solid #c4dce9;border-radius:10px;color:#214b6b;background:#fafdff;box-shadow:none;padding:8px 14px}
.form-control:focus{border-color:#099dc8;box-shadow:0 0 0 3px #0ba5d321;background:white}.form-control::placeholder{color:#809bad;opacity:1}
.btn{font:700 24px/1.2 DS,Tahoma,sans-serif;border-radius:11px;padding:11px 23px;white-space:normal}
.btn-primary{background:linear-gradient(#20bce0,#079fce);border-color:#09a3ce;color:white;box-shadow:0 4px 0 #0789b3}
.btn-primary:hover,.btn-primary:focus{background:#058cb8;border-color:#058cb8}.btn-primary:disabled{background:#83c6db;border-color:#83c6db;box-shadow:none;opacity:1;color:#fff}
.form-actions{margin:26px 0 8px}.form-actions>.btn-primary{width:100%}.help-block{font-size:21px}.alert{font-size:23px;border-radius:12px}
.panel-body{padding:20px;border:1px solid #d6e7f0;border-radius:14px;background:#f5fbff;overflow-wrap:anywhere}.panel-body li{margin:8px 0;list-style:none}
.jumbotron p{font-size:24px}table{font-size:22px;max-width:100%}img{max-width:100%}
#footer{position:relative;bottom:auto;min-width:0;height:auto;background:#f3faff;border-top:1px solid #d6eaf5;color:#54718a;padding:26px 24px 28px}
#footer .footer-wrap{width:100%;max-width:1100px;margin:auto;text-align:center}
#footer .footer-wrap .link{padding:0;margin:0 0 32px}#footer .footer-wrap .link ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
#footer .footer-wrap .link ul li{display:block}#footer .footer-wrap .link ul li+li:before{display:none}
#footer .footer-wrap .link ul li a,#footer .footer-wrap .link ul li a strong{font:700 21px DS,Tahoma,sans-serif;color:#376b8a}
#footer .footer-wrap .info-wrap{margin:0}#footer .footer-wrap .info-wrap .info{margin:0}#footer .footer-wrap .info-wrap .info>*,#footer .footer-wrap .copyright{font:20px/1.4 DS,Tahoma,sans-serif;color:#56778d}
#footer .footer-wrap .copyright .channel-info{margin-top:8px}
:focus-visible{outline:3px solid #087fb0;outline-offset:3px}

#footer .footer-wrap .copyright .channel-info,#footer .footer-wrap .copyright .channel-info span{font:18px/1.4 DS,Tahoma,sans-serif;color:#6b879a}

.otp-fields{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%}
.otp-fields>.form-control{flex:1 1 120px;width:0;min-width:100px}
.otp-fields .btn{height:48px;white-space:nowrap;padding:10px 20px}
.otp-fields>.help-block{flex-basis:100%;margin:0}
.phone-verification-notice{background:#c73545;border-color:#b52b3a;color:#fff}

/* Desktop keeps its original pixel sizes; only the mobile 640px canvas scales. */
.member-viewport{position:relative;width:100%;min-width:1240px}
.member-shell{width:100%;min-width:1240px;transform-origin:top left}
body.member-device-mobile .member-viewport{min-width:0;overflow-x:clip}
.member-shell.member-mobile{width:640px;min-width:640px;transform:scale(var(--member-fit,1));font-size:36px}
.member-mobile #main .section.main-cover{padding:30px 24px 44px;min-height:max(980px,calc(var(--member-screen-height,1400px) - 390px));background-position:center top}
.member-mobile #main .section.main-cover:before,.member-mobile #main .section.main-cover:after{display:none}
.member-shell.member-mobile #main .section.main-cover .section-wrap{width:592px}
.member-mobile .jumbotron{min-height:900px;padding:24px 28px 38px!important;border-radius:28px}
.member-mobile .nav.nav-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px;padding:0 0 24px;margin-bottom:28px;border-bottom:1px solid #dbeaf3;border-radius:0}
.member-mobile .nav.nav-pills>li>a{font-size:30px;padding:14px 4px;min-height:72px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;border-radius:14px}
.member-mobile [ng-view]>.col-md-6{max-width:none;width:100%;margin:0}
.member-mobile h2{font-size:44px;margin-bottom:26px}
.member-mobile .jumbotron p,.member-mobile label{font-size:36px}
.member-mobile .login-intro{font-size:34px!important;line-height:1.35}
.member-mobile .form-control{height:78px;font-size:38px;padding:12px 18px;border-radius:14px}
.member-mobile .form-group,.member-mobile .input-field{margin-bottom:28px}
.member-mobile .btn{font-size:36px;min-height:76px;padding:15px 24px;border-radius:14px}
.member-mobile .otp-fields{gap:16px}.member-mobile .otp-fields .btn{height:78px;font-size:32px;padding:12px 20px}
.member-mobile .help-block{font-size:30px;line-height:1.3}
.member-mobile .alert{font-size:34px;line-height:1.35;padding:22px}
.member-mobile .panel-body{padding:24px}.member-mobile .panel-body li{margin:12px 0}
.member-mobile .radio{margin:16px 0 24px}.member-mobile .radio label{display:flex;align-items:center;gap:18px;padding:0}
.member-mobile .radio input[type=radio]{position:static;flex-shrink:0;width:26px;height:26px;margin:0}
.member-mobile .radio img{width:360px;max-width:calc(100% - 44px);height:auto}
.member-mobile table{font-size:26px;table-layout:fixed;overflow-wrap:anywhere}
.member-mobile #footer{padding:32px 28px 38px}
.member-mobile #footer .footer-wrap .link ul{gap:12px 28px}
.member-mobile #footer .footer-wrap .link ul li.footer-download{display:none}
.member-mobile #footer .footer-wrap .link ul li a,.member-mobile #footer .footer-wrap .link ul li a strong{font-size:30px}
.member-mobile #footer .footer-wrap .copyright{font-size:28px}
.member-mobile #footer .footer-wrap .copyright .channel-info,.member-mobile #footer .footer-wrap .copyright .channel-info span{font-size:25px;line-height:1.4}

.member-mobile .nav.nav-pills:before,.member-mobile .nav.nav-pills:after{display:none}
.topup-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.member-mobile .topup-actions{display:flex;flex-direction:column;align-items:stretch;gap:24px;text-align:center}
.member-mobile .topup-actions a{white-space:nowrap}
.member-menu-toggle{display:none}
.member-mobile .member-menu-toggle{display:flex;align-items:center;gap:18px;width:100%;min-height:78px;padding:14px 22px;margin:0 0 30px;border:1px solid #bedce9;border-radius:14px;background:#fff;color:#176385;font:700 34px/1.2 DS,Tahoma,sans-serif;text-align:left;cursor:pointer}
.member-menu-arrow{margin-left:auto;transition:transform .15s}
.member-menu-open .member-menu-arrow{transform:rotate(180deg)}
.member-mobile .nav.nav-pills{display:none}
.member-mobile.member-menu-open .nav.nav-pills{display:flex;flex-direction:column;gap:6px;margin:-16px 0 30px;padding:10px;border:1px solid #d4e7f1;border-radius:16px;background:#fff;box-shadow:0 12px 24px #23547812}
.member-mobile .nav.nav-pills>li>a{justify-content:flex-start;text-align:left;font-size:34px;padding:16px 20px;min-height:72px}

/* Render the header logo directly at device resolution, outside the scaled canvas. */
body>.member-header{min-width:1240px;height:86px;min-height:86px;padding:0 max(24px,calc((100% - 1700px)/2 + 24px));gap:20px}
body>.member-header .member-wordmark{display:flex;align-items:center;width:160px;height:64px;border-radius:8px}
body>.member-header .member-wordmark img{width:160px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 4px #8bcdf056)}
.member-wordmark:focus:not(:focus-visible),.member-wordmark:active:not(:focus-visible){outline:none;box-shadow:none}
.member-wordmark:focus-visible{outline:3px solid #087fb0;outline-offset:4px}
body>.member-header.member-header-mobile{min-width:0;height:calc(112px * var(--member-fit,1));min-height:calc(112px * var(--member-fit,1));padding:0 calc(24px * var(--member-fit,1));gap:calc(20px * var(--member-fit,1))}
body>.member-header.member-header-mobile .member-wordmark,
body>.member-header.member-header-mobile .member-wordmark img{width:calc(180px * var(--member-fit,1));height:calc(86px * var(--member-fit,1))}
body>.member-header.member-header-mobile .back-to-game{font-size:calc(32px * var(--member-fit,1));padding:calc(12px * var(--member-fit,1)) calc(24px * var(--member-fit,1));border-radius:calc(28px * var(--member-fit,1))}

/* Desktop header dimensions match Home; keep the existing mobile layout. */
body>.member-header:not(.member-header-mobile) .member-wordmark{width:150px;height:59px;flex-shrink:0}
body>.member-header:not(.member-header-mobile) .member-wordmark img{width:150px;height:auto;filter:none}
body>.member-header:not(.member-header-mobile) .back-to-game{width:240px;height:52px;padding:0;display:flex;align-items:center;justify-content:center;gap:12px;align-self:flex-start;margin-top:16px;border-radius:28px;font:700 26px/1 DS,Arial,sans-serif}