:root { color-scheme: dark; }
body { font-family: system-ui, sans-serif; margin: 0; background:#10151f; color:#e9edf4; }
header { padding: 14px 18px; border-bottom:1px solid #2a3342; background:#151d2b; position: sticky; top:0; }
h1 { margin: 0 0 8px; font-size: 1.2rem; }
.controls { display:flex; gap:12px; align-items:center; }
#rulesetDesc { margin:8px 0 0; color:#9fb2ca; font-size:0.92rem; }
main { display:grid; grid-template-columns: 280px 1fr; gap:12px; padding:12px; }
.status { border:1px solid #2a3342; padding:10px; border-radius:8px; background:#141b28; }
#turnInfo { font-weight:600; margin-bottom:8px; }
.log { white-space: pre-wrap; font-size:.88rem; height:460px; overflow:auto; background:#0f141f; padding:8px; border-radius:6px; }
.board { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.player-board { border:1px solid #2a3342; padding:10px; border-radius:8px; background:#141b28; }
.lane { border:1px dashed #3a4556; padding:8px; border-radius:8px; min-height:120px; margin-top:8px; }
.unit { background:#202c3f; border:1px solid #3a4a64; padding:6px; border-radius:6px; margin-bottom:6px; }
.unit button { margin:2px 4px 0 0; }
.hand-panel { grid-column:1/-1; border:1px solid #2a3342; padding:10px; border-radius:8px; background:#141b28; }
.hand { display:flex; flex-wrap: wrap; gap:10px; }
.card { width:220px; background:#1b2434; border:1px solid #31405a; border-radius:8px; padding:8px; }
.card h3 { margin:0 0 4px; font-size:1rem; }
.meta,.stats,.keywords { font-size:.86rem; color:#c8d6ea; margin-bottom:4px; }
.effect { margin:0 0 6px; font-size:.84rem; color:#e3edf9; }
.actions { margin-top:8px; display:flex; gap:10px; }
button { background:#375a9e; color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; }
button:disabled { background:#4f5765; cursor:not-allowed; }
.small { font-size:.8rem; color:#98abc4; }