/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:    #f87171;
  --yellow: #fbbf24;
  --board:  #6366f1;
  --board2: #4f46e5;
  --accent: #a5b4fc;
  --bg:     #0a0c18;
  --card:   #131727;
  --card2:  #1c2040;
  --text:   #e2e8f0;
  --muted:  #64748b;
  --border: rgba(99,102,241,.2);
  /* Accent or : reserve aux reperes de hierarchie (en-tete d'affiche, rang 1). */
  --gold:   #fcd34d;
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --glow:   rgba(99,102,241,.45);
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0,0,0,.5);
  /* Mouvement : une seule famille d'easing et de durees pour tout le site. */
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .14s;
  --dur:      .25s;
  /* Elevation graduee + matiere « verre poli » (liseré de lumiere en haut de carte). */
  --elev-1:   0 2px 8px rgba(0,0,0,.3);
  --elev-2:   0 8px 24px rgba(0,0,0,.42);
  --elev-3:   0 16px 48px rgba(0,0,0,.55);
  --hairline: rgba(255,255,255,.07);
  --shine:    linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  --cell:   min(11vw, 56px);
  --chess-cell: min(10.5vw, 52px);
  --ttt-cell:   min(26vw, 110px);
}

/* Aucun defilement horizontal (garde-fou, ex. transitions d'ecran).
   clip = bloque tout (meme programmatique) ; hidden = repli navigateurs anciens. */
html { overflow-x: hidden; overflow-x: clip; }
html, body {
  height: 100%;
  font-family: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 75% 55% at 12% 8%,  rgba(99,102,241,.13) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 88% 88%,  rgba(129,140,248,.09) 0%, transparent 55%),
    radial-gradient(circle, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  background-attachment: fixed;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
body { overflow-x: hidden; overflow-x: clip; } /* coupe le debordement des transitions d'ecran a la source */

/* ── Screens ── */
html.restoring #screen-landing,
html.restoring #news-card { display: none !important; }

html.restoring[data-restore="home"]          #screen-home,
html.restoring[data-restore="game"]          #screen-game,
html.restoring[data-restore="waiting"]       #screen-waiting,
html.restoring[data-restore="quiz-hub"]     #screen-quiz-hub,
html.restoring[data-restore="trivia-home"]   #screen-trivia-home,
html.restoring[data-restore="trivia-game"]   #screen-trivia-game,
html.restoring[data-restore="trivia-waiting"] #screen-trivia-waiting,
html.restoring[data-restore="events"]        #screen-events,
html.restoring[data-restore="snake"]         #screen-snake,
html.restoring[data-restore="arcade"]        #screen-arcade,
html.restoring[data-restore="luffy"]         #screen-luffy,
html.restoring[data-restore="feed"]          #screen-feed,
html.restoring[data-restore="ideas"]         #screen-ideas,
html.restoring[data-restore="wordle"]        #screen-wordle,
html.restoring[data-restore="shop"]          #screen-shop,
html.restoring[data-restore="read"]          #screen-read { display: flex !important; }

.screen[data-restored] { animation: none !important; }

.screen {
  display: none;
  min-height: 100dvh;
  padding: 20px 16px 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.screen.active { display: flex; animation: screenIn .28s cubic-bezier(.16,1,.3,1); }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.game-screen {
  justify-content: flex-start;
  padding-top: 12px;
  gap: 14px;
}

/* ── Logo ── */
.logo { text-align: center; }
.logo-full {
  height: 145px; width: auto; max-width: 480px;
  display: block; margin: 0 auto;
}
h1 {
  font-size: 1.8rem; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(135deg, var(--accent) 0%, #c7d2fe 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.subtitle { color: var(--muted); margin-top: 4px; font-size: .9rem; }

/* ── Game selector ── */
.game-selector {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.game-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  color: var(--text);
}
.game-btn.active {
  border-color: var(--board);
  background: rgba(99,102,241,.12);
  box-shadow: 0 0 16px rgba(99,102,241,.25);
}
.game-btn-icon { font-size: 1.5rem; line-height: 1; }
.game-btn-name { font-size: .72rem; font-weight: 700; color: var(--muted); }
.game-btn.active .game-btn-name { color: var(--accent); }

/* ── Card ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Buttons ── */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--board), var(--board2));
  color: #fff;
  box-shadow: 0 0 20px rgba(99,102,241,.4);
}
.btn-primary:hover {
  box-shadow: 0 0 32px rgba(99,102,241,.65);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(.97) translateY(0); }
.btn-secondary {
  background: var(--card2);
  color: var(--accent);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: rgba(99,102,241,.12); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Bot difficulty row ── */
.bot-label {
  font-size: .8rem;
  color: var(--muted);
  margin: .2rem 0 .4rem;
  text-align: center;
}
.bot-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: .2rem;
}
.bot-btn {
  flex: 1;
  font-size: .82rem;
  padding: .65rem .3rem;
  background: var(--card2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background .2s, transform .1s, box-shadow .2s;
}
.bot-btn:hover {
  background: rgba(99,102,241,.14);
  box-shadow: 0 0 0 2px var(--accent);
}
.bot-btn[data-diff="easy"]   { border-color: rgba(22,163,74,.45); }
.bot-btn[data-diff="medium"] { border-color: rgba(234,88,12,.45); }
.bot-btn[data-diff="hard"]   { border-color: rgba(220,38,38,.45); }
.bot-btn[data-diff="easy"]:hover   { background: rgba(22,163,74,.12); box-shadow: 0 0 0 2px #16a34a; }
.bot-btn[data-diff="medium"]:hover { background: rgba(234,88,12,.12); box-shadow: 0 0 0 2px #ea580c; }
.bot-btn[data-diff="hard"]:hover   { background: rgba(220,38,38,.12); box-shadow: 0 0 0 2px #dc2626; }

/* ── Divider ── */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .85rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07);
}

/* ── Inputs ── */
.join-group { display: flex; flex-direction: column; gap: 10px; }

#input-code, #input-trivia-code {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--card2);
  transition: border-color .2s, box-shadow .2s;
}
#input-code:focus, #input-trivia-code:focus {
  outline: none; border-color: var(--board); box-shadow: 0 0 12px rgba(99,102,241,.25);
}

#input-name, #input-trivia-name, #fh-name {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .95rem;
  color: var(--text);
  background: var(--card2);
  transition: border-color .2s, box-shadow .2s;
}
#input-name:focus, #input-trivia-name:focus, #fh-name:focus {
  outline: none; border-color: var(--board); box-shadow: 0 0 12px rgba(99,102,241,.2);
}
#input-name::placeholder, #input-trivia-name::placeholder, #fh-name::placeholder { color: var(--muted); }

/* ── Error ── */
.error-msg { color: var(--red); font-size: .875rem; text-align: center; font-weight: 500; }
.pseudo-warning { color: #f59e0b; font-size: .82rem; text-align: center; font-weight: 500; margin: .25rem 0 0; }

/* ── Waiting ── */
.waiting-card { text-align: center; }
.waiting-game-name { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }

.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(99,102,241,.15);
  border-top-color: var(--board);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.code-display {
  font-size: 2.5rem; font-weight: 900; letter-spacing: 10px;
  color: var(--accent); background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; margin: 8px 0;
}
.hint { font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* ── Boutons Copier / Partager (salle d'attente) ── */
.share-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 4px 0 6px;
}
.share-row .btn { flex: 1 1 auto; min-width: 140px; }

/* ── Game header ── */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  padding: 4px 0;
}
.player-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 8px;
  border-radius: 8px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.player-badge.active {
  background: rgba(99,102,241,.15);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(99,102,241,.2);
}
.player-badge.you::after { content: ' (moi)'; font-weight: 400; opacity: .7; }
.player-icon { font-size: 1rem; }
.game-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.turn-text { font-size: .78rem; font-weight: 600; color: var(--muted); text-align: center; }
.btn-quit {
  font-size: .7rem;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(248,113,113,.4);
  background: rgba(248,113,113,.08);
  color: #f87171;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn-quit:hover  { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.7); }
.btn-quit:active { transform: scale(.94); }

/* ── Board area ── */
#board-area { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 6px; }

/* ══════════════════════════════════════════
   PUISSANCE 4
══════════════════════════════════════════ */
.col-arrows {
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  gap: 3px;
}
.col-btn {
  height: 34px;
  border: none; background: transparent;
  cursor: pointer; font-size: 1rem; color: var(--accent);
  border-radius: 8px; transition: background .15s;
}
.col-btn:hover  { background: rgba(99,102,241,.15); }
.col-btn:active { background: rgba(99,102,241,.28); }
.col-btn:disabled { color: rgba(255,255,255,.15); cursor: not-allowed; }

.c4-board {
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  grid-template-rows:    repeat(6, var(--cell));
  gap: 3px;
  background: var(--board);
  padding: 6px;
  border-radius: 14px;
  box-shadow: 0 6px 32px rgba(99,102,241,.5), 0 0 60px rgba(99,102,241,.12);
}
.c4-cell { border-radius: 50%; background: #060810; transition: background .18s; }
.c4-cell.red    { background: var(--red);    animation: drop .18s ease-out; box-shadow: 0 0 10px rgba(248,113,113,.55); }
.c4-cell.yellow { background: var(--yellow); animation: drop .18s ease-out; box-shadow: 0 0 10px rgba(251,191,36,.45); }
.c4-cell.win    { box-shadow: 0 0 0 3px rgba(255,255,255,.55) inset; }

@keyframes drop {
  from { transform: translateY(-40px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ══════════════════════════════════════════
   TIC TAC TOE
══════════════════════════════════════════ */
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, var(--ttt-cell));
  grid-template-rows:    repeat(3, var(--ttt-cell));
  gap: 0;
  background: var(--board);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(99,102,241,.5), 0 0 60px rgba(99,102,241,.12);
}
.ttt-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ttt-cell) * .52);
  font-weight: 900;
  cursor: pointer;
  background: var(--card);
  border: 3px solid var(--board);
  transition: background .15s;
  user-select: none;
  line-height: 1;
}
.ttt-cell:hover:not(.played) { background: rgba(99,102,241,.15); }
.ttt-cell.played   { cursor: default; }
.ttt-cell.ttt-r    { color: var(--red); }
.ttt-cell.ttt-y    { color: var(--yellow); }
.ttt-cell.win-cell { background: rgba(99,102,241,.22); }

/* ══════════════════════════════════════════
   ÉCHECS
══════════════════════════════════════════ */
.chess-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chess-coords-row {
  display: grid;
  grid-template-columns: 16px repeat(8, var(--chess-cell)) 16px;
  width: calc(var(--chess-cell) * 8 + 32px);
}
.chess-coord { font-size: .6rem; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.chess-rank-col { display: grid; grid-template-rows: repeat(8, var(--chess-cell)); }
.chess-board-row { display: grid; grid-template-columns: 16px calc(var(--chess-cell) * 8) 16px; align-items: center; }

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, var(--chess-cell));
  grid-template-rows:    repeat(8, var(--chess-cell));
  border: 2px solid #8b6914;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(0,0,0,.6);
}

