:root{
  --bg:#0b0f14; --panel:#121a2a; --line:#1f2937; --muted:#9aa7b6;
  --me:#38bdf8; --opp:#f472b6; --sys:#a3e635; --accent:#60a5fa;
  --ok:#86efac; --warn:#facc15; --err:#fca5a5; --blue:#3b82f6;
  --green:#10b981; --red:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:#e6eef7;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#app{max-width:1200px;margin:0 auto;padding:16px}
.hidden{display:none}
.row{display:flex;gap:12px;align-items:flex-start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:240px}
.scroll{max-height:60vh;overflow:auto}
.messages{margin-bottom:12px}
/* Log-Leiste begrenzen & scrollbar machen */
#messages-log{
  background:#0f1720;
  border:1px solid var(--line);
  padding:8px;
  border-radius:10px;
  min-height:36px;
  max-height:140px;   /* NEU: Höhe begrenzen */
  overflow:auto;      /* NEU: Scrollbar */
  font-size:14px;
  opacity:.9;
}
label{display:block;margin:8px 0}
input[type="text"], input[type="number"]{width:260px;padding:8px;border-radius:8px;border:1px solid var(--line);background:#0f1720;color:#e6eef7}
button{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#1a2235;color:#e6eef7;cursor:pointer}
button.primary{background:var(--accent);color:#06111e;border:none}
button:disabled{opacity:.5;cursor:not-allowed}
.screen h1, .screen h2, .screen h3{margin:8px 0 12px}
#attacks-pool .atk, #picked-list .atk, #char-attacks .atk{
  border:1px solid var(--line); border-radius:10px; padding:8px; margin:8px 0; cursor:pointer;
}
#attacks-pool .atk.selected, #char-attacks .atk.selected{outline:2px solid var(--accent)}
.hint{opacity:.7;font-size:12px;margin-top:6px}
.tiny-toggles label{font-size:14px;opacity:.9}
.hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:6px 0 10px;
  opacity:.9;
}
.hud-left{ display:flex; gap:16px; align-items:center; }
.hud-right{ display:flex; gap:8px; }
.stack .item{border:1px solid var(--line);border-radius:10px;padding:8px;margin:8px 0}
.stack .item.blue{border-color:var(--blue)}
.stack .item.green{border-color:var(--green)}
.stack .item.red{border-color:var(--red)}
.team.green{border-color:#1f4838}
.team.red{border-color:#482121}
.mid-columns{display:flex;gap:12px}
.member{border:1px dashed var(--line);border-radius:10px;padding:8px;margin:8px 0;cursor:pointer}
.member.selected{outline:2px solid var(--accent)}
.bottom-bar{justify-content:space-between;margin-top:8px}
.result{font-size:20px;font-weight:700}
.small{font-size:12px;opacity:.8}
.sum-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  margin:8px 0;
  background:#0f1720;
}