:root{
  --bg:#0d1530;--bg2:#16234b;--panel:rgba(14,24,54,.88);--panel2:#1b2a59;
  --text:#f7fbff;--muted:#b7c4e4;--cyan:#67e7ff;--cyan2:#18b8d8;--gold:#ffd75e;
  --green:#72e39b;--danger:#ff758d;--purple:#b996ff;--line:rgba(255,255,255,.12);
  --radius:24px;--shadow:0 18px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#294080 0,#121e43 32%,#0a1128 72%);color:var(--text);font-family:Nunito,system-ui,sans-serif}
button,input,select{font:inherit} button{cursor:pointer}.app-shell{min-height:100dvh;position:relative;overflow:hidden}
.app-shell:before,.app-shell:after{content:"";position:fixed;inset:auto;pointer-events:none;border-radius:50%;filter:blur(8px);opacity:.35}
.app-shell:before{width:280px;height:280px;background:#6e48ff;left:-90px;top:20%}.app-shell:after{width:340px;height:340px;background:#00c9ff;right:-140px;bottom:-120px}
.screen{min-height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));animation:screenIn .36s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.container{width:min(1060px,100%);margin:auto}.center{display:grid;place-items:center;text-align:center}.stack{display:grid;gap:14px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.muted{color:var(--muted)}
.brand{font-family:"Baloo 2",sans-serif;font-weight:800;letter-spacing:.02em}.logo{font-size:clamp(44px,12vw,96px);line-height:.85;text-shadow:0 4px 0 rgba(0,0,0,.16),0 0 24px rgba(103,231,255,.2)}.logo span{color:var(--gold)}
.tagline{font-size:clamp(16px,3vw,22px);color:#d8e4ff;margin:14px 0 28px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--cyan);font-size:12px}
.core-logo{width:124px;aspect-ratio:1;position:relative;margin:10px auto 22px;display:grid;place-items:center;animation:float 3s ease-in-out infinite}.core-logo:before{content:"";position:absolute;inset:12%;border-radius:34% 66% 57% 43%/46% 38% 62% 54%;background:linear-gradient(145deg,#dfffff,#63e7ff 45%,#775cff);box-shadow:0 0 18px #62e8ff,0 0 70px rgba(99,231,255,.45);transform:rotate(45deg);animation:coreSpin 8s linear infinite}.core-logo:after{content:"×";font:800 50px "Baloo 2";position:relative;color:#10224e;text-shadow:0 1px 0 #fff}.orbit{position:absolute;inset:3%;border:2px solid rgba(255,215,94,.65);border-radius:50%;transform:rotate(22deg)}.orbit:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gold);top:8px;left:14px;box-shadow:0 0 16px var(--gold)}
@keyframes coreSpin{to{transform:rotate(405deg)}}@keyframes float{50%{transform:translateY(-8px)}}
.card{background:linear-gradient(180deg,rgba(31,47,97,.94),rgba(17,28,65,.94));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:clamp(18px,4vw,28px);backdrop-filter:blur(12px)}
.card h1,.card h2,.card h3{margin-top:0}.narrow{width:min(520px,100%)}
.btn{border:0;border-radius:18px;padding:14px 18px;font-weight:800;min-height:54px;transition:.18s transform,.18s filter,.18s box-shadow;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,#7cf0ff,#31cce9);color:#0c2542;box-shadow:0 8px 0 #168ca8,0 13px 24px rgba(24,184,216,.25)}.btn-gold{background:linear-gradient(180deg,#ffe988,#ffc94f);color:#3c2b00;box-shadow:0 8px 0 #b88116}.btn-ghost{background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--line)}.btn-block{width:100%}.btn-small{min-height:40px;padding:9px 13px;border-radius:13px;font-size:14px}
.field{display:grid;gap:7px;text-align:left}.field label{font-weight:800;color:#dbe7ff}.input{width:100%;border:1px solid rgba(255,255,255,.15);background:#0d1735;color:var(--text);border-radius:15px;min-height:52px;padding:12px 14px;outline:none}.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(103,231,255,.14)}.input::placeholder{color:#7180a9}.help{font-size:13px;color:var(--muted)}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.choice{border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--text);padding:18px 14px;border-radius:20px;text-align:center;min-height:130px;display:grid;align-content:center;gap:6px}.choice .icon{font-size:38px}.choice strong{font-size:18px}.choice:hover{border-color:rgba(103,231,255,.6);background:rgba(103,231,255,.08)}
.topbar{display:flex;justify-content:space-between;align-items:center;width:min(1060px,100%);margin:0 auto 16px;gap:10px}.top-title{font:800 22px "Baloo 2"}.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:999px;padding:7px 11px;font-size:13px;font-weight:800}
.avatar-stage{height:248px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 50% 28%,rgba(103,231,255,.22),transparent 30%),linear-gradient(#233967,#132554);border:1px solid var(--line)}.avatar-stage:before{content:"";position:absolute;width:190px;height:38px;border-radius:50%;background:rgba(0,0,0,.25);bottom:28px;filter:blur(5px)}
.avatar{position:relative;width:150px;height:205px;animation:avatarIdle 2.5s ease-in-out infinite;filter:drop-shadow(0 16px 12px rgba(0,0,0,.3))}.av-head{position:absolute;width:82px;height:86px;border-radius:47% 47% 44% 44%;background:var(--skin,#e9b58e);left:34px;top:15px;z-index:4}.av-hair{position:absolute;width:92px;height:64px;left:29px;top:6px;border-radius:48px 48px 23px 23px;background:var(--hair,#33253e);z-index:5}.av-hair.hijab{width:98px;height:112px;left:26px;top:4px;border-radius:49px 49px 34px 34px;background:var(--hair,#7b5fe7);z-index:3}.av-hair.hijab:after{content:"";position:absolute;width:70px;height:58px;left:14px;top:14px;border-radius:50%;background:var(--skin,#e9b58e)}.av-face{position:absolute;left:51px;top:49px;z-index:7;width:48px;height:22px}.av-face:before,.av-face:after{content:"";position:absolute;width:7px;height:9px;border-radius:50%;background:#17223c;top:0}.av-face:before{left:3px}.av-face:after{right:3px}.av-smile{position:absolute;z-index:8;width:22px;height:9px;border-bottom:3px solid #8d4a46;border-radius:50%;left:64px;top:68px}.av-body{position:absolute;width:96px;height:102px;border-radius:28px 28px 20px 20px;background:var(--shirt,#48cae4);left:27px;top:89px;z-index:2}.av-body:before{content:"";position:absolute;width:110px;height:30px;border-radius:20px;background:inherit;left:-7px;top:10px;z-index:-1}.av-leg{position:absolute;width:34px;height:65px;background:var(--pants,#2b356c);bottom:0;border-radius:12px;z-index:1}.av-leg.l{left:39px;transform:rotate(2deg)}.av-leg.r{right:39px;transform:rotate(-2deg)}
@keyframes avatarIdle{50%{transform:translateY(-5px) rotate(.4deg)}}
.avatar-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{border:2px solid transparent;border-radius:15px;min-height:46px;background:var(--sw);position:relative}.swatch.selected{border-color:white;box-shadow:0 0 0 3px rgba(103,231,255,.3)}
.year-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.year-btn{border:1px solid var(--line);background:#101b3b;color:#dce7ff;border-radius:13px;padding:10px 5px;font-weight:800}.year-btn.selected{background:var(--cyan);color:#102743;border-color:var(--cyan)}
.prologue{position:relative;min-height:520px;overflow:hidden;border-radius:26px;background:linear-gradient(#243f7d 0 45%,#193b51 45% 64%,#173548 64%);border:1px solid var(--line);box-shadow:var(--shadow)}.sky-star{position:absolute;width:3px;height:3px;background:white;border-radius:50%;box-shadow:140px 40px white,260px 20px #bdefff,420px 80px white,610px 38px #fff6b5,780px 102px white,910px 44px #bdefff;opacity:.65}.mount{position:absolute;left:-5%;right:-5%;bottom:30%;height:42%;background:linear-gradient(135deg,transparent 0 25%,#182951 25% 45%,transparent 45% 52%,#203264 52% 72%,transparent 72%);opacity:.8}.nexus-core{position:absolute;left:50%;top:28%;width:108px;height:108px;transform:translate(-50%,-50%) rotate(45deg);border-radius:28px;background:linear-gradient(145deg,#efffff,#67e7ff,#775cff);box-shadow:0 0 50px #67e7ff;transition:.7s}.nexus-core.shatter{animation:shake .45s linear 2;filter:saturate(.3);box-shadow:0 0 70px var(--danger)}.nexus-core.shatter:before,.nexus-core.shatter:after{content:"";position:absolute;background:#0e1836;width:7px;height:118px;left:50%;top:-6px;transform:rotate(18deg)}.nexus-core.shatter:after{transform:rotate(83deg);height:110px;top:0}.prologue-text{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(680px,92%);background:rgba(7,13,31,.82);border:1px solid var(--line);padding:18px;border-radius:20px;text-align:center;backdrop-filter:blur(8px)}
@keyframes shake{0%,100%{transform:translate(-50%,-50%) rotate(45deg)}25%{transform:translate(calc(-50% - 7px),-50%) rotate(43deg)}75%{transform:translate(calc(-50% + 7px),-50%) rotate(47deg)}}
.world{position:relative;min-height:630px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:linear-gradient(#2e5492 0 40%,#204f73 40% 52%,#163e45 52% 100%);box-shadow:var(--shadow)}.world:before{content:"";position:absolute;inset:45% 0 0;background:radial-gradient(ellipse at 50% 100%,#285c4e,#173e3b 68%);opacity:.95}.world-title{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-start;z-index:4}.realms{position:absolute;inset:96px 15px 20px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:14px;z-index:3}.realm{position:relative;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(25,38,75,.75),rgba(8,15,37,.82));border-radius:22px;color:white;padding:11px;display:grid;place-items:center;text-align:center;min-height:130px;overflow:hidden;transition:.2s}.realm:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--realmGlow,#67e7ff);filter:blur(28px);opacity:.28;top:30px}.realm:hover{transform:translateY(-3px);border-color:rgba(103,231,255,.55)}.realm .num{font:800 36px "Baloo 2";position:relative}.realm .name{font-size:12px;font-weight:800;color:#d5e3ff;position:relative}.realm .status{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);position:relative}.realm.featured{border-color:rgba(114,227,155,.8);box-shadow:0 0 0 2px rgba(114,227,155,.15),inset 0 0 35px rgba(114,227,155,.09)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#091229;color:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:12px 16px;z-index:99;max-width:min(520px,90vw);animation:toastIn .25s ease}.toast.error{border-color:rgba(255,117,141,.6)}@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.loading-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;animation:dot 1s infinite}.loading-dot:nth-child(2){animation-delay:.15s}.loading-dot:nth-child(3){animation-delay:.3s}@keyframes dot{50%{opacity:.3;transform:translateY(-3px)}}
@media(max-width:720px){.choice-grid{grid-template-columns:1fr}.realms{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inset-top:100px;gap:8px}.realm{min-height:104px;padding:7px}.realm .num{font-size:28px}.realm .name{font-size:10px}.world{min-height:710px}.avatar-options{grid-template-columns:repeat(4,1fr)}.year-grid{grid-template-columns:repeat(5,1fr)}.screen{padding-left:13px;padding-right:13px}}
@media(max-width:430px){.realms{inset:105px 8px 15px;gap:7px}.realm{border-radius:16px}.world-title{left:13px;right:13px}.logo{font-size:53px}.card{border-radius:20px}.btn{min-height:51px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}