:root {
  --stout: #090704;
  --amber: #c47b22;
  --gold: #e8b45a;
  --foam: #f6edd8;
  --muted: #d7c4a4;
  --ok: #8be0a4;
  --loss: #ff8a7a;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-ui: "Barlow", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--foam);
  font-family: var(--font-ui);
}

body.preview {
  background:
    radial-gradient(ellipse at 50% 40%, #1c3348 0%, #0b1218 55%, #07090c 100%);
}

#stage {
  position: relative;
  width: 5120px;
  height: 1440px;
  transform-origin: top left;
}

.panel {
  position: absolute;
  background: linear-gradient(180deg, rgba(16, 10, 6, 0.88), rgba(9, 7, 4, 0.72));
  border: 1px solid rgba(232, 180, 90, 0.32);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 22px 26px;
  backdrop-filter: blur(8px);
}

.kicker {
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 18px;
}

.ign {
  font-family: var(--font-display);
  font-size: 92px;
  line-height: 0.86;
  letter-spacing: 0.05em;
  margin: 4px 0 8px;
}

.rank {
  font-family: var(--font-display);
  font-size: 64px;
  letter-spacing: 0.04em;
}

.meta {
  color: var(--muted);
  font-size: 24px;
}

.session {
  display: flex;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 0.04em;
}

.win { color: var(--ok); }
.loss { color: var(--loss); }

.side-stack {
  display: grid;
  gap: 12px;
}

.mini {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  font-size: 28px;
}

.mini .name {
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 20px;
}

.full {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 640px 1fr 640px;
}

.rail {
  background: linear-gradient(180deg, #3a220e 0%, #120c08 100%);
}

.center {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
}

.huge {
  font-family: var(--font-display);
  font-size: 180px;
  line-height: 0.82;
  letter-spacing: 0.05em;
  margin: 0;
}

.subhead {
  font-size: 42px;
  color: var(--muted);
  margin-top: 12px;
}

.clock {
  font-family: var(--font-mono);
  font-size: 72px;
  color: var(--gold);
  margin-top: 8px;
}

.scorebug {
  left: 50%;
  top: 36px;
  width: 640px;
  margin-left: -320px;
  text-align: center;
}

.scoreline {
  display: flex;
  justify-content: center;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.9;
}

.scoreline .blue { color: #7eb6ff; }
.scoreline .orange { color: #ffb15a; }
.scoreline .dash { color: var(--muted); }

.score-table {
  width: min(1600px, 90%);
  border-collapse: collapse;
  font-size: 36px;
}

.score-table th,
.score-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(232, 180, 90, 0.25);
  text-align: left;
}

.score-table th {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 22px;
}