/* ═══════════════════════════════════════════════════════
   HUD EN JEU — THÈME DE BASE (violet / rouge / noir)
   S’applique quand le cosmétique "Runes gravées" n’est pas actif.
═══════════════════════════════════════════════════════ */
#game-viewport #hud #hud-top,
#game-viewport #hud #hud-hp-block,
#game-viewport #hud #hud-kill-counter,
#game-viewport #hud #hud-stats,
#game-viewport #hud #hud-sprint,
#game-viewport #hud #hud-weapon-slots,
#game-viewport #hud #hud-manche-counter,
#game-viewport #hud #hud-coins {
  background: rgba(10, 6, 22, 0.92);
  border-color: rgba(140, 50, 180, 0.5);
  box-shadow: 0 0 12px rgba(80, 20, 120, 0.25), inset 0 1px 0 rgba(180, 80, 220, 0.08);
}
#game-viewport #hud #hud-level-value,
#game-viewport #hud #hud-time { color: #d8a8f0; text-shadow: 0 0 10px rgba(200, 120, 255, 0.6); }
#game-viewport #hud #hud-level-label { color: #8060a0; }
#game-viewport #hud #xp-bar-bg {
  background: rgba(0,0,0,0.6);
  border-color: rgba(160, 80, 220, 0.45);
  box-shadow: inset 0 0 8px rgba(60, 20, 80, 0.4);
}
#game-viewport #hud #xp-bar-fill {
  background: linear-gradient(90deg, #502080, #a040e0);
  box-shadow: inset 0 0 10px rgba(200, 150, 255, 0.4), 0 0 12px rgba(160, 80, 220, 0.3);
}
#game-viewport #hud #hud-hp-block { border-color: rgba(200, 60, 80, 0.5); }
#game-viewport #hud #hp-bar-bg {
  background: rgba(0,0,0,0.6);
  border-color: rgba(200, 50, 70, 0.4);
}
#game-viewport #hud #hp-bar-fill {
  background: linear-gradient(90deg, #400818, #c03050);
  box-shadow: inset 0 0 6px rgba(255, 100, 120, 0.25);
}
#game-viewport #hud #hp-icon { color: #e05060; filter: drop-shadow(0 0 6px #e05060); }
#game-viewport #hud #hud-sprint { border-color: rgba(120, 60, 180, 0.4); }
#game-viewport #hud #sprint-bar-bg { border-color: rgba(140, 80, 200, 0.35); }
#game-viewport #hud #sprint-bar-fill {
  background: linear-gradient(90deg, #302060, #8060c0);
  box-shadow: inset 0 0 6px rgba(180, 140, 255, 0.3);
}
#game-viewport #hud #sprint-bar-fill.active {
  background: linear-gradient(90deg, #5040a0, #b090f0);
}
#game-viewport #hud #sprint-icon { color: #a070e0; filter: drop-shadow(0 0 6px #a070e0); }
#game-viewport #hud .weapon-slot.active {
  border-color: rgba(180, 100, 220, 0.55);
  background: rgba(140, 60, 200, 0.12);
  box-shadow: 0 0 10px rgba(160, 80, 220, 0.2);
}
#game-viewport #hud .weapon-slot { border-color: rgba(100, 60, 140, 0.2); }
#game-viewport #hud .slot-level { color: #c090e0; }
#game-viewport #hud #hud-coins { border-color: rgba(180, 100, 220, 0.5); }
#game-viewport #hud #hud-coins-icon,
#game-viewport #hud #hud-coins-value { color: #d8a8f0; text-shadow: 0 0 8px rgba(200, 120, 255, 0.5); }
#game-viewport #hud #hud-manche-counter {
  border-color: rgba(160, 80, 220, 0.45);
  color: #d8a8f0;
  text-shadow: 0 0 10px rgba(200, 120, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════
   COSMÉTIQUE HUD : RUNES D’EXHUMATION (or / noir / rouge)
   Thème acheté : bordures dorées, détails et décorations.
═══════════════════════════════════════════════════════ */
body.hud-runes-exhumation #game-viewport #hud #hud-top,
body.hud-runes-exhumation #game-viewport #hud #hud-hp-block,
body.hud-runes-exhumation #game-viewport #hud #hud-kill-counter,
body.hud-runes-exhumation #game-viewport #hud #hud-stats,
body.hud-runes-exhumation #game-viewport #hud #hud-sprint,
body.hud-runes-exhumation #game-viewport #hud #hud-weapon-slots,
body.hud-runes-exhumation #game-viewport #hud #hud-manche-counter,
body.hud-runes-exhumation #game-viewport #hud #hud-coins {
  background: linear-gradient(145deg, rgba(18, 12, 8, 0.95), rgba(28, 18, 10, 0.92));
  border: 1px solid rgba(240, 192, 64, 0.7);
  box-shadow:
    0 0 20px rgba(240, 192, 64, 0.2),
    inset 0 0 20px rgba(240, 192, 64, 0.06),
    inset 0 1px 0 rgba(255, 220, 140, 0.15);
}
body.hud-runes-exhumation #game-viewport #hud #hud-level-value,
body.hud-runes-exhumation #game-viewport #hud #hud-time {
  color: #f0d060;
  text-shadow: 0 0 14px rgba(240, 192, 64, 0.8), 0 0 4px #000;
}
body.hud-runes-exhumation #game-viewport #hud #hud-level-label { color: #c9a030; }
body.hud-runes-exhumation #game-viewport #hud #xp-bar-bg {
  background: rgba(0,0,0,0.65);
  border-color: rgba(240, 192, 64, 0.6);
  box-shadow: inset 0 0 12px rgba(80, 50, 0, 0.35), 0 0 8px rgba(240, 192, 64, 0.15);
}
body.hud-runes-exhumation #game-viewport #hud #xp-bar-fill {
  background: linear-gradient(90deg, #806020, #e0b040);
  box-shadow: inset 0 0 12px rgba(255, 220, 100, 0.4), 0 0 14px rgba(240, 192, 64, 0.35);
}
body.hud-runes-exhumation #game-viewport #hud #hud-hp-block { border-color: rgba(220, 80, 60, 0.6); }
body.hud-runes-exhumation #game-viewport #hud #hp-bar-bg {
  border-color: rgba(240, 160, 64, 0.5);
  box-shadow: inset 0 0 8px rgba(60, 30, 0, 0.3);
}
body.hud-runes-exhumation #game-viewport #hud #hp-bar-fill {
  background: linear-gradient(90deg, #802010, #e06040);
  box-shadow: inset 0 0 8px rgba(255, 180, 120, 0.3), 0 0 10px rgba(220, 80, 60, 0.25);
}
body.hud-runes-exhumation #game-viewport #hud #hp-icon { color: #f08060; filter: drop-shadow(0 0 8px #f08060); }
body.hud-runes-exhumation #game-viewport #hud #hud-sprint { border-color: rgba(240, 192, 64, 0.5); }
body.hud-runes-exhumation #game-viewport #hud #sprint-bar-bg { border-color: rgba(240, 192, 64, 0.45); }
body.hud-runes-exhumation #game-viewport #hud #sprint-bar-fill {
  background: linear-gradient(90deg, #604020, #c9a030);
  box-shadow: inset 0 0 8px rgba(255, 220, 140, 0.25);
}
body.hud-runes-exhumation #game-viewport #hud #sprint-bar-fill.active {
  background: linear-gradient(90deg, #a08030, #f0d060);
}
body.hud-runes-exhumation #game-viewport #hud #sprint-icon { color: #e0b040; filter: drop-shadow(0 0 8px #e0b040); }
body.hud-runes-exhumation #game-viewport #hud .weapon-slot.active {
  border-color: rgba(240, 192, 64, 0.7);
  background: rgba(240, 192, 64, 0.1);
  box-shadow: 0 0 12px rgba(240, 192, 64, 0.3), inset 0 0 8px rgba(240, 192, 64, 0.08);
}
body.hud-runes-exhumation #game-viewport #hud .weapon-slot { border-color: rgba(200, 160, 60, 0.25); }
body.hud-runes-exhumation #game-viewport #hud .slot-level { color: #f0c040; }
body.hud-runes-exhumation #game-viewport #hud #hud-coins { border-color: rgba(240, 192, 64, 0.7); }
body.hud-runes-exhumation #game-viewport #hud #hud-coins-icon,
body.hud-runes-exhumation #game-viewport #hud #hud-coins-value {
  color: #f0d060;
  text-shadow: 0 0 14px rgba(240, 192, 64, 0.7), 0 0 4px #000;
}
body.hud-runes-exhumation #game-viewport #hud #hud-manche-counter {
  border-color: rgba(240, 192, 64, 0.6);
  color: #f0d060;
  text-shadow: 0 0 14px rgba(240, 192, 64, 0.7);
}
body.hud-runes-exhumation #game-viewport #hud #kill-count,
body.hud-runes-exhumation #game-viewport #hud .hud-stat.buffed { color: #f0c040; text-shadow: 0 0 10px rgba(240, 192, 64, 0.5); }
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');

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

