/* Long Phụng: ink blue, brass and restrained warm highlights. */
:root { --lp-ink:#121e2d; --lp-panel:#192739; --lp-line:#314055; --lp-gold:#e2b872; --lp-muted:#a9b6c6; --accent:#b67a34; }
button { -webkit-tap-highlight-color:transparent; }
.hub-note br { display:block; }
button:focus-visible,a:focus-visible { outline:2px solid #cd963e; outline-offset:4px; }
.header { background:#111d2bef; backdrop-filter:blur(16px); border-bottom-color:#425063; color:#f3f1eb; }
.brand-icon { border:1px solid #b89458; background:#1a293b; color:#e3ba77; border-radius:8px; }
.brand small { color:#abb5c4; }.nav a,.nav button { color:#ccd3dd; }.nav a:hover,.nav button:hover { color:#ebc78c; }
.header-download,.header-cta,.rewards-done,.download-contact,.roadmap-events-button { min-height:40px; border-radius:7px; font-size:11px; font-weight:700; letter-spacing:.02em; transition:transform .18s,box-shadow .18s,background .18s; }
.header-cta,.rewards-done,.download-contact { color:#2f2415; background:linear-gradient(115deg,#f0d39f,#cc9850); border:1px solid #e7c186; box-shadow:inset 0 1px 0 #fff6,0 3px 8px #0c121c15; }
.header-download { color:#edd5ac; background:#1a293c; border:1px solid #536075; }
.header-download:hover,.header-cta:hover,.rewards-done:hover,.download-contact:hover { filter:none; transform:translateY(-2px); box-shadow:0 5px 16px #121c2930; }
.player-cta .header-download { background:#182638; color:#edd5ac; }
.menu-toggle { border-color:#546276; background:#1c2b3e; border-radius:6px; }.menu-toggle i { background:#e0c291; }
.motion-control { border-radius:6px; }
.launch-card { border-radius:9px; border-top-color:#243b54; background:#f4f6f8; }.launch-open { background:#fcf7ed; border-top-color:#c29957; }
.launch-card .countdown>span { border-radius:6px; }.launch-step { color:#8c7552; }.launch-card .schedule-status { border-radius:20px; }
.intro-grid { border:0; gap:12px; }.intro-grid .service-item { border:1px solid #e0e5eb; border-radius:9px; background:#fafbfd; }.intro-number { color:#af8545; }.service-detail a { color:#a47330; }
.video-card { border-radius:8px; }.video-card>i { background:#e7bd7a; color:#1b2737; box-shadow:0 0 0 7px #e7bd7a24; }
.server-hub { border:1px solid #344357; border-radius:14px; background:var(--lp-ink); overflow:hidden; box-shadow:0 14px 34px #17243719; color:#eff2f7; }
.hub-tabs { gap:8px; padding:13px; border-bottom:1px solid var(--lp-line); background:#0d1724; }
.hub-tabs button { display:flex; align-items:center; justify-content:center; gap:10px; flex:1; min-height:53px; padding:12px 14px; border:1px solid transparent; border-radius:8px; background:transparent; color:#aab7c8; font-size:13px; font-weight:650; transition:background .18s,color .18s,border-color .18s; }
.hub-tabs button[aria-selected=true] { border:1px solid #e0b674; color:#302517; background:linear-gradient(120deg,#f0d39f,#cea35e); box-shadow:inset 0 1px 0 #fff5,0 3px 12px #0003; }
.hub-tabs button:hover { color:#f0d5a5; background:#1e2c3e; border-color:#3f4d60; transform:none; box-shadow:none; filter:none; }
.hub-tabs button[aria-selected=true]:hover { background:linear-gradient(120deg,#f4dbaa,#dcaf66); color:#302517; border-color:#e0b674; }
.hub-tabs button:active { transform:none; filter:none; }
.hub-tabs button .tab-number { margin:0; padding:0; background:none; color:inherit; opacity:.55; font-size:11px; letter-spacing:.02em; }
.hub-tabs button .tab-count { margin:0; padding:2px 6px; border-radius:4px; background:#ffffff15; color:inherit; font-size:10px; }
.hub-tabs button[aria-selected=true] .tab-count { background:#5c431c19; }
.hub-panel { padding:30px; }.hub-heading { margin-bottom:25px; }.hub-heading>div>span { color:#caa76d; font-size:10px; letter-spacing:.15em; }.hub-heading h2 { color:#f4f6f9; font-size:27px; }.hub-note { color:#9baabe; font-size:11px; line-height:1.8; }
.event-grid { gap:17px; }.event-card { position:relative; display:flex; flex-direction:column; padding:22px 20px 20px; border:1px solid #364357; border-radius:10px; background:linear-gradient(145deg,#1e2e43,#172536); box-shadow:0 4px 12px #060e1920; transition:border-color .2s,box-shadow .2s; }
.event-card:hover { border-color:#997b4e; box-shadow:0 8px 22px #050c1626; }
.event-index { color:#9cabc0; font-size:10px; letter-spacing:.1em; }
.event-card .schedule-status { padding:4px 8px; font-size:10px; border-radius:20px; }
.event-card[data-state=upcoming] .schedule-status { background:#b7863920; color:#f0c78b; border-color:#c2975055; }
.event-card[data-state=active] { border-color:#558b79; }.event-card[data-state=active] .schedule-status { background:#378b6929; border-color:#70af8355; color:#a3dfc3; }
.event-card[data-state=ended] { background:#192432; border-color:#334153; }.event-card[data-state=ended] .schedule-status { background:#9baabe14; color:#a8b6c7; border-color:#68778b55; }
.event-card[data-state=unannounced] .schedule-status { background:#26364a; border-color:#405168; color:#aebed2; }
.event-card h3 { min-height:48px; font-size:18px; font-weight:650; letter-spacing:-.02em; color:#f1f3f6; margin:22px 0 19px; }
.event-dates { border-bottom-color:#354257; padding-bottom:14px; margin-bottom:15px; }.event-dates>div { font-size:11px; line-height:1.7; gap:5px; }.event-dates dt { color:#92a3b9; }.event-dates dd { color:#d8e0eb; font-weight:500; }
.event-card .countdown-label { color:#b0bed0; font-size:11px; margin-bottom:9px; }.event-card .countdown { gap:7px; }
.event-card .countdown>span { background:#111d2c; border:1px solid #39485e; border-radius:7px; padding:11px 2px 9px; box-shadow:inset 0 1px 0 #ffffff04; }
.event-card .countdown b { font-size:28px; color:#efd29c; font-weight:650; }.event-card .countdown small { color:#9aaac0; font-size:10px; margin-top:5px; }
.event-reward { color:#95a5ba; font-size:10px; margin:17px 0 0; line-height:1.7; }.event-note { color:#9fadc0; font-size:12px; line-height:1.9; }
.view-rewards { justify-content:space-between; gap:10px; min-height:44px; border:1px solid #e3bd7d; border-radius:7px; margin-top:18px; padding:9px 12px 9px 15px; color:#342719; font-size:12px; font-weight:750; background:linear-gradient(115deg,#efd09a,#cfa261); box-shadow:inset 0 1px 0 #fff5; }
.view-rewards .button-arrow { display:grid; place-items:center; width:25px; height:25px; border:1px solid #73501a33; border-radius:5px; font-size:17px; font-weight:400; }
.view-rewards:hover { background:linear-gradient(115deg,#ffe0ae,#e2b776); color:#271d10; border-color:#f5d398; box-shadow:0 5px 16px #0003; filter:none; }
.server-facts>div { border-color:#304054; }.server-facts dt { color:#a1b0c4; }.server-facts dd { color:#ecdcba; }.server-facts dd.unannounced { color:#8f9eb4; }
.server-notice { background:#1c2b3e; color:#b2c0d2; border:1px solid #34465d; border-radius:8px; }.server-notice button { color:#ebc68b; }
.roadmap-intro { display:flex; justify-content:space-between; align-items:flex-start; gap:25px; padding:25px 27px; margin:0 0 26px; background:linear-gradient(115deg,#29364a,#1c2b3d); border:1px solid #44526a; border-radius:10px; border-left:3px solid #d2ab6c; }
.roadmap-kicker { font-size:10px; letter-spacing:.15em; color:#d7b77e; }.roadmap-intro h3 { color:#f4f1e9; font-size:23px; font-weight:600; line-height:1.35; margin:9px 0; letter-spacing:-.025em; }.roadmap-intro p { color:#a8b9ce; font-size:13px; line-height:1.8; max-width:550px; margin:0; }
.roadmap-schedule-note { flex-shrink:0; padding:5px 9px; border:1px solid #bf95545c; color:#e7c694; background:#b58e3f15; border-radius:4px; font-size:9px; letter-spacing:.06em; }
.roadmap-list { list-style:none; margin:0; padding:0 0 0 15px; }.roadmap-item { position:relative; display:grid; grid-template-columns:195px 1fr; gap:23px; margin:0; padding:24px 18px 26px 35px; border-left:1px solid #46546a; }.roadmap-item:last-child { border-left-color:transparent; }.roadmap-marker { position:absolute; top:31px; left:-6px; width:11px; height:11px; border-radius:50%; background:#2b3d54; border:2px solid #7890aa; box-shadow:0 0 0 5px #121e2d; }
.roadmap-item[data-state=next] .roadmap-marker { border-color:#e3c38a; background:#e3c38a; box-shadow:0 0 0 5px #121e2d,0 0 0 7px #b9904a50; }
.roadmap-item[data-state=reached] .roadmap-marker { background:#74a18d; border-color:#a1c5b6; }
.roadmap-date { display:flex; flex-direction:column; gap:7px; }.roadmap-step { color:#8e9fb6; font-size:9px; letter-spacing:.14em; }.roadmap-date time { font-size:13px; font-weight:600; color:#e2c493; font-variant-numeric:tabular-nums; }.roadmap-state { font-size:10px; color:#9eabc0; }.roadmap-item[data-state=next] .roadmap-state { color:#e5bc79; }.roadmap-item[data-state=reached] .roadmap-state { color:#93c3ac; }
.roadmap-description { padding-bottom:22px; border-bottom:1px solid #2c3b4f; }.roadmap-item:last-child .roadmap-description { border:0; padding-bottom:0; }.roadmap-description h3 { color:#edf1f6; font-size:18px; font-weight:600; margin:0 0 8px; }.roadmap-description p { color:#a3b3c7; font-size:13px; line-height:1.9; max-width:600px; margin:0; }
.roadmap-footnote { color:#95a7be; font-size:12px; line-height:1.9; padding-top:17px; border-top:1px solid #334257; }
.roadmap-events-button { display:inline-flex; align-items:center; gap:22px; cursor:pointer; border:1px solid #8b795a; background:#253346; color:#e8c893; padding:12px 17px; font-size:12px; margin-top:7px; }.roadmap-events-button:hover { background:#33445b; filter:none; box-shadow:none; }
.rewards-dialog { border-radius:12px; border-color:#a48c62; }.rewards-dialog>header { background:linear-gradient(120deg,#142135,#2b3d53); }.rewards-dialog header p { color:#e4bf81; }.rewards-done { min-width:105px; }
.contact-dialog,.download-dialog { border-radius:10px; }.guide-dialog { border-radius:12px; }.modal-close,.contact-close,.download-close { border-radius:6px; }
@media(max-width:1100px) { .hub-tabs button { font-size:12px; padding-inline:10px; gap:7px; }.event-card { padding:20px 17px; }.hub-panel { padding:25px; } }
@media(max-width:900px) { .nav { background:#132135; border-bottom-color:#40516b; }.hub-tabs .tab-number { display:none; }.roadmap-item { grid-template-columns:155px 1fr; gap:18px; }.roadmap-intro { flex-wrap:wrap; }.roadmap-intro h3 { font-size:22px; } }
@media(max-width:600px) { .hub-tabs { padding:8px; gap:5px; }.hub-tabs button { padding:12px 5px; min-height:61px; font-size:11px; line-height:1.6; border-radius:6px; }.hub-tabs button>span { display:none!important; }.hub-panel { padding:24px 15px; }.hub-heading h2 { font-size:25px; }.hub-heading { margin-bottom:23px; gap:10px; }.hub-note { font-size:11px; }.event-grid { gap:16px; }.event-card { padding:23px 20px 21px; }.event-card h3 { min-height:0; font-size:20px; margin-top:22px; }.event-dates>div { font-size:12px; }.event-card .countdown b { font-size:29px; }.event-card .countdown small { font-size:11px; }.event-index { font-size:10px; }.event-reward { font-size:11px; }.view-rewards { font-size:13px; min-height:46px; }.roadmap-intro { padding:22px 19px; gap:15px; }.roadmap-intro h3 { font-size:22px; }.roadmap-item { grid-template-columns:1fr; gap:14px; padding:23px 0 20px 25px; }.roadmap-date { display:grid; grid-template-columns:1fr; gap:5px; }.roadmap-step { font-size:10px; }.roadmap-description h3 { font-size:18px; }.roadmap-description p { font-size:13px; }.roadmap-events-button { width:100%; justify-content:space-between; gap:10px; text-align:left; }.server-hub { border-radius:11px; }.server-facts>div { gap:10px; font-size:12px; } }

/* Full-page modern theme. Shared surfaces and controls keep every section consistent. */
:root { color-scheme:dark; --ink:#edf2fa; --muted:#a3b3c9; --line:#29384d; --soft:#182638; --accent:#e0b77a; }
body { background:#070d17; color:var(--ink); }
.page-shell { background:radial-gradient(ellipse at 5% 8%,#23405b55,transparent 32%),radial-gradient(ellipse at 100% 50%,#60492d20,transparent 35%),#0c1422; border-inline:1px solid #42526b66; box-shadow:0 0 90px #000b; }
.header { background:#101b2de8; border-bottom:1px solid #43526b66; }
.brand-icon { background:linear-gradient(145deg,#25364b,#131e30); box-shadow:inset 0 1px 0 #fff1; }
.nav a { position:relative; transition:color .18s; }.nav a::after { content:''; position:absolute; height:2px; bottom:15px; left:0; right:0; background:#e6bf82; transform:scaleX(0); transition:transform .2s; }.nav a:hover::after { transform:scaleX(1); }
.services { padding-top:28px; padding-bottom:40px; }
.launch-grid { margin-top:22px; gap:16px; }.launch-card,.launch-open { position:relative; border:1px solid #35465f; border-top:1px solid #6686ad; border-radius:14px; padding:25px; background:radial-gradient(ellipse at 100% 0%,#42699430,transparent 65%),linear-gradient(135deg,#1b2a3f,#121e2f); box-shadow:0 8px 22px #0002; }
.launch-open { border-top-color:#caa168; background:radial-gradient(ellipse at 100% 0%,#bd8f4230,transparent 65%),linear-gradient(135deg,#242b38,#172232); }
.launch-heading h2 { font-size:25px; color:#f5f6fa; }.launch-step { color:#9eb9db; }.launch-open .launch-step { color:#d9b578; }
.launch-date,.countdown-label { color:#a6b5ca; }.launch-date time { color:#e9d3ac; }.launch-card .countdown>span { background:#0c1626a6; border-color:#34465f; border-radius:9px; padding-block:12px; }.launch-card .countdown b { color:#e6ecf7; font-size:34px; }.launch-open .countdown b { color:#efd09b; }.launch-card .countdown small { color:#a2b3cd; }
.launch-card[data-state=upcoming] .schedule-status { color:#b9d3f4; border-color:#7496c347; background:#4975a21a; }.launch-open[data-state=upcoming] .schedule-status { color:#efca8e; border-color:#c2975055; background:#b7863920; }.launch-card[data-state=opened] .schedule-status { color:#a3dfc3; border-color:#70af8355; background:#378b6929; }
.timezone-note { color:#95a6bc; margin-block:17px 42px; }.provisional { background:#b58c3020; color:#e6c18a; border:1px solid #ae8f5040; border-radius:5px; }
.intro-heading { text-align:left; margin-bottom:22px; }.intro-heading>span,.mini-heading>span { color:#dcba83; }.intro-heading h2 { font-size:28px; font-weight:600; color:#edf2f9; }
.intro-grid { gap:14px; margin-top:0; grid-template-rows:none; }.intro-grid .service-item { align-items:flex-start; text-align:left; justify-content:flex-start; padding:24px; min-height:225px; border:1px solid #304058; border-radius:12px; background:linear-gradient(145deg,#1a293c,#121f30); transition:border-color .2s,transform .2s; }.intro-grid .service-item:hover { border-color:#807051; transform:translateY(-3px); }
.intro-number { display:grid; place-items:center; width:35px; height:35px; border:1px solid #88764d66; border-radius:10px; background:#b7955112; color:#e2bd80; margin-bottom:18px; font-size:12px; }.intro-grid .service-item h2 { color:#ecf1f9; font-size:18px; }.service-detail { flex:1; align-items:flex-start; }.intro-grid .service-detail p { color:#a5b5ca; line-height:1.8; margin-bottom:17px; }.service-detail a { margin-top:auto; display:inline-flex; align-items:center; min-height:35px; border:1px solid #56617a; border-radius:7px; padding:6px 11px; color:#e9c995; background:#243348; transition:background .2s,border-color .2s; }.service-detail a:hover { text-decoration:none; background:#35435b; border-color:#b69a67; }
.catalog { background:transparent; border-top:1px solid #31415a; padding-top:32px; }.catalog-top { padding-bottom:8px; }.mini-heading h2 { color:#f0f3f9; }.catalog-top .mini-heading p { color:#9caec5; }.video-card { border:1px solid #43516a; border-radius:12px; background:#142033; }.video-card>i { width:46px; height:46px; background:linear-gradient(135deg,#f2d5a0,#c5954e); box-shadow:0 0 0 6px #f0c57f20; }.video-card:hover { border-color:#c7a76f; box-shadow:0 8px 24px #0004; }
.server-hub { background:linear-gradient(145deg,#142136,#101b2b); box-shadow:0 12px 30px #0003; }.hub-tabs { background:#0c1625cc; }.hub-note br { display:block; }
.player-cta { padding:30px; margin-top:32px; border:1px solid #5e5744; border-radius:14px; background:radial-gradient(ellipse at 95% 50%,#b18a4c26,transparent 60%),#182639; }.player-cta h2 { color:#f1f2f6; font-size:25px; }.player-cta span { color:#d8b57d; }.catalog>footer { padding-block:20px; gap:15px; color:#91a2ba; text-transform:none; font-size:11px; letter-spacing:0; }
.header-download,.header-cta,.rewards-done,.download-contact,.roadmap-done { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:42px; padding:11px 18px; border-radius:9px; text-transform:none; font-size:12px; letter-spacing:0; font-weight:700; cursor:pointer; }
.header-download,.player-cta .header-download { background:linear-gradient(145deg,#273951,#1b293f); color:#dee7f5; border-color:#62718b; }.header-download:hover { background:#354965; border-color:#a8b9d4; color:#fff; }
.header-cta,.rewards-done,.download-contact,.roadmap-done { background:linear-gradient(120deg,#f1d4a1,#d3a460); color:#302518; border:1px solid #edc990; box-shadow:inset 0 1px 0 #fff5,0 4px 12px #0002; }
button:hover { filter:none; box-shadow:0 6px 18px #0003; }button:active { box-shadow:none; filter:none; transform:translateY(0); }button:focus-visible,a:focus-visible { outline:2px solid #f0c981; outline-offset:4px; box-shadow:none; }
.motion-control { background:#0b1627db; border-color:#ad925866; color:#edce9a; backdrop-filter:blur(12px); }
.roadmap-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:0; }
.roadmap-item,.roadmap-item:last-child { display:flex; flex-direction:column; gap:20px; padding:23px; border:1px solid #35465f; border-radius:12px; background:linear-gradient(140deg,#1d2e45,#152237); }.roadmap-item[data-state=next] { border-color:#b89961; background:radial-gradient(ellipse at 100% 0%,#bba26020,transparent 70%),#1c2b40; }.roadmap-marker { display:none; }.roadmap-date { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:10px; }.roadmap-state { border:1px solid #52627a80; border-radius:20px; padding:3px 8px; font-size:10px; }.roadmap-step { font-size:10px; letter-spacing:.1em; }.roadmap-item[data-state=next] .roadmap-state { border-color:#9e845d80; background:#c29c4420; }
.roadmap-description,.roadmap-item:last-child .roadmap-description { border:0; padding:0; flex:1; }.roadmap-description h3 { font-size:19px; line-height:1.5; margin-bottom:11px; }.roadmap-description time { color:#b2c5df; font-size:13px; }.view-roadmap { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:43px; padding:10px 14px; border:1px solid #697081; border-radius:8px; color:#efd0a0; background:linear-gradient(120deg,#344158,#27354b); font-size:12px; font-weight:650; cursor:pointer; }.view-roadmap>span:last-child { font-size:19px; line-height:1; }.view-roadmap:hover { background:#40516b; border-color:#d0b181; }.roadmap-item[data-state=next] .view-roadmap { color:#302518; border-color:#d8b477; background:linear-gradient(120deg,#f0d29b,#cfa163); }
.roadmap-dialog,.rewards-dialog,.download-dialog,.contact-dialog,.guide-dialog { color:#eaf0f8; background:#142237; border:1px solid #526078; border-radius:16px; box-shadow:0 30px 100px #0009; }
.roadmap-dialog { position:fixed; width:min(660px,calc(100% - 32px)); max-height:88svh; padding:0; overflow-y:auto; }.roadmap-dialog::backdrop,.rewards-dialog::backdrop,.download-dialog::backdrop { background:#060c18c9; backdrop-filter:blur(8px); }.roadmap-dialog>header { padding:35px 34px 26px; background:radial-gradient(ellipse at 100% 0%,#b99a5526,transparent 75%),linear-gradient(130deg,#263b57,#192940); border-bottom:1px solid #46536b; }.roadmap-dialog header>span { font-size:10px; letter-spacing:.15em; color:#e6c18b; }.roadmap-dialog h2 { font-size:29px; letter-spacing:-.035em; line-height:1.35; margin:12px 0; padding-right:12px; }.roadmap-dialog header p { display:inline-block; margin:0; padding:4px 10px; border:1px solid #bfac7550; background:#c2a86412; border-radius:20px; color:#e4c28f; font-size:11px; }
.roadmap-close,.rewards-close,.download-close,.contact-close,.modal-close { position:absolute; right:12px; top:12px; width:34px; height:34px; display:grid; place-items:center; border:1px solid #65728980; border-radius:9px; color:#dfe8f8; background:#18283da8; font-size:23px; line-height:1; cursor:pointer; }
.roadmap-detail-body { padding:26px 34px 30px; }.roadmap-detail-time { display:flex; flex-direction:column; gap:7px; padding:18px 20px; border:1px solid #3c506c; border-radius:10px; background:#0c1829; }.roadmap-detail-time>span { font-size:9px; color:#95aac7; letter-spacing:.12em; }.roadmap-detail-time time { color:#f0d2a0; font-size:21px; font-weight:650; }.roadmap-detail-time small { color:#a7b7cf; font-size:11px; }.roadmap-detail-body h3 { margin:25px 0 10px; font-size:17px; }.roadmap-detail-body>p { font-size:14px; line-height:1.9; color:#b6c6db; }.roadmap-detail-body ul { padding-left:20px; margin:18px 0; }.roadmap-detail-body li { padding:6px 0 6px 4px; font-size:13px; line-height:1.8; color:#b6c6db; }.roadmap-detail-body li::marker { color:#d5b278; }.roadmap-detail-body .roadmap-detail-note { font-size:12px; color:#99aac2; border-top:1px solid #35465f; padding-top:17px; }.roadmap-done { margin-top:8px; }
.rewards-schedule,.reward-row { border-color:#364860; }.rewards-schedule,.rewards-note,.reward-empty p,.contact-dialog>p,.download-dialog>p { color:#a9bad0; }.reward-row strong { color:#e2bb7d; }.rewards-dialog>header { border-bottom:1px solid #42536e; }.guide-dialog>header>span,.contact-dialog>span,.download-dialog>span { color:#daba83; }
@media(max-width:1080px) { .intro-grid .service-item { padding:22px; }.player-cta { padding:25px; }.roadmap-item { padding:20px; } }
@media(max-width:760px) { .page-shell { border:0; }.catalog { padding-inline:18px; }.services { width:calc(100% - 36px); }.intro-heading h2 { font-size:25px; }.catalog>footer { flex-direction:column; align-items:flex-start; gap:0; }.roadmap-list { grid-template-columns:1fr; }.roadmap-intro { margin-bottom:18px; }.player-cta { padding:23px; }.header { backdrop-filter:blur(18px); } }
@media(max-width:600px) { .services { padding-top:20px; }.launch-card { padding:20px; }.launch-heading h2 { font-size:23px; }.launch-card .countdown b { font-size:30px; }.intro-grid .service-item { min-height:210px; }.intro-grid .service-detail p { font-size:14px; }.service-detail a { min-height:40px; font-size:12px; }.roadmap-date { flex-direction:row; }.roadmap-item { padding:21px; gap:18px; }.roadmap-dialog>header { padding:32px 22px 23px; }.roadmap-dialog h2 { font-size:25px; }.roadmap-detail-body { padding:22px; }.roadmap-detail-time { padding:16px; }.roadmap-done { width:100%; }.player-cta h2 { font-size:23px; }.contact-dialog,.download-dialog { padding:35px 24px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; }.intro-grid .service-item:hover { transform:none; } }

/* In-game account registration instructions with the supplied screenshot. */
.contact-dialog.registration-guide { width:min(920px,calc(100vw - 32px)); max-height:90svh; overflow-y:auto; padding:32px; }
.registration-guide h2 { margin:12px 35px 12px 0; font-size:clamp(23px,3vw,32px); line-height:1.3; }
.registration-guide>p { max-width:760px; margin:0 0 20px; color:#b6c6dc; font-size:14px; line-height:1.85; }
.registration-guide>p strong { color:#e8d1ac; font-weight:600; }
.contact-dialog .registration-shot { display:block; min-height:0; margin:0; padding:0; overflow:hidden; border:1px solid #4c5f77; border-radius:9px; background:#000; }
.contact-dialog .registration-shot:hover { transform:none; filter:none; box-shadow:0 0 0 2px #e2bd7e38; border-color:#b59969; }
.registration-shot img { display:block; width:100%; height:auto; }
.registration-guide>.registration-image-note { margin:12px 0 0; color:#829ab7; text-align:center; font-size:11px; }
@media(max-width:600px) { .contact-modal:has(.registration-guide) { padding:12px; }.contact-dialog.registration-guide { width:100%; padding:28px 18px 20px; }.registration-guide>p { font-size:13px; }.registration-guide h2 { margin-right:18px; }.player-cta [data-register] { white-space:normal; text-align:center; } }

/* Community and download link pickers. */
.link-dialog { position:fixed; width:min(550px,calc(100% - 32px)); max-width:550px; max-height:88svh; overflow-y:auto; padding:34px; background:radial-gradient(ellipse at 100% 0%,#35567540,transparent 60%),#142237; color:#edf2fa; border:1px solid #52647d; border-radius:16px; box-shadow:0 30px 90px #0009; }
.link-dialog::backdrop { background:#050b17c9; backdrop-filter:blur(7px); }
.link-dialog>span { display:block; color:#d9b77e; font-size:10px; letter-spacing:.13em; font-weight:750; margin-right:25px; }
.link-dialog h2 { font-size:29px; line-height:1.3; letter-spacing:-.035em; margin:13px 20px 10px 0; }
.link-dialog>p { font-size:13px; line-height:1.8; color:#a8b9cf; margin:0 0 22px; }
.link-dialog-close { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:34px; height:34px; border:1px solid #65728980; border-radius:9px; color:#dfe8f8; background:#18283da8; font-size:23px; line-height:1; cursor:pointer; }
.link-options { display:grid; gap:11px; margin:24px 0 0; }
.link-option { display:flex; align-items:center; gap:12px; width:100%; min-height:66px; padding:11px 14px; border:1px solid #415572; border-radius:12px; background:linear-gradient(120deg,#22364e,#1a2b41); color:#e9eff9; text-align:left; text-decoration:none; transition:background .18s,border-color .18s,transform .18s; }
.link-option:hover { background:#2b415e; border-color:#82a8ce; box-shadow:0 5px 17px #0002; transform:translateY(-2px); }
.link-option:focus-visible { outline:2px solid #8acafa; outline-offset:3px; }
.provider-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:#ffffff; padding:5px; box-shadow:0 2px 6px #0002; flex-shrink:0; }
.provider-icon svg { display:block; width:24px; height:24px; max-width:24px; max-height:24px; }.provider-facebook,.provider-zalo,.provider-mega { background:#ffffff; }
.link-option-copy { display:flex; flex-direction:column; flex:1; gap:5px; min-width:0; }.link-option-copy strong { font-size:16px; font-weight:650; }.link-option-copy small { color:#9eb4cf; font-size:11px; line-height:1.6; }
.link-option-arrow { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border:1px solid #6082a34d; border-radius:7px; color:#afd5f5; font-size:19px; }
.link-option:disabled { opacity:1; cursor:default; }.link-option:disabled:hover { transform:none; background:linear-gradient(120deg,#22364e,#1a2b41); border-color:#415572; box-shadow:none; }
.link-dialog>.link-demo-note { margin:17px 0 0; padding:11px 13px; border:1px solid #aa915249; border-radius:7px; background:#b29b4910; color:#bba782; font-size:11px; line-height:1.8; }
.link-dialog .download-contact { margin-top:22px; padding:9px 20px; font-size:12px; }
.nav button[data-community-links]:focus-visible { outline:2px solid #edc990; outline-offset:3px; }
@media(max-width:600px) { .link-dialog { padding:32px 21px 24px; }.link-dialog h2 { font-size:25px; }.link-option { min-height:64px; gap:10px; padding:11px; }.provider-icon { width:34px; height:34px; padding:5px; }.provider-icon svg { width:24px; height:24px; }.link-option-copy strong { font-size:15px; }.link-option-copy small { font-size:10px; } }

.content-load-error { padding:12px 20px; margin:16px; border:1px solid #a48047; border-radius:8px; background:#3d3020; color:#efd1a1; font-size:13px; }

/* Site identity: MU Thần Ma. Long Phụng remains the server name. */
.header .brand { min-width:180px; }
.brand-logo { display:block; width:220px; height:60px; max-width:100%; object-fit:contain; object-position:left center; }
@media(max-width:1200px) { .brand-logo { width:190px; height:52px; } }
@media(max-width:600px) { .header .brand { min-width:0; } .brand-logo { width:184px; height:51px; } }

/* Lịch khai mở thu gọn: giữ đủ ngày giờ và bộ đếm, giảm khoảng trống. */
.launch-grid { margin-top:16px; gap:12px; }
.launch-card { padding:14px 18px; border-radius:12px; }
.launch-card .launch-heading { flex-direction:row; align-items:center; gap:8px; }
.launch-card .launch-step { font-size:9px; letter-spacing:.08em; }
.launch-card .launch-heading h2 { font-size:18px; margin:2px 0 0; }
.launch-card .schedule-status { padding:4px 7px; font-size:9px; white-space:nowrap; }
.launch-card .launch-date { margin:8px 0 6px; font-size:12px; }
.launch-card .launch-date time { display:inline; margin:0; }
.launch-card .countdown-label { font-size:10px; margin:0 0 5px; line-height:1.4; }
.launch-card .countdown { gap:6px; }
.launch-card .countdown>span { flex-direction:row; align-items:baseline; justify-content:center; gap:5px; padding:7px 3px; border-radius:6px; }
.launch-card .countdown b { font-size:24px; line-height:1.2; }
.launch-card .countdown small { margin:0; font-size:9px; }
.timezone-note { margin:9px 0 20px; font-size:10px; line-height:1.6; }
.timezone-note .provisional { display:inline-block; margin:0 6px 0 0; padding:2px 6px; }
.services .community-hub { margin-top:0; }
@media(max-width:600px) {
  .launch-grid { gap:10px; margin-top:12px; }
  .launch-card { padding:12px 14px; }
  .launch-card .launch-heading h2 { font-size:17px; }
  .launch-card .countdown b { font-size:22px; }
  .timezone-note { font-size:9px; margin-bottom:16px; }
}