#fa-match-viewer{
  --fa-ct:#4da7ff;
  --fa-t:#ff4444;
  --fa-panel:rgba(15,15,15,.6);
  --fa-border:rgba(255,255,255,.06);
  --fa-text:var(--text,#e1e5e9);
  --fa-muted:var(--muted,#9aa1a6);
  --fa-map-ratio:1 / 1;
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0 0 20px;
  color:var(--fa-text);
  font-family:"Montserrat",sans-serif;
  box-sizing:border-box;
}
#fa-match-viewer,
#fa-match-viewer *{box-sizing:border-box}
#fa-match-viewer button,
#fa-match-viewer select,
#fa-match-viewer input{font:inherit}
#fa-match-viewer .fa-back-button,
#fa-match-viewer .fa-viewer-upload-dock,
#fa-match-viewer .fa-viewer-map-panel,
#fa-match-viewer .fa-scoreboard-team,
#fa-match-viewer .fa-data-card,
#fa-match-viewer .fa-transport{
  background:var(--fa-panel)!important;
  border:1px solid var(--fa-border)!important;
  border-radius:14px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.35)!important;
}
#fa-match-viewer .fa-viewer-layout{
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
#fa-match-viewer .fa-viewer-layout--solo{
  grid-template-columns:minmax(0,1fr);
}
#fa-match-viewer .fa-viewer-left{
  display:grid;
  gap:12px;
  align-content:start;
}
#fa-match-viewer .fa-back-button{
  padding:10px 14px;
  color:#fff;
  text-align:left;
}
#fa-match-viewer .fa-back-button::before{
  content:"\2190";
  margin-right:8px;
  opacity:.75;
}
#fa-match-viewer .fa-viewer-help{
  display:grid;
  gap:8px;
  font-size:12px;
  color:var(--fa-muted);
}
#fa-match-viewer .fa-help-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
#fa-match-viewer .fa-keycap{
  min-width:32px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#d8dde3;
  font-size:11px;
  text-align:center;
}
#fa-match-viewer .fa-viewer-upload-dock{
  position:relative;
  display:grid;
  gap:4px;
  padding:12px 14px;
  color:#fff;
  font-size:13px;
  cursor:pointer;
  overflow:hidden;
}
#fa-match-viewer .fa-viewer-upload-dock input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
#fa-match-viewer .fa-viewer-meta{
  display:grid;
  gap:8px;
  padding:14px 16px;
  background:var(--fa-panel)!important;
  border:1px solid var(--fa-border)!important;
  border-radius:14px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.35)!important;
}
#fa-match-viewer .fa-viewer-eyebrow{
  margin:0;
  color:#cfd6dd;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
#fa-match-viewer .fa-viewer-meta h2{
  margin:0;
  font-size:26px!important;
  line-height:1.05;
  color:#fff!important;
}
#fa-match-viewer .fa-viewer-meta p:last-child{
  margin:0;
  color:var(--fa-muted);
  line-height:1.45;
  font-size:13px;
}
#fa-match-viewer .fa-viewer-upload-dock span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#cfd6dd;
}
#fa-match-viewer .fa-viewer-stage{
  display:grid;
  gap:16px;
}
/* Do not override .fa-viewer-layout--solo with a 64px + main column: this template
   has only .fa-viewer-stage inside .fa-viewer-layout; the old 64px rail is gone.
   Applying 64px 1fr here squeezed the entire stage into the first 64px once is-ready. */
#fa-match-viewer.is-ready{
  max-width:100%;
  padding-bottom:10px;
}
#fa-match-viewer.is-ready .fa-viewer-layout.fa-viewer-layout--solo{
  grid-template-columns:minmax(0,1fr);
}
#fa-match-viewer.is-ready .fa-viewer-stage{
  gap:10px;
}
#fa-match-viewer.is-ready .fa-viewer-help,
#fa-match-viewer.is-ready .fa-viewer-meta{
  display:none;
}
#fa-match-viewer.is-ready .fa-chip{
  padding:6px 10px;
  border-radius:10px;
}
#fa-match-viewer.is-ready .fa-viewer-topbar{
  padding:8px 14px;
}
#fa-match-viewer.is-ready .fa-viewer-upload-dock{
  width:52px;
  min-height:52px;
  padding:0;
  place-items:center;
}
#fa-match-viewer.is-ready .fa-viewer-upload-dock span{
  font-size:10px;
  line-height:1.1;
  text-align:center;
  max-width:34px;
}
#fa-match-viewer.is-empty .fa-viewer-scoreboard,
#fa-match-viewer.is-empty .fa-viewer-data-row,
#fa-match-viewer.is-empty .fa-viewer-footer{
  display:none;
}
#fa-match-viewer.is-empty .fa-viewer-main{
  grid-template-columns:1fr;
}
#fa-match-viewer.is-empty .fa-viewer-layout{
  grid-template-columns:1fr;
}
#fa-match-viewer.is-empty .fa-viewer-left{
  grid-template-columns:auto auto minmax(0,1fr);
  grid-template-areas:"back upload meta";
  align-items:stretch;
}
#fa-match-viewer.is-empty .fa-back-button{grid-area:back;align-self:start}
#fa-match-viewer.is-empty .fa-viewer-upload-dock{grid-area:upload;min-width:180px}
#fa-match-viewer.is-empty .fa-viewer-meta{grid-area:meta;min-height:100%}
#fa-match-viewer.is-empty .fa-viewer-help{display:none}
#fa-match-viewer.is-empty .fa-viewer-map-panel{min-height:420px}
#fa-match-viewer.is-empty #fa-map-canvas{opacity:.38;filter:blur(.5px)}
/* Empty state on a match page previews the feature: radar and an inert transport bar sit
   behind the card, dimmed enough to stay background but legible as a preview. */