/* ═══════════════════════════════════════════════════════
   RESPONSIVE SCALE
   Formule fluide : 16px @ 1920px → 20px @ 2560px
   clamp(14px, 0.625vw + 4px, 22px)
   Toutes les tailles critiques utilisent rem.
═══════════════════════════════════════════════════════ */
html {
  font-size: clamp(14px, calc(0.625vw + 4px), 22px);
}

:root {
  --gold:         #f0c040;
  --gold-dim:     #a07820;
  --red:          #e04040;
  --red-dark:     #801010;
  --green:        #40c060;
  --blue:         #4080e0;
  --purple:       #a040e0;
  --bg-dark:      #0a0a12;
  --panel-bg:     rgba(8, 8, 18, 0.88);
  --panel-border: rgba(240, 192, 64, 0.35);
  --text-bright:  #f5ecd5;
  --text-dim:     #8a7a5a;
  --xp-color:     #60d0ff;
  --xp-glow:      rgba(96, 208, 255, 0.5);
}

body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  font-family: 'Rajdhani', sans-serif;
  color: var(--text-bright);
}

/* Référence d’affichage : tout le monde voit la même chose (16:9) */
:root {
  --design-w: 1920;
  --design-h: 1080;
  --ui-scale: 1;
}

/* En jeu : viewport plein écran, pas de bandes noires (logique différente du menu) */
#game-container {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: #000;
}

#game-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

#game-viewport #hud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════
   HUD
═══════════════════════════════════════════════════════ */
#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* Top centre — XP / niveau / timer */
#hud-top {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0.5rem; padding: 0.5rem 1rem;
  backdrop-filter: blur(4px);
  min-width: min(26rem, 92vw);
}

#hud-level-block { display: flex; flex-direction: column; align-items: center; min-width: 2.5rem; }
#hud-level-label { font-size: 0.56rem; letter-spacing: 2px; color: var(--gold-dim); text-transform: uppercase; }
#hud-level-value { font-family: 'Cinzel', serif; font-size: 1.375rem; font-weight: 900; color: var(--gold); line-height: 1; text-shadow: 0 0 12px var(--gold); }

#hud-xp-block { flex: 1; }
#xp-bar-bg {
  position: relative; height: 1.25rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(96,208,255,0.3);
  border-radius: 0.625rem; overflow: hidden;
}
#xp-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3080b0, #60d0ff);
  border-radius: 0.625rem;
  transition: width 0.3s ease;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.3);
}
#xp-bar-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 0.69rem; font-weight: 600; letter-spacing: 1px; color: #fff;
  text-shadow: 0 1px 3px #000;
}

#hud-time-block { min-width: 3.75rem; text-align: center; }
#hud-time { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--text-bright); letter-spacing: 2px; }