/* ── Dames (checkers) ──────────────────────────────────────────────────────── */
.ck-board {
  --ck-cell: 46px;
  display: grid;
  grid-template-columns: repeat(8, var(--ck-cell));
  grid-template-rows:    repeat(8, var(--ck-cell));
  border: 3px solid #5a3b1e; border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 32px rgba(0,0,0,.6); margin: 0 auto;
}
@media (max-width: 480px) { .ck-board { --ck-cell: 40px; } }
@media (max-width: 360px) { .ck-board { --ck-cell: 36px; } }
.ck-sq { display: flex; align-items: center; justify-content: center; position: relative; }
.ck-sq.light { background: #e9e2c8; }
.ck-sq.dark  { background: #7a5230; cursor: pointer; }
.ck-sq.last-move { background: #9a7038; }
.ck-sq.selected { box-shadow: inset 0 0 0 3px #6366f1; }
.ck-sq.must     { box-shadow: inset 0 0 0 3px #fbbf24; }
.ck-sq.can-move::after {
  content: ''; position: absolute; width: 32%; height: 32%; border-radius: 50%;
  background: rgba(99,102,241,.65);
}
.ck-piece {
  width: 76%; height: 76%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--ck-cell) * .48); line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 -3px 6px rgba(0,0,0,.35), inset 0 3px 5px rgba(255,255,255,.25);
}
.ck-red    { background: radial-gradient(circle at 35% 30%, #ff7a7a, #c0392b); color: #fff; }
.ck-yellow { background: radial-gradient(circle at 35% 30%, #ffe066, #d4a017); color: #5b4a00; }
.ck-king { box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.55); }
.chess-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--chess-cell) * .72);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color .1s;
}
.chess-sq.light { background: #f0d9b5; }
.chess-sq.dark  { background: #b58863; }
.chess-sq.selected.light { background: #7fc97f; }
.chess-sq.selected.dark  { background: #5aa85a; }
.chess-sq.can-move::after {
  content: '';
  position: absolute;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  pointer-events: none;
}
.chess-sq.can-move.has-piece::after {
  width: 88%; height: 88%;
  background: transparent;
  border: 4px solid rgba(0,0,0,.25);
  border-radius: 50%;
}
.chess-sq.in-check { background: #e05252 !important; }
.chess-sq.last-move.light { background: #cdd56a; }
.chess-sq.last-move.dark  { background: #aaa23a; }

/* Pièces d'échecs · blanc ivoire contouré sombre, noir marine contouré doré */
.cp-w {
  color: #f5f0d0;
  text-shadow:
    -1px -1px 0 #3a3020,
     1px -1px 0 #3a3020,
    -1px  1px 0 #3a3020,
     1px  1px 0 #3a3020;
  line-height: 1;
  display: block;
}
.cp-b {
  color: #1a1040;
  text-shadow:
    -1px -1px 0 #c8a840,
     1px -1px 0 #c8a840,
    -1px  1px 0 #c8a840,
     1px  1px 0 #c8a840;
  line-height: 1;
  display: block;
}

/* ══════════════════════════════════════════
   PIÈCES DÉCORATIVES
══════════════════════════════════════════ */
.piece { display: inline-block; width: 28px; height: 28px; border-radius: 50%; }
.piece.small { width: 18px; height: 18px; }
.piece.red    { background: var(--red);    box-shadow: 0 2px 8px rgba(248,113,113,.5); }
.piece.yellow { background: var(--yellow); box-shadow: 0 2px 8px rgba(251,191,36,.45); }

/* ── Game status banner ── */
.game-status {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.status-text { font-size: 1.1rem; font-weight: 700; }
.status-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Chat ── */
.chat {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0; }
.chat-title { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.chat-clear { border: none; background: none; color: var(--muted); font-size: .75rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: background .15s, color .15s; }
.chat-clear:hover { background: rgba(248,113,113,.1); color: var(--red); }

.chat-messages {
  height: 160px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.chat-messages:empty::before {
  content: 'Aucun message pour l\'instant…';
  color: var(--muted); font-size: .8rem; text-align: center; margin: auto;
}
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg-mine   { align-self: flex-end;   align-items: flex-end; }
.msg-theirs { align-self: flex-start; align-items: flex-start; }
.msg-bubble { padding: 7px 11px; border-radius: 14px; font-size: .88rem; line-height: 1.4; word-break: break-word; }
.msg-mine   .msg-bubble { background: var(--board); color: #fff; border-bottom-right-radius: 4px; }
.msg-theirs .msg-bubble { background: var(--card2); color: var(--text); border-bottom-left-radius: 4px; }
.msg-meta { font-size: .7rem; color: var(--muted); margin-top: 2px; padding: 0 4px; }

.chat-form { display: flex; border-top: 1px solid rgba(255,255,255,.06); padding: 8px; gap: 8px; }
#chat-input {
  flex: 1;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; font-size: .88rem;
  background: var(--card2); color: var(--text);
  transition: border-color .2s;
}
#chat-input:focus { outline: none; border-color: var(--board); }
.chat-send {
  width: 38px; height: 38px; flex-shrink: 0;
  border: none; border-radius: 8px;
  background: var(--board); color: #fff;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(99,102,241,.4);
}
.chat-send:active { opacity: .75; }

/* ── Overlays ── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 100;
}
.overlay-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  max-width: 320px; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 16px 60px rgba(0,0,0,.7), 0 0 30px rgba(99,102,241,.12);
  animation: screenIn .22s cubic-bezier(.16,1,.3,1);
}
.overlay-icon { font-size: 2.5rem; }

.promo-choices { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.promo-btn {
  width: 66px; height: 66px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card2); font-size: 2rem;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  color: var(--text);
}
.promo-btn:hover { border-color: var(--board); background: rgba(99,102,241,.12); box-shadow: 0 0 14px rgba(99,102,241,.3); }
.promo-btn span  { font-size: .6rem; color: var(--muted); }

/* ── Leaderboard ── */
.lb-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  width: 100%;
  max-width: 380px;
}
.lb-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 1rem; }
.lb-title { font-weight: 700; font-size: .9rem; }
.lb-empty { font-size: .8rem; color: var(--muted); text-align: center; padding: 6px 0; }
.lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .85rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-weight: 700; text-align: center; font-size: .8rem; color: var(--muted); }
.lb-rank.gold   { color: #fbbf24; font-size: 1rem; }
.lb-rank.silver { color: #94a3b8; font-size: 1rem; }
.lb-rank.bronze { color: #f97316; font-size: 1rem; }
.lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.lb-stats { display: flex; gap: 6px; font-size: .75rem; white-space: nowrap; }
.lb-w { color: #4ade80; font-weight: 700; }
.lb-l { color: var(--red); }
.lb-d { color: var(--muted); }
.lb-badge-solo {
  font-size: .65rem; font-weight: 700; padding: 1px 5px;
  border-radius: 4px; background: rgba(99,102,241,.15); color: var(--accent);
  align-self: center;
}

/* ── Cadre News ── */
.news-card {
  position: absolute;
  top: 10px; left: 0;
  z-index: 900;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 12px;
  max-width: 200px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), height .4s cubic-bezier(.16,1,.3,1);
}
.news-card.collapsed {
  transform: translateX(calc(-100% + 44px));
  height: 54px;
}
.news-handle {
  display: flex;
  align-items: center; justify-content: center;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 44px;
  font-size: 1.1rem; line-height: 1;
  background: var(--card2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.news-card:not(.collapsed) .news-handle { display: none; }
body.screen-shop-active #news-card { display: none !important; }
.news-title {
  font-size: .7rem; font-weight: 700;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 4px;
}
.news-msg {
  font-size: .75rem; line-height: 1.4;
  color: var(--text);
}
.news-msg-sep {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(99,102,241,.2);
}
.news-comments { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.news-comment {
  background: rgba(99,102,241,.06);
  border-top: 1px solid rgba(99,102,241,.18);
  border-radius: 7px;
  padding: 6px 9px;
}
.news-comment-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2px;
}
.news-comment-meta strong { font-size: .72rem; color: var(--text); }
.news-comment-meta span   { font-size: .65rem; color: rgba(255,255,255,.4); }
.news-comment-msg {
  font-size: .73rem; line-height: 1.35;
  color: var(--text); margin: 0 0 5px;
  word-break: break-word;
}
.news-like-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .68rem;
  cursor: pointer;
  color: rgba(255,255,255,.45);
  transition: background .12s, border-color .12s, color .12s;
}
.news-like-btn:not([disabled]):hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.5); color: #ef4444; }
.news-like-btn.liked { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #ef4444; cursor: default; }
html.light .news-comment-meta span { color: var(--muted); }
html.light .news-like-btn { color: var(--muted); border-color: rgba(0,0,0,.15); }
.news-star {
  background: rgba(234,179,8,.1);
  border: 1px solid rgba(234,179,8,.35);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: .72rem;
  margin-top: 6px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}
.news-star-badge { display: block; font-weight: 700; color: #eab308; font-size: .68rem; margin-bottom: 2px; }
.news-star-likes { color: #ef4444; }
html.light .news-star { background: rgba(234,179,8,.08); }

/* ── Bouton aide flottant ── */
.btn-help-float {
  position: fixed;
  bottom: 20px; left: 20px;
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: var(--board); color: #fff;
  font-size: 1.1rem; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.6);
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
}
.btn-help-float:hover  { box-shadow: 0 0 32px rgba(99,102,241,.85); }
.btn-help-float:active { transform: scale(.92); }

.btn-lang-float {
  position: fixed;
  bottom: 20px; right: 72px;
  height: 44px;
  padding: 0 12px;
  border-radius: 22px; border: none;
  background: var(--board); color: #fff;
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.5);
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn-lang-float:hover  { box-shadow: 0 0 28px rgba(99,102,241,.8); }
.btn-lang-float:active { transform: scale(.92); }

.btn-snake-float {
  position: fixed;
  bottom: 20px; right: 148px;
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: var(--board); color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.5);
  z-index: 50;
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.btn-snake-float:hover  { box-shadow: 0 0 28px rgba(99,102,241,.8); }
.btn-snake-float:active { transform: scale(.92); }
.btn-snake-float.off    { opacity: .35; }

.btn-theme-float { display: none !important; }
.btn-lang-float  { display: none !important; }
.btn-snake-float { display: none !important; }
.btn-hidden      { display: none !important; }

/* ── Bouton Paramètres ── */
.btn-settings-float {
  position: fixed;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: var(--board); color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.5);
  z-index: 52;
  transition: transform .15s, box-shadow .15s;
}
.btn-settings-float:hover  { box-shadow: 0 0 28px rgba(99,102,241,.8); }
.btn-settings-float:active { transform: scale(.92); }

/* ── Panneau Paramètres ── */
.settings-panel {
  position: fixed;
  top: 68px; right: 16px;
  z-index: 200;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 10px;
}
.settings-panel.hidden { display: none !important; }

.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sp-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  opacity: .85;
}
.sp-toggle {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(99,102,241,.4);
  background: rgba(99,102,241,.12);
  color: var(--text);
  font-size: .8rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.sp-toggle:hover    { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.7); }
.sp-toggle.sp-off   { background: rgba(100,100,100,.12); border-color: rgba(130,130,130,.3); color: var(--muted); }
.sp-toggle.sp-ingame { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.5); color: #4ade80; cursor: default; }

/* Toast « le serpent est en Game » */
.cursor-snake-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(10px);
  background: rgba(16,16,28,.96); border: 1px solid rgba(74,222,128,.45);
  color: #eafff2; border-radius: 12px; padding: 11px 22px;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
  pointer-events: none; z-index: 9999; opacity: 0;
  transition: opacity .2s, transform .2s;
}
.cursor-snake-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Barre de navigation principale (Accueil / Vidéos) ── */
.main-nav {
  position: fixed;
  top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 901;
  display: flex; gap: 4px;
  padding: 4px;
  max-width: calc(100vw - 16px); box-sizing: border-box;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Filet de sécurité : si les onglets ne tiennent vraiment pas, la barre défile
     au lieu d'être coupée aux extrémités. */
  overflow-x: auto; scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-tab { flex-shrink: 0; }
.main-nav.hidden { display: none !important; }
/* La barre de nav reste visible au-dessus de la boutique (z-index 901 > overlay 100)
   pour qu'on puisse toujours revenir a l'accueil ; cliquer un onglet ferme la boutique. */

.nav-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active {
  background: var(--board); color: #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,.5);
}
.nav-tab-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 900px) {
  /* En haut, la barre chevaucherait le compteur Libs et la roue Paramètres
     (des 900px de large, tablettes comprises) : on la place en bas au centre
     (entre les boutons flottants aide/commentaire). */
  .main-nav { top: auto; bottom: 16px; padding: 3px; gap: 3px; }
  .nav-tab  { padding: 7px 12px; font-size: .8rem; gap: 5px; }
  /* Remonte le titre de la vidéo pour qu'il ne passe pas sous la barre du bas. */
  .feed-overlay { padding-bottom: 78px; }
  /* Quand la barre de nav est en bas, on remonte les boutons flottants
     (aide a gauche, chatbot a droite) au-dessus d'elle pour qu'elle ne les masque plus. */
  body.nav-bottom-visible .btn-help-float,
  body.nav-bottom-visible .btn-chatbot-float { bottom: 74px; }
  /* Boutique en pleine page : le dernier article ne doit pas finir sous la barre. */
  body.screen-shop-active .shop-fn-body,
  body.screen-shop-active .shop-fn-detail { padding-bottom: 86px; }
}

/* Très petits écrans : on compacte encore les onglets pour qu'ils tiennent. */
@media (max-width: 400px) {
  .main-nav { gap: 2px; padding: 2px; }
  .nav-tab  { padding: 6px 9px; font-size: .74rem; gap: 4px; }
  .nav-tab-icon { font-size: .9rem; }
}

/* ── Écran Vidéos : feed vertical façon TikTok ── */
.screen-feed {
  padding: 0 !important;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
}
.feed-container {
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;          /* bloque le pull-to-refresh mobile */
  scrollbar-width: none;                    /* Firefox */
  background: #000;
}
.feed-container::-webkit-scrollbar { display: none; } /* WebKit */
.feed-slide {
  position: relative;
  width: 100%;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  overflow: hidden;
}
.feed-video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.feed-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 90px 18px 26px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff;
  pointer-events: none;
}
.feed-overlay-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.35; }
.feed-container.feed-status-mode {
  background: transparent;        /* laisse voir le décor animé du site, plus de grand écran noir */
  display: flex; align-items: center; justify-content: center;
}
.feed-status {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
  padding: 32px 24px;
  max-width: 380px;
}
.feed-status-icon { font-size: 3rem; line-height: 1; }
.feed-status-text {
  margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text);
  font-size: 1.05rem; font-weight: 700; line-height: 1.45;
}
.feed-status-text span:not(:first-child) {
  font-size: .9rem; font-weight: 500; color: var(--muted);
}
.feed-submit-empty { margin-top: 6px; }

/* Barre de progression de lecture (bas de la vidéo). */
.feed-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.18); z-index: 3; pointer-events: none;
}
.feed-progress i { display: block; height: 100%; width: 0; background: #fff; border-radius: 0 2px 2px 0; }

/* Rail d'actions latéral (like / commentaires / partage / vues). */
.feed-rail {
  position: absolute; right: 10px; bottom: 96px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.feed-act {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; font-weight: 700;
}
.feed-act-ico {
  font-size: 1.9rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition: transform .15s;
}
.feed-act-n { font-size: .78rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.feed-act.pop .feed-act-ico { transform: scale(1.35); }
.feed-act:active .feed-act-ico { transform: scale(.85); }
.feed-views {
  color: #fff; font-size: .74rem; font-weight: 600; opacity: .85;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); margin-top: 2px;
}

.feed-overlay-author { font-size: .98rem; font-weight: 800; margin: 0 0 4px; }
.feed-overlay-desc { font-size: .92rem; font-weight: 500; margin: 5px 0 0; line-height: 1.4; opacity: .95; }
.feed-overlay { padding-right: 68px; }

/* Indicateur son coupé/activé, apparaît brièvement au tap. */
/* Indicateur son : badge circulaire frosté au centre, apparait au tap. */
.feed-mute-ind {
  position: absolute; top: 50%; left: 50%;
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; z-index: 5; opacity: 0; pointer-events: none;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18);
  transform: translate(-50%,-50%) scale(.6);
}
.feed-mute-ind.show { animation: feedMutePulse .7s ease; }
@keyframes feedMutePulse {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  25%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
}

/* Cœur du double-tap : jaillit puis s'envole (façon TikTok). */
.feed-heart {
  position: absolute; z-index: 6; pointer-events: none;
  font-size: 5rem; transform: translate(-50%,-50%) scale(0) rotate(-12deg);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
  animation: feedHeart .8s var(--ease) forwards;
}
@keyframes feedHeart {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(-12deg); }
  25%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(-6deg); }
  55%  { opacity: 1; transform: translate(-50%,-60%) scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%,-130%) scale(.85) rotate(-6deg); }
}

/* Apparition du rail d'actions + de l'overlay quand la slide devient active. */
.feed-slide.in-view .feed-rail { animation: feedRailIn .45s var(--ease) both; }
.feed-slide.in-view .feed-overlay { animation: feedOverlayIn .5s var(--ease) both; }
@keyframes feedRailIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes feedOverlayIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bouton flottant « Proposer une vidéo ». */
.feed-submit-fab {
  position: fixed; right: 16px; top: 76px; z-index: 20;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #ff4d9d, #ff8a3d); color: #fff;
  font-size: 1.25rem; line-height: 1; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(255,77,157,.5);
}
.feed-submit-fab span { font-size: .8rem; font-weight: 800; margin-left: -3px; margin-top: -8px; }
body.screen-feed-active .feed-submit-fab { display: inline-flex; }
@media (max-width: 900px) {
  .feed-rail { bottom: 120px; }
  .feed-submit-fab { top: auto; bottom: 150px; }
}

/* Feuille des commentaires vidéo. */
.videocomments-modal { display: flex; flex-direction: column; max-height: 80vh; }
.videocomments-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 6px 2px; margin: 8px 0; min-height: 120px;
}
.videocomment { display: flex; flex-direction: column; gap: 2px; }
.videocomment-name { font-weight: 800; font-size: .86rem; color: var(--accent, #a78bff); }
.videocomment-text { margin: 0; font-size: .95rem; line-height: 1.35; color: var(--text); word-break: break-word; }
.videocomments-empty { text-align: center; color: var(--muted); padding: 24px 0; }
.videocomments-form { display: flex; gap: 8px; align-items: center; }
.videocomments-form input {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #333);
  background: var(--card, #1a1a1a); color: var(--text); font-size: .95rem;
}
.videocomments-form .btn { flex: 0 0 auto; width: auto; }

/* Formulaire « proposer une vidéo ». */
.videosubmit-input {
  width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border, #333);
  background: var(--card, #1a1a1a); color: var(--text); font-size: .95rem; font-family: inherit;
}
.videosubmit-send { margin-top: 14px; width: 100%; }
.videosubmit-status { margin: 10px 0 0; font-size: .9rem; text-align: center; min-height: 1.1em; }
.videosubmit-status.ok { color: #22c55e; }
.videosubmit-status.err { color: #ef4444; }

/* ── Écran Lecture : catalogue de livres ── */
.screen-read { padding: 0; justify-content: flex-start; align-items: stretch; gap: 0; }
.read-wrap { max-width: 900px; margin: 0 auto; padding: 84px 16px 24px; width: 100%; }
.read-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.read-h1 {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; margin: 0;
  background: linear-gradient(135deg, #a78bff, #22d3ee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.read-search {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--border);
}
.read-search input { flex: 1; background: none; border: none; color: var(--text); font: inherit; font-size: .95rem; outline: none; }
.read-search input::placeholder { color: #6f7191; }
.read-cats {
  position: sticky; top: 70px; z-index: 30;
  display: flex; gap: 8px; padding: 10px 0; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(var(--bg), rgba(10,10,22,.6), transparent);
}
.read-cats::-webkit-scrollbar { display: none; }
.read-cat {
  flex-shrink: 0; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .18s;
}
.read-cat:hover { border-color: rgba(99,102,241,.45); color: var(--text); }
.read-cat.active { border-color: var(--board); color: #fff; background: var(--board); box-shadow: 0 0 14px rgba(99,102,241,.45); }
.read-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 8px; }
.read-book {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow);
  transition: transform .18s, border-color .2s, box-shadow .3s;
}
.read-book:hover { transform: translateY(-5px); border-color: var(--board); box-shadow: 0 18px 50px rgba(99,102,241,.4); }
.read-cover {
  aspect-ratio: 3/4; border-radius: 12px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 12px; color: #fff;
  box-shadow: inset 0 -60px 60px -20px rgba(0,0,0,.5);
}
.read-cover-emoji { position: absolute; top: 12px; right: 12px; font-size: 1.6rem; }
.read-cover-t { font-weight: 800; font-size: .95rem; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.read-book-title { font-weight: 700; font-size: .9rem; line-height: 1.25; margin: 0; }
.read-book-author { color: var(--accent); font-size: .76rem; margin: 0; }
.read-book-cat {
  align-self: flex-start; font-size: .65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; background: rgba(99,102,241,.15); color: var(--accent);
}
.read-empty, .read-status { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 40px 0; font-size: .9rem; }
.read-status { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.read-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,4,12,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.read-overlay.open { display: flex; }
.read-sheet {
  display: flex; gap: 20px; max-width: 560px; width: 100%;
  background: var(--card); border: 1px solid rgba(99,102,241,.45);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  max-height: 86dvh; overflow-y: auto;
}
.read-sheet .read-cover { width: 150px; flex-shrink: 0; }
.read-sheet-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.read-sheet-info h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin: 0; }
.read-sheet-author { color: var(--accent); font-size: .85rem; font-weight: 600; margin: 0; }
.read-sheet-desc { color: var(--muted); font-size: .85rem; line-height: 1.6; margin: 0; }
.read-sheet-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
/* ── Livre exclusif (chapitres payants en Libs) ── */
.read-book--exclusive { border-color: rgba(251,191,36,.45); box-shadow: 0 0 18px rgba(251,191,36,.12), var(--shadow); }
.read-book--exclusive:hover { border-color: #fbbf24; box-shadow: 0 18px 50px rgba(251,191,36,.35); }
.read-book-cat--excl { background: rgba(251,191,36,.15); color: #fbbf24; }
.book-ch-head { font-size: .8rem; font-weight: 700; color: var(--muted); margin: 4px 0 0; text-transform: uppercase; letter-spacing: .5px; }
.book-ch-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; min-height: 110px; overflow-y: auto; flex-shrink: 0; }
.book-ch {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(99,102,241,.06); color: var(--text); font: inherit; font-size: .82rem;
  cursor: pointer; text-align: left; transition: background .15s, border-color .15s;
}
.book-ch:not(.locked):hover { background: rgba(99,102,241,.18); border-color: var(--board); }
.book-ch.locked { opacity: .55; cursor: default; }
.book-ch-num { font-weight: 800; color: var(--accent); }
.book-ch-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-ch-state { font-size: .72rem; }
.book-ch-tag { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(120,120,140,.18); color: var(--muted); white-space: nowrap; }
.book-ch-tag--free { background: rgba(74,222,128,.15); color: #4ade80; }
.book-buy-btn { font-size: .8rem; }
.book-buy-btn:disabled { opacity: .5; cursor: default; }

/* Visionneuse de chapitre */
.book-reader {
  position: fixed; inset: 0; z-index: 950; /* au-dessus de la barre de nav (901) : lecture plein écran */
  display: none; flex-direction: column;
  background: var(--bg);
}
.book-reader.open { display: flex; }
.book-reader-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--card);
}
.book-reader-close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: none; color: var(--text); font-size: 1rem; cursor: pointer; flex-shrink: 0;
}
.book-reader-close:hover { border-color: var(--accent); color: var(--accent); }
.book-reader-title { margin: 0; font-weight: 800; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-reader-content {
  flex: 1; overflow-y: auto; padding: 24px 18px 40px;
  max-width: 680px; margin: 0 auto; width: 100%;
  font-size: 1rem; line-height: 1.8; color: var(--text);
  /* Dissuade la copie du texte du roman (© auteur) */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* Mention légale de droits d'auteur */
.book-copyright {
  font-size: .7rem; color: var(--muted); line-height: 1.5; margin: 4px 0 0;
  opacity: .85;
}
.book-copyright--reader {
  margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border);
  text-align: center;
}

/* Le contenu du roman ne sort pas à l'impression */
@media print {
  .book-reader, .book-reader-content { display: none !important; }
}
.book-reader-content h2, .book-reader-content h3, .book-reader-content h4 { margin: 1.2em 0 .5em; line-height: 1.3; }
.book-reader-content p { margin: 0 0 1em; }
.book-reader-content hr { border: none; border-top: 1px solid var(--border); margin: 1.6em auto; width: 60%; }
.book-reader-nav {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--card);
}
.book-reader-nav .btn { min-width: 130px; }
.book-reader-nav .btn:disabled { opacity: .4; cursor: default; }

html.light .read-search { background: rgba(0,0,0,.05); }
html.light .read-cats { background: linear-gradient(var(--bg), rgba(240,244,255,.6), transparent); }
@media (max-width: 600px) {
  /* Bas généreux : les livres doivent défiler au-dessus des boutons flottants
     (profil/commentaire) et de la barre de nav du bas sur mobile. */
  .read-wrap { padding-top: 64px; padding-bottom: 190px; }
  .read-cats { top: 0; }
}
@media (max-width: 520px) {
  .read-sheet { flex-direction: column; }
  .read-sheet .read-cover { width: 120px; align-self: center; }
}

.sp-divider {
  height: 1px;
  background: rgba(99,102,241,.18);
  margin: 2px 0;
}
.sp-vol-row { align-items: center; }
.sp-vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 100px; height: 4px;
  border-radius: 2px;
  background: rgba(99,102,241,.3);
  outline: none; cursor: pointer;
}
.sp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.sp-vol-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%; border: none;
  background: var(--accent); cursor: pointer;
}

.sp-row-refund .sp-label { font-size: .78rem; opacity: .6; }
.sp-refund-info {
  font-size: .78rem;
  color: var(--accent);
  margin: 0;
  font-weight: 600;
}

/* Lien légal dans les paramètres */
.sp-legal-link {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  text-decoration: none;
  margin-top: 2px;
}
.sp-legal-link:hover { color: var(--accent); text-decoration: underline; }

/* Pied de page discret sur l'accueil */
.landing-footer {
  text-align: center;
  margin: 22px auto 0;
  padding-top: 14px;
}
.landing-footer a {
  color: var(--muted);
  font-size: .8rem;
  text-decoration: none;
}
.landing-footer a:hover { color: var(--accent); text-decoration: underline; }

/* ── Bouton Rembourser (boutique) ── */
.shop-refund-btn {
  margin-top: 6px;
  font-size: .76rem;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #ef4444;
  padding: 6px 14px;
  border-radius: 8px;
  transition: background .15s;
}
.shop-refund-btn:hover:not(:disabled)   { background: rgba(239,68,68,.22); }
.shop-refund-btn:disabled               { opacity: .4; cursor: not-allowed; }

.btn-help-inline { display: none; }

@media (max-width: 600px) {
  .screen.game-screen.active ~ .btn-help-float { display: none; }
  .game-screen { padding-top: 72px; }
  .tg-header { padding-right: 52px; }
  /* Bas généreux : le classement doit pouvoir défiler au-dessus des boutons
     flottants (profil/commentaire) et de la barre de nav du bas sur mobile. */
  #screen-landing { gap: 12px; padding: 56px 12px 190px; }
  .landing-card { padding: 16px 12px; gap: 8px; }
  .landing-icon  { font-size: 2rem; }
  .landing-card h2 { font-size: .92rem; }
  .global-lb-card { padding: 8px 12px 4px; }
  .logo-full { height: 125px; max-width: 360px; display: block; margin: 0 auto; }
.btn-help-inline {
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: var(--board); color: #fff;
    font-size: 1.1rem; font-weight: 900; cursor: pointer;
    box-shadow: 0 0 16px rgba(99,102,241,.5);
    margin: 4px auto 0;
    transition: transform .15s, box-shadow .15s;
  }
  .btn-help-inline:active { transform: scale(.92); }
}

/* ── Modale aide ── */
.help-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: calc(100vw - 32px); max-width: 480px; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.7), 0 0 30px rgba(99,102,241,.1);
  animation: screenIn .22s cubic-bezier(.16,1,.3,1);
}
.help-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.help-modal-title { font-size: 1.1rem; font-weight: 800; }
.help-close-btn {
  border: none; background: rgba(255,255,255,.07); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px;
  font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.help-close-btn:hover { background: rgba(248,113,113,.15); color: var(--red); }

.help-tabs-bar {
  display: flex; gap: 4px; padding: 10px 12px 0;
  overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
}
.help-tabs-bar::-webkit-scrollbar { display: none; }
.help-tab {
  flex-shrink: 0; padding: 7px 14px;
  border: none; border-radius: 8px;
  background: transparent; color: var(--muted);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.help-tab.active { background: rgba(99,102,241,.15); color: var(--accent); }
.help-tab:hover:not(.active) { background: rgba(255,255,255,.05); }

.help-body { overflow-y: auto; flex: 1; padding: 14px 16px 20px; }
.help-panel { display: none; flex-direction: column; gap: 14px; }
.help-panel.active { display: flex; }
.help-item { display: flex; gap: 12px; align-items: flex-start; }
.help-icon { font-size: 1.25rem; width: 28px; flex-shrink: 0; text-align: center; margin-top: 1px; }
.help-item > div { flex: 1; }
.help-item strong { display: block; font-size: .9rem; margin-bottom: 3px; color: var(--text); }
.help-item p { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.help-item em { font-style: normal; font-weight: 600; color: var(--accent); }

/* ── Landing ── */
#screen-landing {
  background: radial-gradient(ellipse at 50% 5%, rgba(99,102,241,.2) 0%, transparent 65%);
  justify-content: flex-start;
  padding-top: 80px;
  gap: 16px;
}
#screen-landing .global-lb-card { margin-top: auto; }
/* L'accueil n'est plus une grille de cinq cartes egales : deux cartes phares
   pleine largeur, puis trois tuiles secondaires. Le conteneur garde son nom
   (.landing-grid) car le didacticiel le cible. */
.landing-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%; max-width: 480px;
}
.landing-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.landing-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 24px 16px;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .25s, transform .15s;
  color: var(--text);
}
.landing-card:hover {
  border-color: var(--board);
  box-shadow: 0 0 32px rgba(99,102,241,.38), 0 12px 40px rgba(0,0,0,.4);
  transform: translateY(-5px);
}
.landing-card:active { transform: scale(.97); }
.landing-card h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin: 0; color: var(--accent); }
.landing-card p  { font-size: .78rem; color: var(--muted); margin: 0; text-align: center; }
.landing-icon    { font-size: 2.4rem; }
.landing-card--soon {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* ── Accueil : cartes phares et tuiles (direction « Nuit de fete ») ─────────
   Deux cartes pleine largeur portent les jeux qui comptent, avec un liseré de
   lumiere et un halo d'angle ; les trois autres entrees deviennent des tuiles
   compactes. La hierarchie se lit d'un coup d'oeil, sans couleur criarde. */
.landing-card--hero {
  position: relative; overflow: hidden;
  align-items: stretch; text-align: left;
  gap: 7px; padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2e2565 0%, #171a35 68%);
  border: 1px solid rgba(165,180,252,.3);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.landing-card--hero::after {
  content: ''; position: absolute; right: -26px; top: -26px;
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, rgba(129,140,248,.34), transparent 68%);
  pointer-events: none;
}
.landing-card--hero-alt {
  background: linear-gradient(135deg, #3d2a1c 0%, #1a1730 70%);
  border-color: rgba(252,211,77,.28);
}
.landing-card--hero-alt::after { background: radial-gradient(circle, rgba(251,191,36,.26), transparent 68%); }

.landing-hero-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.landing-eyebrow {
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.landing-card--hero .landing-icon { font-size: 0; line-height: 0; }
.landing-card--hero .landing-icon svg { width: 34px; height: 34px; }
.landing-card--hero h2 {
  position: relative; z-index: 1;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; color: #fff;
}
.landing-card--hero p { position: relative; z-index: 1; text-align: left; font-size: .82rem; color: #a8afd0; }
.landing-card--hero-alt p { color: #c5b394; }

.landing-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.landing-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
  border-radius: 999px; background: rgba(255,255,255,.08);
  font-size: .72rem; font-weight: 600; color: #cbd5e1;
}

.landing-card--tile {
  align-items: flex-start; text-align: left;
  justify-content: space-between;
  gap: 8px; padding: 13px 11px; min-height: 108px;
  border-radius: 16px;
  background: #141830;
  border: 1px solid rgba(165,180,252,.22);
}
/* En colonne flex les enfants se compriment par defaut : le compte a rebours
   des Evenements debordait de sa tuile. */
.landing-card--tile > * { flex-shrink: 0; }
.landing-card--tile .landing-icon { font-size: 0; line-height: 0; }
.landing-card--tile .landing-icon svg { width: 22px; height: 22px; }
.landing-card--tile h2 { font-size: .82rem; color: #fff; }
.landing-card--tile p  { text-align: left; font-size: .64rem; line-height: 1.3; overflow-wrap: anywhere; }
.landing-card--tile-event { border-color: rgba(248,113,113,.34); }
.landing-card--tile-event .landing-icon svg { color: var(--red); }
.landing-card--tile-event .event-card-countdown { color: var(--red); font-weight: 700; }

/* Le classement reprend la police d'affichage pour ses chiffres. */
.global-lb-card .lb-title { font-family: var(--font-display); }

/* Sous 360 px les trois tuiles deviennent illisibles a trois de front. */
@media (max-width: 360px) {
  .landing-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-card--hero h2 { font-size: 1.32rem; }
}
.landing-card--locked {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.5);
}
.landing-card--locked h2 { color: var(--muted); }
.landing-card--community {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  transition: box-shadow .18s, opacity .18s;
}
.landing-card--community:hover { box-shadow: 0 0 12px 2px var(--accent-glow, rgba(99,102,241,.35)); }

/* ── Modal Communauté ── */
.community-modal {
  background: var(--card);
  border-radius: 16px;
  padding: 24px 22px 22px;
  width: min(92vw, 400px);
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.community-modal-body { display: flex; flex-direction: column; gap: 14px; }
.community-modal-intro { font-size: .88rem; color: var(--text); text-align: center; margin: 0; }
.community-steps { display: flex; flex-direction: column; gap: 10px; }
.community-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(99,102,241,.08); border-radius: 10px; padding: 10px 12px;
}
.community-step-num {
  min-width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.community-step p { font-size: .82rem; color: var(--text); margin: 0; line-height: 1.45; }
.community-modal-cta { font-size: .84rem; color: var(--muted); text-align: center; margin: 0; }

/* ── Écran Évents / Snake ── */
.event-intro {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; width: 100%; max-width: 380px;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.event-badge { font-size: 3.2rem; line-height: 1; }
.event-intro h2 { font-size: 1.2rem; font-weight: 700; color: var(--accent); margin: 0; }
.event-intro p  { font-size: .85rem; color: var(--muted); margin: 0; text-align: center; }
.event-hs-display { font-size: .82rem; color: var(--accent); font-weight: 600; min-height: 1.2em; }

.snake-game-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; width: 100%;
}
.snake-hud {
  display: flex; justify-content: space-between; align-items: center;
  width: 300px; /* mis à jour dynamiquement par JS */
  font-size: .85rem; color: var(--muted);
}
.snake-pause-btn {
  background: none; border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; color: var(--muted); font-size: 1rem;
  padding: 2px 8px; cursor: pointer; line-height: 1;
  transition: border-color .2s, color .2s;
}
.snake-pause-btn:hover { border-color: var(--accent); color: var(--accent); }
.snake-pause-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}
.snake-pause-overlay.hidden { display: none; }
.snake-canvas-wrap {
  position: relative;
  border: 2px solid rgba(99,102,241,.4);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(99,102,241,.2);
}
#snake-canvas { display: block; }
.snake-over-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.78);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}
.snake-over-overlay.hidden { display: none; }
.snake-over-text { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; }
.snake-new-hs {
  font-size: 1.15rem; font-weight: 800; color: gold; margin: 0;
  animation: hs-pulse .55s ease-in-out infinite alternate;
}
.snake-new-hs.hidden { display: none; }
@keyframes hs-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.1); opacity: 1; } }
#snake-over-score { font-size: .85rem; color: var(--muted); margin: 0; }
.snake-hint { font-size: .72rem; color: var(--muted); opacity: .65; margin: 0; }

/* ── Formulaire pseudo Snake ── */
.snake-name-form {
  width: 100%; max-width: 340px; margin: 1rem auto 0;
}
.snake-name-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.4rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: .75rem; align-items: center;
}
.snake-name-title  { font-size: 1.1rem; font-weight: 700; margin: 0; }
.snake-name-sub    { font-size: .82rem; color: var(--muted); margin: 0; text-align: center; }
.snake-pseudo-input {
  width: 100%; padding: .55rem .8rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: .95rem; text-align: center;
  outline: none; box-sizing: border-box;
}
.snake-pseudo-input:focus { border-color: var(--accent); }
.snake-name-error  { font-size: .78rem; color: #e74c3c; margin: -.25rem 0 0; }
.snake-name-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ── Classement Snake ── */
.snake-lb-card {
  width: 100%; max-width: 380px;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: var(--radius);
  padding: 10px 16px 6px;
  box-shadow: 0 0 18px rgba(99,102,241,.1), var(--shadow);
}
.snake-lb-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; font-size: .9rem; font-weight: 700; color: var(--accent);
}
.snake-lb-list { display: flex; flex-direction: column; }
.lb-score-snake { font-size: .82rem; font-weight: 700; color: var(--accent); margin-left: auto; white-space: nowrap; }
/* Masquer les boutons flottants du bas sur l'écran Évents (évite la superposition avec le D-pad) */
body.screen-snake-active .btn-help-float,
body.screen-snake-active .btn-comment-float { display: none !important; }

.snake-dpad {
  display: none;
  flex-direction: column; align-items: center; gap: 6px; margin-top: 4px;
}
/* Visibles sur petits ecrans ET sur tout appareil tactile (tablettes incluses,
   qui sont plus larges que 600px mais n'ont pas de clavier). */
@media (max-width: 600px), (pointer: coarse) { .snake-dpad { display: flex; } }
.dpad-row { display: flex; gap: 6px; }
.dpad-btn {
  width: 54px; height: 54px;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.4);
  border-radius: 10px;
  font-size: 1.4rem; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; touch-action: manipulation;
  transition: background .1s, transform .1s;
}
.dpad-btn:active { background: rgba(99,102,241,.22); transform: scale(.9); }

/* ── Écran Luffy Runner ── */
#luffy-canvas { display: block; max-width: 100%; }
.luffy-suggest-link {
  background: none; border: none; color: var(--muted);
  font-size: .76rem; text-decoration: underline;
  cursor: pointer; padding: 0; margin-top: -4px;
}
.luffy-suggest-link:hover { color: var(--accent); }
.luffy-controls {
  display: none; gap: 14px; margin-top: 4px;
}
@media (max-width: 600px), (pointer: coarse) { .luffy-controls { display: flex; } }
.luffy-ctrl-btn { width: 64px; height: 64px; font-size: 1.6rem; }
body.screen-luffy-active .btn-help-float,
body.screen-luffy-active .btn-comment-float { display: none !important; }

/* Sur mobile, la map est une bande courte : les overlays pause / game over
   sont passés en plein écran pour que tous les boutons restent visibles
   (au lieu d'être rognés par la faible hauteur du canvas). */
@media (max-width: 600px) {
  .snake-pause-overlay,
  .snake-over-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    gap: 16px;
    padding: 24px;
  }
  .snake-pause-overlay .btn,
  .snake-over-overlay .btn { min-width: 200px; }
  /* Réduit la marge latérale pendant le jeu pour agrandir la map. */
  body.screen-luffy-active  #screen-luffy,
  body.screen-snake-active #screen-snake { padding-left: 4px; padding-right: 4px; }
}

body.screen-feed-active .btn-help-float,
body.screen-feed-active .btn-comment-float,
body.screen-feed-active #libs-counter,
body.screen-feed-active .btn-settings-float { display: none !important; }

/* Le Mot : sur mobile, les boutons flottants Aide/Assistant se superposent au
   clavier du jeu (touche Entrée/Suppr masquee). On les retire sur cet ecran. */
body.screen-wordle-active .btn-help-float,
body.screen-wordle-active .btn-chatbot-float,
body.screen-wordle-active .btn-comment-float { display: none !important; }

/* ── Classement Global (landing) ── */
.global-lb-card {
  width: 100%; max-width: 480px;
  background: var(--card);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: var(--radius);
  padding: 10px 16px 6px;
  box-shadow: 0 0 18px rgba(99,102,241,.1), var(--shadow);
}
.global-lb-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; font-size: .9rem;
}
.global-lb-list { display: flex; flex-direction: column; }
.global-lb-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .82rem;
}
.global-lb-row:last-child { border-bottom: none; }
.global-lb-score {
  font-size: .75rem; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}
.global-lb-snake {
  font-size: .7rem; margin-left: 2px; opacity: .8;
}
.lb-more-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  opacity: .8;
  transition: opacity .15s;
}
.lb-more-btn:hover { opacity: 1; }

