/* Design system Slash'Ours — base unique pour toutes les pages du site public.
   Couleurs alignées sur la charte du jeu (TEAM_KILLER/TEAM_SURVIVORS de
   gamemode/shared.lua, rouge XP de cl_level_system.lua). */

@font-face {
  font-family: "Bohemian Typewriter";
  src: url('../fonts/bohemian_typewriter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Friday13";
  src: url('../fonts/friday_13.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Young Frankenstein";
  src: url('../fonts/young_frankenstein.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0b0d10;
  --bg-card:#14171c;
  --bg-card-hover:#1b1f26;
  --border-subtle: rgba(230,238,246,0.08);
  --muted:#9aa3ad;

  --accent-killer:#790000;
  --accent-killer-hover:#a30000;
  --accent-survivor:#2b4cff;

  --status-online:#3ddc84;
  --status-offline:#ff4d4d;
  --status-unknown:#6b7280;

  --text:#e6eef6;
  --btn-text:#fff;
}

*{box-sizing:border-box;}
html, body {
  margin:0;
  min-height:100%;
  font-family:"Bohemian Typewriter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display:flex;
  flex-direction:column;
}

a { color: inherit; }

/* Navigation commune (haut de chaque page) */
.tabs-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding:20px 32px;
  border-bottom:1px solid var(--border-subtle);
}

.tabs-nav__brand{
  font-family:"Friday13", serif;
  font-size:1.6rem;
  color: var(--accent-killer);
  text-decoration:none;
  letter-spacing:0.02em;
}

.tabs-nav__links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}

.tabs-nav__links a{
  text-decoration:none;
  color: var(--muted);
  font-weight:600;
  font-size:0.95rem;
  transition: color 0.2s ease;
}

.tabs-nav__links a:hover,
.tabs-nav__links a[aria-current="page"]{
  color: var(--text);
}

/* Layout générique */
.section{
  padding:48px 32px;
  max-width:1100px;
  margin:0 auto;
  width:100%;
}

.section-title{
  font-family:"Friday13", serif;
  font-size:1.8rem;
  color: var(--accent-killer);
  text-align:center;
  margin-bottom:32px;
}

/* Boutons */
.btn{
  font-family: "Bohemian Typewriter", serif;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:12px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition: all 0.2s ease;
  font-size:1rem;
}

.btn-primary{
  background-color: var(--accent-killer);
  color: var(--btn-text);
}
.btn-primary:hover{ background-color: var(--accent-killer-hover); }

.btn-secondary{
  background:transparent;
  border:1px solid var(--accent-killer);
  color: var(--accent-killer);
}
.btn-secondary:hover{
  background-color: var(--accent-killer);
  color: var(--btn-text);
}

.btn-disabled{
  background:transparent;
  border:1px solid var(--border-subtle);
  color: var(--muted);
  cursor:not-allowed;
  pointer-events:none;
}

/* Badges (caractère, carte, succès) */
.badge{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:6px;
  margin-bottom:12px;
  color: var(--btn-text);
}

.badge-survivor{ background: var(--accent-survivor); }
.badge-killer{ background: var(--accent-killer); }
.badge-neutral{ background: var(--muted); color: var(--bg); }

/* Cartes génériques (équipe, survivants teaser, etc.) */
.card{
  background: var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  padding:20px;
  text-align:center;
  transition: background-color 0.2s ease;
}
.card:hover{ background: var(--bg-card-hover); }

.card img{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:12px;
  border:2px solid var(--border-subtle);
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:20px;
}

/* Statut serveur en direct */
.status-block{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  background: var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  padding:20px 28px;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.status-dot--online{ background: var(--status-online); }
.status-dot--offline{ background: var(--status-offline); }
.status-dot--unknown{ background: var(--status-unknown); }

.status-meta{
  color: var(--muted);
  font-size:0.95rem;
}

/* Bandeau survivants (teaser accueil) */
.survivor-teaser{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:8px;
}

.survivor-teaser .card{
  flex:0 0 140px;
  padding:14px;
}

.survivor-teaser .card img{
  width:80px;
  height:80px;
}

.survivor-teaser .card span{
  display:block;
  font-size:0.9rem;
  color: var(--text);
}

/* Footer commun */
.site-footer{
  padding:16px;
  text-align:center;
  font-family: "Bohemian Typewriter", serif;
  font-size:1.2rem;
  color: var(--muted);
  cursor: default;
  user-select: none;
  border-top:1px solid var(--border-subtle);
}