*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:transparent;
  color:#f7f7fb;
  font-family:Arial,Helvetica,sans-serif;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3vw;
  overflow:hidden;
}

.standings-board{
  width:min(1780px,96vw);
  background:rgba(8,11,16,.97);
  border:1px solid #29313c;
  border-left:7px solid #bb86fc;
  border-radius:18px;
  overflow:hidden;
  opacity:0;
  transform:translateY(24px);
  transform-origin:top left;
  transition:opacity .35s ease,transform .35s ease;
}
.standings-board.is-visible{
  opacity:1;
  transform:none;
}

header{
  display:grid;
  grid-template-columns:260px 1fr 140px;
  align-items:center;
  min-height:92px;
  padding:16px 22px;
  border-bottom:1px solid #29313c;
}
.brand strong{font-size:20px}
.brand small,
.title>span{
  display:block;
  margin-top:5px;
  color:#cf8cff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.title h1{
  margin:5px 0 0;
  font-size:23px;
}
.mode{
  text-align:center;
  font-weight:700;
}

.table-wrap{
  width:100%;
  overflow:visible;
  padding:8px 16px 16px;
}
table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
th,td{
  padding:15px 10px;
  border-bottom:1px solid #202732;
  text-align:center;
  font-size:17px;
  white-space:nowrap;
}
thead th{
  color:#b7c2d0;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
}
.team-col{
  width:340px;
  text-align:left;
}
tbody .team-col{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.place{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:9px;
  background:#241332;
  color:#d28cff;
  font-weight:900;
}
.team-copy{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
  flex-wrap:nowrap;
}
.team-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}
.team-tag{
  flex:0 0 auto;
  white-space:nowrap;
  color:#f7f7fb;
  font-weight:700;
}
.team-copy.long-name .team-name{
  font-size:15px;
}
.total{
  color:#dba8ff!important;
  font-weight:900;
  background:rgba(187,134,252,.06);
}
.empty{
  text-align:center!important;
  color:#8491a1;
}

/* Tournament Admin preview */
.preview-mode{
  padding:14px;
}
.preview-mode .standings-board{
  width:100%;
}
.preview-mode header{
  min-height:76px;
  grid-template-columns:220px 1fr 110px;
  padding:12px 18px;
}
.preview-mode .title h1{font-size:17px}
.preview-mode th,
.preview-mode td{
  padding:10px 8px;
  font-size:13px;
}
.preview-mode .team-col{width:280px}
.preview-mode .place{
  width:28px;
  height:28px;
  flex-basis:28px;
}
.preview-mode .team-copy.long-name .team-name{
  font-size:12px;
}

/* Public LIVE tournament embed:
   render the board at a fixed natural width, then scale the entire thing
   down as one unit so EVERY map and TOTAL always remain visible. */
.public-embed{
  display:block;
  padding:10px!important;
  overflow:hidden!important;
}
.public-embed .standings-board{
  width:var(--public-board-width, 1120px)!important;
  max-width:none!important;
  margin:0!important;
  transform-origin:top left!important;
}
.public-embed header{
  grid-template-columns:260px 1fr 140px;
}
.public-embed table{
  width:100%!important;
  table-layout:fixed!important;
}
.public-embed .team-col{
  width:300px!important;
}
.public-embed th,
.public-embed td{
  font-size:17px;
  padding:14px 9px;
}

/* OBS/live standalone board: keep long names on one visual line with the tag. */
.live-mode .team-copy{
  flex-wrap:nowrap!important;
}
.live-mode .team-tag{
  white-space:nowrap!important;
}


/* OBS long-session stability: keep table/layout paints inside the board. */
.standings-board{
  contain:layout paint style;
  isolation:isolate;
}
.table-wrap{
  contain:layout paint;
}


/* Completed/public board: keep round headers distinct from TOTAL. */
.public-embed thead th:not(.team-col):not(.total){
  padding-left:7px!important;
  padding-right:7px!important;
  font-size:12px!important;
  letter-spacing:.055em!important;
}

.public-embed .total{
  width:110px!important;
}

.public-embed .table-wrap{
  padding-left:12px!important;
  padding-right:12px!important;
}


.public-embed header{
  min-height:88px!important;
}

.public-embed .brand strong{
  font-size:20px!important;
}

.public-embed .title h1{
  font-size:21px!important;
}

.public-embed .mode{
  font-size:16px!important;
}