:root {
    --bg: #020617; --surface: rgba(15,23,42,0.95); --border: rgba(255,255,255,0.08);
    --blue: #3b82f6; --purple: #7c3aed; --gold: #f59e0b; --green: #10b981; --red: #ef4444;
    --p0: #3b82f6; --p1: #ef4444; --p2: #10b981; --p3: #f59e0b;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { height:100%; }
body { font-family:'Rajdhani',sans-serif; background:var(--bg); color:white; min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.07) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.07) 0%,transparent 50%); pointer-events:none; z-index:0; }
.glass { background:var(--surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--border); }
.btn-primary { background:linear-gradient(135deg,var(--blue),var(--purple)); border:none; color:white; font-family:'Rajdhani',sans-serif; font-weight:700; cursor:pointer; transition:filter .2s,transform .2s; }
.btn-primary:active { filter:brightness(1.2); transform:scale(.97); }
.btn-secondary { background:transparent; border:1px solid var(--border); color:rgba(255,255,255,.7); font-family:'Rajdhani',sans-serif; font-weight:600; cursor:pointer; }
.hidden { display:none!important; }

/* ── TOASTS ── */
#toast-container { position:fixed; top:12px; right:12px; z-index:9999; display:flex; flex-direction:column; gap:8px; max-width:280px; pointer-events:none; }
.toast { padding:10px 14px; border-radius:12px; font-weight:600; font-size:13px; border-left:3px solid; backdrop-filter:blur(12px); animation:slideIn .25s ease; word-break:break-word; pointer-events:auto; }
.toast.info    { background:rgba(59,130,246,.18);  border-color:var(--blue); }
.toast.success { background:rgba(16,185,129,.18);  border-color:var(--green); }
.toast.error   { background:rgba(239,68,68,.18);   border-color:var(--red); }
.toast.gold    { background:rgba(245,158,11,.18);  border-color:var(--gold); }
@keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* ── MODAL INVITATION LOBBY ── */
#lobby-invite-modal { position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:600; backdrop-filter:blur(6px); padding:20px; }
.lobby-invite-box { background:#0f172a; border:1px solid var(--blue); border-radius:24px; padding:32px 26px; text-align:center; width:100%; max-width:400px; box-shadow:0 0 60px rgba(59,130,246,.2); }
.lobby-invite-box h2 { font-family:'Bebas Neue'; font-size:32px; color:var(--blue); margin-bottom:6px; }
.lobby-invite-box p  { color:rgba(255,255,255,.65); margin-bottom:24px; font-size:15px; line-height:1.4; }
.lobby-invite-btns   { display:flex; gap:12px; }
.lobby-invite-btns button { flex:1; padding:14px; border-radius:13px; font-size:16px; font-weight:700; }

/* ── CATÉGORIE ── */
#category-screen { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateY(100%); transition:transform .45s cubic-bezier(.4,0,.2,1); padding:20px; text-align:center; }
#category-screen.active { transform:translateY(0); }
#cat-round { font-size:11px; letter-spacing:4px; opacity:.6; margin-bottom:10px; text-transform:uppercase; }
#cat-name  { font-family:'Bebas Neue'; font-size:clamp(42px,10vw,88px); letter-spacing:3px; }
.cat-expert-badge { margin-top:18px; background:rgba(0,0,0,.35); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); border-radius:50px; padding:8px 20px; font-size:clamp(12px,3.5vw,15px); font-weight:600; color:#fff; letter-spacing:.3px; animation:expertPop .4s cubic-bezier(.34,1.56,.64,1); max-width:90vw; }
@keyframes expertPop { from { opacity:0; transform:scale(.75) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* H2H duel panel */
.h2h-card { padding:20px; margin-top:18px; }
.h2h-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.h2h-player { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.h2h-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:22px; font-weight:700; }
.h2h-name { font-size:13px; font-weight:700; letter-spacing:.5px; }
.h2h-score-center { display:flex; flex-direction:column; align-items:center; gap:4px; }
.h2h-score { font-family:'Bebas Neue'; font-size:38px; letter-spacing:2px; line-height:1; }
.h2h-vs { font-size:10px; letter-spacing:3px; opacity:.4; }
.h2h-bar-wrap { height:8px; border-radius:4px; overflow:hidden; display:flex; margin-bottom:12px; background:rgba(255,255,255,.06); }
.h2h-bar-seg { height:100%; transition:width .8s cubic-bezier(.4,0,.2,1); }
.h2h-meta { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.35); margin-bottom:14px; }
.h2h-streak { text-align:center; padding:10px 16px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2); border-radius:12px; font-size:13px; font-weight:600; color:#f59e0b; margin-bottom:14px; }
.h2h-games { display:flex; flex-direction:column; gap:6px; }
.h2h-game-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(255,255,255,.03); border-radius:10px; font-size:12px; }
.h2h-game-badge { padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.5px; flex-shrink:0; }
.h2h-game-badge.win-a { background:rgba(16,185,129,.15); color:#10b981; }
.h2h-game-badge.win-b { background:rgba(239,68,68,.15); color:#ef4444; }
.h2h-game-badge.draw  { background:rgba(245,158,11,.15); color:#f59e0b; }
.h2h-game-date { color:rgba(255,255,255,.3); margin-left:auto; flex-shrink:0; }
.h2h-game-mode { color:rgba(255,255,255,.4); font-size:11px; }
.h2h-empty { text-align:center; padding:24px; color:rgba(255,255,255,.25); font-size:13px; }

/* Catégorie forte dans le profil */
.best-cat-card { padding:18px 20px; margin-top:18px; display:flex; align-items:center; gap:16px; }
.best-cat-icon { font-size:36px; flex-shrink:0; }
.best-cat-info { flex:1; }
.best-cat-label { font-size:10px; letter-spacing:2px; opacity:.4; text-transform:uppercase; margin-bottom:4px; }
.best-cat-name { font-size:18px; font-weight:700; margin-bottom:4px; }
.best-cat-stats { font-size:12px; color:rgba(255,255,255,.45); }
.best-cat-accuracy { font-family:'Bebas Neue'; font-size:32px; color:var(--green); letter-spacing:1px; flex-shrink:0; }
.top-cats-list { margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.top-cat-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(255,255,255,.03); border-radius:10px; }
.top-cat-bar-wrap { flex:1; height:5px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; }
.top-cat-bar { height:100%; border-radius:3px; transition:width .8s; }
.top-cat-name { font-size:12px; font-weight:600; width:90px; flex-shrink:0; }
.top-cat-pct { font-size:12px; font-weight:700; width:38px; text-align:right; flex-shrink:0; }

/* ══════════════════════════════════════════
   AUTH
══════════════════════════════════════════ */
#auth-ui { position:relative; z-index:1; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width:420px; border-radius:24px; padding:40px 28px; border-top:3px solid var(--blue); }
.auth-card h1 { font-family:'Bebas Neue'; font-size:clamp(56px,15vw,72px); text-align:center; color:var(--blue); letter-spacing:4px; margin-bottom:4px; }
.auth-card .subtitle { text-align:center; color:rgba(255,255,255,.35); margin-bottom:30px; font-size:12px; letter-spacing:3px; text-transform:uppercase; }
.auth-input { width:100%; padding:15px 18px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:white; font-family:'Rajdhani',sans-serif; font-size:max(16px,1em); font-weight:600; outline:none; margin-bottom:12px; transition:border-color .2s; }
.auth-input:focus { border-color:var(--blue); }
.auth-input::placeholder { color:rgba(255,255,255,.25); }
.auth-input[type="password"] { text-align:center; letter-spacing:8px; }
.auth-btn   { width:100%; padding:17px; border-radius:14px; font-size:18px; margin-top:4px; }
.auth-error { color:var(--red); text-align:center; margin-top:10px; font-size:13px; font-weight:600; min-height:16px; }

/* ══════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════ */
#dashboard { position:relative; z-index:1; min-height:100dvh; padding:16px 16px 32px; }
.dashboard-inner { max-width:1280px; margin:0 auto; }
.dash-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dash-logo { font-family:'Bebas Neue'; font-size:30px; letter-spacing:3px; }
.dash-logo span { color:var(--blue); }
.dash-user { display:flex; align-items:center; gap:10px; padding:7px 13px; border-radius:50px; }
.dash-user-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.dash-user-name { font-weight:700; color:var(--blue); font-size:14px; }
.stats-row-mobile { display:flex; gap:8px; margin-bottom:20px; }
.stat-chip { flex:1; border-radius:14px; padding:12px 8px; text-align:center; }
.stat-chip-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:3px; }
.stat-chip-value { font-family:'Bebas Neue'; font-size:28px; line-height:1; }
.mode-btns { display:flex; gap:8px; margin-bottom:12px; }
.btn-mode { flex:1; border-radius:14px; padding:0; border:none; cursor:pointer; font-family:'Rajdhani',sans-serif; font-weight:700; transition:filter .2s,transform .15s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:14px 8px; position:relative; overflow:hidden; }
.btn-mode:active { transform:scale(.96); }
.btn-mode:disabled { opacity:.4; cursor:default; }
.btn-mode .mode-label { font-size:22px; letter-spacing:1px; color:white; }
.btn-mode .mode-sub { font-size:11px; font-weight:500; opacity:.6; color:white; }
.btn-mode .mode-waiting { font-size:10px; color:rgba(255,255,255,.5); font-weight:600; }
.btn-mode.searching { animation:searchPulse 1.5s ease infinite; }
@keyframes searchPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.2)} }
.btn-mode-2v2 { background:linear-gradient(135deg,#1e40af,#3b82f6); }
.btn-mode-3v3 { background:linear-gradient(135deg,#5b21b6,#7c3aed); }
.btn-mode-4v4 { background:linear-gradient(135deg,#065f46,#059669); }
.btn-mode-cancel { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.25); color:var(--red); width:100%; border-radius:12px; padding:10px; font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:12px; display:none; }
.unranked-badge { display:inline-block; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.2); color:var(--gold); font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; letter-spacing:1px; }
.dash-card { border-radius:18px; padding:18px; }
.card-title { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:12px; font-weight:600; }
.friends-add { display:flex; gap:8px; margin-bottom:12px; }
.friends-add input { flex:1; padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:white; font-family:'Rajdhani',sans-serif; font-size:max(16px,1em); font-weight:600; outline:none; }
.friends-add input:focus { border-color:var(--blue); }
.friends-add input::placeholder { color:rgba(255,255,255,.25); }
.friends-add button { padding:11px 13px; border-radius:11px; font-size:14px; white-space:nowrap; }
.friends-list { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; }
.friends-list::-webkit-scrollbar { width:3px; }
.friends-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }
.friend-item { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.04); border-radius:11px; padding:10px 13px; gap:8px; }
.friend-info { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.friend-dot  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.friend-dot.online  { background:var(--green); box-shadow:0 0 5px var(--green); }
.friend-dot.offline { background:rgba(255,255,255,.2); }
.friend-name { font-weight:700; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.friend-elo  { font-size:11px; color:rgba(255,255,255,.35); }
.friend-actions { display:flex; gap:5px; flex-shrink:0; }
.btn-challenge { background:var(--blue); border:none; color:white; cursor:pointer; font-family:'Rajdhani',sans-serif; padding:7px 11px; border-radius:8px; font-size:12px; font-weight:700; }
.btn-challenge:disabled { opacity:.35; cursor:default; }
.btn-remove { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:var(--red); cursor:pointer; font-family:'Rajdhani',sans-serif; padding:6px 9px; border-radius:8px; font-size:13px; font-weight:700; transition:background .2s; }
.btn-remove:hover { background:rgba(239,68,68,.22); }
.no-friends { text-align:center; color:rgba(255,255,255,.25); padding:24px 0; font-style:italic; font-size:13px; }

@media(min-width:768px) {
    #dashboard { padding:24px; }
    .dash-header { margin-bottom:26px; }
    .dash-logo { font-size:36px; }
    .dash-card { padding:26px; border-radius:22px; }
    .btn-duel { padding:34px 24px; font-size:26px; margin-bottom:0; }
    .stats-row-mobile { display:none; }
    .dash-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; }
    .stat-row { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.04); border-radius:13px; padding:14px 18px; margin-bottom:8px; }
    .stat-label { font-weight:600; color:rgba(255,255,255,.65); }
    .stat-value { font-size:26px; font-weight:700; }
    .stats-pc { display:block!important; }
    .play-card { display:flex; flex-direction:column; gap:22px; }
    .friends-list { max-height:300px; }
}
@media(max-width:767px) {
    .dash-grid { display:flex; flex-direction:column; gap:20px; }
    .stats-pc  { display:none; }
}

/* ══════════════════════════════════════════
   GAME UI — structure générale
══════════════════════════════════════════ */
#game-ui { position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }

/* Barre timer */
.timer-bar-wrap { height:3px; background:rgba(255,255,255,.07); flex-shrink:0; }
#timer-bar { height:100%; background:linear-gradient(90deg,var(--green),var(--gold),var(--red)); width:100%; transition:width .1s linear; }

/* ── Scorebar compacte ── */
.multi-scorebar { display:flex; justify-content:space-around; align-items:center; padding:6px 10px; flex-shrink:0; background:rgba(2,6,23,.75); border-bottom:1px solid var(--border); gap:4px; }
.player-chip { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:56px; flex:1; border-radius:10px; padding:3px; transition:background .3s; }
.player-chip.me { background:rgba(255,255,255,.07); }
.player-chip-avatar { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:13px; flex-shrink:0; position:relative; }
.answered-dot { position:absolute; bottom:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:var(--green); border:1px solid var(--bg); display:none; }
.player-chip-avatar.answered .answered-dot { display:block; }
.player-chip-name  { font-size:9px; font-weight:700; color:rgba(255,255,255,.5); max-width:64px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; }
.player-chip-score { font-family:'Bebas Neue'; font-size:20px; line-height:1; }
.player-chip-gain  { font-size:9px; font-weight:700; min-height:12px; }

/* Compteur réponses */
#answers-counter { font-size:10px; letter-spacing:1px; color:rgba(255,255,255,.35); text-align:center; padding:2px 0; flex-shrink:0; }

/* ── Layout PC : grille 3 colonnes ── */
@media(min-width:900px) {
    #game-ui { flex-direction:column; }
    .game-main-area { flex:1; display:grid; grid-template-columns:1fr 340px; overflow:hidden; }
    .game-center-col { display:flex; flex-direction:column; overflow:hidden; }
    .game-scroll { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
    .answers-grid { grid-template-columns:1fr 1fr; display:grid; gap:10px; }
    .question-box { padding:32px 36px; }
    .question-text { font-size:22px; }
    .player-chip-avatar { width:32px; height:32px; font-size:16px; }
    .player-chip-score  { font-size:24px; }
    .player-chip-name   { font-size:10px; }
    /* Colonne droite : tchat PC */
    .chat-sidebar { display:flex; flex-direction:column; background:rgba(2,6,23,.6); border-left:1px solid var(--border); overflow:hidden; }
    .chat-sidebar-title { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.3); padding:12px 14px 8px; font-weight:700; flex-shrink:0; }
    .chat-sidebar-messages { flex:1; overflow-y:auto; padding:4px 14px; display:flex; flex-direction:column; gap:5px; }
    .chat-sidebar-messages::-webkit-scrollbar { width:3px; }
    .chat-sidebar-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
    .chat-sidebar-input { display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--border); flex-shrink:0; }
    .chat-sidebar-input input { flex:1; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:white; font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600; outline:none; }
    .chat-sidebar-input input:focus { border-color:var(--blue); }
    .chat-sidebar-input input::placeholder { color:rgba(255,255,255,.25); }
    .chat-sidebar-input button { padding:9px 13px; border-radius:10px; font-size:14px; }
    /* Réactions sur PC : en haut de la colonne chat */
    .reactions-sidebar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; flex-shrink:0; }
    .reaction-btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:5px 9px; font-size:17px; cursor:pointer; transition:transform .15s,background .15s; line-height:1; }
    .reaction-btn:hover { background:rgba(255,255,255,.12); transform:scale(1.12); }
    .reaction-btn:active { transform:scale(.9); }
    /* Masquer le tchat mobile sur PC */
    .chat-bubble-btn,
    .chat-floating-panel,
    .reactions-mobile { display:none!important; }
    .correct-reveal { margin-top:6px; }
}

