*{box-sizing:border-box}

body{
 margin:0;
 background:#020b14;
 color:#fff;
 font-family:Arial,Helvetica,sans-serif;
}

header{
 height:64px;
 padding:0 3%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 background:#020a13;
 border-bottom:1px solid #173b59;
}

header strong{font-size:15px}

.publico{
 color:#1684ff;
 font-size:11px;
 border:1px solid #19558c;
 padding:8px 11px;
 border-radius:6px;
}

main{
 width:100%;
 padding:24px 12px 50px;
}

.back{
 color:#76b7f1;
 text-decoration:none;
 font-size:12px;
}

.panel{
 margin-top:18px;
 padding:14px;
 background:#071625;
 border:1px solid #23415e;
 border-radius:10px;
}

.panel-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:15px;
 margin-bottom:16px;
 flex-wrap:wrap;
}

.title{
 display:flex;
 align-items:center;
 gap:10px;
 font-size:17px;
 font-weight:900;
}

.title-icon{
 color:#1684ff;
 font-size:20px;
}

.actions{
 display:flex;
 align-items:center;
 gap:16px;
 flex-wrap:wrap;
}

.legend{
 font-size:10px;
 font-weight:bold;
}

.legend .v{color:#18e58c}
.legend .d{color:#ff4f5f;margin-left:12px}

#refreshBtn{
 background:#1684ff;
 color:white;
 border:0;
 padding:8px 13px;
 border-radius:6px;
 font-size:10px;
 font-weight:900;
 cursor:pointer;
}

.table-wrap{
 width:100%;
 overflow-x:auto;
 border:1px solid #294b69;
 border-radius:8px;
}

table{
 width:100%;
 border-collapse:separate;
 border-spacing:0;
 min-width:max-content;
 background:#071625;
}

th,td{
 border-right:1px solid #29445e;
 border-bottom:1px solid #29445e;
 height:39px;
 text-align:center;
 padding:7px 10px;
 font-size:11px;
}

thead th{
 background:#102238;
 color:#fff;
 font-weight:900;
}

.map-head{
 min-width:250px;
 text-align:left;
 padding-left:14px;
 position:sticky;
 left:0;
 z-index:5;
}

.team-head{
 min-width:136px;
 font-size:10px;
 white-space:nowrap;
}

.sub-head{
 min-width:58px;
 width:58px;
}

.map-cell{
 position:sticky;
 left:0;
 z-index:3;
 min-width:250px;
 background:#071625;
 text-align:left;
 font-weight:900;
 white-space:nowrap;
}

.map-info{
 display:flex;
 align-items:center;
 gap:9px;
}

.map-icon{
 width:20px;
 height:20px;
 object-fit:contain;
 flex:none;
}

.zero{
 color:#6997bf;
 font-weight:500;
}

.win{
 color:#19e98b;
 font-weight:900;
}

.loss{
 color:#ff4f5f;
 font-weight:900;
}

tbody tr:hover td{
 background:#0a1d30;
}

tbody tr:hover .map-cell{
 background:#0a1d30;
}

th:last-child,td:last-child{border-right:0}
tbody tr:last-child td{border-bottom:0}

.readonly{
 text-align:center;
 color:#6688a5;
 font-size:10px;
 margin-top:14px;
}

.updated{
 color:#6688a5;
 font-size:9px;
}

@media(max-width:700px){
 main{padding:14px 6px 35px}
 .panel{padding:8px}
 .map-head,.map-cell{min-width:170px}
 .team-head{min-width:110px}
 .sub-head{min-width:48px}
}