/* HP Bar — bas centre (dans #hud-bottom-center) */
#hud-hp-block {
  width: 100%;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--panel-bg); border: 1px solid rgba(224,64,64,0.4);
  border-radius: 0.5rem; padding: 0.25rem 0.6rem;
  backdrop-filter: blur(4px);
}
#hp-icon { font-size: 0.875rem; color: var(--red); filter: drop-shadow(0 0 6px var(--red)); }
#hp-bar-bg {
  position: relative; flex: 1; height: 0.875rem;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(224,64,64,0.3);
  border-radius: 0.4375rem; overflow: hidden;
}
#hp-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--red-dark), var(--red));
  border-radius: 0.4375rem; transition: width 0.2s ease;
}
#hp-bar-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 0.6rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000;
}

/* Kill counter — dans #hud-bottom-left */
#hud-kill-counter {
  background: var(--panel-bg); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem; padding: 0.375rem 0.875rem;
  display: flex; align-items: center; gap: 0.5rem;
  backdrop-filter: blur(4px);
}
#kill-icon { font-size: 1rem; opacity: 0.7; }
#kill-count { font-family: 'Cinzel', serif; font-size: 1.125rem; font-weight: 700; color: var(--text-bright); }

/* Sprint — dans #hud-bottom-center */
#hud-sprint {
  width: 100%;
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--panel-bg);
  border: 1px solid rgba(64,192,255,0.3);
  border-radius: 0.5rem; padding: 0.2rem 0.6rem;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
#sprint-icon {
  font-size: 0.875rem; color: #40c0ff;
  filter: drop-shadow(0 0 6px #40c0ff);
  transition: opacity 0.3s;
}
#sprint-icon.on-cooldown { opacity: 0.35; filter: none; }
#sprint-bar-wrap { flex: 1; }
#sprint-bar-bg {
  position: relative; height: 0.45rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(64,192,255,0.25);
  border-radius: 0.225rem; overflow: hidden;
}
#sprint-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #1060a0, #40c0ff);
  border-radius: 0.225rem;
  transition: width 0.1s linear;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
}
#sprint-bar-fill.active {
  background: linear-gradient(90deg, #00aaff, #a0e8ff);
  box-shadow: 0 0 8px rgba(64,192,255,0.7), inset 0 0 6px rgba(255,255,255,0.4);
}
#sprint-label {
  font-size: 0.56rem; letter-spacing: 2px; color: rgba(64,192,255,0.6);
  text-transform: uppercase; text-align: center; display: block; margin-top: 2px;
}
#sprint-cd-text {
  font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 700;
  color: rgba(64,192,255,0.75); min-width: 1.5rem; text-align: right;
}

/* ═══════════════════════════════════════════════════════
   LEVEL UP MODAL
═══════════════════════════════════════════════════════ */
#levelup-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
  z-index: 100;
}
#levelup-overlay.hidden { display: none; }

#levelup-modal {
  background: linear-gradient(145deg, #0d0d1f, #181828);
  border: 1px solid var(--gold-dim);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  width: clamp(480px, 55vw, 860px);
  max-width: 97vw;
  box-shadow: 0 0 60px rgba(240,192,64,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: modalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalIn {
  from { transform: scale(0.7) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

#levelup-header { text-align: center; margin-bottom: 1.5rem; }
#levelup-star { font-size: 1.75rem; color: var(--gold); animation: spin 4s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
#levelup-title { font-family: 'Cinzel', serif; font-size: 1.625rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px var(--gold); letter-spacing: 4px; }
#levelup-subtitle { color: var(--text-dim); font-size: 0.81rem; letter-spacing: 2px; margin-top: 4px; }

#upgrade-choices { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: nowrap; }

.upgrade-card {
  flex: 1; min-width: 0; max-width: 14.375rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem; padding: 1rem 0.75rem;
  cursor: pointer; transition: all 0.2s ease;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; pointer-events: all;
}
.upgrade-card:hover {
  background: rgba(240,192,64,0.1);
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(240,192,64,0.2);
}
.upgrade-icon { font-size: 2.25rem; line-height: 1; }
.upgrade-name { font-family: 'Cinzel', serif; font-size: 0.875rem; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
.upgrade-desc { font-size: 0.75rem; color: var(--text-dim); line-height: 1.5; }
.upgrade-type-badge {
  font-size: 0.56rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
}
.badge-new          { background: rgba(160,64,224,0.3);  color: #c080ff; border: 1px solid rgba(160,64,224,0.5); }
.badge-upgrade      { background: rgba(64,192,96,0.2);   color: #60e080; border: 1px solid rgba(64,192,96,0.4); }
.badge-stat         { background: rgba(64,128,224,0.2);   color: #80b0ff; border: 1px solid rgba(64,128,224,0.4); }
.badge-stat-arme    { background: rgba(220,120,20,0.25);  color: #ffaa40; border: 1px solid rgba(220,120,20,0.5); }
.badge-stat-joueur  { background: rgba(200,40,60,0.25);   color: #ff8090; border: 1px solid rgba(200,40,60,0.5); }
.badge-stat-generale{ background: rgba(40,160,220,0.25);  color: #60d0ff; border: 1px solid rgba(40,160,220,0.5); }

/* ═══════════════════════════════════════════════════════
   GAME OVER
═══════════════════════════════════════════════════════ */
#gameover-screen {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; backdrop-filter: blur(6px);
}
#gameover-screen.hidden { display: none; }
#gameover-content { text-align: center; }
#gameover-title {
  font-family: 'Cinzel', serif; font-size: 3.5rem; font-weight: 900;
  color: var(--red); text-shadow: 0 0 30px var(--red);
  letter-spacing: 8px; margin-bottom: 2rem;
  animation: flicker 2s ease-in-out infinite;
}
@keyframes flicker { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

#gameover-stats {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 0.75rem; padding: 1.25rem 2.5rem; margin-bottom: 1.75rem;
}
.stat-row {
  display: flex; justify-content: space-between; gap: 3rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 1rem;
}
.stat-row:last-child { border-bottom: none; }
.stat-row span:last-child { color: var(--gold); font-weight: 700; font-family: 'Cinzel', serif; }

/* ═══════════════════════════════════════════════════════
   START SCREEN & LEVEL SELECT
═══════════════════════════════════════════════════════ */

/* Même interface pour tous : zone 1920×1080 redimensionnée */
#start-screen {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #0d0b1a 0%, #050408 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; overflow: hidden;
}
#start-screen::-webkit-scrollbar { width: 4px; }
#start-screen::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 2px; }

#bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.5; z-index: 0;
}

#start-screen-inner {
  width: 1920px;
  height: 1080px;
  transform: scale(var(--ui-scale));
  transform-origin: center center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-size: 16px;
}

/* Colonne centrale — layout fixe 1920×1080, tout tient sans scroll */
#start-content {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem 0.75rem;
  width: 100%;
  max-width: 1800px;
  max-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Titre ─────────────────────────────────────────────── */
#title-block { text-align: center; }
#title-rune {
  font-size: 2rem; color: var(--red); display: block; margin-bottom: 6px;
  text-shadow: 0 0 28px rgba(224,64,64,0.9);
  animation: flicker 2.4s ease-in-out infinite;
}
#start-title {
  font-family: 'Cinzel', serif;
  font-size: 3.2rem;
  font-weight: 900; color: var(--gold); letter-spacing: 16px; line-height: 1;
  text-shadow: 0 0 50px rgba(240,192,64,0.55), 0 0 100px rgba(240,192,64,0.2);
}
#start-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 400; color: var(--text-dim); letter-spacing: 10px; margin-top: 4px;
}
#start-tagline {
  font-size: 0.8rem; color: rgba(138,122,90,0.65);
  letter-spacing: 1px; font-style: italic; margin-top: 6px;
}

/* ── Mode selector : MANCHES à gauche, ENDLESS à droite ─ */
.card-mode-row {
  display: flex; gap: 0.4rem; width: 100%; margin-top: 0; margin-bottom: 0.5rem;
}
.mode-btn {
  flex: 1; padding: 0.42rem 0.3rem;
  font-family: 'Cinzel', serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 5px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim); cursor: pointer;
  transition: all 0.2s ease; pointer-events: all;
}
.mode-btn.mode-selected {
  background: rgba(240,192,64,0.14);
  border-color: rgba(240,192,64,0.55);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(240,192,64,0.12);
}
.mode-btn:not(.mode-locked):not(.mode-selected):hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  color: var(--text-bright);
}

