/* Cổng chọn không gian — "Acid Holo" như CDrop: nền đen, đốm màu chanh / tím / hồng trôi mờ, lưới mờ, hạt nhiễu,
   dải chữ chạy, thẻ bo tròn có viền hologram xoay khi rê chuột */
:root{--bg:#08070d;--txt:#f6f4ff;--mut:rgba(246,244,255,.64);--dim:rgba(246,244,255,.38);--line:rgba(255,255,255,.11);
  --card:rgba(18,15,30,.62);--lime:#d4ff3d;--vio:#7a3cff;--pink:#ff4fd8;--cyan:#3dfcff;--bad:#ff5c7a;
  --ease:cubic-bezier(.2,.9,.25,1);--spring:cubic-bezier(.2,1.5,.35,1);--disp:"Unbounded","Be Vietnam Pro",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{min-height:100%;background:var(--bg);color:var(--txt);font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* nền */
.mesh{position:fixed;inset:0;z-index:0;overflow:hidden;filter:blur(70px) saturate(1.2)}
.mesh i{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.mesh .b1{width:46vw;height:46vw;left:-10vw;top:-14vw;background:var(--vio)}
.mesh .b2{width:38vw;height:38vw;right:-8vw;top:6vh;background:var(--pink);animation-duration:27s;animation-delay:-6s}
.mesh .b3{width:34vw;height:34vw;left:30vw;bottom:-18vw;background:var(--lime);opacity:.28;animation-duration:31s;animation-delay:-12s}
.mesh .b4{width:26vw;height:26vw;right:18vw;bottom:-6vw;background:var(--cyan);opacity:.3;animation-duration:25s;animation-delay:-3s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.15)}100%{transform:translate(-4vw,8vh) scale(.92)}}
.gridln{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(3%,3%)}}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.94)}}

