:root{
  --bg:#04060c; --bg2:#070b14;
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.08); --line:rgba(255,255,255,.09);
  --gold:#d4af37; --gold2:#f5cf6b; --neon:#38bdf8; --neon2:#0ea5e9;
  --text:#eef2fa; --dim:#8fa0bd;
  --red:#f05252; --green:#3ecf8e; --purple:#a78bfa;
  --accent:#38bdf8; --txt:#eef2fa;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scrollbar-color:var(--line) transparent}
body{margin:0; background:radial-gradient(1200px 700px at 80% -10%, #0b1526 0%, transparent 55%), radial-gradient(900px 600px at -10% 110%, #101a2e 0%, transparent 50%), linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); color:var(--text); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px; line-height:1.5; min-height:100vh}

/* ---------- ambient background ---------- */
.bgfx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; opacity:.55}
.o1{width:560px; height:560px; background:radial-gradient(circle,rgba(56,189,248,.17) 0%,rgba(56,189,248,.06) 45%,transparent 70%); top:-180px; right:-120px}
.o2{width:500px; height:500px; background:radial-gradient(circle,rgba(212,175,55,.15) 0%,rgba(212,175,55,.05) 45%,transparent 70%); bottom:-160px; left:-140px; animation-delay:-15s}
.gridfx{position:absolute; inset:0; background-image:linear-gradient(rgba(120,160,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.045) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%)}


header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:rgba(8,12,22,.97); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.brandwrap{display:flex; align-items:center; gap:11px}
.logo{width:40px; height:40px; border-radius:10px; box-shadow:0 0 18px rgba(212,175,55,.35)}
.brand{font-weight:800; letter-spacing:.6px; font-size:17px; background:linear-gradient(90deg,var(--gold2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 24px rgba(212,175,55,.35)}
.tagline{font-size:10.5px; color:var(--dim); letter-spacing:.3px}
.status{font-size:12px; color:var(--dim); padding:6px 12px; border-radius:16px; white-space:nowrap; max-width:42%; overflow:hidden; text-overflow:ellipsis}
.status.ok{color:var(--green)}
.status.err{color:var(--red)}

/* ---------- glass utility ---------- */
.glass{background:rgba(13,18,32,.8); border:1px solid var(--line)}

/* ---------- tabs ---------- */
.tabs{display:flex; background:rgba(8,12,22,.96); border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:65px; z-index:30}
.tab{flex:1; min-width:80px; padding:13px 8px; background:none; border:none; color:var(--dim); font-size:13.5px; font-weight:700; cursor:pointer; border-bottom:2px solid transparent; transition:color .2s, background .2s}
.tab.active{color:var(--neon); border-bottom-color:var(--neon); text-shadow:0 0 14px rgba(56,189,248,.5); background:rgba(56,189,248,.06)}

main{max-width:900px; margin:0 auto; padding:14px; position:relative; z-index:1}
.panel{display:none}
.panel.active{display:block}
.panel.active .stagger{opacity:0; animation:rise .34s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.row{display:flex; gap:10px; margin:8px 0}
.row.wrap{flex-wrap:wrap}
label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); flex:1; min-width:120px}
select,input,textarea{background:#0d1526; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px; font-size:15px; width:100%}
select{-webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238fa0bd' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
select option{background:#0d1526; color:var(--text)}
input[type=number]::-webkit-inner-spin-button{filter:invert(1); opacity:.85}
textarea{font-family:inherit; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(56,189,248,.12)}
input[type=search]{margin:0}

.help{border-radius:12px; padding:10px 13px; margin:10px 0; font-size:12.5px; color:var(--dim)}
.help summary{color:var(--gold2); font-weight:700; cursor:pointer; font-size:13px}
.help ol{margin:8px 0 0; padding-left:20px}
.help li{margin:4px 0}
.help code{background:var(--glass2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:11.5px; color:var(--text)}

/* ---------- glowing section titles ---------- */
.glowtitle{margin:16px 4px 8px; font-size:14px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text); text-shadow:0 0 16px rgba(56,189,248,.45)}

/* ---------- draft controls ---------- */
.pickmodes{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.mode{background:var(--glass2); border:1px solid var(--line); color:var(--text); border-radius:14px; padding:10px 14px; font-size:13.5px; font-weight:700; cursor:pointer; transition:.15s; display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.25}
.mode .mcap{font-size:8.5px; font-weight:600; color:var(--dim); letter-spacing:.2px}
.mode.active .mcap{color:rgba(4,16,28,.75)}
.mode.active{background:linear-gradient(135deg,var(--neon),var(--neon2)); color:#04101c; border-color:transparent; box-shadow:0 0 18px rgba(56,189,248,.5)}
.mode.danger{background:none; color:var(--red); border-color:rgba(240,82,82,.4)}
.quickbans{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:4px 0 10px}
.qban{background:var(--glass2); border:1px solid var(--line); color:var(--dim); border-radius:14px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s}
.qban.on{background:rgba(240,82,82,.18); border-color:var(--red); color:#ff9d9d; box-shadow:0 0 12px rgba(240,82,82,.3)}

/* ---------- pick chips row ---------- */
.slots{display:flex; gap:7px; flex-wrap:wrap; margin:8px 0; min-height:28px; align-items:center}
#slots .slot{display:inline-flex; align-items:center; gap:6px; background:var(--glass2); border:1px solid var(--line); border-radius:18px; padding:5px 11px; font-size:13px; font-weight:600; min-height:auto}
#slots .slot .x{color:var(--red); font-weight:800; cursor:pointer}
#slots .slot.bans{border-color:rgba(240,82,82,.5); color:var(--red)}
#slots .slot.enemy{border-color:rgba(167,139,250,.5); color:#c7b3ff}
#slots .slot.ally{border-color:rgba(62,207,142,.5); color:var(--green)}

/* ---------- cinematic 5v5 stage ---------- */
.stage{border-radius:18px; padding:14px; margin:12px 0; position:relative; overflow:hidden}
.stage::after{content:""; position:absolute; inset:0; background:radial-gradient(500px 200px at 50% 0%,rgba(56,189,248,.08),transparent 70%); pointer-events:none}
.stage-head{display:flex; justify-content:center; margin-bottom:8px}
.phase-label{font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold2); text-shadow:0 0 18px rgba(245,207,107,.55)}
.banbar{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; min-height:30px; align-items:center; margin-bottom:10px}
.banchip{width:38px; height:38px; border-radius:9px; position:relative; overflow:visible; background:var(--glass2); border:1px solid rgba(240,82,82,.35)}
.banchip .portrait{border-radius:8px; overflow:hidden}
.banchip .unlock{position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:#0d1526; border:1px solid var(--red); color:var(--red); font-size:8.5px; font-weight:900; display:flex; align-items:center; justify-content:center; z-index:3}
.banchip img{width:100%; height:100%; object-fit:cover; filter:grayscale(.9) brightness(.55)}
.banchip::after{content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--red); font-weight:900; text-shadow:0 0 8px rgba(240,82,82,.8)}
.stage-body{display:flex; gap:8px; align-items:stretch}
.team{flex:1; display:flex; flex-direction:column; gap:6px}
.team.blue .slot.filled{border-color:rgba(56,189,248,.4); box-shadow:0 0 16px rgba(56,189,248,.2)}
.team.red .slot.filled{border-color:rgba(255,107,107,.4); box-shadow:0 0 16px rgba(255,107,107,.2)}
.slot{display:flex; align-items:center; gap:8px; border-radius:12px; padding:7px 9px; min-height:58px; background:var(--glass); border:1px solid var(--line); position:relative; transition:border-color .25s, box-shadow .25s}
.slot .role-tag{flex:0 0 auto; font-size:8.5px; font-weight:900; letter-spacing:1px; color:var(--gold2); text-transform:uppercase; background:var(--glass2); border:1px solid var(--line); border-radius:999px; padding:2px 8px}
.slot.filled{border-color:rgba(56,189,248,.4); box-shadow:0 0 16px rgba(56,189,248,.2)}
.slot .portrait{width:42px; height:42px; border-radius:9px; overflow:hidden; flex:0 0 42px; background:var(--glass2); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; color:#fff; position:relative}
.slot .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:9px}
.slot .pname{font-size:13px; font-weight:700}
.slot .pmeta{font-size:10px; color:var(--dim)}
.slot.me{border-color:var(--gold); box-shadow:0 0 20px rgba(212,175,55,.4)}
.slot .unlock{position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%; background:rgba(240,82,82,.9); color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2}
.slot.me::before{content:"YOU"; position:absolute; top:-8px; right:8px; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#141414; font-size:8px; font-weight:900; letter-spacing:1px; padding:2px 7px; border-radius:8px}
.stage-vs{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex:0 0 auto; padding:0 6px}.vs{font-size:20px; font-weight:900; font-style:italic; background:linear-gradient(90deg,var(--neon),var(--gold2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 22px rgba(56,189,248,.5)}
.vsinfo{font-size:10px; color:var(--dim); letter-spacing:1px}

/* lock-in slam + flare */
.slam{animation:slam .4s cubic-bezier(.2,1.5,.35,1)}
@keyframes slam{0%{transform:scale(1.25); opacity:.4}55%{transform:scale(.96)}100%{transform:scale(1); opacity:1}}
.flare{position:relative}

/* ---------- champion grid ---------- */
.champ-tools{display:flex; flex-direction:column; gap:7px; margin:0}
.rolefilters{display:flex; gap:6px; flex-wrap:wrap}
.rf{background:var(--glass2); border:1px solid var(--line); color:var(--dim); border-radius:14px; padding:6px 13px; font-size:12px; font-weight:600; cursor:pointer; transition:.15s}
.rf.active{background:rgba(56,189,248,.18); color:var(--neon); border-color:var(--neon); box-shadow:0 0 12px rgba(56,189,248,.25)}

.champgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px; max-height:42vh; overflow-y:auto; padding:3px 2px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; overscroll-behavior:contain}
.champ{background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:5px 3px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; content-visibility:auto; contain-intrinsic-size:74px; transition:transform .16s cubic-bezier(.2,.7,.3,1.4), box-shadow .16s, border-color .16s}
@media (hover:hover){ .champ:hover{transform:scale(1.07); border-color:var(--neon); box-shadow:0 0 16px rgba(56,189,248,.4), 0 8px 22px rgba(0,0,0,.5); z-index:2} }
.champ .cportrait{width:46px; height:46px; border-radius:12px; border:2px solid rgba(255,255,255,.14); overflow:visible; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); position:relative}
.champ.dm-ap .cportrait{border-color:rgba(167,139,250,.6); box-shadow:0 0 8px rgba(167,139,250,.25)}
.champ.dm-ad .cportrait{border-color:rgba(249,115,22,.6); box-shadow:0 0 8px rgba(249,115,22,.25)}
.champ.dm-tank .cportrait{border-color:rgba(62,207,142,.6); box-shadow:0 0 8px rgba(62,207,142,.25)}
.champ.main .cportrait::after{content:"⭐"; position:absolute; top:-8px; right:-7px; font-size:12px; z-index:3; filter:drop-shadow(0 0 4px rgba(0,0,0,.8))}
.champ .cportrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:10px; background:#101a2e}
.champ .cname{font-size:10px; font-weight:800; color:var(--text); letter-spacing:.2px; line-height:1.15; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.champ .croles{font-size:7.5px; font-weight:700; color:var(--dim); letter-spacing:.5px}
.champ.picked{opacity:.28; filter:grayscale(.7)}
.champ.rot{box-shadow:inset 0 0 0 2px var(--gold)}
.champ.offrole{opacity:.42; filter:grayscale(.55)}
.champ .lockbadge{position:absolute; top:4px; right:4px; font-size:9px}

/* ---------- memstrip / chips ---------- */
.memstrip{border-radius:12px; padding:10px 14px; margin:12px 0 4px; font-size:12px; color:var(--dim); border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.05)}
.memstrip b{color:var(--gold2)}
.slotlabel{font-size:11.5px; color:var(--dim)}
.focuschips{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:6px 0}
.fchip{background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.4); color:var(--text); border-radius:16px; padding:6px 12px; font-size:12.5px; display:inline-flex; align-items:center; gap:7px}
.fchip .x{color:var(--red); font-weight:800; cursor:pointer}

/* ---------- buttons ---------- */
.bigbtn{width:100%; margin:12px 0; padding:15px; background:linear-gradient(135deg,var(--neon),var(--neon2)); color:#04101c; border:none; border-radius:12px; font-size:16px; font-weight:800; cursor:pointer; letter-spacing:.5px; box-shadow:0 4px 20px rgba(56,189,248,.35); transition:transform .12s, box-shadow .2s}
.bigbtn:active{transform:scale(.985)}
.bigbtn.small{width:auto; flex:1; padding:11px; font-size:14px}
.bigbtn.ghost{background:var(--glass2); color:var(--text); border:1px solid var(--line); box-shadow:none}
.bigbtn.ghost.danger{color:var(--red); border-color:rgba(240,82,82,.45)}
.bigbtn:disabled{opacity:.5}

.out{margin:12px 0; border-radius:14px; padding:16px; white-space:pre-wrap; font-size:14.5px; line-height:1.65; display:none; word-break:break-word}
.out.show{display:block; animation:rise .3s ease-out}
.out.err{color:var(--red); border-color:rgba(240,82,82,.4)}
.out .shortchip{display:inline-flex; align-items:center; gap:6px; background:var(--glass2); border:1px solid var(--line); border-radius:18px; padding:7px 13px; margin:4px 6px 4px 0; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s}
.out .shortchip:hover{border-color:var(--gold); box-shadow:0 0 12px rgba(212,175,55,.35)}

.hint{font-size:12px; color:var(--dim); margin:6px 0}
.templates{display:flex; gap:8px; margin:8px 0}
.tpl{background:var(--glass2); border:1px solid var(--line); color:var(--dim); border-radius:16px; padding:8px 14px; font-size:12.5px; cursor:pointer}
.filebox{display:block; border:1.5px dashed var(--line); border-radius:14px; padding:20px; text-align:center; color:var(--dim); cursor:pointer; margin:10px 0; font-weight:600; transition:.2s}
.filebox:hover{border-color:var(--neon); color:var(--neon)}
.filebox input{display:none}
.filelist{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
.filechip{background:var(--glass2); border:1px solid var(--line); border-radius:14px; padding:6px 11px; font-size:12px; color:var(--green)}

/* ---------- team lab ---------- */
.compwrap{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.compcard{border-radius:14px; padding:12px; position:relative}
.compcard h4{margin:0 0 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:800}
.compcard.blue h4{color:var(--neon); text-shadow:0 0 12px rgba(56,189,248,.5)}
.compcard.red h4{color:#ff6b6b; text-shadow:0 0 12px rgba(255,107,107,.5)}
.bar-row{margin:8px 0}
.bar-label{display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-bottom:3px}
.bar{height:8px; border-radius:6px; background:var(--glass2); overflow:hidden}
.bar-fill{height:100%; border-radius:6px; width:0; transition:width .5s cubic-bezier(.2,.8,.3,1)}
.bar-fill.ap{background:linear-gradient(90deg,#a78bfa,#c026d3); box-shadow:0 0 10px rgba(192,38,211,.5)}
.bar-fill.ad{background:linear-gradient(90deg,#f97316,#ef4444); box-shadow:0 0 10px rgba(239,68,68,.45)}
.bar-fill.tank{background:linear-gradient(90deg,#22c55e,#10b981); box-shadow:0 0 10px rgba(34,197,94,.45)}
.bar-fill.cc{background:linear-gradient(90deg,#38bdf8,#6366f1); box-shadow:0 0 10px rgba(99,102,241,.45)}
.bar-fill.eng{background:linear-gradient(90deg,#f5cf6b,#d4af37); box-shadow:0 0 10px rgba(212,175,55,.45)}
.warnline{font-size:11px; color:var(--gold2); margin-top:6px}
.empty-comp{padding:14px; text-align:center; color:var(--dim); font-size:12px}

.replayer{border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.replay-label{flex:1; min-width:180px; font-size:13px; font-weight:700}
.rbtn{width:44px; height:44px; border-radius:12px; background:var(--glass2); border:1px solid var(--line); color:var(--text); font-size:15px; cursor:pointer; transition:.15s}
.rbtn:hover{border-color:var(--gold); color:var(--gold2); box-shadow:0 0 12px rgba(212,175,55,.3)}
.replay-controls{display:flex; align-items:center; gap:8px}
.replay-count{font-size:11px; color:var(--dim); min-width:34px; text-align:center}

footer{text-align:center; color:var(--dim); font-size:11px; padding:18px 10px 34px; position:relative; z-index:1}
@media (max-width:480px){
  .compwrap{grid-template-columns:1fr}
  .slot .role-tag{flex:0 0 auto; font-size:8px; padding:2px 7px}
  .slot .portrait{width:36px; height:36px; flex:0 0 36px}
  .slot .pname{font-size:12px}
  .draftwrap{grid-template-columns:70px minmax(0,1fr) 70px; gap:5px; padding:7px 4px}
  .bslot{min-height:58px; gap:2px}
  .bslot .portrait{width:30px; height:30px; flex-basis:30px; margin-top:1px}
  .bslot .pname{font-size:9px}
  .bslot .role-tag{font-size:7px}
  .champgrid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr)); gap:5px; max-height:40vh}
  .champ .cportrait{width:38px; height:38px}
  .champ .cname{font-size:9px}
  .rf{padding:6px 10px; font-size:11px}
  .boardHint, .hint{font-size:11px}
}

.prowatch { max-height: 260px; overflow:auto; }
.pwline { margin: 5px 0; font-size: 12px; line-height: 1.45; color: var(--txt); }
.pwline b { color: var(--gold); }

/* ---------- build & runes section ---------- */
.buildzone{margin:14px 0 4px; padding:12px 14px; border-radius:14px}
.buildhead{font-size:13.5px; font-weight:800; color:var(--gold2); margin-bottom:8px; letter-spacing:.4px}
.buildtitle{font-size:15px; font-weight:800; color:var(--text); margin-bottom:8px}
.buildrow{margin:8px 0; font-size:12.5px; line-height:1.55}
.buildrow .slotlabel{display:inline-block; margin-right:6px; color:var(--dim); font-size:10.5px; letter-spacing:.6px}
.dbadge{display:inline-block; border:1px solid; border-radius:10px; padding:2px 8px; margin:2px 4px 2px 0; font-size:11.5px; font-weight:700}
.buildrow.def{background:rgba(62,207,142,.07); border:1px solid rgba(62,207,142,.2); border-radius:10px; padding:8px 10px}
.buildrow.guide{background:rgba(56,189,248,.05); border:1px solid rgba(56,189,248,.18); border-radius:10px; padding:8px 10px}
.buildrow.ai{background:rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.22); border-radius:10px; padding:8px 10px}
.out .shortchip.rec{border-color:var(--gold); background:rgba(212,175,55,.1); color:var(--gold2)}

/* ---------- build dropdowns (theme-consistent) ---------- */
.builddrop{border:1px solid var(--line); border-radius:10px; margin:8px 0; background:rgba(13,18,32,.55); overflow:hidden}
.builddrop summary{padding:9px 12px; cursor:pointer; font-size:12px; font-weight:700; color:var(--gold2); list-style:none; display:flex; align-items:center; gap:7px; letter-spacing:.3px}
.builddrop summary::-webkit-details-marker{display:none}
.builddrop summary::before{content:"▸"; color:var(--dim); font-size:11px; transition:transform .18s ease}
.builddrop[open] summary::before{transform:rotate(90deg); color:var(--neon)}
.builddrop .buildrow{margin:0; padding:9px 12px; border-top:1px solid var(--line); background:rgba(56,189,248,.04)}
.builddrop .buildrow.guide{background:rgba(56,189,248,.05)}

/* ---------- item & rune icon chips (build section) ---------- */
.irow{display:flex; gap:8px; align-items:flex-start; margin:7px 0}
.irow .slotlabel{flex:0 0 74px; margin-top:7px}
.icwrap{display:flex; flex-wrap:wrap; gap:5px; flex:1}
.itemchip,.runechip,.skchip,.enchip{display:inline-flex; align-items:center; gap:5px; background:var(--glass2); border:1px solid var(--line); border-radius:10px; padding:3px 7px 3px 3px; font-size:11.5px; font-weight:700; color:var(--text); line-height:1.15}
.itemchip img,.runechip img{width:26px; height:26px; border-radius:7px; display:block; background:#101a2e}
.itemchip .icx,.runechip .icx{width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:15px}
.itemchip .icn,.runechip .icn{max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbadge{font-size:8px; font-weight:900; letter-spacing:.5px; padding:2px 5px; border-radius:6px; margin-left:2px}
.t-ap{background:rgba(167,139,250,.18); color:#b9a5ff; border:1px solid rgba(167,139,250,.45)}
.t-ad{background:rgba(249,115,22,.16); color:#fb923c; border:1px solid rgba(249,115,22,.45)}
.t-tank{background:rgba(62,207,142,.14); color:#4ade80; border:1px solid rgba(62,207,142,.4)}
.t-sup{background:rgba(245,207,107,.13); color:var(--gold2); border:1px solid rgba(212,175,55,.4)}
.t-hyb{background:rgba(99,102,241,.16); color:#a5b4fc; border:1px solid rgba(99,102,241,.45)}
.t-boots{background:rgba(148,163,184,.13); color:#cbd5e1; border:1px solid rgba(148,163,184,.4)}
.t-key{background:rgba(56,189,248,.16); color:var(--neon); border:1px solid rgba(56,189,248,.5)}
.runechip.rkey{border-color:rgba(56,189,248,.5); background:rgba(56,189,248,.08)}
.skchip{color:var(--dim)}
.enchip{color:var(--gold2); padding:3px 8px}
.legendline{font-size:10px; color:var(--dim); margin:6px 0 2px}
.youtag{background:rgba(56,189,248,.15); color:var(--neon); border:1px solid rgba(56,189,248,.45); border-radius:6px; font-size:8.5px; font-weight:900; letter-spacing:.5px; padding:2px 5px; flex:0 0 auto}
.slot.empty.you{background:rgba(56,189,248,.05); border-style:dashed}

/* two-tap confirm state */
.mode.danger[data-armed="1"],.bigbtn.danger[data-armed="1"]{background:rgba(240,82,82,.15); border-color:var(--red); color:var(--red); box-shadow:0 0 12px rgba(240,82,82,.35)}

/* ---------- draft saver ---------- */
.draft-row{display:flex; align-items:stretch; gap:6px; margin:6px 0}
.draft-row details{flex:1}
.draft-row .del-draft{flex:0 0 30px; border:1px solid var(--line); border-radius:10px; background:var(--glass2); color:var(--dim); font-size:11px; cursor:pointer}
.draft-row .del-draft:active{color:var(--red); border-color:var(--red)}
.dsaver summary{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.wl{font-weight:900; letter-spacing:.5px}
.wl-w{color:var(--green)}
.wl-l{color:var(--red)}

/* ---------- draft board (wildriftcore-style slot entry) ---------- */
.controlsrow{align-items:flex-end}
.controlsrow label{flex:1}
/* wildriftcore draft-tool layout: ally column LEFT · champion pick MIDDLE · enemy column RIGHT */
.draftwrap{display:grid; grid-template-columns:86px minmax(0,1fr) 86px; gap:6px; border-radius:16px; padding:9px 7px; margin:8px 0; align-items:start}
.boardteam{display:flex; flex-direction:column; gap:5px; min-width:0}
.draftmid{display:flex; flex-direction:column; gap:8px; min-width:0}
button,.rf,.bslot,.champ{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.boardvs{text-align:center; font-size:11px; font-weight:900; font-style:italic; color:var(--dim); letter-spacing:1px; padding:0 0 1px}
.bslot{display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:11px; padding:5px 3px 4px; min-height:64px; background:var(--glass); border:1.5px solid var(--line); position:relative; cursor:pointer; transition:border-color .15s, box-shadow .15s; overflow:hidden}
.bslot.blue.filled{border-color:rgba(56,189,248,.45)}
.bslot.red.filled{border-color:rgba(255,107,107,.45)}
.bslot.sel{border-color:var(--gold) !important; box-shadow:0 0 0 2px rgba(212,175,55,.35), 0 0 14px rgba(212,175,55,.25)}
.bslot.you{border-style:dashed; background:rgba(56,189,248,.05)}
.bslot.you.filled{border-style:solid; border-color:var(--gold); box-shadow:0 0 12px rgba(212,175,55,.35)}
.bslot .role-tag{flex:0 0 auto; font-size:7.5px; font-weight:900; letter-spacing:.7px; color:var(--gold2); text-transform:uppercase; background:var(--glass2); border:1px solid var(--line); border-radius:999px; padding:1px 5px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bslot .youtag{position:absolute; top:2px; left:2px; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#141414; font-size:7.5px; font-weight:900; letter-spacing:.6px; padding:1px 5px; border-radius:6px}
.bslot .portrait{width:34px; height:34px; flex:0 0 34px; border-radius:8px; overflow:hidden; background:var(--glass2); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; color:#fff; position:relative; margin-top:2px}
.bslot .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:8px}
.bslot .bname{display:flex; flex-direction:column; align-items:center; gap:1px; max-width:100%; min-width:0}
.bslot .pname{font-size:9.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.bslot .pmeta{font-size:8px; color:var(--dim)}
.bslot .bempty{font-size:8.5px; color:var(--dim); opacity:.8; text-align:center; line-height:1.35; padding:2px 0}
.bslot .unlock{position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:rgba(240,82,82,.92); color:#fff; font-size:9px; font-weight:900; display:flex; align-items:center; justify-content:center; z-index:2}
.bslot.slam{animation:slam .4s cubic-bezier(.2,1.5,.35,1)}

/* ---------- full build buy order ---------- */
.orderchip{display:inline-flex; align-items:flex-start; gap:2px}
.bnum{font-size:10px; font-weight:900; color:var(--gold2); min-width:12px; text-align:center; line-height:1.15; margin-top:3px}
.bnum.start{color:var(--neon); font-size:8px; letter-spacing:.3px; margin-top:6px; min-width:auto}