/* ── Sélection de niveau ───────────────────────────────── */
#level-select { width: 100%; }
#level-select-label {
  text-align: center; font-size: 0.6rem; letter-spacing: 4px;
  color: var(--text-dim); margin-bottom: 0.5rem; text-transform: uppercase;
}

/* 5 cartes — larges, peu hautes, arrondies */
#level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.level-card {
  min-width: 0;
  max-width: 340px;
  min-height: 260px;
  position: relative;

  display: flex; flex-direction: column; align-items: center;

  padding: 1rem 1.1rem 1rem;
  gap: 0;
  text-align: center;
  border-radius: 1.2rem;
}
.level-playable {
  background: linear-gradient(160deg, #0e0c1e, #12101f);
  border: 1px solid rgba(240,192,64,0.35);
  cursor: pointer;
  box-shadow: 0 4px 28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(240,192,64,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.level-playable:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 38px rgba(240,192,64,0.22), inset 0 1px 0 rgba(240,192,64,0.14);
  border-color: rgba(240,192,64,0.65);
}
.level-playable:hover .card-glow { opacity: 1; }
.card-glow {
  position: absolute; inset: 0; border-radius: 1.5rem;
  background: radial-gradient(ellipse at 50% 90%, rgba(240,192,64,0.09), transparent 65%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.level-locked {
  background: linear-gradient(160deg, #080810, #0a0a14);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: not-allowed; opacity: 0.5;
}

/* Textes des cartes — lisibles, aérés */
.card-act {
  font-size: 0.58rem; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold-dim); font-weight: 700;
  margin-bottom: 0.45rem;
}
.level-locked .card-act { color: rgba(90,80,60,0.55); }
.card-icon { font-size: 2.1rem; line-height: 1; margin-bottom: 0.45rem; }
.level-locked .card-icon { filter: grayscale(1) opacity(0.35); }
.card-name {
  font-family: 'Cinzel', serif; font-size: 0.88rem; font-weight: 700;
  color: var(--text-bright); line-height: 1.3; letter-spacing: 0.3px;
  margin-bottom: 0.4rem;
}
.level-locked .card-name { color: rgba(100,90,70,0.55); }
.card-desc {
  font-size: 0.62rem; color: var(--text-dim); line-height: 1.4;
  margin-bottom: 0.5rem;
}
.level-locked .card-desc { color: rgba(70,65,50,0.5); }
.card-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-bottom: 0.5rem; }
.tag { font-size: 0.70rem; letter-spacing: 1px; padding: 2px 20px; border-radius: 20px; }
.tag-diff {
  background: rgba(224,64,64,0.13); color: rgba(224,110,90,0.85);
  border: 1px solid rgba(224,64,64,0.22);
}
.card-play-btn {
  margin-top: 0.5rem; width: 85%;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.63rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  border: none; outline: none; border-radius: 6px; padding: 0.55rem 0.4rem;
  background: linear-gradient(135deg, #7a5010, #e0b030);
  color: #1a0f00; box-shadow: 0 4px 14px rgba(240,192,64,0.3);
  transition: all 0.2s ease; pointer-events: all;
}
.card-play-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(240,192,64,0.5); }
.card-play-btn:active { transform: translateY(0); }

.lock-badge {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: auto; padding: 0.5rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 6px;
  background: rgba(255,255,255,0.025); width: 100%;
}
.lock-icon { font-size: 1rem; opacity: 0.28; }
.lock-text {
  font-size: 0.5rem; letter-spacing: 3.5px;
  color: rgba(100,90,70,0.45); font-family: 'Cinzel', serif; text-transform: uppercase;
}

/* ── Groupe bas-droite : wrapper contenant pièces + contrôles ── */
#bottom-right-hud {
  position: fixed; bottom: 1.25rem; right: 1.5rem; z-index: 400;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem;
}

#bottom-right-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ── Bouton Autel des Âmes ─────────────────────────────────── */
#shop-open-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.48rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(240,192,64,0.55);
  background: radial-gradient(circle at 0% 0%, rgba(224,64,64,0.22), rgba(10,6,16,0.96));
  box-shadow:
    0 0 22px rgba(224,64,64,0.24),
    inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--text-bright);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
#shop-open-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}
#shop-open-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 32px rgba(224,64,64,0.38),
    inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: rgba(240,192,64,0.85);
}
#shop-open-btn:active {
  transform: translateY(0);
  box-shadow:
    0 0 18px rgba(224,64,64,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.shop-rune {
  font-size: 1rem;
  color: var(--red);
  text-shadow: 0 0 12px rgba(224,64,64,0.8);
  animation: flicker 2.6s ease-in-out infinite;
}
.shop-label {
  font-weight: 700;
  color: var(--gold);
}

/* ── Contrôles — même taille que fragments d'âme / autel ────── */
#start-controls {
  display: flex; flex-direction: row; align-items: center; gap: 1rem;
  min-height: 2.5rem;
  box-sizing: border-box;
  background: rgba(6,4,14,0.88);
  border: 1px solid rgba(240,192,64,0.45);
  border-radius: 2rem; padding: 0.42rem 1.1rem;
  box-shadow: 0 0 22px rgba(240,192,64,0.18), inset 0 1px 0 rgba(240,192,64,0.1);
  backdrop-filter: blur(6px);
}
.ctrl-row {
  display: flex; align-items: center; gap: 0.75rem;
}
.ctrl-keys {
  display: flex; align-items: center; gap: 0.28rem;
}
.ctrl-label {
  font-family: 'Cinzel', serif; font-size: 0.672rem; font-weight: 700;
  letter-spacing: 1.5px; color: var(--gold-dim); text-transform: uppercase;
}
kbd {
  background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.38);
  border-radius: 5px; padding: 2px 8px;
  font-size: 0.672rem; font-family: 'Cinzel', serif;
  color: var(--gold); letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
