:root{--ink:#211b2f;--cream:#fff8e8;--pink:#ff4f8b;--gold:#ffbd2e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;font-family:ui-rounded,"SF Pro Rounded","Microsoft YaHei",sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 12%,#ffd65a 0 9%,transparent 10%),radial-gradient(circle at 88% 22%,#ff7baa 0 8%,transparent 9%),linear-gradient(145deg,#7c5cff,#5031bb);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(#fff8 1.2px,transparent 1.2px);background-size:22px 22px;pointer-events:none}button,input{font:inherit}.app{position:relative;width:min(94vw,530px);padding:16px;border:3px solid #251d42;border-radius:30px;background:var(--cream);box-shadow:0 14px 0 #251d42,0 32px 70px #1a0f5b99}header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.brand h1{font-size:clamp(25px,7vw,37px);line-height:.9;margin:0;letter-spacing:-2px}.brand small{font-weight:900;color:#725e7e}.stats{display:flex;gap:6px}.pill{min-width:67px;padding:7px;border:2px solid #2c2343;border-radius:14px;background:white;text-align:center;box-shadow:0 4px 0 #2c2343;font-size:10px;font-weight:900;color:#786985}.pill b{display:block;font-size:20px;line-height:1;color:var(--ink)}
.mission{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;margin:9px 1px;padding:8px 10px;border:2px solid #31264b;border-radius:13px;background:#fff}.mission span{font-size:10px;font-weight:1000;color:var(--pink)}.mission b{font-size:12px}.mission i{grid-column:1/-1;height:6px;border-radius:9px;background:#e8dfd2;overflow:hidden}.mission em,.power em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--gold));transition:width .3s}.power{display:flex;align-items:center;gap:7px;margin:7px 1px;font-size:10px;font-weight:1000;color:#6e5e7b}.power i{height:9px;flex:1;border:2px solid #302548;border-radius:9px;background:#ded4c4;overflow:hidden}.power em{background:linear-gradient(90deg,#37d89c,#36a9ff,#b14cff)}.power b{min-width:23px;color:var(--pink)}.fever{animation:feverGlow .55s infinite alternate}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:9px;border:3px solid #2c2343;border-radius:22px;background:#493592;box-shadow:inset 0 6px 0 #301e78;touch-action:manipulation}.cell{aspect-ratio:1;border:0;border-radius:17px;background:#ffffff24;position:relative;padding:0;cursor:pointer;transition:transform .12s,filter .12s}.cell:hover{transform:translateY(-2px);filter:brightness(1.06)}.cell:active{transform:scale(.92)}.orb{position:absolute;inset:5%;display:grid;place-items:center;border:2.5px solid #271f3c;border-radius:32% 48% 35% 50%;box-shadow:inset 0 5px 0 #ffffff70,0 5px 0 #271f3c;font-size:clamp(18px,7vw,34px);font-weight:1000;color:white;text-shadow:0 2px 0 #0004;animation:pop .22s cubic-bezier(.2,1.7,.4,1)}.orb:after{content:attr(data-n);position:absolute;right:-4px;bottom:-4px;min-width:21px;height:21px;display:grid;place-items:center;background:white;color:#251d42;border:2px solid #251d42;border-radius:50%;font-size:10px;text-shadow:none}.v1{background:#ff5f8f}.v2{background:#ff8b36}.v3{background:#f8c52e}.v4{background:#46cf86}.v5{background:#34aeee}.v6{background:#8061f5}.v7{background:#e64fec}.v8{background:linear-gradient(135deg,#222,#ffca28)}.v9{background:radial-gradient(circle,#ffdf4f 0 20%,#ff553d 22% 48%,#251d42 51%)}.v10{background:conic-gradient(#ff4f8b,#ffbd2e,#40d697,#34aeee,#8061f5,#ff4f8b)}.v9:after,.v10:after{content:"!"}.hot .orb{animation:pulse .7s infinite alternate}
.footer{display:flex;gap:8px;align-items:center;margin-top:11px}.hint{flex:1;font-size:12px;font-weight:800;color:#685b72}.action,nav button,.secondary{border:2px solid #251d42;border-radius:12px;padding:8px 10px;background:#ffd149;box-shadow:0 3px 0 #251d42;font-weight:1000;cursor:pointer}.action:active,nav button:active,.secondary:active{transform:translateY(2px);box-shadow:0 1px 0 #251d42}nav{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}nav button{background:#fff;font-size:12px}.overlay,.modal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;border-radius:27px;background:#20164be8;backdrop-filter:blur(7px)}.card,.rankCard{width:100%;padding:24px;border:3px solid #211a34;border-radius:24px;background:#fff8e8;text-align:center;box-shadow:0 9px 0 #211a34}.card h2,.rankCard h2{font-size:34px;margin:0 0 7px;letter-spacing:-1px}.card p{margin:7px 0 14px;font-weight:800;color:#6c6074}.big{font-size:53px;font-weight:1000;color:var(--pink);line-height:1}.name{display:block;text-align:left;font-size:11px;font-weight:900;color:#75677c}.name input{width:100%;margin-top:5px;padding:10px;border:2px solid #2c2343;border-radius:11px;background:#fff}.cardActions{display:flex;gap:8px;margin-top:12px}.play{flex:1;border:3px solid #211a34;border-radius:15px;padding:12px;background:linear-gradient(135deg,#ff528f,#ff9347);box-shadow:0 5px 0 #211a34;color:white;font-size:18px;font-weight:1000;cursor:pointer}.secondary{background:#fff}.hide{display:none!important}
.rankCard{position:relative;padding:20px}.rankCard .sub{margin:-4px 0 12px;color:#796b7f;font-weight:800}.close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:28px;cursor:pointer}.rankCard ol{margin:0;padding:0;list-style:none;max-height:55vh;overflow:auto}.rankCard li{display:grid;grid-template-columns:32px 1fr auto;gap:7px;padding:9px;border-bottom:1px solid #e3d9c8;text-align:left;font-weight:900}.rankCard li span:last-child{color:var(--pink)}.rankCard li.me{background:#fff1b9;border-radius:10px}.loading{display:block!important;text-align:center!important;color:#786985}.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,20px);padding:10px 16px;border:2px solid #211a34;border-radius:99px;background:#211a34;color:#fff;font-weight:900;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.float{position:fixed;z-index:10;font-size:25px;font-weight:1000;color:#fff;text-shadow:0 3px 0 #33205d;pointer-events:none;animation:fly .75s forwards}@keyframes pop{from{transform:scale(.3) rotate(-12deg)}to{transform:scale(1)}}@keyframes pulse{to{transform:scale(1.09) rotate(3deg)}}@keyframes fly{to{transform:translateY(-70px) scale(1.3);opacity:0}}@keyframes feverGlow{to{filter:saturate(1.7) brightness(1.18);box-shadow:0 0 28px #ff4f8b}}@media(max-height:740px){.app{padding:11px}.brand small,.hint,.mission span{display:none}.mission{margin:6px 0;padding:5px 8px}.board{gap:5px}.footer,nav{margin-top:7px}}