/* player.html — page styles (a file, so the CSP can refuse inline <style>) */
.picker{border-bottom:1px solid var(--line);background:var(--bg-2)}
.picker .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.picker .wrap::-webkit-scrollbar{display:none}
.picker .crumb{flex:none;margin-right:6px;font-size:13px}
.picker .crumb .ico{width:14px;height:14px}
.picker .crumb .tlogo{width:20px;height:20px}
.basiconly[hidden],.fullonly[hidden]{display:none!important}
.pp{flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-weight:700;font-size:13.5px;transition:all .2s}
.pp:hover{border-color:var(--line-2)}
.pp[aria-current]{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.pp .mono{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--tech);font-size:11px;background:var(--bg-3);color:var(--text);overflow:hidden}
.pp .mono img{width:100%;height:100%;object-fit:cover;object-position:top}
.pp.soon{border-style:dashed;color:var(--mute);padding:0 14px}
.art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.art .team{display:flex;align-items:center;gap:6px}
.art .team .tlogo{width:18px;height:18px}
.fact .tlogo{width:18px;height:18px}
.fact.soonf{border-style:dashed;color:var(--mute)}
.rc .o b .tlogo{width:18px;height:18px;margin-right:6px;vertical-align:-4px}
.pp small{font-weight:600;opacity:.65;font-size:11.5px}

.hero{position:relative;border-bottom:1px solid var(--line);background:
  radial-gradient(800px 360px at 85% 10%,var(--glow),transparent 70%),
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px,var(--bg)}
.hero .wrap{padding-top:34px;padding-bottom:30px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:center}
.art{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-lg);position:relative;overflow:hidden;border:1px solid var(--line-2);isolation:isolate;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand) 85%,#000) 0%,color-mix(in srgb,var(--brand) 35%,#0A0A0B) 45%,#0A0A0B 100%)}
.art .stripe{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(120deg,transparent 0 22px,rgba(255,255,255,.05) 22px 24px)}
.art .wm{position:absolute;right:-18%;bottom:-8%;width:95%;height:auto;opacity:.16;z-index:-1;filter:grayscale(1) brightness(2)}
.art .glow{position:absolute;left:50%;top:38%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.art .init{position:absolute;left:16px;bottom:12px;font-family:var(--display);font-size:64px;line-height:1;color:var(--text);text-shadow:0 2px 20px rgba(0,0,0,.35)}
.art .team{position:absolute;top:12px;left:12px;font-family:var(--tech);font-weight:700;font-size:12px;padding:4px 8px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line-2)}
.who h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,7vw,88px);line-height:.95;letter-spacing:-.005em}
.who .rn{font-size:17px;color:var(--text-2);margin-top:10px;font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fact{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text-2)}
.fact b{color:var(--text)}
.fact.on{border-color:color-mix(in srgb,var(--def) 50%,var(--line));color:var(--def-ink)}
.fact.warn{border-color:color-mix(in srgb,var(--atk) 50%,var(--line));color:var(--atk-ink)}

.scope{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
.scope h2{font-size:14px;font-weight:800}
.kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.kpi{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 14px 12px;min-width:0}
.kpi .l{font-size:11.5px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.kpi .v{font-family:var(--tech);font-weight:700;font-size:28px;line-height:1.1;margin-top:4px}
.kpi .s{font-size:11.5px;color:var(--mute);margin-top:2px}
.kpi.main{background:linear-gradient(160deg,color-mix(in srgb,var(--atk) 16%,var(--bg-2)),var(--bg-2) 70%);border-color:color-mix(in srgb,var(--atk) 40%,var(--line))}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;padding:24px 0 64px}
.s5{grid-column:span 5}.s7{grid-column:span 7}.s6{grid-column:span 6}.s12{grid-column:span 12}

.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.side{border-radius:var(--r-md);padding:14px;border:1px solid var(--line);background:var(--bg)}
.side h3{font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px}
.side h3 i{width:10px;height:10px;border-radius:3px}
.side.atk h3 i{background:var(--atk)}.side.def h3 i{background:var(--def)}
.side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:10px;font-size:13px}
.side dt{color:var(--mute);font-weight:600}
.side dd{font-family:var(--mono);text-align:right}
.lean{margin-top:14px;font-size:13.5px;color:var(--text-2);padding:12px 14px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line)}
.lean b.atk{color:var(--atk-ink)}.lean b.def{color:var(--def-ink)}
.cmp{margin-top:14px;display:grid;gap:8px}
.cmp .row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--mute);font-weight:700}
.cmp .bars{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:16px}
.cmp .a{background:var(--atk);border-radius:4px 0 0 4px;justify-self:end}
.cmp .d{background:var(--def);border-radius:0 4px 4px 0}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:11.5px;font-weight:700;color:var(--mute);text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.03em}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);white-space:nowrap}
.tbl td:first-child{font-family:var(--body);font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--text) 3%,transparent)}
.tscroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.mini{display:inline-block;width:56px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 9%,transparent);vertical-align:middle;margin-left:8px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--bar)}

