/* ============================================================
   RIFTBOARD — live LoL esports scoreboard
   Palette: Riot hextech — abyss navy, hextech gold, blue/red side
   Type: Chakra Petch (display/numbers) + IBM Plex Sans (body)
   ============================================================ */

:root{
  --abyss:      #0A1428;
  --abyss-2:    #0D1B33;
  --panel:      #101F38;
  --panel-2:    #142745;
  --line:       rgba(200,170,110,.22);
  --line-soft:  rgba(200,170,110,.12);
  --gold:       #C8AA6E;
  --gold-hi:    #F0E6D2;
  --text:       #E8E3D5;
  --muted:      #A09B8C;
  --faint:      #6B7280;
  --blue:       #0AC8B9;
  --blue-soft:  rgba(10,200,185,.14);
  --red:        #E84057;
  --red-soft:   rgba(232,64,87,.14);
  --live:       #FF4655;
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  --font-d: "Chakra Petch", sans-serif;
  --font-b: "IBM Plex Sans", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--abyss);
  background-image:
    radial-gradient(1200px 500px at 50% -200px, rgba(10,200,185,.06), transparent 60%),
    radial-gradient(900px 400px at 90% 110%, rgba(232,64,87,.05), transparent 60%);
  color:var(--text);
  font-family:var(--font-b);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 20px 80px; }

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0 16px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
}
.brand{
  font-family:var(--font-d); font-weight:700; font-size:20px;
  letter-spacing:.14em; color:var(--gold-hi);
}
.brand em{ font-style:normal; color:var(--gold); }
.brand small{
  display:block; font-family:var(--font-b); font-weight:400;
  font-size:11px; letter-spacing:.22em; color:var(--muted); margin-top:1px;
}
.top-status{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-d); font-size:12px; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase;
}
.back-link{
  font-family:var(--font-d); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-soft); padding:7px 14px;
  clip-path:var(--cut); background:var(--panel);
  transition:color .15s, border-color .15s;
}
.back-link:hover{ color:var(--gold-hi); border-color:var(--line); }

/* ---------- section headings ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  margin:42px 0 18px;
}
.eyebrow h2{
  font-family:var(--font-d); font-weight:600; font-size:13px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.eyebrow .count{
  font-family:var(--font-d); font-size:12px; color:var(--muted);
  border:1px solid var(--line-soft); padding:1px 8px;
}

/* ---------- live pulse ---------- */
.pulse{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-d); font-weight:600; font-size:11px;
  letter-spacing:.18em; color:var(--live); text-transform:uppercase;
}
.pulse::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(255,70,85,.6);
  animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,70,85,.55); }
  70%{ box-shadow:0 0 0 9px rgba(255,70,85,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,70,85,0); }
}
@media (prefers-reduced-motion: reduce){
  .pulse::before{ animation:none; }
  *{ transition:none !important; }
}

/* ---------- live match cards (home) ---------- */
.live-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(330px,1fr));
  gap:16px;
}
.match-card{
  position:relative; display:block;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  clip-path:var(--cut);
  padding:16px 18px 14px;
  transition:transform .15s ease, border-color .15s ease;
}
.match-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg, var(--blue), transparent 70%);
}
.match-card::after{
  content:""; position:absolute; inset:0 0 0 auto; width:3px;
  background:linear-gradient(180deg, var(--red), transparent 70%);
}
.match-card:hover{ transform:translateY(-2px); border-color:var(--gold); }
.mc-top{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-d); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.mc-league{ display:flex; align-items:center; gap:8px; }
.mc-league img{ width:18px; height:18px; object-fit:contain; filter:brightness(1.4); }
.mc-teams{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mc-team{ display:flex; flex-direction:column; align-items:center; gap:8px; width:96px; }
.mc-team img{ width:52px; height:52px; object-fit:contain; }
.mc-team .code{
  font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.06em;
}
.mc-score{
  font-family:var(--font-d); font-weight:700; font-size:30px;
  color:var(--gold-hi); display:flex; align-items:center; gap:12px;
}
.mc-score .dash{ color:var(--faint); font-size:20px; }
.mc-bottom{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:11px; border-top:1px solid var(--line-soft);
  font-family:var(--font-d); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.mc-bottom .go{ color:var(--gold); }
.match-card:hover .go{ color:var(--gold-hi); }

/* ---------- schedule / results rows ---------- */
.rows{ display:flex; flex-direction:column; gap:8px; }
.row{
  display:grid;
  grid-template-columns:120px 1fr auto 1fr 130px;
  align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--line-soft);
  padding:11px 16px;
}
.row .lg{ display:flex; align-items:center; gap:8px;
  font-family:var(--font-d); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); overflow:hidden; white-space:nowrap; }
