:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #252836;
  --border: #2e3147;
  --accent: #4f8ef7;
  --accent2: #7c5cf7;
  --text: #e8eaf0;
  --text2: #8b90a7;
  --black-cell: #0a0c12;
  --correct: #3ecf7a;
  --error: #f74f4f;
  --radius: 6px;
  --cell: 38px;
  --nav-h: 52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* ── NAV ──────────────────────────────────────────────────────────────────── */
nav {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.5rem; height: var(--nav-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
}
nav .logo { font-weight: 800; font-size: 1.1rem; color: var(--accent); text-decoration: none; }
nav a { color: var(--text2); text-decoration: none; font-size: .9rem; transition: color .15s; }
nav a:hover, nav a.active { color: var(--text); }
nav .spacer { flex: 1; }
nav .user-badge { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text2); }
nav .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Burger */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: .25rem; color: var(--text2); }
.nav-links   { display: contents; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.page { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* ── AUTH ─────────────────────────────────────────────────────────────────── */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 2rem; width: 360px; max-width: 95vw;
}
.auth-card h1 { font-size: 1.4rem; margin-bottom: .25rem; }
.auth-card p  { color: var(--text2); font-size: .9rem; margin-bottom: 1.5rem; }
.tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.tab-btn {
  flex: 1; padding: .5rem; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text2); cursor: pointer; font-size: .9rem; transition: all .15s;
}
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── FORM ─────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: .8rem; color: var(--text2); margin-bottom: .35rem; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: .55rem .75rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: .9rem;
  outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; font-family: inherit; }

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: var(--radius);
  font-size: .9rem; cursor: pointer; border: 1px solid transparent;
  transition: all .15s; font-weight: 500; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { opacity: .88; }
.btn-ghost  { background: transparent; border-color: var(--border); color: var(--text2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--text2); color: var(--text); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover:not(:disabled) { opacity: .88; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-full { width: 100%; justify-content: center; }

.error-msg { color: var(--error); font-size: .82rem; margin-top: .5rem; }

/* ── VIES ─────────────────────────────────────────────────────────────────── */
.lives-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .85rem;
}
.hearts { display: flex; gap: .2rem; font-size: 1.1rem; }
.heart-full  { color: var(--error); }
.heart-empty { color: var(--border); }
.lives-out-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 150; /* sous la nav (z-index: 200) */ gap: 1rem; text-align: center;
  top: var(--nav-h); /* commence sous la nav */
}
.lives-out-overlay h2 { font-size: 1.5rem; }
.lives-out-overlay p  { color: var(--text2); max-width: 320px; }