.tl{position:relative;margin-top:8px}
.tl-axis{display:grid;font-size:11px;color:var(--mute);font-family:var(--mono);margin-bottom:6px}
.tl-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.tl-row .tn{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-row .tn small{display:block;font-size:11px;color:var(--mute);font-weight:600;font-family:var(--mono)}
.tl-track{position:relative;height:18px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/7 - 1px),var(--line) calc(100%/7 - 1px) calc(100%/7))}
.tl-bar{position:absolute;top:2px;bottom:2px;border-radius:4px;background:var(--bar);min-width:4px}
.tl-bar.cur{background:var(--def)}
.tl-bar.inactive{background:repeating-linear-gradient(135deg,var(--mute) 0 3px,transparent 3px 6px);border:1px solid var(--mute)}
.res-list{margin-top:14px;display:grid;gap:0}
.res-row{display:grid;grid-template-columns:86px 96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.res-row .d{font-family:var(--mono);font-size:12px;color:var(--mute)}
.res-row .pl{font-family:var(--tech);font-weight:700;white-space:nowrap}
.res-row .pl.best{color:var(--gold)}
.res-row .tr{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-row .tier{font-size:11px;color:var(--mute);font-weight:700}

.recent{display:grid;gap:0}
.rc{display:grid;grid-template-columns:30px 70px minmax(0,1fr) 120px 64px 64px 56px 20px;gap:12px;align-items:center;padding:11px 6px;margin:0 -6px;border-top:1px solid var(--line);border-radius:var(--r-sm);transition:background .2s;font-size:13.5px}
.rc:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.rc .d{font-family:var(--mono);font-size:12px;color:var(--mute)}
.rc .o{min-width:0}
/* a long opponent name ellipsizes; the series score never does */
.rc .o b{display:flex;align-items:center;white-space:nowrap;min-width:0}
.rc .o b .tlogo{flex-shrink:0}.rc .o b .on{overflow:hidden;text-overflow:ellipsis;min-width:0}.rc .o b .sc{flex-shrink:0;margin-left:6px}
.rc .o small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mute);white-space:nowrap;min-width:0}
.rc .o small .ev{overflow:hidden;text-overflow:ellipsis;min-width:0}.rc .o small .typ{flex-shrink:0}  /* the 국제전 tag stays whole */
.rc .ag{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .n{font-family:var(--mono);text-align:right}
.rc .n small{display:block;font-size:10px;color:var(--mute);font-family:var(--body);font-weight:700}
.rc .go{color:var(--mute)}
.typ{font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:3px;margin-left:6px;vertical-align:1px;border:1px solid var(--line-2);color:var(--text-2)}
.typ.intl{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.spoil .rc .wl,.spoil .rc .sc{filter:blur(6px)}
.more-btn{margin-top:12px;width:100%;justify-content:center}

@media (max-width:1180px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.s5,.s7,.s6{grid-column:span 12}}
@media (max-width:640px){
  .hero .wrap{grid-template-columns:96px minmax(0,1fr);gap:16px;padding-top:22px}
  .art{aspect-ratio:1}.art .init{font-size:34px;left:10px;bottom:6px}.art .team{display:none}
  .who h1{font-size:44px}.who .rn{font-size:14.5px;margin-top:4px}
  .facts{grid-column:1/-1;margin-top:4px}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kpi{padding:11px 11px 10px}.kpi .v{font-size:22px}
  .grid{gap:14px;padding-top:16px}
  .sides{grid-template-columns:1fr}
  .tl-row{grid-template-columns:96px minmax(0,1fr)}
  .res-row{grid-template-columns:70px 86px minmax(0,1fr)}.res-row .tier{display:none}
  .rc{grid-template-columns:26px minmax(0,1fr) 54px 54px;gap:8px}
  .rc .d,.rc .ag,.rc .kd,.rc .go{display:none}
}
/* spoiler mode: hide placements and the W/L colour, not only the letters */
.spoil .res-row .pl{filter:blur(6px)}
.spoil .rc .wl{background:var(--bg-3)!important;color:transparent!important}