#fa-match-viewer.is-empty .fa-viewer-footer--preview{display:block}
#fa-match-viewer .fa-viewer-footer--preview{
  opacity:.4;
  pointer-events:none;
  user-select:none;
}
#fa-match-viewer .fa-viewer-footer--preview .fa-transport-speed,
#fa-match-viewer .fa-viewer-footer--preview .fa-transport-icon,
#fa-match-viewer .fa-viewer-footer--preview .fa-transport-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* Map+round | score-clock-score | phase — side columns are equal so the clock sits dead centre. */
#fa-match-viewer .fa-viewer-topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-width:0;
  padding:10px 16px;
  background:var(--fa-panel);
  border:1px solid var(--fa-border);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
#fa-match-viewer .fa-viewer-map{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
#fa-match-viewer .fa-viewer-map-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  opacity:.9;
}
#fa-match-viewer .fa-viewer-map-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
#fa-match-viewer .fa-viewer-map-name{
  color:#fff;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#fa-match-viewer .fa-viewer-map-round{
  color:var(--fa-muted);
  font-size:11px;
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#fa-match-viewer .fa-viewer-scoreline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#fa-match-viewer .fa-score-ct,
#fa-match-viewer .fa-score-t{
  min-width:38px;
  text-align:center;
  font-size:27px;
  font-weight:800;
  line-height:1;
}
#fa-match-viewer .fa-score-ct{color:var(--fa-ct)}
#fa-match-viewer .fa-score-t{color:var(--fa-t)}
#fa-match-viewer .fa-viewer-clock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:6px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--fa-border);
  color:#fff;
  font-size:19px;
  font-weight:700;
  line-height:1;
  transition:color .2s,background .2s,border-color .2s;
}
#fa-match-viewer .fa-viewer-clock.is-freeze{color:#78d6a0;border-color:rgba(120,214,160,.35);background:rgba(120,214,160,.1)}
#fa-match-viewer .fa-viewer-clock.is-bomb{color:#ff4444;border-color:rgba(255,68,68,.4);background:rgba(255,68,68,.12)}
#fa-match-viewer .fa-viewer-clock.is-defuse{color:#53d9ff;border-color:rgba(83,217,255,.4);background:rgba(83,217,255,.1)}
#fa-match-viewer .fa-viewer-phase{
  justify-self:end;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--fa-border);
  color:var(--fa-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .2s,background .2s,border-color .2s;
}
#fa-match-viewer .fa-viewer-phase.is-freeze{color:#78d6a0;border-color:rgba(120,214,160,.35);background:rgba(120,214,160,.1)}
#fa-match-viewer .fa-viewer-phase.is-bomb{color:#ff4444;border-color:rgba(255,68,68,.4);background:rgba(255,68,68,.12);animation:fa-phase-pulse 1s ease-in-out infinite}
#fa-match-viewer .fa-viewer-phase.is-defuse{color:#53d9ff;border-color:rgba(83,217,255,.4);background:rgba(83,217,255,.1)}
@keyframes fa-phase-pulse{50%{opacity:.55}}
#fa-match-viewer .fa-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(15,15,15,.6);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
}
/* CT roster | map | T roster — matches DOM order: left scoreboard, map, right scoreboard. */
#fa-match-viewer .fa-viewer-main{
  display:grid;
  grid-template-columns:minmax(200px,min(22%,260px)) minmax(0,1fr) minmax(200px,min(22%,260px));
  gap:16px;
  align-items:stretch;
  width:100%;
  min-width:0;
}
#fa-match-viewer.is-ready .fa-viewer-main{
  grid-template-columns:minmax(200px,min(22%,260px)) minmax(0,1fr) minmax(200px,min(22%,260px));
  gap:10px;
}
#fa-match-viewer .fa-viewer-map-panel{
  padding:14px;
  position:relative;
  min-width:0;
  width:100%;
}
#fa-match-viewer .fa-map-canvas-wrap{
  position:relative;
  width:100%;
  max-width:min(70vh,640px);
  margin:0 auto;
}
#fa-match-viewer .fa-map-canvas-wrap #fa-map-canvas{
  max-width:100%;
  margin:0;
}
#fa-match-viewer #fa-map-canvas.is-drawing{cursor:crosshair;touch-action:none}
#fa-match-viewer .fa-sketch-tools{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:6px;
  z-index:5;
}
#fa-match-viewer .fa-sketch-button{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(10,14,20,.75);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
#fa-match-viewer .fa-sketch-button:hover:not(:disabled){border-color:rgba(255,255,255,.3)}
#fa-match-viewer .fa-sketch-button:disabled{cursor:default;opacity:.35}
#fa-match-viewer .fa-sketch-button.is-on{border-color:#ffe14d;box-shadow:0 0 0 1px #ffe14d inset}
/* Card next to the pointer over a player or utility on the map. */
#fa-match-viewer .fa-map-card{
  position:absolute;
  transform:translate(14px,14px);
  display:grid;
  gap:4px;
  padding:7px 10px;
  border-radius:8px;
  border-left:3px solid transparent;
  background:rgba(10,14,20,.92);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  font-size:12px;
  color:#e8eef4;
  white-space:nowrap;
  pointer-events:none;
  z-index:6;
}
#fa-match-viewer .fa-map-card.is-flip{transform:translate(calc(-100% - 14px),14px)}
#fa-match-viewer .fa-map-card.is-ct{border-left-color:#4da7ff}
#fa-match-viewer .fa-map-card.is-t{border-left-color:#ffab47}
#fa-match-viewer .fa-map-card.is-dead{opacity:.75}
#fa-match-viewer .fa-map-card-name{font-weight:700;font-size:13px}
#fa-match-viewer .fa-map-card-row{display:flex;align-items:center;gap:8px}
#fa-match-viewer .fa-map-card-weapon{height:14px;width:auto}
#fa-match-viewer .fa-map-card-stats{color:var(--fa-muted);font-size:11px}
#fa-match-viewer .fa-map-card-stats b{color:#e8eef4;font-weight:600;margin-left:2px}
#fa-match-viewer .fa-killfeed{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:none;
  z-index:5;
  max-width:min(60%,420px);
}
#fa-match-viewer .fa-killfeed-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-end;
  padding:5px 10px;
  border-radius:4px;
  background:rgba(8,12,18,.78);
  border:1px solid rgba(255,255,255,.08);
  color:#e8eef4;
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
#fa-match-viewer .fa-killfeed-name{
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#fa-match-viewer .fa-killfeed-name.is-ct{color:#4da7ff}
#fa-match-viewer .fa-killfeed-name.is-t{color:#ffab47}
#fa-match-viewer .fa-killfeed-weapon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#cfd6dd;
  font-weight:700;
}
#fa-match-viewer .fa-killfeed-weapon-img{
  height:18px;
  width:auto;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
