/* Fortnite Tracker – gedeelde stijl (losse pagina + WordPress-plugin).
 * Alles is gescoped onder .ftt en erft het lettertype van het thema. */
.ftt {
  --ftt-bg: #14161b;
  --ftt-card: #1d2027;
  --ftt-border: #2b2f39;
  --ftt-text: #e8eaf0;
  --ftt-muted: #9aa1b2;
  --ftt-accent: #7c5cff;
  --ftt-green: #22c55e;
  --ftt-amber: #f59e0b;
  font: inherit;
  color: var(--ftt-text);
  background: var(--ftt-bg);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}
.ftt *, .ftt *::before, .ftt *::after { box-sizing: border-box; }
.ftt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftt-player { font-weight: 700; font-size: 1.1em; }
.ftt-status { font-size: .85em; padding: 4px 10px; border-radius: 999px; background: var(--ftt-card); border: 1px solid var(--ftt-border); }
.ftt-status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ftt-muted); }
.ftt-status.is-ok { color: var(--ftt-green); }
.ftt-status.is-ok::before { background: var(--ftt-green); }
.ftt-status.is-bad { color: var(--ftt-amber); }
.ftt-status.is-bad::before { background: var(--ftt-amber); }
.ftt-active { color: var(--ftt-muted); font-size: .85em; margin-top: -6px; }
.ftt-note { color: var(--ftt-muted); font-size: .75em; margin: 0; font-style: italic; }
.ftt-card { background: var(--ftt-card); border: 1px solid var(--ftt-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.ftt-big, .ftt-small { display: grid; gap: 12px; }
.ftt-big { grid-template-columns: 1fr 1fr; }
.ftt-small { grid-template-columns: repeat(3, 1fr); }
.ftt-label { color: var(--ftt-muted); font-size: .85em; margin-bottom: 4px; }
.ftt-value { font-size: clamp(1.6em, 5vw, 2.4em); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ftt-mid { font-size: 1.3em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ftt-sub { color: var(--ftt-muted); font-size: .8em; margin-top: 4px; }
.ftt-chart { position: relative; height: 220px; }
.ftt-sessions { list-style: none; margin: 0; padding: 0; }
.ftt-sessions li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ftt-border); font-variant-numeric: tabular-nums; }
.ftt-sessions li:first-child { border-top: 0; }
.ftt-empty { color: var(--ftt-muted); }
.ftt-foot { color: var(--ftt-muted); font-size: .75em; text-align: right; }
@media (max-width: 600px) {
  .ftt { padding: 12px; }
  .ftt-big { grid-template-columns: 1fr; }
  .ftt-small { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ftt-small .ftt-card { padding: 10px; }
  .ftt-mid { font-size: 1.05em; }
}