/* ---------- đăng nhập ---------- */
.gate{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:16px;transition:opacity .5s,transform .5s var(--ease)}
.gate.off{opacity:0;transform:scale(.95);pointer-events:none}
.card-holo{position:relative;border-radius:32px;padding:2px;isolation:isolate}
.card-holo .holo,.world .holo{position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden}
.card-holo .holo::before,.world .holo::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,var(--lime),var(--cyan),var(--vio),var(--pink),var(--lime));animation:spin 5s linear infinite}
.login{width:min(390px,100%);animation:pop .8s var(--spring) both}
.login::after{content:"";position:absolute;inset:-18px;z-index:-2;border-radius:46px;background:conic-gradient(from 90deg,var(--lime),var(--vio),var(--pink),var(--lime));filter:blur(34px);opacity:.4;animation:spin 9s linear infinite reverse}
.login .in{border-radius:30px;background:rgba(12,10,22,.92);backdrop-filter:blur(20px);padding:34px 28px 24px;text-align:center}
.lg{width:64px;height:64px;border-radius:20px;box-shadow:0 10px 28px -8px rgba(122,60,255,.8)}
.login h1{margin-top:14px;font:900 30px/1.1 var(--disp);letter-spacing:-.02em;background:linear-gradient(92deg,var(--lime),#fff 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.login p{margin:6px 0 18px;color:var(--mut)}
.field{display:block;text-align:left;margin-bottom:12px}
.field span{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:5px}
.field input{width:100%;height:44px;padding:0 14px;border-radius:14px;border:0;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);outline:none;transition:box-shadow .2s}
.field input:focus{box-shadow:inset 0 0 0 2px var(--lime),0 0 20px -6px var(--lime)}
.go{width:100%;height:48px;margin-top:6px;border-radius:16px;font:800 15px var(--disp);color:#10110a;background:var(--lime);box-shadow:0 10px 28px -8px var(--lime);transition:transform .25s var(--spring)}
.go:hover{transform:translateY(-2px)}
.err{min-height:20px;margin-top:10px;color:var(--bad);font-weight:600}

/* ---------- sảnh ---------- */
.hub{position:relative;z-index:2;min-height:100vh;opacity:0;pointer-events:none;transition:opacity .5s}
.hub.on{opacity:1;pointer-events:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,3.4vw,40px) 12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:44px;height:44px;border-radius:14px;box-shadow:0 10px 28px -8px rgba(122,60,255,.8)}
.brand b{font:900 21px var(--disp);letter-spacing:-.02em;background:linear-gradient(92deg,var(--lime),#fff 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-size:12px;color:var(--mut)}
.ghost{height:38px;padding:0 16px;border-radius:13px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:13px;transition:transform .25s var(--spring),background .2s}
.ghost:hover{background:rgba(255,255,255,.15);transform:translateY(-2px) rotate(-2deg)}
.ticker{overflow:hidden;border-block:1px solid rgba(212,255,61,.25);background:linear-gradient(90deg,rgba(212,255,61,.1),rgba(255,79,216,.1));transform:rotate(-.6deg);margin:2px -10px 0}
.tk-in{display:flex;width:max-content;animation:tk 40s linear infinite;padding:8px 0}
.tk-in span{font:700 12px var(--disp);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:0 18px;color:var(--lime)}
.tk-in span:nth-child(even){color:#fff}
.tk-in span::after{content:"✦";margin-left:36px;color:var(--pink)}
@keyframes tk{to{transform:translateX(-50%)}}

.wrap{max-width:1240px;margin:0 auto;padding:30px clamp(16px,3.4vw,40px) 70px}
.h1{font:900 clamp(30px,4.6vw,58px)/1.05 var(--disp);letter-spacing:-.035em;margin-bottom:28px}
.h1 span{display:inline-block;animation:pop .8s var(--spring) both}
.h1 .w1{color:#fff}.h1 .w2{color:var(--lime);animation-delay:.08s}.h1 .w3{background:linear-gradient(92deg,var(--pink),var(--vio));-webkit-background-clip:text;background-clip:text;color:transparent;animation-delay:.16s}
.stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;perspective:1200px}

.world{position:relative;display:block;text-align:left;border-radius:26px;padding:2px;isolation:isolate;animation:pop .7s var(--spring) both;transform-style:preserve-3d;
  transition:transform .45s var(--ease)}
.stage .world:nth-child(2){animation-delay:.05s}.stage .world:nth-child(3){animation-delay:.1s}.stage .world:nth-child(4){animation-delay:.15s}.stage .world:nth-child(5){animation-delay:.2s}.stage .world:nth-child(6){animation-delay:.25s}
.world .holo{opacity:0;transition:opacity .35s}
.world::after{content:"";position:absolute;inset:-14px;z-index:-2;border-radius:40px;background:var(--c);filter:blur(30px);opacity:0;transition:opacity .4s}
.world .in{position:relative;display:block;height:100%;min-height:190px;border-radius:24px;padding:22px 22px 18px;background:var(--card);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.world .in::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.world:hover .holo,.world.sel .holo{opacity:1}
.world:hover::after,.world.sel::after{opacity:.35}
.world:hover .in::before{opacity:1}
.world:hover{transform:translateY(-6px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.emo{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:17px;font-size:26px;background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent);transition:transform .4s var(--spring)}
.world:hover .emo{transform:rotate(-10deg) scale(1.12)}
.world h3{margin-top:14px;font:800 22px/1.1 var(--disp);letter-spacing:-.02em;color:var(--c)}
.world .desc{margin-top:6px;color:var(--mut);font-size:13px;line-height:1.45}
.world .stat{display:inline-block;margin-top:14px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;font-weight:600;color:#fff}
.world kbd{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font:700 12px var(--disp);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.world .lock{position:absolute;bottom:16px;right:18px;font-size:12px;color:var(--bad);font-weight:600}
.world.locked{filter:grayscale(1);opacity:.4;cursor:not-allowed}
.world.locked:hover{transform:none}.world.locked .holo{opacity:0}
.world.chosen{transform:scale(1.04)!important}.world.chosen .holo{opacity:1}
.stage.picking .world:not(.chosen){opacity:.25;transform:scale(.97);transition:opacity .35s,transform .35s}

.drawer{margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);font-weight:700;font-size:13px;transition:transform .25s var(--spring),background .2s}
.chip small{font-weight:500;color:var(--mut)}
.chip:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.chip[aria-expanded="true"]{background:var(--lime);color:#10110a}.chip[aria-expanded="true"] small{color:rgba(16,17,10,.7)}
.chest-in{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.world.mini{width:240px}.world.mini .in{min-height:0;padding:16px 18px}.world.mini h3{margin-top:0;font-size:17px}.world.mini .stat{margin-top:10px}

.warp{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at 50% 50%,var(--w1,#fff),var(--w2,#d4ff3d) 35%,var(--w3,#08070d) 80%);clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .6s cubic-bezier(.76,0,.24,1)}
.warp.wave{clip-path:circle(150% at var(--x,50%) var(--y,50%))}

@media (max-width:1000px){.stage{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.stage{grid-template-columns:1fr}.world.mini{width:100%}.brand small{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}