/* duel-top.css: the ladder now, on the Duel Arena's beginning screen and its Choose your fight (tools/pick_looks/yard/duel_top.js).
   (30 Oct 2026, Chris: "i want there to be a real way to see the actual leaderboard right now so people wanna come & play") the top five
   of the ladder, the queue's live count, your own place and a class filter, in the start screens' house look (duel-select.css, 30 Oct):
   a panel warm black under one fine gold line, its title the wordmark's small capitals between two rules, the game's class icons in a
   talent's frame, class colour on names only, the rating in the Ranked Arena's epic purple (#a335ee), Full ladder a quiet plaque.
   Nothing here floats over a control: beside the name column only where the screen has the room, in the column's flow everywhere else. */

.dtp{position:relative;box-sizing:border-box;pointer-events:auto;text-align:left;color:var(--pl-ink,#ece2cb);font:400 13px/1.35 'Open Sans',sans-serif}
.dtp[hidden]{display:none}
/* the title: small capitals between two fine rules, as Choose your fight's */
.dtp-h{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:0;font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:var(--tf-wm,#ffd56a);text-shadow:0 1px 0 #000;white-space:nowrap}
.dtp-h::before,.dtp-h::after{content:"";flex:1 1 0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,192,98,.65))}
.dtp-h::after{background:linear-gradient(90deg,rgba(232,192,98,.65),transparent)}
/* the queue now: a still dot, purple while anyone queues or fights (nothing pulses for show) */
.dtp-q{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 8px;font:600 12.5px/1.3 'Open Sans',sans-serif;color:var(--pl-mute,#a89c84);font-variant-numeric:tabular-nums}
.dtp-q b{color:var(--pl-ink,#ece2cb);font-weight:700}
.dtp-q[hidden]{display:none}
.dtp-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#4a4238;box-shadow:0 0 0 1px #000}
.dtp-q.dtp-on .dtp-dot,.dtp-qs.dtp-on .dtp-dot{background:var(--rk-l,#cf9bff);box-shadow:0 0 0 1px #000,0 0 6px rgba(163,53,238,.8)}
/* the class filter: All, then the nine class icons in a talent's frame (grey ring, white on a hover, gold when chosen) */
.dtp-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 3px;margin:0 0 8px}
.dl-ui .dtp .dtp-f button{flex:none;display:block;box-sizing:border-box;width:22px;height:22px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:3px;background:#000;cursor:pointer;box-shadow:0 0 0 1px #000,0 0 0 2px #5e5e5e;transition:box-shadow .12s}
.dl-ui .dtp .dtp-f button img{display:block;width:100%;height:100%;border-radius:3px;filter:saturate(.75) brightness(.8)}
.dl-ui .dtp .dtp-f button:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dl-ui .dtp .dtp-f button:hover img{filter:none}
.dl-ui .dtp .dtp-f button[aria-pressed=true]{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold,#ffd100),0 0 10px rgba(255,209,0,.4)}
.dl-ui .dtp .dtp-f button[aria-pressed=true] img{filter:none}
.dl-ui .dtp .dtp-f .dtp-all-f{width:auto;min-width:34px;padding:0 6px;background:linear-gradient(#1c1813,#0c0a08);font:700 10px/22px Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-mute,#a89c84)}
.dl-ui .dtp .dtp-f .dtp-all-f:hover{color:#fff}
.dl-ui .dtp .dtp-f .dtp-all-f[aria-pressed=true]{color:var(--tf-wm,#ffd56a)}
.dl-ui .dtp .dtp-f button:focus-visible{outline:2px solid #ffd100;outline-offset:3px}
@media (pointer:coarse){.dl-ui .dtp .dtp-f button{width:34px;height:34px}.dl-ui .dtp .dtp-f .dtp-all-f{line-height:34px}}
/* the rows: rank, class icon, name in its class colour and the spec, won-lost, the rating in the ranked purple */
.dtp-rows{list-style:none;margin:0;padding:0;min-height:150px}
.dtp-rows li{display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto 46px;align-items:center;gap:8px;height:30px;padding:0 6px 0 4px;border-bottom:1px solid rgba(232,192,98,.08)}
.dtp-rows li:last-child{border-bottom:0}
.dtp-rk{font:700 13px/1 Cinzel,Georgia,serif;text-align:center;color:var(--pl-mute,#a89c84)}
.dtp-rows li:first-child .dtp-rk{color:var(--tf-wm,#ffd56a)}
.dtp-ic{display:block;width:22px;height:22px;border-radius:3px;background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px #5e5e5e}
.dtp-ic img{display:block;width:100%;height:100%;border-radius:3px}
.dtp-who{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap;overflow:hidden}
.dtp-who b{flex:0 1 auto;min-width:3em;overflow:hidden;text-overflow:ellipsis;font:700 14px/1.2 'Open Sans',sans-serif;text-shadow:0 1px 0 #000}
.dtp-who small{flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:400 12px/1.2 'Open Sans',sans-serif;color:var(--pl-mute,#a89c84)}
.dtp-wl{font:600 12px/1 'Open Sans',sans-serif;font-variant-numeric:tabular-nums;color:var(--pl-mute,#a89c84);white-space:nowrap}
.dtp-rt{font:800 15px/1 PkNum,'Open Sans',sans-serif;font-variant-numeric:tabular-nums;text-align:right;color:var(--rk-l,#cf9bff);text-shadow:0 0 10px rgba(163,53,238,.45)}
/* your own row, where it is among the five */
.dtp-rows li.dtp-me{background:linear-gradient(90deg,rgba(163,53,238,.2),rgba(163,53,238,.04) 80%);box-shadow:inset 2px 0 0 var(--rk,#a335ee)}
.dtp-tag{margin-left:2px;font:700 9.5px/1 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rk-l,#cf9bff)}
/* a ladder with no one on it yet, or one that did not answer */
.dtp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;margin:0;padding:0 8px;text-align:center}
.dtp-empty b{font:700 16px/1.25 Cinzel,Georgia,serif;letter-spacing:.02em;color:var(--pl-ink,#ece2cb);text-shadow:0 1px 0 #000}
.dtp-empty small{font:400 12.5px/1.35 'Open Sans',sans-serif;color:var(--pl-mute,#a89c84)}
.dtp-busy .dtp-rows{opacity:.55;transition:opacity .15s}
/* the foot: your place at the left, Full ladder at the right */
.dtp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.dtp-you{min-width:0;font:600 13px/1.3 'Open Sans',sans-serif;color:var(--pl-mute,#a89c84);font-variant-numeric:tabular-nums}
.dtp-you b{color:var(--pl-ink,#ece2cb)}
.dtp-you .dtp-yr{color:var(--rk-l,#cf9bff);font-weight:800}
.dl-ui .dtp-foot .dtp-all{flex:none;margin-left:auto;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.dtp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the beginning screen: its own panel under the name, or beside the name column where the screen is wide ---- */
.dx-login .dx-top-slot{width:min(470px,100%)}
.dx-login .dx-top-slot:empty{display:none}
.dx-login .dtp{margin-top:22px;padding:2px 14px 12px}
.dx-login .dtp-h{padding-top:12px}
/* (a wide screen: beside the column, in the arena's free right side. The arena is 1200 px at most and the name column 470 px in its
   middle, so the panel is 300 px; from a 1270 px screen (an arena of some 1160 px) it never reaches the column; the foot's two buttons
   stay under it at the bottom) */
@media (min-width:1270px) and (min-height:600px){
  .dx-login .dx-top-slot{position:absolute;top:50%;right:28px;width:300px;transform:translateY(-50%)}
  .dx-login .dtp{margin:0}
  /* (300 px: each name whole on its own line, its spec under it) */
  .dx-login .dtp-rows{min-height:180px}
  .dx-login .dtp-rows li{height:36px;gap:7px}
  .dx-login .dtp-who{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
  .dx-login .dtp-who b{max-width:100%;font-size:13.5px;line-height:1.1}
  .dx-login .dtp-who small{font-size:11px;line-height:1.1}
  .dx-login .dtp-tag{display:none}
  .dx-login .dtp-empty{min-height:180px}
}
/* (between a phone and a wide screen: the column's own width, the top three) */
@media (min-width:901px) and (max-width:1269px),(min-width:901px) and (max-height:599px){
  .dx-login .dtp-f{display:none}
  .dx-login .dtp-rows{min-height:90px}
  .dx-login .dtp-rows li:nth-child(n+4){display:none}
  .dx-login .dtp-empty{min-height:90px}
}

/* ---- Choose your fight: inside its panel under the choices, as one more section of it ---- */
.dx-fp .dx-top-slot:empty{display:none}
.dx-fp .dtp{margin-top:14px}
/* (the panel is wide here: the filter at the left and the queue's count at the right on one line, so the five rows come higher) */
@media (min-width:901px){
  .dx-fp .dtp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px}
  .dx-fp .dtp > *{grid-column:1 / -1}
  .dx-fp .dtp > .dtp-f{grid-column:1;grid-row:2;flex-wrap:nowrap;justify-content:flex-start;gap:4px;margin:0 0 6px}
  .dx-fp .dtp > .dtp-q{grid-column:2;grid-row:2;justify-content:flex-end;margin:0 0 6px;text-align:right}
  .dx-fp .dtp-rows li{height:28px}
  .dl-ui .dx-fp .dtp .dtp-f button{width:26px;height:26px}.dl-ui .dx-fp .dtp .dtp-f .dtp-all-f{line-height:26px}
  .dx-fp .dtp-rows,.dx-fp .dtp-empty{min-height:140px}
  .dx-fp .dtp-foot{margin-top:6px}
}
/* (30 Oct 2026, the coordinator: the Fight panel is already tall, so on a desktop screen under 900 px high the top three and Full ladder;
   the panel lives inside the choices' own scroll, so Queue for Ranked and the foot's buttons never move for it) */
@media (min-width:901px) and (max-height:899px){
  .dx-fp .dtp-rows li:nth-child(n+4){display:none}
  .dx-fp .dtp-rows,.dx-fp .dtp-empty{min-height:84px}
}

/* ---- a phone either way: a strip of the top three, one line each; no filter; your place and Full ladder in its foot ---- */
@media (max-width:900px) and (orientation:portrait),(max-width:700px),(orientation:landscape) and (max-width:900px){
  .dtp-f{display:none}
  .dtp-q{display:none}
  .dtp-rows{min-height:78px}
  .dtp-rows li{grid-template-columns:16px 22px minmax(0,1fr) auto 40px;gap:7px;height:26px}
  .dtp-rows li:nth-child(n+4){display:none}
  .dtp-ic{width:20px;height:20px}
  .dtp-who b{font-size:13px}.dtp-who small{font-size:11.5px}
  .dtp-rt{font-size:14px}
  .dtp-empty{min-height:78px}.dtp-empty b{font-size:14px}.dtp-empty small{font-size:12px}
  .dtp-h{margin-bottom:4px;font-size:10.5px;letter-spacing:.18em;gap:8px}
  .dtp-foot{margin-top:4px}
  .dtp-you{display:flex;flex-direction:column;gap:2px;font-size:12px}
  .dtp-you .dtp-qs{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--pl-mute,#a89c84)}
  .dl-ui .dtp-foot .dtp-all{min-height:40px;padding:0 10px;font-size:12.5px}
  @media (pointer:coarse){.dl-ui .dtp-foot .dtp-all{min-height:44px}}   /* (31 Oct 2026, the sizes sweep: 40 tall on a phone) */
  .dx-login .dtp{margin-top:14px;padding:0 10px 8px}
  .dx-login .dtp-h{padding-top:9px}
  .dx-fp .dtp{margin-top:10px}
}
/* (the queue's count rides in the foot on a phone; on a wide screen it has its own line under the title) */
.dtp-you .dtp-qs{display:none}
@media (max-width:900px) and (orientation:portrait),(max-width:700px),(orientation:landscape) and (max-width:900px){.dtp-you .dtp-qs{display:flex}.dtp-you .dtp-qs[hidden]{display:none}}
/* (a phone on its side: the beginning screen is a row, the arena's name beside your name; the strip takes a row of its own under both,
   the three side by side. A grid of the same two columns, as a wrapping row put the name under the title) */
@media (orientation:landscape) and (max-width:900px){
  .dx-login:has(> .dx-top-slot > .dtp){display:grid;grid-template-columns:auto minmax(0,470px);justify-content:center;align-content:center;align-items:center;gap:0 28px}
  .dx-login > .dx-top-slot{grid-column:1 / -1;width:100%}
  .dx-login .dtp{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;margin-top:10px;padding:0 10px 6px}
  .dx-login .dtp-h{grid-column:1 / -1}
  .dx-login .dtp-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;min-height:26px}
  .dx-login .dtp-rows li{grid-template-columns:14px 20px minmax(0,1fr) 38px;gap:6px;border-bottom:0;padding:0 4px}
  .dx-login .dtp-rows .dtp-wl,.dx-login .dtp-rows .dtp-who small{display:none}
  .dx-login .dtp-empty{min-height:26px;flex-direction:row;gap:10px}
  .dx-login .dtp-foot{margin:0}
  .dx-login .dtp-you{display:none}
}
@media (max-width:374px) and (orientation:portrait){.dtp-wl{display:none}.dtp-rows li{grid-template-columns:16px 22px minmax(0,1fr) 40px}}
@media (prefers-reduced-motion:reduce){.dl-ui .dtp .dtp-f button,.dtp-busy .dtp-rows{transition:none}}