/* ============================================================
   Draconic card system — CRT / industrial styling.
   Shared layer: the .dc-gl glitch, .dc-grain scanlines, .dc-sweep,
   .dc-riv rivets and Oswald headings are deliberately generic so
   other pages (rankings, servers) can adopt the same look later.
   Every animation is disabled under prefers-reduced-motion.
   ============================================================ */

.dc-stage{perspective:1400px;padding:26px 0}
.dc-card{position:relative;width:min(1080px,calc(100% - 28px));margin:0 auto;border-radius:16px;overflow:hidden;
  background:#121013;border:1px solid #2a242c;color:#e8e8eb;box-shadow:0 30px 80px #000a;transition:transform .18s ease-out}

/* --- CRT overlays --- */
.dc-grain{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.05;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:dcFlick 5s steps(30) infinite}
@keyframes dcFlick{0%,96%{opacity:.05}97%{opacity:.1}98%{opacity:.03}100%{opacity:.05}}
.dc-sweep{position:absolute;left:0;right:0;height:80px;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,transparent,rgba(180,220,255,.05),transparent);animation:dcSweep 9s linear infinite}
@keyframes dcSweep{0%{top:-80px}100%{top:105%}}
.dc-riv{position:absolute;width:6px;height:6px;border-radius:50%;background:#3a3138;box-shadow:inset 0 1px 0 #5b5059;z-index:7}

/* --- glitch (RGB split) --- */
.dc-gl{position:relative;display:inline-block}
.dc-gl::before,.dc-gl::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none}
.dc-gl.on::before{opacity:.9;color:#22e6ff;animation:dcG1 .38s steps(2,end) 1}
.dc-gl.on::after{opacity:.9;color:#ff3355;animation:dcG2 .38s steps(2,end) 1}
@keyframes dcG1{0%{transform:translate(-3px,-1px);clip-path:inset(8% 0 66% 0)}40%{transform:translate(2px,1px);clip-path:inset(52% 0 28% 0)}70%{transform:translate(-2px,0);clip-path:inset(24% 0 48% 0)}100%{transform:translate(0);clip-path:inset(0 0 100% 0)}}
@keyframes dcG2{0%{transform:translate(3px,1px);clip-path:inset(60% 0 12% 0)}40%{transform:translate(-2px,-1px);clip-path:inset(18% 0 60% 0)}70%{transform:translate(2px,0);clip-path:inset(70% 0 8% 0)}100%{transform:translate(0);clip-path:inset(100% 0 0 0)}}

/* --- typography --- */
.dc-card .dc-lab,.dc-card .dc-h,.dc-name,.dc-num,.dc-rnum,.dc-title,.dc-tier,.dc-pill,.dc-tag,
.dc-slot b,.dc-casecount b,.dc-tchip,.dc-morelab b,.dc-poplv,.dc-lvl{
  font-family:Oswald,'Arial Narrow',Arial,sans-serif}
.dc-lab{font-size:8.5px;letter-spacing:.16em;color:#8a8d95;font-weight:500}
.dc-h{font-size:8.5px;letter-spacing:.16em;color:var(--accent,#ef5b57);font-weight:700}

/* --- hero --- */
.dc-hero{position:relative;z-index:1;display:flex;gap:16px;padding:20px 22px;
  background:linear-gradient(135deg,#241d29,#15111a 60%);border-bottom:2px solid var(--accent,#ef5b57)}
.dc-av{width:82px;height:82px;border-radius:13px;flex:none;object-fit:cover;border:2px solid var(--accent,#ef5b57);background:#2b2531}
.dc-id{min-width:0;flex:1}
.dc-pills{display:flex;gap:6px;flex-wrap:wrap}
.dc-tier{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--accent,#ef5b57);
  border:1px solid color-mix(in srgb,var(--accent,#ef5b57) 45%,transparent);
  background:color-mix(in srgb,var(--accent,#ef5b57) 9%,transparent);padding:3px 8px;border-radius:4px}
.dc-tier.alt{color:#f4c66c;border-color:#f4c66c66;background:#f4c66c14}
.dc-name-wrap{margin-top:7px}
.dc-name{font-weight:700;font-size:clamp(26px,4vw,34px);color:#fff;line-height:1.1;letter-spacing:.01em;word-break:break-word}
.dc-id p{margin:3px 0 0;font-size:12px;color:#9a9da5}
.dc-id a{color:#c9cbd1;text-decoration:none;border-bottom:1px solid #ffffff26}
.dc-rank{flex:none;text-align:right;border-left:1px solid #ffffff14;padding-left:16px}
.dc-rnum{font-weight:700;font-size:34px;color:#f4c66c;line-height:1.2}
.dc-of{font-size:10px;color:#8a8d95}

/* --- vitals: three headline numbers, then a compact rail ---
   Nine equal boxes each with a bar and a pill gave every stat the same weight,
   which is what made the top of the card hard to read. The hierarchy does the
   work now: three big numbers, then small label/value pairs. */
.dc-vitals{position:relative;z-index:1;background:#121013;border-top:1px solid #ffffff0f}
.dc-hero3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#ffffff0f}
.dc-big{background:#141116;padding:15px 18px 14px;min-width:0}
.dc-num{font-weight:700;font-size:30px;color:#fff;margin-top:5px;line-height:1.05;overflow-wrap:anywhere}
.dc-pill{display:inline-block;margin-top:8px;font-size:8.5px;font-weight:700;letter-spacing:.1em;color:#f4c66c;
  border:1px solid #f4c66c55;background:#f4c66c12;padding:2px 7px;border-radius:4px}
.dc-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#ffffff0d;border-top:1px solid #ffffff0f}
.dc-rl{display:flex;align-items:baseline;gap:8px;background:#121013;padding:10px 16px;min-width:0}
.dc-rl span{flex:1;min-width:0;font-family:Oswald,Arial,sans-serif;font-size:9px;letter-spacing:.13em;color:#8a8d95;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-rl b{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:16px;font-weight:700;color:#e8e8eb;flex:none}
.dc-rl.hot b{color:#fff}
.dc-rl i{flex:none;font-style:normal;font-size:8px;font-weight:700;letter-spacing:.08em;color:#f4c66c;
  border:1px solid #f4c66c4d;background:#f4c66c0f;padding:1px 5px;border-radius:4px}
.dc-railnote{padding:8px 16px 10px;font-size:10px;color:#6f727a;background:#121013;border-top:1px solid #ffffff0d}

/* --- lower two columns --- */
.dc-lower{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1px;
  background:#ffffff0f;border-top:1px solid #ffffff0f}
.dc-main,.dc-side{background:#121013;padding:18px 20px;min-width:0}
.dc-title{font-weight:700;font-size:21px;color:#fff;margin:5px 0 11px}
.dc-style{display:flex;height:9px;border-radius:5px;overflow:hidden;background:#ffffff10}
.dc-seg{display:block;height:100%;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.dc-legend{display:flex;gap:13px;flex-wrap:wrap;margin-top:9px;font-size:10.5px;color:#9a9da5}
.dc-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}

@keyframes dcShine{0%,62%{left:-120%}100%{left:130%}}

/* --- progress toward locked badges --- */
.dc-progs{margin-top:9px}
.dc-prog{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.dc-prog span{font-size:14px;flex:none}
.dc-prog em{font-style:normal;font-size:11px;color:#c9cbd1;flex:1;min-width:0}
.dc-ptrack{width:104px;height:5px;background:#ffffff14;border-radius:3px;overflow:hidden;flex:none}
.dc-ptrack .dc-seg{background:#9fb7ff}
.dc-prog u{text-decoration:none;font-size:10px;color:#8a8d95;width:30px;text-align:right;flex:none}

/* --- server journey --- */
.dc-srv{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #ffffff0d;min-width:0}
.dc-srv:last-child{border-bottom:0}
.dc-srv b{display:block;font-size:11.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-srv small{font-size:9.5px;color:#767982}
.dc-srvs{margin-top:10px}
.dc-tag{width:27px;height:27px;border-radius:7px;font-size:9px;font-weight:700;display:grid;place-items:center;flex:none}
.dc-member{margin-top:15px;padding:13px;border:1px solid #ffffff1a;border-radius:10px}
.dc-member div{font-family:Oswald,Arial,sans-serif;font-size:8.5px;letter-spacing:.14em;font-weight:700;color:#8a8d95}
.dc-member p{margin:6px 0 0;font-size:10.5px;color:#9a9da5;line-height:1.5}
.dc-member a{color:#f4c66c}

/* --- career ledger --- */
.dc-ledger{position:relative;z-index:1;padding:18px 20px;border-top:1px solid #ffffff0f}
.dc-ledger>p{margin:5px 0 4px;font-size:11.5px;color:#9a9da5}
.dc-card .close{position:absolute;top:14px;right:14px;z-index:8;width:34px;height:34px;border-radius:50%;
  border:1px solid #ffffff1f;background:#0c0b0dcc;color:#e8e8eb;font-size:17px;cursor:pointer;line-height:1}
.dc-card .close:hover{border-color:var(--accent,#ef5b57);color:#fff}

@media(max-width:820px){
  .dc-hero3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dc-num{font-size:24px}
  .dc-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-lower{grid-template-columns:1fr}
  .dc-hero{flex-wrap:wrap}
  .dc-rank{border-left:0;padding-left:0;text-align:left;width:100%}
}
@media(max-width:480px){
  .dc-hero3{grid-template-columns:1fr}
  .dc-rail{grid-template-columns:1fr}
  .dc-big{padding:11px 16px 10px}
  .dc-num{font-size:22px}
  .dc-rl{padding:8px 16px}
}

@media(prefers-reduced-motion:reduce){
  .dc-grain,.dc-sweep,.dc-slot.star:after{animation:none}
  .dc-card{transition:none}
  .dc-seg{transition:none}
  .dc-gl.on::before,.dc-gl.on::after{animation:none;opacity:0}
}

/* ============================================================
   Leaderboard board — same CRT theme as the profile card, but
   deliberately a BROADCAST not an object: no tilt, no rivets,
   no 3D. Live telemetry bar + data that streams in on load.
   ============================================================ */
.bd-board{position:relative;width:min(1180px,calc(100% - 28px));margin:22px auto 0;border-radius:14px;overflow:hidden;
  background:#0d0e11;border:1px solid #2a242c;color:#e8e8eb}
.bd-grain{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.05;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:dcFlick 5s steps(30) infinite}
.bd-scan{position:absolute;left:0;right:0;height:120px;pointer-events:none;z-index:5;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(120,220,255,.1),transparent)}
.bd-scan.run{animation:bdScan 1.5s ease-out 1}
@keyframes bdScan{0%{top:-120px;opacity:1}100%{top:105%;opacity:0}}

.bd-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding:16px 20px;background:linear-gradient(135deg,#241d29,#141018 60%);border-bottom:2px solid #ef5b57}
.bd-eyebrow{margin:0;font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.16em;color:#ef5b57;font-weight:700}
.bd-title{margin:4px 0 0;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:clamp(28px,4.2vw,40px);
  color:#fff;line-height:1.1;letter-spacing:.01em}
.bd-cur{display:inline-block;width:9px;height:.72em;background:#ef5b57;vertical-align:-2px;margin-left:6px;animation:bdBlink 1.1s steps(1) infinite}
@keyframes bdBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.bd-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.bd-chip{font-family:Oswald,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;padding:8px 14px;border-radius:6px;
  border:1px solid #ffffff1f;color:#a5a7ae;background:#0b0c0e;cursor:pointer}
.bd-chip:hover{color:#fff;border-color:#ef5b578c}
.bd-chip.selected,.bd-chip.on{color:#fff;border-color:#ef5b578c;background:#ef5b5721}
.bd-scope{display:flex;padding:4px;border:1px solid #ffffff1f;border-radius:8px;background:#0b0c0e}
.bd-scope button{font-family:Oswald,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;padding:7px 14px;border:0;
  border-radius:5px;color:#8a8d95;background:transparent;cursor:pointer}
.bd-scope button.selected{color:#fff;background:#ef5b5721;border:1px solid #ef5b574c}

/* live telemetry strip — the strongest cue that this is a feed, not a card */
.bd-tele{position:relative;z-index:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 20px;background:#0a0b0d;border-bottom:1px solid #ffffff0f}
.bd-tele span{font-family:Oswald,Arial,sans-serif;font-size:10.5px;letter-spacing:.16em;color:#8a8d95;font-weight:500}
.bd-tele b{color:#fff;font-weight:700}
.bd-tele .live{color:#4cde77}
.bd-tele .push{margin-left:auto}
.bd-dot{width:7px;height:7px;border-radius:50%;background:#4cde77;display:inline-block;margin-right:7px;animation:bdPulse 1.8s ease-in-out infinite}
@keyframes bdPulse{0%,100%{box-shadow:0 0 0 0 #4cde7799}70%{box-shadow:0 0 0 6px #4cde7700}}
.bd-tele a{color:#f4c66c;text-decoration:none}

.bd-bar{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 20px;border-bottom:1px solid #ffffff0f}
.bd-bar2{gap:10px}
.bd-lab{font-family:Oswald,Arial,sans-serif;font-size:10.5px;letter-spacing:.16em;color:#8a8d95;font-weight:500;margin-right:4px}
.bd-chips{display:flex;gap:7px;flex-wrap:wrap}
.bd-chips button b{color:#fff;margin-left:5px}
.bd-select{min-height:38px;padding:0 12px;border-radius:7px;border:1px solid #ffffff1f;background:#0b0c0e;color:#e8e8eb;font-size:13.5px;outline:none}
.bd-search{min-height:38px;padding:0 14px;border-radius:7px;border:1px solid #ffffff1f;background:#0b0c0e;color:#e8e8eb;font-size:13.5px;outline:none;margin-left:auto;min-width:180px}
.bd-search:focus,.bd-select:focus{border-color:#ef5b578c}

/* podium */
.bd-podium{position:relative;z-index:1;padding:16px 20px 6px}
.bd-podium .plabel{font-family:Oswald,Arial,sans-serif;font-size:10.5px;letter-spacing:.16em;color:#ef5b57;font-weight:700;margin-bottom:10px}
.bd-pods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.bd-pod{position:relative;overflow:hidden;border-radius:12px;padding:14px 12px;text-align:center;background:#121013;border:1px solid #ffffff14;cursor:pointer;color:inherit}
.bd-pod:hover{border-color:#ffffff33}
.bd-pod.gold{border-color:#f4c66c;background:#f4c66c0f;padding:20px 12px}
.bd-pod.silver{border-color:#cbd0d8;background:#cbd0d80c}
.bd-pod.bronze{border-color:#c58a66;background:#c58a660c}
.bd-pod.gold:after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);animation:dcShine 4s ease-in-out infinite}
.bd-medal{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:12px;margin:0 auto 8px}
.bd-pod.gold .bd-medal{width:30px;height:30px;font-size:13px;background:#f4c66c;color:#5c4400}
.bd-pod.silver .bd-medal{background:#cbd0d8;color:#3d4148}
.bd-pod.bronze .bd-medal{background:#c58a66;color:#4a2a12}
.bd-pod .pname{font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:17px;color:#fff;display:block}
.bd-pod.gold .pname{font-size:21px}
.bd-pod .pval{font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:31px;margin-top:4px;display:block}
.bd-pod.gold .pval{font-size:44px;color:#f4c66c}
.bd-pod.silver .pval{color:#cbd0d8}.bd-pod.bronze .pval{color:#c58a66}
.bd-pod .plab{font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.16em;color:#8a8d95;display:block;margin-top:2px}
.bd-pod .pbadges{margin-top:7px;display:block}
.bd-pod .pbadges i{font-style:normal;font-size:15px;margin:0 1px}

/* table */
.bd-tablewrap{position:relative;z-index:1;overflow-x:auto;border-top:1px solid #ffffff0f;margin-top:12px}
.bd-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.bd-table th{font-family:Oswald,Arial,sans-serif;font-size:10.5px;letter-spacing:.16em;color:#8a8d95;font-weight:500;
  text-align:left;padding:11px 16px;background:#0b0c0e;position:sticky;top:0;z-index:2}
.bd-table td{padding:11px 16px;border-bottom:1px solid #ffffff0d;font-size:14px;color:#bbbcc2}
.bd-table td.primary{font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:16px;color:#fff}
.bd-table tbody tr:hover td{background:#ef5b570b}

/* load-in: rows stream from the left, podium rises */
.bd-anim{opacity:0}
.bd-in-l{animation:bdInL .5s cubic-bezier(.2,.85,.25,1) forwards}
@keyframes bdInL{0%{opacity:0;transform:translateX(-18px)}100%{opacity:1;transform:none}}
.bd-in-u{animation:bdInU .55s cubic-bezier(.2,.85,.25,1) forwards}
@keyframes bdInU{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

@media(max-width:820px){
  .bd-head{align-items:flex-start;flex-direction:column}
  .bd-pods{grid-template-columns:1fr}
  .bd-pod.gold{order:-1}
  .bd-search{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .bd-grain,.bd-scan,.bd-cur,.bd-dot,.bd-pod.gold:after{animation:none}
  .bd-anim{opacity:1}
  .bd-in-l,.bd-in-u{animation:none}
}

/* ============================================================
   PODIUM PORTRAITS — top survivors get a face, the champion a crown
   ============================================================ */
.bd-pod .pav{position:relative;width:66px;height:66px;margin:2px auto 10px;display:block}
.bd-pod .pav img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2px solid #ffffff24;background:#0b0c0e}
.bd-pod.gold .pav{width:92px;height:92px;margin-bottom:12px}
.bd-pod.gold .pav img{border-color:#f4c66c;box-shadow:0 0 0 4px #f4c66c26,0 8px 26px #f4c66c3d}
.bd-pod.silver .pav{width:74px;height:74px}
.bd-pod.silver .pav img{border-color:#cbd0d8;box-shadow:0 0 0 3px #cbd0d820}
.bd-pod.bronze .pav{width:74px;height:74px}
.bd-pod.bronze .pav img{border-color:#c58a66;box-shadow:0 0 0 3px #c58a6620}

/* the rank medal rides on the portrait instead of floating above it */
.bd-pod .pav .bd-medal{position:absolute;right:-3px;bottom:-3px;margin:0;border:2px solid #121013;box-shadow:0 2px 8px #000a}

/* slanted crown, tipped on the champion's head with a slow sway */
.bd-crown{position:absolute;top:-26px;left:50%;font-size:34px;line-height:1;pointer-events:none;
  transform-origin:62% 88%;filter:drop-shadow(0 3px 6px #000a);
  transform:translateX(-62%) rotate(-25deg);animation:bdCrown 4.2s ease-in-out infinite}
@keyframes bdCrown{
  0%,100%{transform:translateX(-62%) rotate(-25deg) translateY(0)}
  50%{transform:translateX(-62%) rotate(-18deg) translateY(-3px)}
}

/* ============================================================
   PODIUM ROWS in the table.
   Drawn with inset box-shadows, never borders. With border-collapse
   adjacent rows SHARE an edge, so row 1's gold bottom beat row 2's
   silver top and every medal line rendered one row too low; the extra
   4px/1px side borders also pushed the table past 100% and frayed the
   right edge. Inset shadows take no layout space and never collapse.
   ============================================================ */
.bd-table tbody tr.podium-1{--medal:#f4c66c}
.bd-table tbody tr.podium-2{--medal:#cbd0d8}
.bd-table tbody tr.podium-3{--medal:#c58a66}
.bd-table tbody tr.podium-1 td,.bd-table tbody tr.podium-2 td,.bd-table tbody tr.podium-3 td{
  border-bottom-color:transparent;
  box-shadow:inset 0 2px 0 0 var(--medal),inset 0 -2px 0 0 var(--medal)}
.bd-table tbody tr.podium-1 td:first-child,.bd-table tbody tr.podium-2 td:first-child,.bd-table tbody tr.podium-3 td:first-child{
  box-shadow:inset 0 2px 0 0 var(--medal),inset 0 -2px 0 0 var(--medal),inset 4px 0 0 0 var(--medal)}
.bd-table tbody tr.podium-1 td:last-child,.bd-table tbody tr.podium-2 td:last-child,.bd-table tbody tr.podium-3 td:last-child{
  box-shadow:inset 0 2px 0 0 var(--medal),inset 0 -2px 0 0 var(--medal),inset -2px 0 0 0 var(--medal)}
.bd-table tbody tr.podium-1 td{background:#f4c66c14}
.bd-table tbody tr.podium-2 td{background:#cbd0d812}
.bd-table tbody tr.podium-3 td{background:#c58a6614}
.bd-table tbody tr.podium-1:hover td{background:#f4c66c1f}
.bd-table tbody tr.podium-2:hover td{background:#cbd0d81c}
.bd-table tbody tr.podium-3:hover td{background:#c58a661f}

/* ============================================================
   MEDAL PROFILE CARDS — top 3 by Survivor Score
   ============================================================ */
.dc-card.dc-m1{--medal:#f4c66c}
.dc-card.dc-m2{--medal:#cbd0d8}
.dc-card.dc-m3{--medal:#c58a66}
.dc-card.dc-m1,.dc-card.dc-m2,.dc-card.dc-m3{border-color:var(--medal)}
.dc-card.dc-m1{box-shadow:0 34px 100px #000d,0 0 0 1px #f4c66c66,0 0 70px #f4c66c26}
.dc-card.dc-m2{box-shadow:0 34px 100px #000d,0 0 0 1px #cbd0d84d}
.dc-card.dc-m3{box-shadow:0 34px 100px #000d,0 0 0 1px #c58a664d}
.dc-card.dc-m1 .dc-hero,.dc-card.dc-m2 .dc-hero,.dc-card.dc-m3 .dc-hero{
  background:linear-gradient(135deg,color-mix(in srgb,var(--medal) 14%,transparent),transparent 62%)}
.dc-card.dc-m1 .dc-av,.dc-card.dc-m2 .dc-av,.dc-card.dc-m3 .dc-av{
  border-color:var(--medal);box-shadow:0 0 0 4px color-mix(in srgb,var(--medal) 18%,transparent)}
/* medal ribbon across the top edge */
.dc-card.dc-m1:before,.dc-card.dc-m2:before,.dc-card.dc-m3:before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:7;
  background:linear-gradient(90deg,transparent,var(--medal),transparent)}
.dc-crest{display:inline-flex;align-items:center;gap:6px;font-family:Oswald,Arial,sans-serif;font-size:10px;
  font-weight:700;letter-spacing:.14em;padding:4px 10px;border-radius:20px;
  color:var(--medal);border:1px solid color-mix(in srgb,var(--medal) 45%,transparent);
  background:color-mix(in srgb,var(--medal) 12%,transparent)}
.dc-crest b{font-size:13px;line-height:1}

/* ============================================================
   GUIDE OVERLAYS (badges + scoring) rethemed to the broadcast look
   ============================================================ */
.badge-overlay{background:rgba(2,3,5,.94)}
.badge-guide{background:#0d0e11;border:1px solid #2a242c;border-radius:14px;padding:0 0 26px;
  overflow:hidden;box-shadow:0 35px 110px #000}
.badge-guide:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.05;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:dcFlick 5s steps(30) infinite}
.badge-guide .bg-head:first-of-type{margin:0;padding:20px 30px 18px;
  background:linear-gradient(135deg,#241d29,#141018 60%);border-bottom:2px solid #ef5b57}
.badge-guide .bg-head span{font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.16em;color:#ef5b57;font-weight:700}
.badge-guide .bg-head h2{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;letter-spacing:.01em;
  font-size:clamp(24px,3.4vw,32px);color:#fff;margin:6px 0 10px}
.badge-guide .bg-head p{font-size:14px;color:#9a9da5;line-height:1.7;max-width:660px;margin:0}
.badge-guide>*:not(.bg-head):not(.close):not(.bg-foot){margin-left:30px;margin-right:30px}
.badge-guide .bg-cat{margin:24px 0 4px}
.badge-guide .bg-cat span{font-family:Oswald,Arial,sans-serif;font-size:11px;letter-spacing:.16em}
.badge-guide .bg-cat i{font-family:Oswald,Arial,sans-serif;font-size:10px}
.badge-guide .badge{border-radius:10px;background:#121013;border-color:#ffffff14}
.badge-guide .badge.earned{background:linear-gradient(160deg,#f4c66c0f,#121013 60%);border-color:#f4c66c33}
.badge-guide .badge b{font-family:Oswald,Arial,sans-serif;font-size:14px;letter-spacing:.02em}
.badge-guide .badge small{font-size:11.5px;line-height:1.5}
.badge-guide .badge span{font-size:24px}
.badge-guide .bg-foot{font-family:Oswald,Arial,sans-serif;font-size:11px;letter-spacing:.12em;color:#6f727a;
  margin-top:22px;padding:0 30px}
.badge-guide .close{border-radius:8px;width:34px;height:34px;border:1px solid #ffffff26;background:#0b0c0eb8;z-index:9}
.badge-guide .close:hover{border-color:#ef5b57;color:#fff}

/* scoring guide — weight bars */
.sg-wrap{margin-top:22px}
.sg-row{margin-bottom:16px}
.sg-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sg-name{font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:15px;color:#f3f3f4;letter-spacing:.02em}
.sg-pts{font-family:Oswald,Arial,sans-serif;font-size:13.5px;font-weight:700;white-space:nowrap}
.sg-pts u{text-decoration:none;color:#6f727a;font-weight:400;letter-spacing:.08em}
.sg-track{height:10px;background:#ffffff10;border-radius:5px;margin-top:6px;overflow:hidden}
.sg-fill{height:100%;border-radius:5px}
.sg-note{font-size:12px;color:#8f929b;margin-top:6px;line-height:1.55}
.sg-focus{margin-top:8px;padding:18px 30px 0;border-top:1px solid #ffffff17}
.sg-focus h2{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:18px;color:#fff;margin:0 0 8px;letter-spacing:.02em}
.sg-focus p{font-size:14px;color:#9a9da5;line-height:1.75;margin:0}

@media(max-width:820px){
  .badge-guide>*:not(.bg-head):not(.close):not(.bg-foot){margin-left:18px;margin-right:18px}
  .badge-guide .bg-head:first-of-type{padding:18px}
  .sg-focus{padding-left:18px;padding-right:18px}
}
@media(prefers-reduced-motion:reduce){
  .bd-crown{animation:none}
  .badge-guide:before{animation:none}
}

/* ============================================================
   DOG TAGS - collectible kill cards with layered foil.

   Seven layers, switched on by tier rather than recoloured:
     rays   sunburst, masked hollow so it only catches the border
     weave  fine crosshatch, reads as physical foil texture
     prism  pastel spectrum under soft-light, masked to the viewing
            angle - diffraction, so it DOES follow the pointer
     spec   the specular reflection: driven by surface TILT, moves
            opposite to and further than the pointer, and carries the
            same easing as the card so the two settle as one object
     spec2  the wider, dimmer second reflection real gloss has
     spark  discrete four-point stars, irregular and out of phase
     edge   inset rim
   Colours are all from the existing palette.
   ============================================================ */
@keyframes dtSpin{to{transform:rotate(360deg)}}
@keyframes dtSpark{
  0%,82%,100%{opacity:0;transform:scale(.15) rotate(0deg)}
  87%{opacity:1;transform:scale(1) rotate(22deg)}
  91%{opacity:.35;transform:scale(.55) rotate(38deg)}
}
@keyframes dtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.dt-band{position:relative;z-index:1;background:#121013;padding:18px 20px 20px;border-top:1px solid #ffffff0f}
.dt-band[hidden]{display:none}
.dt-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dt-sub{font-size:11px;color:#6f727a;letter-spacing:.04em}
.dt-lab{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:8.5px;letter-spacing:.16em;color:#8a8d95;font-weight:500}

.dt-r-leg{--dtr:#f4c66c;--dtsop:.52}
.dt-r-epi{--dtr:#d057ff;--dtsop:.40}
.dt-r-rar{--dtr:#9fb7ff;--dtsop:.30}
.dt-r-unc{--dtr:#4cde77;--dtsop:.20}
.dt-r-com{--dtr:#8a8d95;--dtsop:0}

.dt-tally{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#ffffff0f;
  border:1px solid #ffffff0f;border-radius:8px;overflow:hidden;margin:12px 0 20px}
.dt-tally div{background:#121013;padding:10px 12px;border-top:2px solid var(--dtr)}
.dt-tally u{display:block;text-decoration:none;font-family:Oswald,Arial,sans-serif;font-size:8.5px;
  letter-spacing:.16em;color:var(--dtr);font-weight:700}
.dt-tally b{display:block;font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:22px;color:#fff;margin-top:3px;line-height:1}
.dt-tally s{display:block;text-decoration:none;font-size:9.5px;color:#6f727a;margin-top:2px}

.dt-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:26px 18px;perspective:1100px}
.dt-stack{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  text-align:left;font:inherit;color:inherit}
.dt-stack:focus-visible{outline:2px solid var(--dtr);outline-offset:5px;border-radius:13px}
.dt-dup{position:absolute;inset:0;border-radius:12px;background:#15131a;border:1px solid var(--dtr);opacity:.4;z-index:0}
.dt-count{position:absolute;top:-10px;right:-10px;z-index:11;min-width:28px;height:28px;padding:0 7px;border-radius:14px;
  display:grid;place-items:center;font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:13px;
  color:#141118;background:var(--dtr);border:2px solid #121013;box-shadow:0 3px 10px #0009}
.dt-r-leg .dt-count{background:linear-gradient(140deg,#ffe9a8,#f4c66c,#b8842f);color:#3d2c00}

.dt-frame{position:relative;display:block;z-index:2;padding:2px;border-radius:12px;overflow:hidden;background:#2a2630}
.dt-card{position:relative;display:block;aspect-ratio:63/88;border-radius:10px;overflow:hidden;
  background:linear-gradient(170deg,#1a1720,#0e0d12);transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s}
.dt-art{position:absolute;inset:0 0 44% 0;overflow:hidden;z-index:1;display:block}
.dt-art img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease-out}
.dt-stack:hover .dt-art img{transform:scale(1.05)}
.dt-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#0e0d12f2 92%)}
.dt-rk{position:absolute;top:6px;left:8px;z-index:9;font-family:Oswald,Arial,sans-serif;font-weight:700;
  font-size:15px;line-height:1;color:var(--dtr);text-shadow:0 2px 8px #000}
.dt-sv{position:absolute;top:7px;right:7px;z-index:9;font-family:Oswald,Arial,sans-serif;font-size:7.5px;
  letter-spacing:.14em;padding:2px 5px;border-radius:3px;background:#0a0a0bcc;border:1px solid #ffffff26;color:#c9cbd1}
.dt-body{position:absolute;left:0;right:0;bottom:0;height:44%;padding:8px 9px;z-index:8;display:flex;flex-direction:column}
.dt-nm{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:13px;color:#fff;line-height:1.1;
  text-shadow:0 2px 8px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.dt-rarity{font-family:Oswald,Arial,sans-serif;font-size:7.5px;letter-spacing:.2em;font-weight:700;color:var(--dtr);margin-top:auto;display:block}
.dt-when{font-size:9px;color:#6f727a;letter-spacing:.04em;display:block;margin-top:2px}
.dt-ser{font-family:Oswald,Arial,sans-serif;font-size:7.5px;letter-spacing:.12em;color:#4f525a;margin-top:2px;display:block}

/* ---- the layers ---- */
.dt-rays,.dt-weave,.dt-prism,.dt-spark,.dt-spec,.dt-spec2,.dt-edge{
  position:absolute;pointer-events:none;border-radius:inherit;display:block}
.dt-rays{left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;z-index:2;opacity:0;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 5deg,#ffffff10 5deg 10deg);animation:dtSpin 30s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 22%,#000 30%,#000 44%,transparent 49%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 22%,#000 30%,#000 44%,transparent 49%)}
.dt-weave{inset:0;z-index:3;opacity:0;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(58deg,#fff 0 1px,transparent 1px 6px),
                   repeating-linear-gradient(-58deg,#fff 0 1px,transparent 1px 6px)}
.dt-prism{inset:0;z-index:4;opacity:0;mix-blend-mode:soft-light;filter:blur(4px) saturate(.85);
  background:repeating-linear-gradient(106deg,
    #e8798f 0 18px,#e8b07a 18px 36px,#e6dd93 36px 54px,
    #93d6a6 54px 72px,#93b6e8 72px 90px,#bda3e0 90px 108px);
  -webkit-mask-image:radial-gradient(150% 85% at var(--dpx,50%) var(--dpy,42%),#000 0%,#0007 34%,transparent 66%);
  mask-image:radial-gradient(150% 85% at var(--dpx,50%) var(--dpy,42%),#000 0%,#0007 34%,transparent 66%)}
.dt-spec{top:-45%;bottom:-45%;left:50%;width:50%;margin-left:-25%;z-index:6;
  filter:blur(26px);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,#ffffff1f 26%,#ffffff59 50%,#ffffff1f 74%,transparent);
  transform:translate3d(var(--dsx,0px),var(--dsy,0px),0) rotate(var(--dsr,-16deg)) scaleY(var(--dss,1));
  transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .45s;
  opacity:var(--dtsop,0)}
.dt-spec2{top:-45%;bottom:-45%;left:50%;width:78%;margin-left:-39%;z-index:5;
  filter:blur(47px);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,#ffffff14 40%,#ffffff24 50%,#ffffff14 60%,transparent);
  transform:translate3d(calc(var(--dsx,0px) * -.45),calc(var(--dsy,0px) * -.45),0) rotate(var(--dsr,-16deg));
  transition:transform .55s cubic-bezier(.2,.8,.3,1),opacity .45s;
  opacity:calc(var(--dtsop,0) * .7)}
.dt-spark{inset:0;z-index:7;opacity:0;overflow:hidden}
.dt-spark i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2);
  opacity:0;background:radial-gradient(circle,#fff 0%,#ffffffcc 38%,transparent 72%);
  clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
  animation:dtSpark var(--t) ease-in-out var(--d) infinite}
.dt-spark i.warm{background:radial-gradient(circle,#fff 0%,#ffe9a8cc 40%,transparent 72%)}
.dt-edge{inset:0;z-index:10;box-shadow:inset 0 0 0 1px #ffffff1a}

/* ---- tier escalation ---- */
.dt-r-com .dt-frame{background:#2a2630}
.dt-r-com .dt-art img{filter:grayscale(1) brightness(.72)}
.dt-r-unc .dt-frame{background:linear-gradient(160deg,#4cde7755,#2a2630)}
.dt-r-unc .dt-art img{filter:grayscale(.75)}
.dt-r-rar .dt-frame{background:linear-gradient(160deg,#9fb7ff,#39406b 60%,#9fb7ff)}
.dt-r-rar .dt-art img{filter:grayscale(.45) contrast(1.05)}
.dt-r-rar .dt-weave{opacity:.07}
.dt-r-rar .dt-card{box-shadow:0 0 16px -7px #9fb7ff55}
.dt-r-epi .dt-frame{background:conic-gradient(from 0deg,#d057ff,#7a3bd6,#d057ff,#5b2a9e,#d057ff)}
.dt-r-epi .dt-art img{filter:contrast(1.08) saturate(1.03)}
.dt-r-epi .dt-rays{opacity:.4}
.dt-r-epi .dt-weave{opacity:.1}
.dt-r-epi .dt-prism{opacity:.5}
.dt-r-epi .dt-spark{opacity:.75}
.dt-r-epi .dt-card{box-shadow:0 0 22px -8px #d057ff66}
.dt-r-leg .dt-frame{padding:4px;background:#0b0b0d}
.dt-r-leg .dt-frame:before{content:"";position:absolute;inset:-60%;z-index:0;opacity:1;
  background:conic-gradient(from 0deg,#e8798f,#e8b07a,#e6dd93,#93d6a6,#93b6e8,#bda3e0,#e8798f);
  animation:dtSpin 7s linear infinite}
.dt-r-leg .dt-art img{filter:contrast(1.1) saturate(1.08)}
.dt-r-leg .dt-rays{opacity:.75;background:repeating-conic-gradient(from 0deg,transparent 0deg 4deg,#ffd60a1c 4deg 8deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 20%,#000 28%,#000 44%,transparent 49%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 20%,#000 28%,#000 44%,transparent 49%)}
.dt-r-leg .dt-weave{opacity:.12}
.dt-r-leg .dt-prism{opacity:.72}
.dt-r-leg .dt-spark{opacity:1}
.dt-r-leg .dt-edge{box-shadow:inset 0 0 0 1px #ffe9a855,inset 0 0 24px -8px #ffd60a44}
.dt-r-leg .dt-card{box-shadow:0 0 26px -8px #f4c66c88,0 14px 34px -14px #000}
.dt-r-leg .dt-nm{text-shadow:0 0 12px #ffd60a66,0 2px 8px #000}
.dt-stack.dt-r-leg{animation:dtFloat 5s ease-in-out infinite}

/* ---- tags lost ---- */
.dt-lostwrap{margin-top:22px;padding-top:14px;border-top:1px solid #ffffff0f}
.dt-lostrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px}
.dt-lost{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:20px;
  border:1px solid #ffffff14;background:#ffffff06}
.dt-lost img{width:24px;height:24px;border-radius:50%;object-fit:cover;filter:grayscale(.4)}
.dt-lost span{font-size:10.5px;color:#6f727a}
.dt-lost b{font-family:Oswald,Arial,sans-serif;font-size:12px;color:#ef5b57;font-weight:700}
.dt-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:16px;padding-top:14px;border-top:1px solid #ffffff0f}
.dt-legend span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#8a8d95;letter-spacing:.1em}
.dt-legend i{width:8px;height:8px;border-radius:2px;background:var(--dtr);flex:none}

/* ---- viewer ---- */
.dt-view{position:fixed;inset:0;z-index:80;display:none;padding:24px;overflow:auto;
  background:rgba(3,4,6,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dt-view.open{display:flex;align-items:center;justify-content:center}
.dt-panel{position:relative;display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center;
  width:min(760px,100%);padding:26px;border-radius:16px;background:#121013;border:1px solid #2a242c;
  box-shadow:0 30px 80px #000a;perspective:1100px}
.dt-panel .dt-grain{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.05;border-radius:16px;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:dcFlick 5s steps(30) infinite}
.dt-close{position:absolute;top:12px;right:12px;z-index:12;width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:1px solid #ffffff26;background:#0b0c0eb8;color:#c9cbd1;font-size:17px;line-height:1}
.dt-close:hover{border-color:#ef5b57;color:#fff}
.dt-big{position:relative;z-index:2;display:block;width:274px;flex:none;aspect-ratio:63/88;border-radius:12px;
  overflow:hidden;background:linear-gradient(170deg,#1a1720,#0e0d12);border:2px solid var(--dtr);
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 20px 46px -18px #000,0 0 34px -12px var(--dtr)}
/* The enlarged viewer card has no .dt-frame wrapper, so it never inherited the
   rainbow ring the small cards get. Drawn here as a masked border instead, which
   needs no extra element and follows the card's own radius. */
.dt-big.dt-r-leg,.dt-big.dt-r-epi{border-color:transparent}
.dt-big.dt-r-leg:before,.dt-big.dt-r-epi:before{
  content:"";position:absolute;inset:0;z-index:11;pointer-events:none;border-radius:12px;padding:3px;
  background:conic-gradient(from 0deg,#e8798f,#e8b07a,#e6dd93,#93d6a6,#93b6e8,#bda3e0,#e8798f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;animation:dcHue 7s linear infinite}
.dt-big.dt-r-epi:before{opacity:.55;padding:2px}
.dt-big.dt-r-leg{box-shadow:0 20px 46px -18px #000,0 0 40px -10px #f4c66caa}

.dt-big .dt-rk{top:9px;left:11px;font-size:26px}
.dt-big .dt-sv{top:11px;right:11px;font-size:9px;padding:3px 7px}
.dt-big .dt-nm{font-size:21px}
.dt-big .dt-body{padding:13px 14px}
.dt-big .dt-rarity{font-size:10px;letter-spacing:.2em}
.dt-big .dt-when{font-size:12px}
.dt-big .dt-ser{font-size:9.5px;margin-top:4px}
.dt-info{position:relative;z-index:2;flex:1;min-width:250px}
.dt-info .dc-h{display:block;margin-bottom:10px}
.dt-kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:12.5px;color:#b8bac0}
.dt-kv+.dt-kv{border-top:1px solid #ffffff0f}
.dt-kv b{color:#fff;font-weight:400}
.dt-kv b.r{color:var(--dtr)}
.dt-log{margin-top:4px;max-height:196px;overflow:auto}
.dt-log button{display:flex;width:100%;gap:11px;align-items:center;padding:8px 9px;border-radius:7px;cursor:pointer;
  border:1px solid transparent;background:none;color:inherit;font:inherit;text-align:left}
.dt-log button+button{margin-top:2px}
.dt-log button:hover{background:#ffffff08}
.dt-log button.on{border-color:var(--dtr);background:color-mix(in srgb,var(--dtr) 12%,transparent)}
.dt-log .n{font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.12em;color:var(--dtr);flex:none;width:64px}
.dt-log .d{font-size:12px;color:#c9cbd1;flex:1}
.dt-log .s{font-size:10.5px;color:#6f727a;flex:none}
.dt-nav{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff0f}
.dt-nav button{width:32px;height:32px;border-radius:8px;cursor:pointer;border:1px solid #ffffff1f;
  background:#0b0c0e;color:#c9cbd1;font-size:14px;line-height:1}
.dt-nav button:hover:not(:disabled){border-color:var(--dtr);color:#fff}
.dt-nav button:disabled{opacity:.35;cursor:default}
.dt-nav .pos{font-family:Oswald,Arial,sans-serif;font-size:11px;letter-spacing:.14em;color:#8a8d95}
.dt-nav .hint{margin-left:auto;font-size:10.5px;color:#4f525a;letter-spacing:.06em}

@media(max-width:640px){.dt-tally{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt-panel{padding:20px}.dt-big{width:212px}}
@media(prefers-reduced-motion:reduce){
  .dt-rays,.dt-spark i,.dt-stack.dt-r-leg,.dt-r-leg .dt-frame:before{animation:none}
  .dt-card,.dt-big,.dt-spec,.dt-spec2{transition:none}
}

/* ============================================================
   PROFILE CARD TIERS

   Two independent axes so they stack without competing:
     .dc-r-*    RANK, earned by playing -> the foil
     .dc-mem-*  MEMBERSHIP, bought      -> the material
     .dc-auth-* STAFF, appointed        -> authority, deliberately
                not a rarity: no foil, no sparkle, no rainbow
   ============================================================ */
@keyframes dcSpinFx{to{transform:rotate(360deg)}}
@keyframes dcSparkFx{0%,82%,100%{opacity:0;transform:scale(.15)}87%{opacity:1;transform:scale(1)}91%{opacity:.35;transform:scale(.55)}}
@keyframes dcHue{to{filter:hue-rotate(360deg)}}
@keyframes dcAura{0%,100%{opacity:.3}50%{opacity:.7}}
@keyframes dcEmber{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-52px);opacity:0}}
@keyframes dcScan{0%{top:-30%}100%{top:130%}}

.dc-foil{position:relative}
.dc-fx{position:absolute;pointer-events:none;z-index:0}
/* Rotating a NON-SQUARE box sweeps its long edges through view, and a mask that
   stays opaque to the edge lets that boundary show. So: force a square via
   aspect-ratio (the inscribed circle is then constant under rotation), and fade
   the mask out at 48% - inside the 50% inscribed circle - so the element's own
   edge is always fully transparent and can never be seen. */
.dc-rays{left:50%;top:150px;width:130%;aspect-ratio:1;translate:-50% -50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 5deg,#ffffff10 5deg 10deg);
  animation:dcSpinFx 34s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 18%,#000 30%,#000 44%,transparent 48%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 18%,#000 30%,#000 44%,transparent 48%)}
.dc-weave{inset:0;opacity:0;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(58deg,#fff 0 1px,transparent 1px 6px),
                   repeating-linear-gradient(-58deg,#fff 0 1px,transparent 1px 6px)}
.dc-prism{left:0;right:0;top:0;height:260px;opacity:0;mix-blend-mode:soft-light;filter:blur(5px) saturate(.85);
  background:repeating-linear-gradient(106deg,#e8798f 0 20px,#e8b07a 20px 40px,#e6dd93 40px 60px,
    #93d6a6 60px 80px,#93b6e8 80px 100px,#bda3e0 100px 120px);
  -webkit-mask-image:radial-gradient(140% 90% at 50% 35%,#000 0%,transparent 68%);
  mask-image:radial-gradient(140% 90% at 50% 35%,#000 0%,transparent 68%)}
.dc-spark{left:0;right:0;top:0;height:240px;opacity:0;overflow:hidden}
.dc-spark i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2);
  opacity:0;background:radial-gradient(circle,#fff 0%,#ffffffcc 38%,transparent 72%);
  clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
  animation:dcSparkFx var(--t) ease-in-out var(--d) infinite}

/* The rainbow outline. Drawn as a masked border ring so it hugs the card's own
   radius instead of needing a wrapper element, and hue-rotated so it travels. */
.dc-ring{inset:0;border-radius:16px;padding:3px;z-index:9;opacity:0;
  background:conic-gradient(from 0deg,#e8798f,#e8b07a,#e6dd93,#93d6a6,#93b6e8,#bda3e0,#e8798f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;animation:dcHue 7s linear infinite}

/* rank escalation */
.dc-r-rar .dc-weave{opacity:.05}
.dc-r-epi .dc-rays{opacity:.3}
.dc-r-epi .dc-weave{opacity:.08}
.dc-r-epi .dc-prism{opacity:.36}
.dc-r-epi .dc-spark{opacity:.7}
.dc-r-leg .dc-rays{opacity:.55;background:repeating-conic-gradient(from 0deg,transparent 0deg 4deg,#ffd60a1c 4deg 8deg)}   /* mask inherited from .dc-rays */
.dc-r-leg .dc-weave{opacity:.1}
.dc-r-leg .dc-prism{opacity:.55}
.dc-r-leg .dc-spark{opacity:1}
.dc-r-leg .dc-ring{opacity:1}
.dc-r-leg .dc-name{text-shadow:0 0 14px #ffd60a55}
.dc-r-epi .dc-ring{opacity:.5}

/* ---- membership materials ---- */
.dc-mem-vip .dc-hero{background:linear-gradient(135deg,#1c2a1e,#15111a 62%)}
.dc-mem-elite .dc-hero{background:linear-gradient(135deg,#2e2216,#15111a 62%)}
.dc-mem-legend .dc-hero{background:linear-gradient(135deg,#301b1a,#15111a 62%)}
.dc-mem-legend .dc-ember{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#f0524d;
  filter:blur(1px);z-index:2;animation:dcEmber 3.6s ease-out infinite;pointer-events:none}
.dc-mem-godly .dc-hero{background:linear-gradient(135deg,#2a1b3d,#15111a 62%)}
.dc-velvet{left:0;right:0;top:0;height:230px;opacity:0;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(74deg,#c07bf5 0 1px,transparent 1px 4px)}
.dc-halo{left:-30%;right:-30%;top:-160px;height:520px;opacity:0;
  background:radial-gradient(closest-side,#c07bf53d,transparent 70%);animation:dcAura 5s ease-in-out infinite}
.dc-mem-godly .dc-velvet{opacity:.45}
.dc-mem-godly .dc-halo{opacity:1}
.dc-fil{position:absolute;z-index:8;width:26px;height:26px;pointer-events:none;opacity:0;border:1px solid #c07bf5}
.dc-fil.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.dc-fil.br{bottom:10px;right:10px;border-left:0;border-top:0}
.dc-mem-godly .dc-fil{opacity:.55}

/* ---- staff: authority, not rarity ---- */
.dc-auth-staff,.dc-auth-admin{--authc:#9fb7ff}
.dc-auth-admin{--authc:#f4c66c}
.dc-auth-staff .dc-hero,.dc-auth-admin .dc-hero{background:linear-gradient(135deg,#191d27,#111318 62%)}
.dc-auth-admin .dc-hero{background:linear-gradient(135deg,#241f16,#141210 62%)}
.dc-plate{inset:0;opacity:0;background:repeating-linear-gradient(96deg,#ffffff05 0 2px,transparent 2px 4px)}
.dc-scan{left:0;right:0;height:30%;opacity:0;z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--authc) 16%,transparent),transparent);
  animation:dcScan 6s linear infinite}
.dc-auth-staff .dc-plate,.dc-auth-admin .dc-plate{opacity:.5}
.dc-auth-staff .dc-scan,.dc-auth-admin .dc-scan{opacity:.35}
.dc-seal{position:absolute;right:20px;top:56px;z-index:8;width:76px;height:76px;border-radius:50%;opacity:0;
  transform:rotate(-8deg);border:2px solid color-mix(in srgb,var(--authc) 55%,transparent);
  display:grid;place-items:center;text-align:center;font-family:Oswald,Arial,sans-serif;font-weight:700;
  font-size:8.5px;letter-spacing:.1em;line-height:1.25;color:color-mix(in srgb,var(--authc) 85%,transparent);
  pointer-events:none}
.dc-seal:before{content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--authc) 35%,transparent)}
.dc-auth-staff .dc-seal,.dc-auth-admin .dc-seal{opacity:.9}
/* staff never get the rainbow or the sparkle, whatever their rank */
.dc-auth-staff .dc-ring,.dc-auth-admin .dc-ring,
.dc-auth-staff .dc-spark,.dc-auth-admin .dc-spark,
.dc-auth-staff .dc-prism,.dc-auth-admin .dc-prism{opacity:0}

@media(prefers-reduced-motion:reduce){
  .dc-rays,.dc-spark i,.dc-ring,.dc-halo,.dc-scan,.dc-mem-legend .dc-ember{animation:none}
}

/* ============================================================
   SERVER PICKER - the primary control on the board.
   There is no "all servers" and no "all time": each server is
   ranked on its own, for the wipe currently running on it.
   ============================================================ */
.bd-servers{position:relative;z-index:1;padding:14px 20px;background:#0a0b0d;border-bottom:1px solid #ffffff0f}
.bd-servertabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.bd-servertab{position:relative;display:flex;flex-direction:column;gap:3px;padding:11px 14px;cursor:pointer;
  border-radius:10px;border:1px solid #ffffff14;background:#121013;text-align:left;color:inherit;font:inherit;
  transition:border-color .2s,background .2s,transform .2s}
.bd-servertab:hover{border-color:#ffffff2e;transform:translateY(-1px)}
.bd-servertab:focus-visible{outline:2px solid #ef5b57;outline-offset:3px}
.bd-servertab .nm{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:14px;color:#c9cbd1;
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-servertab .meta{display:flex;align-items:center;gap:7px;font-family:Oswald,Arial,sans-serif;font-size:9.5px;
  letter-spacing:.14em;color:#6f727a}
.bd-servertab .meta b{color:#8a8d95;font-weight:700}
.bd-servertab .dot{width:6px;height:6px;border-radius:50%;background:#4cde77;flex:none}
.bd-servertab .dot.off{background:#5a5f68}
.bd-servertab.selected{border-color:#ef5b578c;background:linear-gradient(135deg,#ef5b5714,#121013 70%)}
.bd-servertab.selected .nm{color:#fff}
.bd-servertab.selected .meta b{color:#ef5b57}
.bd-servertab.selected:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,#ef5b57,transparent)}
@media(max-width:560px){.bd-servertabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   DISPLAY CASE - the badge collection as an object you browse.
   Every badge in the game gets a slot whether it is held or not:
   the gaps are the point, they are what makes the set feel
   collectable. Rarity reuses the dog tag --dtr token, so a
   LEGENDARY badge and a LEGENDARY tag are the same gold and the
   two collections read as one system.
   ============================================================ */
.dc-case{position:relative;z-index:1;padding:18px 20px 20px;border-top:1px solid #ffffff0f;
  background:linear-gradient(180deg,#16121b,#121013 62%)}
.dc-casehead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.dc-casecount{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.dc-casecount b{font-weight:700;font-size:31px;color:#fff;line-height:1}
.dc-casecount s{text-decoration:none;font-size:11.5px;color:#8a8d95}
.dc-casetally{display:flex;gap:6px;flex-wrap:wrap}
.dc-tchip{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.14em;
  color:var(--dtr,#8a8d95);padding:3px 8px;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--dtr,#8a8d95) 45%,transparent);
  background:color-mix(in srgb,var(--dtr,#8a8d95) 10%,transparent)}
.dc-tchip b{font-size:12px;color:#fff;font-weight:700}
.dc-casebar{height:5px;border-radius:3px;background:#ffffff12;overflow:hidden;margin:13px 0 14px}
.dc-casebar .dc-seg{background:linear-gradient(90deg,var(--accent,#ef5b57),#f4c66c)}

.dc-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:9px}
.dc-slot{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 7px 11px;border-radius:11px;border:1px solid #ffffff12;background:#0f0d11;color:inherit;
  font:inherit;text-align:center;cursor:pointer;transition:transform .16s ease,border-color .16s,background .16s}
.dc-slot:hover{transform:translateY(-2px)}
.dc-slot:focus-visible{outline:2px solid var(--accent,#ef5b57);outline-offset:2px}
.dc-slotart{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #ffffff14;background:#ffffff08}
.dc-slotart i{font-style:normal;font-size:22px;line-height:1;transition:filter .2s,opacity .2s}
.dc-slot b{font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.25;color:#c9cbd1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* held: lit, ringed and tinted by how rare it actually is */
.dc-slot.got{border-color:color-mix(in srgb,var(--dtr,#8a8d95) 38%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--dtr,#8a8d95) 13%,transparent),#0f0d11 74%)}
.dc-slot.got .dc-slotart{border-color:color-mix(in srgb,var(--dtr,#8a8d95) 55%,transparent);
  background:color-mix(in srgb,var(--dtr,#8a8d95) 15%,transparent);box-shadow:0 0 18px -7px var(--dtr,#8a8d95)}
.dc-slot.got b{color:#fff}
.dc-slot.on{border-color:var(--dtr,#8a8d95);transform:translateY(-2px)}

/* empty slot: a silhouette and how close you are - the invitation */
.dc-slot.locked .dc-slotart i{filter:grayscale(1);opacity:.32}
.dc-slot.locked:hover .dc-slotart i{opacity:.62}
.dc-slot.locked b{color:#787b83}
.dc-slotbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff0d}
.dc-slotbar .dc-seg{background:#ffffff2e}
.dc-slot.locked:hover .dc-slotbar .dc-seg,.dc-slot.locked.on .dc-slotbar .dc-seg{background:var(--accent,#ef5b57)}

/* the rarest thing you hold gets the shine */
.dc-slot.star:after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:dcShine 4.2s ease-in-out infinite}

/* level pips + the roman numeral on the tile's ring */
.dc-pips{display:flex;gap:3px;margin-top:1px}
.dc-pips i{width:9px;height:3px;border-radius:2px;background:#ffffff1f}
.dc-pips i.on{background:var(--dtr,#8a8d95)}
.dc-pips.one i{width:22px}
.dc-lvl{position:absolute;right:-3px;bottom:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;
  display:grid;place-items:center;text-decoration:none;font-family:Oswald,Arial,sans-serif;font-size:9px;
  font-weight:700;letter-spacing:.02em;color:#12100f;background:var(--dtr,#8a8d95);border:1.5px solid #0f0d11}
.dc-slot.secret .dc-slotart i{font-size:19px}
.dc-slot.secret.locked b{letter-spacing:.16em}

/* the popup: the whole ladder, only while you are looking at it. Lives on
   <body> because the card is transformed and would capture position:fixed. */
.dc-pop{position:fixed;z-index:90;width:320px;max-width:calc(100vw - 20px);padding:13px 15px 12px;
  border-radius:12px;border:1px solid #ffffff1a;border-top:3px solid var(--dtr,#8a8d95);
  background:#141116f2;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:0 22px 60px #000b;color:#e8e8eb;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;display:none}
.dc-pop.open{display:block;opacity:1;transform:none}
.dc-pop.sheet{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto}
.dc-pophead{display:flex;gap:11px;align-items:center}
.dc-popic{font-size:26px;line-height:1;flex:none}
.dc-pop.dim .dc-popic{filter:grayscale(1);opacity:.5}
.dc-pophead b{display:block;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:16px;font-weight:700;color:#fff}
.dc-pophead small{display:block;margin-top:1px;font-family:Oswald,Arial,sans-serif;font-size:8.5px;
  letter-spacing:.14em;color:var(--dtr,#8a8d95)}
.dc-popnow{margin-top:9px;font-family:Oswald,Arial,sans-serif;font-size:12.5px;color:#fff;letter-spacing:.02em}
.dc-popnow u{text-decoration:none;color:#8a8d95}
.dc-popdesc{margin:9px 0 0;font-size:12px;color:#9a9da5;line-height:1.55}
.dc-poprows{margin-top:9px;border-top:1px solid #ffffff12}
.dc-poprow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #ffffff0a;font-size:11px;color:#787b83}
.dc-poprow:last-child{border-bottom:0}
.dc-poplv{width:18px;flex:none;font-family:Oswald,Arial,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.08em;color:var(--dtr,#8a8d95);opacity:.5}
.dc-popneed{flex:1;min-width:0;color:#9a9da5}
.dc-popstate{flex:none;font-size:10px;color:#6f727a}
.dc-pophold{flex:none;width:74px;text-align:right;font-size:9.5px;color:#6f727a}
.dc-poprow.got .dc-poplv{opacity:1}
.dc-poprow.got .dc-popneed{color:#fff}
.dc-poprow.got .dc-popstate{color:var(--dtr,#8a8d95)}
.dc-poprow.cur{background:#ffffff08;border-radius:6px;padding-left:6px;padding-right:6px;margin:0 -6px}
.dc-poprow.cur .dc-popneed{color:#e8e8eb}
.dc-poprow.cur .dc-popstate{color:var(--accent,#ef5b57)}
.dc-popfoot{margin-top:10px;padding-top:9px;border-top:1px solid #ffffff12;font-size:10px;color:#6f727a;line-height:1.5}
.dc-casehint{display:block;font-style:normal;margin-top:3px;font-size:10px;color:#6f727a}

/* ============================================================
   MORE STATS - the career ledger folded away. The card should
   open as a showcase, not as a spreadsheet; the wall of numbers
   is one click behind it. 0fr -> 1fr animates the real height
   without measuring anything in JS.
   ============================================================ */
.dc-morewrap{position:relative;z-index:1;border-top:1px solid #ffffff0f}
.dc-more{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;
  border:0;background:#121013;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.dc-more:hover{background:#17141b}
.dc-morelab b{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--accent,#ef5b57)}
.dc-morelab small{display:block;margin-top:3px;font-size:11px;color:#8a8d95}
.dc-chev{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:13px;
  border:1px solid #ffffff1f;color:#c9cbd1;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s}
.dc-more.on .dc-chev{transform:rotate(180deg);border-color:var(--accent,#ef5b57);color:#fff}
.dc-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.dc-fold>.dc-foldin{overflow:hidden;opacity:0;transition:opacity .25s ease}
.dc-fold.open{grid-template-rows:1fr}
.dc-fold.open>.dc-foldin{opacity:1;transition:opacity .4s ease .1s}
.dc-fold.open .career-section{animation:dcRise .45s cubic-bezier(.2,.8,.25,1) both}
.dc-fold.open .career-section:nth-of-type(2){animation-delay:.07s}
.dc-fold.open .career-section:nth-of-type(3){animation-delay:.14s}
.dc-fold.open .career-section:nth-of-type(4){animation-delay:.21s}
.dc-fold.open .career-section:nth-of-type(5){animation-delay:.28s}
@keyframes dcRise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}

/* ============================================================
   RARITY ON THE BOARD - the badge strip beside a name in the
   rankings, and on the podium. Rarest first, and the top three
   tiers get a tinted chip so a genuinely rare badge is visible
   scanning down the table instead of being one emoji among five.
   ============================================================ */
.rb-leg{--rbc:#f4c66c}.rb-epi{--rbc:#d057ff}.rb-rar{--rbc:#9fb7ff}.rb-unc{--rbc:#4cde77}.rb-com{--rbc:#8a8d95}
.player-link .row-badges i.rb-leg,.player-link .row-badges i.rb-epi,.player-link .row-badges i.rb-rar,
.bd-pod .pbadges i.rb-leg,.bd-pod .pbadges i.rb-epi,.bd-pod .pbadges i.rb-rar{
  padding:2px 4px;border-radius:6px;border:1px solid color-mix(in srgb,var(--rbc) 42%,transparent);
  background:color-mix(in srgb,var(--rbc) 14%,transparent)}
.player-link .row-badges i.rb-leg,.bd-pod .pbadges i.rb-leg{box-shadow:0 0 12px -4px var(--rbc)}

/* ============================================================
   BADGE GUIDE - reframed as a collection: what exists, how many
   people hold each one, and which are still unclaimed.
   ============================================================ */
.bg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:22px;
  background:#ffffff0f;border:1px solid #ffffff0f;border-radius:10px;overflow:hidden}
.bg-stats div{background:#121013;padding:14px 16px}
.bg-stats b{display:block;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:27px;color:#fff;line-height:1}
.bg-stats s{display:block;text-decoration:none;font-family:Oswald,Arial,sans-serif;font-size:9px;
  letter-spacing:.16em;color:#8a8d95;margin-top:6px}
.bg-note{font-size:12.5px;color:#8f929b;line-height:1.7;margin:14px 0 0}
.bg-note b{color:#f4c66c}
/* one card per ladder: five rungs on one line so the shape of the climb is
   visible without opening anything */
.lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.lg-fam{border:1px solid #ffffff14;border-radius:11px;background:#121013;padding:12px 14px 10px}
.lg-head{display:flex;align-items:center;gap:10px}
.lg-ic{font-size:22px;line-height:1;flex:none}
.lg-head b{display:block;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:15px;color:#fff;letter-spacing:.02em}
.lg-head small{display:block;font-family:Oswald,Arial,sans-serif;font-size:8.5px;letter-spacing:.14em;color:#6f727a;margin-top:1px}
.lg-head>div{flex:1;min-width:0}
.lg-count{flex:none;font-style:normal;font-family:Oswald,Arial,sans-serif;font-size:9px;letter-spacing:.1em;
  color:#8a8d95;border:1px solid #ffffff14;border-radius:20px;padding:3px 8px}
.lg-rungs{margin-top:9px}
.lg-rung{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid #ffffff0a}
.lg-rung:last-child{border-bottom:0}
.lg-lv{width:20px;flex:none;font-family:Oswald,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--dtr,#8a8d95)}
.lg-need{flex:1;min-width:0;font-size:11.5px;color:#c9cbd1}
.lg-held{flex:none;font-size:9.5px;color:#6f727a;text-align:right}
.lg-rung.none .lg-need{color:#8a8d95}
.lg-rung.none .lg-held{color:var(--dtr,#8a8d95);opacity:.8}
/* secrets: the guide admits they exist and nothing else */
.lg-secret{margin-top:12px;padding:14px 16px;border:1px dashed #ffffff1f;border-radius:11px;background:#121013}
.lg-secret p{margin:0;font-size:12.5px;color:#8f929b;line-height:1.65}
.lg-secret b{color:#f4c66c}
.lg-qs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lg-q{display:flex;align-items:center;gap:7px;font-size:17px;padding:6px 11px 6px 9px;border-radius:9px;
  border:1px dashed color-mix(in srgb,var(--dtr,#8a8d95) 40%,transparent);background:#ffffff06;color:#6f727a}
.lg-q u{text-decoration:none;font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.14em;color:#787b83}
.lg-q.found{border-style:solid;border-color:color-mix(in srgb,var(--dtr,#8a8d95) 55%,transparent);
  background:color-mix(in srgb,var(--dtr,#8a8d95) 10%,transparent)}
.lg-q.found u{color:var(--dtr,#8a8d95)}
.bg-legend{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:24px;padding-top:16px;border-top:1px solid #ffffff0f}
.bg-legend span{display:flex;align-items:center;gap:7px;font-family:Oswald,Arial,sans-serif;font-size:10.5px;
  letter-spacing:.12em;color:#c9cbd1}
.bg-legend i{width:9px;height:9px;border-radius:2px;background:var(--dtr,#8a8d95);flex:none}
.bg-legend span.unclaimed i{background:transparent;border:1px dashed var(--dtr,#8a8d95)}
.bg-legend u{text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:10.5px;letter-spacing:0;color:#6f727a}

@media(max-width:820px){
  .dc-slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
  .bg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .dc-slot,.dc-chev,.dc-fold,.dc-fold>.dc-foldin{transition:none}
  .dc-fold.open .career-section{animation:none}
}

/* ---- hit map -------------------------------------------------------------
   Body model shaded by where this player's shots landed. Sits between the
   display case and the dog-tag band; matches .dc-case framing. */
.dc-hm{position:relative;z-index:1;padding:18px 20px 16px;border-top:1px solid #ffffff0f;
  background:linear-gradient(180deg,#16121b,#121013 62%)}
.dc-hmhead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:13px}
.dc-hmsub{margin:5px 0 0;font-size:11.5px;color:#8a8d95}
.dc-hmsub b{color:#fff;font-weight:700;font-size:15px}
.dc-hmflag{font-size:8.5px;letter-spacing:.14em;font-weight:700;color:#f4c66c;
  border:1px solid #f4c66c55;background:#f4c66c14;border-radius:5px;padding:3px 7px}

.dc-hmbody{display:grid;grid-template-columns:minmax(0,208px) minmax(0,1fr);gap:16px;align-items:stretch}
.dc-hmstage{position:relative;border-radius:11px;border:1px solid #ffffff0f;overflow:hidden;
  background:radial-gradient(115% 80% at 50% 8%,#1b1820 0%,#131117 58%,#0f0e12 100%)}
.dc-hmcv{display:block;width:100%;height:278px;cursor:grab;touch-action:none}
.dc-hmcv.drag{cursor:grabbing}
.dc-hmviews{position:absolute;left:7px;top:7px;display:flex;gap:4px}
.dc-hmviews button{appearance:none;border:1px solid #ffffff14;background:#0f0e12cc;color:#8a8d95;
  font:inherit;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;border-radius:5px;cursor:pointer}
.dc-hmviews button:hover{background:#1c1a21;color:#fff}
.dc-hmviews button:focus-visible{outline:2px solid var(--accent,#ef5b57);outline-offset:1px}
.dc-hmdrag{position:absolute;left:8px;bottom:7px;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:#6f727a;pointer-events:none}
.dc-hmtip{position:absolute;pointer-events:none;opacity:0;transition:opacity .1s;
  background:#17151c;border:1px solid #ffffff26;border-radius:7px;padding:5px 8px;
  white-space:nowrap;box-shadow:0 10px 26px #000a;transform:translate(-50%,-100%);z-index:4}
.dc-hmtip b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.dc-hmtip s{display:block;text-decoration:none;font-size:11px;color:#8a8d95;margin-top:1px}

.dc-hmrail{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-hmrow{display:grid;grid-template-columns:10px 84px minmax(0,1fr) auto auto;gap:9px;align-items:center;
  appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;
  padding:4px 6px;border-radius:6px;cursor:pointer;transition:background .12s}
.dc-hmrow:hover,.dc-hmrow.on{background:#ffffff0d}
.dc-hmrow:focus-visible{outline:2px solid var(--accent,#ef5b57);outline-offset:-2px}
.dc-hmchip{width:10px;height:10px;border-radius:3px;border:1px solid #00000080}
.dc-hmnm{font-size:11.5px;color:#cdd0d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-hmbar{height:5px;border-radius:3px;background:#ffffff12;overflow:hidden}
.dc-hmbar i{display:block;height:100%;border-radius:3px}
.dc-hmrow b{font-weight:700;font-size:11.5px;color:#fff;font-variant-numeric:tabular-nums}
.dc-hmrow s{text-decoration:none;font-size:10.5px;color:#8a8d95;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

.dc-hmlegend{display:flex;align-items:center;gap:8px;margin-top:11px}
.dc-hmlegend span{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#6f727a;white-space:nowrap}
.dc-hmramp{flex:1;height:6px;border-radius:3px;border:1px solid #ffffff12;
  background:linear-gradient(90deg,#24406e,#2f68b4,#4d6ec9,#7c66c6,#b2669f,#e8834f,#ffb680)}
.dc-hmcred{margin:8px 0 0;font-size:9px;color:#5b5e66}
.dc-hmcred a{color:#6f727a}
.dc-hmempty{padding:22px 4px;text-align:center;color:#8a8d95;font-size:12px}
.dc-hm-nogl .dc-hmstage{display:none}
.dc-hm-nogl .dc-hmbody{grid-template-columns:1fr}

@media(max-width:640px){
  .dc-hmbody{grid-template-columns:1fr}
  .dc-hmcv{height:210px}
  .dc-hmrow{grid-template-columns:10px 76px minmax(0,1fr) auto auto}
}
@media(prefers-reduced-motion:reduce){.dc-hmrow,.dc-hmtip{transition:none}}