*{box-sizing:border-box}body{color:#edf2fa;background:#0b111c;margin:0;font-family:Arial,Malgun Gothic,sans-serif}main{max-width:1100px;margin:48px auto;padding:0 24px}header span{color:#77dac8;letter-spacing:2px;font-size:12px}header p,.note{color:#94a3b8;line-height:1.7}.bar,.info,.footer{background:#151e2d;justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex}.bar{border-radius:12px 12px 0 0}.info{border-top:1px solid #293447;font-size:14px}button{cursor:pointer;background:#89e6ce;border:0;border-radius:6px;padding:12px 18px;font-weight:700}button:disabled{opacity:.45;cursor:default}.arena{aspect-ratio:5/3;background:linear-gradient(90deg,#13283d 50%,#2c2034 50%);border:1px solid #344158;position:relative;overflow:hidden}.midline{border-left:2px dashed #697689;height:100%;position:absolute;left:50%}.player{aspect-ratio:1;border:2px solid #fff;border-radius:50%;width:3%;position:absolute;transform:translate(-50%,-50%)}.player.left{background:#65bbff}.player.right{background:#f79cbc}.player span{white-space:nowrap;font-size:13px;position:absolute;bottom:160%;left:50%;transform:translate(-50%)}.footer{border-radius:0 0 12px 12px;font-size:14px}small{color:#94a3b8}@media (max-width:650px){main{margin:24px auto}.bar,.info{flex-wrap:wrap}h1{font-size:27px}}main{margin:20px auto}h1{margin:10px 0;font-size:28px}section{margin-top:16px}.arena{aspect-ratio:auto;background:#0b111c;height:min(60vh,600px)}.arena canvas{display:block}.diagnostics{color:#94a3b8;gap:20px;font-size:12px;display:flex}.note{margin:8px 0}.skills{background:#151e2d;gap:10px;padding:12px;display:flex}.skill{border:1px solid #46546a;border-radius:6px;flex-direction:column;gap:5px;min-width:70px;padding:8px 14px;display:flex}.skill.selected{background:#203d3b;border-color:#89e6ce}.skill.disabled{opacity:.35}.skill span{font-size:12px}.info{flex-wrap:wrap}.settings{border:1px solid #344158;border-radius:8px;flex-wrap:wrap;gap:16px;margin:12px 0;padding:12px;display:flex}.settings legend{color:#94a3b8;font-size:12px}.settings label{align-items:center;gap:6px;font-size:13px;display:flex}.settings:disabled{opacity:.55}.result{background:#19312f;border:1px solid #89e6ce;border-radius:12px;margin-bottom:12px;padding:16px 24px}.result h2{margin:0 0 8px}.result button{margin-right:10px}.arena{height:min(49vh,520px)}.skills,.diagnostics{flex-wrap:wrap}.info{padding:12px 16px}