/* ── Zone de jeu mobile ── */
@media(max-width:899px) {
    .game-main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
    .game-center-col { flex:1; display:flex; flex-direction:column; overflow:hidden; }
    .game-scroll { flex:1; overflow-y:auto; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; } /* gap réduit */
    .answers-grid { display:flex; flex-direction:column; gap:7px; } /* gap réduit */
    /* Masquer la sidebar PC */
    .chat-sidebar { display:none!important; }
}

/* ── Header question (manche + timer) ── */
.game-header-center { text-align:center; }
.round-info { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:2px; }
.timer-display { font-family:'Bebas Neue'; font-size:44px; color:var(--gold); line-height:1; }
.timer-display.urgent { color:var(--red); animation:pulse .5s infinite; }
@keyframes pulse { 50%{opacity:.35} }

/* ── Question box ── */
.question-box { border-radius:14px; padding:16px 16px; text-align:center; border-top:2px solid rgba(245,158,11,.25); position:relative; overflow:hidden; }
.question-box::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.05) 0%,transparent 70%); pointer-events:none; }
.question-text { font-size:clamp(14px,4vw,19px); font-weight:600; line-height:1.35; }

/* ── Boutons réponses — style compact mobile ── */
.answer-btn { position:relative; padding:0; border:none; background:none; cursor:pointer; font-family:'Rajdhani',sans-serif; text-align:left; transition:transform .15s; width:100%; }
.answer-inner { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:11px; padding:11px 14px; font-size:15px; font-weight:600; color:white; display:flex; justify-content:space-between; align-items:center; transition:all .2s; gap:8px; }
.answer-text { flex:1; text-align:left; line-height:1.3; }
/* Pastilles voters — DANS la réponse à droite */
.answer-voters-inline { display:flex; gap:3px; flex-shrink:0; align-items:center; }
.voter-dot { width:18px; height:18px; border-radius:50%; font-size:9px; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Bebas Neue'; flex-shrink:0; border:1px solid rgba(0,0,0,.3); }
.answer-btn:hover:not(:disabled) .answer-inner { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.answer-btn:active:not(:disabled) { transform:scale(.98); }
.answer-btn.selected .answer-inner { background:rgba(59,130,246,.15); border-color:var(--blue); }
.answer-btn.correct  .answer-inner { background:rgba(16,185,129,.2);  border-color:var(--green); box-shadow:0 0 14px rgba(16,185,129,.25); }
.answer-btn.wrong    .answer-inner { background:rgba(239,68,68,.15);  border-color:var(--red); opacity:.65; }
.answer-btn:disabled { cursor:default; }

/* Bonne réponse reveal */
.correct-reveal { background:rgba(16,185,129,.09); border:1px dashed var(--green); border-radius:10px; padding:10px 14px; text-align:center; animation:slideIn .25s; }
.correct-reveal-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--green); font-weight:700; margin-bottom:3px; }
.correct-reveal-text  { font-size:16px; font-weight:700; }

