/* ===== MLBB Draft Counter — single committed dark theme (in-game tool) ===== */
:root{
  --bg:#0B0E15; --panel:#141927; --panel2:#1B2233; --line:#242D44;
  --ink:#E9EDF6; --mut:#8A94AB; --faint:#5A6378;
  --gold:#F0B23E; --red:#E86060; --green:#5BC98F; --cyan:#4FC5D6; --ally:#5C8AE6;
  --tank:#5C8AE6; --fighter:#E0824A; --assassin:#A66FE8;
  --mage:#4FB6E6; --marksman:#E8C25C; --support:#5BC9A0;
  --r:12px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:#05070C; color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; align-items:center;
}
.cond{font-family:"Roboto Condensed","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
input{font:inherit}

/* ===== device frame: full-bleed on phones, bezel on desktop ===== */
.device{width:100%;max-width:560px;height:100dvh;position:relative}
.notch{display:none}
@media (min-width:760px){
  body{background:radial-gradient(1100px 700px at 50% 20%, #10182B 0%, #05070C 62%)}
  .device{max-width:404px;height:min(864px,94dvh);border-radius:46px;overflow:hidden;
    border:1px solid #2A3350;box-shadow:0 0 0 11px #0A0D16,0 0 0 12px #232B44,0 34px 90px rgba(0,0,0,.65)}
  .notch{display:block;position:absolute;top:11px;left:50%;transform:translateX(-50%);
    width:104px;height:22px;border-radius:12px;background:#05070C;z-index:60}
  .screen{padding-top:14px}
}
.screen{height:100%;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}
.scroll{flex:1;overflow-y:auto;padding:0 14px 26px;overscroll-behavior:contain}

/* ===== header ===== */
header{display:flex;align-items:baseline;justify-content:space-between;padding:14px 2px 8px}
.logo{font-weight:800;letter-spacing:.04em;font-size:19px;text-transform:uppercase}
.logo em{font-style:normal;color:var(--gold)}
.patch{font-size:10.5px;color:var(--faint);letter-spacing:.05em;text-align:right}

/* ===== draft bar (sticky inside scroll) ===== */
.draftbar{position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 88%,transparent);padding:4px 0 12px}
.lbl{display:flex;justify-content:space-between;align-items:center;margin:0 2px 6px}
.lbl-t{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.enemy-t{color:var(--red)} .ally-t{color:var(--ally)}
.clear-btn{font-size:11px;color:var(--faint);letter-spacing:.05em;padding:2px 4px}
.clear-btn:active{color:var(--ink)}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.slot{
  height:64px;border-radius:var(--r);border:1.5px dashed var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--faint);font-size:18px;background:rgba(20,25,39,.55)
}
.slot.filled{border-style:solid;border-color:var(--hc,var(--line));background:var(--panel)}
.slot .nm{font-size:9.5px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.slots.ally .slot{height:46px;flex-direction:row;gap:5px}
.slots.ally .slot .nm{display:none}
.slot.you{border-color:var(--gold);border-style:dashed;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.1em;cursor:default}

/* ===== avatars ===== */
.av{display:flex;align-items:center;justify-content:center;border-radius:50%;
    font-weight:800;letter-spacing:.02em;color:#0B0E15;background:var(--hc,var(--mut));
    width:32px;height:32px;font-size:12.5px;flex:none}
.av.lg{width:40px;height:40px;font-size:15px}
.av.sm{width:24px;height:24px;font-size:10px}

/* ===== sections / cards ===== */
h2{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:18px 2px 9px}
h2 .accent{color:var(--gold)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;display:flex;gap:10px;align-items:center;margin-bottom:8px;width:100%;text-align:left}
.card .body{flex:1;min-width:0}
.row1{display:flex;align-items:center;gap:7px}
.hname{font-weight:700;font-size:15px}
.meta{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.tier{font-size:10px;font-weight:800;border-radius:5px;padding:1px 5px;letter-spacing:.05em;flex:none}
.tier.S{background:var(--gold);color:#0B0E15}
.tier.A{background:rgba(240,178,62,.16);color:var(--gold)}
.tier.B{background:var(--panel2);color:var(--mut)}
.tier.C{background:var(--panel2);color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{font-size:10.5px;border-radius:6px;padding:2px 7px;background:var(--panel2);color:var(--mut)}
.chip.up{color:var(--green);background:rgba(91,201,143,.1)}
.chip.dn{color:var(--red);background:rgba(232,96,96,.1)}
.chip.syn{color:var(--cyan);background:rgba(79,197,214,.1)}
.chip.comp{color:var(--gold);background:rgba(240,178,62,.1)}
.chip.why{color:var(--mut);font-style:italic}
.fitwrap{width:52px;flex:none;text-align:right}
.fit{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;color:var(--gold)}
.fit small{font-size:10px;font-weight:700;color:var(--gold)}
.sbar{height:3px;border-radius:2px;background:var(--panel2);margin-top:5px;overflow:hidden}
.sbar i{display:block;height:100%;background:var(--gold);border-radius:2px}
.rankn{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:700;font-size:12px;width:15px;flex:none;text-align:center}

/* pool strip */
.poolstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 3px 6px;text-align:center}
.pcard.best{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pcard .av{margin:0 auto 4px}
.pcard .nm{font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .sc{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px}
.sc.pos{color:var(--green)} .sc.neg{color:var(--red)} .sc.zero{color:var(--faint)}

/* role filter */
.filters{display:flex;gap:6px;overflow-x:auto;padding:2px;margin:0 -2px 10px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--mut)}
.fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:20px 15px;text-align:center;color:var(--faint);font-size:13px;margin-top:8px}
.empty b{color:var(--mut)}

/* ===== bottom tabs (inside frame) ===== */
nav.tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;flex:none;
  background:rgba(11,14,21,.96);border-top:1px solid var(--line);
  padding:6px 10px calc(8px + env(safe-area-inset-bottom))}
.tab{padding:7px 0 5px;text-align:center;color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:10px}
.tab .ico{display:block;font-size:16px;margin-bottom:2px}
.tab.on{color:var(--gold)}

/* ===== overlays (scoped to .screen) ===== */
.ovl{position:absolute;inset:0;z-index:40;background:rgba(5,7,12,.72);display:none}
.ovl.open{display:block}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:80%;display:flex;flex-direction:column;
  background:var(--panel);border-radius:18px 18px 0 0;border-top:1px solid var(--line);
  padding:12px 14px calc(10px + env(safe-area-inset-bottom))}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 11px;flex:none}
.sheet input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--ink);font-size:16px;flex:none}
.sheet input::placeholder{color:var(--faint)}
.plist{overflow-y:auto;margin-top:10px;overscroll-behavior:contain}
.prow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 6px;border-radius:10px}
.prow:active{background:var(--panel2)}
.prow .body{flex:1;min-width:0}
.ovl.center{display:none;align-items:center;justify-content:center;padding:16px}
.ovl.center.open{display:flex}
.modal{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;max-height:86%;overflow-y:auto}
.modal h3{margin:0 0 2px;font-size:17px}
.modal .sub{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.mrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.mrow:first-of-type{border-top:none}
.mrow .w{margin-left:auto;color:var(--gold);font-weight:800;font-size:12px;flex:none}
.why{font-size:11.5px;color:var(--mut);font-style:italic}
.mactions{display:flex;gap:8px;margin-top:14px}
.btn{flex:1;text-align:center;padding:10px;border-radius:10px;font-weight:700;font-size:13px;letter-spacing:.04em}
.btn.danger{background:rgba(232,96,96,.12);color:var(--red)}
.btn.plain{background:var(--pan2,var(--panel2));color:var(--mut)}

/* pool tab */
.poolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pg{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:9px 3px 7px;text-align:center}
.pg .av{margin:0 auto 5px}
.pg .nm{font-size:9.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pg.sel .nm{color:var(--gold)}
.poolnote{font-size:12.5px;color:var(--mut);margin:2px 2px 12px}
.pool-search{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:var(--ink);font-size:15px;margin-bottom:10px}

footer{margin-top:24px;padding:0 2px;font-size:10.5px;color:var(--faint);line-height:1.6}
footer b{color:var(--mut);font-weight:600}

@media (prefers-reduced-motion:no-preference){
  .card,.pcard{animation:pop .18s ease both}
  @keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}