/* chinocore — "Nexus" design layer. Loaded after site.css and overrides it. */
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(assets/manrope-0.ttf)}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(assets/manrope-1.ttf)}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(assets/manrope-2.ttf)}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(assets/manrope-3.ttf)}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(assets/manrope-4.ttf)}

:root{--w1:#b6a9ef;--w2:#6fd3ff;--bg:#07070c;--panel:#0f0f17b8;--panel2:#15151fcc;--line:#ffffff14;--text:#f1f0f7;--muted:#9a98aa;--accent:var(--w1);--display:Manrope,Inter,Arial,sans-serif;--glass:linear-gradient(160deg,#ffffff0d,#ffffff03 40%,#ffffff05);--ease:cubic-bezier(.2,.8,.2,1)}
html{background:var(--bg)}
body{background:transparent;font-size:14px}
::selection{background:var(--w1);color:#07070c}
#aurora{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(transparent 0,#07070c00 50%,#07070c 120%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px);mix-blend-mode:normal}
.cursor-aura{position:fixed;left:0;top:0;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--w1) 16%,transparent),transparent 65%);mix-blend-mode:screen;transition:background 1s}
#layout,footer,.site-header{position:relative;z-index:1}
h1,h2,h3,.brand{font-family:var(--display)}

/* ---------- header ---------- */
.site-header{height:74px;background:#07070c66;border-bottom:1px solid transparent;backdrop-filter:blur(18px) saturate(1.4);transition:background .4s,border-color .4s}
.scrolled .site-header{background:#07070cd0;border-bottom-color:var(--line)}
.site-header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--w1),var(--w2),transparent);opacity:.55;transition:background 1s}
.brand{font-size:20px;letter-spacing:-.8px;font-weight:800}
.brand img{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--w1) 70%,transparent));transition:filter 1s,transform .6s var(--ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}
.brand>span{color:var(--w1);font-weight:600;transition:color 1s}
.site-header nav a{font-size:12.5px;color:#a9a7b8;position:relative;padding:6px 0}
.site-header nav a:after{content:'';position:absolute;left:50%;right:50%;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--w1),var(--w2));transition:left .35s var(--ease),right .35s var(--ease);box-shadow:0 0 12px var(--w1)}
.site-header nav a:hover:after,.site-header nav a.active:after{left:0;right:0}

