/* Base elements, the atmospheric page background, and shared primitives. */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Fixed poster-style backdrop: faint color washes fading to dark center,
   a starfield for depth. Content floats above in translucent panels. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 85% at -8% 50%,
      rgba(60, 8, 22, 0.85), rgba(38, 4, 14, 0.45) 55%, transparent 82%),
    radial-gradient(ellipse 60% 85% at 108% 50%,
      rgba(10, 14, 66, 0.85), rgba(6, 8, 42, 0.45) 55%, transparent 82%),
    var(--bg);
  /* after the shorthand so a photo backdrop set inline covers the viewport */
  background-size: cover;
  background-position: center;
  background-color: var(--bg);
}
.page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/img/stars.svg") repeat;
  background-size: 700px 700px;
  opacity: 0.35;
}
/* photo backdrops run uncovered — panels carry the darkness — and the
   starfield stays off them. Phones get the smaller .web variant.
   Blur-up: ::before shows the tiny --photo-p heavily blurred from the first
   paint; ::after carries the real photo and simply appears when decoded.
   lqip.js adds .bg-wait so the appearance becomes a fade — without JS the
   photo pops in over the blur, which is the same minus the transition. */
.page-bg.has-photo { background-image: none; }
.page-bg.has-photo::before {
  background: var(--photo-p, var(--photo)) center / cover no-repeat;
  opacity: 1;
  filter: blur(28px);
  transform: scale(1.12);
}
.page-bg.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo) center / cover no-repeat;
  transition: opacity 0.5s ease;
}
.page-bg.has-photo.bg-wait::after { opacity: 0; }
@media (max-width: 700px) {
  .page-bg.has-photo::after { background-image: var(--photo-m); }
}

/* Blur-up for renders: the tiny placeholder sits behind the <img> and the
   sharp file covers it when it arrives; lqip.js clears the leftover halo
   (renders are cutouts with alpha, so even uncleared it's just a soft glow). */
img.ph {
  background-image: var(--ph);
  background-size: cover;
  background-position: top center;
}
img.w-render.ph {
  background-size: contain;
  background-position: center bottom;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gap);
}

main.wrap { padding-bottom: 3rem; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--gold); }

h1 {
  font-family: var(--heading);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

section { margin-bottom: 1.5rem; }

/* The translucent box everything lives in. */
.panel {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 1.1rem;
}

.section-label {
  margin: 0 0 0.9rem;
  font-family: var(--heading);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  color: var(--gold);
}

/* Promotion chip: accent-colored tag on event pages (one per page). */
.promo-chip {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.5rem;
  border-radius: 0;
  border: 2px solid var(--promo, var(--card-edge));
  color: var(--promo, var(--text));
  white-space: nowrap;
}

.dim { color: var(--faint); }
.empty { color: var(--muted); }
.empty a { color: var(--gold); }

.record { font-family: var(--display); font-weight: 800; }
.record .w { color: var(--win); }
.record .d { color: var(--silver); }
.record .l { color: var(--loss); }

.table-scroll { overflow-x: auto; }

/* avatar: provider pfp as a sharp square; fallback = initial letter */
.avatar {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--card-edge);
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.15rem;
}
.avatar-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--gold);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  line-height: 1;
}