/* Layered on autobattle's theme.css, using its tokens where they exist. */
.mw-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.75rem 1rem;border-bottom:1px solid rgba(128,128,128,.3)}
.mw-brand{font-weight:700;letter-spacing:.02em;text-decoration:none}
.mw-head nav{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.mw-head .who{opacity:.7}
main{max-width:56rem;margin:1.5rem auto;padding:0 1rem}
.lede{opacity:.85;max-width:44rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1rem 0}
.facts dt{opacity:.65}
.facts dd{margin:0}
.dim{opacity:.6}
.hint{opacity:.75;font-size:.92em;max-width:44rem}
.btn{display:inline-block;padding:.55rem 1rem;border-radius:.4rem;border:1px solid currentColor;
  background:none;color:inherit;font:inherit;cursor:pointer}
.btn[disabled]{opacity:.45;cursor:default}
.result{margin:1.25rem 0;padding:.9rem 1rem;border-left:3px solid currentColor;border-radius:.2rem}
.result.win{border-color:#3a9}
.result.loss{border-color:#a55}
.result.draw{border-color:#888}
.promo{font-weight:600}
.error{color:#c66}
.mw-foot{margin:3rem auto 1.5rem;max-width:56rem;padding:0 1rem;opacity:.6;font-size:.9em}
table.schools,table.cards{width:100%;border-collapse:collapse;margin:1rem 0}
table.schools th,table.cards th{text-align:left;font-weight:600;opacity:.7;
  border-bottom:1px solid rgba(128,128,128,.3);padding:.4rem .5rem}
table.schools td,table.cards td{padding:.35rem .5rem;border-bottom:1px solid rgba(128,128,128,.14)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.btn.small{padding:.25rem .6rem;font-size:.9em}
table.cards tbody tr:hover{background:rgba(128,128,128,.08)}

/* --- card table ----------------------------------------------------------- */
/* The popup itself is styled by js/card-popup.js, which injects #cardPopup. */
table.cards tbody tr[data-card-id]{cursor:default}
.mw-cardname{color:#e8e8ea}
/* The popup anchors beside the hovered ROW and picks its side from the row's
   own horizontal centre: left of centre puts it on the right, otherwise on the
   left. A full-width table centres its rows almost exactly on the viewport
   midpoint, so the popup went left and sat on top of the checkbox column --
   still clickable (it is pointer-events:none) but you were clicking blind.
   Capping the table keeps every row's centre left of the midpoint, so the
   popup consistently opens into empty space on the right. */
table.cards{max-width:44rem}