#fa-match-viewer .fa-killfeed-weapon-text{
  font-size:11px;
  text-transform:lowercase;
  color:#cfd6dd;
}
#fa-match-viewer .fa-killfeed-hs-img{
  height:14px;
  width:auto;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
#fa-match-viewer .fa-killfeed-debug{
  background:rgba(120,40,40,.6) !important;
  color:#fff !important;
  font-family:monospace;
  font-size:11px;
}
#fa-match-viewer.is-ready .fa-viewer-map-panel{padding:8px}
#fa-match-viewer .fa-viewer-scoreboard{
  min-width:0;
  width:100%;
}
#fa-match-viewer #fa-map-canvas{
  display:block;
  width:100%;
  max-width:min(70vh,640px);
  margin:0 auto;
  aspect-ratio:var(--fa-map-ratio);
  height:auto;
  border-radius:12px;
  background:radial-gradient(circle at center,rgba(29,48,74,.9),rgba(6,12,22,.98));
}
#fa-match-viewer .fa-empty-state{
  position:absolute;
  inset:14px;
  display:grid;
  place-items:center;
  padding:18px;
}
#fa-match-viewer .fa-empty-state[hidden]{display:none!important}
/* Match analyser with no match loaded: the shell has nothing to show, so strip it back to
   the upload card until a replay is bound (then is-upload-only drops and the viewer opens). */
#fa-match-viewer.is-upload-only .fa-viewer-topbar,
#fa-match-viewer.is-upload-only .fa-map-canvas-wrap{display:none}
#fa-match-viewer.is-upload-only .fa-viewer-map-panel{
  min-height:0;
  padding:0;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
#fa-match-viewer.is-upload-only .fa-empty-state{
  position:static;
  inset:auto;
  padding:0;
}
#fa-match-viewer .fa-empty-card{
  width:min(520px,100%);
  padding:22px 24px;
  border-radius:14px;
  background:rgba(10,10,10,.74);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  text-align:center;
}
#fa-match-viewer .fa-empty-kicker{
  margin:0 0 8px;
  color:#cfd6dd;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
#fa-match-viewer .fa-empty-card h3{
  margin:0 0 10px;
  color:#fff;
  font-size:24px;
  line-height:1.05;
}
#fa-match-viewer .fa-empty-card p:last-child{margin:0;color:var(--fa-muted);line-height:1.5;white-space:pre-line}
#fa-match-viewer .fa-progress-bar{
  position:relative;
  margin-top:14px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
