/* Trivia — Mode Expert (design system Zikof : Pop brutaliste, aplats, ombres dures) */

.trivia-mode-selector {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 18px;
}
.trivia-mode-btn {
  flex: 0 1 180px;
  padding: 10px 18px;
  border: 2px solid #fbf2dd;
  border-radius: 999px;
  background: #241f33;
  color: #fbf2dd;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  transition: transform .1s, box-shadow .1s, background .15s;
}
.trivia-mode-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.trivia-mode-btn.active { background: #2b2bff; color: #fff; }
.trivia-mode-btn[data-mode="expert"].active { background: #ffd23f; color: #17151f; }

/* En mode Expert : on masque tout le contenu classique, on ne garde que le sélecteur + le bloc expert */
body.expert-on .game-container > .container > *:not(#trivia-mode-selector):not(#expert-root):not(#survie-root) {
  display: none !important;
}
/* Modales du mode classique (hors .container) : ne doivent pas se superposer à l'Expert.
   L'onboarding ouvre #help-modal au 1er passage. Masquage réversible (retour Classique = OK). */
body.expert-on #help-modal,
body.expert-on #end-game-modal,
body.expert-on .zko-overlay { display: none !important; }
#expert-root { display: none; }
body.expert-on #expert-root { display: block; max-width: 640px; margin: 0 auto; width: 100%; }

/* Mode Survie 💀 : même logique que le mode Expert. */
body.survie-on .game-container > .container > *:not(#trivia-mode-selector):not(#survie-root) { display: none !important; }
body.survie-on #help-modal,
body.survie-on #end-game-modal,
body.survie-on .zko-overlay { display: none !important; }
/* Texte clair sur le fond sombre du jeu (comme .question-text), foncé en thème clair. */
#survie-root { display: none; color: #fbf2dd; }
[data-theme="light"] #survie-root { color: #1a1a1a; }
body.survie-on #survie-root { display: block; max-width: 640px; margin: 0 auto; width: 100%; }
.sv-screen[hidden] { display: none; }
.sv-badge { font-weight: 700; opacity: .85; margin-bottom: 6px; }
.sv-rule { opacity: .8; margin-bottom: 18px; }
.sv-hud { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 14px; }
.sv-timer { font-variant-numeric: tabular-nums; }
.sv-badge-cat { opacity: .75; font-size: .85rem; margin-bottom: 6px; }
.sv-question { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.2rem, 3.5vw, 1.6rem); font-weight: 700; line-height: 1.4; margin: 6px 0 4px; }
.sv-answers { display: grid; gap: 10px; margin-top: 14px; }
/* Boutons-réponses : fond clair -> texte foncé dans les deux thèmes. */
.sv-answer { width: 100%; color: #1a1a1a; }
#sv-intro, #sv-over { text-align: center; }
.sv-over-emoji { font-size: 48px; }
.sv-over-title { margin: 6px 0; }
.sv-over-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.xp-screen { animation: xpFade .3s ease; }
@keyframes xpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.xp-card-box {
  background: #241f33;
  border: 2px solid #fbf2dd;
  border-radius: 18px;
  box-shadow: 5px 5px 0 #000;
  padding: 26px 24px;
  color: #fbf2dd;
  text-align: center;
  position: relative;
}

/* Croix de fermeture (résultats) */
.xp-close {
  position: absolute; top: 10px; right: 12px;
  width: 38px; height: 38px; line-height: 1;
  display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 800;
  background: #17151f; color: #fbf2dd;
  border: 2px solid #fbf2dd; border-radius: 10px;
  box-shadow: 3px 3px 0 #000; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.xp-close:hover { background: #2b2bff; }
.xp-close:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }
.xp-like-mount { margin-top: 16px; display: flex; justify-content: center; }

/* Intro */
.xp-expert-badge {
  display: inline-block;
  background: #ffd23f;
  color: #17151f;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 14px;
}
.xp-title { font-size: 28px; font-weight: 900; margin: 0 0 6px; letter-spacing: -.5px; }
.xp-title span { color: #ffd23f; }
.xp-subtitle { color: #b9b3c9; font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.xp-rules {
  text-align: left; display: flex; flex-direction: column; gap: 10px;
  background: #17151f; border: 2px solid rgba(251,242,221,.25); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 20px;
}
.xp-rule { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #e7e1d3; }
.xp-rule-ic { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }

.xp-btn-primary {
  background: #2b2bff; color: #fff; border: 2px solid #fbf2dd; border-radius: 12px;
  padding: 13px 28px; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 4px 4px 0 #000; transition: transform .1s, box-shadow .1s;
}
.xp-btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.xp-btn-ghost {
  background: transparent; color: #fbf2dd; border: 2px solid #fbf2dd; border-radius: 12px;
  padding: 13px 24px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 4px 4px 0 #000;
  transition: transform .1s, box-shadow .1s;
}
.xp-btn-ghost:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }

/* Jeu */
.xp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.xp-progress { font-size: 14px; color: #b9b3c9; }
.xp-progress strong { color: #fbf2dd; font-size: 17px; }
.xp-timer { position: relative; width: 46px; height: 46px; }
.xp-timer svg { transform: rotate(-90deg); }
.xp-timer-bg { fill: none; stroke: rgba(251,242,221,.2); stroke-width: 4; }
.xp-timer-fg { fill: none; stroke: #2b2bff; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .9s linear, stroke .3s; }
.xp-timer-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fbf2dd; }
.xp-score-hidden {
  background: #17151f; border: 2px solid rgba(251,242,221,.25); color: #b9b3c9;
  border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.xp-dots { display: flex; gap: 5px; margin-bottom: 14px; }
.xp-dot { flex: 1; height: 6px; border-radius: 3px; background: rgba(251,242,221,.18); transition: background .3s; }
.xp-dot.answered { background: #ffd23f; }
.xp-dot.current { background: #ff5da2; }

.xp-question-card { text-align: left; }
.xp-q-badge {
  display: inline-block; background: #17151f; border: 2px solid rgba(251,242,221,.25);
  color: #ffd23f; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 800; margin-bottom: 12px;
}
.xp-qtext { font-size: 18px; line-height: 1.5; color: #fbf2dd; margin: 0 0 18px; font-weight: 600; }
.xp-answer-wrap { display: flex; gap: 10px; }
.xp-input {
  flex: 1; border: 2px solid #fbf2dd; border-radius: 12px; padding: 12px 15px; font-size: 15px;
  background: #17151f; color: #fbf2dd; outline: none; transition: border-color .2s, background .2s;
}
.xp-input::placeholder { color: #8e889e; }
.xp-input.has-answer { border-color: #ffd23f; }
.xp-input:focus { border-color: #2b2bff; }
.xp-question-card.timed-out { border-color: #ff5da2; }
.xp-question-card.timed-out .xp-input:disabled { color: #8e889e; border-color: #ff5da2; }
.xp-btn-next {
  background: #ffd23f; color: #17151f; border: 2px solid #000; border-radius: 12px;
  padding: 12px 18px; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap;
  box-shadow: 3px 3px 0 #000; transition: transform .1s, box-shadow .1s;
}
.xp-btn-next:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* Résultats */
.xp-results-title { font-size: 24px; font-weight: 900; margin: 0 0 6px; }
.xp-results-msg { color: #b9b3c9; font-size: 15px; margin: 0 0 18px; }
.xp-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.xp-stat { background: #17151f; border: 2px solid rgba(251,242,221,.2); border-radius: 12px; padding: 12px 6px; }
.xp-stat-val { display: block; font-size: 24px; font-weight: 900; color: #ffd23f; }
.xp-stat-lbl { font-size: 11px; color: #b9b3c9; text-transform: uppercase; letter-spacing: .4px; }
.xp-reveal-wrap { overflow-x: auto; margin-bottom: 18px; }
.xp-reveal-table { width: 100%; border-collapse: collapse; text-align: left; }
.xp-reveal-table th {
  font-size: 11px; color: #8e889e; text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 8px; border-bottom: 2px solid rgba(251,242,221,.2); white-space: nowrap;
}
.xp-reveal-row { opacity: 0; animation: xpRow .4s ease forwards; }
@keyframes xpRow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.xp-reveal-row td { padding: 9px 8px; border-bottom: 1px solid rgba(251,242,221,.12); font-size: 13px; vertical-align: top; color: #e7e1d3; }
.xp-rv-num { color: #8e889e; width: 22px; }
.xp-rv-q { max-width: 220px; }
.xp-rv-user.ok { color: #16c08a; font-weight: 700; }
.xp-rv-user.ko { color: #ff5da2; font-style: italic; }
.xp-rv-answer { font-weight: 800; color: #fbf2dd; }
.xp-rv-pts { text-align: right; font-weight: 800; white-space: nowrap; }
.xp-rv-pts.ok { color: #16c08a; }
.xp-rv-pts.ko { color: #8e889e; }
.xp-results-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.xp-share-toast { font-size: 12px; color: #16c08a; min-height: 16px; margin-top: 8px; }

/* ---- Multijoueur ---- */
.xp-intro-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.xp-join-row { display: flex; gap: 8px; margin-top: 12px; }
.xp-join-row .xp-input { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-weight: 800; }
.xp-room-code {
  font-size: 38px; font-weight: 900; letter-spacing: 8px; color: #ffd23f;
  background: #17151f; border: 2px solid #fbf2dd; border-radius: 12px;
  padding: 12px; margin: 6px 0 14px; box-shadow: 4px 4px 0 #000;
}
.xp-players { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.xp-player {
  background: #17151f; border: 2px solid rgba(251,242,221,.25); border-radius: 10px;
  padding: 8px 12px; font-weight: 700; color: #fbf2dd; text-align: left;
}
.xp-lobby-err { color: #ff5da2; font-size: 13px; min-height: 16px; margin: 8px 0; }
#xp-lobby-back { margin-top: 6px; }

.xp-opponents { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.xp-opp { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #b9b3c9; }
.xp-opp-name { flex: 0 0 90px; text-align: left; color: #fbf2dd; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-opp-bar { flex: 1; height: 8px; background: rgba(251,242,221,.15); border: 1px solid rgba(251,242,221,.25); border-radius: 999px; overflow: hidden; }
.xp-opp-bar i { display: block; height: 100%; background: #ff5da2; transition: width .4s ease; }
.xp-opp-n { flex: 0 0 42px; text-align: right; }

.xp-ranking-box {
  background: #17151f; border: 2px solid #fbf2dd; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; box-shadow: 4px 4px 0 #000;
}
.xp-ranking-title { font-size: 15px; font-weight: 800; margin: 0 0 10px; color: #ffd23f; }
.xp-ranking { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.xp-rank-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 7px 10px; border-radius: 8px; background: rgba(251,242,221,.06); color: #e7e1d3;
}
.xp-rank-row.me { background: #2b2bff; color: #fff; font-weight: 800; }

@media (max-width: 520px) {
  .xp-reveal-table { font-size: 12px; }
  .xp-rv-q { max-width: 120px; word-break: break-word; }
  .xp-answer-wrap { flex-wrap: wrap; }
  .xp-btn-next { width: 100%; }
}