#restart-btn {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; cursor: pointer; border: none; outline: none;
  padding: 0.875rem 2.25rem; border-radius: 8px; font-size: 0.875rem;
  background: linear-gradient(135deg, #8a6010, #f0c040);
  color: #1a0f00; box-shadow: 0 4px 20px rgba(240,192,64,0.4);
  transition: all 0.2s ease;
}
#restart-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(240,192,64,0.6); }
#restart-btn:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════
   DAMAGE NUMBERS
═══════════════════════════════════════════════════════ */
.dmg-number {
  position: absolute; pointer-events: none;
  font-family: 'Cinzel', serif; font-weight: 900;
  text-shadow: 0 2px 4px #000;
  animation: dmgFloat 0.9s ease-out forwards;
}
@keyframes dmgFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-48px) scale(0.8); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   PSEUDO + WEAPON PICKER — côte à côte
═══════════════════════════════════════════════════════ */
#pseudo-weapon-row {
  width: 100%; max-width: 860px;
  display: flex; flex-direction: row; align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

/* ── Pseudo ──────────────────────────────────────────── */
#pseudo-block {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
#pseudo-label {
  font-size: 0.5rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-dim); font-family: 'Cinzel', serif;
}
#pseudo-wrap {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(4,2,12,0.88);
  border: 1px solid rgba(240,192,64,0.45);
  border-radius: 10px; padding: 0.7rem 1.3rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 22px rgba(0,0,0,0.5);
}
#pseudo-wrap:focus-within {
  border-color: rgba(240,192,64,0.8);
  box-shadow: 0 0 24px rgba(240,192,64,0.2);
}
#pseudo-rune, #pseudo-rune-r {
  font-size: 1rem; color: var(--red);
  text-shadow: 0 0 10px rgba(224,64,64,0.6);
  animation: flicker 2.4s ease-in-out infinite;
  user-select: none;
}
#pseudo-input {
  background: transparent; border: none; outline: none;
  font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700;
  color: var(--text-bright); letter-spacing: 2px;
  text-align: center; width: 13rem;
  caret-color: var(--gold);
}
#pseudo-input::placeholder { color: rgba(138,122,90,0.4); font-weight: 400; letter-spacing: 1px; font-size: 0.9rem; }

