/* select */
.select{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:clamp(8px,1.4vw,14px);
  background:#120a1f;background-image:linear-gradient(rgba(63,184,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(63,184,255,.07) 1px,transparent 1px);background-size:16px 16px}
.selbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.selbar h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(11px,1.8vw,17px);line-height:1.4;color:var(--accent);text-transform:uppercase;text-shadow:2px 2px 0 var(--hot)}
.seltime{margin:0;font-family:var(--display);font-size:10px;color:var(--muted)}
.seltime b{font-weight:400;font-size:clamp(12px,2vw,18px);color:var(--fg);margin-left:6px}
.seltime.low b{color:var(--hot);animation:blink .5s steps(1) infinite}
.selgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(8px,1.4vw,14px);align-items:center;align-self:center}
.selgrid.solo{grid-template-columns:minmax(0,1fr) auto;width:min(100%,560px);justify-self:center}
.side{background:var(--panel);border:3px solid var(--line);box-shadow:4px 4px 0 #000;padding:8px;display:grid;gap:6px;align-content:start;min-width:0}
.side.p1{border-color:var(--p1)} .side.p2{border-color:var(--p2)}
.side.dim{opacity:.45}
.side .who{margin:0;font-family:var(--display);font-size:9px;text-transform:uppercase}
.side.p1 .who{color:var(--p1)} .side.p2 .who{color:var(--p2)}
.side canvas{width:100%;max-width:180px;height:auto;display:block;justify-self:center;background:radial-gradient(circle at 50% 75%,#4a2a5e,#120a1f 70%)}
.side h3{font-family:var(--display);font-weight:400;font-size:clamp(8px,1.1vw,10px);line-height:1.5;margin:0;text-transform:uppercase}
.side.locked h3{color:var(--accent);animation:blink .16s steps(1) 4}
.side .tag{margin:0;color:var(--muted);font-size:13px;line-height:1.3}
.stats{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-family:var(--display);font-size:10px;color:var(--muted);align-items:center}
.pips{display:flex;gap:3px}.pips i{flex:1;height:8px;background:var(--line)}.pips i.on{background:var(--accent)}
.roster{display:grid;grid-template-columns:repeat(2,clamp(84px,10vw,104px));gap:10px;align-self:center}
.portrait{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;border:3px solid #000;background:#000}
.portrait canvas{display:block;width:100%;height:auto;background:linear-gradient(#4a2a5e,#231a30)}
.portrait .nm{display:block;font-family:var(--display);font-size:7px;line-height:1;text-align:center;padding:4px 2px;color:var(--fg);text-transform:uppercase;white-space:nowrap;overflow:hidden}
.portrait.c1{border-color:var(--p1)} .portrait.c2{border-color:var(--p2)} .portrait.c1.c2{border-color:var(--p1);box-shadow:0 0 0 3px var(--p2)}
.portrait.lock1 canvas,.portrait.lock2 canvas{background:linear-gradient(#6a1f5a,#c2416b)}
.portrait i{position:absolute;top:-3px;display:none;font-style:normal;font-family:var(--display);font-size:7px;line-height:1;padding:3px;color:#000;animation:blink .6s steps(1) infinite}
.portrait .t1{left:-3px;background:var(--p1)} .portrait .t2{right:-3px;background:var(--p2)}
.portrait.c1 .t1,.portrait.c2 .t2{display:block}
.portrait.lock1 .t1,.portrait.lock2 .t2{animation:none}
.selfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.selfoot p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
@media (min-width:900px){.portrait .nm{font-size:8px}}
.selfoot div{display:flex;gap:10px}
@media (max-width:700px){
  .selgrid{grid-template-columns:1fr 1fr}
  .selgrid.solo{grid-template-columns:1fr}
  .roster{grid-column:1/-1;order:-1;width:100%;max-width:400px;justify-self:center;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .portrait .nm{font-size:6px;padding-inline:0}
}