/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0f1a;
  --bg2: #1a1a2e;
  --bg3: #16213e;
  --card: #1e1e35;
  --border: #2a2a4a;
  --accent: #6c63ff;
  --accent2: #ff6b6b;
  --gold: #ffd700;
  --silver: #c0c0c0;
  --bronze: #cd7f32;
  --text: #e8e8f0;
  --text2: #a0a0b8;
  --success: #4caf82;
  --danger: #e05555;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 2px 16px rgba(0,0,0,0.4);
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

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

img { max-width: 100%; }

/* === NAVBAR === */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.navbar-brand { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.navbar-links { display: flex; align-items: center; gap: 1.2rem; }
.navbar-links a { color: var(--text2); font-size: 0.95rem; transition: color 0.2s; }
.navbar-links a:hover { color: var(--text); text-decoration: none; }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 4px; }

/* === BUTTONS === */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.1s;
}
.btn-primary:hover { background: #574fd6; text-decoration: none; transform: translateY(-1px); }
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--text2);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-danger { display: inline-block; background: var(--danger); color: #fff; padding: 0.4rem 0.9rem; border-radius: var(--radius); border: none; cursor: pointer; font-size: 0.85rem; }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.btn-lg { padding: 0.75rem 1.8rem; font-size: 1.05rem; }
.btn-full { width: 100%; text-align: center; }

/* === MAIN CONTENT === */
.main-content { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

/* === MESSAGES === */
.messages { margin-bottom: 1rem; }
.message { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 0.5rem; background: var(--card); border-left: 4px solid var(--accent); }
.message-success { border-left-color: var(--success); }
.message-error { border-left-color: var(--danger); }

/* === HERO === */
.hero { text-align: center; padding: 4rem 1rem 3rem; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { color: var(--text2); font-size: 1.15rem; margin-bottom: 2rem; }
.hero .btn-primary, .hero .btn-secondary { margin: 0.3rem; }

/* === SECTION === */
.section { margin-bottom: 3rem; }
.section h2 { font-size: 1.4rem; margin-bottom: 1.2rem; border-left: 3px solid var(--accent); padding-left: 0.75rem; }
.section-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 700px) { .section-split { grid-template-columns: 1fr; } }

/* === GAMES GRID === */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; }
.game-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s, border-color 0.2s; color: var(--text); }
.game-card:hover { transform: translateY(-4px); border-color: var(--accent); text-decoration: none; }
.game-thumb { width: 100%; height: 130px; object-fit: cover; }
.game-thumb-placeholder { width: 100%; height: 130px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.game-card-body { padding: 1rem; }
.game-card-body h3 { margin-bottom: 0.4rem; font-size: 1rem; }
.game-card-body p { color: var(--text2); font-size: 0.85rem; margin-bottom: 0.75rem; }

/* === LEADERBOARD COMPACT === */
.leaderboard-compact { list-style: none; }
.leaderboard-compact li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.leaderboard-compact .pts { margin-left: auto; color: var(--accent); font-weight: 600; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* === ACTIVITY FEED === */
.activity-feed { list-style: none; }
.activity-feed li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; flex-wrap: wrap; }
.time-ago { color: var(--text2); font-size: 0.8rem; margin-left: auto; }
.badge-record { background: var(--gold); color: #000; font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 20px; font-weight: 600; }

/* === PROFILS ROW === */
.profiles-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.profile-chip { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); transition: border-color 0.2s; min-width: 90px; }
.profile-chip:hover { border-color: var(--accent); text-decoration: none; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.profile-chip small { color: var(--text2); font-size: 0.8rem; }

/* === AUTH === */
.auth-container { max-width: 420px; margin: 3rem auto; }
.auth-container h1 { margin-bottom: 1.5rem; }
.auth-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--text2); }
.form-group input, .form-group textarea {
  width: 100%; padding: 0.6rem 0.9rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-size: 0.95rem; transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); }
.field-error { color: var(--danger); font-size: 0.82rem; margin-top: 0.3rem; }
.field-hint { color: var(--text2); font-size: 0.8rem; }
.optional { color: var(--text2); font-size: 0.82rem; }
.form-errors { background: rgba(224,85,85,0.1); border: 1px solid var(--danger); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 1rem; color: var(--danger); font-size: 0.9rem; }
.auth-alt { margin-top: 1rem; text-align: center; color: var(--text2); font-size: 0.9rem; }

/* CAPTCHA */
.captcha-box { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.captcha-image { border-radius: var(--radius); border: 1px solid var(--border); height: 50px; }
.captcha-actions { display: flex; flex-direction: column; gap: 0.3rem; }
.captcha-actions button, .captcha-actions a { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0; }

/* === PROFIL === */
.profil-container { max-width: 800px; }
.profil-header { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 2.5rem; }
.profil-avatar-zone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.profil-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); }
.profil-info h1 { margin-bottom: 0.5rem; }
.bio { color: var(--text2); margin-bottom: 1rem; }
.profil-stats { display: flex; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-value { display: block; font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 0.8rem; color: var(--text2); }
.profil-section { margin-bottom: 2rem; }
.profil-section h2 { font-size: 1.15rem; margin-bottom: 0.8rem; }

/* === TABLES === */
.scores-table, .classement-table { width: 100%; border-collapse: collapse; }
.scores-table th, .classement-table th { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--border); color: var(--text2); font-size: 0.85rem; }
.scores-table td, .classement-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.current-user td { background: rgba(108,99,255,0.1); }
.joueur-link { display: flex; align-items: center; gap: 0.5rem; color: var(--text); }
.joueur-link:hover { color: var(--accent); text-decoration: none; }