/* ── Weapon Picker ───────────────────────────────────── */
#weapon-picker {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
#weapon-picker-label {
  font-size: 0.5rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-dim); font-family: 'Cinzel', serif;
  white-space: nowrap;
}
#weapon-picker-slots {
  display: flex; flex-wrap: nowrap; gap: 0.3rem; align-items: center;
  background: rgba(4,2,12,0.88);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 10px; padding: 0.4rem 0.55rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 22px rgba(0,0,0,0.5);
}
.wp-slot {
  width: 2.8rem; height: 2.8rem;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.4rem;
  padding: 0 0.1rem;
  cursor: pointer;
  transition: all 0.18s ease;
  pointer-events: all;
}
.wp-slot:hover {
  background: rgba(240,192,64,0.09);
  border-color: rgba(240,192,64,0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(240,192,64,0.15);
}
.wp-slot.wp-selected {
  background: rgba(240,192,64,0.15);
  border-color: rgba(240,192,64,0.75);
  box-shadow: 0 0 14px rgba(240,192,64,0.3), inset 0 1px 0 rgba(240,192,64,0.12);
  transform: translateY(-2px);
}
.wp-icon { font-size: 1rem; line-height: 1; }
.wp-name {
  font-family: 'Cinzel', serif; font-size: 0.52rem; font-weight: 700;
  color: var(--text-bright); letter-spacing: 0.3px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.wp-slot.wp-selected .wp-name { color: var(--gold); }


/* ═══════════════════════════════════════════════════════
   MODE SELECTOR
═══════════════════════════════════════════════════════ */
.card-mode-row { display: flex; gap: 0.4rem; width: 100%; margin-top: 0; margin-bottom: 0.4rem; }
.mode-btn {
  flex: 1; padding: 0.42rem 0.3rem;
  font-family: 'Cinzel', serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 5px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim); cursor: pointer;
  transition: all 0.2s ease; pointer-events: all;
}
.mode-btn.mode-selected {
  background: rgba(240,192,64,0.15);
  border-color: rgba(240,192,64,0.55);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(240,192,64,0.15);
}
.mode-btn.mode-locked { cursor: not-allowed; opacity: 0.35; font-size: 0.5625rem; }
.mode-btn:not(.mode-locked):not(.mode-selected):hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
  color: var(--text-bright);
}

/* ═══════════════════════════════════════════════════════
   LEADERBOARD PANEL
═══════════════════════════════════════════════════════ */
#leaderboard-panel {
  width: 100%; max-width: 860px;
  background: linear-gradient(160deg, rgba(8,6,18,0.92), rgba(12,10,22,0.88));
  border: 1px solid rgba(240,192,64,0.22);
  border-radius: 0.75rem; padding: 0.6rem 1rem 0.6rem;
  box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(240,192,64,0.06);
}
#lb-header {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.lb-rune {
  font-size: 1rem; color: var(--red);
  text-shadow: 0 0 12px rgba(224,64,64,0.6);
  animation: flicker 2.4s ease-in-out infinite;
}
#lb-title {
  font-family: 'Cinzel', serif; font-size: 0.8125rem; font-weight: 900;
  letter-spacing: 5px; color: var(--gold-dim); text-transform: uppercase;
}

/* Colonnes : rang | nom | temps | kills | niveau | mode | date */
#lb-cols-header, .lb-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 4.5rem 4rem 3rem 5.75rem 4.75rem;
  gap: 0.25rem;
  align-items: center;
}
#lb-cols-header {
  padding: 0 0.625rem 0.4rem;
  border-bottom: 1px solid rgba(240,192,64,0.15);
  font-size: 0.5rem; letter-spacing: 2.5px; color: var(--text-dim);
  text-transform: uppercase;
}

/* Alignement en-têtes — doit correspondre exactement aux cellules */
.lb-col-rank  { text-align: center; }
.lb-col-name  { text-align: left;   padding-left: 0.25rem; }
.lb-col-time  { text-align: center; }
.lb-col-kills { text-align: center; }
.lb-col-level { text-align: center; }
.lb-col-mode  { text-align: center; }
.lb-col-date  { text-align: center; }

#lb-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 200px; overflow-y: auto;
}
#lb-list::-webkit-scrollbar { width: 4px; }
#lb-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 2px; }
#lb-list::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.25); border-radius: 2px; }

.lb-row {
  padding: 0.45rem 0.625rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid transparent;
  font-size: 0.75rem;
  transition: background 0.15s;
}
.lb-row:hover { background: rgba(255,255,255,0.04); }

.lb-gold   { background: rgba(240,192,64,0.08) !important; border-color: rgba(240,192,64,0.25) !important; }
.lb-silver { background: rgba(180,180,200,0.07) !important; border-color: rgba(180,180,200,0.18) !important; }
.lb-bronze { background: rgba(180,100,40,0.08) !important; border-color: rgba(180,100,40,0.2) !important; }