/* ── Bouton retour ── */
.btn-back {
  align-self: flex-start;
  background: none; border: none;
  color: var(--accent); font-size: .9rem; font-weight: 600;
  cursor: pointer; padding: 4px 0;
  margin-bottom: -8px;
}
.btn-back:hover { text-decoration: underline; }

/* ── Trivia home ── */
.trivia-theme-label { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 6px; align-self: flex-start; }
.trivia-themes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%; margin-bottom: 12px;
}
.theme-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 6px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-size: .75rem; font-weight: 600; color: var(--muted);
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.theme-btn span:first-child { font-size: 1.4rem; }
.theme-btn:hover  { border-color: var(--board); color: var(--accent); background: rgba(99,102,241,.1); }
.theme-btn.active {
  border-color: var(--board); color: var(--accent);
  background: rgba(99,102,241,.18);
  box-shadow: 0 0 12px rgba(99,102,241,.28);
}
.trivia-diff-row { display: flex; gap: 6px; width: 100%; margin-bottom: 12px; }
.diff-btn {
  flex: 1; padding: 7px 4px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.diff-btn:hover { border-color: var(--board); color: var(--accent); background: rgba(99,102,241,.1); }
.diff-btn.active                        { background: rgba(99,102,241,.22); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.diff-btn[data-diff="easy"].active      { background: rgba(22,163,74,.18);  border-color: #16a34a; color: #16a34a; box-shadow: 0 0 0 2px #16a34a; }
.diff-btn[data-diff="medium"].active    { background: rgba(234,88,12,.18);  border-color: #ea580c; color: #ea580c; box-shadow: 0 0 0 2px #ea580c; }
.diff-btn[data-diff="hard"].active      { background: rgba(220,38,38,.18);  border-color: #dc2626; color: #dc2626; box-shadow: 0 0 0 2px #dc2626; }
.trivia-nb-row { width: 100%; margin-bottom: 12px; }
.trivia-nb-slider {
  width: 100%; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: rgba(99,102,241,.2);
  border-radius: 3px; outline: none; cursor: pointer;
  accent-color: var(--accent);
}
.trivia-nb-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.trivia-nb-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--accent); cursor: pointer;
}
.trivia-action-row { display: flex; gap: 8px; width: 100%; margin-bottom: 8px; }
.trivia-action-row .btn { flex: 1; }

/* ── Trivia : salon d'attente ── */
.trivia-wait-players { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 12px 0 4px; }
.tw-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px;
  font-size: .82rem; font-weight: 600; color: #fff;
}
.tw-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* ── Trivia : partie en cours ── */
.tg-wrap {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 520px; padding-bottom: 20px;
  position: relative;
}
.tg-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px;
}
.tg-q-num    { font-size: .82rem; font-weight: 700; color: var(--muted); }
.tg-theme-lbl{ font-size: .82rem; font-weight: 600; color: var(--accent); }
.tg-timer {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--board); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900; flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
  box-shadow: 0 0 14px rgba(99,102,241,.5);
}
.tg-timer.warning { background: var(--red); box-shadow: 0 0 14px rgba(248,113,113,.55); }

.tg-scores { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.tg-score-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 14px;
  font-size: .78rem; font-weight: 700; color: #fff;
}
.tg-score-check { font-size: .75rem; opacity: .85; }

.tg-question-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow);
  width: 100%;
}
.tg-question { font-size: 1rem; font-weight: 600; line-height: 1.5; margin: 0; color: var(--text); }