/* ── Messages tchat (style commun) ── */
.chat-msg { font-size:13px; line-height:1.35; }
.chat-msg-name { font-weight:700; margin-right:4px; }
.chat-msg-text { color:rgba(255,255,255,.75); }

/* ═══════════════════════════════════════════
   TCHAT MOBILE — bulle flottante
═══════════════════════════════════════════ */
/* Bouton bulle */
.chat-bubble-btn {
    position:fixed; bottom:calc(20px + var(--safe-bottom)); right:16px; z-index:400;
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; box-shadow:0 4px 20px rgba(59,130,246,.4);
    transition:transform .2s, box-shadow .2s;
}
.chat-bubble-btn:active { transform:scale(.9); }
.chat-bubble-btn .chat-unread {
    position:absolute; top:-2px; right:-2px;
    width:18px; height:18px; border-radius:50%;
    background:var(--red); border:2px solid var(--bg);
    font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
    display:none;
}
.chat-bubble-btn.has-unread .chat-unread { display:flex; }

/* Panel flottant */
.chat-floating-panel {
    position:fixed; bottom:calc(84px + var(--safe-bottom)); right:12px; z-index:399;
    width:min(320px, calc(100vw - 24px));
    background:#0d1526; border:1px solid var(--border); border-radius:18px;
    box-shadow:0 8px 40px rgba(0,0,0,.6);
    display:flex; flex-direction:column; overflow:hidden;
    transform:scale(.8) translateY(20px); opacity:0; pointer-events:none;
    transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
    transform-origin:bottom right;
    max-height:60dvh;
}
.chat-floating-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
.chat-fp-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-fp-title  { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); font-weight:700; }
.chat-fp-close  { background:none; border:none; color:rgba(255,255,255,.4); font-size:18px; cursor:pointer; padding:0; line-height:1; }
.chat-fp-messages { flex:1; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:4px; min-height:80px; }
.chat-fp-messages::-webkit-scrollbar { width:2px; }
.chat-fp-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
.chat-fp-input { display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--border); flex-shrink:0; }
.chat-fp-input input { flex:1; padding:8px 11px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:white; font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600; outline:none; }
.chat-fp-input input:focus { border-color:var(--blue); }
.chat-fp-input input::placeholder { color:rgba(255,255,255,.25); }
.chat-fp-input button { padding:8px 12px; border-radius:9px; font-size:14px; }

