:root{color:#edf6ff;background:#050914;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:#050914;margin:0;overflow:hidden}.app{background:radial-gradient(circle at 50% 20%,#17243c,#050914 65%);flex-direction:column;height:100vh;display:flex}header{background:#07101add;border-bottom:1px solid #263a5c;align-items:center;gap:14px;height:54px;padding:0 16px;display:flex;box-shadow:0 0 24px #000}.homeLink{color:#dffaff;white-space:nowrap;background:#061018f2;border:1px solid #9be7ff66;border-radius:10px;padding:8px 11px;font-weight:850;text-decoration:none;box-shadow:0 0 18px #4dabf722}.homeLink:hover,.homeLink:focus-visible{border-color:#9be7ff;outline:none;box-shadow:0 0 22px #4dabf744}header b{color:#9be7ff;letter-spacing:.16em;text-shadow:0 0 14px #4dabf7;margin-right:auto}main{flex:1;grid-template-columns:285px 1fr 285px;gap:10px;min-height:0;padding:10px;display:grid}.arena{justify-content:center;align-items:center;min-width:0;display:flex;position:relative}canvas{background:#07101a;border:1px solid #314664;border-radius:14px;max-width:100%;max-height:100%;box-shadow:0 0 35px #000}.bars{background:#081120e6;border:1px solid #263a5c;border-radius:14px;padding:10px;overflow:auto}.bars h3{color:#9be7ff;letter-spacing:.12em;margin:0 0 10px;font-size:13px}.unit{background:#0d1830;border:1px solid #324b75;border-radius:12px;min-height:86px;margin-bottom:10px;padding:10px;position:relative;overflow:hidden}.unit b,.unit span,.unit small{z-index:2;display:block;position:relative}.unit b{font-size:14px}.unit span{color:#ffd166;margin:2px 0 22px;font-size:12px}.unit small{color:#9aabc4;font-size:11px}.unit i{z-index:1;height:5px;position:absolute;left:0}.unit .hp{background:#6f9;top:49px;box-shadow:0 0 10px #6f9}.unit .res{background:#4dabf7;top:57px;box-shadow:0 0 10px #4dabf7}.commands{background:#07101add;border:1px solid #263a5c;border-radius:14px;grid-template-columns:repeat(4,1fr);gap:7px;width:min(820px,92%);padding:8px;display:grid;position:absolute;bottom:14px;left:50%;transform:translate(-50%);box-shadow:0 12px 35px #000b}.commands button,.overlay button{color:#edf6ff;font:inherit;cursor:pointer;background:#0d1830;border:1px solid #324b75;border-radius:10px;padding:9px 10px;transition:border-color .12s,background .12s,box-shadow .12s,transform .12s}.commands button:hover,.overlay button:hover{border-color:#9be7ff;box-shadow:0 0 14px #4dabf755}.commands button.active{color:#fff7d6;background:linear-gradient(#3a2a0f,#17243c);border-color:#ffd166;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #ffd16655,0 0 18px #ffd16655}.commands button.active:before{content:"● ";color:#ffd166;text-shadow:0 0 8px #ffd166}.overlay{z-index:5;text-align:center;background:#07101af2;border:1px solid #9be7ff99;border-radius:18px;min-width:260px;padding:22px;font-size:44px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #000}.overlay b{color:#ffd166;margin-bottom:14px;font-size:28px;display:block}footer{background:#07101add;border-top:1px solid #263a5c;grid-template-columns:1fr 1fr;gap:16px;height:96px;padding:8px 16px;display:grid;overflow:hidden}footer p{color:#9aabc4;margin:3px 0;font-size:12px}footer div p:first-child{color:#edf6ff}@media (width<=1050px){main{grid-template-columns:220px 1fr 220px}.commands{grid-template-columns:repeat(2,1fr)}}