.tg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
/* Bouton « Passer » du quiz : discret, sous les choix */
.tg-skip { margin: 10px auto 0; display: block; font-size: .9rem; padding: 8px 22px; opacity: .85; }
.tg-skip:disabled { opacity: .35; }
.tg-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; text-align: left; font-size: .88rem; font-weight: 500; color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tg-choice:hover:not(:disabled) {
  border-color: var(--board);
  background: rgba(99,102,241,.1);
  box-shadow: 0 0 14px rgba(99,102,241,.22);
}
.tg-choice:disabled { cursor: default; }
.tg-choice-letter {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; flex-shrink: 0;
}
.tg-choice.correct  { border-color: #4ade80; background: rgba(74,222,128,.1); }
.tg-choice.correct .tg-choice-letter { background: #4ade80; color: #052e16; }
.tg-choice.wrong    { border-color: var(--red); background: rgba(248,113,113,.1); }
.tg-choice.wrong .tg-choice-letter   { background: var(--red); color: #fff; }
.tg-choice.dimmed   { opacity: .28; }

.tg-reveal {
  padding: 12px 16px; border-radius: 12px;
  font-size: .92rem; font-weight: 700; text-align: center;
  width: 100%;
}
.tg-reveal.ok { background: rgba(74,222,128,.12); color: #4ade80;  border: 1px solid rgba(74,222,128,.25); }
.tg-reveal.ko { background: rgba(248,113,113,.12); color: var(--red); border: 1px solid rgba(248,113,113,.25); }

.tg-finished { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.tg-finished-title { font-size: 1.2rem; font-weight: 800; color: var(--accent); margin: 0; }
.tg-final-scores   { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tg-final-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  font-weight: 700; color: #fff; font-size: .9rem;
}
.tg-final-rank  { font-size: 1.1rem; width: 24px; text-align: center; }
.tg-final-name  { flex: 1; }
.tg-final-score { font-size: 1rem; }

/* ── Screen-home : flex-start pour garder le classement accessible ── */
#screen-home {
  justify-content: flex-start;
  padding-top: 24px;
}

/* ── Emoji rain ── */
@keyframes emoji-fall {
  from { transform: translateY(-70px); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateY(108vh); opacity: 0; }
}
@keyframes emoji-sway {
  0%   { transform: translateX(0)    rotate(0deg); }
  25%  { transform: translateX(14px) rotate(10deg); }
  75%  { transform: translateX(-11px) rotate(-7deg); }
  100% { transform: translateX(0)    rotate(0deg); }
}

/* ── Utilities ── */
.hidden { display: none !important; }

/* ── Responsive ── */
@media (max-width: 340px) {
  :root { --cell: 9.5vw; --chess-cell: 9.5vw; --ttt-cell: 24vw; }
}

/* ══════════════════════════════════════════
   THÈME ADAPTATIF SELON L'HEURE
   Clair : 7h–20h  |  Sombre : 20h–7h
══════════════════════════════════════════ */

/* Transition douce sur le fond lors du changement */
body { transition: background-color .8s ease, color .5s ease; }
.card, .lb-card, .chat, .game-status, .overlay-box, .help-modal,
.tg-question-box, .tg-choice, .code-display, .game-btn, .theme-btn,
.btn-secondary, .promo-btn, #chat-input,
#input-name, #input-code, #input-trivia-name, #input-trivia-code, #fh-name, #fh-code {
  transition: background-color .5s ease, color .4s ease,
              border-color .4s ease, box-shadow .4s ease;
}

/* ── Variables claires ── */
html.light {
  --bg:     #f0f4ff;
  --card:   #ffffff;
  --card2:  #eef0fb;
  --text:   #1e1b4b;
  --muted:  #64748b;
  --accent: #4338ca;
  --red:    #dc2626;
  --border: rgba(99,102,241,.22);
  --glow:   rgba(99,102,241,.2);
  --shadow: 0 4px 24px rgba(99,102,241,.1);
}

/* ── Fond clair ── */
html.light body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 75% 55% at 12% 8%,  rgba(99,102,241,.07) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 88% 88%,  rgba(129,140,248,.05) 0%, transparent 55%),
    radial-gradient(circle, rgba(99,102,241,.05) 1px, transparent 1px);
}

/* ── Corrections des couleurs codées en dur ── */
html.light .divider::before,
html.light .divider::after         { background: rgba(0,0,0,.08); }
html.light .c4-cell                { background: #dde3f8; }
html.light .c4-cell.red            { background: var(--red);    box-shadow: 0 0 10px rgba(248,113,113,.55); }
html.light .c4-cell.yellow         { background: var(--yellow); box-shadow: 0 0 10px rgba(251,191,36,.45); }
html.light .chat-form              { border-top-color: rgba(0,0,0,.07); }
html.light .help-modal-header      { border-bottom-color: rgba(0,0,0,.07); }
html.light .lb-row                 { border-bottom-color: rgba(0,0,0,.07); }
html.light .lb-rank.gold           { color: #b45309; }
html.light .lb-rank.silver         { color: #475569; }
html.light .lb-rank.bronze         { color: #c2410c; }
html.light .lb-w                   { color: #15803d; }
html.light .col-btn:disabled       { color: rgba(0,0,0,.2); }
html.light .tg-choice-letter       { background: rgba(99,102,241,.1); color: var(--board); }
html.light .help-close-btn         { background: rgba(0,0,0,.05); }
html.light .help-tab:hover:not(.active) { background: rgba(0,0,0,.04); }
html.light .overlay                { background: rgba(30,27,75,.55); }
html.light #screen-landing         { background: radial-gradient(ellipse at 50% 5%, rgba(99,102,241,.1) 0%, transparent 65%); }

/* ── Boutique · thème jour ��─ */

html.light .shop-fortnite {
  background: linear-gradient(180deg, #eef1ff 0%, #f4f6ff 60%, #e8ecff 100%);
}
html.light .shop-fn-header {
  background: rgba(255,255,255,.75);
  border-bottom-color: rgba(0,0,0,.08);
}
html.light .shop-fn-title                  { color: var(--text); }
html.light .shop-fn-balance-label          { color: var(--muted); }
html.light .shop-fn-balance-amount         { color: #b45309; }
html.light .shop-fn-close-btn              { background: rgba(0,0,0,.06); color: var(--text); border-color: rgba(0,0,0,.1); }
html.light .shop-fn-close-btn:hover        { background: rgba(0,0,0,.12); color: var(--text); }
html.light .shop-fn-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
html.light .shop-fn-section-title {
  color: var(--muted);
  border-bottom-color: rgba(0,0,0,.08);
}
/* Tiles · backgrounds clairs par rareté */
html.light .shop-tile.rarity-commun     { background: linear-gradient(180deg,#e8e8ef 0%,#d4d4e0 100%); border-color: rgba(100,100,100,.25); }
html.light .shop-tile.rarity-commun:hover  { box-shadow: 0 6px 20px rgba(100,100,100,.2); }
html.light .shop-tile.rarity-rare       { background: linear-gradient(180deg,#dbeafe 0%,#bfdbfe 100%); border-color: rgba(59,130,246,.4); }
html.light .shop-tile.rarity-rare:hover    { box-shadow: 0 6px 22px rgba(59,130,246,.35); }
html.light .shop-tile.rarity-epique     { background: linear-gradient(180deg,#ede9fe 0%,#ddd6fe 100%); border-color: rgba(139,92,246,.4); }
html.light .shop-tile.rarity-epique:hover  { box-shadow: 0 6px 24px rgba(139,92,246,.4); }
html.light .shop-tile.rarity-legendaire { background: linear-gradient(180deg,#fef3c7 0%,#fde68a 100%); border-color: rgba(245,158,11,.45); }
html.light .shop-tile.rarity-legendaire:hover { box-shadow: 0 6px 26px rgba(245,158,11,.4); }
html.light .shop-tile-footer            { background: rgba(255,255,255,.55); }
html.light .shop-tile-name              { color: var(--text); }
html.light .shop-tile-price             { color: #b45309; }
/* Badges de rareté */
html.light .shop-tile-badge.rarity-commun     { background: rgba(100,100,100,.12); color: #4b5563; }
html.light .shop-tile-badge.rarity-rare       { background: rgba(59,130,246,.15);  color: #1d4ed8; }
html.light .shop-tile-badge.rarity-epique     { background: rgba(139,92,246,.15);  color: #7e22ce; }
html.light .shop-tile-badge.rarity-legendaire { background: rgba(245,158,11,.15);  color: #92400e; }
html.light .shop-tile-badge-honorary          { background: rgba(234,179,8,.18);   color: #b45309; border-color: rgba(234,179,8,.4); }
html.light .shop-fn-rarity-badge-honorary     { color: #b45309; border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.1); }
html.light .shop-honorary-detail-note         { color: #6b7280; }
/* Nav sidebar */
html.light .shop-fn-nav { background: rgba(0,0,0,.04); border-right-color: rgba(0,0,0,.08); }
html.light .shop-fn-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
/* Panneau détail */
html.light .shop-fn-detail { background: linear-gradient(180deg,#eef1ff 0%,#e8edff 100%); }
html.light .shop-fn-detail-preview { background: rgba(0,0,0,.04); }
html.light .shop-fn-fn-bundle-contains { color: var(--muted); }
html.light .shop-fn-detail-back             { background: rgba(0,0,0,.06); color: var(--text); border-color: rgba(0,0,0,.12); }
html.light .shop-fn-detail-back:hover       { background: rgba(0,0,0,.11); color: var(--text); }
html.light .shop-fn-detail-name             { color: var(--text); }
html.light .shop-fn-detail-price            { color: #b45309; }
html.light .shop-fn-equipped-label          { color: #15803d; }
html.light .shop-fn-rarity-badge.commun     { color:#4b5563; border-color:rgba(100,100,100,.3);  background:rgba(100,100,100,.08); }
html.light .shop-fn-rarity-badge.rare       { color:#1d4ed8; border-color:rgba(29,78,216,.35);   background:rgba(29,78,216,.08); }
html.light .shop-fn-rarity-badge.epique     { color:#7e22ce; border-color:rgba(126,34,206,.35);  background:rgba(126,34,206,.08); }
html.light .shop-fn-rarity-badge.legendaire { color:#92400e; border-color:rgba(146,64,14,.35);   background:rgba(146,64,14,.08); }
/* Toast */
html.light .shop-fn-toast { background: rgba(240,244,255,.97); border-color: rgba(0,0,0,.1); color: var(--text); }
/* Boosts */
html.light .shop-fn-boost      { background: rgba(180,83,9,.05); border-color: rgba(180,83,9,.2); }
html.light .shop-fn-boost-name { color: var(--text); }
html.light .shop-fn-boost-desc { color: var(--muted); }
html.light .shop-fn-section-desc { color: var(--muted); }
html.light .shop-fn-emote-slots  { color: var(--muted); }
html.light .shop-fn-boost-pending { color: #b45309; }
/* Promo code */
html.light .shop-fn-promo       { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.2); }
html.light .shop-fn-promo-title { color: var(--muted); }
html.light .shop-fn-promo-input {
  background: rgba(255,255,255,.85);
  color: var(--text);
  border-color: rgba(99,102,241,.3);
}
html.light .shop-fn-promo-input::placeholder { color: var(--muted); }

/* ── Indicateur thème (apparaît 3 s lors du changement) ── */
#theme-clock {
  position: fixed;
  top: 68px; right: 16px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: .8rem; font-weight: 700; color: var(--accent);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, background-color .5s ease, color .4s ease, border-color .4s ease;
  z-index: 300;
}
#theme-clock.visible { opacity: 1; }

/* ── Bouton commentaire flottant ────────────────────────────────────────── */
.btn-comment-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--board);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.5);
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
}
.btn-comment-float:hover  { box-shadow: 0 0 28px rgba(99,102,241,.8); }
.btn-comment-float:active { transform: scale(.92); }

/* ── Assistant / Chatbot d'aide (flottant, 100% local) ──────────────────────── */
.btn-chatbot-float {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: var(--board); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.55);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn-chatbot-float > span,
.btn-chatbot-float svg { display: block; }
.btn-chatbot-float:hover  { box-shadow: 0 0 30px rgba(99,102,241,.85); }
.btn-chatbot-float:active { transform: scale(.92); }
.btn-chatbot-float.chatbot-fab-open { opacity: .85; transform: scale(.9); }

.chatbot-panel {
  position: fixed;
  right: 20px; bottom: 126px;
  width: 340px; max-width: calc(100vw - 32px);
  height: 460px; max-height: calc(100vh - 170px);
  display: flex; flex-direction: column;
  background: var(--card); color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index: 60; overflow: hidden;
}
.chatbot-panel.hidden { display: none; }

.chatbot-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: linear-gradient(135deg, var(--board), var(--board2));
  color: #fff;
}
.chatbot-header-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chatbot-title    { font-weight: 800; font-size: .98rem; }
.chatbot-subtitle { font-size: .74rem; opacity: .82; }
.chatbot-reset, .chatbot-close {
  background: rgba(255,255,255,.16); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  font-size: .85rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.chatbot-reset:hover, .chatbot-close:hover { background: rgba(255,255,255,.3); }

.chatbot-log {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.chatbot-msg { max-width: 92%; font-size: .84rem; line-height: 1.45; }
.chatbot-msg-user {
  align-self: flex-end;
  background: var(--board); color: #fff;
  padding: 8px 12px; border-radius: 14px 14px 4px 14px;
  word-break: break-word;
}
.chatbot-msg-bot { align-self: flex-start; width: 100%; }
.chatbot-intro { margin: 0 0 6px; font-size: .8rem; opacity: .78; }
.chatbot-card {
  display: flex; gap: 8px;
  background: var(--card2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 9px 11px; margin-bottom: 8px;
}
.chatbot-card:last-child { margin-bottom: 0; }
.chatbot-card-ic { font-size: 1.1rem; flex-shrink: 0; line-height: 1.3; }
.chatbot-card strong { display: block; font-size: .85rem; margin-bottom: 3px; }
.chatbot-card p { margin: 0; font-size: .8rem; opacity: .92; }
.chatbot-card p strong { display: inline; font-size: inherit; }

.chatbot-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08);
  max-height: 96px; overflow-y: auto; flex-shrink: 0;
}
.chatbot-chip {
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(99,102,241,.4);
  color: var(--text); border-radius: 999px;
  padding: 5px 10px; font-size: .74rem; cursor: pointer;
  transition: background .15s;
}
.chatbot-chip:hover { background: rgba(99,102,241,.34); }

.chatbot-form {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
.chatbot-input {
  flex: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: var(--card2); color: var(--text);
  padding: 9px 12px; font-size: .85rem; outline: none;
}
.chatbot-input:focus { border-color: var(--board); }
.chatbot-send {
  border: none; border-radius: 10px; cursor: pointer;
  background: var(--board); color: #fff; width: 42px; font-size: 1rem;
  transition: transform .12s;
}
.chatbot-send:active { transform: scale(.9); }

/* Se masque sur les ecrans immersifs, comme le bouton d'aide */
.screen.game-screen.active ~ .btn-chatbot-float,
.screen.game-screen.active ~ .chatbot-panel { display: none; }
body.screen-snake-active .btn-chatbot-float,
body.screen-snake-active .chatbot-panel,
body.screen-luffy-active  .btn-chatbot-float,
body.screen-luffy-active  .chatbot-panel,
body.screen-feed-active   .btn-chatbot-float,
body.screen-feed-active   .chatbot-panel { display: none !important; }

@media (max-width: 600px) {
  body.nav-bottom-visible .btn-chatbot-float { bottom: 74px; }
  .chatbot-panel {
    right: 12px; left: 12px; width: auto;
    bottom: 126px; height: auto; max-height: calc(100vh - 200px);
  }
  body.nav-bottom-visible .chatbot-panel { bottom: 180px; }
}

html.light .chatbot-panel { border-color: rgba(30,27,75,.12); }
html.light .chatbot-card,
html.light .chatbot-input { border-color: rgba(30,27,75,.12); }
html.light .chatbot-chips,
html.light .chatbot-form  { border-color: rgba(30,27,75,.1); }
html.light .chatbot-chip  { color: var(--text); }

/* ── Modal commentaire ──────────────────────────────────────────────────── */
.comment-modal {
  background: var(--card);
  border-radius: 18px;
  padding: 28px;
  width: min(440px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.comment-modal-sub   { font-size: .82rem; color: var(--muted); line-height: 1.5; margin: 0; }
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  background: var(--board);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color .2s;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment-chars { font-size: .75rem; color: var(--muted); }
.comment-feedback {
  font-size: .85rem;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0;
}
.comment-feedback.ok  { background: rgba(52,211,153,.12); color: #34d399; }
.comment-feedback.err { background: rgba(248,113,113,.12); color: #f87171; }

/* ── Tutoriel premiers pas ──────────────────────────────────────────────── */
.tuto-wrap {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  pointer-events: none;
}
.tuto-wrap.visible { pointer-events: all; }

.tuto-bubble {
  background: var(--card);
  border: 1px solid rgba(99,102,241,.45);
  border-radius: 18px;
  padding: 18px 22px 16px;
  width: min(360px, 90vw);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.15);
  animation: tuto-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes tuto-pop {
  from { opacity: 0; transform: scale(.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.tuto-dots {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}
.tuto-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(99,102,241,.2);
  transition: background .3s, box-shadow .3s;
}
.tuto-dot.done    { background: var(--accent); }
.tuto-dot.current { background: var(--accent); box-shadow: 0 0 0 4px rgba(99,102,241,.25); }

.tuto-text {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px;
}

.tuto-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.tuto-skip {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .8rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.tuto-skip:hover { background: rgba(255,255,255,.06); }
.tuto-ok {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 20px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.tuto-ok:hover  { opacity: .88; }
.tuto-ok:active { transform: scale(.95); }

@keyframes tuto-pulse {
  0%, 100% { box-shadow: 0 0 0 0    rgba(99,102,241,0); }
  50%       { box-shadow: 0 0 0 10px rgba(99,102,241,.35); }
}
.tuto-highlight {
  animation: tuto-pulse 1.5s ease-in-out infinite !important;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
#news-card.tuto-highlight { position: fixed; }

/* ── Libs counter ── */
.libs-counter {
  position: fixed;
  top: 16px; right: 16px;
  height: 44px;
  padding: 0 12px;
  border-radius: 22px; border: none;
  background: var(--board); color: #fff;
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99,102,241,.5);
  z-index: 51;
  display: flex; align-items: center; gap: 5px;
  transition: transform .15s, box-shadow .15s;
  user-select: none;
}
.libs-counter.hidden { display: none !important; }
.libs-counter:hover  { box-shadow: 0 0 28px rgba(99,102,241,.8); }
.libs-counter:active { transform: scale(.92); }
.libs-icon  { font-size: .95rem; }
.libs-label { font-size: .7rem; opacity: .75; }
.libs-dist-countdown { font-size: .62rem; opacity: .8; margin-left: 2px; }
.event-card-countdown { font-size: .72rem; opacity: .85; margin: 4px 0 0; }

/* ── Libs pill animation ── */
.libs-pill {
  position: fixed;
  font-size: .85rem; font-weight: 800;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  transform: translate(-50%, 0);
  animation: libs-pill-up .9s ease-out forwards;
}
@keyframes libs-pill-up {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(.8); }
}

/* ── Shop Fortnite ── */

/* Boutique en pleine page (elle etait un overlay centre). */
#screen-shop { padding: 0; justify-content: flex-start; }
#screen-shop .shop-fortnite { border-radius: 0; max-width: none; }

.shop-fortnite {
  width: 100%; height: 100%;
  background: linear-gradient(180deg,#0d0d1a 0%,#131326 60%,#0a0a14 100%);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.shop-fn-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; gap: 12px;
}
.shop-fn-title { font-size: 1.3rem; font-weight: 900; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.shop-fn-header-right { display: flex; align-items: center; gap: 14px; }
.shop-fn-balance {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 6px 14px;
}
.shop-fn-balance-label { font-size: .75rem; color: rgba(255,255,255,.5); }
.shop-fn-balance-amount { font-weight: 800; color: #fbbf24; font-size: .95rem; }
.shop-fn-topup-btn {
  border: none; border-radius: 14px; padding: 6px 12px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1200;
  font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.shop-fn-topup-btn:hover { box-shadow: 0 0 14px rgba(251,191,36,.5); }
.shop-fn-topup-btn:active { transform: scale(.94); }
.shop-fn-close-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7); border-radius: 50%; width: 36px; height: 36px;
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.shop-fn-close-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.shop-fn-body {
  flex: 1; display: flex; flex-direction: row; overflow: hidden; padding: 0; gap: 0;
}
.shop-fn-content {
  flex: 1; overflow-y: auto; padding: 20px 20px 40px; min-width: 0;
  display: flex; flex-direction: column; gap: 32px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.shop-fn-content::-webkit-scrollbar { width: 4px; }
.shop-fn-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.shop-fn-section { display: flex; flex-direction: column; gap: 12px; }
.shop-fn-section-title {
  font-size: .65rem; font-weight: 800; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: 2.5px; margin: 0;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.shop-fn-section-desc { font-size: .78rem; color: rgba(255,255,255,.45); margin: 0; line-height: 1.5; }
.shop-fn-emote-slots  { font-size: .78rem; color: rgba(255,255,255,.5); margin: 0 0 6px; }
.shop-fn-featured { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.shop-fn-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 10px; }
/* Tiles */
.shop-tile {
  border-radius: 12px; border: 1.5px solid; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s; position: relative; user-select: none;
}
.shop-tile:hover { transform: translateY(-3px) scale(1.02); }
.shop-tile:active { transform: scale(.97); }
.shop-tile.rarity-commun     { background: linear-gradient(180deg,#303030 0%,#1a1a1a 100%); border-color: rgba(160,160,160,.28); }
.shop-tile.rarity-commun:hover { box-shadow: 0 6px 20px rgba(160,160,160,.2); }
.shop-tile.rarity-rare       { background: linear-gradient(180deg,#0b2660 0%,#050e30 100%); border-color: rgba(59,130,246,.35); }
.shop-tile.rarity-rare:hover { box-shadow: 0 6px 22px rgba(59,130,246,.45); }
.shop-tile.rarity-epique     { background: linear-gradient(180deg,#2e0d5e 0%,#14052a 100%); border-color: rgba(139,92,246,.4); }
.shop-tile.rarity-epique:hover { box-shadow: 0 6px 24px rgba(139,92,246,.55); }
.shop-tile.rarity-legendaire { background: linear-gradient(180deg,#583000 0%,#271400 100%); border-color: rgba(245,158,11,.4); }
.shop-tile.rarity-legendaire:hover { box-shadow: 0 6px 26px rgba(245,158,11,.55); }
.shop-tile-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px 12px 8px; min-height: 90px;
}
.shop-tile-large .shop-tile-img { min-height: 200px; padding: 18px; }
.shop-tile-footer { padding: 8px 10px 10px; background: rgba(0,0,0,.38); display: flex; flex-direction: column; gap: 2px; }
.shop-tile-name { font-size: .76rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-tile-large .shop-tile-name { font-size: .92rem; }
.shop-tile-price { font-size: .7rem; font-weight: 800; color: #fbbf24; }
.shop-tile-large .shop-tile-price { font-size: .85rem; }
.shop-tile-badge {
  position: absolute; top: 7px; left: 7px;
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 4px;
}
.shop-tile-badge.rarity-commun     { background: rgba(160,160,160,.22); color: #bbb; }
.shop-tile-badge.rarity-rare       { background: rgba(59,130,246,.22);  color: #60a5fa; }
.shop-tile-badge.rarity-epique     { background: rgba(139,92,246,.22);  color: #c084fc; }
.shop-tile-badge.rarity-legendaire { background: rgba(245,158,11,.22);  color: #fcd34d; }
.shop-tile-badge-honorary          { background: rgba(234,179,8,.22);   color: #fbbf24; border: 1px solid rgba(234,179,8,.4); }
.shop-tile-owned {
  position: absolute; top: 7px; right: 7px;
  font-size: .58rem; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  background: rgba(34,197,94,.18); color: #4ade80; border: 1px solid rgba(34,197,94,.35);
  text-transform: uppercase; letter-spacing: .3px;
}
/* Tile preview helpers */
.shop-tile .shop-bg-preview       { width: 100%; height: 82px; border-radius: 8px; }
.shop-tile-large .shop-bg-preview { height: 172px; }
.shop-tile .shop-bubble-preview {
  font-size: .88rem; padding: 6px 12px; width: auto; max-width: 90%;
  border-radius: 12px 12px 4px 12px; font-weight: 600; text-align: center;
}
.shop-tile-large .shop-bubble-preview { font-size: 1.2rem; padding: 10px 20px; }
.shop-tile .shop-fn-font-preview, .shop-tile .shop-cosmetic-preview { font-size: 1.1rem; font-weight: 800; letter-spacing: .5px; }
.shop-tile-large .shop-fn-font-preview, .shop-tile-large .shop-cosmetic-preview { font-size: 1.7rem; }
/* Emoji preview (new cosmetic categories) */
.shop-emoji-preview { display: flex; align-items: center; justify-content: center; font-size: 2rem; width: 100%; height: 82px; }
.shop-emoji-preview.large { height: 120px; font-size: 3rem; }
.shop-fn-detail-preview .shop-emoji-preview { height: 120px; font-size: 3.5rem; }
/* Title preview */
.shop-title-preview { font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px; }
.shop-title-tag { background: rgba(124,92,255,.25); border: 1px solid rgba(124,92,255,.4); border-radius: 6px; padding: 2px 8px; font-size: .75rem; font-weight: 700; color: #c4b5fd; white-space: nowrap; }
/* Name effect preview (placeholder · animated styles added per effect) */
.shop-nameeffect-preview { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; width: 100%; height: 82px; }
html.light .shop-title-tag { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); color: #4338ca; }
/* Detail panel */
.shop-fn-detail {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,#0c0c1a 0%,#131326 100%);
  display: flex; flex-direction: column; overflow-y: auto;
  animation: shopDetailIn .18s cubic-bezier(.16,1,.3,1);
}
.shop-fn-detail.hidden { display: none !important; animation: none; }
@keyframes shopDetailIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
.shop-fn-detail-back {
  background: rgba(255,255,255,.06); border: none; border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.65); padding: 14px 20px; font-size: .9rem; font-weight: 700;
  cursor: pointer; text-align: left; flex-shrink: 0; width: 100%;
}
.shop-fn-detail-back:hover { background: rgba(255,255,255,.1); color: #fff; }
.shop-fn-detail-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 230px; padding: 30px 24px; background: rgba(0,0,0,.28);
}
.shop-fn-detail-preview .shop-bg-preview { width: 100%; max-width: 600px; height: 200px; border-radius: 12px; }
.shop-fn-detail-preview .shop-bubble-preview {
  font-size: 1.5rem; padding: 16px 28px; width: auto;
  border-radius: 18px 18px 6px 18px; font-weight: 600;
}
.shop-fn-detail-preview .shop-fn-font-preview,
.shop-fn-detail-preview .shop-cosmetic-preview { font-size: 2.8rem; font-weight: 900; }
.shop-fn-detail-info { padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 14px; }
.shop-fn-rarity-badge {
  display: inline-block; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 4px; border: 1px solid; width: fit-content;
}
.shop-fn-rarity-badge.commun     { color:#9ca3af; border-color:rgba(156,163,175,.4); background:rgba(156,163,175,.1); }
.shop-fn-rarity-badge.rare       { color:#60a5fa; border-color:rgba(96,165,250,.4);  background:rgba(96,165,250,.1); }
.shop-fn-rarity-badge.epique     { color:#c084fc; border-color:rgba(192,132,252,.4); background:rgba(192,132,252,.1); }
.shop-fn-rarity-badge.legendaire { color:#fcd34d; border-color:rgba(252,211,77,.4);  background:rgba(252,211,77,.1); }
.shop-fn-rarity-badge-honorary   { color:#fbbf24; border-color:rgba(234,179,8,.5);   background:rgba(234,179,8,.12); }
.shop-honorary-detail-note { font-size: .85rem; color: #9ca3af; margin: 0; line-height: 1.5; }
.shop-fn-detail-name  { font-size: 1.6rem; font-weight: 900; color: #fff; margin: 0; }
.shop-fn-detail-price { font-size: 1.1rem; font-weight: 800; color: #fbbf24; }
.shop-fn-detail-action { display: flex; flex-direction: column; gap: 8px; }
.shop-fn-detail-action .btn { padding: 13px 24px; font-size: .95rem; font-weight: 800; border-radius: 10px; }
.shop-fn-equipped-label { font-size: .85rem; font-weight: 700; color: #4ade80; display: flex; align-items: center; gap: 6px; }
.shop-fn-equipped-label::before { content: "✓ "; }
/* Toast feedback */
.shop-fn-toast {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(16,16,28,.96); border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 10px 22px; white-space: nowrap;
  font-size: .85rem; font-weight: 600; pointer-events: none; z-index: 20;
}
.shop-fn-toast.hidden { display: none; }
/* Boost card */
.shop-fn-boost {
  background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.18);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.shop-fn-boost-header { display: flex; align-items: center; justify-content: space-between; }
.shop-fn-boost-name   { font-weight: 700; font-size: .95rem; color: #fff; }
.shop-fn-boost-pending { font-size: .8rem; color: #fbbf24; }
.shop-fn-boost-desc   { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.5; margin: 0; }
.shop-fn-boost-btns   { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-fn-boost-btns .btn { font-size: .8rem; padding: 7px 14px; }
/* Promo card */
.shop-fn-promo {
  background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.2);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.shop-fn-promo-title { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.5); margin: 0; }
.shop-fn-promo-row   { display: flex; flex-direction: column; gap: 8px; }
.shop-fn-promo-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; border: 1px solid rgba(99,102,241,.3);
  border-radius: 8px; background: rgba(0,0,0,.38); color: #fff;
  font-size: .9rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 700;
}
.shop-fn-promo-input::placeholder { letter-spacing: 1px; font-weight: 400; color: rgba(255,255,255,.28); }
.shop-fn-promo-input:focus { outline: none; border-color: rgba(99,102,241,.6); }
.shop-fn-promo-feedback { font-size: .8rem; min-height: 1.1em; display: block; }
/* Packs de Libs (argent réel, FedaPay) */
.shop-fn-libspacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; padding-top: 10px; }
.shop-libspack-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.22);
  border-radius: 12px; padding: 18px 14px;
}
.shop-libspack-card.unavailable { opacity: .5; }
.shop-libspack-card.featured {
  border-color: #fbbf24;
  box-shadow: 0 0 0 1px rgba(251,191,36,.35), 0 10px 26px rgba(251,191,36,.18);
}
.shop-libspack-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #fbbf24; color: #1a1200; font-size: .66rem; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.shop-libspack-name   { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.8); }
.shop-libspack-amount { font-size: 1.3rem; font-weight: 900; color: #fbbf24; }
.shop-libspack-bonus  { font-size: .7rem; font-weight: 700; color: #4ade80; margin-top: -4px; }
.shop-libspack-price  { font-size: .8rem; color: rgba(255,255,255,.6); }
.shop-libspack-buy    { font-size: .8rem; padding: 7px 14px; width: 100%; }
.shop-libspack-buy:disabled { opacity: .5; cursor: default; }
/* Formulaire d'achat de Libs */
.libs-buy-wrap { padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 14px; }
.libs-buy-summary { font-size: .95rem; color: rgba(255,255,255,.7); margin: 0; }
.libs-buy-form { display: flex; flex-direction: column; gap: 10px; }
.libs-buy-row { display: flex; gap: 10px; }
.libs-buy-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid rgba(99,102,241,.3);
  border-radius: 8px; background: rgba(0,0,0,.38); color: #fff; font-size: .9rem;
}
.libs-buy-input::placeholder { color: rgba(255,255,255,.35); }
.libs-buy-input:focus { outline: none; border-color: rgba(99,102,241,.6); }
.libs-buy-feedback { font-size: .82rem; min-height: 1.2em; margin: 0; }
html.light .shop-libspack-card { background: rgba(180,83,9,.05); border-color: rgba(180,83,9,.2); }
html.light .shop-libspack-price { color: var(--muted); }
html.light .shop-libspack-name  { color: var(--text); }
html.light .libs-buy-summary { color: var(--muted); }
html.light .libs-buy-input { background: rgba(0,0,0,.04); color: var(--text); border-color: rgba(0,0,0,.12); }
/* Cosmetic preview (standalone, used in tiles & detail) */
.shop-cosmetic-preview { font-size: 1rem; font-weight: 800; letter-spacing: .5px; }
@media (max-width: 580px) {
  .shop-fn-nav { width: 46px; min-width: 46px; padding: 8px 4px; }
  .shop-fn-nav-btn { justify-content: center; padding: 9px 4px; }
  .shop-nav-label { display: none; }
  .shop-nav-icon { font-size: 1.15rem; line-height: 1; }
  .shop-fn-content { padding: 14px 10px 40px; gap: 24px; }
}
@media (max-width: 480px) {
  .shop-fn-header { padding: 10px 14px; }
  .shop-fn-title  { font-size: 1rem; }
  .shop-fn-balance-label { display: none; }
  .shop-fn-topup-btn { font-size: 0; padding: 6px 8px; }
  .shop-fn-topup-btn::before { content: '💳'; font-size: .95rem; }
  .shop-tile-large .shop-tile-img { min-height: 150px; }
  .shop-tile-large .shop-bg-preview { height: 120px; }
  .shop-fn-detail-preview { min-height: 170px; padding: 20px 16px; }
  .shop-fn-detail-preview .shop-bg-preview { height: 140px; }
  .shop-fn-detail-name { font-size: 1.3rem; }
}

/* ── Shop: Category nav bar ──────────────────────────────────────────────── */
.shop-fn-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  width: 148px; min-width: 148px; flex-shrink: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 10px 8px; margin: 0;
  background: rgba(0,0,0,.22);
  border-right: 1px solid rgba(255,255,255,.06);
  scrollbar-width: none;
}
.shop-fn-nav::-webkit-scrollbar { display: none; }
.shop-fn-nav-btn {
  width: 100%; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65); font-size: .82rem; font-weight: 700;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; transition: all .15s;
  white-space: nowrap; line-height: 1.2;
  display: flex; align-items: center; justify-content: flex-start; text-align: left;
  overflow: hidden; text-overflow: ellipsis;
}
.shop-fn-nav-btn:hover  { background: rgba(255,255,255,.12); color: #fff; }
.shop-fn-nav-btn.active { background: rgba(124,92,255,.32); border-color: rgba(124,92,255,.55); color: #fff; }
/* Shop: countdown in section title */
.shop-fn-section-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-fn-countdown {
  font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.45);
  margin-left: auto; white-space: nowrap;
}
.shop-fn-countdown #shop-countdown-val { color: #fbbf24; font-weight: 800; }
/* Shop: bundle tile extras */
.shop-tile-saving {
  position: absolute; bottom: 56px; right: 8px;
  background: #22c55e; color: #fff;
  font-size: .65rem; font-weight: 900; padding: 2px 7px; border-radius: 12px;
  letter-spacing: .5px; pointer-events: none;
}
.shop-price-crossed {
  font-size: .7rem; color: rgba(255,255,255,.35);
  text-decoration: line-through; font-weight: 500;
}
.shop-tile-large .shop-price-crossed { font-size: .82rem; }
.shop-bundle-prices { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
/* Daily pick badge */
.shop-tile-daily-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(34,197,94,.25); border: 1px solid rgba(34,197,94,.45); color: #4ade80;
  font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 10px;
  letter-spacing: .5px; pointer-events: none; text-transform: uppercase;
}
/* Bundle detail panel */
.shop-bundle-detail-info { padding: 20px 20px 48px; display: flex; flex-direction: column; gap: 12px; }
.shop-fn-bundle-contains { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.45); margin: 0; }
.shop-bundle-contents { display: flex; flex-direction: column; gap: 7px; }
.shop-bundle-content-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
}
.shop-bundle-content-item.is-owned { opacity: .5; }
.bundle-item-name  { flex: 1; font-size: .82rem; font-weight: 600; color: #fff; }
.bundle-item-price { font-size: .75rem; font-weight: 700; color: #fbbf24; white-space: nowrap; }
.bundle-item-tag   { font-size: .68rem; font-weight: 700; color: #4ade80; background: rgba(34,197,94,.15); padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.shop-bundle-status-partial { font-size: .78rem; color: #fbbf24; margin: 0; }
.shop-bundle-saving-inline  { font-size: .8rem; font-weight: 800; color: #22c55e; margin-left: 6px; }
.shop-fn-bundles-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
/* Bundles grid: override featured (2-col) to allow more columns */
/* Light theme overrides for new elements */
html.light .shop-fn-nav-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.5); }
html.light .shop-fn-nav-btn:hover  { background: rgba(0,0,0,.1); color: var(--text); }
html.light .shop-fn-nav-btn.active { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.4); color: #3730a3; }
html.light .shop-fn-countdown { color: rgba(0,0,0,.4); }
html.light .shop-fn-countdown #shop-countdown-val { color: #b45309; }
html.light .shop-tile-daily-badge { background: rgba(21,128,61,.1); border-color: rgba(21,128,61,.3); color: #15803d; }
html.light .shop-bundle-content-item { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }
html.light .bundle-item-name  { color: var(--text); }
html.light .bundle-item-price { color: #b45309; }
html.light .shop-price-crossed { color: rgba(0,0,0,.3); }
html.light .shop-fn-bundle-contains { color: var(--muted); }
html.light .shop-bundle-status-partial { color: #b45309; }
html.light .bundle-item-tag { background: rgba(21,128,61,.12); color: #15803d; }

/* ── Vote Snake Challenge ──────────────────────────────────────── */
.snake-vote-modal {
  background: linear-gradient(160deg, #0d1f12 0%, #0b1420 100%);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 20px; padding: 32px 28px 28px;
  max-width: 420px; width: 90%; text-align: center;
  position: relative; box-shadow: 0 0 60px rgba(34,197,94,.12), 0 8px 40px rgba(0,0,0,.6);
}
.snake-vote-close {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.5);
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.snake-vote-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.snake-vote-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 8px; }
.snake-vote-title { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 6px; }
.snake-vote-subtitle { font-size: .9rem; color: rgba(255,255,255,.55); margin: 0 0 24px; }

.snake-vote-btns { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.snake-vote-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 22px; border-radius: 14px; border: 2px solid transparent;
  font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .18s;
  min-width: 140px;
}
.snake-vote-yes {
  background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80;
}
.snake-vote-yes:hover { background: rgba(34,197,94,.22); border-color: #22c55e; }
.snake-vote-no {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #f87171;
}
.snake-vote-no:hover { background: rgba(239,68,68,.2); border-color: #ef4444; }
.snake-vote-btn.voted-active.snake-vote-yes { background: rgba(34,197,94,.3); border-color: #22c55e; }
.snake-vote-btn.voted-active.snake-vote-no  { background: rgba(239,68,68,.28); border-color: #ef4444; }
.snake-vote-btn:disabled { opacity: .55; cursor: default; }
.vote-btn-emoji { font-size: 1.5rem; line-height: 1; }

.snake-vote-results { margin-top: 4px; }
.snake-vote-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.snake-vote-bar { flex: 1; height: 10px; background: rgba(239,68,68,.25); border-radius: 99px; overflow: hidden; }
.snake-vote-bar-fill { height: 100%; background: #22c55e; border-radius: 99px; transition: width .4s ease; width: 0%; }
.vote-pct-yes { font-size: .8rem; font-weight: 700; color: #4ade80; min-width: 36px; text-align: right; }
.vote-pct-no  { font-size: .8rem; font-weight: 700; color: #f87171; min-width: 36px; text-align: left; }
.snake-vote-total-label { font-size: .8rem; color: rgba(255,255,255,.4); margin: 0 0 8px; }
.snake-vote-status { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0; padding: 8px 12px;
  background: rgba(255,255,255,.06); border-radius: 8px; }

/* News message clickable state */
#news-event-msg.vote-clickable {
  cursor: pointer; text-decoration: underline dotted rgba(255,255,255,.4);
  transition: opacity .15s;
}
#news-event-msg.vote-clickable:hover { opacity: .75; }

/* Light theme */
html.light .snake-vote-modal {
  background: linear-gradient(160deg, #f0fdf4 0%, #eff6ff 100%);
  border-color: rgba(34,197,94,.3); box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
html.light .snake-vote-title { color: #14532d; }
html.light .snake-vote-subtitle { color: rgba(0,0,0,.5); }
html.light .snake-vote-close { background: rgba(0,0,0,.06); color: rgba(0,0,0,.4); }
html.light .snake-vote-close:hover { background: rgba(0,0,0,.12); color: #14532d; }
html.light .snake-vote-yes { background: rgba(34,197,94,.08); color: #15803d; }
html.light .snake-vote-no  { background: rgba(239,68,68,.06); color: #b91c1c; }
html.light .snake-vote-btn.voted-active.snake-vote-yes { background: rgba(34,197,94,.2); }
html.light .snake-vote-btn.voted-active.snake-vote-no  { background: rgba(239,68,68,.15); }
html.light .snake-vote-bar { background: rgba(239,68,68,.15); }
html.light .vote-pct-yes { color: #16a34a; }
html.light .vote-pct-no  { color: #dc2626; }
html.light .snake-vote-total-label { color: rgba(0,0,0,.4); }
html.light .snake-vote-status { background: rgba(0,0,0,.04); color: rgba(0,0,0,.5); }
html.light #news-event-msg.vote-clickable { text-decoration-color: rgba(0,0,0,.3); }
html.light .boost-hint-btn { color: #b45309; border-color: #b45309; background: rgba(180,83,9,.1); }
html.light .boost-hint-btn:hover:not(:disabled) { background: rgba(180,83,9,.2); }

@keyframes rainbow-scroll { from { background-position: 0% } to { background-position: 300% } }
@keyframes galaxy-scroll  { from { background-position: 0% } to { background-position: 300% } }
@keyframes shimmer-scroll { from { background-position: 0% } to { background-position: 300% } }

.name-rainbow {
  background: linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00e600,#00ccff,#0000ff,#8800ff,#ff0000);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: rainbow-scroll 3s linear infinite;
}
.name-galaxy {
  background: linear-gradient(90deg,#2d0052,#7b2ff7,#f107a3,#ffffff,#00cfff,#7b2ff7,#2d0052);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: galaxy-scroll 4s linear infinite;
}
.name-silver {
  background: linear-gradient(90deg,#888,#ddd,#fff,#ddd,#888,#ddd,#fff);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer-scroll 2.5s linear infinite;
}
.name-bronze {
  background: linear-gradient(90deg,#7a3e00,#cd7f32,#f4c68c,#cd7f32,#7a3e00,#cd7f32,#f4c68c);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer-scroll 2.5s linear infinite;
}
.name-gold {
  background: linear-gradient(90deg,#a67c00,#ffd700,#fff7a0,#ffd700,#a67c00,#ffd700,#fff7a0);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer-scroll 2s linear infinite;
}
.name-diamond {
  background: linear-gradient(90deg,#7ac7f5,#d0f4ff,#ffffff,#b9f2ff,#7ac7f5,#d0f4ff,#ffffff);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer-scroll 1.8s linear infinite;
}
/* Couleurs des collections rotation. */
.name-color-benin {
  background: linear-gradient(90deg,#008751,#008751,#fcd116,#fcd116,#e8112d,#e8112d,#008751);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer-scroll 2.5s linear infinite;
}
.name-color-pagne {
  background: linear-gradient(90deg,#c0392b,#e08a2b,#2e8b57,#f4c542,#c0392b,#e08a2b,#2e8b57);
  background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: rainbow-scroll 3.5s linear infinite;
}

.shop-font-group       { margin-top: 12px; }
.shop-font-group-label { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; }

/* ── Polices de pseudo ── */
.font-orbitron   { font-family: 'Orbitron', sans-serif; }
.font-rajdhani   { font-family: 'Rajdhani', sans-serif; }
.font-chakra     { font-family: 'Chakra Petch', sans-serif; }
.font-audiowide  { font-family: 'Audiowide', sans-serif; }
.font-exo2       { font-family: 'Exo 2', sans-serif; }
.font-bungee     { font-family: 'Bungee', sans-serif; }
.font-blackops   { font-family: 'Black Ops One', sans-serif; }
.font-russo      { font-family: 'Russo One', sans-serif; }
.font-pressstart { font-family: 'Press Start 2P', monospace; font-size: .65em; }
.font-vt323      { font-family: 'VT323', monospace; font-size: 1.3em; }
.font-sharetech  { font-family: 'Share Tech Mono', monospace; }
.font-majormono  { font-family: 'Major Mono Display', monospace; }
.font-cinzel     { font-family: 'Cinzel', serif; }
.font-tektur     { font-family: 'Tektur', sans-serif; }
.font-pacifico   { font-family: 'Pacifico', cursive; }
.font-lobster    { font-family: 'Lobster', cursive; }
.font-fredoka    { font-family: 'Fredoka', sans-serif; }
.font-monoton    { font-family: 'Monoton', sans-serif; }

/* ── Chat bubble cosmetics ── */
.shop-bubble-preview { font-size: .82rem; padding: 5px 10px; border-radius: 12px 12px 4px 12px; font-weight: 500; text-align: center; background: var(--card2); color: var(--text); }
.msg-bubble.bubble-ardoise,       .shop-bubble-preview.bubble-ardoise       { background: #546e7a !important; color: #eceff1 !important; }
.msg-bubble.bubble-ocean,         .shop-bubble-preview.bubble-ocean         { background: #1565c0 !important; color: #e3f2fd !important; }
.msg-bubble.bubble-menthe,        .shop-bubble-preview.bubble-menthe        { background: #26a69a !important; color: #e0f2f1 !important; }
.msg-bubble.bubble-corail,        .shop-bubble-preview.bubble-corail        { background: #ef5350 !important; color: #fff !important; }
.msg-bubble.bubble-ambre,         .shop-bubble-preview.bubble-ambre         { background: #f57f17 !important; color: #fff3e0 !important; }
.msg-bubble.bubble-lavande,       .shop-bubble-preview.bubble-lavande       { background: #7e57c2 !important; color: #ede7f6 !important; }
.msg-bubble.bubble-rubis,         .shop-bubble-preview.bubble-rubis         { background: #b71c1c !important; color: #fce4ec !important; }
.msg-bubble.bubble-emeraude,      .shop-bubble-preview.bubble-emeraude      { background: #1b5e20 !important; color: #e8f5e9 !important; }
.msg-bubble.bubble-indigo,        .shop-bubble-preview.bubble-indigo        { background: #283593 !important; color: #e8eaf6 !important; }
.msg-bubble.bubble-magenta,       .shop-bubble-preview.bubble-magenta       { background: #e91e63 !important; color: #fff !important; }
.msg-bubble.bubble-cyan,          .shop-bubble-preview.bubble-cyan          { background: #00bcd4 !important; color: #fff !important; }
.msg-bubble.bubble-crepuscule,    .shop-bubble-preview.bubble-crepuscule    { background: linear-gradient(135deg,#4a148c,#e91e63) !important; color: #fff !important; }
.msg-bubble.bubble-aurore,        .shop-bubble-preview.bubble-aurore        { background: linear-gradient(135deg,#43e97b,#38f9d7) !important; color: #004d40 !important; }
.msg-bubble.bubble-sunset,        .shop-bubble-preview.bubble-sunset        { background: linear-gradient(135deg,#f7971e,#e53935) !important; color: #fff !important; }
.msg-bubble.bubble-tropical,      .shop-bubble-preview.bubble-tropical      { background: linear-gradient(135deg,#11998e,#38ef7d) !important; color: #fff !important; }
.msg-bubble.bubble-arcade,        .shop-bubble-preview.bubble-arcade        { background: linear-gradient(135deg,#ff00de,#00ffe5) !important; color: #fff !important; }
.msg-bubble.bubble-galaxie,       .shop-bubble-preview.bubble-galaxie       { background: linear-gradient(135deg,#0d0221,#3a0ca3,#7209b7,#b5179e) !important; color: #e0d7ff !important; }
.msg-bubble.bubble-verre,         .shop-bubble-preview.bubble-verre         { background: rgba(0,200,255,.18) !important; border: 1.5px solid #00e5ff; color: #e0ffff !important; }
.msg-bubble.bubble-or,            .shop-bubble-preview.bubble-or            { background: linear-gradient(135deg,#d4a017,#ffd700,#b8860b) !important; color: #1a0f00 !important; }
.msg-bubble.bubble-holographique, .shop-bubble-preview.bubble-holographique { background: linear-gradient(135deg,#ff0080,#ff4500,#ffff00,#00ff80,#00ffff,#0040ff,#8000ff) !important; color: #fff !important; }
.msg-bubble.bubble-cameleon,      .shop-bubble-preview.bubble-cameleon      { background: linear-gradient(270deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#c77dff); background-size: 400% 400% !important; animation: cameleon-shift 4s ease infinite !important; color: #fff !important; }
@keyframes cameleon-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ── Background layer ── */
#bg-layer, #bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
#bg-layer  { z-index: -2; }
#bg-canvas { z-index: -1; display: none; }

body.has-bg { background-color: transparent !important; background-image: none !important; }
body.has-bg .card, body.has-bg [class*="overlay-content"], body.has-bg .shop-overlay,
body.has-bg .overlay > .overlay-content, body.has-bg .game-card,
body.has-bg .chat, body.has-bg .leaderboard-panel { background: rgba(13,17,35,.82); backdrop-filter: blur(14px); }
html.light body.has-bg .card, html.light body.has-bg [class*="overlay-content"], html.light body.has-bg .shop-overlay,
html.light body.has-bg .overlay > .overlay-content, html.light body.has-bg .game-card,
html.light body.has-bg .chat, html.light body.has-bg .leaderboard-panel { background: rgba(255,255,255,.82); }

/* Themes: override CSS vars (version nuit) */
body.bg-theme-violet   { --board:#8b5cf6;--board2:#7c3aed;--border:rgba(139,92,246,.2);--glow:rgba(139,92,246,.45); }
body.bg-theme-aurora   { --board:#00c853;--board2:#00897b;--border:rgba(0,200,83,.2);--glow:rgba(0,200,83,.4); }
body.bg-theme-cyber    { --board:#00b4d8;--board2:#0096c7;--border:rgba(0,180,216,.2);--glow:rgba(0,180,216,.45); }
body.bg-theme-space    { --board:#3a86ff;--board2:#2176ff;--border:rgba(58,134,255,.2);--glow:rgba(58,134,255,.45); }
body.bg-theme-synthwave{ --board:#ff2d78;--board2:#c9004a;--border:rgba(255,45,120,.2);--glow:rgba(255,45,120,.45); }
body.bg-theme-void      { --board:#6b7fa8;--board2:#4f6090;--border:rgba(107,127,168,.22);--glow:rgba(107,127,168,.4); }
body.bg-theme-sunset    { --board:#ff9f43;--board2:#e8730b;--border:rgba(255,159,67,.22);--glow:rgba(255,159,67,.45); }

/* Themes: override CSS vars (version jour · boutons assortis au fond clair) */
html.light body.bg-theme-violet   { --board:#7c3aed;--board2:#6d28d9;--border:rgba(124,58,237,.25);--glow:rgba(124,58,237,.25); }
html.light body.bg-theme-aurora   { --board:#059669;--board2:#047857;--border:rgba(5,150,105,.25);--glow:rgba(5,150,105,.2); }
html.light body.bg-theme-cyber    { --board:#0891b2;--board2:#0e7490;--border:rgba(8,145,178,.25);--glow:rgba(8,145,178,.2); }
html.light body.bg-theme-space    { --board:#2563eb;--board2:#1d4ed8;--border:rgba(37,99,235,.25);--glow:rgba(37,99,235,.2); }
html.light body.bg-theme-synthwave{ --board:#db2777;--board2:#be185d;--border:rgba(219,39,119,.25);--glow:rgba(219,39,119,.2); }
html.light body.bg-theme-void      { --board:#475569;--board2:#334155;--border:rgba(71,85,105,.25);--glow:rgba(71,85,105,.18); }
html.light body.bg-theme-sunset    { --board:#e67e22;--board2:#d35400;--border:rgba(230,126,34,.25);--glow:rgba(230,126,34,.2); }

/* Static CSS backgrounds · version nuit */
#bg-layer.bg-nuit,     .shop-bg-preview.bg-nuit     { background:#06060e; }
#bg-layer.bg-ardoise,  .shop-bg-preview.bg-ardoise   { background:linear-gradient(135deg,#0f1923,#1a2a3a); }
#bg-layer.bg-brume,    .shop-bg-preview.bg-brume     { background:radial-gradient(ellipse at 50% 30%,#2d0060 0%,#0a0015 65%); }
#bg-layer.bg-aurore-deg,.shop-bg-preview.bg-aurore-deg{ background:linear-gradient(160deg,#0a1628 0%,#0d3320 35%,#0a1a28 65%,#0a0a28 100%); }
#bg-layer.bg-crepuscule,.shop-bg-preview.bg-crepuscule{ background:linear-gradient(180deg,#0a0018 0%,#2d0050 50%,#3d0040 100%); }
#bg-layer.bg-cyber,    .shop-bg-preview.bg-cyber     { background-color:#020c12;background-image:linear-gradient(rgba(0,255,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,200,.08) 1px,transparent 1px);background-size:40px 40px; }
#bg-layer.bg-hexagones,.shop-bg-preview.bg-hexagones { background-color:#060c18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92'%3E%3Cpath d='M40 0L80 23V69L40 92L0 69V23Z' fill='none' stroke='rgba(0%2C200%2C255%2C0.13)' stroke-width='1.5'/%3E%3C/svg%3E");background-size:80px 92px; }
/* Canvas bg bases (preview only) · version nuit */
#bg-layer.bg-circuit,    .shop-bg-preview.bg-circuit    { background:linear-gradient(135deg,#010e05,#020e08); }
#bg-layer.bg-etoile,     .shop-bg-preview.bg-etoile     { background:#02040c; }
#bg-layer.bg-particules, .shop-bg-preview.bg-particules { background:linear-gradient(135deg,#050815,#080520); }
#bg-layer.bg-pluie,      .shop-bg-preview.bg-pluie      { background:#000; }
#bg-layer.bg-vagues,     .shop-bg-preview.bg-vagues     { background:linear-gradient(180deg,#020818,#030a18); }
#bg-layer.bg-synthwave,  .shop-bg-preview.bg-synthwave  { background:linear-gradient(180deg,#0a0018 0%,#3d0050 45%,#220030 55%,#080010 100%); }
#bg-layer.bg-nebuleuse,  .shop-bg-preview.bg-nebuleuse  { background:radial-gradient(ellipse at 40% 40%,#1a0040 0%,#02000c 70%); }
#bg-layer.bg-aurores,    .shop-bg-preview.bg-aurores    { background:linear-gradient(180deg,#010508,#020c10); }
#bg-layer.bg-galaxie,    .shop-bg-preview.bg-galaxie    { background:#000208; }
#bg-layer.bg-tempete,    .shop-bg-preview.bg-tempete    { background:#030008; }
#bg-layer.bg-hologramme, .shop-bg-preview.bg-hologramme { background:linear-gradient(135deg,#010d14,#020810); }
/* Nouveaux fonds (collections rotation) · version nuit */
#bg-layer.bg-wax,        .shop-bg-preview.bg-wax        { background-color:#1a0d05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 4L56 30L30 56L4 30Z' fill='none' stroke='%23e08a2b' stroke-width='2'/%3E%3Ccircle cx='30' cy='30' r='6' fill='%23c0392b'/%3E%3Cpath d='M0 0L12 12M60 0L48 12M0 60L12 48M60 60L48 48' stroke='%232e8b57' stroke-width='2'/%3E%3C/svg%3E");background-size:60px 60px; }
#bg-layer.bg-marche-nuit,.shop-bg-preview.bg-marche-nuit{ background:radial-gradient(circle at 20% 30%,rgba(255,180,80,.5),transparent 8%),radial-gradient(circle at 70% 20%,rgba(255,120,60,.45),transparent 7%),radial-gradient(circle at 40% 72%,rgba(255,210,120,.4),transparent 6%),radial-gradient(circle at 85% 65%,rgba(255,150,70,.45),transparent 7%),linear-gradient(180deg,#0a1424,#050a16); }
#bg-layer.bg-terrain,    .shop-bg-preview.bg-terrain    { background-color:#0c6b25;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 40px,rgba(0,0,0,.05) 40px 80px),linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%); }
#bg-layer.bg-matrice,    .shop-bg-preview.bg-matrice    { background-color:#000600;background-image:repeating-linear-gradient(90deg,rgba(0,255,80,.14) 0 2px,transparent 2px 14px),linear-gradient(180deg,rgba(0,45,0,.55),rgba(0,10,0,.92)); }
#bg-layer.bg-harmattan,  .shop-bg-preview.bg-harmattan  { background:radial-gradient(circle at 75% 80%,rgba(255,60,180,.22),transparent 32%),radial-gradient(ellipse at 45% 38%,rgba(214,158,74,.38) 0%,rgba(40,24,10,.9) 70%),linear-gradient(180deg,#2a1a0a,#140c04); }
#bg-layer.bg-orage,      .shop-bg-preview.bg-orage      { background:radial-gradient(circle at 62% 28%,rgba(180,200,255,.14),transparent 26%),linear-gradient(180deg,#0a0e1a 0%,#161d33 52%,#090d18 100%); }
#bg-layer.bg-lagune,     .shop-bg-preview.bg-lagune     { background:linear-gradient(180deg,#2a0a3a 0%,#7a1f5a 34%,#d0603a 70%,#f0a050 100%); }

/* Static CSS backgrounds · version jour (mode clair) */
html.light #bg-layer.bg-nuit,     html.light .shop-bg-preview.bg-nuit     { background:linear-gradient(135deg,#e3f2fd,#bbdefb); }
html.light #bg-layer.bg-ardoise,  html.light .shop-bg-preview.bg-ardoise   { background:linear-gradient(135deg,#eceff1,#cfd8dc); }
html.light #bg-layer.bg-brume,    html.light .shop-bg-preview.bg-brume     { background:radial-gradient(ellipse at 50% 30%,#f3e5f5 0%,#e1bee7 65%); }
html.light #bg-layer.bg-aurore-deg,html.light .shop-bg-preview.bg-aurore-deg{ background:linear-gradient(160deg,#e0f7fa 0%,#c8e6c9 35%,#e1f5fe 65%,#e8eaf6 100%); }
html.light #bg-layer.bg-crepuscule,html.light .shop-bg-preview.bg-crepuscule{ background:linear-gradient(180deg,#fde7f3 0%,#f3e5f5 50%,#fce4ec 100%); }
html.light #bg-layer.bg-cyber,    html.light .shop-bg-preview.bg-cyber     { background-color:#e0f7fa;background-image:linear-gradient(rgba(0,131,143,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,131,143,.16) 1px,transparent 1px);background-size:40px 40px; }
html.light #bg-layer.bg-hexagones,html.light .shop-bg-preview.bg-hexagones { background-color:#e8f0fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92'%3E%3Cpath d='M40 0L80 23V69L40 92L0 69V23Z' fill='none' stroke='rgba(0%2C120%2C200%2C0.22)' stroke-width='1.5'/%3E%3C/svg%3E");background-size:80px 92px; }
/* Canvas bg bases (preview only) · version jour */
html.light #bg-layer.bg-circuit,    html.light .shop-bg-preview.bg-circuit    { background:linear-gradient(135deg,#e0f2e9,#d7f0e4); }
html.light #bg-layer.bg-etoile,     html.light .shop-bg-preview.bg-etoile     { background:linear-gradient(135deg,#dbeafe,#e0e7ff); }
html.light #bg-layer.bg-particules, html.light .shop-bg-preview.bg-particules { background:linear-gradient(135deg,#e3f2fd,#ede7f6); }
html.light #bg-layer.bg-pluie,      html.light .shop-bg-preview.bg-pluie      { background:#f1f5f9; }
html.light #bg-layer.bg-vagues,     html.light .shop-bg-preview.bg-vagues     { background:linear-gradient(180deg,#e1f5fe,#e0f7fa); }
html.light #bg-layer.bg-synthwave,  html.light .shop-bg-preview.bg-synthwave  { background:linear-gradient(180deg,#bbdefb 0%,#f8bbd0 45%,#ffe0b2 55%,#fff3e0 100%); }
html.light #bg-layer.bg-nebuleuse,  html.light .shop-bg-preview.bg-nebuleuse  { background:radial-gradient(ellipse at 40% 40%,#ede7f6 0%,#f3e5f5 70%); }
html.light #bg-layer.bg-aurores,    html.light .shop-bg-preview.bg-aurores    { background:linear-gradient(180deg,#e0f7fa,#e8f5e9); }
html.light #bg-layer.bg-galaxie,    html.light .shop-bg-preview.bg-galaxie    { background:#e8eaf6; }
html.light #bg-layer.bg-tempete,    html.light .shop-bg-preview.bg-tempete    { background:#eceff1; }
html.light #bg-layer.bg-hologramme, html.light .shop-bg-preview.bg-hologramme { background:linear-gradient(135deg,#e0f7fa,#e1f5fe); }
/* Nouveaux fonds (collections rotation) · version jour */
html.light #bg-layer.bg-wax,        html.light .shop-bg-preview.bg-wax        { background-color:#fff3e0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 4L56 30L30 56L4 30Z' fill='none' stroke='%23c0392b' stroke-width='2'/%3E%3Ccircle cx='30' cy='30' r='6' fill='%23e08a2b'/%3E%3Cpath d='M0 0L12 12M60 0L48 12M0 60L12 48M60 60L48 48' stroke='%232e8b57' stroke-width='2'/%3E%3C/svg%3E");background-size:60px 60px; }
html.light #bg-layer.bg-marche-nuit,html.light .shop-bg-preview.bg-marche-nuit{ background:radial-gradient(circle at 20% 30%,rgba(255,170,60,.35),transparent 8%),radial-gradient(circle at 70% 20%,rgba(255,120,60,.3),transparent 7%),linear-gradient(180deg,#fff3e0,#ffe0b2); }
html.light #bg-layer.bg-terrain,    html.light .shop-bg-preview.bg-terrain    { background-color:#66bb6a;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 40px,rgba(0,0,0,.05) 40px 80px); }
html.light #bg-layer.bg-matrice,    html.light .shop-bg-preview.bg-matrice    { background-color:#e8f5e9;background-image:repeating-linear-gradient(90deg,rgba(0,150,40,.18) 0 2px,transparent 2px 14px); }
html.light #bg-layer.bg-harmattan,  html.light .shop-bg-preview.bg-harmattan  { background:radial-gradient(ellipse at 45% 40%,rgba(214,158,74,.4) 0%,rgba(255,236,200,.9) 70%),linear-gradient(180deg,#ffecc7,#ffe0b2); }
html.light #bg-layer.bg-orage,      html.light .shop-bg-preview.bg-orage      { background:linear-gradient(180deg,#cfd8dc 0%,#b0bec5 52%,#cfd8dc 100%); }
html.light #bg-layer.bg-lagune,     html.light .shop-bg-preview.bg-lagune     { background:linear-gradient(180deg,#e1bee7 0%,#f8bbd0 34%,#ffcc80 70%,#ffe0b2 100%); }

/* Shop bg preview card */
.shop-bg-preview { width:100%;height:56px;border-radius:8px;margin-bottom:2px; }

/* ── Boost hint button in quiz ── */
.boost-hint-btn {
  background: rgba(251,191,36,.15);
  border: 1.5px solid #fbbf24;
  border-radius: 8px;
  color: #fbbf24;
  font-size: .82rem; font-weight: 700;
  padding: 5px 11px;
  cursor: pointer;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.boost-hint-btn:hover:not(:disabled) { background: rgba(251,191,36,.28); }
.boost-hint-btn:active:not(:disabled) { transform: scale(.93); }
.boost-hint-btn:disabled { opacity: .38; cursor: default; }

/* ── Effets de pseudo animés ─────────────────────────────────────────────── */
@keyframes nameeffect-blink-kf {
  0%,100% { opacity:1; text-shadow:0 0 8px currentColor,0 0 16px currentColor; }
  50%     { opacity:.4; text-shadow:none; }
}
@keyframes nameeffect-pulse-kf {
  0%,100% { text-shadow:0 0 4px currentColor; }
  50%     { text-shadow:0 0 14px currentColor,0 0 24px currentColor; }
}
@keyframes nameeffect-gradient-kf {
  0%   { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
@keyframes nameeffect-glitch-kf {
  0%,95%,100% { transform:translate(0); filter:none; }
  96%  { transform:translate(-2px,1px); filter:hue-rotate(90deg); }
  97%  { transform:translate(2px,-1px); filter:hue-rotate(-90deg); }
  98%  { transform:translate(-1px,2px); filter:brightness(1.4); }
}
@keyframes nameeffect-rainbow-kf {
  0%   { filter:hue-rotate(0deg); }
  100% { filter:hue-rotate(360deg); }
}
@keyframes nameeffect-sparks-kf {
  0%,100% { text-shadow:0 0 4px #fff, 1px -2px 6px #ffd700; }
  25%     { text-shadow:2px -3px 8px #ff6600,-2px 1px 8px #ffd700; }
  50%     { text-shadow:-1px -4px 10px #ffffff,2px 2px 8px #ff4500; }
  75%     { text-shadow:3px -1px 7px #ffd700,-1px -3px 9px #ff6600; }
}

.nameeffect-blink {
  animation: nameeffect-blink-kf 1.2s ease-in-out infinite;
}
.nameeffect-pulse {
  animation: nameeffect-pulse-kf 1.8s ease-in-out infinite;
}
.nameeffect-gradient {
  background: linear-gradient(90deg, #6366f1, #e879f9, #38bdf8, #6366f1);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nameeffect-gradient-kf 2s linear infinite;
}
.nameeffect-sparks {
  animation: nameeffect-sparks-kf 0.9s ease-in-out infinite;
}
.nameeffect-glitch {
  animation: nameeffect-glitch-kf 3s steps(1) infinite;
}
.nameeffect-rainbow {
  animation: nameeffect-rainbow-kf 1.5s linear infinite;
}
@keyframes nameeffect-flammes-kf {
  0%,100% { text-shadow:0 -1px 4px #ffcc00,0 -3px 8px #ff6600,0 -5px 12px #ff2200; }
  50%     { text-shadow:0 -2px 6px #ffe680,0 -5px 12px #ff8800,0 -8px 18px #ff3300; }
}
.nameeffect-flammes {
  color: #ffd24d;
  animation: nameeffect-flammes-kf 0.6s ease-in-out infinite;
}
@keyframes nameeffect-glace-kf {
  0%,100% { text-shadow:0 0 4px #cdeeff,0 0 9px #7ec8ff; }
  50%     { text-shadow:0 0 7px #ffffff,0 0 15px #a9dbff,0 1px 10px #6fb7ff; }
}
.nameeffect-glace {
  color: #dff3ff;
  animation: nameeffect-glace-kf 2s ease-in-out infinite;
}
@keyframes nameeffect-or-kf {
  0%   { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
.nameeffect-or {
  background: linear-gradient(90deg,#a67c00,#ffd700,#fff7a0,#ffd700,#a67c00);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(255,215,0,.35);
  animation: nameeffect-or-kf 2.2s linear infinite;
}

/* ── Titres joueur ───────────────────────────────────────────────────────── */
.player-title-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(99,102,241,.4);
  color: #818cf8;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
}

.player-honor-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(234,179,8,.22), rgba(251,146,60,.18));
  border: 1px solid rgba(234,179,8,.55);
  color: #fbbf24;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(251,191,36,.4);
}

/* ── Modal titre honorifique ─────────────────────────────────────────────── */
.honor-reward-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px 28px;
  max-width: 380px;
}
.honor-reward-icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(251,191,36,.6));
}
.honor-reward-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fbbf24;
  margin: 0;
  text-shadow: 0 0 10px rgba(251,191,36,.35);
}
.honor-reward-msg {
  font-size: .92rem;
  color: rgba(255,255,255,.8);
  margin: 0;
  line-height: 1.5;
}
html.light .honor-reward-msg { color: rgba(0,0,0,.7); }
html.light .honor-reward-title { color: #d97706; }

/* ── Annonce serveur ─────────────────────────────────────────────────────── */
.announcement-overlay { z-index: 9100; }
.announcement-box {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; text-align: center; padding: 32px 28px; max-width: 380px;
}
.announcement-icon { font-size: 2.8rem; line-height: 1; }
.announcement-msg {
  font-size: .95rem; color: var(--text); margin: 0; line-height: 1.6;
}

/* ── Classement : clic vers boutique ────────────────────────────────────── */
.lb-row-clickable { cursor: pointer; transition: background .15s; border-radius: 8px; }
.lb-row-clickable:hover { background: rgba(99,102,241,.08); }

/* ── Shop tile highlight (apres clic classement) ─────────────────────────── */
@keyframes shopTileGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99,102,241,.95), 0 0 22px rgba(99,102,241,.65); }
  50%       { box-shadow: 0 0 0 1px rgba(99,102,241,.1),  0 0  4px rgba(99,102,241,.05); }
}
.shop-tile-highlight { animation: shopTileGlow 0.5s ease-in-out 5; }

/* ── Skins Puissance 4 ───────────────────────────────────────────────────── */
.p4skin-p4token-neon .c4-cell.red    { box-shadow:0 0 10px 3px #ff4488; background:radial-gradient(circle,#ff88bb,#cc0044) !important; }
.p4skin-p4token-neon .c4-cell.yellow { box-shadow:0 0 10px 3px #44ffcc; background:radial-gradient(circle,#88ffee,#00ccaa) !important; }
.p4skin-p4token-goldsilver .c4-cell.red    { background:radial-gradient(circle,#ffd700,#b8860b) !important; box-shadow:0 0 6px 2px #ffd700; }
.p4skin-p4token-goldsilver .c4-cell.yellow { background:radial-gradient(circle,#e8e8e8,#888) !important; box-shadow:0 0 6px 2px #ccc; }
.p4skin-p4token-galaxy .c4-cell.red    { background:radial-gradient(circle,#cc44ff,#440088) !important; box-shadow:0 0 8px 3px #9900ff; }
.p4skin-p4token-galaxy .c4-cell.yellow { background:radial-gradient(circle,#4488ff,#001166) !important; box-shadow:0 0 8px 3px #0044cc; }
.p4skin-p4token-lavaice .c4-cell.red    { background:radial-gradient(circle,#ff6600,#cc2200) !important; box-shadow:0 0 8px 3px #ff4400; }
.p4skin-p4token-lavaice .c4-cell.yellow { background:radial-gradient(circle,#aaddff,#0088cc) !important; box-shadow:0 0 8px 3px #00aaff; }

/* ── Thèmes Échiquier ────────────────────────────────────────────────────── */
#chess-board.chess-theme-neon .chess-sq.light { background: #1a1a3a; }
#chess-board.chess-theme-neon .chess-sq.dark  { background: #0a0a20; }
#chess-board.chess-theme-neon .chess-sq.light .cp-w,
#chess-board.chess-theme-neon .chess-sq.light .cp-b { text-shadow: 0 0 8px #00ffff; }
#chess-board.chess-theme-neon .chess-sq.dark  .cp-w,
#chess-board.chess-theme-neon .chess-sq.dark  .cp-b { text-shadow: 0 0 8px #ff00ff; }

#chess-board.chess-theme-marble .chess-sq.light { background: #f0ece0; }
#chess-board.chess-theme-marble .chess-sq.dark  { background: #8b7355; }

#chess-board.chess-theme-cyber .chess-sq.light { background: #001a1a; }
#chess-board.chess-theme-cyber .chess-sq.dark  { background: #003333; }
#chess-board.chess-theme-cyber .chess-sq        { border: 1px solid rgba(0,255,200,.08); }

#chess-board.chess-theme-frosty .chess-sq.light { background: rgba(200,230,255,.25); backdrop-filter:blur(2px); }
#chess-board.chess-theme-frosty .chess-sq.dark  { background: rgba(100,160,220,.22); backdrop-filter:blur(2px); }

/* ── Bannières de victoire ───────────────────────────────────────────────── */
@keyframes victoryban-neon-kf {
  0%,100% { box-shadow:0 0 20px 4px #00ffff, 0 0 40px 8px rgba(0,255,255,.3); }
  50%     { box-shadow:0 0 30px 8px #ff00ff, 0 0 60px 16px rgba(255,0,255,.3); }
}
@keyframes victoryban-confetti-kf {
  0%   { transform:scale(1) rotate(-1deg); }
  25%  { transform:scale(1.04) rotate(1deg); }
  50%  { transform:scale(1.02) rotate(-0.5deg); }
  75%  { transform:scale(1.05) rotate(0.8deg); }
  100% { transform:scale(1) rotate(-1deg); }
}
@keyframes victoryban-flames-kf {
  0%,100% { border-color:#ff4400; box-shadow:0 0 16px 4px #ff4400, inset 0 0 20px rgba(255,100,0,.2); }
  50%     { border-color:#ffaa00; box-shadow:0 0 24px 8px #ffaa00, inset 0 0 30px rgba(255,180,0,.25); }
}
@keyframes victoryban-lightning-kf {
  0%,90%,100% { opacity:1; filter:brightness(1); }
  92%  { opacity:.5; filter:brightness(2); }
  94%  { opacity:1; filter:brightness(1); }
  96%  { opacity:.3; filter:brightness(3); }
}
@keyframes victoryban-crown-kf {
  0%   { transform:scale(1) translateY(0); }
  50%  { transform:scale(1.06) translateY(-4px); }
  100% { transform:scale(1) translateY(0); }
}

#game-status.victoryban-neon    { border-radius:12px; animation: victoryban-neon-kf 1.5s ease-in-out infinite; }
#game-status.victoryban-confetti { border-radius:12px; animation: victoryban-confetti-kf 0.6s ease-in-out infinite; }
#game-status.victoryban-flames  { border-radius:12px; border:2px solid #ff4400; animation: victoryban-flames-kf 1.2s ease-in-out infinite; }
#game-status.victoryban-lightning { border-radius:12px; animation: victoryban-lightning-kf 2s steps(1) infinite; }
#game-status.victoryban-crown   { border-radius:12px; animation: victoryban-crown-kf 1.4s ease-in-out infinite; }

/* ── Barre d'emotes ──────────────────────────────────────────────────────── */
.emote-bar {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(99,102,241,.08);
  border-top: 1px solid rgba(99,102,241,.15);
  border-bottom: 1px solid rgba(99,102,241,.15);
  overflow-x: auto;
  scrollbar-width: none;
}
.emote-bar::-webkit-scrollbar { display: none; }

.emote-btn {
  background: rgba(99,102,241,.12);
  border: 1.5px solid rgba(99,102,241,.25);
  border-radius: 8px;
  font-size: 1.2rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: background .12s, transform .1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.emote-btn:hover  { background: rgba(99,102,241,.28); transform: scale(1.12); }
.emote-btn:active { transform: scale(.92); }

.msg-emote {
  font-style: italic;
  background: rgba(99,102,241,.12) !important;
  border: 1px solid rgba(99,102,241,.25) !important;
}


/* ── Profil : défis, série, historique ─────────────────────────────────────── */
/* Bouton flottant en bas à gauche (coin libre, symétrique du bouton d'aide).
   Le coin haut-droit est déjà pris par le compteur de Libs et les réglages. */
.btn-profile-float {
  position: fixed;
  bottom: 74px; left: 20px;
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: linear-gradient(135deg,#7c5cff,#22d3ee); color: #fff;
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(124,92,255,.55);
  z-index: 52;
  transition: transform .15s, box-shadow .15s;
}
.btn-profile-float:hover { transform: scale(1.08); box-shadow: 0 0 26px rgba(124,92,255,.8); }
.profile-card-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: linear-gradient(135deg,#ff4d9d,#ff8a3d); color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(255,77,157,.5);
  border: 2px solid var(--bg);
}
.profile-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: calc(100vw - 32px); max-width: 480px; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
}
.profile-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.profile-modal-title { font-size: 1.15rem; margin: 0; }
.profile-body { padding: 16px 20px 22px; overflow-y: auto; }
.profile-section-title { font-size: .95rem; margin: 18px 0 10px; opacity: .9; }
.profile-section-title:first-of-type { margin-top: 8px; }

/* ── Écran Profil (onglet) ─────────────────────────────────────────────────── */
#screen-profile { justify-content: flex-start; }
.profile-screen-inner { width: 100%; max-width: 600px; margin: 0 auto; }
.profile-screen-title { font-size: 1.35rem; margin: 6px 0 4px; text-align: center; }
#screen-profile .profile-body { padding: 8px 4px 90px; overflow: visible; }
/* Sur PC la barre de nav est fixée en haut : on descend le contenu du profil
   pour que le titre « Mon profil » ne soit plus masqué par cette barre. */
@media (min-width: 601px) { #screen-profile { padding-top: 76px; } }

/* Sections repliables du profil (Casier, Historique) */
.profile-acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 14px 0 0; padding: 12px 14px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-size: .98rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s;
}
.profile-acc-btn:hover { border-color: var(--board); }
.profile-acc-chevron { transition: transform .2s; opacity: .6; font-size: .8rem; }
.profile-acc-btn.open .profile-acc-chevron { transform: rotate(180deg); }
.profile-acc-panel { margin-top: 10px; }
.profile-acc-panel:not(.open) { display: none !important; }

/* Cartes de navigation du profil (Casier, Historique, Récupération) */
.profile-nav-card {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin: 10px 0 0; padding: 14px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, transform .1s;
}
.profile-nav-card:hover  { border-color: var(--board); }
.profile-nav-card:active { transform: scale(.99); }
.pnc-icon { font-size: 1.5rem; flex-shrink: 0; }
.pnc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pnc-text > span { font-weight: 800; font-size: .98rem; }
.pnc-text small { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.pnc-arrow { color: var(--muted); font-size: 1.4rem; font-weight: 900; flex-shrink: 0; }

/* ── Hub Profil : sections repliables ──────────────────────────────────────
   Quatorze cartes identiques a la suite ne se hierarchisaient pas. Elles sont
   regroupees en quatre sections ; « Mon compte » est repliee par defaut et
   l'etat de chacune est retenu (voir ProfileSections dans app.js). */
.profile-section { width: 100%; margin: 18px 0 0; }
.profile-section > .profile-nav-card:first-of-type { margin-top: 8px; }
.profile-sec-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  transition: color .15s;
}
.profile-sec-head::-webkit-details-marker { display: none; }
.profile-sec-head:hover { color: var(--accent); }
.pst-chevron {
  margin-left: auto; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.profile-section[open] > .profile-sec-head .pst-chevron { transform: rotate(-135deg); }
.profile-section[open] > .profile-sec-head { color: var(--accent); }
/* Une section repliee ne doit pas garder la marge de sa derniere carte. */
.profile-section:not([open]) { margin-bottom: 0; }

/* Sous-pages (Casier / Historique) */
#screen-locker, #screen-history { justify-content: flex-start; }
.subpage-inner { width: 100%; max-width: 600px; margin: 0 auto; }
.subpage-inner .btn-back { margin-bottom: 6px; }
@media (min-width: 601px) { #screen-locker, #screen-history { padding-top: 76px; } }

/* Modal de récupération de progression */
.recovery-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  width: calc(100vw - 32px); max-width: 460px; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
}
.recovery-body { padding: 16px 20px 22px; overflow-y: auto; }
.recovery-intro { font-size: .86rem; line-height: 1.5; margin: 0 0 14px; }
.recovery-label { display: block; font-size: .8rem; font-weight: 700; opacity: .85; margin-bottom: 6px; }
.recovery-code-row, .recovery-restore-row { display: flex; gap: 8px; align-items: stretch; }
.recovery-input {
  flex: 1 1 auto; min-width: 0; width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card2); color: var(--text);
  font-size: .85rem; outline: none; font-family: monospace;
}
.recovery-input:focus { border-color: var(--board); }
/* Le bouton ne doit pas écraser le champ : il prend juste la largeur de son texte. */
.recovery-code-row .btn, .recovery-restore-row .btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
.recovery-warn { font-size: .76rem; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }
.recovery-warn.recovery-err { color: #f87171; }
.recovery-sep { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

/* ── Casier (cosmétiques possédés, en accordéon) ───────────────────────────── */
.locker-list { display: flex; flex-direction: column; gap: 8px; }
.locker-cat {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.locker-cat-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; background: transparent; border: none; cursor: pointer;
  color: var(--text); font-size: .86rem; font-weight: 700; text-align: left;
}
.locker-cat-btn-static { cursor: default; }
.locker-cat-ic { font-size: 1.05rem; flex-shrink: 0; }
.locker-cat-label { flex-shrink: 0; }
.locker-count {
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 1px 8px;
  font-size: .72rem; opacity: .85; font-weight: 700;
}
.locker-cat-eq {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  color: #4ade80; font-weight: 800; margin-left: 2px;
}
.locker-chevron { margin-left: auto; transition: transform .2s; opacity: .6; font-size: .8rem; }
.locker-cat.open .locker-chevron { transform: rotate(180deg); }
.locker-honor-name { margin-left: auto; font-weight: 600; font-size: .82rem; }

.locker-items {
  display: none; flex-direction: column; gap: 6px;
  padding: 0 11px 11px;
}
.locker-cat.open .locker-items { display: flex; }
.locker-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px; font-size: .82rem;
}
.locker-item.equipped { border-color: var(--board); box-shadow: inset 0 0 0 1px var(--board); }
.locker-item-name { flex: 1; min-width: 0; }
/* Aperçu visuel dans le casier */
.locker-item-preview {
  flex-shrink: 0; width: 62px; height: 34px; border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); font-size: .95rem;
}
.locker-item-preview .shop-bg-preview { width: 100%; height: 100%; }
.locker-item-preview .shop-emoji-preview { font-size: 1rem; }
.locker-item-preview .shop-cosmetic-preview,
.locker-item-preview .shop-fn-font-preview,
.locker-item-preview .shop-nameeffect-preview { font-size: .8rem; white-space: nowrap; }
.locker-item-preview .shop-bubble-preview { font-size: .7rem; padding: 2px 6px; }
.locker-item-preview .shop-title-tag { font-size: .6rem; }
.locker-eq {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  color: #4ade80; font-weight: 800;
}
.locker-eq-btn {
  flex-shrink: 0; border: 1px solid var(--board); background: var(--board);
  color: #fff; border-radius: 8px; padding: 5px 12px; font-size: .76rem;
  font-weight: 700; cursor: pointer; transition: opacity .15s, transform .1s;
}
.locker-eq-btn.on { background: transparent; color: var(--text); border-color: var(--border); }
.locker-eq-btn:active { transform: scale(.94); }
.locker-eq-btn:disabled { opacity: .5; cursor: default; }

/* Onglet Profil : la pastille se place en haut à droite de l'onglet. */
.nav-tab { position: relative; }
.nav-tab .profile-card-badge { top: 2px; right: 2px; border-color: var(--card); }

.streak-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,138,61,.18), rgba(255,77,110,.14));
  border: 1px solid rgba(255,138,61,.35);
}
.streak-flame { font-size: 2rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(255,138,61,.6)); }
.streak-main { font-weight: 700; font-size: 1rem; margin: 0; }
.streak-sub  { font-size: .8rem; opacity: .75; margin: 2px 0 0; }

.challenges-list { display: flex; flex-direction: column; gap: 10px; }
.challenge-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.challenge-row.done { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.challenge-info { flex: 1; min-width: 0; }
.challenge-name { font-size: .88rem; font-weight: 600; margin: 0 0 6px; }
.challenge-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.challenge-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7c5cff,#22d3ee); transition: width .4s ease; }
.challenge-count { font-size: .72rem; opacity: .65; margin: 5px 0 0; }
.challenge-claim-btn {
  border: none; cursor: pointer; white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; font-size: .8rem; font-weight: 700;
  background: linear-gradient(135deg,#ffce3a,#ff8a3d); color: #1a1200;
  box-shadow: 0 2px 10px rgba(255,138,61,.4);
}
.challenge-claim-btn:disabled { opacity: .6; cursor: default; }
.challenge-claimed { color: #34d399; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.challenge-reward-tag { color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }

.history-list { display: flex; flex-direction: column; gap: 7px; }
.history-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  font-size: .84rem;
}
.history-icon { font-size: 1.05rem; }
.history-game { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-result { font-weight: 700; font-size: .78rem; }
.history-result.win  { color: #34d399; }
.history-result.loss { color: #f87171; }
.history-result.draw { color: var(--muted); }
.history-score { font-weight: 600; color: #22d3ee; font-size: .8rem; }
.history-time { font-size: .72rem; opacity: .55; white-space: nowrap; }
.history-empty, .profile-anon { font-size: .84rem; opacity: .65; text-align: center; padding: 14px 8px; margin: 0; }

/* Badge « nombre de lecteurs » sur la couverture d'un livre. */
.read-readers {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  color: #fff; font-size: .72rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.18);
  z-index: 2; pointer-events: none;
}

/* Note « version originale » quand la traduction n'est pas encore disponible. */
.book-orig-note {
  background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.3);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 18px;
  font-size: .85rem; color: var(--muted);
}

/* Suite réservée (tome 2) : condition d'accès affichée dans la fiche du livre */
.book-sequel-note {
  background: rgba(255,180,60,.1); border: 1px solid rgba(255,180,60,.35);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 4px;
  font-size: .88rem; color: var(--text); width: 100%;
}
.book-sequel-note--ok {
  background: rgba(60,220,130,.1); border-color: rgba(60,220,130,.35);
}

/* ══ Boutique : vue par onglets (un seul rayon visible, plus de saut de scroll) ══ */
.shop-fn-section { display: none; }
.shop-fn-section.active { display: flex; }

/* ══ Casier : catégories en cartes ══ */
.locker-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.locker-cat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 14px; color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, transform .1s;
}
.locker-cat-card:hover  { border-color: var(--board); }
.locker-cat-card:active { transform: scale(.98); }
.locker-cat-card .locker-cat-ic { font-size: 1.6rem; }
.locker-cat-card .locker-cat-label { font-weight: 800; font-size: .9rem; }
.locker-cat-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.locker-cat-card-static { cursor: default; }
.locker-cat-card-static:hover { border-color: var(--border); }
.locker-back-cats {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: .84rem; font-weight: 700; padding: 4px 0; margin-bottom: 6px;
}
.locker-back-cats:hover { color: var(--text); }
.locker-detail-title { font-size: 1rem; font-weight: 800; margin: 0 0 10px; }
.locker-items-grid { display: flex; flex-direction: column; gap: 6px; }

/* ══ Profil : carte danger (réinitialiser le compte) ══ */
.profile-nav-card-danger { border-color: rgba(248,113,113,.4); }
.profile-nav-card-danger:hover { border-color: #f87171; }
.profile-nav-card-danger .pnc-icon { filter: none; }

/* Bouton danger + case de confirmation dans la modal de réinitialisation */
.btn-danger { background: #ef4444; border: 1px solid #ef4444; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #dc2626; }
.btn-danger:disabled { opacity: .5; cursor: default; }
.recovery-confirm-check {
  display: flex; align-items: flex-start; gap: 9px; font-size: .82rem;
  line-height: 1.4; margin: 0 0 14px; cursor: pointer;
}
.recovery-confirm-check input { margin-top: 2px; flex-shrink: 0; width: 17px; height: 17px; }
.recovery-reset-btn { width: 100%; margin-top: 4px; }

/* ══ Écran de bienvenue (première visite) : machine à écrire ══ */
.overlay-welcome {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, #1a1140, #0a0618 70%);
}
.overlay-welcome.hidden { display: none; }
.welcome-stage { text-align: center; max-width: 560px; }
.welcome-type {
  font-size: clamp(1.5rem, 6vw, 2.6rem); font-weight: 900; color: #fff;
  margin: 0; line-height: 1.25; min-height: 1.3em;
  text-shadow: 0 0 24px rgba(124,92,255,.55);
}
.welcome-caret {
  display: inline-block; color: #a78bfa; font-weight: 400;
  animation: welcome-blink 1s steps(1) infinite;
}
@keyframes welcome-blink { 50% { opacity: 0; } }
.welcome-icons { display: flex; gap: 14px; justify-content: center; margin: 26px 0 30px; min-height: 2.4rem; }
.welcome-icon {
  font-size: clamp(1.6rem, 7vw, 2.4rem); opacity: 0;
  animation: welcome-pop .5s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes welcome-pop {
  0%   { opacity: 0; transform: translateY(16px) scale(.4); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-start { min-width: 180px; animation: welcome-fadein .5s ease forwards; }
.welcome-start.hidden { display: none; }
@keyframes welcome-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Jauges de defis : la piste etait invisible en theme jour (blanc sur blanc). */
html.light .challenge-bar { background: rgba(0,0,0,.14); }

/* Sous-titre des defis permanents */
.perm-sub { font-size: .78rem; color: var(--muted); margin: -4px 0 10px; line-height: 1.45; }

/* Choix du theme dans l'onboarding */
.onboard-theme-row { display: flex; gap: 10px; margin-bottom: 4px; }
.onboard-theme-btn { flex: 1; }
.onboard-theme-btn.onboard-theme-active {
  border-color: var(--board); box-shadow: inset 0 0 0 1px var(--board);
  font-weight: 800;
}

/* ══ Menu Pluie d'emojis (Profil) ══ */
.emojirain-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.emojirain-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, transform .1s;
}
.emojirain-opt:hover  { border-color: var(--board); }
.emojirain-opt:active { transform: scale(.99); }
.emojirain-opt.selected { border-color: var(--board); box-shadow: inset 0 0 0 1px var(--board); }
.emojirain-opt.locked { opacity: .75; }
.emojirain-opt-ic { font-size: 1.25rem; flex-shrink: 0; }
.emojirain-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.emojirain-opt-text > span { font-weight: 700; font-size: .88rem; }
.emojirain-opt-text small { font-size: .95rem; letter-spacing: 2px; margin-top: 2px; }
.emojirain-check { color: #4ade80; font-weight: 900; font-size: 1.05rem; flex-shrink: 0; }
.emojirain-unlock {
  flex-shrink: 0; font-size: .74rem; font-weight: 800; white-space: nowrap;
  background: var(--board); color: #fff; border-radius: 999px; padding: 4px 10px;
}
.emojirain-custom-wrap { margin-bottom: 14px; }

/* ══ Profil sur mobile / tablette : rien ne doit cacher les infos ══ */
@media (max-width: 900px) {
  /* Les boutons flottants (Libs, reglages, aide, commentaire, assistant)
     recouvraient les cartes et defis : on les masque sur cet ecran, ils
     restent accessibles depuis l'accueil. */
  body.screen-profile-active #libs-counter,
  body.screen-profile-active .btn-settings-float,
  body.screen-profile-active .btn-help-float,
  body.screen-profile-active .btn-comment-float,
  body.screen-profile-active .btn-chatbot-float { display: none !important; }
  /* La barre de nav du bas ne doit pas recouvrir les derniers defis. */
  #screen-profile .profile-body { padding-bottom: 84px; }
}

/* ══ Quiz : animations de reveal (plus vivant) ══ */
.tg-reveal { animation: tg-reveal-pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes tg-reveal-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tg-choice.correct { animation: tg-correct-glow .9s ease; }
@keyframes tg-correct-glow {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.9); }
  100% { box-shadow: 0 0 0 14px rgba(74,222,128,0); }
}
.tg-choice.tg-shake { animation: tg-shake .45s ease; }
@keyframes tg-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.tg-points-pop {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  font-size: 1.5rem; font-weight: 900; color: #4ade80; pointer-events: none;
  text-shadow: 0 0 14px rgba(74,222,128,.7); z-index: 20;
  animation: tg-points-fly 1.3s ease forwards;
}
.tg-points-pop.fast { color: #ffce3a; text-shadow: 0 0 16px rgba(255,206,58,.8); font-size: 1.7rem; }
@keyframes tg-points-fly {
  0%   { opacity: 0; transform: translate(-50%, 16px) scale(.6); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
.tg-burst {
  position: fixed; z-index: 9999; pointer-events: none; font-size: 1.15rem;
  animation: tg-burst-fly 1s ease-out forwards;
}
@keyframes tg-burst-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(.6); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.25); }
}
.tg-chip-bump { animation: tg-chip-bump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes tg-chip-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tg-chip-gain { color: #eaffea; font-weight: 900; }

/* ══ Boutique mobile : barre de categories compacte (icone seule) ══
   Le bloc equivalent plus haut etait ecrase par la definition de base
   (148px) declaree apres lui : ici, en fin de fichier, il gagne. */
@media (max-width: 700px) {
  .shop-fn-nav { width: 52px; min-width: 52px; padding: 8px 4px; }
  .shop-fn-nav-btn { justify-content: center; padding: 9px 4px; }
  .shop-nav-label { display: none; }
  .shop-nav-icon { font-size: 1.1rem; line-height: 1; }
  .shop-fn-content { padding: 14px 10px 40px; }
}

/* ══ Reglages : le bouton flottant en haut a droite est retire, l'acces se
   fait via la carte Reglages du Profil. Le panneau se centre desormais. ══ */
.btn-settings-float { display: none !important; }
.settings-panel {
  top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  max-height: 86dvh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
}

/* ══ Tournoi du samedi (ecran Events) ══ */
.tournament-card {
  width: 100%; max-width: 480px; margin: 0 auto 18px;
  background: linear-gradient(135deg, rgba(255,206,58,.1), rgba(124,92,255,.08));
  border: 1px solid rgba(255,206,58,.35); border-radius: var(--radius);
  padding: 16px 18px;
}
.tournament-card h2 { font-size: 1.1rem; margin-bottom: 6px; }
.tournament-desc { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.tournament-status { font-size: .84rem; font-weight: 700; margin-bottom: 8px; }
.tournament-status.live { color: #ffce3a; animation: tournament-blink 1.6s ease infinite; }
@keyframes tournament-blink { 50% { opacity: .55; } }
.tournament-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 8px; margin-bottom: 4px;
  background: rgba(255,255,255,.05); font-size: .84rem;
}
html.light .tournament-row { background: rgba(0,0,0,.05); }
.tournament-empty { font-size: .8rem; color: var(--muted); }
.tournament-champion { font-size: .82rem; font-weight: 700; color: #ffce3a; margin-top: 8px; }

/* ══ Mise (duel) ══ */
.stake-row { margin: 10px 0 4px; }
.stake-label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 6px; }
.stake-btns { display: flex; gap: 6px; }
.stake-btn {
  flex: 1; padding: 8px 4px; border-radius: 10px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  font-size: .8rem; font-weight: 700; transition: border-color .15s;
}
.stake-btn.active { border-color: #ffce3a; box-shadow: inset 0 0 0 1px #ffce3a; color: #ffce3a; }

/* ══ Annonces dans la carte News ══ */
.news-announce {
  background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.3);
  border-radius: 8px; padding: 7px 9px; margin-bottom: 6px;
}

/* ── Fin de quiz : podium anime + partage ── */
.tg-podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; width: 100%; max-width: 420px; margin: 4px auto 6px;
}
.tg-podium-col {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; min-width: 0;
  animation: tgPodiumRise .6s cubic-bezier(.2,1.4,.4,1) backwards;
}
.tg-podium-p1 { animation-delay: .45s; }
.tg-podium-p2 { animation-delay: .15s; }
.tg-podium-p3 { animation-delay: .3s; }
@keyframes tgPodiumRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.tg-podium-crown { font-size: 1.5rem; animation: tgCrownBob 1.6s ease-in-out infinite; }
@keyframes tgCrownBob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
.tg-podium-medal { font-size: 1.6rem; }
.tg-podium-name {
  font-weight: 800; font-size: .85rem; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tg-podium-pts { font-size: .78rem; font-weight: 700; opacity: .85; }
.tg-podium-block {
  width: 100%; border-radius: 10px 10px 4px 4px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.tg-podium-p1 .tg-podium-block { height: 86px; box-shadow: 0 0 22px rgba(251,191,36,.55); }
.tg-podium-p2 .tg-podium-block { height: 60px; }
.tg-podium-p3 .tg-podium-block { height: 44px; }
.tg-podium-col.me .tg-podium-name { color: var(--accent); }
.tg-podium-p1 .tg-podium-name { font-size: .95rem; }
.tg-podium-msg {
  margin: 2px 0 0; font-weight: 800; font-size: .95rem; text-align: center;
  animation: tgPodiumRise .5s .7s backwards;
}
.tg-podium-msg.win { color: #fbbf24; font-size: 1.05rem; text-shadow: 0 0 14px rgba(251,191,36,.5); }
.tg-share-btn { margin-top: 10px; animation: tgPodiumRise .5s .85s backwards; }

/* ── Niveau et XP (profil) ── */
.level-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--board); border-radius: 14px;
  padding: 10px 14px; margin-bottom: 12px;
  position: relative; overflow: hidden;
  border: 1px solid transparent;
  transition: background .6s, border-color .6s, box-shadow .6s;
}
/* Paliers : la bande devient de plus en plus belle avec le niveau. */
.level-tier-1 { background: linear-gradient(135deg, #334155, #1e293b); }
.level-tier-2 { background: linear-gradient(135deg, #0e7490, #155e75); border-color: rgba(34,211,238,.4); }
.level-tier-3 { background: linear-gradient(135deg, #6d28d9, #4c1d95); border-color: rgba(167,139,250,.5); box-shadow: 0 0 18px rgba(139,92,246,.35); }
.level-tier-4 { background: linear-gradient(135deg, #b45309, #92400e); border-color: rgba(251,191,36,.55); box-shadow: 0 0 20px rgba(245,158,11,.4); }
.level-tier-5 {
  background: linear-gradient(135deg, #f59e0b, #ea580c, #db2777, #7c3aed);
  background-size: 300% 300%;
  border-color: rgba(251,191,36,.8);
  box-shadow: 0 0 26px rgba(236,72,153,.5);
  animation: levelShine 6s ease infinite;
}
@keyframes levelShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Sur bande coloree, le texte et la barre restent bien lisibles. */
.level-tier-2 .level-main, .level-tier-3 .level-main, .level-tier-4 .level-main, .level-tier-5 .level-main,
.level-tier-2 .level-badge, .level-tier-3 .level-badge, .level-tier-4 .level-badge, .level-tier-5 .level-badge,
.level-tier-2 .level-sub, .level-tier-3 .level-sub, .level-tier-4 .level-sub, .level-tier-5 .level-sub { color: #fff; }
.level-tier-2 .level-bar, .level-tier-3 .level-bar, .level-tier-4 .level-bar, .level-tier-5 .level-bar { background: rgba(255,255,255,.25); }
.level-tier-3 .level-bar-fill, .level-tier-4 .level-bar-fill, .level-tier-5 .level-bar-fill { background: linear-gradient(90deg,#fff,#fde68a); }
.level-badge { font-size: 1.05rem; font-weight: 900; white-space: nowrap; }
.level-texts { flex: 1; min-width: 0; }
.level-main { margin: 0; font-weight: 800; font-size: .9rem; }
.level-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); margin: 4px 0; overflow: hidden; }
html.light .level-bar { background: rgba(0,0,0,.12); }
.level-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,#6366f1,#a855f7); transition: width .6s; }
.level-sub { margin: 0; font-size: .7rem; opacity: .75; }
.vip-badge {
  font-size: .78rem; font-weight: 900; color: #fbbf24;
  border: 1px solid rgba(251,191,36,.5); border-radius: 10px; padding: 3px 8px;
  text-shadow: 0 0 10px rgba(251,191,36,.5); white-space: nowrap;
}
.vip-badge.hidden { display: none; }
.vip-perks { margin: 0 0 12px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }

/* ── Roue de la fortune ── */
.wheel-body { display: flex; flex-direction: column; align-items: center; }
.wheel-wrap { position: relative; width: 200px; height: 214px; margin: 6px auto; }
.wheel-pointer { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 1.3rem; color: #fbbf24; z-index: 2; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.wheel-disc {
  position: absolute; top: 14px; left: 0;
  width: 200px; height: 200px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.25);
  box-shadow: 0 0 24px rgba(99,102,241,.4);
}
.wheel-label {
  position: absolute; top: 50%; left: 50%;
  margin: -10px 0 0 -20px; width: 40px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  transform-origin: center;
}

/* ── Amis ── */
.friends-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 40vh; overflow-y: auto; }
.friend-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--board); border-radius: 12px; padding: 8px 12px;
}
.friend-dot { width: 10px; height: 10px; border-radius: 50%; background: #64748b; flex: none; }
.friend-dot.on { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.7); }
.friend-name { flex: 1; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-level { opacity: .7; font-weight: 800; }
.friend-challenge { padding: 5px 10px; font-size: .75rem; }
/* Les boutons .btn valent width:100% par defaut : dans une ligne d'ami en flex,
   il faut les remettre en largeur auto pour ne pas ecraser le nom (flex:1). */
.friend-gift, .friend-challenge, .friend-pick-go, .friend-row .btn {
  width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
}
.friend-gift { padding: 6px 10px; font-size: .95rem; }
.friend-remove { background: none; border: none; color: inherit; opacity: .55; cursor: pointer; font-size: .95rem; padding: 4px; }
.friend-remove:hover { opacity: 1; color: #ef4444; }
.friend-challenge-banner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: var(--board); border: 1px solid rgba(99,102,241,.6);
  border-radius: 14px; padding: 10px 16px; z-index: 300;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  font-size: .9rem; font-weight: 700;
  max-width: calc(100vw - 24px);
  animation: tgPodiumRise .4s backwards;
}
.friend-challenge-banner .btn { padding: 6px 12px; font-size: .8rem; }

/* ── Test de QI ── */
.iq-head { display: flex; justify-content: space-between; font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.iq-timer { color: #fbbf24; }
.iq-question { font-weight: 800; font-size: 1rem; margin: 6px 0 12px; }
.iq-choices { display: flex; flex-direction: column; gap: 8px; }
.iq-choice {
  border: 1px solid rgba(99,102,241,.4); border-radius: 12px;
  background: var(--board); color: inherit;
  padding: 10px 14px; font-size: .9rem; font-weight: 700;
  cursor: pointer; text-align: left; transition: transform .1s, border-color .15s;
}
.iq-choice:hover { border-color: #6366f1; }
.iq-choice:active { transform: scale(.97); }
.iq-result-value { font-size: 1.4rem; font-weight: 900; text-align: center; color: var(--accent); margin: 10px 0; }

/* ── Salon Ludo (ecran d'attente) ── */
.waiting-seats { list-style: none; padding: 0; margin: 12px auto 4px; width: min(100%, 360px); display: flex; flex-direction: column; gap: 7px; }
  background: rgba(255,255,255,.06); border: 1px solid var(--border); text-align: left; }
#btn-ludo-start { margin: 8px auto 4px; min-width: 220px; }
#btn-ludo-start:disabled { opacity: .5; }

/* ── Offre flash (boutique) ── */
.shop-flash {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 14px 8px; padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(251,191,36,.18), rgba(239,68,68,.18));
  border: 1px solid rgba(251,191,36,.55);
  font-size: .85rem; font-weight: 700;
}
.shop-flash.hidden { display: none; }
.shop-flash-tag { color: #fbbf24; font-weight: 900; animation: flashBlink 1.2s ease-in-out infinite; }
@keyframes flashBlink { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.shop-flash-prices s { opacity: .6; margin-right: 4px; }
.shop-flash-prices strong { color: #fbbf24; font-size: 1rem; }
.shop-flash-timer { opacity: .85; font-size: .75rem; margin-left: auto; }
.shop-flash-buy { padding: 6px 14px; font-size: .8rem; }

/* ── Tournoi dans la carte News (deplace depuis Events) ── */
.news-tournament { margin: 8px 0 0; padding: 10px 12px; }
.news-tournament h2 { font-size: .85rem; margin: 0 0 4px; }
.news-tournament .tournament-desc { font-size: .68rem; margin: 0 0 6px; opacity: .8; }
.news-tournament .tournament-status { font-size: .72rem; }
.news-tournament .tournament-row { font-size: .72rem; padding: 4px 8px; }
.news-tournament .tournament-champion { font-size: .72rem; }

/* ── Fiche joueur + cadeaux amis ── */
.playercard-level { font-size: 1.05rem; font-weight: 900; margin: 4px 0 8px; color: var(--accent); }
.friend-gift { padding: 5px 9px; font-size: .8rem; }
.giftrecv-modal { text-align: center; }
.giftrecv-modal .profile-modal-title { justify-content: center; }
#friendgift-amounts { justify-content: center; margin: 8px 0; }

/* ── Compte a rebours de retrait d'un article (catalogue admin) ── */
.shop-tile-timer {
  position: absolute; bottom: 34px; left: 6px;
  background: rgba(0,0,0,.65); color: #fbbf24;
  font-size: .6rem; font-weight: 800;
  padding: 2px 7px; border-radius: 8px;
  pointer-events: none;
}

/* ── Indication de difficulte du quiz ── */
.trivia-diff-hint { font-size: .72rem; opacity: .75; margin: 4px 0 8px; text-align: center; }

/* ── Rayon Emotes du profil (achat + équipement) ── */
.locker-emote-slots { opacity: .7; font-weight: 600; font-size: .78rem; margin-left: 6px; }
.locker-emote-buy {
  border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg,#6366f1,#a855f7); color: #fff;
  font-weight: 800; font-size: .8rem; padding: 7px 12px;
  transition: transform .1s, box-shadow .15s;
}
.locker-emote-buy:hover  { box-shadow: 0 0 14px rgba(99,102,241,.7); }
.locker-emote-buy:active { transform: scale(.94); }
.locker-emote-buy:disabled { opacity: .5; cursor: default; }
.locker-emote-locked .locker-item-preview { opacity: .82; }
.locker-emote-timer { display: block; font-size: .62rem; color: #fbbf24; font-weight: 800; margin-top: 2px; }

/* ── Sections Mes amis (demandes en attente + liste) ── */
.friends-section-label { font-size: .75rem; font-weight: 800; opacity: .7; margin: 10px 2px 4px; text-transform: uppercase; letter-spacing: .04em; }
.friends-section-label:first-child { margin-top: 0; }
.friend-req-row { border: 1px solid rgba(99,102,241,.45); }
.friend-req-accept, .friend-req-decline { width: auto; flex: 0 0 auto; padding: 6px 12px; font-size: .78rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Finition visuelle (fondations) : matiere, focus clavier, mouvement reduit.
   Ajoute a l'existant sans le remplacer.
   ══════════════════════════════════════════════════════════════════════════ */

/* Liseré de lumiere en haut des cartes principales : effet « verre poli »
   sans blur (leger, GPU-friendly, invisible pour les lecteurs d'ecran). */
.landing-card, .profile-nav-card { position: relative; }
.landing-card::before, .profile-nav-card::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: var(--shine); opacity: .4; pointer-events: none; border-radius: 1px;
}
html.light .landing-card::before, html.light .profile-nav-card::before {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.4), transparent);
  opacity: .55;
}

/* Anneau de focus visible UNIQUEMENT au clavier (accessibilite priorite 1).
   La souris/le tactile ne le declenchent pas, donc aucun changement visuel
   pour la majorite des joueurs. */
:focus-visible { outline: 2px solid var(--board); outline-offset: 2px; border-radius: 8px; }
*:focus:not(:focus-visible) { outline: none; }

/* Respecte le reglage systeme « reduire les animations » : coupe les
   animations decoratives pour les joueurs sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Finitions visibles : halo pulsant, entrees en cascade, skeletons.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Halo pulsant sous les actions cles (Libs, VIP, CTA principal) ── */
@keyframes haloIndigo {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 18px var(--glow); }
}
@keyframes haloGold {
  0%, 100% { box-shadow: var(--elev-1); }
  50%      { box-shadow: var(--elev-1), 0 0 20px rgba(251,191,36,.5); }
}
/* Compteur de Libs : respiration lente et discrete (money = point d'attention). */
.libs-counter:not(.hidden) { animation: haloIndigo 3s var(--ease-out) infinite; }
/* Carte Pass VIP : halo dore premium. */
#go-vip { animation: haloGold 3.4s var(--ease-out) infinite; }
/* CTA principal : glow present (pas de pulse pour ne pas surcharger), qui
   s'intensifie au survol. */
.btn-primary { box-shadow: 0 4px 16px rgba(99,102,241,.28); }
.btn-primary:hover { box-shadow: 0 6px 24px var(--glow); }

/* ── Entrees en cascade (stagger) des grilles principales ── */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-card, .profile-nav-card { animation: cardRise .42s var(--ease) backwards; }
.landing-grid .landing-card:nth-child(1) { animation-delay: .04s; }
.landing-grid .landing-card:nth-child(2) { animation-delay: .10s; }
.landing-grid .landing-card:nth-child(3) { animation-delay: .16s; }
.landing-grid .landing-card:nth-child(4) { animation-delay: .22s; }
.profile-nav-card:nth-child(1) { animation-delay: .04s; }
.profile-nav-card:nth-child(2) { animation-delay: .09s; }
.profile-nav-card:nth-child(3) { animation-delay: .14s; }
.profile-nav-card:nth-child(4) { animation-delay: .19s; }
.profile-nav-card:nth-child(5) { animation-delay: .24s; }
.profile-nav-card:nth-child(n+6) { animation-delay: .28s; }
/* Un refresh qui restaure un ecran ne rejoue pas les cascades. */
.screen[data-restored] .landing-card,
.screen[data-restored] .profile-nav-card { animation: none; }

/* ── Skeletons de chargement (shimmer) ── */
@keyframes skelShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skel {
  background: linear-gradient(100deg, var(--card2) 40%, rgba(255,255,255,.07) 50%, var(--card2) 60%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.read-grid.is-skel { pointer-events: none; }
.skel-card { display: flex; flex-direction: column; gap: 8px; }
.skel-cover { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius); }
.skel-line { height: 12px; border-radius: 6px; }
.skel-line.short { width: 60%; }

/* ══════════════════════════════════════════════════════════════════════════
   Navigation : reaction vivante de l'onglet qui devient actif (etape 4).
   ══════════════════════════════════════════════════════════════════════════ */
.nav-tab .nav-tab-icon { transition: transform .18s var(--ease); }
/* L'onglet actif se souleve d'un cheveu (au-dela du fond pilule existant). */
.nav-tab.active { transform: translateY(-1px); }
/* Son icone rebondit a chaque activation (rejouee car la classe est re-ajoutee). */
.nav-tab.active .nav-tab-icon { animation: navPop .42s var(--ease); }
@keyframes navPop {
  0%   { transform: scale(.72) rotate(-8deg); }
  55%  { transform: scale(1.25) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Transitions d'ecran directionnelles entre onglets (etape 5).
   Plus specifiques que `.screen.active` (screenIn) donc elles priment.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes navSlideRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes navSlideLeft  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.screen.active.nav-slide-right { animation: navSlideRight .3s var(--ease); }
.screen.active.nav-slide-left  { animation: navSlideLeft  .3s var(--ease); }

/* ══════════════════════════════════════════════════════════════════════════
   Confettis de victoire (etape 6) : declenches sur victoire, champion de quiz
   et passage de niveau. DOM leger, plafonne cote JS, respecte reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4000; overflow: hidden; }
.confetti-bit {
  position: absolute; top: 0; left: 0;
  will-change: transform, opacity;
  animation: confettiFall var(--dur, 1.4s) cubic-bezier(.2,.6,.35,1) forwards;
}
@keyframes confettiFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, 100vh), 0) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Idées & suggestions (tableau communautaire, votes ▲▼).
   ══════════════════════════════════════════════════════════════════════════ */
.screen-ideas { padding: 0; justify-content: flex-start; align-items: stretch; gap: 0; }
.ideas-wrap { max-width: 760px; margin: 0 auto; padding: 84px 16px 96px; width: 100%; }
.ideas-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ideas-h1 {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; margin: 0;
  background: linear-gradient(135deg, #a78bff, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ideas-sub { color: var(--muted); font-size: .92rem; margin: 0; }
.ideas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ideas-sort { display: inline-flex; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.ideas-sort-btn { border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: .84rem; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.ideas-sort-btn.active { background: var(--board); color: #fff; }
.ideas-new-btn { width: auto; flex: 0 0 auto; }

.ideas-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ideas-status { margin: 48px auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.idea-card {
  display: flex; gap: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--elev-1); animation: cardRise .38s var(--ease) backwards;
}
.idea-pinned { border-color: rgba(251,191,36,.5); box-shadow: 0 0 0 1px rgba(251,191,36,.25), var(--elev-1); }
.idea-votes { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; width: 44px; }
.idea-vote {
  border: none; background: var(--card2); color: var(--muted); cursor: pointer;
  width: 38px; height: 30px; border-radius: 10px; font-size: 1rem; line-height: 1;
  transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.idea-vote:active { transform: scale(.88); }
.idea-vote.up.on   { background: rgba(52,211,153,.2);  color: #34d399; }
.idea-vote.down.on { background: rgba(248,113,113,.2); color: #f87171; }
.idea-score { font-weight: 800; font-size: .95rem; color: var(--text); }
.idea-body { flex: 1; min-width: 0; }
.idea-title { margin: 0; font-weight: 800; font-size: 1rem; line-height: 1.35; word-break: break-word; }
.idea-desc { margin: 6px 0 0; color: var(--text); opacity: .9; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.idea-meta { margin: 8px 0 0; color: var(--muted); font-size: .8rem; }
.idea-del { border: none; background: none; color: #f87171; font-weight: 700; cursor: pointer; padding: 0; font-size: .8rem; }
.idea-badge { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.idea-badge-planned  { background: rgba(99,102,241,.2);  color: var(--accent); }
.idea-badge-done     { background: rgba(52,211,153,.2);  color: #34d399; }
.idea-badge-rejected { background: rgba(248,113,113,.18); color: #f87171; }

/* ── Icones SVG d'interface (remplacent les emojis, couleurs du theme) ── */
.nav-tab-icon svg { width: 19px; height: 19px; display: block; }
.landing-icon svg { width: 40px; height: 40px; display: block; margin: 0 auto; }
.pnc-icon svg     { width: 24px; height: 24px; display: block; }
.nav-tab-icon:has(svg), .landing-icon:has(svg), .pnc-icon:has(svg) { line-height: 0; }
/* Les icones des cartes prennent l'accent indigo ; la nav suit la couleur de l'onglet. */
.landing-icon { color: var(--accent); }
.pnc-icon     { color: var(--accent); }
.profile-nav-card-danger .pnc-icon { color: var(--red); }

/* Icones dans la cloche, le chatbot et les petits libelles du profil. */
.notif-bell-ic svg { width: 22px; height: 22px; display: block; }
.btn-chatbot-float svg { width: 26px; height: 26px; display: block; }
.level-badge-ic svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
.vip-badge-ic svg   { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
.pbr-icon svg       { width: 20px; height: 20px; display: block; color: var(--accent); }
.oqt-ic svg, .pbt-ic svg { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; color: var(--accent); }
.ob-check svg       { width: 18px; height: 18px; display: block; }
.onboard-step.done .ob-check { color: #22c55e; }
.onboard-step:not(.done) .ob-check { color: var(--muted); }

/* Compteur de Libs retire de l'en-tete (boutique desormais dans la barre de nav) */
.libs-counter { display: none !important; }

/* ── Ligne « Solde » du profil (la boutique est un onglet a part) ── */
.profile-balance-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, transform .1s;
}
.profile-balance-row:hover  { border-color: var(--board); }
.profile-balance-row:active { transform: scale(.99); }
/* Affichage seul : ni curseur main, ni effet de survol/appui. */
/* Banniere de maintenance (bandeau haut, non bloquant). */
.maintenance-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3000;
  background: linear-gradient(90deg, #b45309, #d97706);
  color: #fff; text-align: center; font-weight: 700; font-size: .9rem;
  padding: 8px 40px 8px 14px; box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.maintenance-banner.hidden { display: none; }

/* Cadeau du jour : gros emoji anime au-dessus du message. */
/* Centre de notifications (cloche) */
.notif-bell {
  position: absolute; top: 14px; right: 12px; z-index: 950;
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card2); color: var(--text); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.notif-bell.hidden { display: none; }
/* Jamais de cloche par-dessus la boutique. */
body.screen-shop-active .notif-bell,
body.screen-shop-active .notif-panel { display: none !important; }
.notif-bell.has-unread { animation: bellRing 1.4s ease-in-out infinite; }
@keyframes bellRing { 0%,92%,100% { transform: rotate(0); } 94% { transform: rotate(12deg); } 96% { transform: rotate(-10deg); } 98% { transform: rotate(6deg); } }
.notif-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.notif-count.hidden { display: none; }
.notif-panel {
  position: absolute; top: 60px; right: 12px; z-index: 951; width: min(320px, calc(100vw - 24px));
  max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.notif-panel.hidden { display: none; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--hairline, var(--border)); font-weight: 800; }
.notif-clear { background: none; border: none; color: var(--muted); font-size: .78rem; cursor: pointer; }
.notif-list { padding: 6px; }
.notif-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 8px; border-radius: 10px; }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.notif-ic { font-size: 1.1rem; flex-shrink: 0; }
.notif-tx { flex: 1; font-size: .85rem; line-height: 1.35; }
.notif-tx small { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.notif-empty { color: var(--muted); text-align: center; padding: 18px; font-size: .85rem; }
@media (max-width: 600px) { .notif-bell { right: 10px; top: 10px; width: 36px; height: 36px; } }

/* Onboarding gamifie (3 mini-etapes) */
.onboard-quest { margin: 10px 0 0; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.onboard-quest.hidden { display: none; }
.onboard-quest-title { font-weight: 800; font-size: .92rem; margin: 0 0 8px; }
.onboard-steps { display: flex; flex-direction: column; gap: 6px; }
.onboard-step { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.onboard-step.done .ob-tx { opacity: .6; text-decoration: line-through; }
.onboard-step .ob-tx b { color: var(--accent); }
.ob-check { flex-shrink: 0; }

/* Badges / hauts faits */
.profile-badges-wrap { margin: 10px 0 0; }
.profile-badges-title { font-weight: 800; font-size: .9rem; margin: 0 0 6px; color: var(--text); }
.badge-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text);
}
.badge-honor { background: linear-gradient(90deg, rgba(251,191,36,.22), rgba(217,119,6,.18)); border-color: rgba(251,191,36,.5); }
.badge-empty { font-size: .8rem; color: var(--muted); }

.dailygift-emoji { font-size: 3.4rem; text-align: center; margin: 4px 0 2px; animation: dgPop .5s var(--ease, ease) both; }
@keyframes dgPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
/* Apercu du cosmetique offert dans le cadeau du jour. */
.dailygift-preview { display: flex; align-items: center; justify-content: center; margin: 6px auto 2px; min-height: 60px; }
.dailygift-preview .shop-bg-preview { width: 160px; height: 90px; border-radius: 10px; }
.dailygift-preview .shop-emoji-preview { font-size: 2.6rem; }
.dailygift-itemname { text-align: center; font-weight: 700; color: var(--accent); margin: 2px 0; }
.dailygift-locker { text-align: center; font-size: .82rem; color: var(--muted); margin: 2px 0 6px; }

.profile-balance-static { cursor: default; }
.profile-balance-static:hover  { border-color: var(--border); }
.profile-balance-static:active { transform: none; }
.pbr-icon { font-size: 1.3rem; flex-shrink: 0; }
.pbr-text { flex: 1; font-weight: 800; font-size: 1rem; }
.pbr-text #profile-balance { color: var(--accent); }
.pbr-go { color: var(--muted); font-size: 1.3rem; }

/* ── Barre de nav sur mobile : icones seules (5 onglets doivent tenir, Profil
   compris). Les libelles restent lisibles par les lecteurs d'ecran. ── */
@media (max-width: 600px) {
  .main-nav { gap: 4px; padding: 4px; }
  .nav-tab { padding: 9px 14px; gap: 0; }
  .nav-tab [id$="-label"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav-tab-icon svg { width: 23px; height: 23px; }
}

/* ── Compte optionnel : onglets Creer / Se connecter ── */
.account-tabs { display: flex; gap: 4px; padding: 4px; background: var(--card2); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 12px; }
.account-tab { flex: 1; border: none; background: transparent; color: var(--muted); font-weight: 800; font-size: .9rem; padding: 8px 10px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast,.14s), color var(--dur-fast,.14s); }
.account-tab.active { background: var(--board); color: #fff; }
.recovery-warn.recovery-ok { color: #22c55e; }
.recovery-warn.ok { color: #22c55e; }

/* ══════════════════════════════════════════════════════════════════════════
   Le Mot (facon Wordle)
   ══════════════════════════════════════════════════════════════════════════ */
.screen-wordle { padding: 0; justify-content: flex-start; align-items: stretch; }
.wordle-wrap { max-width: 480px; margin: 0 auto; padding: 70px 12px 24px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wordle-head { width: 100%; display: flex; align-items: center; gap: 10px; }
.wordle-head .btn-back { flex: 0 0 auto; }
.wordle-h1 { flex: 1; text-align: center; font-size: 1.5rem; font-weight: 800; margin: 0; background: linear-gradient(135deg, var(--accent), #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.wordle-streak { flex: 0 0 auto; min-width: 44px; text-align: right; font-weight: 800; color: var(--yellow); }
.wordle-sub { color: var(--muted); font-size: .88rem; margin: 0; text-align: center; }
.wordle-hint-btn { align-self: center; width: auto; margin: 2px auto 0; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--text); font-weight: 700; font-size: .82rem; cursor: pointer; }
.wordle-hint-btn:disabled { opacity: .5; cursor: default; }
.wordle-hint { max-width: 320px; margin: 2px auto 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--text); background: color-mix(in srgb, var(--yellow) 10%, transparent); border-radius: 10px; padding: 8px 12px; }

.wordle-board { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wordle-row { display: flex; gap: 6px; }
.wordle-cell {
  width: 54px; height: 54px; max-width: 16vw; max-height: 16vw;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: var(--text);
  border: 2px solid var(--border); border-radius: 6px; background: transparent;
}
.wordle-cell.filled { border-color: var(--muted); animation: wordlePop .1s ease; }
.wordle-cell.wordle-correct { background: #22c55e; border-color: #22c55e; color: #fff; }
.wordle-cell.wordle-present { background: #eab308; border-color: #eab308; color: #fff; }
.wordle-cell.wordle-absent  { background: var(--card2); border-color: var(--card2); color: var(--muted); }
@keyframes wordlePop { from { transform: scale(.9); } to { transform: scale(1); } }
.wordle-row.wordle-shake { animation: tg-shake .4s ease; }

.wordle-keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 460px; margin-top: 6px; }
.wordle-kb-row { display: flex; gap: 5px; justify-content: center; }
.wordle-key {
  flex: 1; min-width: 0; height: 48px; border: none; border-radius: 7px;
  background: var(--card2); color: var(--text); font-weight: 800; font-size: 1rem; cursor: pointer;
  transition: transform .08s, background .15s;
}
.wordle-key:active { transform: scale(.9); }
.wordle-key-wide { flex: 1.5; font-size: .8rem; }
.wordle-key.wordle-correct { background: #22c55e; color: #fff; }
.wordle-key.wordle-present { background: #eab308; color: #fff; }
.wordle-key.wordle-absent  { background: #3a3f52; color: var(--muted); }
.wordle-msg { min-height: 1.4em; font-weight: 700; text-align: center; color: var(--text); }
.wordle-share { width: auto; }

/* ── En-tete du Profil : pseudo en grand + sous-titre ── */
.profile-pseudo {
  text-align: center; margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.3px;
  background: linear-gradient(135deg, var(--accent), #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  word-break: break-word;
}
.profile-screen-sub { text-align: center; color: var(--muted); font-size: .8rem; font-weight: 700; margin: 2px 0 6px; text-transform: uppercase; letter-spacing: .08em; }

/* ── Idées : recherche + réponse de l'équipe ── */
.ideas-search { width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: .92rem; box-sizing: border-box; }
.idea-reply { margin: 8px 0 0; padding: 8px 10px; background: rgba(99,102,241,.12); border-left: 3px solid var(--board); border-radius: 8px; font-size: .88rem; line-height: 1.4; color: var(--text); }

/* ── Champ mot de passe : bouton afficher/masquer + confirmation ── */
.pw-field { position: relative; }
.pw-field .recovery-input { padding-right: 44px; width: 100%; box-sizing: border-box; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 4px 6px; line-height: 0; opacity: .8; color: var(--muted); display: flex; align-items: center; }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle.on { color: var(--accent); opacity: 1; }
.pw-toggle:active { transform: translateY(-50%) scale(.9); }
.account-confirm.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   CHARTE DU SITE (direction « Nuit de fete »)
   Le site avait accumule neuf valeurs de rayon et une trentaine de regles de
   titres posees au cas par cas : d'un ecran a l'autre rien n'etait franchement
   different, mais rien n'etait tout a fait pareil. Ce bloc, place en fin de
   feuille pour gagner a specificite egale, donne au site une echelle unique
   dont tous les ecrans heritent. Il ne touche ni les positions ni les tailles :
   uniquement la typographie, les rayons, les surfaces et les accents.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Echelle de rayons : quatre marches au lieu de neuf valeurs libres. */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;
}

/* ── 1. Typographie : les titres et les chiffres portent la police d'affichage,
      le texte courant reste en Karla. ───────────────────────────────────── */
h1, h2, h3,
.btn, .nav-tab, .btn-back, .btn-primary,
.lb-title, .lb-header, .chat-title, .game-header-center,
.idea-title, .locker-detail-title, .locker-item-name,
.book-reader-title, .feed-overlay-title, .challenge-name,
.help-modal-title, .comment-modal-title, .chatbot-header-txt,
.shop-fn-title, .shop-fn-detail-name, .shop-tile-name,
.profile-pseudo, .streak-main, .level-main, .honor-reward-title,
.dailygift-itemname, .friend-name, .lb-name, .game-btn-name {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
/* Les valeurs chiffrees (soldes, prix, scores, rangs) gagnent a etre tabulaires. */
.shop-tile-price, .shop-fn-balance-amount, .lb-score, .lb-pts,
.level-badge, .profile-balance-row, .streak-sub, .history-row {
  font-variant-numeric: tabular-nums;
}

/* ── 2. Rayons : une seule echelle sur toutes les familles de surfaces. ──── */
.landing-card, .profile-nav-card, .global-lb-card, .idea-card,
.shop-tile, .read-card, .challenge-row, .history-row, .friend-row,
.streak-banner, .level-banner, .onboard-quest, .profile-balance-row,
.profile-badges-wrap, .announcement-box, .honor-reward-box {
  border-radius: var(--r-md);
}
.landing-card--hero, .help-modal, .comment-modal, .community-modal,
.giftrecv-modal, .recovery-modal, .chatbot-panel, .help-panel {
  border-radius: var(--r-lg);
}
.btn, .btn-primary, .btn-back { border-radius: var(--r-sm); }
.nav-tab, .landing-chip, .shop-fn-topup-btn { border-radius: var(--r-pill); }

/* ── 3. Surfaces : meme matiere partout (fond, filet, elevation). ────────── */
.landing-card, .profile-nav-card, .global-lb-card, .idea-card,
.read-card, .streak-banner, .level-banner, .onboard-quest,
.profile-badges-wrap, .announcement-box {
  border: 1px solid var(--border);
  box-shadow: var(--elev-1);
}
.help-modal, .comment-modal, .community-modal, .giftrecv-modal,
.recovery-modal, .chatbot-panel {
  box-shadow: var(--elev-3);
}

/* ── 4. Accents : l'or marque la valeur et la hierarchie (Libs, rang 1,
      recompenses), l'indigo reste la couleur de l'action. ───────────────── */
.shop-tile-price, .shop-fn-balance-amount, .lb-rank-1, .honor-reward-title {
  color: var(--gold);
}

/* ── Mode clair : les cartes phares de l'accueil et les tuiles doivent suivre
      le theme, sinon elles restent deux blocs sombres poses sur du blanc. ── */
html.light .landing-card--hero {
  background: linear-gradient(135deg, #e8e6ff 0%, #ffffff 70%);
  border-color: rgba(67,56,202,.28);
  box-shadow: 0 10px 28px rgba(67,56,202,.12);
}
html.light .landing-card--hero-alt {
  background: linear-gradient(135deg, #fff2d8 0%, #ffffff 72%);
  border-color: rgba(217,119,6,.3);
}
html.light .landing-card--hero::after { background: radial-gradient(circle, rgba(99,102,241,.18), transparent 68%); }
html.light .landing-card--hero-alt::after { background: radial-gradient(circle, rgba(245,158,11,.2), transparent 68%); }
html.light .landing-card--hero h2 { color: var(--text); }
html.light .landing-card--hero p  { color: #55527d; }
html.light .landing-card--hero-alt p { color: #6b5836; }
html.light .landing-eyebrow { color: #b45309; }
html.light .landing-chip { background: rgba(67,56,202,.09); color: #3f3d70; }
html.light .landing-card--tile { background: var(--card); }
html.light .landing-card--tile h2 { color: var(--text); }
/* L'or du thema sombre serait illisible sur fond clair : on descend en ambre. */
html.light .shop-tile-price,
html.light .shop-fn-balance-amount,
html.light .lb-rank-1,
html.light .honor-reward-title { color: #b45309; }

/* La bande de niveau est sombre a tous les tiers, mais seuls les tiers 2 a 5
   forcaient un texte blanc : au tier 1 (niveaux 1 a 9, la majorite des joueurs)
   le texte heritait de --text, donc du foncé sur foncé en mode clair. */
.level-tier-1 .level-main,
.level-tier-1 .level-badge,
.level-tier-1 .level-sub { color: #fff; }
.level-tier-1 .level-sub { opacity: .82; }
.level-tier-1 .level-bar { background: rgba(255,255,255,.25); }

/* ── Etapes numerotees : donnent un ordre de lecture aux ecrans de reglage
      (jeux classiques, quiz), ou tout etait empile a poids egal. Le numero est
      un compteur CSS, donc rien a maintenir dans le HTML ni dans les traductions. */
#screen-home, #screen-trivia-home { counter-reset: etape; }
.step-label,
#screen-trivia-home .trivia-theme-label {
  display: flex; align-items: center; gap: 9px;
  width: 100%; max-width: 380px; margin: 0;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.step-label::before,
#screen-trivia-home .trivia-theme-label::before {
  counter-increment: etape;
  content: counter(etape);
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99,102,241,.18); border: 1px solid var(--border);
  color: var(--accent);
  font-size: .68rem; letter-spacing: 0;
}
/* Dans la carte de reglages, l'etape ouvre le bloc : un filet la separe. */
.card > .step-label { padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
/* Le libelle du nombre de questions porte deja une valeur : pas de puce en double. */
#screen-trivia-home .trivia-nb-row .trivia-theme-label { text-transform: none; letter-spacing: 0; font-size: .82rem; }

/* Le champ de code est en grandes capitales espacees pour la saisie, mais ce
   traitement s'appliquait aussi a son texte d'invite : « Code a 4 lettres »
   debordait du champ et se lisait « CODE A 4 LETTRE ». L'invite reprend une
   taille de texte normale ; la valeur saisie garde son traitement. */
#input-code::placeholder, #input-trivia-code::placeholder {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

/* ── Fenetres : cout du flou ────────────────────────────────────────────────
   Les overlays sont floutees en plein ecran. Ce flou se recalcule a chaque
   frame et se paie sur le GPU : sur les telephones d'entree de gamme, qui sont
   la majorite du public du site, il suffit a faire ramer toute la fenetre.
   Sur ces appareils (html.perf-low, pose par app.js) on le remplace par un fond
   plus opaque : l'ecran reste lisible et le cout tombe a zero. */
html.perf-low .overlay,
html.perf-low .settings-panel,
html.perf-low .chatbot-panel,
html.perf-low .help-panel,
html.perf-low .main-nav,
html.perf-low body.has-bg .chat,
html.perf-low body.has-bg .leaderboard-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.perf-low .overlay { background: rgba(6,6,16,.93); }
html.perf-low .main-nav { background: var(--card); }

/* Meme raison sous « animations reduites » : l'utilisateur a demande de la
   sobriete, le flou anime n'a pas lieu d'etre. */
@media (prefers-reduced-motion: reduce) {
  .overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,6,16,.93); }
}

/* ── Carte d'identite du profil ─────────────────────────────────────────────
   Le pseudo, l'avatar, le niveau et la progression tenaient dans trois blocs
   separes : un titre centre, puis une bande de serie, puis une bande de niveau.
   Ils forment desormais une seule carte, dont le fond est le degrade de palier
   (pose par _renderLevel), si bien que monter de niveau se voit sur toute la
   carte et plus sur une bandelette. */
.profile-id { align-items: center; gap: 13px; padding: 14px; }
.pid-avatar {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
}
/* Sans avatar equipe, l'initiale du pseudo tient la place. */
.pid-avatar.initial {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; color: #fff;
}
.pid-main { flex: 1; min-width: 0; }
.pid-name {
  margin: 0 0 5px; font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em;
  font-family: var(--font-display); color: #fff;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  line-height: 1.2; word-break: break-word;
}
.pid-lvl-row { display: flex; align-items: baseline; gap: 8px; }
.profile-id .level-badge { font-size: .92rem; }
/* Le badge porte deja l'etoile et le numero : « Niveau 12 » juste a cote faisait
   doublon. L'element reste dans le DOM, _renderLevel continue de le remplir. */
.profile-id .level-main  { display: none; }
.profile-id .level-bar   { margin: 5px 0 3px; }
.profile-id .level-sub   { font-variant-numeric: tabular-nums; }
.profile-id .vip-badge   { align-self: flex-start; }
/* Les cosmetiques de pseudo sont poses sur un span interieur : il ne doit pas
   heriter du blanc de .pid-name, sinon la couleur achetee ne se voit pas. */
.pid-name .pid-name-txt { color: inherit; }
/* Ces couleurs ont ete dessinees pour le fond sombre des classements. Sur une
   carte de palier doree ou orangee, un pseudo or ou arc-en-ciel se confond avec
   le fond : une ombre portee le detache sans toucher a la couleur achetee.
   drop-shadow et non text-shadow, pour suivre les pseudos en degrade, qui sont
   peints en background-clip et dont le texte lui-meme est transparent. */
.profile-id .pid-name-txt { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* Meme raison pour les etiquettes de titre, dorees elles aussi. */
.profile-id .player-title-tag,
.profile-id .player-honor-tag { background: rgba(0,0,0,.32); }

/* Le degrade de texte de l'ancien titre centre n'a plus lieu d'etre : le pseudo
   porte desormais la couleur que le joueur a equipee, ou du blanc par defaut. */
html.light .pid-avatar { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.34); }

/* ══ Icones 3D (lucide-react) ══════════════════════════════════════════════
   Le module icons3d.js repeint chaque [data-ic] : des copies sombres
   decalees donnent l'epaisseur, la face du dessus recoit un degre de
   lumiere (le <linearGradient id="ic3d-lux"> pose dans le document) et une
   ombre portee. Tant que le module n'a pas repondu, le jeu a trait de
   UI_ICONS reste affiche : aucun trou dans l'interface.
   ══════════════════════════════════════════════════════════════════════════ */
.ic3d {
  position: relative;
  display: block;
  flex: none;
  transform: rotateX(var(--ic-tilt, 15deg)) rotateZ(var(--ic-turn, -13deg));
  transform-style: preserve-3d;
}
.ic3d svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ic3d-depth { color: var(--ic-dark, #334155); }
.ic3d-face  { color: var(--ic-lite, currentColor); filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.ic3d-face path, .ic3d-face circle, .ic3d-face rect, .ic3d-face line,
.ic3d-face polyline, .ic3d-face polygon, .ic3d-face ellipse { stroke: url(#ic3d-lux); }

/* Le logement doit se comporter en boite pour que la mesure soit juste. */
[data-ic].has-ic3d { display: inline-flex; align-items: center; justify-content: center; }

/* En mode clair, l'ombre portee noire est trop dure et les teintes claires
   du degre se perdent sur fond blanc : on assombrit la face. */
html.light .ic3d-face { filter: drop-shadow(0 2px 3px rgba(15,23,42,.3)); }
html.light .ic3d-face path, html.light .ic3d-face circle, html.light .ic3d-face rect,
html.light .ic3d-face line, html.light .ic3d-face polyline,
html.light .ic3d-face polygon, html.light .ic3d-face ellipse { stroke: var(--ic-dark, #334155); }
/* L'epaisseur est une OMBRE : sur fond sombre elle est sombre, sur fond clair
   elle doit etre claire. Sinon la face sombre et les couches sombres se
   confondent et l'icone devient un pate. */
html.light .ic3d-depth { color: var(--ic-lite, #cbd5e1); opacity: .55 !important; }

/* Appareils modestes et mouvement reduit : on garde la couleur, on retire
   le volume (les copies empilees sont autant de couches de composition). */
html.perf-low .ic3d, html.perf-low .ic3d * { transform: none !important; }
html.perf-low .ic3d-depth { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ic3d { transform: none; }
  .ic3d-depth { display: none; }
}

/* Logements d'icone du chrome (retour, fermeture, partage, titres d'ecran).
   L'emoji d'origine reste dedans : il s'affiche tant que icons3d.js n'a pas
   repondu, et pour toujours si le CDN est injoignable. */
.ui-ic {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  vertical-align: -.2em;
}
.ui-ic.ttl { width: 30px; height: 30px; font-size: 1.4rem; }
.btn-back .ui-ic, .help-close-btn .ui-ic, .chatbot-close .ui-ic,
.book-reader-close .ui-ic { width: 18px; height: 18px; }
/* Les boutons qui portent une icone et un libelle les alignent proprement. */
.btn .ui-ic, .btn-quit .ui-ic, .ideas-sort-btn .ui-ic { margin-right: 6px; }
h1 .ui-ic, h2 .ui-ic { margin-right: 8px; }


/* ══ Polices de pseudo : la charte les ecrasait ═════════════════════════════
   Le bloc de charte, en fin de fichier, impose `font-family: var(--font-display)`
   a `.lb-name`, `.profile-pseudo`, `.friend-name`, `.locker-item-name` et
   `.shop-tile-name`. A specificite egale (une classe contre une classe), c'est
   lui qui gagnait puisqu'il vient apres : plus AUCUNE police achetee ne
   s'affichait, ni dans les classements, ni sur le profil, ni dans le casier,
   ni dans les apercus de la boutique.
   On redeclare donc les 18 polices avec la classe doublee (specificite 0,2,0).
   Toute nouvelle police cosmetique doit etre ajoutee ICI aussi.
   ══════════════════════════════════════════════════════════════════════════ */
.font-orbitron.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-rajdhani.font-rajdhani { font-family: 'Rajdhani', sans-serif; }
.font-chakra.font-chakra { font-family: 'Chakra Petch', sans-serif; }
.font-audiowide.font-audiowide { font-family: 'Audiowide', sans-serif; }
.font-exo2.font-exo2 { font-family: 'Exo 2', sans-serif; }
.font-bungee.font-bungee { font-family: 'Bungee', sans-serif; }
.font-blackops.font-blackops { font-family: 'Black Ops One', sans-serif; }
.font-russo.font-russo { font-family: 'Russo One', sans-serif; }
.font-pressstart.font-pressstart { font-family: 'Press Start 2P', monospace; font-size: .65em; }
.font-vt323.font-vt323 { font-family: 'VT323', monospace; font-size: 1.3em; }
.font-sharetech.font-sharetech { font-family: 'Share Tech Mono', monospace; }
.font-majormono.font-majormono { font-family: 'Major Mono Display', monospace; }
.font-cinzel.font-cinzel { font-family: 'Cinzel', serif; }
.font-tektur.font-tektur { font-family: 'Tektur', sans-serif; }
.font-pacifico.font-pacifico { font-family: 'Pacifico', cursive; }
.font-lobster.font-lobster { font-family: 'Lobster', cursive; }
.font-fredoka.font-fredoka { font-family: 'Fredoka', sans-serif; }
.font-monoton.font-monoton { font-family: 'Monoton', sans-serif; }

/* Logements d'icone des onglets de boutique et des votes d'idees : ces
   elements sont fabriques en JS, l'observateur d'icons3d.js les repeint. */
.shop-nav-icon { width: 20px; height: 20px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1rem; margin-right: 9px; }
.idea-vote .ui-ic { width: 16px; height: 16px; margin: 0; }
.news-handle .ui-ic, .news-title .ui-ic { width: 18px; height: 18px; }
.streak-flame .ui-ic { width: 22px; height: 22px; }
.read-search .ui-ic { width: 17px; height: 17px; }

/* Pastille du nombre de pass VIP en reserve, dans le badge de la carte
   d'identite. Elle n'apparait qu'a partir de deux pass (a un seul, le badge
   « VIP » dit deja tout). */
.vip-badge-count {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--r-pill, 999px);
  background: rgba(0, 0, 0, .38);
  font-family: var(--font-display);
  font-size: .74em;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
html.light .vip-badge-count { background: rgba(15, 23, 42, .22); }

/* Barre de boutique en mode icones seules : l'espace du libelle disparait,
   l'icone se recentre. */
@media (max-width: 580px) { .shop-nav-icon { margin-right: 0; } }

/* ══ Identifiants du serveur et du CSS qui ne se correspondaient pas ══════════
   Le serveur vend `p4token-lavalice` et `chess-frost`, le CSS definissait
   `p4token-lavaice` et `chess-theme-frosty` : ces deux articles, achetes avec de
   vrais Libs, restaient donc sans aucun effet. On accepte les deux ecritures
   (les joueurs qui les possedent deja ont l'identifiant du serveur). ══════════ */
.p4skin-p4token-lavalice .c4-cell.red    { background:radial-gradient(circle,#ff6600,#cc2200) !important; box-shadow:0 0 8px 3px #ff4400; }
.p4skin-p4token-lavalice .c4-cell.yellow { background:radial-gradient(circle,#aaddff,#0088cc) !important; box-shadow:0 0 8px 3px #00aaff; }
#chess-board.chess-theme-frost .chess-sq.light { background: rgba(200,230,255,.25); backdrop-filter:blur(2px); }
#chess-board.chess-theme-frost .chess-sq.dark  { background: rgba(100,160,220,.22); backdrop-filter:blur(2px); }

/* « X & O Neon » : son jeu de symboles etait identique au defaut (✕ ○) et aucun
   style n'existait, donc l'article ne changeait rien. Il habille maintenant la grille
   et les symboles d'un neon cyan (joueur 1) et magenta (joueur 2). */
.ttt-skin-ttt-neon .ttt-cell { border-color: rgba(34,234,255,.4); box-shadow: inset 0 0 10px rgba(34,234,255,.14); }
.ttt-skin-ttt-neon .ttt-cell.ttt-r { color:#22eaff; text-shadow:0 0 6px #22eaff, 0 0 16px #00bfff; }
.ttt-skin-ttt-neon .ttt-cell.ttt-y { color:#ff4df0; text-shadow:0 0 6px #ff4df0, 0 0 16px #d100c4; }
.ttt-skin-ttt-neon .ttt-cell.win-cell { background: rgba(34,234,255,.14); }

/* ══ Apercus reels de la boutique (captures du vrai rendu) ══════════════════ */
.real-prev { position:relative; display:block; width:100%; height:82px; overflow:hidden; border-radius:var(--r-sm,10px); background:#0b0e1c; }
.real-prev > img { display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.real-prev-fb { display:none; position:absolute; inset:0; align-items:center; justify-content:center; background:inherit; }
.real-prev.is-missing > img { display:none; }
.real-prev.is-missing > .real-prev-fb { display:flex; }
.real-prev-background > img { object-fit:cover; }
.real-prev-p4token > img, .real-prev-ttt > img, .real-prev-chess > img { object-fit:contain; }
.real-prev-clickfx > img, .real-prev-cursorsnake > img, .real-prev-snakeskin > img, .real-prev-victoryban > img { object-fit:contain; }
.shop-tile-large .real-prev-background { height:172px; }
.shop-fn-detail-preview .real-prev { width:100%; max-width:600px; height:200px; margin:0 auto; border-radius:12px; }
.locker-item-preview .real-prev { height:100%; border-radius:8px; }
.dailygift-preview .real-prev { width:160px; height:100px; margin:0 auto; }
@media (max-width:600px) { .shop-tile-large .real-prev-background { height:120px; } .shop-fn-detail-preview .real-prev { height:150px; } }
.pack-prev { display:grid; grid-template-columns:repeat(4,1fr); gap:2px 4px; align-content:center; justify-items:center; width:100%; height:82px; font-size:1.25rem; line-height:1.3; }
.shop-fn-detail-preview .pack-prev { height:140px; max-width:360px; margin:0 auto; font-size:2.1rem; }
.locker-item-preview .pack-prev { height:100%; font-size:.7rem; gap:0; }
.wave-prev { display:flex; align-items:center; justify-content:center; width:100%; height:82px; padding:0 10px; border-radius:var(--r-sm,10px); background:linear-gradient(180deg,#0e1226,#151a33); }
.wave-prev svg { width:100%; height:46px; filter:drop-shadow(0 0 5px currentColor); }
.shop-fn-detail-preview .wave-prev { height:120px; max-width:360px; margin:0 auto; }
.shop-fn-detail-preview .wave-prev svg { height:70px; }
.locker-item-preview .wave-prev { height:100%; padding:0 3px; }
.locker-item-preview .wave-prev svg { height:60%; }

/* Aperçu des packs : collage des articles (jusqu'a 4) */
.bundle-prev { display:grid; gap:4px; width:100%; height:172px; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
.bundle-prev.n1 { grid-template-columns:1fr; }
.bundle-prev.n3 > .bundle-prev-cell:first-child { grid-column:1 / -1; }
.bundle-prev-cell { min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.04); }
.bundle-prev-cell .real-prev, .bundle-prev-cell .shop-bg-preview, .bundle-prev-cell .pack-prev, .bundle-prev-cell .wave-prev { height:100%; margin:0; }
.bundle-prev-cell .shop-emoji-preview { height:100%; font-size:1.3rem; }
@media (max-width:600px) { .bundle-prev { height:120px; } }

/* Pas de clignotement d'icones : tant que les icones en relief ne sont pas peintes, les logements
   [data-ic] restent invisibles (ils gardent leur place) au lieu d'afficher l'ancien jeu a trait ou
   l'emoji. La classe est retiree par icons3d.js (echec) ou au bout de 7 s (filet de securite). */
html.ic3d-wait [data-ic]:not(.has-ic3d):not(.ic3d-skip) { opacity: 0; }
[data-ic] { transition: opacity .18s ease; }

/* ══ Pieces dessinees : echecs (jeu Celtic, MIT) et dames (domaine public) ═══════════ */
.chess-sq .cp-img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; text-shadow:none; }
.chess-sq .cp-img img { width:90%; height:90%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.chess-sq.selected .cp-img img { transform:translateY(-2px) scale(1.06); transition:transform .12s var(--ease,ease); }
#chess-board.chess-theme-neon .chess-sq .cp-img img { filter:drop-shadow(0 0 5px #00ffff) drop-shadow(0 0 2px #ff00ff); }
#chess-board.chess-theme-cyber .chess-sq .cp-img img { filter:drop-shadow(0 0 4px rgba(0,255,200,.55)); }
.ck-piece.ck-img { width:94%; height:94%; border-radius:0; background:none; box-shadow:none; }
.ck-piece.ck-img img { width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; transform:translateY(-12%) scale(1.12); filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.ck-piece.ck-img.ck-king img { transform:translateY(-6%) scale(1.14); }
.ck-sq.selected .ck-piece.ck-img img { transform:translateY(-16%) scale(1.18); transition:transform .12s var(--ease,ease); }

/* Mur de maintenance (site ferme) : premier apercu du nouveau design. Theme sombre = l'ardoise, theme clair = le cahier. */
html.site-closed body > *:not(#maintenance-wall):not(script):not(style) { display: none !important; }
html.site-closed, html.site-closed body { overflow: hidden; }
#maintenance-wall { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px 16px;
  background: #1f2a26; background-image: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.06), transparent 60%);
  box-shadow: inset 0 0 0 10px #6b4a2b; color: #eef1ea; font-family: "Karla", system-ui, sans-serif; }
#maintenance-wall .mw-sheet { max-width: 34rem; padding-left: 8px; }
#maintenance-wall .mw-date { color: #f3f0d9; font-size: 1.05rem; font-style: italic; margin-bottom: 8px; }
#maintenance-wall .mw-title { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.08; margin: 0 0 16px; text-wrap: balance;
  background: none; -webkit-text-fill-color: currentColor; color: inherit; }
#maintenance-wall mark { background: linear-gradient(transparent 60%, rgba(255,225,105,.55) 60%); color: inherit; -webkit-text-fill-color: currentColor; }
#maintenance-wall .mw-text { font-size: 1.05rem; line-height: 1.6; margin: 0 0 12px; }
#maintenance-wall .mw-note { border-left: 3px solid #ff8e8e; padding-left: 10px; color: #ff9e9e; margin: 0 0 12px; }
#maintenance-wall .mw-sign { color: #f3f0d9; font-style: italic; margin: 18px 0 0; }
html.light #maintenance-wall { color: #2b2b2b; box-shadow: none; background-color: #fdfdf9;
  background-image: linear-gradient(90deg, transparent 40px, #e2485d 40px 42px, transparent 42px),
    repeating-linear-gradient(0deg, transparent 0 31px, #8fb0de 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 7px, #c9d8ef 7px 8px); }
html.light #maintenance-wall .mw-sheet { padding-left: 44px; }
html.light #maintenance-wall .mw-date, html.light #maintenance-wall .mw-sign { color: #173a8a; }
html.light #maintenance-wall mark { background: linear-gradient(transparent 55%, #fff27a 55%); }
html.light #maintenance-wall .mw-note { color: #b3263a; border-color: #e2485d; }