/* Draft helper styles */
:root{--bg:#EEF1F5;--panel:#FFFFFF;--ink:#0F1B2D;--mute:#5A6678;--line:#D3D9E2;--gold:#8A6A1F;--blue:#1E5FBF;--red:#B4322A;--ok:#0F7F78;--ad:#C77B1F;--ap:#7B4FD1;--chip:#E6EAF0;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#091322;--panel:#0F1D33;--ink:#EAE6DA;--mute:#8C9AB0;--line:#24344F;--gold:#D2B26C;--blue:#5A9BFF;--red:#F0685E;--ok:#2FD1C4;--ad:#E8993A;--ap:#9C78EE;--chip:#182843}}
:root{color-scheme:light dark}:root[data-theme="light"]{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"]{--bg:#091322;--panel:#0F1D33;--ink:#EAE6DA;--mute:#8C9AB0;--line:#24344F;--gold:#D2B26C;--blue:#5A9BFF;--red:#F0685E;--ok:#2FD1C4;--ad:#E8993A;--ap:#9C78EE;--chip:#182843}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 Barlow,system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:1440px;margin:0 auto;padding:14px 12px 40px}
h1{font:700 26px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;margin:4px 0 2px;color:var(--gold);letter-spacing:.3px}
h2{font:700 19px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;margin:0 0 8px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px}
.side.b{border-top:4px solid var(--blue)}.side.r{border-top:4px solid var(--red)}
.slot{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:40px;margin:0 0 5px;padding:5px 9px;border:1px dashed var(--line);border-radius:6px;background:transparent;text-align:left}
.slot.f{border-style:solid;background:var(--chip)}
.slot small{color:var(--mute);font-size:12px}
.bans{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.ban{flex:1 1 40px;min-width:40px;min-height:30px;padding:2px 3px;font-size:11px;border:1px dashed var(--line);border-radius:5px;background:transparent;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ban.f{border-style:solid;text-decoration:line-through;color:var(--ink);background:var(--chip)}
.tg{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 8px}
.tg button,.rf button{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.tg button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rf{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:8px 0}
.rf button{white-space:nowrap}
.cff{margin-top:0;flex-wrap:wrap;overflow:visible}
.rs{display:none}
#cffb,#drbig{display:none}.cff button{font-size:13px;padding:4px 9px}.cff .cfx{border-style:dashed}.rf button[aria-pressed=true]{background:var(--gold);color:var(--bg);border-color:var(--gold)}
input[type=search]{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;margin-top:8px}
.ch{display:block;text-align:left;padding:7px 8px;border:1px solid var(--line);border-left:5px solid var(--ad);border-radius:6px;background:var(--panel);min-height:48px}
.ch.P{border-left-color:var(--ap)}.ch.M{border-left-color:transparent;background:linear-gradient(var(--ad),var(--ap)) left/5px 100% no-repeat border-box,var(--panel)}
.ch b{display:block;font-weight:600;font-size:14px;line-height:1.15;hyphens:auto}
.ch span{font-size:12px;color:var(--mute)}
.ch.off{opacity:.35}
.an{margin-top:18px;display:grid;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px}
.dm{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--chip);margin:4px 0 2px}
.dm i{display:block;height:100%}.dm .a{background:var(--ad)}.dm .p{background:var(--ap)}
.lg{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.tr{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tr span{padding:3px 9px;border-radius:999px;font-size:13px;background:var(--chip);color:var(--mute);text-decoration:line-through}
.tr span.y{color:var(--ok);text-decoration:none;font-weight:600}
.sg{display:grid;gap:5px;margin-top:6px}
.sg button{display:flex;justify-content:space-between;gap:8px;text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:transparent}
.sg em{font-style:normal;color:var(--mute);font-size:13px}
.note{color:var(--mute);font-size:13px;margin:8px 0 0}
.reset{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:transparent}
.dbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.dbar .tg{margin:0}
.reset:hover{border-color:var(--red);color:var(--red)}
@media(max-width:420px){.board{gap:6px}.side{padding:8px}}
.tools{margin-top:14px}
.tools input,.tools select,.tools textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;margin:0 0 6px}
.tools textarea{min-height:70px}
.row{display:grid;grid-template-columns:1fr}
@media(min-width:600px){.row{grid-template-columns:1fr 1fr 1fr;gap:6px}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.chip{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--chip)}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pchips .chip{display:inline-flex;align-items:center;font-size:14px;padding:3px 10px;line-height:1.4}
.pchips .chip .ico{width:20px;height:20px;margin:0 6px 0 -4px;border-radius:50%}
.chip.en{border-color:var(--red);color:var(--red)}.chip.al{border-color:var(--blue);color:var(--blue)}
.nt{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.btn,.nt button{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:transparent}
.good{color:var(--ok);margin:4px 0}.bad{color:var(--red);margin:4px 0}
.ins{margin:8px 0}
.nc .ico{width:20px;height:20px;display:inline-block;margin:0 6px 0 -4px;border-radius:5px;flex:none}
/* matchup tiles: full width of the card; the champion name and each role stay on one line */
body .mem.sm.mt{display:flex;width:100%;max-width:none;align-items:center;gap:8px;box-sizing:border-box}
body .mem.sm.mt .mtx{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;flex:1 1 auto;min-width:0}
body .mem.sm.mt b{white-space:nowrap;overflow-wrap:normal;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis}
body .mem.sm.mt .rls{display:flex;flex-wrap:wrap;gap:0 10px;font-size:12px}
body .mem.sm.mt .rl{white-space:nowrap;overflow-wrap:normal}
body .mem.sm.mt button{margin-left:auto;flex:none}
.epl{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.epl .lu b{font-weight:600}
.epl .lu.got{border-color:var(--red)}
.epr{margin:8px 0}
.epr+.epr{border-top:1px solid var(--line);padding-top:8px}
.epr .eph{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
body .cmb-h{align-items:center}
.cmb-h .chh .ico{width:30px;height:30px;border-radius:6px}
.cmb-h .chh b{font-size:15px}
.chh{display:flex;align-items:center;gap:10px;min-width:0}
.chh .ico{width:44px;height:44px;margin:0;border-radius:8px;flex:none}
.chh .cn{font-size:16px}
.chh .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.cinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 14px;margin:6px 0}
.cinfo .nl{margin:6px 0 3px}
.chip .ico{width:18px;height:18px;display:inline-block;margin:0 5px 0 0;vertical-align:-4px;border-radius:4px}
.cprow{margin:10px 0}
.cph{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.cptiles{display:flex;flex-wrap:wrap;gap:6px}
.eptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.ept{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer}
.ept:hover,.ept:focus-visible{border-color:var(--red)}
.ept.pl{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.ept .ico{width:26px;height:26px;flex:none;margin:0;border-radius:6px}
.ept>span{display:flex;flex-direction:column;min-width:0}
.ept b{font-size:14px;font-weight:600}
.ept b,.ept small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ept small{font-size:12px;color:var(--mute)}
.ept small.plx{color:var(--gold);font-weight:600}
button.mem.sm{cursor:pointer;text-align:left}
button.mem.sm .ico{display:inline-block}
button.mem.sm small{display:block}
#rf button[aria-pressed=true]{background:var(--panel);color:inherit;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
/* champion boxes in the combo cards: at least 20% of the card width (minus the room of the + signs and gaps, so five still fit in one row) */
body .cmb-m{gap:6px}
body .cmb-m .cslot{flex:1 1 calc(20% - 18px);min-width:calc(20% - 18px)}
body .cmb-m .cmb-plus{flex:none;width:10px;text-align:center}
body .cslot .mem{width:100%;max-width:none;min-width:0}
/* role text colors: darker on light backgrounds, brighter on dark ones */
:root{--rT:#A63E0A;--rJ:#176A2F;--rM:#6A3FC4;--rB:#0F5CAB;--rS:#755800}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--rT:#FF8A3D;--rJ:#4CC76B;--rM:#B07CFF;--rB:#3DA5FF;--rS:#F2C94C}}
:root[data-theme="dark"]{--rT:#FF8A3D;--rJ:#4CC76B;--rM:#B07CFF;--rB:#3DA5FF;--rS:#F2C94C}
.rt.rT{color:var(--rT)}.rt.rJ{color:var(--rJ)}.rt.rM{color:var(--rM)}.rt.rB{color:var(--rB)}.rt.rS{color:var(--rS)}
/* GG style (light). Background #CFDAEA, active color #0A2C59. Other palette colors: light blue #1B86D8, orange #F27052, dark pink #A61B67, pink #F24B6A. Change the variables in the first rule to adjust the look. */
html:root[data-style="gg"]{--bg:#CFDAEA;--panel:#E9EFF8;--ink:#0B1F3A;--mute:#3E577A;--line:#A7B9D3;--gold:#0A2C59;--blue:#1B86D8;--red:#A61B67;--ok:#0B5EA6;--ad:#F27052;--ap:#A61B67;--chip:#BCCBE0;--lb:#1B86D8;--dp:#A61B67;--pk:#F24B6A;--rT:#A63E0A;--rJ:#176A2F;--rM:#6A3FC4;--rB:#0F5CAB;--rS:#755800;color-scheme:light}
html:root[data-style="gg"] body{background:radial-gradient(900px 480px at 6% -8%,rgba(27,134,216,.22),transparent 60%),radial-gradient(760px 420px at 100% 0,rgba(242,75,106,.12),transparent 55%),var(--bg);background-attachment:fixed}
html:root[data-style="gg"] h1{background:linear-gradient(90deg,var(--gold) 0%,var(--lb) 65%,var(--pk) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-transform:uppercase;letter-spacing:.14em}
html:root[data-style="gg"] h2{text-transform:uppercase;letter-spacing:.08em;font-size:17px}
html:root[data-style="gg"] .top{border-bottom:2px solid var(--gold);box-shadow:0 1px 14px rgba(10,44,89,.25)}
html:root[data-style="gg"] .card,html:root[data-style="gg"] .side,html:root[data-style="gg"] .cmb,html:root[data-style="gg"] .ng,html:root[data-style="gg"] .cc{box-shadow:0 0 0 1px rgba(10,44,89,.10),0 8px 22px rgba(10,44,89,.12)}
html:root[data-style="gg"] .cmb{border-left-color:var(--dp)}
html:root[data-style="gg"] .btn:hover,html:root[data-style="gg"] .tc:hover,html:root[data-style="gg"] .tchip button:hover{border-color:var(--lb);box-shadow:0 0 10px rgba(27,134,216,.4)}
html:root[data-style="gg"] .tg button[aria-pressed=true],html:root[data-style="gg"] .rf button[aria-pressed=true]{background:var(--gold);color:#E9EFF8;border-color:var(--gold);box-shadow:0 0 12px rgba(10,44,89,.35)}
.cg .cmb-m{gap:6px}
.cg .mem{min-width:0;padding:6px 8px}
.cg .cmb-plus{align-self:center}
.alts.dim{opacity:.85}
.alts .altd{border:1px dashed var(--line);border-radius:999px;padding:0 8px;margin:0 2px;opacity:.7;cursor:default}
a.btn{display:inline-block;text-decoration:none;color:inherit}
.rt{font-weight:600}
/* tags with a role icon: keep the pill shape and the row height the same as tags without an icon */
body .tag{display:inline-flex;align-items:center;gap:4px;line-height:1.35;white-space:nowrap;vertical-align:middle;max-width:100%}
body .tag:has(.rico){padding-left:4px}
body .tag .rico{width:1.2em;height:1.2em;margin:0;vertical-align:baseline;flex:none}
body .tag .rico svg.ic{inset:12%;width:76%;height:76%}
body .lu small{display:flex;align-items:center;gap:4px}
body .lu small .rico{width:1.2em;height:1.2em;margin:0;vertical-align:baseline;flex:none}
body .rf button .rico{margin:0 4px 0 0;vertical-align:-.4em}
.rico{display:inline-block;position:relative;width:1.45em;height:1.45em;vertical-align:-.45em;margin-right:.35em}
.rico svg.ic{position:absolute;inset:15%;width:70%;height:70%;margin:0;color:var(--rc)}
.rico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.rico.ok img{opacity:1}.rico.ok svg.ic{display:none}.rico.x img{display:none}
.tag .rico,.lu small .rico{width:1.3em;height:1.3em;vertical-align:-.35em}
.ic{width:1.1em;height:1.1em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-right:.3em}
summary>.ic,.dh .ic,h2 .ic{color:var(--gold)}
.tag .ic{width:.95em;height:.95em;margin-right:3px;color:inherit}
.lu small .ic{width:.95em;height:.95em}
.rf button .ic{margin-right:4px}
.cm button .ic{margin-right:6px;color:var(--gold)}
/* long names: wrap or cut them instead of breaking the layout */
body .dr{overflow-x:hidden}
body .dr b,body .dr small,body .dr em,body .dr h2,body .dr h3,body .dr .tname,body .dr .note{overflow-wrap:anywhere}
body .pc>summary,body .pc .pn,body .pc .pills{min-width:0;max-width:100%}
body .pc .pn b{overflow-wrap:anywhere}
body .tp>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
body .tp>div:first-child b{min-width:0;max-width:100%;overflow-wrap:anywhere}
body .lu{max-width:100%;min-width:74px}
body .lu b{overflow-wrap:anywhere}
body .pt{min-width:0;overflow:hidden}
body .pt .lnk{display:block;width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
body .pt .pts{min-width:0}
body .pt .pts span{white-space:nowrap}
body .mem{max-width:200px;min-width:0}
body .mem b,body .mem small,body .mem .st{max-width:100%;overflow-wrap:anywhere;text-align:center}
body .tlist li,body .tlist .tname{min-width:0}
body .tchip{max-width:100%}
body .tchip .tn{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .sg button{flex-wrap:wrap;align-items:baseline}
body .sg button>span{flex:0 0 auto;font-weight:600}
body .sg button em{flex:1 1 160px;min-width:0;text-align:right;overflow-wrap:anywhere}
body .sg.bp button{flex-direction:column;align-items:stretch;gap:4px;padding:8px 10px}
body .sg.bp button>span{display:flex;align-items:center;gap:8px}
body .sg.bp .ico{width:24px;height:24px;margin:0;flex:none}
body .sg.bp em{display:flex;flex-wrap:wrap;gap:4px;text-align:left;flex:none}
.sg.bp i{font-style:normal;font-size:12px;padding:1px 8px;border-radius:999px;background:var(--chip);color:var(--ok)}
.sg.bp i:first-child{color:var(--mute)}
.sg.bp i.neg{color:var(--red)}
body .ng>summary b,body .ng>summary h2{overflow-wrap:anywhere}
.actb{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--mute);padding:1px 10px;font:inherit;font-size:12px;cursor:pointer}
.actb.on{border-color:var(--ok);color:var(--ok);font-weight:600}
.lineup{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
button.lu{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.lu.on{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
body .tslots .lu b{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;overflow-wrap:normal;word-break:normal;min-width:0}
body .tslots .lu b .fx{margin-left:0}
.lu{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;padding:4px 10px;min-width:74px;background:var(--bg)}
.lu small{color:var(--mute);font-size:11px}
.lu.none{opacity:.55}
.tp.bench .tlist{opacity:.7}
.cslot{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.alts{font-size:12px;color:var(--mute);text-align:center;line-height:1.7}
.alts button{border:1px dashed var(--line);border-radius:999px;background:transparent;color:inherit;font:inherit;padding:0 8px;margin:0 2px;cursor:pointer}
.alts button:hover{border-color:var(--gold);color:var(--ink)}
.tbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tchip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--panel);overflow:hidden}
.tchip button{border:0;background:transparent;color:inherit;font:inherit;padding:6px 12px;cursor:pointer}
.tchip.on{border-color:var(--gold);background:var(--chip)}
.tchip.on .tn{font-weight:600}
.tchip .ti{padding:6px 8px;color:var(--mute)}
.tchip .ti:hover{color:var(--ink)}
button.tchip.add{border-style:dashed;padding:6px 12px;color:var(--gold);cursor:pointer;background:transparent;font:inherit}
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.tools .bar select,.tools .bar input{width:auto;margin:0;flex:1 1 130px;min-width:0}
.tools .bar .btn{flex:0 0 auto}
.mem .st{color:var(--mute)}
.pc>summary{align-items:center}
.pc .pn{margin-right:auto}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--chip);font-size:12px;color:var(--mute)}
.pill.w{font-weight:600}
.w.hi{color:var(--ok)}.w.lo{color:var(--red)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:4px}
.pt{position:relative;border:1px solid var(--line);border-radius:8px;padding:6px 26px 6px 8px;background:var(--panel)}
.pt .lnk{font-weight:600;color:var(--ink);text-decoration:none;text-align:left;border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;padding:0}
.pt .lnk .ico{display:inline-block;width:22px;height:22px;margin:0 6px -6px 0}
.pt .pts{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--mute);margin-top:2px}
.pt .x{position:absolute;top:2px;right:4px;border:0;background:transparent;color:var(--mute);font-size:16px;line-height:1;cursor:pointer}
.pt .x:hover{color:var(--red)}
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:6px}
.tc{padding:10px;border:2px solid var(--line);border-radius:10px;background:var(--panel);text-align:left;cursor:pointer;font:inherit;color:inherit}
.tc[aria-pressed=true]{border-color:var(--gold);background:var(--chip)}
.tc b{display:block}.tc small{color:var(--mute);font-size:12px}
.fl{display:block;margin:10px 0 4px;font-weight:600;font-size:14px}
.sec{margin:16px 0 4px;font:600 16px/1.2 Barlow,system-ui,sans-serif}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ngrid .cmb{margin:0}
.cmb.mu{border-left-color:var(--mute)}
.mem.sm{flex-direction:row;align-items:center;gap:6px;min-width:0;padding:4px 6px 4px 10px;border-width:1px}
.mem.sm.strong{border-color:var(--ok)}.mem.sm.weak{border-color:var(--red)}
.mem.sm .ico{width:22px;height:22px;margin:0}
.mem.sm button{border:0;background:transparent;color:var(--mute);font-size:16px;line-height:1;padding:0 4px;cursor:pointer}
.mem.sm button:hover{color:var(--red)}
.cmb{border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:10px;padding:10px;margin:10px 0;background:var(--bg)}
.cmb-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:8px}
.cmb-m{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.cmb-plus{align-self:center;color:var(--mute);font-weight:700}
.mem{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:84px;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:var(--panel);font:inherit;color:inherit;text-align:center}
.mem.yours{border-color:var(--ok);background:var(--chip)}
.mem.need{border-style:dashed;cursor:pointer}
.mem.need:hover{border-color:var(--gold)}
.mem b{font-weight:600;font-size:14px}
.mem small{color:var(--mute);font-size:12px}
.mem .st{font-size:11px;font-weight:600}
.mem.yours .st{color:var(--ok)}.mem.need .st{color:var(--gold)}
.mem .ico{margin:0 0 2px}
.cmb-b{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.mem.mp{border-style:solid;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.mem.mb{opacity:.55;border-color:var(--red)}
.sg button.mbk{border-color:var(--red);opacity:.6}
#gate{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:var(--bg);padding:20px;overflow:auto}
html.locked #gate{display:flex}
html.locked body>*:not(#gate){display:none!important}
#gate form{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
#gate h1{margin:0 0 4px}#gate p{margin:0 0 12px;color:var(--mute)}
#gate input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit}
#gate label{display:block;margin:10px 0;color:var(--mute);font-size:14px}
#gate textarea{width:100%;min-height:90px;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:12px monospace}
#gate button{width:100%;margin-top:8px;padding:10px;border:0;border-radius:6px;background:var(--gold);color:var(--bg);font:inherit;font-weight:600;cursor:pointer}
#gm,#sm{margin:10px 0 0!important;min-height:1.4em;color:var(--red)!important;font-size:14px}
.tp{margin:12px 0}
.tlist{list-style:none;margin:6px 0 0;padding:0}
.tpt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tpb{display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;max-width:100%}
.tpb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpb small{color:var(--ink);font-size:12px;font-weight:700;background:var(--chip);border-radius:999px;padding:0 7px}
.tpb[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);font-weight:600}
.tpb.bench{opacity:.7}
.tph{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tpk{margin:10px 0 0;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tpkh{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tpkh .rf{margin:0}
.fx{display:inline-block;flex:none;margin-left:5px;padding:0 4px;border:1px solid var(--ap);border-radius:4px;color:var(--ap);font-size:10px;font-weight:700;line-height:14px;letter-spacing:.02em;vertical-align:middle;font-style:normal;text-transform:uppercase}
.tgc .fx{position:absolute;z-index:2;top:3px;left:3px;margin:0;background:var(--panel);max-width:none;overflow:visible;font-size:9px;line-height:13px;padding:0 3px}
.tml{align-self:center;font-size:12px;color:var(--mute);white-space:nowrap}
.tpkh input{flex:1 1 160px;min-width:0;margin:0}
.lnk{border:0;background:none;padding:0;color:var(--gold);font:inherit;text-decoration:underline;cursor:pointer}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:340px;overflow-y:auto;padding:2px;overscroll-behavior:contain}
.tgc{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.tic{position:relative;display:block;flex:none;width:40px;height:40px;border-radius:6px;overflow:hidden;background:var(--chip)}
.tic i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:400;color:var(--mute)}
.tic .ico{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0}
.tgc span{font-size:11px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgc em{position:absolute;top:2px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;font-style:normal;font-size:12px;font-weight:800;line-height:20px;text-align:center;color:var(--bg);background:var(--gold);box-shadow:0 0 0 2px var(--panel)}
.tgc.in{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.tgc.no{border-color:var(--red);opacity:.8}
.tgc.no em{background:var(--red)}
.tgc.no .tic{filter:grayscale(1)}
.tgc.lr{border-color:var(--ap);border-style:dashed}
.tgc.lr em,.tovi.lr em{background:var(--ap)}
.tovi.lr .tic{box-shadow:inset 0 0 0 2px var(--ap);opacity:.85}
.nc.learn{border-color:var(--ap);border-style:dashed}
.nc.unsure{border-color:var(--ad);border-style:dotted}
.tgc.un{border-color:var(--ad);border-style:dotted;box-shadow:inset 0 0 0 1px var(--ad)}
.tgc.un em,.tovi.un em{background:var(--ad)}
.tovi.un .tic{box-shadow:inset 0 0 0 2px var(--ad)}
.tgc.out{opacity:.5}.tgc.out .tic{filter:grayscale(1)}
#tll{display:flex;flex-direction:column;gap:6px}
.tov{display:flex;flex-direction:column;gap:4px;width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tov.on{border-color:var(--gold)}
.tov.bench{opacity:.75}
.tovh{display:flex;align-items:center;gap:6px;min-width:0}
.tovh b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tovh small{color:var(--mute);font-size:12px;margin-left:auto;white-space:nowrap}
.tovc{display:flex;flex-wrap:wrap;gap:3px}
.tovi{position:relative;display:inline-flex}
.tovi .tic{width:28px;height:28px;border-radius:5px}.tovi .tic i{font-size:10px}
.tovi em{position:absolute;right:-3px;bottom:-3px;font-style:normal;font-size:10px;font-weight:800;line-height:14px;min-width:14px;padding:0 2px;text-align:center;border-radius:7px;color:var(--bg);background:var(--gold);box-shadow:0 0 0 1.5px var(--panel)}
.tovi.no .tic{filter:grayscale(1);opacity:.55;box-shadow:inset 0 0 0 2px var(--red)}
@media (max-width:520px){.tgrid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));max-height:300px}.tgc .tic{width:36px;height:36px}.tlist li{padding:3px 6px;margin-bottom:3px}.tpkh .rf{width:100%;flex-wrap:wrap}.tml{width:100%}.tpkh .rf button{flex:1;padding:6px 4px}}
.tlist li{display:flex;align-items:center;gap:8px;padding:5px 8px;margin:0 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.tlist li.drag{opacity:.45}
.tlist li.over{border-color:var(--gold);box-shadow:inset 0 3px 0 var(--gold)}
.tlist .dg{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;color:var(--mute);padding:2px 6px}
.tlist .tn{width:1.6em;color:var(--ink);font-size:14px;font-weight:700}
.tlist .tname{flex:1}
.tlist .ico{width:28px;height:28px;margin:0}
.tlist button{border:0;background:transparent;color:var(--mute);font-size:18px;line-height:1;cursor:pointer}
.st{width:100%;border-collapse:collapse}.st td,.st th{padding:3px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
.st button{border:0;background:transparent;color:var(--mute);font-size:16px;line-height:1;cursor:pointer}
.st .lnk,.lnk{color:var(--gold);text-decoration:underline;font-size:13px;padding:0}
.ng{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0;background:var(--bg)}
.ng>summary{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ng[open]>summary{margin-bottom:4px}
.nl{font-size:12px;color:var(--mute);margin:8px 0 3px}
.nc{display:inline-flex;align-items:center;padding:2px 4px 2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--chip);margin:0 6px 6px 0}
.nc.syn{border-color:var(--ok)}.nc.strong{border-color:var(--gold)}.nc.weak{border-color:var(--red)}
.nc button{border:0;background:transparent;padding:0 6px;color:var(--mute);font-size:16px;line-height:1}
.nc button:hover{color:var(--red)}
.ncl{display:inline-block;padding:2px 10px;margin:0 6px 6px 0}
.tools input[type=checkbox],.tools input[type=radio]{width:auto;padding:0;margin:0 5px 0 0}
#ef>div{margin:8px 0}#ef label{display:inline-flex;align-items:center;margin:0 12px 4px 0}#ef b{display:block;margin-bottom:2px}
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:16px;max-width:min(92vw,380px)}
dialog::backdrop{background:rgba(0,0,0,.5)}
#cfm-t{white-space:pre-line;margin:0 0 12px}
.top{position:sticky;top:0;z-index:40;flex-wrap:wrap;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.top h1{margin:0}
.drr #q{max-width:380px}
.drh{position:sticky;top:-8px;z-index:2;margin:-8px -10px 0;padding:8px 10px 2px;background:var(--bg)}
.dh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.dh h2{margin:0}
.dh button,.dh .btn{padding:5px 11px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.dh button[aria-pressed=true]{background:var(--gold);color:var(--bg);border-color:var(--gold)}
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary h2{display:inline;margin:0;color:var(--ink)}
details>summary::before{content:"\25B8";display:inline-block;width:1.1em;color:var(--gold)}
details[open]>summary::before{content:"\25BE"}
details.card[open]>summary{margin-bottom:8px}
.ico{width:34px;height:34px;border-radius:6px;display:block;margin-bottom:4px;background:var(--chip)}
.mcs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.mcs:empty{display:none}.mcs .chip button{border:0;background:transparent;padding:0 0 0 4px;cursor:pointer}
.cc{border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0}
.cch{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{font:600 12px Barlow,system-ui,sans-serif;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:1px 8px;vertical-align:middle}
.ch,.slot.g,.ban.g{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ch.mb{opacity:.5;border:1px solid var(--red);border-left:5px solid var(--red)}
.ch.mp{border:1px solid var(--gold);border-left:5px solid var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.bd{display:block;font-weight:600}.mb .bd{color:var(--red)}.mp .bd{color:var(--gold)}
.slot.g{opacity:.6;border-style:solid;border-color:var(--gold)}
.ban.g{opacity:.6;border-style:solid;border-color:var(--red);color:var(--red)}
.cm{position:fixed;z-index:50;min-width:180px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);padding:4px}
.cm button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;border-radius:5px}
.cm button:hover{background:var(--chip)}
[data-me=r] .chip.en{border-color:var(--blue);color:var(--blue)}[data-me=r] .chip.al{border-color:var(--red);color:var(--red)}
h3{font:600 15px/1.2 Barlow,system-ui,sans-serif;margin:10px 0 2px}
details{margin-top:10px}
.cbw{position:relative}
.cbl{position:absolute;z-index:5;left:0;right:0;top:calc(100% - 6px);max-height:220px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.cbl li{padding:8px 9px;border-radius:4px;cursor:pointer}
.cbl li.on,.cbl li:hover{background:var(--chip)}
.cbl li.none{color:var(--mute);cursor:default}
summary{cursor:pointer;color:var(--mute)}
/* Scouting */
#tf{margin:8px 0 0}
#tempty{margin:6px 0 0}
.plsec{margin:12px 0 8px;padding-top:10px;border-top:1px dashed var(--line)}
.plsec>.nl{margin:0 0 6px;font-weight:600;color:var(--ink);font-size:13px}
#plrow{margin:0 0 6px}
#plimp{margin-top:4px}
#plimp>summary{padding:4px 0}
#plsrc{width:100%;min-height:80px;margin:0 0 6px}
.plp{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.plp .chip{font-size:13px}
.plp .chip.dim{opacity:.55;text-decoration:line-through}
.plm{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}
.plm>div{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px}
.plm>div.miss{border-style:dashed;color:var(--mute)}
.plm .mi{flex:1;min-width:0;display:flex;flex-direction:column}
.plm .mi small{color:var(--mute);font-size:12px}
.plm b{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plm>.plmi{display:block;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px}
.plm>.plmi.miss{display:flex;padding:5px 8px;border-style:dashed}
.plmi>summary{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:pointer;list-style:none}
.plmi>summary::-webkit-details-marker{display:none}
.plmi>summary::before{content:"\25B8";color:var(--mute);font-size:11px}
.plmi[open]>summary::before{content:"\25BE"}
.plsp{margin:8px 0 4px}
.plsp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.plsp>summary::-webkit-details-marker{display:none}
.plsp>summary::before{content:"\25B8";color:var(--mute);font-size:11px}
.plsp[open]>summary::before{content:"\25BE"}
.plside{display:inline-block;font-style:normal;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;color:#fff;background:var(--mute)}
.plside.b{background:#2f6fd6}.plside.r{background:#d04545}
.plsides{display:flex;gap:2px;flex:none}
.plvs{display:flex;align-items:center;gap:3px}
.plvs .ico{width:14px;height:14px;margin:0;flex:none;border-radius:3px}
.plbi{display:flex;flex-wrap:wrap;gap:2px}
.plbi .ico{width:18px;height:18px;margin:0;border-radius:4px;opacity:.85}
.plg{display:grid;grid-template-columns:auto repeat(var(--n),minmax(0,1fr));gap:4px 6px;padding:6px 8px 8px;border-top:1px solid var(--line);align-items:center}
.plgl{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);white-space:nowrap}
.plgl .rico{width:14px;height:14px}
.plgh{font-size:12px;font-weight:600;margin:0}
.pll{display:flex;flex-direction:column;min-width:0;padding:3px 6px;border-radius:6px;background:var(--chip)}
.pll b{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:4px;font-size:13px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pll .ico{width:18px;height:18px;margin:0;flex:none;border-radius:4px}
.pll{text-align:left}
.pll small{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pll.plb{background:none;padding:0 6px}.pll.plb small{white-space:normal}
.plm .x{border:0;background:none;color:var(--mute);font-size:16px;padding:0 4px;cursor:pointer}
.plm a{font-size:12px}
.plc{padding:6px 0;border-top:1px solid var(--line)}
.plc:first-of-type{border-top:0}
.plch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:13px;margin-bottom:4px}
.plch .good,.plch .bad{margin:0;font-weight:600}.plch small{color:var(--mute)}
.plc .chips{margin:0}
.plc .chip.sc .rico{width:14px;height:14px;margin:0 4px 0 -2px}
.plbm{margin:6px 0;padding-left:20px}.plbm li{margin:0 0 6px}
.psec{margin:4px 0}
.psec>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--mute);padding:2px 0}
.psec>summary .note{font-weight:400}
.plchoose{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.pt.plt{padding-right:8px}
.pc .pn b{color:var(--ink)}
.pc>summary{flex-wrap:wrap;row-gap:6px}
.pc>summary .pn{flex:1 1 180px;min-width:0}
.pacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pacts .prole{width:auto;margin:0;padding:5px 8px;font-size:14px}
.pacts .btn{display:inline-flex;align-items:center;padding:5px 12px;font-size:14px}
.pacts .rm:hover{border-color:var(--red);color:var(--red)}
.chip.sc{display:inline-flex;align-items:center;font-size:14px;padding:3px 10px;line-height:1.4}
.chip.sc .ico{width:20px;height:20px;margin:0 6px 0 -4px;border-radius:50%}
/* combo tiles: names stay whole (hyphenated when needed), player names cut with an ellipsis */
body .cslot .mem{padding:8px 4px}
body .cmb-m .cslot{max-width:200px}
body .cslot .mem b{overflow-wrap:normal;hyphens:auto;max-width:100%}
body .cslot .mem small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .cslot .mem .st span{white-space:nowrap}
.cmb .mem small .rico{width:1.2em;height:1.2em;margin-right:3px;vertical-align:-.3em}
/* Default notes */
.dn{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.dn:last-child{border-bottom:0}
.dn .dt{flex:1;min-width:0}
.dn .dt b{font-weight:600;overflow-wrap:anywhere}
.dn .dt small{display:block;color:var(--mute);font-size:12px}
.dn.off .dt{opacity:.5}
.dn .actb{flex:none;min-width:52px}
/* Your team card */
.tcard>summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tcard .turn{margin:0 0 8px;color:var(--mute);font-size:14px}
.tcard .turn.now{display:inline-block;padding:4px 12px;border:1px solid var(--gold);border-radius:999px;background:var(--chip);color:var(--gold);font-weight:600}
.tslots{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin:0 0 10px}
.tslots .lu{min-width:0}
.tslots .lu b{display:flex;align-items:center;gap:6px;min-height:24px}
.tslots .lu.none{border-style:dashed}
.tslots .lu.none b{color:var(--mute);font-weight:500}
.tslots .ico{width:24px;height:24px;margin:0;flex:none;display:inline-block}
.tcard .warn{display:flex;gap:4px;align-items:baseline}
.tcard .ins .ic{flex:none}
/* phones and small tablets */
button,a,summary,.ch,.slot,.ban{touch-action:manipulation}
@media(max-width:700px){
main{padding:10px max(10px,env(safe-area-inset-left,0px)) 40px max(10px,env(safe-area-inset-right,0px))}
.top{padding:6px max(10px,env(safe-area-inset-left,0px)) 6px max(10px,env(safe-area-inset-right,0px));gap:4px}
.top h1{font-size:22px}
input,select,textarea{font-size:16px!important}
.slot{min-height:44px}
.ban{min-height:38px;font-size:12px}
.tg button,.rf button,.dh button,.dh .btn,.btn,.nt button,.tchip button,.tc,.reset{min-height:40px}
.cm button{padding:12px 10px}
.cbl li{padding:11px 10px}
.tlist .dg{padding:8px 10px}
.tlist button,.pt .x,.mem.sm button,.nc button,.st button,.mcs .chip button{min-width:32px;min-height:32px}
.pt{padding-right:34px}
body .cmb-m .cslot{flex-basis:calc(33.33% - 18px);min-width:calc(33.33% - 18px)}
.drr .dh{justify-content:flex-end;margin-bottom:6px}
.drr .dh h2{display:none}
.ch{padding:7px 6px}.ch b{font-size:13.5px}
.drr .dh>span{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#cffb,#drbig{display:inline-block}
.drr:not(.cfo) #cff{display:none}
.drr #rf{margin:6px 0 4px;display:grid;grid-template-columns:auto repeat(5,1fr);gap:4px;overflow:visible}
.drr #rf button{padding:4px 5px;font-size:13px;min-height:36px;display:flex;align-items:center;justify-content:center;gap:2px}
.drr #rf .rl{display:none}.drr #rf .rs{display:inline}
.drr #q{max-width:none;margin:0}
.drr .dh button{min-height:36px;padding:5px 10px;font-size:14px}
.grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.ch{min-height:44px}
}
/* draft bar: undo, next game, live */
.dact{display:flex;gap:6px;flex-wrap:wrap}
.reset .ic{width:1em;height:1em;margin-right:5px;vertical-align:-.12em}
.reset:disabled{opacity:.45;cursor:default}.reset:disabled:hover{border-color:var(--line);color:inherit}
.reset[aria-pressed=true]{background:var(--ok);border-color:var(--ok);color:var(--panel)}
#lmsg{margin:0 0 8px}
/* lane matchup under each pick */
.slot .sn{display:flex;flex-direction:column;min-width:0}
.slot em.vs{font-style:normal;font-size:11px;color:var(--mute);margin:0;line-height:1.25}
.slot em.vs.good{color:var(--ok)}.slot em.vs.bad{color:var(--red)}
/* saved games and the champion page */
.gkpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.gkpi>div{border:1px solid var(--line);border-radius:var(--rs,8px);padding:8px 12px;background:var(--bg);display:flex;flex-direction:column;gap:2px;min-width:0}
.gkpi small{color:var(--mute);font-size:11.5px;font-weight:500}
.gkpi b{font-size:18px;font-weight:700;line-height:1.2}
.gkpi b.up{color:var(--ok)}.gkpi b.down{color:var(--red)}
.gsts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.gbox{border:1px solid var(--line);border-radius:var(--rs,8px);padding:6px 12px 8px;min-width:0}
.gbh{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:4px 0 2px}
.gst{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.gst:last-child{border-bottom:0}
.gst .gn{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.gplus{color:var(--mute);font-size:12px}
.gst .gr2{display:flex;align-items:center;gap:8px;flex:none}
.gst .gr2 b{font-weight:600;font-size:12.5px;white-space:nowrap}
.gst .gr2 small{width:34px;text-align:right;color:var(--mute);font-size:11.5px}
.gbar{display:block;width:54px;height:5px;border-radius:3px;background:var(--chip);overflow:hidden}
.gbar i{display:block;height:100%;background:var(--mute)}
.gst.up .gbar i{background:var(--ok)}.gst.down .gbar i{background:var(--red)}
.gst.up .gr2 b{color:var(--ok)}.gst.down .gr2 b{color:var(--red)}
.gst .lnk,.gpk .lnk{color:var(--ink);text-decoration:none;font-weight:600}
.gst .ico{width:20px;height:20px;border-radius:4px;vertical-align:-5px;margin-right:5px}
.gm{border:1px solid var(--line);border-radius:var(--rs,8px);margin:6px 0;background:var(--panel)}
.gm>summary{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;color:var(--ink)}
.gm[open]>summary{border-bottom:1px solid var(--line)}
.gres{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;background:var(--chip);color:var(--mute)}
.gres.w{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.gres.l{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.gm .gt{display:flex;flex-direction:column;min-width:0;flex:1}
.gm .gt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm .gt small{color:var(--mute);font-size:12px;display:flex;align-items:center;gap:5px}
.gm .gt .sdot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--blue)}.gm .gt .sdot.r{background:var(--red)}
.gm .gr{flex:none;font-size:13px;font-weight:600}.gm .gr .good,.gm .gr .bad,.gm .gr .note{margin:0}
.gmb{padding:4px 12px 12px}
.gmb .nl{margin:10px 0 4px}
.gpk{display:flex;flex-wrap:wrap;gap:5px}
.gpk .chip{font-size:13px;padding:3px 10px}
.gact{margin-top:12px;gap:6px}
.gmb .btn[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.gdel:hover{border-color:var(--red);color:var(--red)}
@media(max-width:600px){.gkpi b{font-size:16px}.gm>summary{padding:8px 10px;gap:8px}.gm .gr{display:none}}
dialog input[type=text],dialog select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;box-sizing:border-box}
#chp{width:min(92vw,560px);max-width:none;max-height:85vh;overflow:auto;box-sizing:border-box}
#chp h3{margin:14px 0 4px;font-size:15px}
#chp .chh .ico{width:52px;height:52px}
.cca{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#gdlg .bar{display:flex;gap:6px;flex-wrap:wrap}
#bkf{margin:4px 0 8px}
.dng{margin:0 0 6px;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#gno{margin-left:8px}#gno:empty{display:none}
.tag:empty{display:none}
/* ===== Polish: one calm, consistent look for Light and Dark (GG keeps its own style) ===== */
:root{--r:10px;--rs:8px;--sh:0 1px 2px rgba(15,27,45,.05),0 1px 1px rgba(15,27,45,.03);--hov:rgba(15,27,45,.045);--acc:#1E5FBF}
:root[data-theme="dark"]{--sh:0 1px 2px rgba(0,0,0,.35);--hov:rgba(255,255,255,.05);--acc:#5A9BFF}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-style="gg"]){--sh:0 1px 2px rgba(0,0,0,.35);--hov:rgba(255,255,255,.05);--acc:#5A9BFF}}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14.5px;-webkit-font-smoothing:antialiased}
h1,h2{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.01em}
h1{font-size:18px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
h2{font-size:15px;font-weight:600}
h3{font-size:14px;font-weight:600}
.logo{width:26px;height:26px;border-radius:7px;flex:none;background:#0F1D33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 10 50 17v14c0 11-8 19-18 23-10-4-18-12-18-23V17z' fill='%23D2B26C'/%3E%3C/svg%3E") center/80% no-repeat}
.note{font-size:12.5px}
/* top bar */
.top{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);padding:8px 16px}
/* cards and sections */
main{padding-top:16px}
.card{border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;margin-bottom:12px}
details.card>summary{display:flex;align-items:center;gap:8px;min-height:24px}
details>summary::before{content:"";width:7px;height:7px;flex:none;border:solid var(--mute);border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s}
details>summary::before,details[open]>summary::before,.plmi>summary::before,.plmi[open]>summary::before,.plsp>summary::before,.plsp[open]>summary::before{content:"";display:inline-block;font-size:0;vertical-align:.2em}
details[open]>summary::before{transform:rotate(45deg)}
summary>.ic,.dh .ic,h2 .ic{color:var(--mute)}
details.card[open]>summary{margin-bottom:12px}
/* buttons, one shape everywhere */
.btn,.reset,.tg button,.rf button,.nt button{border-radius:var(--rs);border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 12px;font-weight:500;line-height:1.3;transition:background .12s,border-color .12s}
.btn:hover,.reset:hover,.tg button:hover,.rf button:hover{background:var(--hov);border-color:color-mix(in srgb,var(--line) 60%,var(--mute))}
.tg button[aria-pressed=true],.rf button[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.reset:hover{color:var(--ink)}
#reset:hover{border-color:var(--red);color:var(--red)}
.reset[aria-pressed=true]{background:var(--ok);border-color:var(--ok);color:#fff}
/* side picker as a segmented control */
#side{display:inline-flex;gap:0;padding:3px;border:1px solid var(--line);border-radius:var(--rs);background:var(--bg)}
#side button{border:0;background:transparent;padding:5px 14px;border-radius:6px;color:var(--mute)}
#side button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
/* draft board */
.board{gap:12px}
.side{border-radius:var(--r);border-top-width:3px;padding:12px}
.side h2{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 10px}
.sdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--blue)}.side.r .sdot{background:var(--red)}
.you{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--chip);color:var(--mute)}
.slot{border-radius:var(--rs);min-height:44px;gap:8px;justify-content:flex-start;padding:5px 10px;margin:0 0 6px}
.slot>small{margin-left:auto;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;font-weight:600}
.slot:not(.f)>small{margin-left:0;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.slot.f{background:var(--bg);border-color:var(--line)}
.slot.f .sn>span:first-child{font-weight:600}
.slot .ico{width:30px;height:30px;border-radius:6px;margin:0;flex:none}
.slot:not(.f):hover,.ban:not(.f):hover{border-color:var(--mute);background:var(--hov)}
.bans{gap:5px}
.ban{border-radius:6px;display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px}
.ban.f{text-decoration:none;color:var(--mute);background:var(--bg)}
.ban.f span{text-decoration:line-through;overflow:hidden;text-overflow:ellipsis}
.ban .ico{width:20px;height:20px;border-radius:4px;margin:0;flex:none;filter:grayscale(1);opacity:.75}
#tg{align-items:center}
/* champion panel */
.ch{border-radius:var(--rs);border-left-width:3px;transition:border-color .12s,background .12s}
.ch:hover{background:var(--hov)}
/* chips, tags and lists */
.chip{border-radius:999px}
.tag{border-radius:999px}
.sg button{border-radius:var(--rs)}
.sg button:hover{background:var(--hov)}
.cc,.cmb{border-radius:var(--r)}
input[type=search],.tools input,.tools select,.tools textarea{border-radius:var(--rs)}
dialog{border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
/* solo queue rank tag */
.tag.rk{font-weight:600}
.rk-iron,.rk-bronze{color:#8C6A4F;border-color:#8C6A4F}.rk-silver{color:#7A8794;border-color:#7A8794}.rk-gold{color:#B8860B;border-color:#B8860B}
.rk-platinum{color:#1C8C83;border-color:#1C8C83}.rk-emerald{color:#16955B;border-color:#16955B}.rk-diamond{color:#4A6FD8;border-color:#4A6FD8}
.rk-master{color:#9B4FD1;border-color:#9B4FD1}.rk-grandmaster{color:#C93C3C;border-color:#C93C3C}.rk-challenger{color:#D49A1E;border-color:#D49A1E}
/* dropdowns look like the buttons, with their own arrow */
select,.tools select,.pacts .prole{-webkit-appearance:none;appearance:none;border:1px solid var(--line);border-radius:var(--rs);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238C9AB0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center/10px no-repeat;color:var(--ink);font:inherit;font-weight:500;line-height:1.3;padding:6px 30px 6px 12px;cursor:pointer;transition:background-color .12s,border-color .12s}
select:hover{background-color:var(--hov);border-color:color-mix(in srgb,var(--line) 60%,var(--mute))}
select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
select option{background:var(--panel);color:var(--ink)}
.pacts .prole{width:auto;margin:0;font-size:14px}
@media(max-width:600px){.top{padding:6px 10px}.card{padding:12px}.side{padding:9px}.slot{padding:4px 7px;gap:6px}.slot .ico{width:26px;height:26px}.ban .ico{display:none}}
/* ===== Views: Draft, Prep, Teams, Library ===== */
.top{display:flex;align-items:center;gap:12px}
.top h1{flex:none}
.vnav{display:flex;gap:2px;margin:0 auto;padding:3px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.vnav button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--mute);font-weight:500;padding:6px 14px;border-radius:7px}
.vnav button:hover{color:var(--ink);background:var(--hov)}
.vnav button[aria-current=page]{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
.vnav .ic{color:inherit}
#stl{flex:none;border:1px solid transparent;background:transparent;color:var(--mute);border-radius:8px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
#stl:hover{background:var(--hov);color:var(--ink)}
.view[hidden]{display:none!important}
#v-prep,#v-lib,#v-teams{max-width:1120px;margin:0 auto}
/* the old side panels now live inside the views */
#v-draft .dr,#v-teams .dr{position:static;transform:none;visibility:visible;width:auto;height:auto;max-height:none;box-shadow:none;background:transparent;border:0;padding:0;z-index:auto;overflow:visible;transition:none}
#v-draft .dr:not(.open),#v-teams .dr:not(.open){display:none}
#drbig{display:none!important}
#dl>.dh,#de>.dh{display:none}
#v-draft .an{margin-top:0}#v-draft .an>.card{margin-bottom:0}
#ds>.dh{margin-bottom:10px}
/* Draft view */
.dgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);grid-template-areas:"board" "tabs" "pane"}
.dboard{grid-area:board;min-width:0}.dboard>.card{margin:0}
.pbar{grid-area:tabs;min-width:0}
.mini{display:none}
.ptabs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh)}
.ptabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--mute);font-weight:500;padding:7px 10px;border-radius:7px}
.ptabs button[aria-selected=true]{background:var(--ink);color:var(--panel)}
.ptabs .ic{color:inherit}
#dl,#de,#dr{grid-area:pane;min-width:0}
#dr{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--r);box-shadow:var(--sh)!important;padding:10px 12px!important}
#dr .drh{position:sticky;top:-10px;margin:-10px -12px 0;padding:10px 12px 4px;background:var(--panel);border-radius:var(--r) var(--r) 0 0}
#dr .dh{margin-bottom:6px}
#dl>.card:first-child,#de>.card:first-child{margin-top:0}
@media(min-width:1100px){
  .dgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"board pick" "tabs pick" "pane pick";align-items:start}
  #ro{display:none}
  #v-draft #dr{grid-area:pick;position:sticky;top:calc(var(--hh,56px) + 12px);max-height:calc(100vh - var(--hh,56px) - 24px);overflow:auto}
  .dgrid{grid-template-rows:auto auto 1fr}
  #dr .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
/* phones and small tablets: bottom tab bar, the board stays on top while the panel below scrolls */
@media(max-width:1099px){
  .vnav{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;border-radius:0;border:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));justify-content:space-around}
  .vnav button{flex:1;flex-direction:column;gap:2px;font-size:11.5px;padding:6px 4px;min-height:48px}
  .vnav button[aria-current=page]{background:transparent;box-shadow:none;color:var(--ink)}
  .vnav button[aria-current=page] .ic{color:var(--acc)}
  .vnav .ic{width:20px;height:20px}
  /* a blurred header would trap the fixed tab bar inside it */
  .top{justify-content:space-between;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel)}
  main{padding-bottom:calc(var(--bn,60px) + 16px)}
}
@media(max-width:899px){
  /* the page scrolls; the panel tabs stick under the header, with a mini board once the big one is out of view */
  #v-draft .dgrid{gap:8px}
  .pbar{position:sticky;top:var(--hh,56px);z-index:20;margin:0;padding:6px 0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  body.bstuck .mini{display:flex}
  #dr .drh{position:static;margin:0;padding:0 0 6px}
  #v-draft .dboard>.card{padding:8px 10px}
  /* the board is always open here; its title would only take room */
  #v-draft .dboard>details>summary{display:none}
  .dbar{margin:0 0 6px;gap:6px;flex-wrap:nowrap}
  .dact{flex-wrap:nowrap;gap:4px}
  .side{padding:7px}.side h2{margin:0 0 6px;font-size:13px}
  .slot:not(.f){min-height:28px}
  #side .pl{display:none}#side button{text-transform:capitalize}
  /* champion search, filters and hide taken share one row */
  #dr .drh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding-bottom:6px}
  #dr .drh>.dh{order:2;margin:0}#dr .drh>#q{order:1}#dr .drh>#rf,#dr .drh>#cff{order:3;grid-column:1/-1;margin:0}
  #dr .drh .dh button{min-height:38px;padding:4px 9px;font-size:13px}
  .dact .reset .bt{display:none}
  .dact .reset{padding:6px 10px;min-height:36px}
  .dact .reset .ic{margin:0;width:18px;height:18px}
  #side button{padding:4px 10px}
  .slot{min-height:34px;padding:2px 7px;margin-bottom:4px}
  .slot .ico{width:24px;height:24px}
  .bans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:4px}
  .ban{min-height:26px;font-size:10.5px;min-width:0;padding:1px 2px}
  #tg{margin:6px 0 0}
  .ptabs button{padding:6px 4px;font-size:13.5px}
}
/* Teams: the team picker sits under My team / Scout; in Scout, what you scout comes first, the tools after */
#ds{display:flex;flex-direction:column}
.tsw{margin:0 0 12px}
.tsw .tbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--sh)}
.tpick{display:flex;align-items:center;gap:8px;flex:1 1 240px;min-width:0}
.tpick span{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.tpick select{flex:1;min-width:0;font-weight:600;font-size:15px}
.tsw .tbar .btn{display:inline-flex;align-items:center;gap:6px}
.tsw .tbar .btn .ic{width:15px;height:15px;color:var(--mute)}
.tsw .tbar .tdel:hover{border-color:var(--red);color:var(--red)}
.tsw .tbar .tnew{border-style:dashed}
.tsw #tf{margin-top:8px}.tsw #tempty{margin:8px 2px 0}
#ds.scout>#msrow{order:1}#ds.scout>#sclu{order:2}#ds.scout>#scpl{order:3}#ds.scout>#scp{order:4}#ds.scout>#sca{order:5}#ds.scout>#sctc{order:0}#ds.scout>#apc{order:7}#ds.scout>#cdc{order:8}#ds.scout>#tlc{order:9}
@media(max-width:600px){.tsw .tbar .btn .bt{display:none}.tpick{flex-basis:100%}}
/* Prime League matches: readable text and icons */
.plm>div,.plm>.plmi{font-size:14px}
.plmi>summary{padding:8px 10px;gap:10px}
.plm .mi small{font-size:12.5px}
.plm b{font-size:14.5px}
.plm a{font-size:13px}
.plside{font-size:11px;padding:2px 6px}
.plg{gap:6px 8px;padding:10px 10px 12px}
.plgl{font-size:13px;gap:6px}
.plgl .rico{width:18px;height:18px}
.plgh{font-size:13.5px}
.pll{padding:5px 8px;gap:1px}
.pll b{font-size:14.5px;gap:6px}
.pll .ico{width:26px;height:26px;border-radius:5px}
.pll small{font-size:12.5px}
.pll small .ico{width:18px;height:18px;vertical-align:-4px}
.plbi{gap:4px}
.plbi .ico{width:28px;height:28px;border-radius:5px;opacity:1}
.plbi .pbc{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 2px;border-radius:6px;background:var(--chip)}
.plbi .pbc small{font-size:12px;color:var(--ink);white-space:nowrap}
.plbi .pbc .ico{width:22px;height:22px}
@media(max-width:600px){.plg{gap:5px 6px;padding:8px}.pll{padding:4px 6px}.pll b{font-size:13.5px}.pll .ico{width:22px;height:22px}.plbi .pbc .ico{width:20px;height:20px}.plgl .rn{display:none}.plgl{font-size:12px}}
/* champion search lists: icon, name and roles, easy to tap */
.cbl{max-height:min(320px,45vh);padding:4px;border-radius:var(--rs);box-shadow:0 12px 32px rgba(15,27,45,.18);top:calc(100% - 2px)}
.cbl li{display:flex;align-items:center;gap:10px;padding:7px 10px;min-height:44px;border-radius:6px}
.cbl li .ico{width:28px;height:28px;margin:0;border-radius:6px;flex:none}
.cbl li .cbn{font-weight:600}
.cbl li small{margin-left:auto;color:var(--mute);font-size:12px;text-align:right}
/* champion editor: header and toggle chips instead of tiny checkboxes */
.efh{display:flex;align-items:center;gap:10px;margin:10px 0 4px}
.efh .ico{width:40px;height:40px;margin:0;border-radius:8px}
.efh b{display:block;font-size:16px;margin:0}.efh small{color:var(--mute);font-size:12px}
#ef>div{margin:12px 0}
#ef>div>b{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
#ef label.efc{position:relative;display:inline-flex;align-items:center;margin:0 6px 6px 0;padding:7px 14px;min-height:38px;border:1px solid var(--line);border-radius:999px;background:var(--panel);cursor:pointer;font-weight:500;user-select:none;transition:background .12s,border-color .12s}
#ef label.efc:hover{background:var(--hov)}
#ef label.efc input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#ef label.efc:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--panel)}
#ef label.efc:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
#ef #esave,#ef #ereset{margin-top:4px}

/* quick picks above the champion grid */
#qp:empty{display:none}
#qp{margin:2px 0 10px}
.qph{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.qph .tag{text-transform:none;letter-spacing:0;color:var(--ok);border-color:var(--ok)}
.qpl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.qpb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:1px solid var(--ok);border-radius:var(--rs,8px);background:color-mix(in srgb,var(--ok) 8%,var(--panel));min-width:0}
.qpb:hover{background:color-mix(in srgb,var(--ok) 16%,var(--panel))}
.qpb .ico{width:36px;height:36px;margin:0;border-radius:8px}
.qpb b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qpb small{font-size:11px;color:var(--mute);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* your players' champions first during your pick */
.gsep{grid-column:1/-1;margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.ch .who{font-style:normal;color:var(--ok);font-weight:600}
.ch.dim{opacity:.55}.ch.dim:hover{opacity:1}
/* draft timer */
/* draft status bar: step, timer and switches */
#tg{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--bg);flex-wrap:nowrap}
#tg .dsl{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
#tg .stp{font-size:12px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
#tg .dss{font-weight:600}#tg .dss.b{color:var(--blue)}#tg .dss.r{color:var(--red)}
#tg .yt{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
#tg .dsd{font-weight:600;color:var(--mute)}
#tg .dsl button{min-height:30px;padding:3px 10px;font-size:12.5px;border-radius:999px}
#tg .dsl button small{color:inherit;opacity:.7;margin-left:2px}
.tpill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);flex:none}
.tmr{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;min-width:4.2ch;text-align:right;color:var(--ink)}
.tprog{display:block;width:56px;height:5px;border-radius:3px;background:var(--chip);overflow:hidden}
.tprog i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .25s linear}
.tpill.low .tmr{color:var(--ad)}.tpill.low .tprog i{background:var(--ad)}
.tpill.over{border-color:var(--red);animation:tpulse 1s ease-in-out infinite}.tpill.over .tmr{color:var(--red)}
@keyframes tpulse{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}}
.dsw{display:inline-flex;gap:4px;flex:none}
#tg .tgl{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:3px 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--mute);font-size:12.5px;font-weight:500}
#tg .tgl .ic{width:14px;height:14px;color:inherit}
#tg .tgl:hover{background:var(--hov);color:var(--ink)}
#tg .tgl[aria-pressed=true]{background:var(--panel);border-color:var(--line);color:var(--ink);box-shadow:var(--sh)}
@media(max-width:600px){#tg{gap:6px;padding:5px 5px 5px 10px}#tg .dsl{font-size:13px;gap:6px}#tg .tgl span{display:none}#tg .tgl{padding:3px 8px}.tprog{width:36px}.tpill{gap:6px;padding:3px 8px}.tmr{font-size:14px}}
@media(max-width:600px){.qpl{gap:4px}.qpb{padding:6px 2px}.qpb .ico{width:30px;height:30px}.qpb small{display:none}.tmr{font-size:16px}}

/* scouting report */
#srep{width:min(92vw,620px);max-width:none}
#srt{white-space:pre-wrap;word-break:break-word;max-height:55vh;overflow:auto;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rs,8px);background:var(--bg);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
#srep form{margin-top:8px}

/* update notice */
.upd{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bn,0px) + 14px);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--ink);color:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:14px;max-width:calc(100vw - 24px)}
.upd .btn{background:var(--panel);color:var(--ink);border-color:var(--panel);font-weight:600}

/* board buttons: Undo, Picture and Clear are icons, Next game and Live keep their words */
#undo .bt,#dshare .bt,#reset .bt{display:none}
#undo,#dshare,#reset{padding-left:10px;padding-right:10px}
#undo .ic,#dshare .ic,#reset .ic{margin:0}
#tg.mine{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));background:color-mix(in srgb,var(--ok) 7%,var(--bg))}
#tg .dsl{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
@media(max-width:600px){#tg .yt{display:none}#tg:has(.dsl button){flex-wrap:wrap;justify-content:flex-end}#tg .dsl:has(button){flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:visible}#tg .dsl button{padding:3px 6px}}

/* mini board: both teams' picks, the step and the timer, while the big board is scrolled away (phones) */
.mini{width:100%;align-items:center;gap:6px;margin:0 0 6px;padding:5px 6px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--panel);box-shadow:var(--sh);font:inherit;color:inherit;text-align:left}
.mini.mine{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.mside{display:flex;gap:3px;flex:none}
.mside i{position:relative;display:grid;place-items:center;width:26px;height:26px;margin:0;border-radius:6px;font-style:normal;font-size:10px;font-weight:700;overflow:hidden}
.mside i .ico{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:6px}
.mside i{background:var(--chip);color:var(--ink)}
.mside i.e{background:transparent;border:1px dashed var(--line)}
.mside.b i:not(.e){box-shadow:inset 0 -2px 0 var(--blue)}.mside.r i:not(.e){box-shadow:inset 0 -2px 0 var(--red)}
.mmid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15;font-size:11.5px;white-space:nowrap;overflow:hidden}
.mmid b{font-size:12px}.mmid b.b{color:var(--blue)}.mmid b.r{color:var(--red)}
.mmid .tmr{font-size:12px;min-width:0;text-align:center}
@media(max-width:400px){.mside i{width:22px;height:22px}.mside{gap:2px}}

/* the role filter fits narrow phones: columns may shrink, icons go below 400px */
.drr #rf{grid-template-columns:auto repeat(5,minmax(0,1fr))}
.drr #rf button{min-width:0;overflow:hidden}
@media(max-width:400px){.drr #rf{gap:3px}.drr #rf button{padding:4px 3px}.drr #rf button .rico{display:none}}

/* the new team / rename field in the team bar */
.tsw #tf{display:flex;gap:6px;flex-wrap:wrap}
.tsw #tf input{flex:1 1 200px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--rs,8px);background:var(--panel);color:var(--ink);font:inherit}

/* help button and the introduction tour */
.hact{display:inline-flex;align-items:center;gap:2px;flex:none}
#help{border:1px solid transparent;background:transparent;color:var(--mute);border-radius:8px;padding:6px 8px;display:inline-flex;align-items:center}
#help:hover{background:var(--hov);color:var(--ink)}
#help .ic{width:18px;height:18px;margin:0;color:inherit}
.tour{position:fixed;inset:0;z-index:100}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(8,14,24,.62);outline:2px solid var(--gold);outline-offset:0;transition:all .2s ease;pointer-events:none}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));padding:16px 16px 12px;border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.35);transition:top .2s ease,left .2s ease}
.tour-step{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--mute);margin-bottom:4px}
.tour-card h3{margin:0 0 6px;font-size:17px}
.tour-card p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--ink)}
.tour-bar{display:flex;align-items:center;gap:6px}
.tour-bar .lnk{color:var(--mute);text-decoration:none;font-size:13px;margin-right:auto}
.tour-dots{display:flex;gap:4px;margin-right:6px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.tour-dots i.on{background:var(--gold)}
.tour-bar .tour-next{background:var(--ink);color:var(--panel);border-color:var(--ink);font-weight:600}
@media(max-width:600px){.tour-dots{display:none}}
/* role icon + role name, wherever a role is named */
.rr{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:middle}
.rr .rico{width:1.25em;height:1.25em;margin:0;vertical-align:0;flex:none}
.rr+.rr{margin-left:6px}
.ch>span .rr .rico{width:1.15em;height:1.15em}
.who .rico{width:1.1em;height:1.1em;margin-right:2px;vertical-align:-.25em}
.cbl small .rico{width:1.2em;height:1.2em;margin:0 0 0 2px}
.efc .rico{width:1.2em;height:1.2em;margin-right:3px;vertical-align:-.3em}
.rrs{display:inline-flex;gap:3px;vertical-align:middle}
.rrs .rico{width:1.25em;height:1.25em;margin:0;vertical-align:0}
/* drafter.lol mirror bar on the draft board */
.drf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--acc,#d2b26c);border-radius:var(--rs,8px);background:var(--chip);font-size:13px}
.drf .drl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.drf .note{margin:0;font-size:12px}
.drf .btn{padding:4px 10px;min-height:0}
.drf>.btn:last-child{margin-left:auto}
/* close button at the top right of every modal (Esc closes them too) */
.dlgx{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--mute);cursor:pointer;z-index:2}
.dlgx:hover{background:var(--hov,rgba(0,0,0,.06));color:var(--ink)}
.dlgx:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.dlgx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
dialog>.dlgx+*,dialog>.dlgx+form>:first-child,.tour-card>.dlgx+*{padding-right:34px}
/* role choice in the right-click menu of a pick */
.cm .cmh{padding:6px 10px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.cm .cmr{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:2px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.cm .cmr button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;text-align:center;border-radius:6px}
.cm .cmr button .rico{margin:0;width:20px;height:20px}
.cm .cmr button[aria-checked="true"]{background:var(--chip);box-shadow:inset 0 0 0 1.5px var(--acc);font-weight:700}
.slot small.rman .rr{text-decoration:underline dotted;text-underline-offset:3px}
/* Mid matchups */
.mtier{display:inline-flex;align-items:center;gap:3px;margin:0 4px 3px 0;padding:1px 7px;border-radius:999px;font-size:12px;border:1px solid var(--line);white-space:nowrap}
.mtier b{display:inline-block;min-width:14px;text-align:center;font-weight:800}
.mtier.tZ{background:#7c3aed;border-color:#7c3aed;color:#fff}
.mtier.tS{background:#15803d;border-color:#15803d;color:#fff}
.mtier.tA{background:#65a30d;border-color:#65a30d;color:#fff}
.mtier.tB{background:#a16207;border-color:#a16207;color:#fff}
.mtier.tC{background:#c2410c;border-color:#c2410c;color:#fff}
.mtier.tD{background:#b91c1c;border-color:#b91c1c;color:#fff}
.mwhy{display:inline-block;margin:0 4px 3px 0;padding:1px 7px;border-radius:999px;font-size:12px;border:1px dashed var(--line);color:var(--mute)}
.mwhy.blind{border-style:solid;color:var(--ink)}
.mcond{display:inline-block;margin:0 4px 3px 0;padding:1px 7px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.mcond.ok{border-color:var(--ok);color:var(--ok);font-weight:600}
.mcond.no{border-color:var(--red);color:var(--red)}
.msty{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0}
.msty button{padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:12px;color:var(--mute);cursor:pointer}
.msty button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.msty small{opacity:.75}
.mline{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mbp em{display:flex;flex-wrap:wrap;align-items:center}
#mmed h3{margin:14px 0 6px;font-size:14px}
#mmed .mmh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
#mmed .mrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
#mmed label.efc{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:13px}
#mmed label.efc:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--panel)}
#mmed label.efc input{margin:0}
#mmed input[type=text]{width:100%;box-sizing:border-box}
#mmed .mcondw{margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:8px}
#mmed .mcomp{display:grid;grid-template-columns:auto 64px 1fr;gap:4px 8px;align-items:center}
#mmed .mcomp label{font-size:13px}
#mmed .mlane{display:grid;margin-top:6px}
#mmed #mlq{width:100%;box-sizing:border-box}
#mmed .mlr{border-top:1px solid var(--line)}
#mmed .mlr[hidden]{display:none}
#mmed .mlr>summary{display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer}
#mmed .mlr>summary .mtier{margin:0 0 0 auto}
#mmed .mlr .msrc{min-width:9em;text-align:right;font-size:12px;color:var(--mute)}
#mmed .mlr.est>summary b{font-weight:500}
#mmed .mlb{display:grid;grid-template-columns:72px 1fr;gap:6px 8px;align-items:center;padding:0 0 10px 24px}
#mmed .mlb input{grid-column:1/-1}
#mmed .mlb .lnk{justify-self:start;grid-column:1/-1}
#mmed .mwhy{cursor:pointer;background:transparent}
#mmed .mwhy[aria-pressed=true]{background:var(--ink);border-color:var(--ink);border-style:solid;color:var(--panel)}
#mmed .x{border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--mute)}
@media (max-width:600px){#mmed .mcomp{grid-template-columns:1fr 64px}#mmed .mcomp input{grid-column:1/-1}}
.mcond.risk{border-color:var(--ad);color:var(--ad);font-weight:600}
#mmed .msd{position:relative;margin:2px 0 6px}
#mmed .msd>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:38px;padding:6px 32px 6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;position:relative}
#mmed .msd>summary::-webkit-details-marker{display:none}
#mmed .msd>summary::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:translateY(-70%) rotate(45deg)}
#mmed .msd[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
#mmed .msd>summary #mmals{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mmed .msdp{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 6px 20px rgba(0,0,0,.18)}
#mmed .msdp input[type=search]{width:100%;box-sizing:border-box;margin:0 0 6px}
#mmed .msdl{max-height:260px;overflow:auto;display:grid;gap:1px}
#mmed .msdl label{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:14px}
#mmed .msdl label:hover{background:var(--hov)}
#mmed .msdl label[hidden]{display:none}
#mmed .msdl label:has(input:checked){font-weight:600}
#mmed .msdl .ico{width:22px;height:22px}
#mmed .msd>summary::before,#mmed .msd[open]>summary::before{display:none}
.mtier.est{border-style:dashed;opacity:.85}
.mtier i{font-style:normal;font-size:10px;font-weight:400;opacity:.85}
/* Best mid pick in the champion list */
.mgl{grid-column:1/-1;display:grid;gap:5px}
.mgl>.note{margin:4px 0 0}
.mgh{padding:4px 0 2px}
.mgh .note{margin:4px 0 0;line-height:1.7}
.mgh .note .ico{vertical-align:middle;margin:0 2px}
.mgh .note .mtier,.mgh .note .mmt,.mgh .note .mwhy,.mgh .note .mcond,.mgh .note .mrec{vertical-align:middle}
.mgh .note .ico{width:20px;height:20px}
.mgr{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:4px 10px;align-items:center;text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.mgr:hover{background:var(--hov)}
.mgr.off{opacity:.45}
.mgr .mgn{display:flex;align-items:center;gap:6px}
.mgr .mgn .ico{width:28px;height:28px;border-radius:6px}
.mgr .mgt{display:flex;flex-wrap:wrap;align-items:center}
@media (max-width:600px){.mgr{grid-template-columns:1fr}}
.mwhy.neg{border-color:var(--red);color:var(--red)}
.mmt{display:inline-block;margin:0 4px 3px 0;padding:1px 7px;border-radius:999px;font-size:12px;border:1px solid var(--line);font-weight:600}
.mmt.mp{border-color:var(--ok);color:var(--ok)}
.mmt.mn{border-color:var(--red);color:var(--red)}
.mmt.mp.hard{background:var(--ok);color:var(--panel)}
.mmt.mn.hard{background:var(--red);color:var(--panel)}
#mmed .mlb .mwhys{grid-column:1/-1}
#mmed .mlb select[data-mm]{min-width:0}
#mmed .mlb .msegs{grid-column:1/-1;display:grid;gap:6px}
#mmed .mseg{display:grid;grid-template-columns:9.5em repeat(3,1fr);align-items:stretch;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#mmed .mseg>span{display:flex;align-items:center;padding:0 8px;font-size:12px;color:var(--mute);background:var(--chip)}
#mmed .mseg button{border:0;border-left:1px solid var(--line);background:transparent;padding:7px 4px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mmed .mseg button:hover{background:var(--hov)}
#mmed .mseg button[aria-pressed=true]{background:var(--ink);color:var(--panel);font-weight:600}
@media (max-width:600px){#mmed .mseg{grid-template-columns:repeat(3,1fr)}#mmed .mseg>span{grid-column:1/-1;padding:4px 8px}#mmed .mseg span+button{border-left:0}}
#mmed .mlb .mtl{font-size:12px;color:var(--mute)}
#mmed .mmsw{grid-column:1/-1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;overflow:hidden}
#mmed .mmwho{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;padding:4px 8px;font-size:12px;font-weight:600;color:var(--mute);background:var(--chip)}
#mmed .mmwho span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mmed .mmsw button{min-width:0;min-height:38px;padding:5px 3px;border:0;border-left:1px solid var(--line);background:transparent;font:inherit;font-size:13px;line-height:1.15;color:var(--ink);cursor:pointer;text-align:center}
#mmed .mmwho+button{border-left:0}
#mmed .mmsw button:hover{background:var(--hov)}
#mmed .mmsw button[aria-pressed=true]{background:var(--ink);color:var(--panel);font-weight:600}
#mmed .mmsw button.n[aria-pressed=true]{background:var(--red);color:var(--panel)}
#mmed .mmsw button.p[aria-pressed=true]{background:var(--ok);color:var(--panel)}
#mmed .mlb{min-width:0}
@media (max-width:600px){#mmed .mlb{padding-left:0}#mmed .mmsw button{font-size:12px;padding:5px 2px}}
#mmed .mseg.mtsw{grid-template-columns:9.5em repeat(6,minmax(0,1fr))}
#mmed .mtsw button{font-weight:700}
#mmed .mtsw button.tZ[aria-pressed=true]{background:#7c3aed;color:#fff}
#mmed .mtsw button.tS[aria-pressed=true]{background:#15803d;color:#fff}
#mmed .mtsw button.tA[aria-pressed=true]{background:#65a30d;color:#fff}
#mmed .mtsw button.tB[aria-pressed=true]{background:#a16207;color:#fff}
#mmed .mtsw button.tC[aria-pressed=true]{background:#c2410c;color:#fff}
#mmed .mtsw button.tD[aria-pressed=true]{background:#b91c1c;color:#fff}
#mmed .mcomp{display:grid;grid-template-columns:1fr;gap:6px}
#mmed .mcomp input{margin:-2px 0 4px}
@media (max-width:600px){#mmed .mseg.mtsw{grid-template-columns:repeat(6,minmax(0,1fr))}#mmed .mseg.mtsw>span{grid-column:1/-1}}
#mmed .mlb>.mtsw{grid-column:1/-1}
.mrec{display:inline-block;margin:0 4px 3px 0;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line);color:var(--mute)}
.mrec.good{border-color:var(--ok);color:var(--ok)}
.mrec.bad{border-color:var(--red);color:var(--red)}
#mmed .mlr>summary .mrec{margin:0}
#mmc .mrole{display:grid;grid-template-columns:9.5em repeat(4,minmax(0,1fr));margin:0 0 10px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#mmc .mrole>span{display:flex;align-items:center;padding:0 8px;font-size:12px;color:var(--mute);background:var(--chip)}
#mmc .mrole button{border:0;border-left:1px solid var(--line);background:transparent;padding:7px 4px;font:inherit;font-size:13px;color:var(--ink)}
#mmc .mrole button[aria-pressed=true]{background:var(--ink);color:var(--panel);font-weight:600}
#mmc .mrole button:disabled{color:var(--mute);opacity:.55;cursor:not-allowed}
#mmc .mio{margin-top:12px}
#mmc .mio>summary{cursor:pointer;font-weight:600}
#mmc .mio textarea{width:100%;box-sizing:border-box;min-height:110px;font-family:ui-monospace,monospace;font-size:12px}
#mmc .mio code{font-size:12px}
#mmed .mlf{margin:0 0 6px}
@media (max-width:600px){#mmc .mrole{grid-template-columns:repeat(4,minmax(0,1fr))}#mmc .mrole>span{grid-column:1/-1;padding:4px 8px}#mmc .mrole span+button{border-left:0}}
.mpool{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin:0 4px 3px 0;padding:2px 6px 2px 8px;border:1px dashed var(--line);border-radius:10px;font-size:12px;color:var(--mute)}
.mpool>span{display:inline-flex;align-items:center;gap:3px;color:var(--ink)}
.mpool .mtier{margin:0;padding:0 5px}
.mhint{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--rM);border-radius:8px;background:var(--panel);font-size:13px}
#mmed .msec{border-top:1px solid var(--line);margin-top:8px}
#mmed .msec>summary{cursor:pointer;padding:6px 0}
#mmed .msec>summary h3{display:inline;margin:0;font-size:14px}
#mmed .msec>summary .tag{margin-left:6px;font-weight:500}
/* Motion: short and calm; nothing moves when the device asks for less motion */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
@keyframes vin{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes menuin{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes dlgin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes netrun{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes spin{to{transform:rotate(360deg)}}
.vin{animation:vin .2s var(--ease) both}
#board .slot.f.pop,#board .ban.f.pop{animation:pop .32s var(--ease) both}
.cm:not([hidden]){animation:menuin .14s var(--ease) both;transform-origin:top left}
#mmed .msd[open] .msdp{animation:menuin .14s var(--ease) both;transform-origin:top center}
dialog[open]{animation:dlgin .2s var(--ease) both}
dialog[open]::backdrop{animation:fadein .2s ease both}
img.ico{opacity:0;transition:opacity .25s ease}
img.ico.ld{opacity:1}
button,.btn,.chip,.mgr,.ch,.slot,.ban,.mseg button,.mmsw button,.msty button{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease,opacity .15s ease}
button:not(:disabled):active,.btn:not(:disabled):active{transform:scale(.97)}
.mgr:not(.off):hover,.sg button:hover{box-shadow:0 2px 8px rgba(15,27,45,.08)}
.tour-spot{transition:left .25s var(--ease),top .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
/* cards open and close smoothly where the browser can (Chrome and Edge); elsewhere they just open */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details:not(.msd):not(:has(.msd,.cbw))::details-content{block-size:0;overflow-y:clip;transition:block-size .22s var(--ease),content-visibility .22s allow-discrete}
  details:not(.msd):not(:has(.msd,.cbw))[open]::details-content{block-size:auto}
}
/* loading: a thin bar at the top, and the button that started it spins */
.netbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:200;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease}
.netbar::before{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--acc,var(--blue)),transparent);animation:netrun 1.1s ease-in-out infinite}
body.netbusy .netbar{opacity:1}
.busy{position:relative;pointer-events:none}
.busy::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;opacity:.8}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .netbar::before{width:100%;opacity:.6}
  .busy::after{border-right-color:currentColor;opacity:.5}
}
/* skeletons while the first load from the server runs */
@keyframes shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
.skl{display:grid;gap:8px;grid-column:1/-1;padding:4px 0}
.skl i{--sk:color-mix(in srgb,var(--line) 70%,var(--panel));display:block;height:14px;width:var(--w,80%);border-radius:6px;background:linear-gradient(90deg,var(--sk) 0%,color-mix(in srgb,var(--sk) 35%,var(--panel)) 50%,var(--sk) 100%);background-size:200% 100%;animation:shimmer 1.3s ease-in-out infinite}
.skl.rows i{height:38px;width:100%;border-radius:8px}
.skl.cards i{height:92px;width:100%;border-radius:10px}
.skl.chips{grid-template-columns:repeat(3,minmax(0,110px))}
.skl.chips i{height:30px;width:100%;border-radius:999px}
.skl.tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.skl.tiles i{height:52px;width:100%;border-radius:var(--rs)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* view only (viewer password): editing is hidden, the rest stays */
.vbadge{display:inline-flex;align-items:center;padding:3px 10px;margin-right:6px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;border:1px solid var(--gold);color:var(--gold);white-space:nowrap}
body.viewer .edonly,body.viewer #rkup,body.viewer :is([data-pact],[data-pcx],[data-ped],[data-prm],select[data-prole],[data-tnew],[data-tren],[data-tdel],[data-gres],[data-gdel],[data-del],[data-dcb],[data-mrs],[data-mld]){display:none!important}
body.viewer #mmed{opacity:.92}
body.viewer #mmed :is(.mseg button,.mmsw button,.msd>summary){pointer-events:none}
body.viewer #mmed .mseg button:not([aria-pressed=true]),body.viewer #mmed .mmsw button:not([aria-pressed=true]){opacity:.55}
@media (max-width:600px){.vbadge{padding:2px 7px;font-size:11px;margin-right:2px}.vbadge .vl{display:none}body.viewer #stl>span{display:none}}
/* team login */
#gate #gn{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
#gate input[type=email],#gate input[inputmode=numeric]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit}
#gate #gcc{letter-spacing:.3em;font-size:20px;text-align:center}
#gate button.glnk{background:transparent;color:var(--gold);font-weight:500;text-decoration:underline;padding:6px}
#gate p[role=status]:empty{display:none}
#gate p[role=status]{margin:10px 0 0}
#tal{display:grid;gap:0;margin-top:6px}
.tamr{display:grid;grid-template-columns:minmax(0,1fr) 120px 36px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.tamr .tame{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tamr select{width:100%}
.tamr .x{border:0;background:transparent;font-size:18px;color:var(--mute);cursor:pointer;padding:4px}
.tamr .x:hover{color:var(--red)}
#taf{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px}
@media (max-width:600px){.tamr{grid-template-columns:minmax(0,1fr) 100px 32px}#taf{grid-template-columns:minmax(0,1fr) 100px auto}}