body{margin:0;background:#15171c;color:#ddd;font:13px sans-serif}
#top{padding:6px 10px;background:#22252d;display:flex;gap:10px;align-items:center}
.hint{color:#888}#main{display:flex;gap:8px;padding:8px}
canvas{background:#1d2027;border:1px solid #333;align-self:flex-start;flex:none;width:900px;height:620px}
#side{width:320px;flex:none;display:flex;flex-direction:column;gap:8px}
.card{background:#262a33;padding:6px;border:2px solid transparent;border-radius:4px;cursor:pointer}
.card.sel{border-color:#ffd54a}.card.dead{opacity:.4}
.bar{height:6px;background:#111;margin:2px 0}.bar i{display:block;height:100%}
.q{color:#9cf;font-size:12px;max-height:48px;overflow-y:auto;word-break:break-all}
#units{max-height:400px;overflow-y:auto}
.wait{color:#ffab40}
#skills button{margin:2px;padding:6px;background:#333a48;color:#eee;border:1px solid #555;cursor:pointer}
#skills button.on{border-color:#ffd54a}#skills button:disabled{opacity:.5}
#log{background:#101216;height:150px;overflow:auto;font-size:12px;padding:4px}
button{cursor:pointer}
#overlay{position:fixed;inset:0;background:#000a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;gap:16px}
.hidden{display:none!important}