.deck-legality-warning{margin:0 0 18px;padding:13px 15px;border:1px solid var(--warning);background:var(--warning-soft);color:var(--ink);font-size:12px}
.deck-legality-warning strong{display:block;margin-bottom:6px}
.deck-legality-warning ul{margin:0;padding-left:18px;line-height:1.55}
.deck-legality-warning .deck-legality-count{color:var(--warning);font-variant-numeric:tabular-nums}

/* Every warning template in src/legality.js interpolates a card name, and one of them adds 61
   characters of fixed text to it, so a two-line entry is the normal case rather than the long
   one. The list is uncapped — a Commander list pasted in the wrong colours produces one entry
   per offending card — and at 12px with line-height 1.55 a twenty-issue deck ran to roughly
   1,036px, sitting above the decklist on a 736px phone viewport. It had no narrow treatment at
   any width. */
@media(max-width:620px){
  /* Five lines, then scroll. The block stops growing with the number of problems, and the
     count in the heading is what tells you how many there are. */
  .deck-legality-warning ul{max-height:9.3em;overflow-y:auto;overscroll-behavior:contain}
}

/* Not a narrow-screen rule, deliberately. Below 850px every ancestor of this element is
   overflow:visible (builder-wide.css) and nothing in the codebase sets overflow-x:hidden on
   html or body, so a token wider than the 263px of list content pushes the whole page sideways
   rather than clipping — the same mechanism as the Color consistency bug the Stats tab fix
   dealt with. `Unsupported deck board: ${entry.board}.` interpolates an unvalidated string, so
   the long token is reachable rather than hypothetical. Applied at every width because the
   overflow is a property of the text, not of the viewport. */
.deck-legality-warning li{overflow-wrap:anywhere}