#fa-match-viewer .fa-progress-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#ff9b4a,#ff5b6f);
  width:0%;
  transition:width .35s ease;
}
#fa-match-viewer .fa-progress-bar.is-indeterminate .fa-progress-fill{
  width:35% !important;
  animation:fa-progress-slide 1.4s ease-in-out infinite;
}
@keyframes fa-progress-slide{
  0%{transform:translateX(-100%)}
  60%{transform:translateX(220%)}
  100%{transform:translateX(220%)}
}
#fa-match-viewer .fa-empty-download{
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:14px auto 0;
  text-decoration:none;
}
#fa-match-viewer .fa-empty-download.is-loading{
  position:relative;
  overflow:hidden;
}
#fa-match-viewer .fa-empty-download.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  animation:faViewerPulse 1.2s infinite;
}
@keyframes faViewerPulse{
  to{transform:translateX(100%)}
}
/* Upload dock sitting inside the empty card, under whatever primary button is showing. */
#fa-match-viewer .fa-empty-upload{
  width:fit-content;
  margin:10px auto 0;
  padding:9px 16px;
  place-items:center;
  font-size:12px;
}
#fa-match-viewer .fa-empty-upload span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#cfd6dd;
}
#fa-match-viewer .fa-empty-upload:hover{border-color:rgba(255,255,255,.18)!important}
#fa-match-viewer .fa-viewer-scoreboard{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-self:stretch;
  height:100%;
}
#fa-match-viewer.is-ready .fa-viewer-scoreboard{gap:8px;align-content:start}
#fa-match-viewer .fa-scoreboard-team{
  padding:12px;
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
#fa-match-viewer .fa-roster-list{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:0;
}
#fa-match-viewer .fa-roster-row{flex:1 1 0;min-height:0}
#fa-match-viewer.is-ready .fa-scoreboard-team{padding:9px 9px 8px}
#fa-match-viewer .fa-scoreboard-team.ct::before,
#fa-match-viewer .fa-scoreboard-team.t::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-1px;
  width:4px;
  border-radius:14px 0 0 14px;
}
#fa-match-viewer .fa-scoreboard-team.ct::before{background:var(--fa-ct)}
#fa-match-viewer .fa-scoreboard-team.t::before{background:var(--fa-t)}
/* right panel mirrors the left: stripe on the outer edge, header reads from the outside in */
#fa-match-viewer .fa-viewer-scoreboard-right .fa-scoreboard-team::before{left:auto;right:-1px;border-radius:0 14px 14px 0}
#fa-match-viewer .fa-team-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
#fa-match-viewer .fa-viewer-scoreboard-right .fa-team-header,
#fa-match-viewer .fa-viewer-scoreboard-right .fa-team-title{flex-direction:row-reverse}
#fa-match-viewer .fa-team-title{display:flex;align-items:center;gap:8px;min-width:0}
#fa-match-viewer .fa-team-marker{width:9px;height:9px;border-radius:50%;flex:none}
#fa-match-viewer .fa-scoreboard-team.ct .fa-team-marker{background:var(--fa-ct)}
#fa-match-viewer .fa-scoreboard-team.t .fa-team-marker{background:var(--fa-t)}
#fa-match-viewer .fa-team-title strong{
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#fa-match-viewer.is-ready .fa-roster-list{gap:6px}
#fa-match-viewer .fa-roster-row{
  display:grid;
  gap:7px;
  padding:10px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
}
#fa-match-viewer .fa-roster-row.is-dead{opacity:.48}
#fa-match-viewer .fa-roster-row:hover{border-color:rgba(255,255,255,.16)}
#fa-match-viewer .fa-roster-main{display:flex;align-items:center;gap:10px}
#fa-match-viewer .fa-roster-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:700;
  flex:none;
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 2px rgba(0,0,0,.4);
}
#fa-match-viewer .fa-roster-avatar--ct{box-shadow:0 0 0 2px #4da7ff}
#fa-match-viewer .fa-roster-avatar--t{box-shadow:0 0 0 2px #ffab47}
#fa-match-viewer .fa-roster-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#fa-match-viewer .fa-roster-copy{min-width:0;flex:1;display:grid;gap:4px}
#fa-match-viewer .fa-roster-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:600;
}
#fa-match-viewer .fa-roster-tags{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  overflow:visible;
}
#fa-match-viewer .fa-roster-tags-left,
#fa-match-viewer .fa-roster-tags-right{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
#fa-match-viewer .fa-roster-tags-right{
  justify-content:flex-end;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
#fa-match-viewer .fa-roster-armor,
#fa-match-viewer .fa-roster-grenades{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
#fa-match-viewer .fa-roster-armor{
  margin-top:-22px;
  margin-bottom:6px;
}
#fa-match-viewer .fa-roster-weapon{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  background:transparent;
  border:0;
}
#fa-match-viewer .fa-roster-weapon-img{
  height:18px;
  width:auto;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
