/* PRO Roundnet League matches — built on the shared style system
   (~/workspace/style-guides: core.css + brand-pro.css). Inter 400/600/800/900,
   radii 6/10/14/20/999 only, letter-spacing -0.02/-0.01/0.06/0.04/0 only,
   league yellow #FAE116 with the brand-pro gradient, transparent logos. */
:root{
  --y:#FAE116; --y-grad:linear-gradient(180deg,#FEF08A 0%,#FAE116 50%,#EAB308 100%);
  --ink:#030303; --panel:#111111; --panel2:#1c1c1c; --line:#333333;
  --txt:#F5F5F5; --dim:#A3A3A3; --red:#e5484d; --grn:#30a46c;
  --r-tag:6px; --r-control:10px; --r-card:14px; --r-panel:20px; --r-pill:999px;
  --f:Inter,system-ui,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{background:var(--ink); overflow-x:hidden}
body{font-family:var(--f); color:var(--txt); background:
  radial-gradient(1200px 500px at 50% -80px, #262626 0%, var(--ink) 60%);
  min-height:100vh; padding-bottom:118px; overflow-x:hidden}
a{color:inherit; text-decoration:none}
h1{letter-spacing:-0.02em} h2,h3{letter-spacing:-0.01em}
.wrap{max-width:1060px; margin:0 auto; padding:0 16px}

/* header lockup */
.topbar{display:flex; align-items:center; gap:14px; padding:16px 0 6px; min-width:0}
.topbar img.badge{height:56px; width:auto}
.topbar .partner{margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0}
.topbar .partner span{color:var(--dim); letter-spacing:0.06em; font-weight:800; font-size:11px; white-space:nowrap}
.topbar img.spike{height:38px; width:auto}
.live-dot{display:inline-block; width:9px; height:9px; border-radius:var(--r-pill);
  background:var(--red); margin-right:6px; animation:pulse 1.6s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* matchup hero */
.hero{display:grid; grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
  margin:10px 0 18px; background:linear-gradient(105deg,#030303 0%,#111111 42%,#262626 100%);
  border:1px solid var(--line); border-radius:var(--r-panel);
  box-shadow:0 22px 44px rgba(0,0,0,.30); overflow:hidden}
.hero .side{display:flex; align-items:center; gap:16px; padding:20px; min-width:0}
.hero .side.b{flex-direction:row-reverse; text-align:right}
.plate{display:inline-flex; background:#F5F5F5; border-radius:14px; padding:8px; line-height:0; flex:0 0 auto}
.hero img.crest{height:96px; width:96px; object-fit:contain; flex:0 0 auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.hero h1{font-weight:900; font-size:clamp(19px,3.2vw,32px); text-transform:uppercase; line-height:1.05}
.hero .sub{color:var(--dim); font-weight:800; letter-spacing:0.06em; font-size:12px; margin-top:6px}
.hero .vs{display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 6px; background:var(--y-grad); color:#111; font-weight:900}
.hero .vs .r{font-size:11px; letter-spacing:0.06em}
.hero .vs .n{font-size:26px}
@media(max-width:640px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero .side{padding:14px 16px}
  .hero .side.b{flex-direction:row; text-align:left}
  .hero img.crest{height:68px; width:68px}
  .hero .vs{flex-direction:row; gap:10px; padding:8px}
  .topbar img.badge{height:44px}
  .topbar img.spike{height:28px}
  .topbar .partner span{font-size:10px}
}

/* net cards */
.nets{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media(max-width:820px){.nets{grid-template-columns:minmax(0,1fr)}}
.netcard{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 14px 30px rgba(0,0,0,.14); overflow:hidden}
.netcard .nhead{display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:#030303; border-bottom:2px solid var(--y)}
.netcard .nhead b{letter-spacing:0.06em; font-size:13px}
.pill{font-size:10px; font-weight:900; letter-spacing:0.04em; padding:4px 8px;
  background:var(--red); color:#fff; border-radius:var(--r-tag)}
.pill.fin{background:#3a3a3a}
.score{display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 8px 6px}
.score .num{font-size:clamp(48px,9vw,64px); font-weight:900; line-height:1; min-width:64px;
  text-align:center; font-variant-numeric:tabular-nums}
.score .num.win{color:var(--y)}
.score .colon{font-size:34px; color:var(--dim); font-weight:900}
.mono{border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; border:2px solid rgba(255,255,255,.25)}
.lineup{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 14px 4px}
.pcell{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:0; cursor:pointer; background:none; border:none; color:inherit; font:inherit; padding:0}
.facewrap{position:relative; width:58px; height:58px; flex:0 0 58px}
.facewrap .mono{width:58px; height:58px}
.pcell img.ph{position:absolute; inset:0; width:58px; height:58px; border-radius:999px; object-fit:cover; background:#262626; border:2px solid #404040}
.pcell .mono{width:58px; height:58px; flex:0 0 58px; font-size:17px}
.pcell .pn{font-weight:800; font-size:13.5px; line-height:1.15}
.ldiv{grid-column:1/-1; text-align:center; color:var(--mut); font-size:11px; font-weight:800; letter-spacing:0.06em}
.netcard .go{display:block; text-align:center; margin:14px; padding:12px;
  background:var(--y-grad); color:#111; font-weight:900; border-radius:var(--r-control);
  letter-spacing:0.06em; font-size:13px}
.lastplay{padding:0 14px 12px; color:var(--dim); font-size:12px; font-weight:700; min-height:18px}

.playbanner{margin:0 14px; max-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; background:var(--y-grad); color:#111; font-weight:900; letter-spacing:0.04em;
  font-size:15px; text-transform:uppercase; border-radius:var(--r-control); opacity:0;
  transition:max-height .25s ease, opacity .25s ease, margin .25s ease}
.playbanner.show{max-height:46px; opacity:1; margin-top:8px; padding:10px}
.playbanner.pop{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.045)}100%{transform:scale(1)}}

/* point feed */
.feed{margin-top:22px}
.feed h2, .bench h2{font-size:14px; letter-spacing:0.06em; margin-bottom:10px; color:var(--txt)}
.feed h2 span, .bench h2 span{color:var(--y)}
.point{display:flex; align-items:center; gap:10px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-control);
  padding:9px 12px; margin-bottom:8px; flex-wrap:wrap}
.point .tag{font-weight:900; font-size:11px; letter-spacing:0.04em; padding:4px 7px;
  background:#030303; border:1px solid var(--line); border-radius:var(--r-tag)}
.point .desc{flex:1; font-weight:700; font-size:14px; min-width:140px}
.point button{font-family:var(--f); font-weight:900; font-size:11px; letter-spacing:0.04em;
  background:none; border:1px solid var(--y); color:var(--y); padding:7px 10px;
  cursor:pointer; border-radius:var(--r-control)}
.bench{margin-top:20px; color:var(--dim); font-weight:700; font-size:14px; line-height:1.7}
.bench b{color:var(--txt)}

#crestA{background:#F5F5F5; border-radius:8px; padding:3px}

/* ESPN bottom bar */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:linear-gradient(180deg,#1c1c1c,#030303); border-top:3px solid var(--y);
  box-shadow:0 -14px 34px rgba(0,0,0,.55)}
.bar .in{max-width:1060px; margin:0 auto; display:flex; align-items:stretch; padding:0 8px; min-width:0}
.bar .cell{display:flex; align-items:center; gap:9px; padding:10px 12px; border-right:1px solid var(--line); min-width:0}
.bar .cell:last-child{border-right:none}
.bar img{height:34px; width:34px; object-fit:contain}
.bar .nm{font-weight:900; font-size:13px; text-transform:uppercase}
.bar .sc{font-weight:900; font-size:24px; font-variant-numeric:tabular-nums}
.bar .sc.win{color:var(--y)}
.bar .mini{font-size:11px; color:var(--dim); font-weight:800; letter-spacing:0.04em}
.bar .grow{flex:1}
.bar button{font-family:var(--f); align-self:center; font-weight:900; letter-spacing:0.04em; font-size:12px;
  background:var(--y-grad); color:#111; border:none; padding:10px 14px; cursor:pointer;
  border-radius:var(--r-control); white-space:nowrap}
.bar button.ghost{background:none; color:var(--y); border:1px solid var(--y)}
@media(max-width:640px){
  .bar .cell{padding:8px 7px; gap:6px}
  .bar img{height:26px; width:26px}
  .bar .sc{font-size:19px}
  .bar button{font-size:11px; padding:8px 9px}
  .bar .hideS{display:none}
}

/* modal */
.modal{position:fixed; inset:0; background:rgba(3,3,3,.85); display:none; z-index:60;
  align-items:center; justify-content:center; padding:18px}
.modal.open{display:flex}
.modal .box{background:var(--panel2); border:1px solid var(--line); border-top:4px solid var(--y);
  border-radius:var(--r-panel); max-width:440px; width:100%; padding:22px;
  box-shadow:0 22px 44px rgba(0,0,0,.30)}
.modal h3{font-weight:900; text-transform:uppercase; font-size:20px}
.modal .x{float:right; background:none; border:none; color:var(--txt); font-size:22px; cursor:pointer}
.statline{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-weight:700}
.statline span{color:var(--dim)}
.audiorow{display:flex; gap:8px; margin:14px 0}
.audiorow button{flex:1; font-family:var(--f); font-weight:900; font-size:12px; padding:10px 4px;
  background:#030303; color:var(--txt); border:1px solid var(--line); cursor:pointer;
  border-radius:var(--r-control)}
.audiorow button.on{border-color:var(--y); color:var(--y)}

/* net hub + roles */
.roles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px}
@media(max-width:820px){.roles{grid-template-columns:minmax(0,1fr)}}
.role{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px; box-shadow:0 14px 30px rgba(0,0,0,.14)}
.role h3{font-weight:900; text-transform:uppercase; font-size:17px; margin-bottom:8px}
.role p{color:var(--dim); font-weight:600; font-size:14px; line-height:1.5; min-height:66px}
.role a{display:block; text-align:center; margin-top:12px; padding:12px; font-weight:900;
  letter-spacing:0.06em; font-size:13px; background:var(--y-grad); color:#111;
  border-radius:var(--r-control)}
.role a.alt{background:#030303; color:var(--y); border:1px solid var(--y)}
.bigscore{display:flex; align-items:center; justify-content:center; gap:18px; padding:22px 0}
.bigscore img{max-height:74px; max-width:74px; object-fit:contain}
.bigscore .num{font-size:clamp(72px,16vw,150px); font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums}
.bigscore .num.win{color:var(--y)}
.panelbtns{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
@media(max-width:700px){.panelbtns{grid-template-columns:minmax(0,1fr)}}
.panelbtns .col{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); padding:14px}
.panelbtns h4{letter-spacing:0.06em; font-size:12px; margin-bottom:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{font-family:var(--f); font-weight:800; font-size:13px; padding:11px 12px; cursor:pointer;
  background:#030303; color:var(--txt); border:1px solid var(--line); border-radius:var(--r-control)}
.chips button b{color:var(--y); font-weight:900; margin-right:7px; font-size:15px}
.chips button:active{border-color:var(--y); color:var(--y)}
.toolbar{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.toolbar button, .toolbar a{font-family:var(--f); font-weight:900; letter-spacing:0.04em; font-size:12px;
  padding:12px 16px; cursor:pointer; background:#030303; color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-control); display:inline-block}
.toolbar button.danger{border-color:var(--red); color:#ff8589}
video.cam{width:100%; background:#000; border:1px solid var(--line);
  border-radius:var(--r-card); margin-top:12px}
.meter{height:12px; background:#030303; border:1px solid var(--line);
  border-radius:var(--r-pill); margin-top:12px; overflow:hidden}
.meter i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--grn),var(--y),var(--red))}
.note{color:var(--dim); font-size:12px; font-weight:600; margin-top:12px; line-height:1.5}

.tvbtn{margin-left:auto; margin-right:14px; color:#111; background:var(--y-grad); font-weight:900; font-size:12px; letter-spacing:0.06em; text-decoration:none; padding:10px 16px; border-radius:999px; white-space:nowrap}