.row .lg img{ width:16px; height:16px; object-fit:contain; filter:brightness(1.4); }
.row .t{ display:flex; align-items:center; gap:9px; font-weight:600; min-width:0; }
.row .t span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .t img{ width:24px; height:24px; object-fit:contain; flex:none; }
.row .t.right{ justify-content:flex-end; text-align:right; }
.row .mid{
  font-family:var(--font-d); font-weight:600; font-size:14px;
  color:var(--gold-hi); min-width:64px; text-align:center;
}
.row .mid .vs{ color:var(--faint); font-size:11px; letter-spacing:.2em; }
.row .when{
  font-family:var(--font-d); font-size:11px; letter-spacing:.08em;
  color:var(--muted); text-align:right; text-transform:uppercase;
}
.row .winner{ color:var(--gold-hi); }
.row .loser{ color:var(--faint); }
.row .winner img, .row .loser img{ filter:none; }
.row .loser img{ opacity:.55; }

/* ---------- empty / error states ---------- */
.state-box{
  border:1px dashed var(--line); background:var(--panel);
  padding:34px 24px; text-align:center; clip-path:var(--cut);
}
.state-box h3{
  font-family:var(--font-d); font-size:14px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-hi); margin-bottom:8px;
}
.state-box p{ color:var(--muted); font-size:14px; max-width:480px; margin:0 auto; }
.skeleton{ color:var(--muted); font-family:var(--font-d); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; padding:30px 0; text-align:center; }
.skeleton::after{ content:"…"; animation:dots 1.2s steps(4) infinite; }
@keyframes dots{ to{ content:""; } }

/* ============================================================
   MATCH PAGE
   ============================================================ */

/* scoreboard header — the broadcast strip */
.scoreboard{
  position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); clip-path:var(--cut);
  padding:22px 26px 20px;
  overflow:hidden;
}
.scoreboard::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--blue-soft), transparent 32%),
    linear-gradient(270deg, var(--red-soft), transparent 32%);
  pointer-events:none;
}
.sb-meta{
  position:relative; display:flex; justify-content:center; gap:18px;
  font-family:var(--font-d); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:16px;
  flex-wrap:wrap; align-items:center;
}
.sb-main{
  position:relative; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
}
.sb-team{ display:flex; align-items:center; gap:16px; min-width:0; }
.sb-team.red{ flex-direction:row-reverse; text-align:right; }
.sb-team img{ width:64px; height:64px; object-fit:contain; flex:none; }
.sb-team .name{ font-family:var(--font-d); font-weight:700; font-size:clamp(16px,2.4vw,24px);
  letter-spacing:.04em; line-height:1.15; overflow:hidden; text-overflow:ellipsis; }
.sb-team .side-tag{ font-family:var(--font-d); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; margin-top:3px; }
.sb-team.blue .side-tag{ color:var(--blue); }
.sb-team.red  .side-tag{ color:var(--red); }
.sb-series{
  font-family:var(--font-d); font-weight:700; font-size:clamp(34px,5vw,52px);
  color:var(--gold-hi); display:flex; align-items:center; gap:16px; line-height:1;
}
.sb-series .sep{ color:var(--gold); font-size:.55em; transform:translateY(2px); }

/* game pills */
.game-pills{ display:flex; gap:8px; justify-content:center; margin:18px 0 0; flex-wrap:wrap; }
.game-pill{
  font-family:var(--font-d); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-soft); padding:6px 14px; background:var(--panel);
  transition:color .15s, border-color .15s;
}
.game-pill:hover{ color:var(--gold-hi); }
.game-pill.active{ color:var(--abyss); background:var(--gold); border-color:var(--gold); font-weight:600; }
.game-pill.live-dot{ position:relative; padding-left:24px; }
.game-pill.live-dot::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--live);
}