/* Alignement cellules de données — identique aux en-têtes */
.lb-medal  { text-align: center; font-size: 0.875rem; }
.lb-name   { text-align: left; padding-left: 0.25rem; font-family: 'Cinzel', serif; font-weight: 700; color: var(--text-bright); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-gold   .lb-name { color: var(--gold); }
.lb-silver .lb-name { color: #c8c8d8; }
.lb-bronze .lb-name { color: #c87840; }
.lb-time   { text-align: center; font-family: 'Cinzel', serif; font-size: 0.8125rem; font-weight: 700; color: var(--text-bright); }
.lb-kills  { text-align: center; color: rgba(224,80,80,0.85); font-size: 0.75rem; }
.lb-icon   { font-size: 0.625rem; margin-left: 2px; }
.lb-level  { text-align: center; color: var(--gold-dim); font-size: 0.6875rem; }
.lb-date   { text-align: center; font-size: 0.625rem; color: var(--text-dim); opacity: 0.6; }

/* Cellule mode : centre le badge dans sa colonne */
.lb-mode-cell { display: flex; justify-content: center; align-items: center; }

/* Badge mode — taille ajustée pour rentrer dans la cellule proprement */
.lb-badge {
  font-size: 0.5625rem; letter-spacing: 0.5px; font-weight: 700;
  padding: 2px 5px; border-radius: 20px;
  display: inline-block; width: fit-content;
  white-space: nowrap; text-align: center;
}
.lb-badge-endless { background: rgba(64,128,224,0.2);  color: #80a8f0; border: 1px solid rgba(64,128,224,0.3); }
.lb-badge-manches { background: rgba(224,64,64,0.15);  color: #e08080; border: 1px solid rgba(224,64,64,0.25); }

.lb-empty {
  text-align: center; padding: 1.375rem 0;
  color: var(--text-dim); font-size: 0.8125rem; line-height: 2;
  font-style: italic;
}
.lb-loading {
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 1.25rem 0; color: var(--text-dim); font-size: 0.8125rem;
}
.lb-spinner {
  display: inline-block; color: var(--red);
  animation: spin 1.5s linear infinite; font-size: 1.125rem;
}
.lb-error { color: rgba(224,80,80,0.75) !important; }

/* ═══════════════════════════════════════════════════════
   GAME OVER — RANG
═══════════════════════════════════════════════════════ */
#go-rank {
  font-family: 'Cinzel', serif; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 2px; text-align: center;
  padding: 0.625rem 1.5rem; border-radius: 8px; margin-bottom: 1.25rem;
  min-height: 1.5rem;
}
#go-rank.go-rank-top1  { color: var(--gold); text-shadow: 0 0 16px var(--gold); background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.3); }
#go-rank.go-rank-good  { color: #a0c8ff; background: rgba(64,128,224,0.1); border: 1px solid rgba(64,128,224,0.25); }
#go-rank.go-rank-out   { color: var(--text-dim); font-size: 0.75rem; }
.go-rank-loading {
  color: var(--text-dim); font-size: 0.8125rem;
  animation: flicker 1s ease-in-out infinite;
  padding: 0.625rem 1.5rem; border-radius: 8px; margin-bottom: 1.25rem;
  border: 1px solid rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════════════════════
   PIÈCES — HUD EN JEU
═══════════════════════════════════════════════════════ */
#hud-coins {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--panel-bg); border: 1px solid rgba(240,192,64,0.4);
  border-radius: 0.5rem; padding: 0.375rem 0.875rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 14px rgba(240,192,64,0.12);
}
#hud-coins-icon {
  font-size: 1rem; color: var(--gold);
  text-shadow: 0 0 8px rgba(240,192,64,0.8);
  animation: flicker 3s ease-in-out infinite;
}
#hud-coins-value {
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(240,192,64,0.5);
}

/* ═══════════════════════════════════════════════════════
   PIÈCES — MENU PRINCIPAL
═══════════════════════════════════════════════════════ */
#menu-coins {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: rgba(6,4,14,0.88);
  border: 1px solid rgba(240,192,64,0.45);
  border-radius: 2rem; padding: 0.42rem 1.1rem;
  box-shadow: 0 0 22px rgba(240,192,64,0.18), inset 0 1px 0 rgba(240,192,64,0.1);
  backdrop-filter: blur(6px);
}
#menu-coins-icon {
  font-size: 1rem; color: var(--gold);
  text-shadow: 0 0 10px rgba(240,192,64,0.9);
  animation: flicker 3s ease-in-out infinite;
}
#menu-coins-value {
  font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 900;
  color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(240,192,64,0.6);
}
#menu-coins-label {
  font-size: 0.6rem; letter-spacing: 3px; color: var(--gold-dim);
  text-transform: uppercase; font-family: 'Cinzel', serif; font-weight: 700;
  align-self: center; margin-bottom: 0;
}

/* Stat row pièces dans game over */
.stat-row-coins span:first-child { color: var(--gold); }
.stat-row-coins span:last-child  { color: var(--gold) !important; font-size: 0.85rem !important; }

/* ═══════════════════════════════════════════════════════
   AUTEL DES ÂMES — BOUTIQUE MÉTA
═══════════════════════════════════════════════════════ */

#shop-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(8,4,16,0.65), rgba(0,0,0,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(5px);
}
#shop-overlay.hidden { display: none; }

#shop-modal {
  position: relative;
  width: min(1280px, 98vw);
  max-height: min(860px, 95vh);
  padding: 2.1rem 2.2rem 1.6rem;
  border-radius: 1.1rem;
  background: radial-gradient(circle at 0% 0%, rgba(224,64,64,0.18), rgba(10,8,22,0.98));
  border: 1px solid rgba(240,192,64,0.35);
  box-shadow:
    0 0 60px rgba(0,0,0,0.85),
    0 0 42px rgba(240,192,64,0.18);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

#shop-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.shop-title-block {
  text-align: center;
}

#shop-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow:
    0 0 24px rgba(240,192,64,0.8),
    0 0 60px rgba(240,192,64,0.28);
}

#shop-subtitle {
  font-size: 0.82rem;
  letter-spacing: 2.4px;
  color: var(--text-dim);
  margin-top: 2px;
}

#shop-coins-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  background: rgba(8,6,18,0.96);
  border: 1px solid rgba(240,192,64,0.45);
  box-shadow: 0 0 22px rgba(240,192,64,0.2), inset 0 1px 0 rgba(240,192,64,0.06);
}

#shop-coins-icon {
  font-size: 1rem;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240,192,64,0.9);
}
#shop-coins-value {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 2px;
}
#shop-coins-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--gold-dim);
}

#shop-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.shop-tab {
  flex: 0 0 auto;
  padding: 0.52rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.shop-tab:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: var(--text-bright);
}
.shop-tab-active {
  background: rgba(240,192,64,0.18);
  border-color: rgba(240,192,64,0.7);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(240,192,64,0.3);
}

#shop-lists {
  flex: 1;
  min-height: 0;
}

.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
  max-height: 640px;
  padding-right: 0.25rem;
  overflow-y: auto;
}
.shop-list.hidden { display: none; }

.shop-list::-webkit-scrollbar {
  width: 4px;
}
.shop-list::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,0.35);
  border-radius: 2px;
}

.shop-card {
  position: relative;
  padding: 1.4rem 1.3rem 1.1rem;
  border-radius: 0.85rem;
  background: rgba(12,8,24,0.96);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 18px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.shop-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shop-card-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, rgba(240,192,64,0.4), rgba(40,12,16,0.9));
  box-shadow: 0 0 14px rgba(240,192,64,0.35);
  font-size: 1.25rem;
}
.shop-card-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.shop-card-category {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--text-dim);
}
.shop-card-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.shop-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.shop-card-level {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  color: rgba(240,192,64,0.85);
  text-transform: uppercase;
}
.shop-card-cost {
  font-size: 0.76rem;
  color: var(--gold);
}
.shop-card-cost span {
  margin-left: 2px;
}

