/* A deck's page (/deck/<id>, /starter/<key>): the legend and champion up top, the list below, in the site's palette. */
.dp{ width:min(880px, 100%); }
.dp__head{ margin-bottom:22px; }
.dp__title{ margin:6px 0 10px; font-size:clamp(26px, 4vw, 38px); }
.dp__status{ display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid var(--line); font-size:13px; color:var(--text-lo); }
.dp__status--ok{ border-color:rgba(120,200,140,.5); color:#9fe0b0; }
.dp__desc{ margin:14px 0 0; color:var(--text); max-width:66ch; }
.dp__top{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin:10px 0 26px; }
.dp__fig{ margin:0; width:186px; text-align:center; font-size:12.5px; color:var(--text-lo); }
.dp__fig--bf{ width:260px; }
.dp__card, .dp__bf{ width:100%; height:auto; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.5); display:block; margin-bottom:6px; }
.dp__actions{ flex:1 1 260px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding-top:6px; }
.dp__hint{ margin:2px 0 0; font-size:13px; color:var(--text-lo); max-width:38ch; }
.dp__blurb, .dp__note{ margin:6px 0 20px; max-width:70ch; line-height:1.6; }
.dp__note{ color:var(--brass-glow); font-size:14px; }
.dp__h3{ margin:22px 0 10px; font-size:18px; font-weight:600; letter-spacing:.04em; }
.dp__n{ font-weight:500; color:var(--text-lo); font-size:14px; margin-left:6px; }
.dp__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:6px 18px; }
.dp__row{ display:grid; grid-template-columns:34px 30px 1fr auto auto; align-items:center; gap:8px; padding:4px 6px; border-radius:8px; border:1px solid transparent; }
.dp__row:hover{ border-color:var(--line-soft); background:rgba(255,255,255,.03); }
.dp__row.is-banned{ opacity:.6; }
.dp__thumb{ width:34px; height:auto; border-radius:4px; }
.dp__count{ font-family:var(--font-mono, ui-monospace, monospace); color:var(--brass-glow); font-size:13px; }
.dp__name{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp__cost, .dp__might{ font-family:var(--font-mono, ui-monospace, monospace); font-size:12.5px; color:var(--text-lo); min-width:2.2em; text-align:right; }
.dp__might::after{ content:" M"; }
.dp__ban{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#ff9a86; margin-left:6px; }
.dp__runes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--text); font-size:14px; }
.dp__bfs{ display:flex; gap:18px; flex-wrap:wrap; }
.dp__more{ margin-top:30px; font-size:13.5px; color:var(--text-lo); line-height:1.8; }
.dp__more a{ color:var(--brass-glow); text-decoration:none; }
.dp__more a:hover{ text-decoration:underline; }
@media (max-width: 640px){ .dp__list{ grid-template-columns:1fr; } .dp__fig{ width:140px; } .dp__fig--bf{ width:200px; } }