#fa-match-viewer .fa-roster-weapon-img.is-dead{
  height:14px;
  opacity:.7;
}
#fa-match-viewer .fa-roster-weapon-text{
  font-size:10px;
  color:#cfd6dd;
}
#fa-match-viewer .fa-roster-gear{
  display:inline-flex;
  align-items:center;
}
#fa-match-viewer .fa-roster-gear-img{
  height:14px;
  width:auto;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
  opacity:.92;
}
#fa-match-viewer .fa-roster-gear-grenade .fa-roster-gear-img{height:12px}
#fa-match-viewer .fa-mini-chip{
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:2px 7px;
  font-size:10px;
  color:#cfd6dd;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
  flex:none;
}
#fa-match-viewer .fa-roster-meta{display:flex;gap:10px;font-size:12px;color:#fff}
#fa-match-viewer .fa-health-track{height:4px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}
#fa-match-viewer .fa-roster-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  margin-top:6px;
  padding:5px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
}
#fa-match-viewer .fa-roster-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-width:0;
  font-variant-numeric:tabular-nums;
}
#fa-match-viewer .fa-roster-stat-label{
  font-size:8px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  line-height:1;
}
#fa-match-viewer .fa-roster-stat-value{
  font-size:11px;
  font-weight:700;
  color:#cfd6dd;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#fa-match-viewer .fa-health-track span{display:block;height:100%;border-radius:999px}
/* the bar follows the side the panel's team is playing (teams keep their panel all match) */
#fa-match-viewer .fa-scoreboard-team.ct .fa-health-track span{background:#4da7ff}
#fa-match-viewer .fa-scoreboard-team.t .fa-health-track span{background:#ffab47}
#fa-match-viewer .fa-viewer-data-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
#fa-match-viewer.is-ready .fa-viewer-data-row{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
}
#fa-match-viewer .fa-data-card{padding:14px}
#fa-match-viewer.is-ready .fa-data-card{padding:8px 9px}
#fa-match-viewer .fa-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}
#fa-match-viewer.is-ready .fa-card-heading{margin-bottom:8px}
#fa-match-viewer .fa-card-heading h3,
#fa-match-viewer .fa-extent-card h4{margin:0;font-size:14px!important;color:#fff!important}
#fa-match-viewer .fa-chip{padding:4px 9px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
#fa-match-viewer .fa-chip.subtle{background:rgba(255,255,255,.08);color:#d5dde5}
#fa-match-viewer .fa-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
#fa-match-viewer .fa-stat-grid > div.wide{grid-column:1/-1}
#fa-match-viewer .fa-stat-grid > div,
#fa-match-viewer .fa-extent-card,
#fa-match-viewer .fa-feed-row,
#fa-match-viewer .fa-feed-empty{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
}
#fa-match-viewer .fa-stat-grid > div{padding:11px}
#fa-match-viewer .fa-stat-grid dt,
#fa-match-viewer .fa-feed-meta,
#fa-match-viewer .fa-feed-top,
#fa-match-viewer .fa-extent-stats dt{
  color:var(--fa-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
#fa-match-viewer .fa-stat-grid dd,
#fa-match-viewer .fa-extent-stats dd{
  margin:6px 0 0;
  font-size:16px;
  font-weight:700;
  color:#fff;
}
#fa-match-viewer .fa-stat-grid > div.wide dd{font-size:14px;line-height:1.35}
#fa-match-viewer .fa-extent-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#fa-match-viewer .fa-extent-card{padding:11px}
#fa-match-viewer .fa-extent-card.ct{box-shadow:inset 0 0 0 1px rgba(77,167,255,.18)}
#fa-match-viewer .fa-extent-card.t{box-shadow:inset 0 0 0 1px rgba(255,155,74,.18)}
#fa-match-viewer .fa-extent-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
}
#fa-match-viewer .fa-feed-list{display:grid;gap:10px;max-height:236px;overflow:auto}
#fa-match-viewer .fa-feed-row{
  position:relative;
  display:grid;
  gap:7px;
  padding:11px 11px 11px 15px;
}
#fa-match-viewer .fa-feed-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:rgba(255,255,255,.12);
  border-radius:12px 0 0 12px;
}
#fa-match-viewer .fa-feed-row.is-kill::before{background:var(--bad,#e57b7b)}
#fa-match-viewer .fa-feed-row.is-bomb::before{background:var(--accent,#d18b3a)}
#fa-match-viewer .fa-feed-row.is-round::before{background:var(--good,#67c887)}
#fa-match-viewer .fa-feed-top{display:flex;justify-content:space-between;gap:8px}
#fa-match-viewer .fa-feed-row strong{font-size:13px;color:#fff}
#fa-match-viewer .fa-feed-empty{margin:0;padding:14px;color:var(--fa-muted)}
#fa-match-viewer .fa-viewer-footer{display:grid;gap:10px;overflow:visible;position:relative;z-index:1}
#fa-match-viewer .fa-round-track{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:6px;
  overflow:visible;
  position:relative;
  z-index:2;
  min-width:0;
}
#fa-match-viewer .fa-round-track .fa-round-chip{
  flex:0 1 auto;
  min-width:24px;
}
#fa-match-viewer .fa-round-chip{
  position:relative;
  min-width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#dbe2ea;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .12s;
  cursor:pointer;
  overflow:visible;
}
#fa-match-viewer .fa-round-chip[data-fa-round-tip]:not([data-fa-round-tip=""]):hover::after,
#fa-match-viewer .fa-round-chip[data-fa-round-tip]:not([data-fa-round-tip=""]):focus-visible::after{
  content:attr(data-fa-round-tip);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  padding:8px 11px;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
  max-width:min(280px,85vw);
  text-align:center;
  z-index:50;
  color:#e8eef4;
  background:rgba(12,14,18,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  pointer-events:none;
}
#fa-match-viewer .fa-round-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
#fa-match-viewer .fa-round-chip.is-ct{
  background:rgba(77,167,255,.18);
  border-color:rgba(77,167,255,.45);
  color:#d9ecff;
}
#fa-match-viewer .fa-round-chip.is-t{
  background:rgba(255,155,74,.18);
  border-color:rgba(255,155,74,.45);
  color:#ffe2c4;
}
#fa-match-viewer .fa-round-chip.is-ct:hover{background:rgba(77,167,255,.28);border-color:rgba(77,167,255,.6)}
#fa-match-viewer .fa-round-chip.is-t:hover{background:rgba(255,155,74,.28);border-color:rgba(255,155,74,.6)}
#fa-match-viewer .fa-round-chip.is-active{
  transform:translateY(-2px);
  font-weight:700;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.15),0 4px 12px rgba(0,0,0,.3);
}
#fa-match-viewer .fa-round-chip.is-active.is-ct{
  border-color:rgba(77,167,255,.85);
  background:rgba(77,167,255,.32);
  color:#eaf4ff;
  box-shadow:0 0 10px rgba(77,167,255,.4),0 6px 14px rgba(0,0,0,.3);
}
#fa-match-viewer .fa-round-chip.is-active.is-t{
  border-color:rgba(255,155,74,.85);
  background:rgba(255,155,74,.32);
  color:#ffeed8;
  box-shadow:0 0 10px rgba(255,155,74,.4),0 6px 14px rgba(0,0,0,.3);
}
/* Visible gap between halves (round 13 starts the second half in MR12 / MR15). */
#fa-match-viewer .fa-round-chip.is-half-break{margin-left:22px;position:relative}
#fa-match-viewer .fa-round-chip.is-half-break::before{
  content:"";
  position:absolute;
  left:-13px;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(255,255,255,.18);
}
#fa-match-viewer .fa-transport{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
}
#fa-match-viewer .fa-transport-left,
#fa-match-viewer .fa-transport-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#fa-match-viewer .fa-transport-button{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:9px 12px;
}
#fa-match-viewer .fa-transport-button.primary{
  background:linear-gradient(135deg,rgba(209,139,58,.96),rgba(255,136,77,.96))!important;
  border-color:transparent!important;
  color:#111!important;
}
#fa-match-viewer .fa-transport-right label{
  display:grid;
  gap:5px;
  color:var(--fa-muted);
  font-size:12px;
}
#fa-match-viewer .fa-transport-right select{
  min-width:102px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}