/* Réactions mobile */
.reactions-mobile { display:flex; gap:6px; justify-content:center; padding:5px 10px 6px; background:rgba(2,6,23,.6); border-top:1px solid var(--border); flex-shrink:0; }
.reactions-mobile .reaction-btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:5px 8px; font-size:19px; cursor:pointer; transition:transform .15s; line-height:1; flex:1; max-width:52px; text-align:center; }
.reactions-mobile .reaction-btn:active { transform:scale(.85); }

/* Anti-spam visuel : désactivation temporaire */
.reaction-btn.cooling { opacity:.35; pointer-events:none; }

/* ── Réaction flottante ── */
.floating-reaction { position:fixed; font-size:32px; pointer-events:none; z-index:9000; animation:floatUp 1.4s ease-out forwards; }
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 60%{opacity:1} 100%{opacity:0;transform:translateY(-110px) scale(1.3)} }

/* ══════════════════════════════════════════
   GAMEOVER — podium
══════════════════════════════════════════ */
/* ══ ÉCRAN FIN DE PARTIE ══ */
#gameover-ui { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(14px); background:rgba(0,0,0,.7); overflow-y:auto; }
.gameover-card { width:100%; max-width:560px; text-align:center; border-radius:22px; padding:28px 22px; border-top:3px solid var(--gold); }
.gameover-title  { font-family:'Bebas Neue'; font-size:44px; color:var(--gold); letter-spacing:2px; margin-bottom:4px; }
.gameover-result { font-size:19px; font-weight:700; margin-bottom:16px; }

