/* ===== Reset / base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 16px; }
body {
  margin: 0;
  color: #e9eefc;
  font: 14px/1.5 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* solid fallback + image */
  background: #0b1220 url("/static/background.webp") center / cover no-repeat fixed !important;
  background-attachment: fixed; /* parallax-like, prevents scroll gaps */
}

/* Dim the busy background so text stays readable */
body::before,
.bg-vignette,
.page-vignette {
  content: none !important;
  display: none !important;
}

/* also make sure no mask is applied */
.wrap, .container, .main {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ===== Layout ===== */
.main {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 18px auto 56px;
  padding: 0 16px;
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hint { color: #a2b1cf; font-size: 12px; }

/* ===== Controls ===== */
input, select, button, a.btn {
  font: inherit;
  color: #e9eefc;
}
input, select {
  background: #0e162b;
  border: 1px solid #1a294b;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 220px;
}
.btn {
  background: #5ad1ff;
  color: #04131d;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.btn.ghost {
  background: transparent;
  color: #e9eefc;
  border: 1px solid #1a294b;
}

/* ===== Cards ===== */
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid #1a294b;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}

/* ===== Header ===== */
#topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#profileCard { margin-bottom: 12px; }
#profileHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#profileLeft { display: flex; gap: 12px; align-items: center; }
#avatar {
  width: 56px; height: 56px; object-fit: cover; border-radius: 10px;
  border: 1px solid #1a294b; background: #0e162b;
}
#plevel { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #1a294b; border-radius: 999px; padding: 4px 10px;
  color: #a2b1cf; font-size: 12px;
}

/* ===== Stats row ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stats-row .card h3 { color: #cfe1ff; font-size: 14px; }

.stats-row .card hr {
  border: 0;
  border-top: 1px dashed #21345f;
  margin: 8px 0;
}

/* ===== Matches block ===== */
#matchesCard { margin-top: 14px; }
#matchesCard .row { margin-bottom: 6px; }

/* Ensure table area has a solid base (no see-through) */
#tableWrap {
  background: rgba(6, 13, 29, 0.85);
  border: 1px solid #1a294b;
  border-radius: 10px;
  overflow: hidden;
}

/* ===== Matches table ===== */
table.matches {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.matches thead th {
  position: sticky; top: 0; z-index: 2; /* keep header visible */
  background: #0f1831;
  color: #a2b1cf;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 10px 10px;
  border-bottom: 1px solid #1a294b;
}

table.matches tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(26, 41, 75, .65);
}

/* zebra without relying on the background image behind */
table.matches tbody tr:nth-child(odd)  td { background: rgba(255,255,255,.02); }
table.matches tbody tr:nth-child(even) td { background: rgba(255,255,255,.04); }

/* Map cell */
.mapcell { display: flex; align-items: center; gap: 8px; }
.thumb {
  width: 56px; height: 34px; object-fit: cover;
  border-radius: 6px; border: 1px solid #1a294b; background: #0e162b;
}

/* Faceit icon (bigger per your request) */
.faceit-icon {
  width: 22px; height: 22px; display: inline-block; vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* Small screens */
@media (max-width: 980px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  #profileHeader { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .stats-row { grid-template-columns: 1fr; }
  input#nick { min-width: 160px; }
}


body {

}

/* some layouts wrap everything in a container that sets an opaque bg.
   Keep those transparent so the body background is visible. */
#app, .wrap, .container, .main, .page, .content {
  background: transparent !important;
}