#fa-match-viewer .fa-transport-slider{min-width:0;position:relative}
#fa-match-viewer .fa-transport-slider input{display:block;width:100%;min-width:0;accent-color:#ff884d;position:relative;z-index:2}
#fa-match-viewer .fa-timeline-markers{
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  height:22px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:1;
}
#fa-match-viewer .fa-timeline-marker{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.85);
  border-radius:2px;
  transform:translateX(-1px);
  box-shadow:0 0 6px rgba(255,255,255,.5);
}
#fa-match-viewer .fa-timeline-marker.is-ct{
  background:#4da7ff;
  box-shadow:0 0 6px rgba(77,167,255,.7);
}
#fa-match-viewer .fa-timeline-marker.is-t{
  background:#ff9b4a;
  box-shadow:0 0 6px rgba(255,155,74,.7);
}
#fa-match-viewer .fa-timeline-event{
  position:absolute;
  bottom:calc(100% + 4px);
  display:block;
  height:14px;
  width:14px;
  transform:translateX(-50%);
  pointer-events:none;
  background-color:#e8eef4;
  -webkit-mask-image:var(--fa-event-icon);
  mask-image:var(--fa-event-icon);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));
}
#fa-match-viewer .fa-timeline-event.is-ct{
  background-color:#4da7ff;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(77,167,255,.55));
}
#fa-match-viewer .fa-timeline-event.is-t{
  background-color:#ff9b4a;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(255,155,74,.55));
}
#fa-match-viewer .fa-timeline-event.is-bomb{
  height:16px;
  width:16px;
  background-color:#ff5b5b;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(255,91,91,.55));
}
#fa-match-viewer .fa-transport-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
#fa-match-viewer .fa-transport-icon:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
/* Sits where the team score used to, so it needs to read as the header's control. */
#fa-match-viewer .fa-voice-toggle{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 4px;
  border:0;
  background:none;
  font-size:19px;
  line-height:1;
  opacity:.5;
  cursor:pointer;
  transition:opacity .15s ease,filter .15s ease;
}
#fa-match-viewer .fa-voice-toggle:hover:not(:disabled){opacity:.9}
#fa-match-viewer .fa-voice-toggle:disabled{cursor:default;opacity:.25}
#fa-match-viewer .fa-voice-toggle.is-on{
  opacity:1;
  filter:drop-shadow(0 0 4px rgba(74,155,255,.9));
}
#fa-match-viewer .fa-voice-toggle.is-busy{animation:fa-voice-pulse 1s ease-in-out infinite}
/* the replay opened before its voice: the team toggles pulse and the voice lane shimmers until it lands */
#fa-match-viewer .fa-voice-toggle.fa-voice-coming{animation:fa-voice-coming 1.2s ease-in-out infinite}
@keyframes fa-voice-coming{0%,100%{opacity:.35}50%{opacity:1}}
#fa-match-viewer .fa-timeline-voice.is-loading{
  background:linear-gradient(90deg,transparent,rgba(77,167,255,.6),transparent) no-repeat;
  background-size:25% 100%;
  animation:fa-voice-lane 1.6s linear infinite;
}
@keyframes fa-voice-lane{from{background-position:-35% 0}to{background-position:135% 0}}