/* Bannière mort subite */
.sd-banner { background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(245,158,11,.1)); border:1px solid rgba(239,68,68,.3); border-radius:12px; padding:10px 16px; margin-bottom:14px; }
.sd-banner-title { font-family:'Bebas Neue'; font-size:22px; color:var(--red); letter-spacing:2px; }
.sd-banner-sub   { font-size:12px; color:rgba(255,255,255,.4); margin-top:1px; }

/* Podium enrichi */
.podium { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.podium-row { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.03); border:1px solid transparent; border-radius:13px; padding:9px 12px; transition:background .2s; }
.podium-row.is-winner { background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.15); }
.podium-row.is-me     { border-color:rgba(59,130,246,.2); }
.podium-rank { font-family:'Bebas Neue'; font-size:22px; width:30px; flex-shrink:0; text-align:center; }
.podium-rank.gold   { color:var(--gold); } .podium-rank.silver { color:#94a3b8; }
.podium-rank.bronze { color:#cd7f32; }     .podium-rank.other  { color:rgba(255,255,255,.2); }
.podium-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:15px; flex-shrink:0; }
.podium-info { flex:1; min-width:0; text-align:left; }
.podium-name { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podium-name.me { color:var(--blue); }
.podium-microstats { display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
.ms { font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; white-space:nowrap; }
.ms.ok  { background:rgba(16,185,129,.15); color:var(--green); }
.ms.ko  { background:rgba(239,68,68,.12);  color:var(--red); }
.ms.t   { background:rgba(255,255,255,.07); color:rgba(255,255,255,.45); }
.ms.na  { background:rgba(255,255,255,.04); color:rgba(255,255,255,.25); }
.podium-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.podium-score { font-family:'Bebas Neue'; font-size:26px; line-height:1; }
.podium-elo { font-size:11px; font-weight:800; letter-spacing:.5px; }
.podium-elo.gain { color:var(--green); } .podium-elo.loss { color:var(--red); } .podium-elo.draw { color:rgba(255,255,255,.3); }

/* Actions fin */
.go-actions { display:flex; flex-direction:column; gap:8px; }
.btn-rematch { width:100%; padding:15px; border-radius:13px; font-size:16px; font-weight:700; font-family:'Rajdhani',sans-serif; background:linear-gradient(135deg,#059669,#10b981); border:none; color:#fff; cursor:pointer; transition:filter .2s,transform .1s; letter-spacing:.5px; }
.btn-rematch:hover:not(:disabled) { filter:brightness(1.1); } .btn-rematch:active { transform:scale(.97); }
.btn-rematch:disabled { opacity:.45; cursor:default; }
.rematch-hint { font-size:12px; color:rgba(255,255,255,.3); text-align:center; min-height:16px; transition:color .3s; }
.gameover-btn { width:100%; padding:14px; border-radius:13px; font-size:15px; }

/* Score bump */
@keyframes scoreUp { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.score-bump { animation:scoreUp .3s ease; }
══════════════════════════════════════════ */
#lobby-ui { position:relative; z-index:1; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.lobby-card { width:100%; max-width:560px; border-radius:24px; padding:32px 26px; border-top:3px solid var(--blue); }
.lobby-title { font-family:'Bebas Neue'; font-size:42px; color:var(--blue); letter-spacing:2px; margin-bottom:4px; }
.lobby-subtitle { color:rgba(255,255,255,.4); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:28px; }

/* Code partageable */
.lobby-code-wrap { background:rgba(59,130,246,.08); border:1px dashed rgba(59,130,246,.3); border-radius:16px; padding:16px 20px; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lobby-code-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:4px; }
.lobby-code-value { font-family:'Bebas Neue'; font-size:38px; letter-spacing:6px; color:var(--blue); line-height:1; }
.lobby-code-copy  { background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.25); color:var(--blue); border-radius:10px; padding:10px 14px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:background .2s; white-space:nowrap; }
.lobby-code-copy:hover { background:rgba(59,130,246,.3); }
.lobby-code-copy.copied { background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.3); color:var(--green); }

/* Slots joueurs */
.lobby-slots { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.lobby-slot { display:flex; align-items:center; gap:12px; border-radius:14px; padding:12px 16px; transition:background .2s; }
.lobby-slot.filled { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.lobby-slot.empty  { background:rgba(255,255,255,.02); border:1px dashed rgba(255,255,255,.1); }
.lobby-slot.countdown-pulse { animation:slotPulse .6s infinite; }
@keyframes slotPulse { 50% { background:rgba(59,130,246,.12); } }
.slot-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:18px; flex-shrink:0; }
.slot-empty-icon { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.slot-name { flex:1; font-size:15px; font-weight:700; }
.slot-name.me { color:var(--blue); }
.slot-empty-text { flex:1; font-size:13px; color:rgba(255,255,255,.25); font-style:italic; }
.slot-badge { font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:6px; font-weight:700; }
.slot-badge.host { background:rgba(245,158,11,.15); color:var(--gold); border:1px solid rgba(245,158,11,.2); }
.slot-badge.you  { background:rgba(59,130,246,.15); color:var(--blue); border:1px solid rgba(59,130,246,.2); }
.slot-kick { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:var(--red); border-radius:7px; padding:5px 9px; font-size:12px; font-weight:700; cursor:pointer; font-family:'Rajdhani',sans-serif; transition:background .2s; }
.slot-kick:hover { background:rgba(239,68,68,.22); }

/* Inviter depuis la liste d'amis */
.lobby-invite-section { margin-bottom:22px; }
.lobby-invite-title { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:10px; font-weight:700; }
.lobby-friends-invite { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.lobby-friends-invite::-webkit-scrollbar { width:3px; }
.lobby-friends-invite::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
.lobby-friend-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.03); border-radius:10px; padding:9px 13px; gap:8px; }
.lobby-friend-row-info { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.lf-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.lf-dot.online  { background:var(--green); box-shadow:0 0 5px var(--green); }
.lf-dot.offline { background:rgba(255,255,255,.2); }
.lf-name { font-weight:700; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lf-status { font-size:11px; color:rgba(255,255,255,.3); }
.btn-invite { background:linear-gradient(135deg,var(--blue),var(--purple)); border:none; color:white; font-family:'Rajdhani',sans-serif; padding:7px 13px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:filter .2s; }
.btn-invite:hover { filter:brightness(1.15); }
.btn-invite:disabled { opacity:.35; cursor:default; filter:none; }
.btn-invite.invited { background:rgba(16,185,129,.2); border:1px solid rgba(16,185,129,.3); color:var(--green); }
.no-online-friends { text-align:center; color:rgba(255,255,255,.2); font-size:13px; padding:14px 0; font-style:italic; }

/* Boutons bas */
.lobby-actions { display:flex; gap:10px; flex-wrap:wrap; }
.lobby-actions button { flex:1; min-width:120px; padding:16px; border-radius:14px; font-size:16px; font-weight:700; }
.btn-launch { font-size:18px !important; }

/* Countdown overlay */
.lobby-countdown-overlay { position:absolute; inset:0; background:rgba(2,6,23,.9); border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; }
.countdown-number { font-family:'Bebas Neue'; font-size:120px; color:var(--blue); line-height:1; animation:countPop .8s ease; }
@keyframes countPop { 0%{transform:scale(1.6);opacity:0} 40%{opacity:1} 100%{transform:scale(1);opacity:1} }
.countdown-label { font-size:14px; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:8px; }

/* Section rejoindre par code */
.lobby-join-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.lobby-join-section .card-title { margin-bottom:10px; }
.lobby-join-row { display:flex; gap:8px; }
.lobby-join-row input { flex:1; padding:13px 16px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:white; font-family:'Bebas Neue'; font-size:22px; letter-spacing:4px; text-transform:uppercase; outline:none; text-align:center; }
.lobby-join-row input:focus { border-color:var(--blue); }
.lobby-join-row input::placeholder { color:rgba(255,255,255,.2); font-size:16px; letter-spacing:2px; font-family:'Rajdhani',sans-serif; }
.lobby-join-row button { padding:13px 18px; border-radius:12px; font-size:15px; }

/* ── CLASSEMENT GÉNÉRAL ── */
.leaderboard-card { border-radius:18px; }
.lb-table { width:100%; border-collapse:collapse; }
.lb-table th { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); font-weight:700; padding:0 10px 10px; text-align:left; }
.lb-table th:last-child, .lb-table td:last-child { text-align:right; }
.lb-row { border-top:1px solid rgba(255,255,255,.05); transition:background .15s; }
.lb-row:hover { background:rgba(255,255,255,.03); }
.lb-row td { padding:9px 10px; font-size:14px; font-weight:600; vertical-align:middle; }
.lb-rank { font-family:'Bebas Neue'; font-size:20px; width:36px; }
.lb-rank.r1 { color:var(--gold); } .lb-rank.r2 { color:#94a3b8; } .lb-rank.r3 { color:#cd7f32; }
.lb-rank.rme { color:var(--blue); }
.lb-avatar { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:14px; vertical-align:middle; }
.lb-name { font-size:15px; font-weight:700; }
.lb-name.me { color:var(--blue); }
.lb-elo { font-family:'Bebas Neue'; font-size:22px; }
.lb-elo.r1 { color:var(--gold); } .lb-elo.r2 { color:#94a3b8; } .lb-elo.r3 { color:#cd7f32; }
.lb-win-rate { font-size:13px; color:rgba(255,255,255,.45); }
.lb-wins { color:var(--green); }
.lb-losses { color:var(--red); }
.lb-me-row td { background:rgba(59,130,246,.07); }
@media(max-width:600px) {
    .lb-col-winrate, .lb-col-wl { display:none; }
}
    
/* ══════════════════════════════════════════
   PAGE PROFIL
══════════════════════════════════════════ */
#profile-ui {
    position:relative; z-index:1; min-height:100dvh;
    padding:16px 16px 48px;
    animation:fadeIn .25s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.profile-inner { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:28px; padding-bottom:40px; }

/* ─ Header navigation ─ */
.profile-nav { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.profile-back-btn {
    background:rgba(255,255,255,.06); border:1px solid var(--border);
    color:rgba(255,255,255,.6); border-radius:10px; padding:9px 14px;
    font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
    cursor:pointer; transition:background .2s; white-space:nowrap;
    letter-spacing:.5px;
}
.profile-back-btn:hover { background:rgba(255,255,255,.1); }
.profile-nav-title { font-family:'Bebas Neue'; font-size:22px; letter-spacing:2px; color:rgba(255,255,255,.35); }

/* ─ Hero card ─ */
.profile-hero {
    border-radius:20px; padding:28px 24px;
    display:flex; align-items:center; gap:18px;
    border-top:3px solid var(--blue);
    position:relative; overflow:hidden;
}
.profile-hero::after {
    content:''; position:absolute; top:-40px; right:-40px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(59,130,246,.12), transparent 70%);
    pointer-events:none;
}
.profile-avatar-xl {
    width:72px; height:72px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue'; font-size:30px;
    border:2px solid rgba(255,255,255,.1);
    position:relative; z-index:1;
}
.profile-hero-info { flex:1; min-width:0; position:relative; z-index:1; }
.profile-hero-name { font-family:'Bebas Neue'; font-size:30px; letter-spacing:1px; line-height:1; }
.profile-hero-since { font-size:11px; color:rgba(255,255,255,.3); letter-spacing:2px; text-transform:uppercase; margin-top:3px; }
.profile-tier-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:3px 10px; border-radius:6px; margin-top:7px;
}
.tier-elite  { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.25); }
.tier-pro    { background:rgba(59,130,246,.12);  color:#60a5fa; border:1px solid rgba(59,130,246,.25); }
.tier-rookie { background:rgba(255,255,255,.05); color:rgba(255,255,255,.35); border:1px solid var(--border); }

.profile-hero-right { text-align:right; flex-shrink:0; position:relative; z-index:1; }
.profile-elo-num { font-family:'Bebas Neue'; font-size:52px; color:var(--blue); line-height:1; }
.profile-elo-lbl { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.3); }
.profile-rank-lbl { font-size:12px; color:rgba(255,255,255,.3); margin-top:4px; }

/* ─ Stats grid ─ */
.pstats-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:12px;
    row-gap:12px;
}
@media(min-width:480px) { .pstats-grid { grid-template-columns:repeat(3,1fr); } }
.pstat-tile {
    border-radius:14px; padding:20px 14px 18px;
    text-align:center; position:relative; overflow:hidden;
    min-height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.pstat-tile::before {
    content:''; position:absolute; bottom:-10px; right:-10px;
    width:55px; height:55px; border-radius:50%;
    background:rgba(255,255,255,.03); pointer-events:none;
}
.pstat-val { font-family:'Bebas Neue'; font-size:38px; line-height:1; margin-bottom:8px; }
.pstat-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); font-weight:600; }

/* ─ Barre W/D/L ─ */
.wdl-card { border-radius:16px; padding:22px 22px 20px; }
.wdl-numbers { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.wdl-item { text-align:center; }
.wdl-num { font-family:'Bebas Neue'; font-size:28px; line-height:1; }
.wdl-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); }
.wdl-bar { height:8px; border-radius:4px; overflow:hidden; display:flex; gap:2px; }
.wdl-seg { height:100%; border-radius:4px; transition:width 1s cubic-bezier(.4,0,.2,1); }

/* ─ Graphique ELO ─ */
.elo-chart-card { border-radius:16px; padding:24px 20px 20px; }
.section-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.3); font-weight:600; margin-bottom:20px; }
#elo-chart-svg { width:100%; overflow:visible; display:block; }
.chart-empty { text-align:center; padding:28px 0; color:rgba(255,255,255,.2); font-size:13px; }

/* ─ Historique ─ */
.history-card { border-radius:16px; padding:24px 20px 22px; }
.history-rows { display:flex; flex-direction:column; gap:10px; }
.hr { display:flex; align-items:center; gap:10px; border-radius:12px; padding:13px 14px; transition:background .15s; cursor:default; }
.hr:hover { background:rgba(255,255,255,.04); }
.hr-badge {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue'; font-size:13px; letter-spacing:.5px;
}
.hr-badge.win  { background:rgba(16,185,129,.13); color:var(--green); border:1px solid rgba(16,185,129,.2); }
.hr-badge.loss { background:rgba(239,68,68,.1);   color:var(--red);   border:1px solid rgba(239,68,68,.18); }
.hr-badge.draw   { background:rgba(245,158,11,.1);  color:var(--gold);  border:1px solid rgba(245,158,11,.18); }
.hr-badge.podium { background:rgba(245,158,11,.12); color:#fbbf24; border:1px solid rgba(245,158,11,.25); }
.hr-middle { flex:1; min-width:0; }
.hr-opps { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr-sub { display:flex; gap:6px; margin-top:3px; flex-wrap:wrap; }
.hr-tag { font-size:10px; color:rgba(255,255,255,.3); }
.hr-tag.ok { color:rgba(16,185,129,.7); }
.hr-tag.ko { color:rgba(239,68,68,.6); }
.hr-right { text-align:right; flex-shrink:0; }
.hr-score { font-family:'Bebas Neue'; font-size:21px; line-height:1; }
.hr-elo-chg { font-size:11px; font-weight:700; margin-top:2px; }
.hr-elo-chg.up   { color:var(--green); }
.hr-elo-chg.down { color:var(--red); }
.hr-elo-chg.even { color:rgba(255,255,255,.25); }
.no-history { text-align:center; padding:32px 0; color:rgba(255,255,255,.2); font-size:13px; }

/* Spinner profil */
.profile-loading {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:60vh; gap:14px; color:rgba(255,255,255,.3);
}
.spin { width:36px; height:36px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Tooltip ELO chart */
#elo-tooltip {
    position:fixed; pointer-events:none; z-index:9999;
    background:#0f172a; border:1px solid var(--border);
    border-radius:8px; padding:6px 10px; font-size:12px;
    font-weight:700; color:var(--blue); opacity:0; transition:opacity .15s;
    white-space:nowrap;
}

/* ── RANGS ── */
.rank-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:3px 9px; border-radius:6px; border:1px solid;
    white-space:nowrap;
}
.rank-ignorant   { background:rgba(255,255,255,.03); color:rgba(255,255,255,.22); border-color:rgba(255,255,255,.08); }
.rank-scribe     { background:rgba(255,255,255,.06); color:rgba(255,255,255,.5);  border-color:rgba(255,255,255,.15); }
.rank-apprenti   { background:rgba(132,204,22,.1);   color:#a3e635; border-color:rgba(132,204,22,.25); }
.rank-lettre     { background:rgba(16,185,129,.1);   color:#34d399; border-color:rgba(16,185,129,.25); }
.rank-philosophe { background:rgba(59,130,246,.12);  color:#60a5fa; border-color:rgba(59,130,246,.3); }
.rank-alchimiste { background:rgba(6,182,212,.12);   color:#22d3ee; border-color:rgba(6,182,212,.3); }
.rank-oracle     { background:rgba(245,158,11,.13);  color:#fbbf24; border-color:rgba(245,158,11,.3); }
.rank-archiviste { background:rgba(168,85,247,.15);  color:#c084fc; border-color:rgba(168,85,247,.35); }
.rank-omniscient { background:rgba(249,115,22,.15);  color:#fb923c; border-color:rgba(249,115,22,.4);  box-shadow:0 0 14px rgba(249,115,22,.18); }

/* Badge rang dans le header dashboard */
#dash-rank-badge { margin-left:4px; }

/* Rang dans le leaderboard */
.lb-rank-badge { font-size:10px; }