@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;800;900&display=swap');
:root{--bg:#090c12;--panel:#111722;--panel2:#171f2c;--ink:#f5f7fb;--muted:#9aa7b8;--gold:#ffc83d;--red:#e62e38;--green:#2ad683;--line:rgba(255,255,255,.11);font-family:'Be Vietnam Pro','Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg)}a{color:inherit}button,input{font:inherit}.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:50;height:72px;display:flex;align-items:center;gap:28px;padding:0 max(20px,5vw);background:rgba(7,10,15,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.mini-brand{display:flex;align-items:center;gap:10px;font-weight:900;text-decoration:none;white-space:nowrap}.mini-brand img{width:50px;height:42px;object-fit:contain}.topbar nav{display:flex;align-items:center;gap:22px;margin-left:auto}.topbar nav a{color:#cbd3df;font-size:13px;font-weight:700;text-decoration:none}.topbar nav a:hover{color:var(--gold)}
.server-pill{display:flex;align-items:center;gap:8px;color:#cbd3df;font-size:12px;white-space:nowrap}.server-pill i{width:9px;height:9px;border-radius:50%;background:#7f8a99}.server-pill.is-online i{background:var(--green);box-shadow:0 0 0 4px rgba(42,214,131,.15)}.server-pill.is-offline i{background:var(--red)}.menu-button{display:none;color:#fff;background:transparent;border:0;font-size:24px}
.hero{position:relative;min-height:680px;display:grid;place-items:center;overflow:hidden;background:#07101d url('gameplay.png') center/cover no-repeat}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 36%,rgba(9,16,27,.15),rgba(5,8,13,.88) 72%),linear-gradient(0deg,#090c12 0,transparent 35%)}.hero-inner{position:relative;width:min(1040px,90vw);padding:90px 0 70px;text-align:center}.hero-logo{width:min(620px,88vw);max-height:390px;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.65))}.hero-copy{margin:0 auto 28px;color:#e5e9f0;font-size:clamp(17px,2.4vw,24px);font-weight:700;text-shadow:0 2px 10px #000}.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:0;border-radius:8px;font-weight:900;text-decoration:none;cursor:pointer}.primary{color:#111;background:linear-gradient(180deg,#ffe16d,var(--gold));box-shadow:0 7px 22px rgba(255,200,61,.22)}.primary:hover{transform:translateY(-1px);filter:brightness(1.06)}.ghost{color:#fff;background:rgba(10,15,22,.45);border:1px solid rgba(255,255,255,.45)}.ghost-dark{color:#17202d;border:1px solid #97a2b1}.muted{color:#8d98a7;background:#2a3340;cursor:not-allowed}.quick-stats{max-width:760px;display:grid;grid-template-columns:repeat(3,1fr);margin:48px auto 0;border:1px solid var(--line);border-radius:12px;background:rgba(8,12,18,.72);backdrop-filter:blur(8px)}.quick-stats span{padding:18px 12px;color:var(--muted);font-size:11px;border-right:1px solid var(--line)}.quick-stats span:last-child{border:0}.quick-stats b{display:block;margin-bottom:4px;color:#fff;font-size:15px}
.site-alert{position:fixed;z-index:80;top:88px;left:50%;transform:translateX(-50%);width:min(560px,90vw);padding:14px 18px;border-radius:9px;font-weight:700;box-shadow:0 12px 32px #0008}.site-alert.success{color:#063d27;background:#baf3d8}.site-alert.error{color:#6a1118;background:#ffd2d5}
.section{padding:90px max(20px,5vw);scroll-margin-top:70px}.section.dark{background:#0d121b}.section-heading{max-width:720px;margin:0 auto 46px;text-align:center}.section-heading>span,.story-panel>span,.support>div>span,.eyebrow{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:2px}.section h2{margin:10px 0 12px;font-size:clamp(30px,4vw,52px);line-height:1.08}.section-heading p,.story-panel p{color:var(--muted);line-height:1.7}.download-grid{width:min(1100px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:auto}.download-card{position:relative;min-height:320px;padding:34px;text-align:center;background:linear-gradient(145deg,#171f2c,#0f151e);border:1px solid var(--line);border-radius:16px}.download-card.featured{border-color:rgba(255,200,61,.65);box-shadow:0 0 0 1px rgba(255,200,61,.12),0 22px 50px #0006}.download-card small{position:absolute;top:15px;right:15px;color:var(--gold);font-size:10px;font-weight:900}.platform-icon{font-size:54px}.download-card h3{margin:18px 0 8px;font-size:25px}.download-card p{min-height:48px;color:var(--muted);font-size:13px}.download-card .button{margin-top:18px}.download-card.disabled{opacity:.72}.install-note{width:min(850px,100%);margin:24px auto 0;padding:16px 20px;color:#bdc7d4;background:#151c27;border-left:4px solid var(--gold);border-radius:6px;font-size:13px;line-height:1.6}
.split{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,520px);gap:70px;align-items:center;width:min(1180px,100%);margin:auto;background:#f2f0ea;color:#17202d}.section.split{max-width:none;width:auto;margin:0;padding-left:max(20px,calc((100vw - 1180px)/2));padding-right:max(20px,calc((100vw - 1180px)/2))}.story-panel ul{padding:0;list-style:none;line-height:2;color:#334050;font-weight:700}.auth-card,.account-card{padding:30px;background:#fff;border-radius:15px;box-shadow:0 22px 60px rgba(31,38,48,.14)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:20px;border-bottom:1px solid #dfe3e8}.auth-tabs button{padding:12px;color:#7c8795;background:none;border:0;border-bottom:3px solid transparent;font-weight:800;cursor:pointer}.auth-tabs button.active{color:#111;border-color:var(--red)}.auth-card form{display:grid;gap:14px}.auth-card label{display:grid;gap:7px;color:#4b5664;font-size:12px;font-weight:800}.auth-card input{min-height:46px;padding:10px 12px;border:1px solid #c9d0d8;border-radius:7px;outline:none}.auth-card input:focus{border-color:#36485f;box-shadow:0 0 0 3px #36485f19}.account-card h3{font-size:28px}.account-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0;border:1px solid #dfe3e8;border-radius:10px}.account-stats span{padding:16px 8px;text-align:center;color:#697585;font-size:11px;border-right:1px solid #dfe3e8}.account-stats span:last-child{border:0}.account-stats b{display:block;color:#17202d;font-size:17px}
.ranking-table{width:min(900px,100%);margin:auto;overflow:hidden;background:#141b26;border:1px solid var(--line);border-radius:14px}.ranking-row{display:grid;grid-template-columns:80px 1fr 130px 180px;align-items:center;min-height:62px;padding:0 24px;border-bottom:1px solid var(--line);font-size:13px}.ranking-row:last-child{border:0}.ranking-row.head{min-height:45px;color:#7f8da0;background:#10151e;font-size:10px;font-weight:900;text-transform:uppercase}.ranking-row em{display:block;color:var(--green);font-size:10px;font-style:normal}.rank{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#283140;font-weight:900}.rank-1{color:#111;background:var(--gold)}.rank-2{color:#111;background:#d3dae3}.rank-3{color:#111;background:#d99052}.empty-state{padding:42px;text-align:center;color:var(--muted)}
.parchment{color:#1b2430;background:#eee9dd}.milestone-grid{width:min(1100px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:auto}.milestone-grid article{padding:28px 20px;text-align:center;background:#fff;border:1px solid #ddd4c3;border-radius:12px}.milestone-grid b{color:var(--red);font-size:26px}.milestone-grid h3{margin:12px 0 6px}.milestone-grid p{margin:0;color:#7a7165;font-size:12px}.topup{background:#121824}.topup-grid{width:min(760px,100%);display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:auto}.topup-grid article{padding:34px;text-align:center;background:#181f2b;border:1px solid var(--line);border-radius:14px}.topup-grid article>div{font-size:42px}.topup-grid p{color:var(--muted)}.security-note{text-align:center!important;color:#f0bb54!important;font-size:12px}.support{display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;background:linear-gradient(120deg,#8d151d,#d62934)}.support h2{margin-bottom:6px}.support p{margin:0;color:#ffd9db}.support-actions{display:flex;gap:10px;flex-wrap:wrap}footer{min-height:120px;display:flex;align-items:center;gap:16px;padding:25px max(20px,5vw);background:#06090e;border-top:1px solid var(--line)}footer img{width:90px;height:70px;object-fit:contain}footer div{display:grid;gap:4px}footer span,footer small{color:#778393;font-size:11px}footer small{margin-left:auto}
@media(max-width:1100px) and (min-width:901px){.download-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.topbar nav{display:none;position:absolute;top:72px;left:0;right:0;padding:15px 20px;background:#0a0e15;border-bottom:1px solid var(--line)}.topbar nav.open{display:grid}.menu-button{display:block;margin-left:auto}.server-pill{display:none}.download-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.milestone-grid{grid-template-columns:1fr 1fr}.support{align-items:flex-start;flex-direction:column}.quick-stats{grid-template-columns:1fr}.quick-stats span{border-right:0;border-bottom:1px solid var(--line)}.ranking-row{grid-template-columns:55px 1fr 80px 110px;padding:0 12px}.hero{min-height:700px}}
@media(max-width:560px){.mini-brand span{display:none}.hero-inner{padding-top:55px}.hero-logo{width:100%}.hero-actions .button{width:100%}.section{padding-top:68px;padding-bottom:68px}.milestone-grid,.topup-grid{grid-template-columns:1fr}.ranking-row{grid-template-columns:48px 1fr 82px}.ranking-row span:last-child{display:none}.account-stats{grid-template-columns:1fr}.account-stats span{border-right:0;border-bottom:1px solid #dfe3e8}footer{align-items:flex-start;flex-wrap:wrap}footer small{width:100%;margin:0}}

/* Black edition visual polish */
:root{--cyan:#32c7ef}
.topbar{background:linear-gradient(180deg,rgba(5,9,17,.98),rgba(8,14,25,.92));border-bottom-color:rgba(255,214,90,.18)}
.hero:before{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse at 50% 35%,rgba(35,141,214,.28),transparent 42%),radial-gradient(ellipse at 80% 80%,rgba(239,53,67,.18),transparent 40%);mix-blend-mode:screen;animation:seaGlow 10s ease-in-out infinite alternate}
.hero-overlay{background:linear-gradient(180deg,rgba(3,7,14,.42),rgba(4,8,15,.58) 45%,#070b13 100%)}
.hero-logo{width:min(570px,86vw);filter:drop-shadow(0 16px 18px rgba(0,0,0,.8)) drop-shadow(0 0 28px rgba(255,214,90,.14));animation:logoFloat 6s ease-in-out infinite}
.hero-copy{font-weight:800;letter-spacing:.03em}
.button{min-height:50px;border-radius:10px;transition:transform .2s,filter .2s,box-shadow .2s}.primary{background:linear-gradient(180deg,#fff09b,var(--gold));box-shadow:0 8px 26px rgba(255,214,90,.28),inset 0 1px #fff8c9}.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,214,90,.4)}
.section.dark{background:radial-gradient(circle at 15% 10%,rgba(50,199,239,.06),transparent 28%),#0c1421}
.download-card{background:linear-gradient(145deg,rgba(30,46,70,.9),rgba(13,21,34,.96));border-color:rgba(125,166,206,.2);box-shadow:0 18px 40px #0004;transition:transform .25s,border-color .25s}.download-card:hover{transform:translateY(-5px);border-color:rgba(50,199,239,.55)}
@keyframes seaGlow{from{transform:scale(1) rotate(0deg);opacity:.65}to{transform:scale(1.08) rotate(2deg);opacity:1}}@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* One Piece-inspired pirate landing polish */
body{background:#060b16;background-image:radial-gradient(circle at 20% 0%,rgba(20,104,166,.22),transparent 30%),radial-gradient(circle at 90% 40%,rgba(180,38,47,.14),transparent 26%);overflow-x:hidden}
.topbar{height:80px;padding-inline:max(22px,6vw);box-shadow:0 8px 28px #0007}.mini-brand img{width:58px;height:52px;filter:drop-shadow(0 0 8px rgba(255,214,90,.25))}.mini-brand span{font-size:14px;letter-spacing:.08em}.topbar nav a{position:relative;padding:29px 0}.topbar nav a:after{content:"";position:absolute;left:0;right:100%;bottom:21px;height:2px;background:var(--gold);transition:right .25s}.topbar nav a:hover:after{right:0}
.hero{min-height:760px;background-position:center 42%;isolation:isolate}.hero:after{content:"";position:absolute;z-index:0;left:-5%;right:-5%;bottom:-2px;height:95px;background:#0c1421;clip-path:polygon(0 68%,8% 57%,17% 69%,27% 45%,37% 67%,48% 52%,60% 73%,71% 50%,83% 70%,92% 54%,100% 67%,100% 100%,0 100%);opacity:.98}.hero-inner{z-index:2;padding-top:82px}.hero-logo{width:min(610px,90vw);max-height:410px}.hero-copy{font-family:Georgia,serif;font-size:clamp(19px,2.5vw,28px);letter-spacing:.04em;color:#fff5d0}.hero-actions .primary{min-width:230px}.quick-stats{position:relative;z-index:3;max-width:820px;border-radius:16px;border-color:rgba(255,214,90,.3);background:linear-gradient(90deg,rgba(9,25,44,.82),rgba(35,17,25,.75));box-shadow:0 16px 45px #0007}
.section{position:relative}.section:before{content:"✦";position:absolute;top:32px;left:6%;color:rgba(255,214,90,.25);font-size:26px}.section:after{content:"✦";position:absolute;top:52px;right:8%;color:rgba(50,199,239,.2);font-size:18px}.section-heading h2{font-family:Georgia,serif;letter-spacing:.01em}.section-heading>span,.story-panel>span,.support>div>span{display:inline-flex;align-items:center;gap:10px}.section-heading>span:before,.section-heading>span:after{content:"";width:30px;height:1px;background:currentColor;opacity:.7}
.download-card,.topup-grid article{overflow:hidden}.download-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,214,90,.1),transparent 35%,rgba(50,199,239,.06));pointer-events:none}.download-card.featured:after{content:"☠";position:absolute;right:-12px;bottom:-27px;color:rgba(255,214,90,.1);font-size:120px;transform:rotate(-15deg)}.platform-icon{filter:drop-shadow(0 8px 8px #0006)}
.ranking-table{background:linear-gradient(145deg,#18283d,#0d1421);box-shadow:0 24px 60px #0006}.ranking-row{min-height:68px}.ranking-row:not(.head):hover{background:rgba(255,214,90,.06)}.rank{box-shadow:inset 0 0 0 1px #fff2}.parchment{background:linear-gradient(135deg,#f1e7cf,#d9c59c);box-shadow:inset 0 12px 55px rgba(104,65,22,.12)}.milestone-grid article{position:relative;overflow:hidden;box-shadow:0 10px 25px rgba(46,26,6,.12);transition:transform .25s,box-shadow .25s}.milestone-grid article:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 18px 32px rgba(46,26,6,.2)}
.support{position:relative;overflow:hidden}.support:after{content:"⚓";position:absolute;right:7%;bottom:-36px;color:rgba(255,255,255,.12);font-size:190px;transform:rotate(-12deg)}.support>*{position:relative;z-index:1}footer{background:linear-gradient(90deg,#050810,#10192a,#050810)}
@media(max-width:560px){.topbar{height:68px}.mini-brand img{width:52px;height:45px}.hero{min-height:720px}.hero-inner{padding-top:46px}.hero:after{height:65px}.section:before,.section:after{display:none}.topbar nav a{padding:10px 0}.topbar nav a:after{display:none}}

/* Layout refinement: cleaner game landing composition */
.section:before,.section:after{display:none}
.hero-inner{width:min(1180px,88vw);display:grid;grid-template-columns:minmax(360px,.85fr) minmax(420px,1.15fr);grid-template-rows:auto auto auto 1fr;column-gap:38px;align-items:center;text-align:left;padding:92px 0 110px}.hero-logo{grid-column:2;grid-row:1 / 5;width:min(620px,100%);max-height:500px;justify-self:center;order:2}.hero-copy{grid-column:1;grid-row:2;margin:14px 0 28px;max-width:500px}.hero-inner:before{content:'HẢI TẶC BLACK · SEASON 01';grid-column:1;grid-row:1;color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.16em}.hero-actions{grid-column:1;grid-row:3;justify-content:flex-start}.quick-stats{grid-column:1;grid-row:4;width:100%;margin:34px 0 0;grid-template-columns:1fr 1fr 1fr}.quick-stats span{padding:14px 10px}.hero:after{height:70px}
.section{padding-top:104px;padding-bottom:104px}.section-heading{max-width:1180px;margin:0 auto 38px;text-align:left}.section-heading>span:before,.section-heading>span:after{display:none}.section-heading h2{max-width:720px;font-size:clamp(32px,4vw,54px)}.section-heading p{max-width:590px}.download-grid{width:min(1180px,100%);gap:16px}.download-card{min-height:300px;padding:30px}.install-note{width:min(1180px,100%);margin-top:18px}.split{gap:96px}.ranking-table{width:min(1180px,100%)}.milestone-grid{width:min(1180px,100%)}.topup-grid{width:min(700px,100%)}
@media(max-width:900px){.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:70px 0 90px}.hero-inner:before{order:0}.hero-logo{order:1;width:min(560px,92vw);max-height:420px}.hero-copy{order:2;margin:8px auto 24px}.hero-actions{order:3;justify-content:center}.quick-stats{order:4;margin:30px 0 0}.section-heading{text-align:center}.section-heading p{margin-inline:auto}}
@media(max-width:560px){.hero-inner{width:90vw;padding-top:45px}.hero-logo{max-height:330px}.quick-stats{width:100%;grid-template-columns:1fr}.quick-stats span{border-right:0;border-bottom:1px solid var(--line)}.quick-stats span:last-child{border-bottom:0}.section{padding-top:72px;padding-bottom:72px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:34px}.download-card{min-height:270px}.split{gap:34px}}

/* Admin dashboard */
.admin-page{min-height:100vh;background:#0a0f18;color:#e9f0f8}.admin-page .site-header{height:72px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#101927;border-bottom:1px solid #25364b}.admin-page .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:1px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#ffd65a,#36c7ef);color:#08101b}.admin-page .site-header nav{display:flex;gap:22px}.admin-page .site-header nav a{color:#aebdd0;text-decoration:none}.admin-main{width:min(1400px,92vw);margin:36px auto 80px}.admin-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.admin-heading h1{margin:6px 0 0;font-size:clamp(28px,4vw,46px)}.section-kicker{color:#ffd65a;font-size:11px;font-weight:900;letter-spacing:2px}.search-form{display:flex;gap:10px}.search-form input,.login-panel input{min-height:44px;padding:0 14px;border:1px solid #31445d;border-radius:9px;background:#121e2e;color:#fff}.secondary-button,.primary-button,.table-action{border:0;border-radius:9px;padding:12px 18px;background:#2478e8;color:#fff;font-weight:800;cursor:pointer}.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.stats-band>div{padding:20px 22px;border:1px solid #263b54;border-radius:14px;background:linear-gradient(145deg,#142238,#0f1827);box-shadow:0 12px 28px #0004}.stats-band span{display:block;color:#9fb0c4;font-size:13px}.stats-band strong{display:block;margin-top:9px;color:#fff;font-size:30px}.account-table-wrap{overflow:auto;border:1px solid #263b54;border-radius:15px;background:#0f1826;box-shadow:0 18px 45px #0005}.account-table-wrap table{width:100%;border-collapse:collapse;min-width:980px}.account-table-wrap th{padding:15px;text-align:left;color:#8fa5bc;background:#152336;font-size:12px;text-transform:uppercase;letter-spacing:.6px}.account-table-wrap td{padding:16px 15px;border-top:1px solid #20334a;color:#d7e2ed;font-size:13px}.account-table-wrap tr:hover td{background:#142237}.account-table-wrap small{display:block;color:#8498ad;margin-top:4px}.type-badge,.status-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#17365d;color:#83c0ff;font-size:11px;font-weight:800}.type-badge.is-guest{background:#3d2d15;color:#ffd36a}.status-badge.is-online{background:#123e32;color:#63e0a7}.status-badge.is-locked{margin-left:5px;background:#48212a;color:#ff8e9d}.character-link{color:#65c8ef}.login-panel{width:min(460px,100%);margin:80px auto;padding:34px;border:1px solid #2b405a;border-radius:18px;background:linear-gradient(145deg,#142238,#0e1725);box-shadow:0 25px 70px #0006}.login-panel h1{margin:8px 0}.login-panel p{color:#9fb0c4}.login-panel label{display:block;margin:18px 0 7px;color:#c8d6e5;font-size:13px}.login-panel input{width:100%;box-sizing:border-box}.login-panel .primary-button{width:100%;margin-top:24px}.alert{padding:11px 14px;border-radius:8px;background:#54242b;color:#ffadb6}
@media(max-width:700px){.admin-heading{align-items:stretch;flex-direction:column}.stats-band{grid-template-columns:1fr 1fr}.search-form input{flex:1}.admin-page .site-header{padding:0 4vw}}
.wallet-cell b,.wallet-cell span{display:block}.wallet-cell b{color:#ffd65a}.wallet-cell span{margin-top:4px;color:#93a8bd;font-size:11px}.buff-details{margin-top:8px}.buff-details summary{display:inline-block;padding:6px 10px;border-radius:7px;background:#28466a;color:#9ed4ff;font-size:11px;font-weight:800;cursor:pointer}.buff-form{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px;padding:10px;border:1px solid #29415d;border-radius:9px;background:#111e2f}.buff-form label{color:#9fb2c7;font-size:10px}.buff-form input{width:100%;box-sizing:border-box;margin-top:3px;padding:6px;border:1px solid #36516e;border-radius:5px;background:#0b1420;color:#fff}.buff-button{grid-column:1/-1;padding:8px}
.payment-page{min-height:100vh;background:#0a0f18;color:#e9f0f8}.payment-page .site-header{height:72px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#101927;border-bottom:1px solid #25364b}.payment-page .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:1px}.payment-page .site-header nav{display:flex;gap:20px}.payment-page .site-header nav a{color:#b9c8d8;text-decoration:none}.payment-main{width:min(760px,92vw);margin:56px auto}.payment-card{padding:34px;border:1px solid #29415d;border-radius:18px;background:linear-gradient(145deg,#142238,#0e1725);box-shadow:0 24px 65px #0007}.payment-card h1{margin:8px 0;font-size:40px}.payment-subtitle{color:#9fb0c4}.package-form>p{margin:28px 0 14px}.package-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}.package-list input{position:absolute;opacity:0}.package-list span{display:block;padding:16px;border:1px solid #314a67;border-radius:10px;background:#101c2c;color:#fff;font-weight:800;cursor:pointer}.package-list small{display:block;margin-top:6px;color:#ffd65a;font-size:12px}.package-list input:checked+span{border-color:#4cccf3;background:#123450;box-shadow:0 0 0 1px #4cccf3}.payment-order{display:grid;grid-template-columns:1fr 260px;align-items:center;gap:25px;margin-top:25px;padding:20px;border:1px solid #34516e;border-radius:13px;background:#101b2a}.payment-order h2{margin:7px 0;color:#ffd65a;font-size:34px}.order-code{padding:10px;border:1px dashed #4b6f93;border-radius:7px;color:#c5e7ff}.payment-note{color:#9fb0c4;font-size:13px;line-height:1.6}.payment-qr{width:100%;border-radius:10px;background:#fff}.payment-card .secondary-button{display:inline-block;margin-top:18px;text-decoration:none}@media(max-width:620px){.package-list{grid-template-columns:1fr}.payment-order{grid-template-columns:1fr}.payment-qr{max-width:300px}.payment-page .site-header{padding:0 4vw}}

/* Separate page views: homepage stays focused */
.view-home #ranking,.view-home #milestones,.view-home #topup,.view-home #support{display:none}
.view-home #join{display:none}
.view-auth #home,.view-auth #download,.view-auth #ranking,.view-auth #milestones,.view-auth #topup,.view-auth #support{display:none}
.character-list{display:grid;gap:7px;margin:18px 0;color:#526073;font-size:12px}.character-list small{color:#a06a09;font-size:10px;font-weight:900;letter-spacing:.12em}.character-list span{padding:9px 10px;background:#f4f6f8;border:1px solid #e0e5ea;border-radius:7px}.empty-account{color:#758292;font-size:13px}
@media(max-width:560px){.account-card{padding:22px 18px}.account-card h3{margin:6px 0 18px;font-size:27px}.account-stats{grid-template-columns:repeat(3,1fr);margin:0 0 15px}.account-stats span{padding:12px 3px;border-right:1px solid #dfe3e8;border-bottom:0;font-size:9px}.account-stats span:last-child{border-right:0}.account-stats b{font-size:15px}.character-list{display:block;margin:12px 0 18px}.character-list small{display:block;margin-bottom:7px}.character-list span{display:block;padding:8px 9px;font-size:11px;line-height:1.45}}
.account-stats{grid-template-columns:repeat(5,1fr)}
@media(max-width:560px){.account-stats{grid-template-columns:repeat(3,1fr)}.account-stats span:nth-child(3){border-right:0}.account-stats span:nth-child(4),.account-stats span:nth-child(5){border-bottom:0}.account-stats span:nth-child(4){border-right:1px solid #dfe3e8}}
.hero{background-image:url('beach-bg.png');background-position:center center;background-size:cover}.hero-overlay{background:linear-gradient(90deg,rgba(5,18,33,.72),rgba(5,18,33,.22) 58%,rgba(5,18,33,.42)),linear-gradient(180deg,rgba(5,18,33,.08),rgba(5,18,33,.66))}
.view-download #home,.view-download #join,.view-download #ranking,.view-download #milestones,.view-download #topup,.view-download #support{display:none}
.view-ranking #home,.view-ranking #download,.view-ranking #join,.view-ranking #milestones,.view-ranking #topup,.view-ranking #support{display:none}
.view-milestones #home,.view-milestones #download,.view-milestones #join,.view-milestones #ranking,.view-milestones #topup,.view-milestones #support{display:none}
.view-topup #home,.view-topup #download,.view-topup #join,.view-topup #ranking,.view-topup #milestones,.view-topup #support{display:none}
.view-support #home,.view-support #download,.view-support #join,.view-support #ranking,.view-support #milestones,.view-support #topup{display:none}