/* Speaking: ring the avatar and badge it, so it reads with audio off too. */
#fa-match-viewer .fa-roster-avatar.is-speaking{
  position:relative;
  border-color:#5ee7ff;
  box-shadow:
    0 0 0 3px rgba(94,231,255,.95),
    0 0 14px 3px rgba(94,231,255,.75),
    0 0 26px rgba(94,231,255,.45);
  animation:fa-speaking-pulse 1.1s ease-in-out infinite;
}
#fa-match-viewer .fa-roster-speaker{
  position:absolute;
  right:-6px;
  bottom:-6px;
  font-size:11px;
  line-height:1;
  padding:3px;
  border-radius:50%;
  background:#0b0f14;
  border:1px solid rgba(94,231,255,.9);
  box-shadow:0 0 8px rgba(94,231,255,.9);
}
@keyframes fa-speaking-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(94,231,255,.95),0 0 14px 3px rgba(94,231,255,.75),0 0 26px rgba(94,231,255,.45)}
  50%{box-shadow:0 0 0 3px rgba(94,231,255,1),0 0 20px 5px rgba(94,231,255,.95),0 0 38px rgba(94,231,255,.6)}
}

/* Talker list in the radar corner, mirroring the in-game voice indicator. */
#fa-match-viewer .fa-voice-panel{
  position:absolute;
  right:10px;
  bottom:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  pointer-events:none;
  z-index:2;
}
#fa-match-viewer .fa-voice-speaker{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:4px;
  background:rgba(10,13,18,.72);
  border-left:2px solid transparent;
  font-size:11px;
  font-weight:600;
  color:#e6e8eb;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
#fa-match-viewer .fa-voice-speaker.is-ct{border-left-color:#6ea8ff}
#fa-match-viewer .fa-voice-speaker.is-t{border-left-color:#ffb14a}
#fa-match-viewer .fa-voice-speaker-icon{font-size:10px;opacity:.9}
#fa-match-viewer .fa-voice-speaker-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Voice activity strip under the scrubber — shows where the comms are. */
#fa-match-viewer .fa-timeline-voice{
  position:absolute;
  left:8px;
  right:8px;
  bottom:-3px;
  height:3px;
  pointer-events:none;
}
#fa-match-viewer .fa-voice-mark{
  position:absolute;
  top:0;
  height:100%;
  min-width:2px;
  border-radius:2px;
  background:rgba(74,205,255,.75);
}
#fa-match-viewer .fa-voice-mark.is-ct{background:rgba(110,168,255,.8)}
#fa-match-viewer .fa-voice-mark.is-t{background:rgba(255,177,74,.8)}
#fa-match-viewer .fa-voice-mark.is-unknown{background:rgba(200,200,200,.5)}

@keyframes fa-voice-pulse{0%,100%{opacity:.3}50%{opacity:.8}}