/* === CLASSEMENT === */
.classement-container { max-width: 800px; }
.classement-container h1 { margin-bottom: 1.5rem; }
.podium { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.podium-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.5rem; color: var(--text); transition: border-color 0.2s; }
.podium-item:hover { border-color: var(--accent); text-decoration: none; }
.podium-1 { border-color: var(--gold); }
.podium-2 { border-color: var(--silver); }
.podium-3 { border-color: var(--bronze); }
.podium-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* === PAGINATION === */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; color: var(--text2); }

/* === PARTIES LIST === */
.parties-list { list-style: none; }
.parties-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.parties-list small { color: var(--text2); margin-left: auto; }

/* === DIVERS === */
.empty { color: var(--text2); font-style: italic; }

/* === FOOTER === */
.footer { text-align: center; padding: 2rem; color: var(--text2); font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 3rem; }

/* === GAME DETAIL / PLAYER === */
.game-detail { max-width: 1100px; }
.game-hero-card {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(108,99,255,0.14), rgba(255,107,107,0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  margin-bottom: 2rem;
}
.game-cover img, .game-cover-placeholder {
  width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-lg);
  background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 4rem;
}
.game-meta h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.game-meta p { color: var(--text2); margin-bottom: 1rem; }
.game-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1rem 0; }
.score-note { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; }
.score-note.warning { border-color: rgba(255, 215, 0, 0.5); color: var(--gold); }
.game-play-zone { margin-bottom: 2rem; }
.play-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.play-header h2 { font-size: 1.3rem; }
.game-frame {
  width: 100%; height: min(78vh, 760px); min-height: 520px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #000; box-shadow: var(--shadow);
}
.integration-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem;
}
.integration-card pre {
  overflow-x: auto; background: #080812; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.8rem; margin: 0.7rem 0; color: #dce4ff;
}
.small-muted, .page-intro { color: var(--text2); font-size: 0.9rem; }
.checkbox-group label { display: flex; align-items: center; gap: 0.55rem; color: var(--text); }
.checkbox-group input { width: auto; }
@media (max-width: 760px) {
  .game-hero-card { grid-template-columns: 1fr; }
  .play-header { align-items: flex-start; flex-direction: column; }
  .game-frame { min-height: 480px; height: 72vh; }
  .navbar { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.75rem; }
  .navbar-links { flex-wrap: wrap; gap: 0.75rem; }
}

/* === V2 ARCADE === */
.eyebrow{display:inline-block;color:#9aa3ff;text-transform:uppercase;font-size:.78rem;font-weight:800;letter-spacing:.12em;margin-bottom:.4rem}.hero-v2{display:grid;grid-template-columns:1.5fr minmax(220px,.7fr);gap:1.5rem;text-align:left;align-items:center;background:linear-gradient(135deg,rgba(108,99,255,.16),rgba(255,107,107,.08));border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem;margin-bottom:2rem}.daily-game{display:flex;flex-direction:column;gap:.5rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg);padding:1.2rem;color:var(--text);box-shadow:var(--shadow)}.daily-game:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px)}.daily-game small{color:var(--gold);font-weight:800;text-transform:uppercase}.daily-game strong{font-size:1.4rem}.daily-game span{color:var(--accent)}.search-panel{display:flex;gap:.7rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.8rem;margin-bottom:1rem}.search-panel input,.rating-form select{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.65rem .9rem}.category-row{display:flex;flex-wrap:wrap;gap:.6rem}.category-chip,.tab{display:inline-flex;align-items:center;gap:.35rem;background:var(--card);border:1px solid var(--border);border-radius:999px;color:var(--text2);padding:.45rem .85rem}.category-chip:hover,.tab:hover{text-decoration:none;border-color:var(--accent);color:var(--text)}.category-chip.active,.tab.active{background:rgba(108,99,255,.18);border-color:var(--accent);color:#fff}.category-chip small{background:rgba(255,255,255,.1);border-radius:999px;padding:.05rem .35rem}.compact-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}.card-tags span{font-size:.72rem;color:#dfe4ff;background:rgba(108,99,255,.16);border:1px solid rgba(108,99,255,.28);border-radius:999px;padding:.15rem .5rem}.card-tags.big span{font-size:.82rem}.game-card-stats{display:flex;gap:.75rem;color:var(--text2);font-size:.82rem;margin-bottom:.8rem}.rating-form{display:flex;gap:.45rem}.tabs{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.4rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem;text-align:center}.stat-card strong{display:block;font-size:2.3rem;color:var(--accent);line-height:1}.stat-card span{color:var(--text2)}.big-feed li{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;margin-bottom:.55rem}.badges-row{display:flex;flex-wrap:wrap;gap:.5rem}.badge-chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.35);border-radius:999px;padding:.35rem .7rem;color:var(--gold);font-weight:700}.navbar-links{row-gap:.5rem}@media(max-width:780px){.hero-v2{grid-template-columns:1fr;text-align:center}.search-panel{flex-direction:column}.main-content{padding:1rem}.hero{padding:2rem 1rem}.navbar{position:relative}.navbar-links{font-size:.9rem}}