*{box-sizing:border-box}html{margin:0;min-height:100%;overflow-y:auto}body{margin:0;min-height:100vh}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f4f5f8;color:#1b1d26}
#hd{position:fixed;top:0;left:0;right:0;height:52px;background:#fff;border-bottom:1px solid #e3e5ec;display:flex;align-items:center;padding:0 22px;z-index:10}
#logo{font-size:25px;font-weight:800;letter-spacing:-.5px;color:#1b1d26;text-decoration:none;cursor:pointer}#logo b{color:#7c3aed}
#menu{padding:84px 24px 40px;max-width:1240px;margin:0 auto}
#grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{position:relative;display:block;border-radius:22px;overflow:hidden;background:#dcdfe8;text-decoration:none;color:#fff;box-shadow:0 2px 0 #0001,0 8px 22px #0002;transition:transform .15s,box-shadow .15s;cursor:pointer}
.tile:hover{transform:translateY(-4px);box-shadow:0 2px 0 #0001,0 14px 30px #0003}
.tile img,.tile .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;background:linear-gradient(transparent,#000a);font-weight:700;font-size:18px}
.tile .cap small{display:block;font-weight:400;font-size:13px;opacity:.85;margin-top:2px}
.tile.soon{cursor:default;filter:grayscale(1);opacity:.7}.tile.soon:hover{transform:none;box-shadow:0 2px 0 #0001,0 8px 22px #0002}
.tile.soon .art{background:repeating-linear-gradient(45deg,#c9ccd8 0 14px,#d6d9e3 14px 28px)}
.tile .badge{position:absolute;top:12px;right:12px;background:#1b1d26;color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
#foot{text-align:center;color:#8a8ea0;margin-top:34px}
#stage{position:fixed;top:52px;left:0;right:0;bottom:0;background:#000}#stage iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:900px){#grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){#grid{grid-template-columns:1fr}#menu{padding:76px 14px 30px}}

#foot a{color:#7c3aed}
#legal{text-align:center;font-size:13px;color:#8a8ea0;margin:6px 0 18px}#legal a{color:#8a8ea0}#legal a:hover{color:#7c3aed}
#logo{display:flex;align-items:center;gap:10px}#logo img{height:34px;width:auto;display:block}

.tile:before{content:"";display:block;padding-top:56.25%}

/* ---- welcome / sign-in ---- */
body.wl{background:#17112e}body.wl #hd{background:#17112e;border-color:#ffffff1a}body.wl #logo{color:#fff}body.wl #logo b{color:#c4a8ff}
#welcome{min-height:100vh;padding:52px 0 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,520px);align-items:center;gap:clamp(24px,5vw,80px);padding-inline:clamp(18px,6vw,96px);background:radial-gradient(900px 600px at 20% 30%,#4b2a9a55,transparent 70%),#17112e;color:#fff}
#welcome[hidden],#menu[hidden]{display:none}
.wall .bn{display:block;width:min(100%,430px);height:auto;margin:0 0 clamp(10px,2vw,24px) -6px}
.wall h2{margin:0 0 clamp(28px,5vw,56px);font-size:clamp(38px,5.4vw,76px);line-height:.98;font-weight:900;letter-spacing:-.035em}
.fan{position:relative;height:clamp(200px,26vw,340px);max-width:560px}
.fan img{position:absolute;top:0;width:58%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:3px solid #fff;box-shadow:0 18px 40px #0008;transform-origin:50% 100%;opacity:0;animation:deal .7s cubic-bezier(.2,.9,.3,1.2) forwards}
.fan img:nth-child(1){left:0;--r:-8deg;--y:0px;animation-delay:.05s}
.fan img:nth-child(2){left:21%;--r:3deg;--y:22%;animation-delay:.2s}
.fan img:nth-child(3){left:42%;--r:11deg;--y:44%;animation-delay:.35s}
@keyframes deal{from{opacity:0;transform:translateY(60px) rotate(0)}to{opacity:1;transform:translateY(var(--y)) rotate(var(--r))}}
.card{background:#fff;color:#1b1d26;border-radius:26px;box-shadow:0 30px 70px #0007;padding:30px;width:100%}
.hi{font-size:30px;font-weight:900;letter-spacing:-.02em;margin:0 0 4px}.sub{margin:0 0 20px;color:#5b6073;font-size:16px;line-height:1.4}
.card[data-state=load]>section{display:none}.card section[hidden]{display:none}
.pass{position:relative;border:2px solid #1b1d26;border-radius:18px;background:#f6f1ff;margin:0 0 16px;overflow:hidden}
.pass.amber{background:#fff6d6}
.who{display:flex;align-items:center;gap:16px;padding:18px 18px 16px}
.av{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:900;border:3px solid #1b1d26}
.nm{flex:1;min-width:0}.nm label,.nm>b{display:block}.nm label{font-size:13px;font-weight:700;color:#6a6f84;margin-bottom:2px}
.nm>b{font-size:24px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nin{position:relative}.nin input{width:100%;font:inherit;font-size:26px;font-weight:900;letter-spacing:-.01em;color:#1b1d26;background:transparent;border:0;border-bottom:2px dashed #9b86d6;border-radius:0;padding:2px 30px 4px 0;outline:0;text-overflow:ellipsis}
.nin input:hover{border-bottom-color:#7c3aed}.nin input:focus{border-bottom:2px solid #7c3aed;background:#fff8}
.nin svg{position:absolute;right:2px;top:9px;width:20px;height:20px;color:#7c3aed;pointer-events:none}
#nameMsg{min-height:18px;margin:4px 0 0;font-size:13px;color:#c0392b}#nameMsg.ok{color:#1e8e4e}
.perf{position:relative;border-top:2px dashed #1b1d2655;margin:0 14px}
.perf:before,.perf:after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #1b1d26}
.perf:before{left:-27px}.perf:after{right:-27px}
#prog,#legacyList{list-style:none;margin:0;padding:0 18px 16px;display:grid;gap:7px}
#prog li,#legacyList li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14.5px}
#prog li span,#legacyList li span{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700}
#prog li img{width:44px;height:25px;object-fit:cover;border-radius:6px;border:1.5px solid #1b1d26;flex:none}
#prog li b,#legacyList li b{font-weight:700;color:#4b3a8f;text-align:right}.amber #legacyList li b{color:#7a5a00}
.until{margin:-6px 18px 14px;font-size:13px;font-weight:700;color:#7a5a00}
.play{display:block;width:100%;font:inherit;font-size:22px;font-weight:900;letter-spacing:-.01em;color:#1b1d26;background:#ffc933;border:2px solid #1b1d26;border-radius:16px;padding:15px 18px;cursor:pointer;box-shadow:0 5px 0 #1b1d26;transition:transform .08s,box-shadow .08s,background .12s}
.play:hover{background:#ffd34f}.play:active{transform:translateY(4px);box-shadow:0 1px 0 #1b1d26}
.gbtn{position:relative;display:block;width:100%;height:52px;margin:0 0 12px;border-radius:16px;overflow:hidden;cursor:pointer}
.gbtn .gv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;pointer-events:none;border-radius:16px;transition:background .12s,transform .08s}
.gbtn b{font-weight:800}.gbtn .g{width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat}
.gbtn.main .gv{background:#fff;border:2px solid #1b1d26;box-shadow:0 5px 0 #1b1d26;color:#1b1d26}.gbtn.main{overflow:visible;height:54px;margin-bottom:18px}
.gbtn.main:hover .gv{background:#f6f1ff}.gbtn.main:active .gv{transform:translateY(4px);box-shadow:0 1px 0 #1b1d26}
.gbtn.alt{margin-top:16px}.gbtn.alt .gv{border:2px solid #d9dbe6;color:#1b1d26;font-size:16px}.gbtn.alt:hover .gv{border-color:#b9a4f6;background:#faf8ff}
.gover{position:absolute;left:0;top:0;transform-origin:0 0;opacity:.01;z-index:2;overflow:hidden}
.fine{margin:-6px 0 0;text-align:center;font-size:13.5px;color:#6a6f84}
.or{display:flex;align-items:center;gap:12px;color:#8a8ea0;font-size:13px;margin:16px 0}.or:before,.or:after{content:"";flex:1;height:1px;background:#e1e3ee}
.ghostbtn{display:block;width:100%;font:inherit;font-size:17px;font-weight:800;color:#1b1d26;background:#fff;border:2px solid #d9dbe6;border-radius:16px;padding:11px 16px;cursor:pointer;transition:border-color .12s,background .12s}
.ghostbtn small{display:block;font-weight:400;font-size:13px;color:#6a6f84;margin-top:1px}.ghostbtn:hover{border-color:#b9a4f6;background:#faf8ff}
.mini{display:flex;justify-content:center;margin-top:8px}button.link{background:none;border:0;color:#6a6f84;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px}button.link:hover{color:#7c3aed}
#authMsg{min-height:1em;font-size:14px;margin:12px 0 0;color:#c0392b;text-align:center}#authMsg.ok{color:#198754}
.card :focus-visible{outline:3px solid #7c3aed;outline-offset:2px}
@media(max-width:860px){.wall .bn{width:min(70%,260px);margin-bottom:6px}#welcome{grid-template-columns:1fr;align-content:start;padding-top:72px;padding-bottom:30px;gap:22px}.wall h2{font-size:34px;margin-bottom:18px}.fan{height:clamp(150px,40vw,230px);max-width:380px;margin-bottom:14px}.card{padding:22px}}
@media(prefers-reduced-motion:reduce){.fan img{animation:none;opacity:1;transform:translateY(var(--y)) rotate(var(--r))}}

.until{margin-top:-6px}
@media(max-width:480px){#prog li,#legacyList li{flex-direction:column;align-items:flex-start;gap:2px}#prog li b,#legacyList li b{text-align:left;padding-left:54px;font-size:13.5px}#legacyList li b{padding-left:0}}

#hd{justify-content:space-between}
#pbtn{display:flex;align-items:center;gap:10px;border:1px solid #e3e5ec;background:#fff;border-radius:999px;padding:4px 6px 4px 12px;cursor:pointer;font:inherit;color:#1b1d26}
#pbtn:hover{border-color:#c4a8ff}#pbtn:focus-visible{outline:3px solid #7c3aed;outline-offset:2px}#pbtn[hidden]{display:none}
.pcoin{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px}.pcoin i,.pwal i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#f2b705 55%,#b07d00);box-shadow:inset 0 0 0 2px #b07d00;display:inline-block}
.pname{font-weight:700;font-size:14px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pav{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;background:#7c3aed;overflow:hidden}.pav img{width:100%;height:150%;object-fit:cover;object-position:top}
body.wl #pbtn{background:#ffffff12;border-color:#ffffff30;color:#fff}
#pm[hidden]{display:none}#pm{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}
.pbg{position:absolute;inset:0;background:#0b0a1a99}
.pcard{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:22px 22px 18px;box-shadow:0 20px 60px #0006;color:#1b1d26}
.pcard h2{margin:0 0 14px;font-size:24px;letter-spacing:-.4px}.pcard h3{margin:18px 0 10px;font-size:16px}
.px{position:absolute;top:10px;right:12px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#666}.px:hover{color:#000}
.prow label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:#555}.pin{display:flex;gap:8px}
.pin input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid #d6d9e4;border-radius:10px}.pin input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed22}.pin input:disabled{background:#f3f4f8;color:#777}
.pin button{font:inherit;font-weight:700;padding:0 18px;border:0;border-radius:10px;background:#7c3aed;color:#fff;cursor:pointer}.pin button:disabled{background:#c9c9d6;cursor:default}
.pnote{margin:6px 0 0;min-height:18px;font-size:13px;color:#b3261e}.pnote.ok{color:#177a3c}.pnote.dim{color:#666}
.pwal{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff8e1;border:1px solid #f2dc8a}.pwal i{width:30px;height:30px;flex:none}.pwal b{font-size:22px}.pwal small{display:block;color:#6a5a1a;font-size:12.5px;margin-top:2px}
#pSkins{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sk{border:2px solid #e3e5ec;border-radius:14px;overflow:hidden;background:#f7f8fc;display:flex;flex-direction:column}.sk.on{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed22}
.sk img{width:100%;aspect-ratio:176/216;object-fit:cover;display:block;background:#7cc3ee}.sk .sn{font-weight:700;padding:8px 10px 0}.sk button{margin:8px 10px 10px;font:inherit;font-weight:700;padding:8px;border:0;border-radius:9px;cursor:pointer;background:#1b1d26;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px}
.sk button.eq{background:#7c3aed}.sk button:disabled{background:#d9dbe6;color:#555;cursor:default}.sk button i{width:13px;height:13px;border-radius:50%;background:#f2b705;display:inline-block}
@media(max-width:560px){.pname{display:none}#hd{padding:0 12px}}
@media(prefers-reduced-motion:no-preference){.pcard{animation:pin .18s ease-out}@keyframes pin{from{transform:translateY(8px);opacity:0}}}