/* Tier list: public ([d4_tier_list], .d4tl) and admin board (.d4tl-admin). Shared tier colours. */
.d4tl-letter.tier-S, .d4tl-letter.tier-A, .d4tl-letter.tier-B, .d4tl-letter.tier-C, .d4tl-letter.tier-D { color: #111; }
.d4tl-letter.tier-S { background: #ff6b5a; } .d4tl-letter.tier-A { background: #ffb347; } .d4tl-letter.tier-B { background: #ffe066; }
.d4tl-letter.tier-C { background: #8fd16b; } .d4tl-letter.tier-D { background: #7fb6e6; }
.d4tl-letter { display: flex; align-items: center; justify-content: center; flex: none; width: 56px; font-size: 26px; font-weight: 800; background: #3a3d46; border-radius: 8px 0 0 8px; }

/* public */
.d4tl { --bg: #15171c; --card: #1d2027; --line: #2d313b; --text: #e8e6e1; --muted: #9a9ba3; --gold: #c9a24b; color: var(--text); font-size: 15px; margin: 1.5em 0; }
.d4tl *, .d4tl *::before, .d4tl *::after { box-sizing: border-box; }
.d4tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
.d4tl-title { margin: 0; font-size: 22px; color: var(--text); }
.d4tl-updated, .d4tl-legend { color: var(--muted); font-size: 13px; }
.d4tl-legend { margin-left: auto; }
.d4tl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.d4tl-chip { padding: 5px 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.d4tl-chip:hover { border-color: var(--gold); }
.d4tl-chip.is-on { background: var(--gold); border-color: var(--gold); color: #111; font-weight: 600; }
.d4tl-row { display: flex; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.d4tl-row[hidden], .d4tl-tile[hidden] { display: none; }
.d4tl-items { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; flex: 1; }
.d4tl-tile { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.d4tl-tile:hover { border-color: var(--gold); transform: translateY(-1px); }
.d4tl-tile img, .d4tl-noicon { width: 40px; height: 40px; border-radius: 6px; background: #101216; flex: none; }
.d4tl-name { font-size: 13px; line-height: 1.2; max-width: 150px; }
.d4tl-move { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 5px; line-height: 1.3; }
.d4tl-tile .d4tl-move { position: absolute; right: -6px; top: -7px; }
.d4tl-move.up { background: #3fae5b; color: #fff; } .d4tl-move.down { background: #d9534f; color: #fff; } .d4tl-move.new { background: #c9a24b; color: #111; }
.d4tl-legend .d4tl-move { position: static; }
.d4tl-empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.d4tl-log { margin-top: 18px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.d4tl-log summary { cursor: pointer; font-weight: 600; }
.d4tl-log-entry { margin-top: 10px; font-size: 13px; }
.d4tl-log-entry ul { margin: 6px 0 0 18px; color: var(--muted); }
@media (max-width: 600px) { .d4tl-letter { width: 40px; font-size: 20px; } .d4tl-name { max-width: 110px; } }

/* admin board */
.d4tl-admin .d4tl-board { display: flex; flex-direction: column; gap: 6px; max-width: 1100px; }
.d4tl-admin .d4tl-lane { display: flex; background: #fff; border: 1px solid #c3c4c7; border-radius: 8px; overflow: hidden; }
.d4tl-admin .d4tl-zone { flex: 1; min-height: 58px; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; align-content: flex-start; }
.d4tl-admin .d4tl-zone.is-over { background: #eef6fc; }
.d4tl-admin .d4tl-pool .d4tl-zone { background: #f6f7f7; }
.d4tl-admin .d4tl-item { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: #fff; border: 1px solid #c3c4c7; border-radius: 6px; cursor: grab; font-size: 12px; user-select: none; }
.d4tl-admin .d4tl-item img { width: 32px; height: 32px; border-radius: 4px; background: #1d2327; }
.d4tl-admin .d4tl-item.is-drag { opacity: .4; }

/* class filter with portraits */
.d4tl-chip-class { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; }
.d4tl-chip-class img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 60% 10%; background: #101216; border: 1px solid var(--line); }
.d4tl-chip-class.is-on img { border-color: #111; }