*{box-sizing:border-box}

:root{
 --bg:#020b14;
 --panel:#061522;
 --panel2:#081a29;
 --border:#173b59;
 --blue:#1684ff;
 --muted:#7895b3;
}

html{scroll-behavior:smooth}

body{
 margin:0;
 background:var(--bg);
 color:#fff;
 font-family:Arial,sans-serif;
}

.top{
 height:62px;
 padding:0 3%;
 display:flex;
 align-items:center;
 gap:35px;
 background:#020a13;
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:20;
}

.top strong{white-space:nowrap}

.top nav{
 display:flex;
 gap:25px;
 flex:1;
}

.top a{
 color:#91a9c0;
 text-decoration:none;
 font-size:11px;
 font-weight:bold;
}

.top a:hover{color:var(--blue)}

.publico{
 color:#2794ff;
 border:1px solid #19558c;
 padding:7px 10px;
 border-radius:6px;
 font-size:10px;
}

main{
 max-width:1580px;
 margin:auto;
 padding:12px;
}

.hero{
 min-height:230px;
 padding:35px;
 border:1px solid var(--border);
 border-radius:10px;
 display:flex;
 align-items:center;
 background:
 linear-gradient(90deg,#020d19f5,#020d1990,#020d1920),
 url("major.jpeg") center/cover;
}

.hero h1{
 margin:0 0 5px;
 font-size:42px;
}

.hero b{color:#1684ff}

.hero p{
 color:#b2c1d0;
 max-width:520px;
 line-height:1.5;
}

.hero small{color:#668aa9}

.metrics{
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:9px;
 margin:10px 0;
}

.metrics div{
 min-height:82px;
 display:flex;
 align-items:center;
 gap:12px;
 padding:14px 18px;
 background:var(--panel);
 border:1px solid var(--border);
 border-radius:8px;
}

.metrics strong{
 font-size:27px;
}

.metrics span{
 color:#8ba5bd;
 font-size:10px;
 font-weight:bold;
}

.grid{
 display:grid;
 grid-template-columns:1.05fr .95fr 1fr;
 gap:10px;
}

.panel{
 background:var(--panel);
 border:1px solid var(--border);
 border-radius:9px;
 margin-bottom:10px;
 overflow:hidden;
}

.panel h2{
 margin:0;
 padding:14px 16px;
 border-bottom:1px solid var(--border);
 font-size:13px;
}

.result-row,
.game-row{
 min-height:64px;
 display:grid;
 grid-template-columns:85px 1fr 70px 1fr;
 align-items:center;
 gap:7px;
 padding:8px 12px;
 border-bottom:1px solid #14314a;
}

.date{
 font-size:10px;
 color:#72a3cf;
 line-height:1.5;
}

.team{
 display:flex;
 align-items:center;
 gap:7px;
 font-size:11px;
 font-weight:bold;
}

.team.right{
 justify-content:flex-end;
 text-align:right;
}

.team img{
 width:35px;
 height:35px;
 object-fit:contain;
}

.score{
 text-align:center;
 font-size:21px;
 font-weight:900;
}

.badge{
 width:21px;
 height:21px;
 display:inline-flex;
 justify-content:center;
 align-items:center;
 border-radius:4px;
 color:#fff;
 font-size:11px;
 font-weight:900;
}

.win{background:#08752c;border:1px solid #10a646}
.loss{background:#9c1f27;border:1px solid #e13b44}

.table-wrap{overflow:auto}

table{
 width:100%;
 border-collapse:collapse;
 font-size:11px;
}

th{
 padding:9px 5px;
 color:#7590ac;
 background:#081a29;
 font-size:9px;
}

td{
 padding:9px 5px;
 text-align:center;
 border-top:1px solid #14314a;
}

.team-cell{
 text-align:left;
 font-weight:bold;
}

.team-cell img{
 width:25px;
 height:25px;
 object-fit:contain;
 vertical-align:middle;
 margin-right:7px;
}

.pts{
 color:#1684ff;
 font-weight:900;
}

.map-row{
 padding:10px 14px;
 border-bottom:1px solid #14314a;
}

.map-head{
 display:flex;
 justify-content:space-between;
 font-size:10px;
}

.bar{
 height:7px;
 background:#10283c;
 margin-top:7px;
 border-radius:8px;
 overflow:hidden;
}

.bar span{
 display:block;
 height:100%;
 background:#1684ff;
}

.teams{
 padding:13px;
 display:grid;
 grid-template-columns:repeat(9,1fr);
 gap:8px;
}

.team-card{
 min-height:110px;
 border:1px solid var(--border);
 border-radius:7px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding:7px;
 font-size:10px;
 font-weight:bold;
}

.team-card img{
 width:60px;
 height:60px;
 object-fit:contain;
 margin-bottom:7px;
}

.sub{
 margin:12px 15px 0;
 color:var(--muted);
 font-size:10px;
}

.rating-list{
 padding:14px;
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:8px;
}

.rating-card{
 min-height:70px;
 border:1px solid var(--border);
 border-radius:7px;
 display:grid;
 grid-template-columns:30px 1fr auto;
 align-items:center;
 gap:8px;
 padding:10px;
}

.rating-pos{
 background:#147be8;
 padding:7px 0;
 border-radius:4px;
 text-align:center;
 font-weight:bold;
}

.rating-value{
 color:#1684ff;
 font-size:20px;
 font-weight:900;
}

.readonly{
 margin:0 14px 14px;
 padding:11px;
 text-align:center;
 color:#7199be;
 border:1px solid var(--border);
 font-size:10px;
}

footer{
 padding:20px 5px;
 border-top:1px solid var(--border);
 display:flex;
 justify-content:space-between;
 color:#6887a5;
 font-size:10px;
}

@media(max-width:1000px){
 .top nav{display:none}
 .top{justify-content:space-between}
 .grid{grid-template-columns:1fr}
 .metrics{grid-template-columns:repeat(2,1fr)}
 .teams{grid-template-columns:repeat(3,1fr)}
 .rating-list{grid-template-columns:1fr}
}

@media(max-width:560px){
 .hero{min-height:170px;padding:20px}
 .hero h1{font-size:26px}

 .result-row,
 .game-row{
  grid-template-columns:55px 1fr 50px 1fr;
  padding:7px;
 }

 .team{font-size:9px}

 .team img{
  width:28px;
  height:28px;
 }

 .score{font-size:17px}
}

/* YOUTUBE_METRIC_V2 */

.metrics > .youtube-metric-box{
 position:relative;
 padding:0!important;
 overflow:hidden;
}

.youtube-metric-link{
 position:absolute;
 inset:0;

 display:flex;
 align-items:center;
 justify-content:flex-start;
 gap:12px;

 padding:14px 16px;

 color:#fff;
 text-decoration:none;

 transition:
   background .18s ease,
   border-color .18s ease;
}

.youtube-metric-icon{
 width:30px;
 height:30px;
 flex:0 0 30px;
}

.youtube-metric-text{
 display:flex!important;
 flex-direction:column;
 align-items:flex-start;
 gap:3px;
 min-width:0;
}

.youtube-metric-text b{
 color:#fff;
 font-size:12px;
 font-weight:900;
 line-height:1.1;
}

.youtube-metric-text small{
 color:#7397b8;
 font-size:7px;
 font-weight:800;
 letter-spacing:.7px;
}

.youtube-metric-link:hover{
 background:rgba(255,0,0,.08);
}