#fa-match-viewer .fa-transport-toggle{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#cfd6dd;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}
#fa-match-viewer .fa-transport-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
#fa-match-viewer .fa-transport-toggle.is-on{
  background:rgba(255,155,74,.25);
  border-color:rgba(255,155,74,.7);
  color:#ffe2c4;
  box-shadow:0 0 8px rgba(255,155,74,.35) inset;
}
#fa-match-viewer .fa-speed-menu{
  position:relative;
  display:inline-block;
}
#fa-match-viewer .fa-transport-speed{
  min-width:62px;
  height:34px;
  padding:0 8px 0 10px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  cursor:pointer;
  line-height:1;
  -webkit-appearance:none;
  appearance:none;
}
#fa-match-viewer .fa-transport-speed:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}
#fa-match-viewer .fa-transport-speed:focus-visible{
  outline:2px solid rgba(255,155,74,.7);
  outline-offset:1px;
}
#fa-match-viewer .fa-speed-caret{
  font-size:9px;
  color:#cfd6dd;
  transition:transform .15s ease;
}
#fa-match-viewer .fa-speed-menu.is-open .fa-speed-caret{
  transform:rotate(180deg);
}
#fa-match-viewer .fa-speed-options{
  position:absolute;
  bottom:calc(100% + 6px);
  left:0;
  margin:0;
  padding:4px;
  list-style:none;
  min-width:100%;
  background:rgba(14,20,30,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:20;
}
#fa-match-viewer .fa-speed-option{
  padding:6px 10px;
  border-radius:6px;
  color:#e8eef4;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
}
#fa-match-viewer .fa-speed-option:hover{
  background:rgba(255,255,255,.1);
}
#fa-match-viewer .fa-speed-option.is-selected{
  background:rgba(255,155,74,.22);
  color:#ffe2c4;
}
#fa-match-viewer .fa-transport-time{
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:600;
  color:#e8eef4;
  min-width:108px;
  text-align:right;
  white-space:nowrap;
}
/* Keep roster | map and multi-card rows on typical laptop widths; only stack on narrow screens (see 760px). */
@media (max-width:1180px){
  #fa-match-viewer .fa-viewer-layout{grid-template-columns:1fr}
  #fa-match-viewer .fa-viewer-left{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
  #fa-match-viewer .fa-transport{display:flex;flex-wrap:wrap;gap:8px}
  #fa-match-viewer .fa-transport-slider{flex:1 1 160px;min-width:0;overflow:hidden}
  #fa-match-viewer .fa-transport-right{margin-left:auto}
  #fa-match-viewer .fa-viewer-help,
  #fa-match-viewer .fa-viewer-meta{grid-column:1/-1}
}
@media (max-width:760px){
  #fa-match-viewer{padding-bottom:12px}
  #fa-match-viewer .fa-viewer-left{grid-template-columns:1fr}
  #fa-match-viewer.is-empty .fa-viewer-left{
    grid-template-columns:1fr;
    grid-template-areas:"back" "meta" "upload";
  }
  #fa-match-viewer .fa-viewer-topbar{grid-template-columns:1fr;justify-items:center;gap:8px}
  #fa-match-viewer .fa-viewer-map{justify-content:center}
  #fa-match-viewer .fa-viewer-map-copy{justify-items:center}
  #fa-match-viewer .fa-viewer-phase{justify-self:center}
  #fa-match-viewer .fa-viewer-main,
  #fa-match-viewer.is-ready .fa-viewer-main,
  #fa-match-viewer .fa-viewer-scoreboard,
  #fa-match-viewer .fa-viewer-data-row,
  #fa-match-viewer .fa-stat-grid,
  #fa-match-viewer .fa-extent-grid,
  #fa-match-viewer .fa-extent-stats{grid-template-columns:1fr}
  #fa-match-viewer .fa-viewer-map-panel,
  #fa-match-viewer .fa-viewer-scoreboard{grid-column:auto}
  #fa-match-viewer .fa-transport{grid-template-columns:1fr}
  #fa-match-viewer #fa-map-canvas{height:auto;max-width:100%}
}

/* Game chat panel (below the transport bar) */
#fa-match-viewer .fa-chat{margin-top:10px;background:var(--fa-panel);border:1px solid var(--fa-border);border-radius:10px;overflow:hidden}
#fa-match-viewer .fa-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}
#fa-match-viewer .fa-chat-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--fa-text);font:inherit;font-weight:600;cursor:pointer;padding:0}
#fa-match-viewer .fa-chat-caret{color:var(--fa-muted);font-size:11px}
#fa-match-viewer .fa-chat-count{background:rgba(255,255,255,.08);border-radius:9px;padding:1px 8px;font-size:11px;color:var(--fa-muted)}
#fa-match-viewer .fa-chat-sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fa-muted);cursor:pointer;margin:0}
#fa-match-viewer .fa-chat-list{max-height:260px;overflow-y:auto;padding:4px 8px 10px;border-top:1px solid var(--fa-border);display:flex;flex-direction:column;gap:2px}
#fa-match-viewer .fa-chat-row{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:6px;padding:3px 6px;color:var(--fa-text);font:inherit;font-size:13px;cursor:pointer}
#fa-match-viewer .fa-chat-row:hover{background:rgba(255,255,255,.06)}
#fa-match-viewer .fa-chat-meta{flex:0 0 auto;color:var(--fa-muted);font-size:11px;min-width:86px}
#fa-match-viewer .fa-chat-name{flex:0 0 auto;font-weight:600}
#fa-match-viewer .fa-chat-name.is-ct{color:#4da7ff}
#fa-match-viewer .fa-chat-name.is-t{color:#ffab47}
#fa-match-viewer .fa-chat-text{white-space:pre-wrap;word-break:break-word}
#fa-match-viewer .fa-chat-row.is-server .fa-chat-text{color:var(--fa-muted);font-style:italic}
#fa-match-viewer .fa-chat-empty{margin:0;padding:12px;color:var(--fa-muted)}

/* The embed (the extension's room widget): the map never sizes off the frame's own height (`vh` there is the frame,
   which follows the viewer), so the layout is the site's; the embed's zoom then scales it all to fit the room. */
.ma-embed #fa-match-viewer .fa-map-canvas-wrap,
.ma-embed #fa-match-viewer #fa-map-canvas{max-width:640px}