/* gold lead bar — signature element */
.gold-bar-wrap{ margin-top:26px; }
.gold-bar-labels{
  display:flex; justify-content:space-between;
  font-family:var(--font-d); font-size:12px; letter-spacing:.1em; margin-bottom:6px;
}
.gold-bar-labels .b{ color:var(--blue); } .gold-bar-labels .r{ color:var(--red); }
.gold-bar-labels .lead{ color:var(--gold-hi); }
.gold-bar{
  position:relative; height:14px; background:var(--red);
  clip-path:polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
  overflow:hidden;
}
.gold-bar .blue-fill{
  position:absolute; inset:0 auto 0 0; width:50%;
  background:linear-gradient(90deg, #067F76, var(--blue));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.gold-bar .notch{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--abyss); opacity:.85;
}

/* objectives strip */
.obj-strip{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:10px; margin-top:18px; align-items:center;
}
.obj-side{ display:flex; gap:8px; flex-wrap:wrap; }
.obj-side.red{ justify-content:flex-end; }
.obj{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-d); font-weight:600; font-size:14px;
  background:var(--abyss-2); border:1px solid var(--line-soft);
  padding:5px 11px;
}
.obj svg{ width:15px; height:15px; }
.obj-side.blue .obj svg{ fill:var(--blue); }
.obj-side.red  .obj svg{ fill:var(--red); }
.obj .drakes{ display:inline-flex; gap:3px; }
.obj .drake-dot{ width:8px; height:8px; transform:rotate(45deg); border:1px solid currentColor; }
.obj-center{
  font-family:var(--font-d); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); text-align:center; white-space:nowrap;
}

/* panels */
.panel{
  background:var(--panel); border:1px solid var(--line-soft);
  clip-path:var(--cut); padding:18px 20px; margin-top:18px;
}
.panel h3{
  font-family:var(--font-d); font-weight:600; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
#gold-chart{ width:100%; height:190px; display:block; }
.chart-note{ font-size:12px; color:var(--faint); margin-top:8px; }

/* player tables */
.teams-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width:860px){
  .teams-grid{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr auto 1fr; }
  .row .lg, .row .when{ display:none; }
}
.team-panel{ background:var(--panel); border:1px solid var(--line-soft); clip-path:var(--cut); }
.team-panel header{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.08em;
}
.team-panel header img{ width:24px; height:24px; object-fit:contain; }
.team-panel.blue header{ box-shadow:inset 3px 0 0 var(--blue); }
.team-panel.red  header{ box-shadow:inset 3px 0 0 var(--red); }
.team-panel header .tg{ margin-left:auto; font-size:12px; color:var(--muted); letter-spacing:.06em; }

.ptable{ width:100%; border-collapse:collapse; font-size:13px; }
.ptable th{
  font-family:var(--font-d); font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  text-align:right; padding:9px 12px 6px; border-bottom:1px solid var(--line-soft);
}
.ptable th:first-child{ text-align:left; }
.ptable td{
  padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ptable tr:last-child td{ border-bottom:none; }
.ptable td:first-child{ text-align:left; }
.pl{ display:flex; align-items:center; gap:9px; min-width:0; }
.pl .champ{ width:30px; height:30px; border:1px solid var(--line-soft); object-fit:cover; flex:none; }
.pl .who{ line-height:1.25; min-width:0; }
.pl .who .nm{ font-weight:600; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.pl .who .role{ font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.12em; }
.kda b{ color:var(--gold-hi); }
.kda .d{ color:var(--red); }
.items{ display:flex; gap:3px; justify-content:flex-end; }
.items img{ width:20px; height:20px; border:1px solid var(--line-soft); background:var(--abyss-2); }
.hp-cell{ min-width:74px; }
.hpbar{ height:5px; background:rgba(255,255,255,.08); margin-top:4px; }
.hpbar i{ display:block; height:100%; background:linear-gradient(90deg,#2E8B57,#6CCB5F); transition:width .6s; }
.dead .pl .champ{ filter:grayscale(1) brightness(.5); }
.dead .nm{ color:var(--faint); text-decoration:line-through; }

.foot{
  margin-top:56px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--faint); display:flex; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.foot a{ color:var(--muted); border-bottom:1px solid var(--line-soft); }