:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#fff;background:#17121f;touch-action:manipulation}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#5e3450,#17121f 70%);display:grid;place-items:center}.phone{width:min(100%,480px);min-height:100vh;background:linear-gradient(#8f5439 0 22%,#35233e 22%);position:relative;overflow:hidden;box-shadow:0 0 50px #0008}.hidden{display:none!important}.panel{padding:28px}.lobby{min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 50% 20%,#704854,#25192f 62%)}.brand{text-align:center;margin-bottom:38px}.brand>span{font-size:70px;filter:drop-shadow(0 8px 2px #0004)}h1{font-size:42px;margin:8px 0;color:#ffe176;text-shadow:0 4px #9b392b}.brand p{color:#d8c6dd}label{color:#d8c6dd;font-size:14px}input{width:100%;border:2px solid #6e5875;border-radius:14px;background:#1b1425;color:white;font-size:18px;padding:15px;outline:none;margin-top:8px;text-transform:uppercase}.primary,button{border:0;color:white;font-weight:800;cursor:pointer}.primary{background:linear-gradient(#ffca4d,#e87a19);box-shadow:0 5px #a74b1d;border-radius:14px;padding:16px;font-size:19px;margin-top:14px}.or{display:flex;align-items:center;gap:12px;margin:22px 0;color:#9e8da7;font-size:13px}.or i{height:1px;background:#57465f;flex:1}.join{display:flex;gap:10px}.join button{width:100px;border-radius:14px;background:#7451a0;font-size:16px}.error{color:#ff9c91;text-align:center;height:20px}header{height:70px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;background:#281c31cc;text-align:center}header small{display:block;color:#bbaac3}header strong{font-size:22px;letter-spacing:4px;color:#ffe176}.icon{background:#ffffff17;border-radius:50%;font-size:28px;width:42px;height:42px}.versus{height:108px;background:#382546;display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;padding:10px 14px}.fighter{display:grid;grid-template-columns:45px 1fr;column-gap:8px;align-items:center}.avatar{font-size:34px;grid-row:1/4}.fighter b{font-size:13px;white-space:nowrap;overflow:hidden}.fighter em{font-size:11px;color:#cbbbd0;font-style:normal}.bar{height:9px;background:#1b1222;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4be459,#dbf34c);transition:.3s}.vs{font-weight:1000;color:#ffd04d;font-size:22px;text-align:center;font-style:italic}.goal{position:absolute;z-index:3;top:190px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 18px;border-radius:20px;background:#17121fcc;font-weight:700;font-size:14px}.arena{height:218px;position:relative;background:linear-gradient(#9a5c3c,#d29154);overflow:hidden;border-bottom:5px solid #f2b55d}.rocks{display:flex;flex-wrap:wrap;gap:0;position:absolute;inset:0 0 auto;height:80px;overflow:hidden;padding:2px}.rock{width:8.33%;aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#8f8994,#45434e 65%);border:2px solid #36343d;border-radius:45%;transition:.25s}.rock.gone{transform:scale(0);opacity:0}.king{font-size:72px;position:absolute;right:50px;bottom:9px;filter:drop-shadow(0 4px #633)}.king span{font-size:80px;position:absolute;left:32px;top:5px}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px;background:#3a2744}.tile{aspect-ratio:1;border-radius:9px;border:3px solid #d49a32;box-shadow:inset 0 2px #ffe783,0 2px #1c1227;background:#f2bd47;font-size:24px;display:grid;place-items:center;transition:.15s}.tile.pop{transform:scale(.2) rotate(20deg);opacity:0}.bottom{height:82px;padding:9px 12px;background:#281b32;display:flex;gap:9px;align-items:center}.bottom>div{flex:1}.bottom small{display:block;color:#ad9bb4}.bottom b{font-size:21px;color:#ffe176}.ready{background:linear-gradient(#58dc63,#23994a);border-radius:50%;width:64px;height:64px;font-size:16px;box-shadow:0 4px #17622e}.ready:disabled{background:#776b7b;box-shadow:none}.tool{background:#564064;border-radius:12px;width:76px;height:58px;font-size:25px}.tool small{font-size:10px}.toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%) translateY(15px);background:#15101ddd;border-radius:18px;padding:8px 15px;opacity:0;transition:.2s;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%)}.modal{position:absolute;z-index:9;inset:0;background:#130e1bdc;display:grid;place-items:center}.modal>div{width:80%;text-align:center;padding:30px;background:linear-gradient(#53395f,#2c2035);border:3px solid #eebc4b;border-radius:22px}.modal span{font-size:70px}.modal h2{font-size:36px;margin:8px;color:#ffe176}@media(max-height:750px){.arena{height:160px}.board{gap:3px}.tile{font-size:20px}.versus{height:90px}.goal{top:164px}}
