:root{--bg:#0b1020;--panel:#141c31;--panel2:#1b2740;--line:#2a3855;--text:#edf3ff;--muted:#9eacc6;--green:#4ade80;--amber:#fbbf24;--red:#fb7185;--blue:#7dd3fc;--violet:#a78bfa;--blueside:#3b82f6;--redside:#ef4444}
*{box-sizing:border-box}
html{scroll-padding-top:60px}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
h1{margin:0 0 4px;font-size:clamp(22px,3.5vw,32px)}h2{font-size:16px;margin:0 0 4px}h3{font-size:14px;margin:0 0 6px}
.sub,.cap{color:var(--muted)}.cap{font-size:12px;margin:0 0 10px}
nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:8px clamp(12px,3vw,32px);background:#0e1629f2;backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
nav .brand{font-weight:800;letter-spacing:.08em;font-size:13px;color:var(--muted);margin-right:14px}nav .brand span{color:var(--green)}
nav a.tab{color:var(--muted);padding:7px 11px;border-radius:8px}nav a.tab:hover{background:var(--panel2);text-decoration:none}
nav a.tab.on{color:var(--text);background:var(--panel2)}
nav .grow{flex:1}
.jobs{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 10px;background:var(--panel);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs.run{color:var(--amber);border-color:#6b5420}
main{max-width:1320px;margin:auto;padding:22px clamp(12px,3vw,32px) 70px}
select,input,textarea,button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 10px;font:inherit}
input,textarea{width:100%}textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
button{cursor:pointer}button:hover{border-color:#456}
button.pri{background:#1f7a46;border-color:#2c9e5e;font-weight:600}button.pri:hover{background:#25904f}
button.danger{border-color:#7a2a38;color:#ffb3c0}button.sm{padding:4px 8px;font-size:12px}
button:disabled{opacity:.5;cursor:default}
label.chk{display:flex;gap:6px;align-items:center}label.chk input{width:auto}
label.f{display:block;margin:0 0 10px}label.f span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row.sp{justify-content:space-between}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.grid>.card{margin:0}
.card.wide{grid-column:1/-1}
.cv{position:relative;height:250px}
.sec{margin:26px 0 10px;font-size:13px;color:var(--muted);font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12px;color:var(--muted);background:var(--panel)}.chip b{color:var(--text)}
.chip.k{background:var(--panel2)}
.filters{position:sticky;top:48px;z-index:10;background:#0e1629f2;backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.filters input[type=date]{width:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .l{color:var(--muted);font-size:12px}.kpi .v{font-size:23px;font-weight:800;margin-top:3px}.kpi .d{font-size:12px;margin-top:2px;color:var(--muted)}
.pos{color:var(--green)}.neg{color:var(--red)}
.tw{overflow:auto;max-height:520px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel);z-index:1}
th[data-k]{cursor:pointer}th[data-k]:hover{color:var(--text)}
td.n,th.n{text-align:right}td.wrap{white-space:normal}
tr.hl td{background:#1b2a47}
.ic{width:24px;height:24px;border-radius:6px;vertical-align:middle;margin-right:6px;background:var(--panel2)}
.ics img{width:22px;height:22px;border-radius:4px;margin-right:2px;background:var(--panel2);vertical-align:middle}
.W{color:var(--green);font-weight:700}.L{color:var(--red);font-weight:700}
.empty{color:var(--muted);padding:26px;text-align:center}
.skills span{display:inline-block;width:15px;text-align:center;font:600 11px/17px ui-monospace,Consolas,monospace;border-radius:3px;margin-right:1px;background:var(--panel2)}
.skills span.R{background:#6b5420;color:#ffe08a}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0;overflow-x:auto;scrollbar-width:none}.tabs button{white-space:nowrap;flex:0 0 auto}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);padding:9px 14px}
.tabs button.on{color:var(--text);border-color:var(--green)}
.note{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--panel2)}
.note .m{color:var(--muted);font-size:12px;margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.note .b{white-space:pre-wrap}
.tagc{font-size:11px;border-radius:99px;padding:2px 8px;background:#243556;color:#cfe0ff}
.tagc.staff{background:#4a2a35;color:#ffc9d4}
#modal .bg{position:fixed;inset:0;background:#000a;z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:5vh 12px}
#modal .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;width:min(640px,100%)}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center}
#toast div{background:#1d2c4a;border:1px solid var(--line);border-radius:10px;padding:9px 14px;box-shadow:0 6px 20px #0008}
#toast div.err{border-color:#7a2a38;background:#3a1a24}
.login{max-width:380px;margin:12vh auto}
.err{color:#ffb3c0}
.teamhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rolechip{font-size:11px;padding:2px 7px;border-radius:6px;background:#243556;color:#cfe0ff}
/* champions */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.cgrid button{padding:3px;border-radius:8px;text-align:center;font-size:11px;line-height:1.15;color:var(--muted);background:var(--panel2);height:84px;overflow:hidden}
.cgrid button img{width:48px;height:48px;border-radius:8px;display:block;margin:0 auto 3px}
.cgrid button:disabled{opacity:.25}
.cgrid button:hover:not(:disabled){border-color:var(--green);color:var(--text)}
.abil{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.abil img{width:48px;height:48px;border-radius:8px}
.abil .k{display:inline-block;background:var(--panel2);border-radius:5px;padding:0 6px;margin-right:6px;font-weight:700}
.abil p{margin:3px 0;color:#cdd8ee;white-space:pre-line}
.bar{height:8px;background:var(--panel2);border-radius:5px;overflow:hidden;min-width:70px}.bar i{display:block;height:100%}
/* draft */
.draft{display:grid;grid-template-columns:230px minmax(0,1fr) 230px;gap:12px}
.side{border-radius:12px;padding:10px;border:1px solid var(--line);background:var(--panel)}
.side.blue{border-top:3px solid var(--blueside)}.side.red{border-top:3px solid var(--redside)}
.bans{display:flex;gap:5px;margin:6px 0 10px}
.slot{position:relative;background:var(--panel2);border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;gap:8px;min-height:54px;padding:4px;cursor:pointer}
.slot.cur{border-color:var(--amber);box-shadow:0 0 0 2px #fbbf2455}
.slot.filled{border-style:solid}
.slot img{width:44px;height:44px;border-radius:8px}
.slot .x{position:absolute;top:1px;right:3px;background:none;border:0;color:var(--muted);padding:0 4px}
.slot .nm{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot select{padding:2px 4px;font-size:11px;width:auto}
.ban{width:38px;height:38px;padding:0;border-radius:7px;min-height:0;justify-content:center}.ban img{width:34px;height:34px;filter:grayscale(.9)}
.ban .x{display:none}
.slot.empty .nm{color:var(--muted);font-weight:400}
.warn{color:var(--amber);font-size:12px;margin:3px 0}
@media(max-width:1000px){.draft{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
.ban:hover .x{display:block}.ban .x{font-size:12px}
/* phone polish */
body{padding-bottom:env(safe-area-inset-bottom)}
nav{padding-top:max(8px,env(safe-area-inset-top))}
@media(max-width:760px){
  .filters{position:static}
  nav{gap:2px;overflow-x:auto;flex-wrap:nowrap}nav .brand{display:none}nav a.tab{padding:8px 10px;white-space:nowrap}
  nav .sub{display:none}.jobs{max-width:130px}
  main{padding-top:14px}
  select,input,textarea,button{font-size:16px;min-height:40px}button.sm{min-height:34px;font-size:13px}
  .cv{height:220px}.kpis{grid-template-columns:repeat(2,1fr)}
  .tw{max-height:420px}th,td{padding:8px 6px}
  #modal .bg{padding:2vh 8px}#modal .box{padding:14px}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
  .filters input[type=date]{min-width:140px}
}
@media(max-width:760px){
  .draft{grid-template-columns:1fr 1fr;grid-template-areas:"b r" "g g";gap:8px}
  #dBlue{grid-area:b}#dRed{grid-area:r}.draft>div:nth-child(2){grid-area:g}
  .side{padding:8px}.slot{min-height:50px;gap:5px}.slot img{width:38px;height:38px}
  .slot select{font-size:12px;min-height:26px;padding:1px 2px;max-width:100%}.slot .nm{font-size:12px}
  .bans{flex-wrap:wrap;gap:4px}.ban{width:30px;height:30px}.ban img{width:26px;height:26px}
}
@media(max-width:760px){.slot.ban{min-height:0;height:30px}}
/* teams */
.tlogo{display:inline-block;border-radius:10px;object-fit:contain;background:var(--panel2);vertical-align:middle;flex:none}
.tlogo.ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;border:1px dashed var(--line)}
.teamcard .thead{display:flex;align-items:center;gap:14px;color:var(--text);margin-bottom:10px}.teamcard .thead:hover{text-decoration:none}
.teamcard .thead h2{font-size:18px;margin:0}
.rosterline{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--text)}
.pchip:hover{border-color:var(--blue);text-decoration:none}
.mockbadge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--amber);color:#1a1300;font-weight:900;margin-right:8px;font-size:16px;vertical-align:middle}
.mocktag{font-size:11px;font-weight:800;letter-spacing:.06em;color:#1a1300;background:var(--amber);border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:middle}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button.on{background:#1f7a46;border-color:#2c9e5e;font-weight:600}
.dgroup{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel)}
.dgroup>button.dh{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;padding:12px 14px;text-align:left;font-weight:700;font-size:15px;border-radius:12px}
.dgroup>button.dh .arrow{margin-left:auto;color:var(--muted);transition:transform .15s}.dgroup.open>button.dh .arrow{transform:rotate(180deg)}
.dgroup .db{display:none;padding:0 12px 12px}.dgroup.open .db{display:block}
/* player game detail */
.crange{width:auto;max-width:150px;font-size:12px;padding:3px 6px;min-height:0;flex:none}
tr.hrow{cursor:pointer}tr.hrow:hover td{background:#18233d}
.gdrow>td{padding:0;background:#101830}
.gd{padding:12px}
.gtabs{margin-bottom:10px}
.tb{border:1px solid var(--line);border-left-width:4px;border-radius:10px;margin-bottom:10px;padding:8px;background:var(--panel)}
.tb.win{border-left-color:var(--green)}.tb.loss{border-left-color:var(--red)}
.tbh{margin-bottom:6px}
.dbar{height:5px;background:var(--panel2);border-radius:3px;overflow:hidden;min-width:70px;margin-bottom:2px}.dbar i{display:block;height:100%;background:var(--red)}
.trips{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow:auto}
.trip{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.trip .tm{width:44px;font:600 12px ui-monospace,Consolas,monospace;color:var(--amber)}
.trip .sold{opacity:.45;filter:grayscale(1);text-decoration:line-through}
@media(max-width:760px){.crange{max-width:110px}}

/* v3.3 evaluation */
.scb{display:inline-block;min-width:34px;text-align:center;font-weight:800;border:1.5px solid;border-radius:8px;padding:1px 6px;font-size:13px;background:#0e1629}
.pbar{position:relative;height:9px;background:var(--panel2);border-radius:5px;overflow:hidden;min-width:70px}.pbar i{display:block;height:100%;border-radius:5px}
.pbar b{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#9eacc688}
.sgrid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:12px;margin-bottom:12px;align-items:stretch}
.sgrid .kpis{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card.scout{margin:0}.card.scout .l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.card.scout .big{font-size:64px;font-weight:900;line-height:1.05;margin:4px 0}
.flag{padding:8px 10px;border-radius:10px;margin-bottom:6px;background:var(--panel2);border-left:3px solid var(--blue)}.flag span{color:var(--muted)}
.flag.warn{border-left-color:var(--amber)}.flag.ok{border-left-color:var(--green)}
.tagc.ok{background:#1d4a33;color:#bff5d3}
.rgrid{display:grid;gap:6px;margin:6px 0 8px}.rrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.rrow .seg button{min-width:34px}
.board{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:8px;overflow-x:auto}
.bcol{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:6px;min-height:80px}.bh{font-weight:700;padding:4px 6px 8px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:6px;cursor:pointer}.pcard:hover{border-color:#456}
button.chip{cursor:pointer;font:inherit}
table.cmpt td.best{background:#16352a}table.cmpt th{vertical-align:bottom}tr.secrow td{background:var(--panel2);font-weight:700;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
tr.sumrow td{background:var(--panel2);font-size:12px}
select.attsel{padding:3px 6px;font-size:12px}select.attsel.present{border-color:#2c9e5e}select.attsel.late{border-color:#a07a1c}select.attsel.absent{border-color:#a03246}select.attsel.excused{border-color:#456}
.att.present{color:var(--green)}.att.late{color:var(--amber)}.att.absent{color:var(--red)}.att.excused{color:var(--muted)}
a.sm{font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text)}a.sm:hover{text-decoration:none;border-color:#456}
details.card summary{cursor:pointer}
@media (max-width:760px){.sgrid{grid-template-columns:1fr}.board{grid-template-columns:repeat(6,minmax(140px,70vw))}.card.scout .big{font-size:52px}}
table.cmpt{table-layout:fixed;min-width:560px}table.cmpt th:first-child{width:30%}
/* v3.4 tier lists, availability, notifications, print */
.tiers{display:grid;gap:6px;margin-top:10px}
.trow{display:flex;align-items:stretch;background:var(--panel2);border:1px solid var(--line);border-radius:10px;min-height:56px;overflow:hidden}.trow.over,.tpool.over{outline:2px solid var(--blue)}
.tlab{flex:0 0 52px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#111}.tlab.sm{display:inline-flex;width:26px;height:26px;font-size:14px;border-radius:6px}
.tdrop{flex:1;display:flex;flex-wrap:wrap;gap:4px;padding:5px;align-content:flex-start;min-height:52px}.tempty{padding:12px 6px}
.tpool{display:flex;flex-wrap:wrap;gap:4px;max-height:300px;overflow:auto;padding:6px;background:var(--panel2);border:1px dashed var(--line);border-radius:10px}
.tchamp{isolation:isolate;position:relative;width:44px;height:44px;border-radius:8px;overflow:hidden;background:#0e1629;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;flex:0 0 auto;border:2px solid transparent}
.tpool .tchamp{touch-action:manipulation}
.tchamp img.tic{width:100%;height:100%;display:block;pointer-events:none}.tchamp .tfb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);z-index:-1}
.tchamp.sm{width:28px;height:28px;border-radius:6px;display:inline-block;margin:1px;cursor:default}.tchamp.sel{border-color:var(--amber)}.tchamp.dragging{opacity:.3}
.tchamp.ghost{position:fixed;z-index:999;pointer-events:none;box-shadow:0 6px 20px #000a;opacity:.9}
table.ttbl td{vertical-align:top;min-width:90px}
.avw{max-height:none}table.avail{border-collapse:separate;border-spacing:2px;width:auto}table.avail th{font-size:11px;padding:2px 6px;text-align:center}table.avail th.hl{text-align:right;color:var(--muted);font-weight:400;white-space:nowrap}
table.avail td{width:44px;height:18px;padding:0;border-radius:4px;background:var(--panel2);border:none;text-align:center;font-size:11px;color:#06210f;font-weight:700}
table.avail.edit td{cursor:pointer;touch-action:none}table.avail td.on{background:var(--green)}table.avail.heat td.full{outline:1.5px solid var(--green)}
.bell{position:relative;margin-left:6px}.bell b{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:99px;font-size:10px;padding:0 5px;line-height:16px}.bell b:empty{display:none}
#notifs .npanel{position:fixed;right:clamp(8px,3vw,32px);top:54px;z-index:30;width:min(380px,94vw);max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 30px #0009}
.nitem{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}.nitem a{flex:1;color:var(--text)}.nitem a:hover{text-decoration:none}.nitem.warn b{color:var(--amber)}.nitem.ok b{color:var(--green)}
@media print{nav,#notifs,.filters,.tabs,button,a.sm,#toast{display:none!important}body{background:#fff;color:#111}.card,.kpi{background:#fff;border-color:#ccc;break-inside:avoid}.sub,.cap{color:#555}main{padding:0;max-width:none}a{color:#111}th,td{border-color:#ddd}}
footer{max-width:1320px;margin:0 auto;padding:10px clamp(12px,3vw,32px) 40px;color:var(--muted);font-size:11px;line-height:1.5;border-top:1px solid var(--line)}footer a{font-size:12px}footer p{margin:6px 0 0;opacity:.8}
@media print{footer{display:none}}

/* ===================================================================== v3.6 Elegy theme (direction A: Shattered Ice) */
:root{--bg:#0b1119;--panel:#121b29;--panel2:#182435;--line:#22324a;--text:#dfe5ec;--cream:#efe6d3;--muted:#9fb0c4;
  --green:#6fd39b;--amber:#f2b05e;--red:#f2795a;--blue:#8fc3e6;--violet:#b9a3f0;--orange:#e8693e;--orange2:#d8552b;--steel:#4a86b8;
  --blueside:#4a86b8;--redside:#d8552b;--head:'Barlow Condensed',Inter,system-ui,sans-serif}
body{background:var(--bg);color:var(--text)}
a{color:var(--blue)}a:hover{color:var(--cream);text-decoration:none}
h1{font:800 clamp(30px,4.6vw,48px)/1 var(--head);letter-spacing:.01em;color:var(--cream);text-transform:uppercase;margin:0 0 6px}
h1 .sub{font-weight:600;text-transform:none}
h2{font:700 19px/1.15 var(--head);letter-spacing:.04em;color:var(--cream);text-transform:uppercase}
h3{font:700 15px var(--head);letter-spacing:.06em;color:var(--cream);text-transform:uppercase}
.cut{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
/* top bar */
nav{background:#0e1622f5;border-bottom:1px solid var(--line);gap:6px 14px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px}
nav .brand{display:flex;align-items:center;gap:9px;margin-right:6px;font:800 21px var(--head);letter-spacing:.06em;color:var(--cream)}
nav .brand img{width:34px;height:34px;border-radius:7px;object-fit:cover}
nav .brand span{color:var(--orange)}
.navtabs{display:flex;gap:2px;flex-wrap:wrap}
nav a.tab{color:var(--muted);padding:10px 11px;border-radius:0;border-bottom:2px solid transparent;font-weight:500}
nav a.tab:hover{background:none;color:var(--cream)}
nav a.tab.on{color:var(--cream);background:none;border-bottom-color:var(--orange);font-weight:600}
.bell,#acct{min-height:40px}
/* surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:18px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.kpi{background:#142033;border:1px solid var(--line);border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.kpi .v{font:800 30px/1.05 var(--head);color:var(--cream)}
.sec{font:700 15px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:30px 0 12px}
.filters{background:#0e1622f5;border-radius:0;border-color:var(--line)}
.tabs{border-bottom:1px solid var(--line);margin:18px 0}
.tabs button{font:700 16px var(--head);letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;color:var(--muted)}
.tabs button.on{color:var(--cream);border-bottom:3px solid var(--orange)}
th{background:var(--panel);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tr.hl td,tr.hrow:hover td{background:#17253a}.gdrow>td{background:#0e1622}
/* controls */
select,input,textarea,button{background:#142033;border-color:#2a3c56;border-radius:8px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--steel)}
button.pri{background:var(--orange2);border-color:var(--orange2);color:#10151d;font-weight:700;border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
button.pri:hover{background:var(--orange)}
button.danger{border-color:#7a3a2c;color:#ffb8a3}
.seg button.on{background:var(--orange2);border-color:var(--orange2);color:#10151d}
.chip{border-radius:6px;background:#142033}.chip.k{background:#182435}
.tagc{background:#1d2e46;color:#cfe0ff;border-radius:6px}.tagc.staff{background:#4a2a24;color:#ffc9b8}.tagc.ok{background:#1d4a33}
.rolechip{background:none;border:1px solid #3a4f6e;color:var(--orange);font:700 12px var(--head);letter-spacing:.12em;text-transform:uppercase;border-radius:4px}
.scb{font-family:var(--head);font-size:16px;border-radius:6px;background:transparent}
.jobs{border-radius:6px}
#modal .box{border-radius:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
#toast div{background:#182435;border-radius:0}
.card.scout .big{font-family:var(--head);font-size:84px}
.flag{border-radius:0}
.bcol,.pcard{border-radius:0}
/* hero bands (team page, player page, login) */
.hero{position:relative;margin:-22px calc(-1 * clamp(12px,3vw,32px)) 18px;padding:34px clamp(12px,3vw,32px) 26px;border-bottom:1px solid var(--line);
  background-image:linear-gradient(90deg,rgba(11,17,25,.97) 0%,rgba(11,17,25,.85) 45%,rgba(11,17,25,.4) 100%),url(/brand/shards.jpg);background-size:cover;background-position:center right}
.hero .eyebrow{font:700 14px var(--head);letter-spacing:.16em;color:var(--orange);text-transform:uppercase}
.hero h1{font-size:clamp(40px,6vw,72px);line-height:.95;margin:2px 0 8px}
.hero .heroin{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.hero .hlogo{width:120px;height:120px;border:1px solid #2a3c56;border-radius:12px;object-fit:cover;background:#0e1622}
.hero .stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hero .stat{background:#142033e6;padding:9px 15px;min-width:110px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.hero .stat .l{font-size:12px;color:var(--muted)}.hero .stat .v{font:800 26px/1.1 var(--head);color:var(--cream)}
.hero.slim{padding-top:22px;padding-bottom:18px}
.loginwrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;background-image:linear-gradient(180deg,rgba(11,17,25,.75),rgba(11,17,25,.97)),url(/brand/shards.jpg);background-size:cover;background-position:center}
.login{margin:6vh auto 3vh;width:min(400px,92vw)}
.login .lg{display:block;width:120px;height:143px;object-fit:cover;margin:0 auto 12px;border-radius:12px}
.login h1{text-align:center}
/* roster cards on the team page */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.rcard{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);padding:16px;color:var(--text);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.rcard:hover{border-color:#3a5578;color:var(--text)}
.rcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rcard .role{font:700 13px var(--head);letter-spacing:.14em;color:var(--orange);text-transform:uppercase}
.rcard .nm{font:800 26px/1.05 var(--head);color:var(--cream);overflow-wrap:anywhere}
.rcard .rk{color:var(--muted);font-size:13px}
.rcard .big{font:800 28px/1 var(--head);padding:4px 10px;border:2px solid;border-radius:8px}
.rcard .ft{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px;border-top:1px solid var(--line);padding-top:10px}
.rcard .champs{display:flex;gap:6px;min-height:34px}.rcard .champs img{width:34px;height:34px;border-radius:6px;background:#182435}
.rcard .acts{display:flex;gap:6px;flex-wrap:wrap}
/* teams overview */
.teamcard .thead h2{font-size:26px}.teamcard{padding:20px}
.pchip{border-radius:0;background:#142033}
/* tier list colours to match the brand */
.trow,.tpool,table.avail td{border-radius:0}
/* phone: tabs move to a bottom bar */
@media(max-width:760px){
  nav{flex-wrap:nowrap;overflow:visible}
  nav .brand{display:flex;font-size:18px}nav .brand img{width:30px;height:30px}
  .navtabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-wrap:nowrap;overflow-x:auto;background:#0e1622;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);scrollbar-width:none}
  .navtabs a.tab{flex:1 0 auto;min-width:72px;min-height:58px;display:flex;align-items:center;justify-content:center;font-size:12px;border-bottom:0;border-top:2px solid transparent}
  .navtabs a.tab.on{border-top-color:var(--orange)}
  main{padding-bottom:100px}
  #toast{bottom:76px}
  footer{padding-bottom:90px}
  .hero{margin-top:-14px;padding-top:22px}.hero .hlogo{width:84px;height:84px}
  #acct .who{display:none}
}
@media print{.hero{background:none;margin:0;padding:0 0 10px}.navtabs{display:none}}
.hero .hacts{flex:1 1 100%;justify-content:flex-end}
@media(max-width:760px){nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0e1622}.hero .hacts{justify-content:flex-start}}
h1 .sub{font-size:.5em;letter-spacing:0}
.login button.pri{width:100%;min-height:46px}