.shop-buy-btn {
  margin-top: 0.4rem;
  align-self: stretch;
  padding: 0.5rem 0.3rem;
  border-radius: 0.55rem;
  border: none;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, #7a5010, #e0b030);
  color: #1a0f00;
  box-shadow: 0 3px 12px rgba(240,192,64,0.3);
  transition: all 0.18s ease;
}
.shop-buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(240,192,64,0.5);
}
.shop-buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(240,192,64,0.35);
}
.shop-buy-btn.disabled {
  cursor: default;
  background: rgba(40,32,32,0.9);
  color: rgba(220,200,160,0.6);
  box-shadow: none;
}
.shop-card.badge-max {
  border-color: rgba(120,200,120,0.7);
  box-shadow: 0 0 18px rgba(120,200,120,0.25);
}
.shop-card.badge-unlocked {
  border-color: rgba(240,192,64,0.7);
  box-shadow: 0 0 18px rgba(240,192,64,0.25);
}
.shop-tag {
  position: absolute;
  top: 0.4rem;
  right: 0.65rem;
  font-size: 0.56rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}
.shop-tag-max {
  background: rgba(80,200,120,0.2);
  color: #a8ffc8;
  border-color: rgba(80,200,120,0.5);
}
.shop-tag-owned {
  background: rgba(240,192,64,0.18);
  color: var(--gold);
  border-color: rgba(240,192,64,0.7);
}
.shop-tag-locked {
  background: rgba(80,80,80,0.25);
  color: rgba(210,210,210,0.7);
  border-color: rgba(150,150,150,0.6);
}

#shop-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.4);
  color: rgba(250,240,220,0.9);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
#shop-close-btn:hover {
  background: rgba(80,20,20,0.85);
  border-color: rgba(240,192,64,0.6);
  box-shadow: 0 0 14px rgba(240,192,64,0.4);
}

/* ═══════════════════════════════════════════════════════
   HUD — NOUVEAU LAYOUT BAS
═══════════════════════════════════════════════════════ */

/* Bas centre — HP + Sprint */
#hud-bottom-center {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem;
  min-width: clamp(14rem, 8vw, 8rem);
}

/* Bas gauche — Kills + Stats */
#hud-bottom-left {
  position: absolute; bottom: 1rem; left: 1rem;
  display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start;
}
#hud-stats {
  background: var(--panel-bg); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem; padding: 0.3rem 0.75rem;
  display: flex; gap: 0.75rem; align-items: center;
  backdrop-filter: blur(4px);
}
.hud-stat {
  font-size: 0.65rem; font-weight: 700;
  color: var(--text-dim); letter-spacing: 0.5px;
  font-family: 'Cinzel', serif;
}
.hud-stat.buffed { color: var(--gold); text-shadow: 0 0 6px rgba(240,192,64,0.4); }

/* Bas droit — Weapon slots */
#hud-weapon-slots {
  position: absolute; bottom: 1rem; right: 1rem;
  display: flex; gap: 0.3rem; align-items: flex-end;
  background: var(--panel-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.6rem;
  padding: 0.375rem 0.5rem;
  backdrop-filter: blur(4px);
}
.weapon-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 2.25rem; height: 2.5rem;
  border-radius: 0.4rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.2s ease;
  opacity: 0.28; filter: grayscale(1);
}
.weapon-slot.active {
  opacity: 1; filter: none;
  border-color: rgba(240,192,64,0.5);
  background: rgba(240,192,64,0.07);
  box-shadow: 0 0 8px rgba(240,192,64,0.15);
}
.slot-icon { font-size: 1.1rem; line-height: 1; }
.slot-level {
  font-family: 'Cinzel', serif; font-size: 0.45rem; font-weight: 700;
  color: var(--gold); line-height: 1; min-height: 0.5rem;
}

/* ═══════════════════════════════════════════════════════
   COMPTEUR DE MANCHE — HUD
═══════════════════════════════════════════════════════ */
#hud-manche-counter {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: var(--panel-bg);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 0.4rem;
  padding: 0.25rem 0.75rem;
  font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700;
  color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(240,192,64,0.4);
  backdrop-filter: blur(4px);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   OVERLAY INTERLUDE MANCHE — notification compacte type succès
═══════════════════════════════════════════════════════ */
#manche-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  /* Juste sous le bloc niveau (hud-top ~0.75rem + ~3rem) + écart ~0,75–1 cm */
  padding-top: 13rem;
  z-index: 50; pointer-events: none;
}
#manche-overlay.hidden { display: none; }

#manche-overlay-panel {
  background: rgba(12, 10, 22, 0.88);
  border: 1px solid rgba(240, 192, 64, 0.4);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 16px rgba(240, 192, 64, 0.12);
  backdrop-filter: blur(6px);
  animation: mancheIn 0.3s ease-out;
}
@keyframes mancheIn {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

#manche-overlay-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240, 192, 64, 0.4);
  letter-spacing: 1px;
  margin: 0 0 0.25rem 0;
}

#manche-overlay-countdown {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin: 0;
}
#manche-overlay-cd {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(240, 192, 64, 0.35);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — petits écrans
═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Leaderboard : cacher colonne DATE, réajuster grid */
  #lb-cols-header, .lb-row {
    grid-template-columns: 2.5rem 1fr 4.5rem 3.5rem 3rem 5.25rem;
  }
  .lb-col-date, .lb-date { display: none; }
}

@media (max-width: 600px) {
  /* Leaderboard : cacher aussi NIVEAU sur très petit */
  #lb-cols-header, .lb-row {
    grid-template-columns: 2rem 1fr 4rem 3rem 5rem;
  }
  .lb-col-level, .lb-level { display: none; }
  #leaderboard-panel { padding: 0.75rem; }

  /* Level cards : forcer 1 colonne */
  #level-cards {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
  .level-card { max-width: 100%; }
}