/* tierlist.css — shared DBL tier-list styling. Deploy to /css/tierlist.css.
 * Pairs with /js/tierlist.js. Dark theme cohesive with the rest of the site. */
.tl-wrap{--bg:#0f1320;--panel:#171c2e;--panel2:#1f2540;--line:#2c3454;--text:#e7ebf6;--muted:#9aa3c0;--accent:#6ea8fe;
  max-width:1120px;margin:0 auto;padding:8px 14px 70px;color:var(--text);
  font-family:system-ui,'Segoe UI',Roboto,Arial,sans-serif;-webkit-user-select:none;user-select:none}
.tl-wrap *{box-sizing:border-box}

/* header */
.tl-head{text-align:center;margin:4px 0 14px}
.tl-head h1{font-size:30px;font-weight:800;letter-spacing:.5px;margin:0 0 4px}
.tl-head p{color:var(--muted);font-size:14px;margin:0}

/* toolbar */
.tl-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 16px}
.tl-btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.13s}
.tl-btn:hover{border-color:var(--accent);background:#26305a}
.tl-btn.primary{background:linear-gradient(90deg,#3a63c8,#6ea8fe);border-color:transparent;color:#08101f}
.tl-btn.danger:hover{border-color:#ff6a6a;color:#ff8a8a}

/* ---- tier board ---- */
#tl-board{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px}
.tl-row{display:flex;align-items:stretch;gap:0;background:#10131f;border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}
.tl-label{flex:none;width:88px;min-width:88px;display:flex;align-items:center;justify-content:center;padding:6px;
  font-size:26px;font-weight:800;line-height:1.05;text-align:center;word-break:break-word}
.tl-name{outline:none;min-width:20px;max-width:100%;overflow-wrap:anywhere}
.tl-name:focus{background:rgba(0,0,0,.25);border-radius:4px;padding:0 4px}
.tl-zone{flex:1 1 auto;min-height:88px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:8px;background:#0c0f18}
.tl-rowtools{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 8px;background:#10131f;
  opacity:0;transition:opacity .13s;width:40px}
.tl-row:hover .tl-rowtools,.tl-row:focus-within .tl-rowtools{opacity:1}
.tl-grip{cursor:grab;color:var(--muted);font-size:15px;line-height:1}
.tl-grip:active{cursor:grabbing}
.tl-swatch{position:relative;width:18px;height:18px;border-radius:4px;border:1px solid var(--line);overflow:hidden;cursor:pointer;background:#333}
.tl-swatch input{position:absolute;inset:-4px;width:130%;height:130%;padding:0;border:0;cursor:pointer}
.tl-del{width:20px;height:20px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;padding:0}
.tl-del:hover{border-color:#ff6a6a;color:#ff8a8a}

/* ---- items (uniform compact icon: image + rarity frame) ---- */
.tl-item{position:relative;width:72px;height:72px;border-radius:9px;overflow:hidden;cursor:grab;flex:none;
  background:#05070d;border:2px solid var(--line);transition:transform .1s,box-shadow .1s}
.tl-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.5);z-index:2}
.tl-item:active{cursor:grabbing}
.tl-item .tl-ico{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tl-item .tl-pip{position:absolute;left:3px;bottom:3px;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(0,0,0,.6);pointer-events:none;background:#8b93b0}
.tl-item[data-element="RED"] .tl-pip{background:#ff5d5d}
.tl-item[data-element="YEL"] .tl-pip{background:#ffd23f}
.tl-item[data-element="PUR"] .tl-pip{background:#b388ff}
.tl-item[data-element="GRN"] .tl-pip{background:#56d364}
.tl-item[data-element="BLU"] .tl-pip{background:#5aa6ff}
.tl-item[data-element="LGT"] .tl-pip{background:#f3eecb}
.tl-item[data-element="DRK"] .tl-pip{background:#8a7fb0}
/* rarity frames (characters) */
.tl-item[data-rarity="LEGEND"]{border-color:#ffcf4d;box-shadow:inset 0 0 8px rgba(255,207,77,.45)}
.tl-item[data-rarity="ULTRA"]{border-color:#ff5d6c;box-shadow:inset 0 0 8px rgba(255,93,108,.4)}
.tl-item[data-rarity="SPARKING"]{border-color:#ffd23f}
.tl-item[data-rarity="EXTREME"]{border-color:#b07cff}
.tl-item[data-rarity="HERO"]{border-color:#4db8ff}
/* rarity frames (equipment) */
.tl-item[data-rarity="platinum"],.tl-item[data-rarity="awakenedplatinum"]{border-color:#7fe0ff}
.tl-item[data-rarity="unique"],.tl-item[data-rarity="awakenedunique"]{border-color:#ff8f4d}
.tl-item[data-rarity="gold"],.tl-item[data-rarity="awakenedgold"]{border-color:#ffcf4d}
.tl-item[data-rarity="silver"],.tl-item[data-rarity="awakenedsilver"]{border-color:#cdd6f5}
.tl-item[data-rarity="bronze"],.tl-item[data-rarity="awakenedbronze"]{border-color:#cd8b5a}
.tl-item[data-rarity="event"],.tl-item[data-rarity="awakenedevent"]{border-color:#ff6ad5}
.tl-item[data-rarity^="awakened"]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 10px rgba(255,255,255,.25);pointer-events:none}
/* character items reuse the full site card icon (chara_icons.css / characters.css), scaled to tier size.
   190x157 card -> transform:scale in a fixed box (zoom collapsed the flex width, so use scale). */
.tl-item.tl-char{width:104px;height:86px;border:0;background:#05070d;overflow:hidden;border-radius:8px;position:relative}
.tl-item.tl-char .character-thumb{transform:scale(.54);transform-origin:top left;position:absolute;top:0;left:0;pointer-events:none}
/* supporters reuse the .character-thumb card but their Supporter badge sits lower — give the box a touch more height */
.tl-item.tl-supp{height:92px}
/* equipment items reuse the real .equip-thumb (art + rarity frame) from equipment.css, scaled into a fixed box.
   frame is 118px offset translate(-10,-10) from the thumb origin, so shift the scaled thumb in by ~scale*10. */
.tl-item.tl-equip{width:92px;height:92px;border:0;background:none;overflow:hidden;border-radius:8px;position:relative}
.tl-item.tl-equip .equip-thumb{transform:scale(.78);transform-origin:top left;position:absolute;left:8px;top:8px;pointer-events:none}

/* SortableJS drag states */
.tl-ghost{opacity:.35}
.tl-chosen{box-shadow:0 0 0 2px var(--accent),0 6px 16px rgba(0,0,0,.6)}
/* tap-to-place: selected item + floating hint */
.tl-item.tl-selected{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 16px rgba(110,168,254,.7);z-index:6}
body.tl-placing::after{content:"Tap a tier to place \00B7 tap the item again to cancel";position:fixed;left:50%;bottom:18px;
  transform:translateX(-50%);background:#6ea8fe;color:#08101f;font:600 13px system-ui,'Segoe UI',sans-serif;
  padding:9px 18px;border-radius:999px;z-index:99999;box-shadow:0 6px 20px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap}

/* ---- pool ---- */
.tl-poolhead{margin:26px 0 10px;font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px}
.tl-poolhead::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--accent)}
.tl-poolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}
.tl-searchwrap{flex:1 1 220px;max-width:320px}
.tl-search{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-size:14px;padding:9px 13px;outline:none}
.tl-search:focus{border-color:var(--accent)}
.tl-chipsets{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.tl-chipgroup{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tl-chiplabel{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin-right:2px}
.tl-chip{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer;transition:.12s}
.tl-chip:hover{border-color:var(--accent);color:var(--text)}
.tl-chip.on{background:var(--accent);border-color:var(--accent);color:#08101f}
.tl-count{color:var(--muted);font-size:13px;margin-left:auto;white-space:nowrap}
#tl-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:96px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px}

/* responsive */
@media(max-width:640px){
  .tl-label{width:60px;min-width:60px;font-size:19px}
  .tl-item{width:58px;height:58px}
  .tl-item.tl-char{width:82px;height:68px}
  .tl-item.tl-char .character-thumb{transform:scale(.43)}
  .tl-rowtools{opacity:1;width:32px}
  .tl-head h1{font-size:24px}
}