:root{--pink:#ff2d95;--orange:#ff8a1f;--ink:#0b0610;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;overflow-x:hidden;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;color:#fff}
#stage{position:relative;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden}
.bg{position:absolute;inset:0;background:url(assets/lobby.jpg) center/cover;filter:brightness(.45) saturate(1.2)}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,16,.85) 0%,rgba(11,6,16,.3) 30%,rgba(11,6,16,.6) 100%)}
header{position:relative;text-align:center;padding-top:60px;height:350px}
.title{font-size:120px;letter-spacing:10px;color:#fff;text-shadow:0 0 12px var(--pink),0 0 40px var(--pink),0 0 80px var(--pink)}
.subtitle{font-size:44px;letter-spacing:14px;color:var(--orange);text-transform:uppercase;text-shadow:0 0 18px rgba(255,138,31,.8);margin-top:4px}
.hint{font-family:Arial,sans-serif;font-weight:bold;font-size:28px;color:#d9c6e6;margin-top:18px}
#ladder{position:relative;display:flex;flex-direction:column;gap:22px;padding:0 50px}
#ladder:before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:6px;margin-left:-3px;background:linear-gradient(var(--pink),var(--orange));opacity:.35;z-index:0}
.card{position:relative;z-index:1;display:flex;height:262px;border-radius:28px;background:rgba(14,8,22,.88);border:4px solid #3a2a48;overflow:hidden}
.card .pic{position:relative;width:262px;flex:none;background:radial-gradient(circle at 50% 40%,#3a1530,#0b0610)}
.card .pic img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.card .info{flex:1;padding:24px 30px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.row{display:flex;align-items:center;gap:20px}
.badge{flex:none;width:84px;height:84px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:54px;background:var(--ink);border:4px solid var(--orange);color:var(--orange);text-shadow:0 0 12px var(--orange)}
.name{font-size:62px;letter-spacing:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cls{font-family:Arial,sans-serif;font-weight:bold;font-size:24px;color:#bba7cc;letter-spacing:4px}
.pips{display:flex;align-items:center;gap:14px;font-family:Arial,sans-serif;font-weight:bold;font-size:30px;color:#e8dcf2}
.pip{width:46px;height:20px;border-radius:10px;background:#2c2036;border:2px solid #57406a}
.pip.on{background:var(--pink);border-color:var(--pink);box-shadow:0 0 12px var(--pink)}
.race{margin-left:auto;font-family:inherit;font-size:40px;letter-spacing:4px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--orange));border:none;border-radius:18px;padding:16px 38px;box-shadow:0 0 24px rgba(255,45,149,.7);cursor:pointer}
.race.again{background:#2a1c36;border:3px solid var(--orange);box-shadow:none;font-size:32px;padding:14px 26px}
.card.current{border-color:var(--pink);box-shadow:0 0 22px var(--pink),0 0 60px rgba(255,45,149,.5),inset 0 0 30px rgba(255,45,149,.25);animation:glow 1.6s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 34px var(--pink),0 0 90px rgba(255,45,149,.7),inset 0 0 30px rgba(255,45,149,.35)}}
.card.mastered{border-color:var(--orange)}
.card.locked .pic img{filter:grayscale(1) brightness(.45) contrast(2.2) sepia(.6) hue-rotate(280deg) brightness(.6);mix-blend-mode:normal}
.card.locked.hiddenimg .pic img{filter:brightness(.6)}
.card.locked .info{opacity:.75}
.card.locked .badge{border-color:#57406a;color:#8a74a0;text-shadow:none}
.lockmsg{font-family:Arial,sans-serif;font-weight:bold;font-size:28px;color:#c9b4da}
.icon{position:absolute;display:flex;align-items:center;justify-content:center}
.lockicon{inset:0}.lockicon svg{width:96px;height:96px;filter:drop-shadow(0 0 10px var(--pink))}
.check{right:12px;top:12px;width:62px;height:62px;border-radius:50%;background:var(--orange);box-shadow:0 0 16px var(--orange)}
.check svg{width:40px;height:40px}
.tag{font-family:Arial,sans-serif;font-weight:bold;font-size:22px;letter-spacing:3px;padding:6px 14px;border-radius:10px;background:var(--orange);color:#1a0d00}
footer{position:absolute;bottom:40px;width:100%;text-align:center}
footer a{font-family:Arial,sans-serif;font-size:26px;color:#9c87b0}
.hidden{display:none!important}
#modal{position:absolute;inset:0;background:rgba(5,2,8,.82);display:flex;align-items:center;justify-content:center;z-index:10}
.sheet{width:880px;padding:50px;border-radius:36px;background:#130a1c;border:4px solid var(--pink);box-shadow:0 0 60px rgba(255,45,149,.6);text-align:center}
.m-class{font-size:34px;color:var(--orange);letter-spacing:8px}
.m-name{font-size:90px;letter-spacing:6px;text-shadow:0 0 20px var(--pink)}
.m-portrait{margin:30px auto;width:560px;height:560px;border-radius:28px;overflow:hidden;border:4px solid #3a2a48}
.m-portrait img{width:100%;height:100%;object-fit:cover}
.m-status{font-family:Arial,sans-serif;font-weight:bold;font-size:40px;margin-bottom:34px;min-height:50px}
.m-buttons{display:flex;gap:30px;justify-content:center}
.btn{font-family:inherit;font-size:46px;letter-spacing:4px;border:none;border-radius:20px;padding:24px 60px;color:#fff;cursor:pointer}
.btn.win{background:linear-gradient(90deg,var(--pink),var(--orange))}
.btn.lose{background:#2a1c36;border:3px solid #6b5480}
.btn.ghost{background:transparent;border:3px solid var(--orange);color:var(--orange)}
#banner{position:absolute;left:0;right:0;top:760px;z-index:20;pointer-events:none}
.b-inner{background:linear-gradient(90deg,transparent,rgba(255,45,149,.95) 15%,rgba(255,138,31,.95) 85%,transparent);padding:40px 0;text-align:center;animation:slide 2.8s ease forwards}
.b-small{font-size:32px;letter-spacing:10px;color:#1a0010}
.b-big{font-size:100px;letter-spacing:6px;text-shadow:0 0 20px #fff}
@keyframes slide{0%{transform:translateX(-110%) skewX(-12deg)}15%{transform:translateX(0) skewX(-12deg)}80%{transform:translateX(0) skewX(-12deg);opacity:1}100%{transform:translateX(110%) skewX(-12deg);opacity:0}}