/* ── GRILLE ───────────────────────────────────────────────────────────────── */
.grid-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.grid-layout { display: grid; gap: 2px; }
.cell {
  width: var(--cell); height: var(--cell);
  display: flex; align-items: center; justify-content: center;
  position: relative; border-radius: 3px;
  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  user-select: none;
}
.cell-letter {
  background: var(--surface2); border: 1.5px solid var(--border);
  cursor: pointer; transition: border-color .1s, background .1s;
}
.cell-letter:hover  { border-color: var(--accent); }
.cell-letter.active { border-color: var(--accent); background: #1e2a40; }
.cell-letter.filled { color: var(--text); }
.cell-letter.correct { border-color: var(--correct); color: var(--correct); }
.cell-letter.word-active { background: #1a2035; }
.cell-letter.no-lives { cursor: not-allowed; opacity: .6; }
.cell-black { background: var(--black-cell); }

/* Séparateur mots fléchés (remplace les cases noires) */
.cell-def {
  background: #090c14;
  border: 1px solid #161925;
  cursor: default;
}

.cell-num {
  position: absolute; top: 2px; left: 3px;
  font-size: .5rem; font-weight: 600; color: var(--text2);
}

/* Badge flèche sur la 1ère case lettre d'un mot (mots fléchés) */
.word-arrow {
  position: absolute; top: 2px; right: 3px;
  font-size: 9px; line-height: 1;
  color: var(--accent); font-weight: 900;
  pointer-events: none;
}
.word-arrow.both { font-size: 10px; }

/* Ancienne cellule définition (compatibilité crossword) */
.cell-clue {
  background: #0e1520; border: 1px solid var(--border);
  font-size: .42rem; line-height: 1.2;
  color: #a0b4cc; padding: 2px;
  text-align: center; overflow: hidden;
  cursor: default; flex-direction: column; gap: 1px;
}
.cell-clue.dual { padding: 1px; font-size: .38rem; }
.cell-clue .clue-line {
  display: flex; align-items: center; gap: 1px;
  justify-content: center; width: 100%;
}
.cell-clue .clue-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
.cell-clue .arrow { font-size: .75rem; color: var(--accent); flex-shrink: 0; }

#hidden-input { position: fixed; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* ── CLUE BAR STICKY (mobile fléché) ─────────────────────────────────────── */
.sticky-clue-bar {
  position: sticky; top: var(--nav-h); z-index: 100;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .6rem 1rem; font-size: .88rem; display: none;
  align-items: center; gap: .5rem;
}
.sticky-clue-bar.visible { display: flex; }
.sticky-clue-arrow { font-size: 1rem; color: var(--accent); flex-shrink: 0; }

/* ── PANEL DÉFINITIONS ────────────────────────────────────────────────────── */
.game-wrap { display: flex; gap: 1.5rem; align-items: flex-start; }
.clues-panel {
  flex: 1; min-width: 220px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem;
}
.clues-panel h3 { font-size: .85rem; color: var(--text2); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.clue-list  { list-style: none; }
.clue-item  {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .35rem .4rem; border-radius: 4px; cursor: pointer;
  font-size: .82rem; transition: background .1s; margin-bottom: 2px;
}
.clue-item:hover, .clue-item.active { background: var(--surface2); }
.clue-item.done { opacity: .45; text-decoration: line-through; }
.clue-num { font-weight: 700; color: var(--accent); min-width: 20px; }

/* ── PROGRESS BAR ─────────────────────────────────────────────────────────── */
.progress-bar { height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; margin-bottom: 1rem; }
.progress-fill { height: 100%; background: var(--accent); transition: width .3s; }

/* ── STATS ────────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; text-align: center; }
.stat-card .val { font-size: 2rem; font-weight: 800; color: var(--accent); }
.stat-card .lbl { font-size: .78rem; color: var(--text2); margin-top: .2rem; }
.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard th { text-align: left; font-size: .78rem; color: var(--text2); padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.leaderboard td { padding: .5rem .75rem; font-size: .88rem; border-bottom: 1px solid var(--border); }
.leaderboard tr:last-child td { border-bottom: none; }
.rank { font-weight: 700; color: var(--text2); }
.rank-1 { color: #f7c84f; } .rank-2 { color: #b0b8c8; } .rank-3 { color: #c87a4f; }

/* ── ARCHIVES ─────────────────────────────────────────────────────────────── */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.archive-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem; cursor: pointer; transition: border-color .15s;
}
.archive-card:hover { border-color: var(--accent); }
.archive-card .arc-date { font-size: .8rem; color: var(--text2); }
.archive-card .arc-pct  { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.archive-card .arc-status { display: inline-block; font-size: .7rem; padding: .15rem .5rem; border-radius: 20px; margin-top: .3rem; }
.arc-status.completed { background: #1e3a2a; color: var(--correct); }
.arc-status.active    { background: #1a2035; color: var(--accent); }
.arc-status.expired   { background: #2a1e1e; color: var(--error); }

/* ── ADMIN ────────────────────────────────────────────────────────────────── */
.admin-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem; }
.section-title { font-size: .85rem; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.search-bar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.pagination { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; font-size: .85rem; color: var(--text2); }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.words-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.words-table th { text-align: left; color: var(--text2); font-size: .75rem; padding: .5rem; border-bottom: 1px solid var(--border); }
.words-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.words-table tr:last-child td { border-bottom: none; }
.words-table tr.blacklisted { opacity: .4; }

/* ── CARTES DÉFINITIONS (dictionnaire admin) ──────────────────────────────── */
.defs-list { display: flex; flex-direction: column; gap: .3rem; }
.def-card {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .6rem;
  transition: border-color .15s;
}
.def-card:hover { border-color: var(--text2); }
.def-text { flex: 1; font-size: .83rem; color: var(--text2); line-height: 1.4; }
.def-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.add-def-row { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; }
.add-def-input { flex: 1; }

.badge { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 10px; }
.badge-llm      { background: #2a1e3a; color: var(--accent2); }
.badge-manual   { background: #1e2a1e; color: var(--correct); }
.badge-static   { background: #1e2535; color: #8ab8d0; }
.badge-promoted { background: #2a2010; color: #f7c84f; }
.badge-special  { background: #2a2010; color: #f7c84f; }
.badge-crossword{ background: #1e2a35; color: #4fc8f7; }
.badge-flechee  { background: #1e2535; color: var(--accent2); }

.star { color: #f7c84f; font-size: .9rem; }

/* ── MODAL ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; backdrop-filter: blur(4px);
}
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem; width: 480px; max-width: 95vw;
}
.modal h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* ── TOAST ────────────────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: .5rem; z-index: 500; }
.toast {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: .65rem 1rem; font-size: .85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); animation: slideIn .2s ease;
}
.toast.ok  { border-left: 3px solid var(--correct); }
.toast.err { border-left: 3px solid var(--error); }
@keyframes slideIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ── RESPONSIVE MOBILE ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --cell: 28px; }
  .page { padding: .75rem; }

  /* Burger nav */
  .nav-burger { display: flex; align-items: center; justify-content: center; margin-left: auto; }
  .nav-links {
    display: none; position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--surface); flex-direction: column;
    padding: 1.5rem; gap: 1.25rem; z-index: 150;
    border-top: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-links span { font-size: 1.1rem; }
  .nav-links .user-badge { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
  .nav-links .spacer { display: none; }

  /* Grille scrollable */
  .game-wrap { flex-direction: column; }
  .grid-scroll-wrap { width: 100%; }

  /* Panel clues : liste visible, pas de double scroll */
  .clues-panel {
    max-width: 100%; min-width: 0;
    max-height: none; overflow-y: visible;
  }

  /* Admin : tables scrollables */
  .words-table { font-size: .75rem; }
  .admin-tabs { gap: .35rem; }
  .admin-tabs .tab-btn { font-size: .78rem; padding: .4rem .6rem; }
}