/* /duel/board/matchups (1 Nov 2026): every spec against every spec over the last 7 days, the most played specs and their top players.
   Desktop: the whole grid in a wider panel, any column sorts it. Under 900 px: one spec at a time from a select (dm-js, the page's
   script is up); without script the grid keeps its own sideways scroll, never the page's */
.dm{max-width:1360px}
.dm .db-head p,.dm .dr-src{max-width:640px}
.dm-h{margin:26px 0 4px;font:700 22px/1.2 Cinzel,Georgia,serif;color:#ffd100;text-shadow:0 1px 3px #000}
.dm-how{margin:0 0 8px;font-size:13px;color:#cfc6b4}
.dm .db-tw{max-width:900px}
.dm-sb,.dm-cb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:32px}
.dm-sb:focus-visible,.dm-cb:focus-visible{outline:2px solid #ffd100;outline-offset:2px}
th[aria-sort] .dm-sb,th[aria-sort] .dm-cb{color:#ffd100}
th[aria-sort="descending"] .dm-sb::after{content:"\25BE";font-size:10px}
.dm-tb{table-layout:fixed}.dm-tb th.dm-r{width:2.4em}.dm-tb th.dm-s{width:auto}.dm-tb th:nth-child(3),.dm-tb th:nth-child(4){width:12%}.dm-tb th:nth-child(5){width:14%}
.dm-tb th.n .dm-sb{justify-content:flex-end;width:100%}
.dm-sw{display:flex;align-items:center;gap:10px}
.dm-sw img{display:block;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.dm-tb .dm-s b{font:700 15px/1.2 Cinzel,Georgia,serif}
.dm-tb .dm-s small{display:block;margin-top:2px;font-size:12px;color:#a99d86}
.dm-tb .dm-s small b{font:600 12px/1 PkNum,'Open Sans',sans-serif;color:#e9e3d6}
.dm-tb .dm-s small i{font-style:normal;color:#7d7464}
.dm-tb td.n b{color:#fff}
.dm-few{color:#7d7464;font-size:12px}
.dm-r{color:#9a907e}
/* (1 Nov 2026, duel-qa-matchups) a date in the source line breaks whole, never "1" on one line and "Nov" on the next */
.dm-nw{white-space:nowrap}
/* the grid */
.dm-gw{margin:6px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dm-g{border-collapse:separate;border-spacing:1px;font:600 12px/1 PkNum,'Open Sans',sans-serif;font-variant-numeric:tabular-nums}
.dm-g thead th{vertical-align:bottom;padding:0 0 4px;border-bottom:2px solid var(--cc,transparent)}
.dm-g thead .dm-cb{flex-direction:column;justify-content:flex-end;gap:3px;width:32px;font:600 9.5px/1.1 'Open Sans',sans-serif;color:#b8ad98;text-align:center}
.dm-g thead .dm-cb img{display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.dm-g thead .dm-rh .dm-cb,.dm-g thead .dm-ah .dm-cb{font:600 11px/1.2 Cinzel,Georgia,serif;letter-spacing:.06em;text-transform:uppercase}
.dm-g thead .dm-rh{text-align:left}.dm-g thead .dm-rh .dm-cb{width:auto}
.dm-g tbody th{position:sticky;left:0;z-index:1;padding:0 8px 0 6px;text-align:left;white-space:nowrap;background:#0d0b09;border-left:3px solid var(--cc,#555)}
.dm-g tbody th .dm-sw{gap:6px;font:700 12px/1.1 Cinzel,Georgia,serif;color:var(--cc,#e9e3d6)}
.dm-g tbody th small{font:600 11px/1 'Open Sans',sans-serif;color:#9a907e}
.dm-g td{width:32px;height:28px;padding:0;text-align:center;color:#fff;background:#17140f;border-radius:3px}
.dm-g td.dm-all{background:#2a241b;color:#ffd100}
.dm-g td.dm-lo{background:#120f0c}
.dm-g td.dm-mir{color:#5d554a;background:#120f0c}
.dm-g tbody tr:hover th,.dm-g tbody tr:hover td{box-shadow:inset 0 0 0 1px rgba(201,162,74,.55)}
.dm-gw{margin-bottom:6px}
/* the most played: ten, the rest behind one button (open without script) */
.dm-js .dm-tb:not(.dm-all-on) tr.dm-x{display:none}
.dm-more{display:none}
.dm-js .dm-more{display:block;min-height:44px;margin:10px 0 0;padding:0 18px;font:700 13px/1 Cinzel,Georgia,serif;color:#e9e3d6;background:rgba(14,12,10,.7);border:0;border-radius:4px;box-shadow:0 0 0 1px var(--dl-line,#5b4a2e);cursor:pointer}
.dm-more:hover{box-shadow:0 0 0 1px #8a7650}.dm-more:focus-visible{outline:2px solid #ffd100;outline-offset:2px}
/* the phone's one spec at a time */
.dm-pick{display:none}
.dm-ph{display:none}
.dm-pick label{display:block;margin:0 0 6px;font:600 11px/1.2 Cinzel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#b8ad98}
.dm-pick select{width:100%;min-height:44px;padding:0 10px;font:700 15px/1 Cinzel,Georgia,serif;color:#e9e3d6;background:#17140f;border:1px solid rgba(201,162,74,.45);border-radius:4px}
.dm-list{margin:10px 0 0;padding:0;list-style:none}
.dm-list li{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:8px;min-height:40px;border-bottom:1px solid #221e17}
.dm-list img{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.dm-ln{font:700 13px/1.2 Cinzel,Georgia,serif}
.dm-list b{font:700 15px/1 PkNum,'Open Sans',sans-serif;font-variant-numeric:tabular-nums}
.dm-up{color:#7fd08f}.dm-dn{color:#e08a7f}
.dm-list small{min-width:5.5em;text-align:right;font-size:11px;color:#9a907e}
.dm-list li.dm-none{display:block;padding:10px 0;color:#9a907e}
.dm-few-l{margin:8px 0 0;font-size:12px;color:#9a907e}
.dm-few-l summary{min-height:36px;display:flex;align-items:center;cursor:pointer}
.dm-few-l p{margin:2px 0 0}
@media (max-width:899px){
  .dm-js .dm-pick{display:block}
  .dm-js .dm-gw,.dm-js .dm-dk{display:none}
  .dm-js .dm-ph{display:inline}
}
@media (max-width:700px){
  .dm-h{font-size:19px}
  .dm-tb .dm-pl{display:none}
  .dm-tb th.dm-r{width:1.8em}.dm-tb th:nth-child(3){width:17%}.dm-tb th:nth-child(5){width:22%}
  .dm-sw{gap:7px}.dm-sw img{width:20px;height:20px}
  .dm-tb .dm-s b{font-size:13px}.dm-tb .dm-s small{font-size:11px}
  /* (a phone: the top player only, so a row keeps to two lines) */
  .dm-tb .dm-tp~.dm-tp{display:none}
}
/* (1 Nov 2026, duel-qa-matchups: at 375 px Enhancement Shaman, Beast Mastery Hunter and the like wrapped to two lines over the top
   player, a row of three) a narrow phone gives the spec more of the row */
@media (max-width:420px){
  .dm-tb th:nth-child(3){width:15%}.dm-tb th:nth-child(5){width:19%}
  .dm-tb .dm-s b{font-size:12px;letter-spacing:-.01em}
  .dm-sw{gap:6px}
}