/* ---------- buttons ---------- */
.button{border-radius:999px;font-size:12.5px;min-height:44px;padding:12px 20px;gap:14px;border:1px solid #ffffff1f;background:#ffffff0a;backdrop-filter:blur(10px);font-weight:600;position:relative;isolation:isolate;overflow:hidden}
.button:hover{background:#ffffff14;border-color:color-mix(in srgb,var(--w1) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--w1) 10%,transparent),0 10px 30px -10px var(--w1)}
.button.light{background:linear-gradient(120deg,#fff,color-mix(in srgb,var(--w1) 35%,#fff) 55%,#fff);background-size:220% 100%;border-color:transparent;color:#0b0a12;box-shadow:0 0 30px -6px color-mix(in srgb,var(--w1) 80%,transparent),inset 0 -2px 0 #0000001a}
.button.light:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 0 0 4px color-mix(in srgb,var(--w1) 22%,transparent),0 14px 40px -8px var(--w1)}
.button.light:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#ffffffcc 50%,transparent 65%);transform:translateX(-120%);animation:shine 4.5s 1.5s infinite}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.button.subtle{background:none;border-color:transparent;backdrop-filter:none}
.button.subtle:hover{box-shadow:none;color:#fff}
.button.small{min-height:32px;padding:6px 14px;font-size:11px}
.button.ghost{background:transparent}
.button span{transition:transform .3s var(--ease)}
.button:hover span{transform:translate(2px,-2px)}

/* ---------- typography + common ---------- */
.eyebrow{font-size:11px;letter-spacing:3px;color:color-mix(in srgb,var(--w1) 75%,#fff);font-weight:700;transition:color 1s}
.eyebrow:before{content:'';display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px;box-shadow:0 0 8px currentColor}
h2{font-size:clamp(28px,3.2vw,42px);font-weight:700;letter-spacing:-1.6px}
.section-heading p:not(.eyebrow){font-size:14px}
.text-link{font-size:13px;color:color-mix(in srgb,var(--w1) 70%,#fff);font-weight:600}
.ico{width:1em;height:1em;display:block}
.invite-pill{font-size:11px;letter-spacing:1.5px;color:#d7d3ea;border:1px solid #ffffff1c;background:#ffffff08;padding:7px 14px;backdrop-filter:blur(8px)}
.invite-pill i{background:var(--w1);box-shadow:0 0 0 0 var(--w1);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--w1) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
[data-reveal]{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none;filter:none}
.stars{display:inline-flex;gap:3px;color:#ffd77a}
.stars svg{width:13px;height:13px;fill:currentColor;filter:drop-shadow(0 0 5px #ffcf6a88)}

/* ---------- glass surfaces ---------- */
.panel,.metric,.post-card,.product-card,.payment-summary,.wiki-card,.table-wrap,dialog,.glass-card{background:var(--glass),var(--panel);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 1px 0 #ffffff12,0 20px 50px -30px #000}
.panel{padding:28px}
.panel p,.row p,.muted{font-size:13px}
.panel h2{font-size:22px;letter-spacing:-.6px}
.metric{position:relative;overflow:hidden}
.metric:after{content:'';position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--w1) 30%,transparent),transparent 70%)}
.metric span{font-size:10.5px;letter-spacing:1.5px}
.metric strong{font-size:36px;font-family:var(--display);font-weight:700;background:linear-gradient(120deg,#fff,var(--w1));-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{font-size:10px;border-radius:999px;padding:4px 10px;backdrop-filter:blur(8px);font-weight:600;letter-spacing:.3px}
.badge.available{color:#9ff0c1;border-color:#6ee7a540;background:#0f2a1b88}
.badge.available .status-dot{background:#6ee7a5;box-shadow:0 0 8px #6ee7a5;animation:ping 2.2s infinite}
.badge.soon{color:#d4d0e6;border-color:#ffffff22;background:#0b0b12aa}
.badge.maintenance{color:#ffd58a;border-color:#ffc35a44;background:#2a200d88}
input,select,textarea{background:#0a0a12cc;border-color:#ffffff1a;border-radius:12px;font-size:13px;padding:13px 14px;transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--w1);box-shadow:0 0 0 4px color-mix(in srgb,var(--w1) 15%,transparent)}
label{font-size:12px}
.alert{border-radius:14px;font-size:13px;backdrop-filter:blur(10px)}
.alert.neutral{border-color:color-mix(in srgb,var(--w1) 30%,transparent);background:color-mix(in srgb,var(--w1) 7%,#0b0b12);color:#d9d5ee}
.empty{border-radius:18px;font-size:13px;background:#ffffff05}
table{font-size:12.5px}th{background:#ffffff06;font-size:10px;letter-spacing:1.2px}
.page-title{border-bottom:0;position:relative;padding-bottom:28px}
.page-title:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--w1),transparent 60%);opacity:.6}
.page-title h1{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-1.6px}
.page-title p{font-size:14px}
.row strong{font-size:14px}
.small-print{font-size:11px!important;color:#7d7a8e!important}
.back-link{font-size:13px;color:color-mix(in srgb,var(--w1) 70%,#fff)}
.loading{display:flex;flex-direction:column;align-items:center;gap:18px;letter-spacing:3px;font-size:11px;text-transform:uppercase;min-height:60vh;justify-content:center}
.loading:before{content:'';width:46px;height:46px;border-radius:50%;border:2px solid #ffffff14;border-top-color:var(--w1);border-right-color:var(--w2);animation:spin .9s linear infinite;box-shadow:0 0 30px -4px var(--w1)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- NEXUS hero ---------- */
.nexus{min-height:min(calc(100svh - 74px),820px);max-width:1320px;width:92%;margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:20px;padding:30px 0 10px}
.nexus-copy{position:relative;z-index:3}
.nexus-title{font-size:clamp(48px,6.4vw,96px);font-weight:800;letter-spacing:-.055em;line-height:.95;margin:26px 0 22px;display:flex;flex-direction:column}
.nexus-title span{animation:rise 1.1s var(--ease) both}
.nexus-title em{font-style:normal;background:linear-gradient(100deg,var(--w1),var(--w2) 50%,#fff 70%,var(--w1));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.1s .12s var(--ease) both,flowtext 7s linear infinite;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--w1) 45%,transparent));padding-bottom:.08em}
@keyframes rise{from{opacity:0;transform:translateY(40px) skewY(4deg);filter:blur(10px)}}
@keyframes flowtext{to{background-position:-200% 0}}
.nexus-lead{font-size:16px;line-height:1.75;color:#b5b2c6;max-width:440px;animation:rise 1.1s .22s var(--ease) both}
.nexus .intro-actions{justify-content:flex-start;margin:30px 0 38px;animation:rise 1.1s .3s var(--ease) both;flex-wrap:wrap}
.world-readout{max-width:420px;padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:var(--glass),#0b0b14a0;backdrop-filter:blur(14px);position:relative;overflow:hidden;animation:rise 1.1s .38s var(--ease) both}
.world-readout:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--w1),var(--w2));box-shadow:0 0 18px var(--w1)}
.world-readout.pulse:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--w1) 25%,transparent) 50%,transparent 70%);animation:sweep .9s var(--ease) forwards}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.wr-head{display:flex;align-items:center;gap:12px;font:600 10.5px/1 var(--font);letter-spacing:2px;color:#8f8ca2}
.wr-index b{color:var(--w1);font-size:13px}
.wr-line{flex:1;height:1px;background:linear-gradient(90deg,var(--w1),transparent)}
.world-readout strong{display:block;font:800 26px/1.15 var(--display);letter-spacing:-.8px;margin:14px 0 6px;min-height:30px}
.world-readout p{color:#aeabbf;font-size:14px;margin:0 0 12px}
.world-readout [data-w-chapter]{font-family:ui-monospace,Consolas,monospace}

.nexus-stage{--radius:290px;--px:0;--py:0;position:relative;height:min(78vh,700px);min-height:520px;perspective:1300px;perspective-origin:50% 40%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:0}
.nexus-stage:active{cursor:grabbing}
.core{position:absolute;left:50%;top:44%;width:520px;height:520px;transform:translate(-50%,-50%) rotateX(calc(var(--py)*-10deg)) rotateY(calc(var(--px)*14deg));transition:transform .6s var(--ease);pointer-events:none}
.core:before{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--w1) 45%,transparent),color-mix(in srgb,var(--w2) 14%,transparent) 45%,transparent 70%);filter:blur(30px);animation:breathe 5s ease-in-out infinite;transition:background 1s}
@keyframes breathe{50%{transform:scale(1.12);opacity:.75}}
.core-rings{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:color-mix(in srgb,var(--w1) 55%,transparent);transition:stroke 1s}
.core-rings circle{stroke-width:1;transform-origin:200px 200px}
.core-rings .r1{stroke-dasharray:2 10;animation:spin 60s linear infinite}
.core-rings .r2{stroke-dasharray:90 30 10 30;stroke-width:1.5;stroke:var(--w2);opacity:.6;animation:spin 26s linear infinite reverse}
.core-rings .r3{stroke-dasharray:4 4;opacity:.5;animation:spin 40s linear infinite}
.core-rings .ticks{stroke:#ffffff40;transform-origin:200px 200px;animation:spin 120s linear infinite}
.core-mark{position:absolute;left:50%;top:50%;width:84px;height:84px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 22px var(--w1)) drop-shadow(0 0 60px var(--w2));animation:float 6s ease-in-out infinite;opacity:.95}
@keyframes float{50%{transform:translate(-50%,calc(-50% - 10px))}}
.orbit{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(-7deg + var(--py)*-6deg)) rotateY(calc(var(--px)*10deg));transition:transform .8s var(--ease)}
.shard{position:absolute;left:50%;top:44%;width:236px;height:340px;transform-style:preserve-3d;will-change:transform,opacity;display:block;-webkit-user-drag:none}
.shard img{-webkit-user-drag:none;pointer-events:none}
.shard-face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;overflow:hidden;background:#0b0b12;border:1px solid color-mix(in srgb,var(--c1) 45%,transparent);box-shadow:0 30px 60px -20px #000,0 0 0 1px #ffffff10 inset;transition:box-shadow .6s,border-color .6s;display:block}
.shard-face>img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--ease)}
.shard-face:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#05050ae6 4%,#05050a40 40%,transparent 60%),linear-gradient(140deg,color-mix(in srgb,var(--c1) 30%,transparent),transparent 40%)}
.shard-sheen{position:absolute;inset:-50%;z-index:2;background:linear-gradient(115deg,transparent 40%,#ffffff2e 48%,transparent 56%);transform:translateX(-60%);transition:transform 1.2s var(--ease);pointer-events:none}
.shard.front .shard-sheen{transform:translateX(60%)}
.shard.front .shard-face{border-color:var(--c1);box-shadow:0 40px 80px -25px #000,0 0 50px -6px color-mix(in srgb,var(--c1) 70%,transparent),0 0 0 1px #ffffff22 inset}
.shard.front .shard-face>img{transform:scale(1)}
.shard-info{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;display:block}
.shard-info small{display:block;font:600 9.5px/1 ui-monospace,Consolas,monospace;letter-spacing:1.5px;color:#ffffffa0;margin-bottom:8px}
.shard-info b{font:800 26px/1 var(--display);letter-spacing:-.8px;text-shadow:0 0 24px var(--c1)}
.shard-glyph{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;padding:8px;border-radius:50%;background:#05050a80;border:1px solid color-mix(in srgb,var(--c1) 60%,transparent);color:var(--c1);backdrop-filter:blur(6px);font-size:16px;display:grid;place-items:center}
.shard-pop{position:absolute;pointer-events:none;transform:translateZ(70px);opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.shard.front .shard-pop{opacity:1;transform:translateZ(90px) translateY(-6px)}
.shard-pop.genshin{width:300%;left:-100%;top:-26%;height:auto;-webkit-mask-image:radial-gradient(ellipse 22% 48% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 22% 48% at 50% 50%,#000 55%,transparent 100%);filter:drop-shadow(0 0 20px #7fd8ff88)}
.shard-pop.arknights{width:70%;right:-16%;bottom:16%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);filter:drop-shadow(0 10px 25px #000)}

.stage-floor{position:absolute;left:50%;top:79%;width:780px;height:780px;transform:translate(-50%,-50%) rotateX(78deg);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--w1) 30%,transparent),transparent 62%),repeating-radial-gradient(circle,#ffffff14 0 1px,transparent 1px 38px);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%);pointer-events:none}
.orbit-dots{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:10px;z-index:200;padding:6px;border-radius:999px;background:#07070c99;border:1px solid var(--line);backdrop-filter:blur(10px)}
.orbit-dots button{width:40px;height:40px;border-radius:50%;border:1px solid transparent;background:none;color:#8d8aa0;display:grid;place-items:center;font-size:17px;transition:color .3s,background .3s,box-shadow .3s}
.orbit-dots button:hover{color:#fff}
.orbit-dots button.active{color:#07070c;background:var(--w1);box-shadow:0 0 22px var(--w1)}
.drag-hint{position:absolute;right:2%;top:8%;font:600 10px/1 ui-monospace,Consolas,monospace;letter-spacing:3px;color:#ffffff55;writing-mode:vertical-rl}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:#07070c80;backdrop-filter:blur(8px);padding:18px 0;margin:0 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:38px;width:max-content;animation:marquee 32s linear infinite}
.marquee span{font:800 clamp(30px,4vw,54px)/1 var(--display);letter-spacing:-1.5px;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px #ffffff40;white-space:nowrap;transition:color .4s}
.marquee span:nth-of-type(4n+1){color:transparent;-webkit-text-stroke:1px var(--w1)}
.marquee svg{width:26px;height:26px;fill:var(--w1);flex-shrink:0;filter:drop-shadow(0 0 10px var(--w1))}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- holo collection cards ---------- */
.holo-grid{grid-template-columns:repeat(4,1fr);gap:20px;perspective:1200px}
.holo-card{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;display:block;transform-style:preserve-3d;transition:opacity .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms),translate .9s var(--ease) var(--d,0ms)}
.holo-card[data-reveal]{transform:none;translate:0 40px}
.holo-card[data-reveal].in{translate:0 0}
.holo-inner{position:relative;border-radius:22px;overflow:hidden;background:#0b0b13;border:1px solid #ffffff17;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease),box-shadow .5s,border-color .5s;box-shadow:0 30px 60px -35px #000;min-height:100%}
.holo-card.tilting .holo-inner{transition:transform .08s linear,box-shadow .5s,border-color .5s}
.holo-card:hover .holo-inner{border-color:color-mix(in srgb,var(--c1) 70%,transparent);box-shadow:0 40px 70px -30px #000,0 0 45px -10px var(--c1)}
.holo-inner:before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--spin,0deg),var(--c1),transparent 30%,var(--c2) 50%,transparent 80%,var(--c1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;z-index:4;pointer-events:none;animation:conic 4s linear infinite}
.holo-card:hover .holo-inner:before{opacity:1}
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes conic{to{--spin:360deg}}
.holo-art{height:250px;position:relative;overflow:hidden}
.holo-art img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);transform:scale(1.05)}
.holo-card:hover .holo-art img{transform:scale(1.13)}
.holo-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b0b13 2%,transparent 55%)}
.holo-foil{position:absolute;inset:0;z-index:1;mix-blend-mode:color-dodge;opacity:0;transition:opacity .4s;background:repeating-linear-gradient(115deg,#ff8ad855 0%,#7fd8ff55 7%,#f3ff9a55 14%,#9a8aff55 21%,#ff8ad855 28%);background-size:300% 300%;background-position:var(--mx) var(--my)}
.holo-glare{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at var(--mx) var(--my),#ffffff55,transparent 45%);mix-blend-mode:overlay;opacity:0;transition:opacity .4s}
.holo-card:hover .holo-foil{opacity:.55}.holo-card:hover .holo-glare{opacity:1}
.holo-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.holo-no{font:600 10px/1 ui-monospace,Consolas,monospace;letter-spacing:1.5px;color:#ffffffb0;background:#05050a80;padding:5px 8px;border-radius:999px;backdrop-filter:blur(6px)}
.holo-body{padding:4px 20px 20px;position:relative;z-index:3;margin-top:-34px;transform:translateZ(30px)}
.holo-title{display:flex;align-items:center;gap:12px}
.holo-glyph{width:40px;height:40px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;font-size:19px;color:var(--c1);background:color-mix(in srgb,var(--c1) 12%,#0b0b13);border:1px solid color-mix(in srgb,var(--c1) 45%,transparent);box-shadow:0 0 22px -6px var(--c1)}
.holo-card .game-sub{font:600 10px/1 ui-monospace,Consolas,monospace;letter-spacing:1.5px;color:var(--c1);text-transform:uppercase}
.holo-card h3{font-size:18px;margin:6px 0 0;line-height:1.2}
.holo-card .stars{margin:14px 0 6px}
.holo-card .card-copy{font-size:13px;line-height:1.65;color:#a4a1b5;min-height:44px;margin:6px 0 18px}
.card-price{border-top-color:#ffffff12}
.card-price>div{font-size:11px;color:#8a879b}
.card-price strong{font:700 20px/1 var(--display);color:#fff}
.card-price .arrow{width:34px;height:34px;border-color:color-mix(in srgb,var(--c1,var(--w1)) 45%,transparent);color:var(--c1,var(--w1));transition:transform .4s var(--ease),background .4s,color .4s}
.holo-card:hover .arrow{background:var(--c1);color:#07070c;transform:rotate(45deg)}

.holo-art img[src*=nikke],.shard-face>img[src*=nikke]{scale:1.4;transform-origin:88% 12%}
.holo-art img[src*=endfield],.shard-face>img[src*=endfield]{scale:1.22;transform-origin:78% 30%}
.holo-art img[src*=arknights],.shard-face>img[src*=arknights]{scale:1.18;transform-origin:85% 40%}
.wh-bg[src*=nikke]{object-position:100% 20%!important}

/* ---------- access flow ---------- */
.flow{--p:0;list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.flow:before,.flow:after{content:'';position:absolute;left:28px;right:28px;top:28px;height:2px;border-radius:2px;background:#ffffff12}
.flow:after{right:auto;width:calc((100% - 56px)*var(--p));background:linear-gradient(90deg,var(--w1),var(--w2));box-shadow:0 0 14px var(--w1)}
.flow li{position:relative;z-index:1}
.flow-node{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:23px;color:var(--w1);background:var(--glass),#0d0d17;border:1px solid color-mix(in srgb,var(--w1) 40%,transparent);box-shadow:0 0 30px -10px var(--w1);margin-bottom:20px;transform:rotate(45deg);transition:color 1s,border-color 1s}
.flow-node .ico{transform:rotate(-45deg)}
.flow small{font:600 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:2px;color:#8b88a0}
.flow h3{font-size:19px;margin:10px 0 8px}
.flow p{font-size:13.5px;color:#a19eb3;line-height:1.7;margin:0;max-width:250px}

/* ---------- benefits ---------- */
.benefit-strip{border:0;gap:20px;margin:10px 0 30px}
.glass-card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;padding:30px;position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:opacity .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms),translate .9s var(--ease) var(--d,0ms),transform .5s var(--ease),border-color .4s}
.glass-card[data-reveal]{transform:perspective(900px);translate:0 30px}.glass-card[data-reveal].in{translate:0 0;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.glass-card:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--w1) 18%,transparent),transparent 50%);opacity:0;transition:opacity .4s}
.glass-card:hover{border-color:color-mix(in srgb,var(--w1) 45%,transparent)}.glass-card:hover:before{opacity:1}
.benefit-strip .icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:23px;color:var(--w1);background:color-mix(in srgb,var(--w1) 10%,transparent);border:1px solid color-mix(in srgb,var(--w1) 35%,transparent);margin-bottom:20px;box-shadow:0 0 30px -8px var(--w1)}
.benefit-strip h3{font-size:18px;margin-bottom:8px}
.benefit-strip p{font-size:13.5px;color:#a19eb3;max-width:none}

/* ---------- news + faq ---------- */
.home-bottom{gap:50px}
.post-card{padding:24px}.post-card .post-content{font-size:13.5px;color:#b0adbf}
.updates-empty{border-radius:16px;font-size:13px;background:#ffffff05;border-color:#ffffff1a}
.faq h2,.home-bottom h2{font-size:30px}
.faq details{border-bottom-color:var(--line);transition:background .3s}
.faq summary{font-size:15px;font-weight:600;padding:20px 4px}
.faq summary span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);color:var(--w1);transition:transform .4s var(--ease),background .3s;font-size:13px;flex-shrink:0}
.faq details[open] summary span{transform:rotate(45deg);background:color-mix(in srgb,var(--w1) 15%,transparent)}
.faq details p{font-size:14px;padding:0 4px 8px;animation:rise .5s var(--ease)}

/* ---------- game page ---------- */
.world-hero{--px:0;--py:0;position:relative;height:min(62vh,540px);min-height:380px;border-radius:28px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c1) 40%,transparent);box-shadow:0 0 80px -30px var(--c1),0 40px 80px -50px #000;margin-bottom:40px;isolation:isolate;animation:rise 1s var(--ease) both}
.wh-bg{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;z-index:-2;transform:translate(calc(var(--px)*-24px),calc(var(--py)*-18px)) scale(1.02);transition:transform .7s var(--ease)}
.world-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#06060bf2 0%,#06060ba0 38%,transparent 70%),linear-gradient(0deg,#06060bd0,transparent 50%),linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,transparent),transparent 40%)}
.world-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px)}
.wh-pop{position:absolute;pointer-events:none;z-index:1;transform:translate(calc(var(--px)*30px),calc(var(--py)*20px));transition:transform .7s var(--ease);animation:rise 1.3s .2s var(--ease) both}
.wh-pop.genshin{height:150%;right:-18%;top:-26%;-webkit-mask-image:radial-gradient(ellipse 30% 50% at 50% 52%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 30% 50% at 50% 52%,#000 50%,transparent 100%);filter:drop-shadow(0 0 30px #7fd8ff66)}
.wh-pop.arknights{height:92%;right:6%;bottom:0;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent);filter:drop-shadow(-20px 10px 40px #000)}
.wh-copy{position:absolute;left:44px;bottom:40px;max-width:520px;z-index:2}
.wh-glyph{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:26px;color:var(--c1);border:1px solid color-mix(in srgb,var(--c1) 55%,transparent);background:#05050a90;backdrop-filter:blur(8px);box-shadow:0 0 30px -6px var(--c1);margin-bottom:20px}
.wh-copy .eyebrow{color:var(--c1)}
.wh-copy h1{font-size:clamp(38px,5vw,68px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:12px 0 14px;text-shadow:0 0 50px color-mix(in srgb,var(--c1) 50%,transparent)}
.wh-copy>p:not(.eyebrow){font-size:17px;color:#d9d6e8;margin-bottom:16px}
.wh-copy .stars{margin-right:14px;vertical-align:middle}
.game-detail{gap:30px}
.game-detail>section:first-child h2{font-size:30px}
.detail-description{font-size:15px;color:#aeabbf}
.plan-options{gap:10px}
.plan-choice{border-radius:14px;padding:16px 18px;background:#0a0a12aa;border-color:#ffffff14;transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .3s}
.plan-choice:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--w1) 45%,transparent)}
.plan-choice.selected{border-color:var(--w1);background:color-mix(in srgb,var(--w1) 12%,#0a0a12);box-shadow:0 0 30px -10px var(--w1),inset 3px 0 0 var(--w1)}
.plan-choice span{font-size:13.5px;color:#d4d0e6}
.plan-choice strong{font:700 19px/1 var(--display)}
.checkout-total{font-size:13px}.checkout-total strong{font:700 22px/1 var(--display)}

/* ---------- portal ---------- */
#sidebar{background:#08080fcc;backdrop-filter:blur(18px);border-right-color:var(--line);top:74px;height:calc(100svh - 74px)}
.nav-group>p{font-size:10px;letter-spacing:2px}
.nav-group a{font-size:13px;border-radius:12px;padding:10px 12px;position:relative}
.nav-group a .nav-icon{width:18px;font-size:17px;color:#8582a0;transition:color .3s}
.nav-group a.active{background:linear-gradient(90deg,color-mix(in srgb,var(--w1) 18%,transparent),transparent);color:#fff}
.nav-group a.active:before{content:'';position:absolute;left:-15px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--w1);box-shadow:0 0 12px var(--w1)}
.nav-group a.active .nav-icon{color:var(--w1)}
.avatar{background:linear-gradient(135deg,var(--w1),var(--w2));color:#07070c;border-radius:12px;width:36px;height:36px}
.sidebar-user button{font-size:18px}
.sidebar-user strong{font-size:13px}
.tabs a{font-size:12.5px;border-radius:999px;padding:8px 14px}
.tabs a.active{background:color-mix(in srgb,var(--w1) 18%,transparent);color:#fff}

/* ---------- dialog / toast / footer ---------- */
dialog{border-radius:24px;padding:36px;background:var(--glass),#0c0c15ee;border-color:color-mix(in srgb,var(--w1) 30%,transparent);box-shadow:0 0 80px -20px color-mix(in srgb,var(--w1) 50%,transparent),0 40px 100px #000c}
dialog[open]{animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}}
dialog::backdrop{background:#04040acc;backdrop-filter:blur(12px)}
dialog h2{font-size:30px}
dialog>p:not(.eyebrow){font-size:14px}
.switch-auth{font-size:12px;color:color-mix(in srgb,var(--w1) 70%,#fff)}
#toast{border-radius:999px;background:#12121ccc;backdrop-filter:blur(12px);border-color:color-mix(in srgb,var(--w1) 45%,transparent);box-shadow:0 0 30px -8px var(--w1);font-size:13px}
footer{background:#06060acc;backdrop-filter:blur(14px);border-top-color:var(--line)}
footer p{font-size:12px}.footer-links{font-size:13px}.footer-links a:hover{color:var(--w1)}.footer-fine{font-size:10.5px;color:#6e6b80}

/* ---------- wiki touch-ups ---------- */
.wiki-sidebar{top:74px;max-height:calc(100svh - 74px)}
.wiki-nav-group a{font-size:13px;border-radius:10px}
.wiki-nav-group a:hover,.wiki-nav-group a[aria-current=page]{background:color-mix(in srgb,var(--w1) 12%,transparent)}
.wiki-hero h1 em{color:var(--w1)}
.wiki-search{border-radius:16px;background:#0b0b14b0;backdrop-filter:blur(10px)}
.wiki-search:focus-within{border-color:var(--w1);box-shadow:0 0 0 4px color-mix(in srgb,var(--w1) 14%,transparent)}
.wiki-card{border-radius:16px}.wiki-card:hover{border-color:color-mix(in srgb,var(--w1) 45%,transparent);background:color-mix(in srgb,var(--w1) 6%,#0f0f17)}
.wiki-card h3{font-size:14.5px}.wiki-card p{font-size:13px}
.wiki-card-icon{border-radius:10px;color:var(--w1);border-color:color-mix(in srgb,var(--w1) 35%,transparent);background:color-mix(in srgb,var(--w1) 10%,transparent)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 .nexus{grid-template-columns:1fr;text-align:center;padding-top:40px}
 .nexus-copy{display:flex;flex-direction:column;align-items:center}
 .nexus .intro-actions{justify-content:center}
 .world-readout{text-align:left;width:100%}
 .nexus-stage{--radius:250px;height:600px;width:100%}
 .holo-grid{grid-template-columns:repeat(2,1fr)}
 .flow{grid-template-columns:repeat(2,1fr);row-gap:40px}.flow:before,.flow:after{display:none}
}
@media(max-width:760px){
 .site-header{height:auto}
 .nexus{width:100%;padding:28px 16px 0}
 .nexus-title{font-size:clamp(44px,13vw,64px)}
 .nexus-lead{font-size:15px}
 .nexus-stage{--radius:170px;height:500px;min-height:0;perspective:900px}
 .core{width:360px;height:360px}
 .shard{width:180px;height:262px}
 .shard-info b{font-size:21px}
 .stage-floor{width:520px;height:520px}
 .drag-hint{display:none}
 .holo-grid,.flow,.benefit-strip{grid-template-columns:1fr}
 .holo-art{height:220px}
 .marquee{margin-top:20px}
 .world-hero{height:440px;border-radius:22px}
 .wh-copy{left:22px;right:22px;bottom:24px}
 .wh-copy>p:not(.eyebrow){font-size:15px}
 .wh-pop.genshin{right:-60%;opacity:.7}.wh-pop.arknights{right:-12%;height:70%;opacity:.55}
 .world-hero:before{background:linear-gradient(0deg,#06060bf5 10%,#06060b80 55%,transparent),linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,transparent),transparent 40%)}
 .button{font-size:12px}
 .nav-group a.active:before{display:none}
 #sidebar{top:auto;height:auto}
 .portal-mode #sidebar{background:#08080fcc}
}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;filter:none!important;translate:none!important}.marquee-track{animation:none}}

/* Discord link, legal pages, Genshin development section */
.badge.linked{color:#cfc7ff;border-color:#b6a9ef55;background:#1b1830aa}
.badge.linked .status-dot{background:#b6a9ef;box-shadow:0 0 8px #b6a9ef}
.badge.unlinked{color:#d4d0e6;border-color:#ffffff22;background:#0b0b12aa}
.discord-panel{margin-top:22px}
.discord-panel .row{align-items:flex-start;gap:16px}
.link-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 16px;padding:14px 16px;border:1px dashed #b6a9ef55;border-radius:14px;background:#b6a9ef0d}
.link-code span{flex-basis:100%;font-size:11px;letter-spacing:.6px;color:var(--muted)}
.link-code code{font-size:17px;font-weight:700;letter-spacing:1.5px;color:#fff;font-family:ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.auth-legal{font-size:11.5px;color:var(--muted);margin:0 0 12px}
.auth-legal a,.legal a{color:var(--w1)}
.legal{max-width:760px;margin:0 auto}
.legal-tabs{display:flex;gap:6px;margin-bottom:28px;padding:4px;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;background:#ffffff05}
.legal-tabs a{padding:8px 16px;border-radius:999px;font-size:12.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.legal-tabs a.active{background:#ffffff12;color:#fff}
.legal h1{font-size:clamp(32px,5vw,46px);letter-spacing:-1.4px;margin:8px 0 10px}
.legal-lead{font-size:16px;color:var(--muted);margin-bottom:34px}
.legal section{padding:22px 0;border-top:1px solid var(--line)}
.legal h2{font-size:17px;letter-spacing:-.3px;margin:0 0 8px}
.legal section p{font-size:14px;line-height:1.75;color:#cfcde0;margin:0}
.legal code{font-size:12.5px;padding:1px 6px;border-radius:6px;background:#ffffff10}
.dev-section{margin:64px 0 24px}
.dev-intro{display:flex;align-items:center;gap:22px;margin-bottom:26px}
.dev-mark{width:64px;height:64px;flex:none;padding:14px;border-radius:18px;border:1px solid #b6a9ef40;background:radial-gradient(circle at 30% 20%,#b6a9ef33,#0b0b14 70%);box-shadow:0 0 40px -10px #b6a9ef88;animation:devPulse 3.2s ease-in-out infinite}
.dev-intro h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-1px;margin:6px 0 8px}
.dev-intro p:not(.eyebrow){max-width:640px;color:var(--muted);font-size:14px;margin:0}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dev-clip{margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--glass),var(--panel)}
.dev-clip.featured{grid-column:1/-1}
.dev-clip video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:cover}
.dev-clip figcaption{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.dev-clip figcaption>span{font:700 12px var(--display);color:var(--w1);padding:4px 8px;border:1px solid #b6a9ef40;border-radius:8px}
.dev-clip strong{font-family:var(--display);font-size:15px}
.dev-clip p{margin:4px 0 0;font-size:13px;color:var(--muted)}
@keyframes devPulse{50%{box-shadow:0 0 60px -6px #b6a9efaa}}
@media(max-width:720px){.dev-grid{grid-template-columns:1fr}.dev-intro{flex-direction:column;align-items:flex-start}.discord-panel .row{flex-direction:column}}

/* ---------- dashboard tilt + glow (same hover language as .glass-card) ---------- */
.panel[data-tilt],.metric[data-tilt]{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),border-color .4s,box-shadow .4s}
.panel[data-tilt].tilting,.metric[data-tilt].tilting{transition:transform .08s linear,border-color .4s,box-shadow .4s}
.panel[data-tilt]:before,.metric[data-tilt]:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--w1) 20%,transparent),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.panel[data-tilt]:hover,.metric[data-tilt]:hover{border-color:color-mix(in srgb,var(--w1) 45%,transparent);box-shadow:inset 0 1px 0 #ffffff14,0 30px 60px -30px #000,0 0 45px -18px var(--w1)}
.panel[data-tilt]:hover:before,.metric[data-tilt]:hover:before{opacity:1}
.panel[data-tilt]>*,.metric[data-tilt]>*{position:relative}
.metric[data-tilt]{background:radial-gradient(120% 120% at 100% 0,color-mix(in srgb,var(--w1) 10%,transparent),transparent 60%),var(--glass),var(--panel)}
.metric[data-tilt] strong{font-family:var(--display);font-weight:800;background:linear-gradient(120deg,#fff,var(--w1) 70%,var(--w2));-webkit-background-clip:text;background-clip:text;color:transparent}
.dashboard-community[data-tilt]{background:linear-gradient(135deg,color-mix(in srgb,var(--w1) 12%,transparent),color-mix(in srgb,var(--w2) 6%,transparent)),var(--glass),var(--panel)}
@media(prefers-reduced-motion:reduce){.panel[data-tilt],.metric[data-tilt]{transform:none!important}}